[Vue] migrate manage goals directive and twig templates to Vue (#18917)

* start converting goal form/edit from twig/angularjs

* more tweaks

* some more changes

* get to build

* fix typo in directive name causing strange regressions

* get to build and load in UI, twig postEvent hack seems to work

* another TODO

* implement alternative way to use twig events in vue components using named slots, does not work in all cases

* remove templates

* allow target=_blank in dompurify if noreferrer noopener are present

* Allow numbers for fieldcheckbox value.

* remove use of const in vanilla js

* get managegoals.vue to work + remove angularjs files

* correct camel case

* correct property name

* correct 0 check

* switch back to angularjs adapter and using dynamic components for twig events since piwik-manage-goals is selected for in plugins and because angularjs directives are sometimes pre-compiled, sometimes not

1 files changed, 20 insertions, 11 deletions

diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index dfcdb12b84..077d698ddf 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -152,12 +152,12 @@ window.piwikHelper = {
 
     // initial call for 'body' later in this file
     compileVueEntryComponents: function (selector) {
-      function toKebabCase(arg) {
-        return arg.substring(0, 1).toLowerCase() + arg.substring(1)
-          .replace(/[A-Z]/g, function (s) { return '-' + s.toLowerCase(); });
+      function toCamelCase(arg) {
+        return arg.substring(0, 1) + arg.substring(1)
+          .replace(/-[a-z]/g, function (s) { return s.substring(1).toUpperCase(); });
       }
 
-      $('[vue-entry]', selector).each(function () {
+      $('[vue-entry]', selector).add($(selector).filter('[vue-entry]')).each(function () {
         var entry = $(this).attr('vue-entry');
 
         var parts = entry.split('.');
@@ -165,7 +165,6 @@ window.piwikHelper = {
           throw new Error('Expects vue-entry to have format Plugin.Component, where Component is exported Vue component. Got: ' + entry);
         }
 
-        var createVNode = Vue.createVNode;
         var createVueApp = CoreHome.createVueApp;
         var plugin = window[parts[0]];
         if (!plugin) {
@@ -177,12 +176,17 @@ window.piwikHelper = {
           throw new Error('Unknown component in vue-entry: ' + entry);
         }
 
+        var paramsStr = '';
+
         var componentParams = {};
         $.each(this.attributes, function () {
           if (this.name === 'vue-entry') {
             return;
           }
 
+          var camelName = toCamelCase(this.name);
+          paramsStr += ':' + this.name + '=' + JSON.stringify(camelName) + ' ';
+
           var value = this.value;
           try {
             value = JSON.parse(this.value);
@@ -190,14 +194,20 @@ window.piwikHelper = {
             // pass
           }
 
-          componentParams[toKebabCase(this.name)] = value;
+          componentParams[camelName] = value;
         });
 
+        // NOTE: we could just do createVueApp(component, componentParams), but Vue will not allow
+        // slots to be in the vue-entry element this way. So instead, we create a quick
+        // template that references the root component and wraps the vue-entry component's html.
+        // this allows using slots in twig.
         var app = createVueApp({
-          render: function () {
-            return createVNode(component, componentParams);
-          },
+          template: '<root ' + paramsStr + '>' + this.innerHTML + '</root>',
+          data: function () {
+            return componentParams;
+          }
         });
+        app.component('root', component);
         app.mount(this);
 
         this.addEventListener('matomoVueDestroy', function () {
@@ -347,7 +357,7 @@ window.piwikHelper = {
             // skip this button if it's part of another modal, the current modal can launch
             // (which is true if there are more than one parent elements contained in domElem,
             // w/ css class ui-confirm)
-            const uiConfirm = $button.parents('.ui-confirm,[ui-confirm]').filter(function () {
+            var uiConfirm = $button.parents('.ui-confirm,[ui-confirm]').filter(function () {
               return domElem[0] === this || $.contains(domElem[0], this);
             });
             if (uiConfirm.length > 1) {
@@ -381,7 +391,6 @@ window.piwikHelper = {
                 })
             }
 
-
             $footer.append(button);
         });