[Vue] Migrate piwik-alert directive to Vue component (#18075)

* fix generate vue component command (new subfolder organization was not updated there)

* migrate alert directive as example of handling angularjs transclude

* production build

* add sourcemaps

* Update Alert.adapter.ts

* vue build

1 files changed, 52 insertions, 0 deletions

diff --git a/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts b/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts
new file mode 100644
index 0000000000..b580fd4c5a
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts
@@ -0,0 +1,52 @@
+import { createApp, ref } from 'vue';
+import Alert from './Alert.vue';
+
+interface AlertAdapterScope extends ng.IScope {
+  severity: string;
+}
+
+export default function alertAdapter(): ng.IDirective {
+  return {
+    restrict: 'A',
+    transclude: true,
+    scope: {
+      severity: '@piwikAlert',
+    },
+    template: '<div ng-transclude/>',
+    compile: function alertAdapterCompile() {
+      return {
+        post: function alertAdapterPostLink(
+          scope: AlertAdapterScope,
+          element: ng.IAugmentedJQuery,
+        ) {
+          const clone = element.find('[ng-transclude]');
+
+          const app = createApp({
+            template: '<alert :severity="severity"><div ref="transcludeTarget"/></alert>',
+            data() {
+              return { severity: scope.severity };
+            },
+            setup() {
+              const transcludeTarget = ref(null);
+              return {
+                transcludeTarget,
+              };
+            },
+          });
+          app.component('alert', Alert);
+          const vm = app.mount(element[0]);
+
+          scope.$watch('severity', (newValue: string) => {
+            vm.severity = newValue;
+          });
+
+          $(vm.transcludeTarget).append(clone);
+        },
+      };
+    },
+  };
+}
+
+alertAdapter.$inject = [];
+
+angular.module('piwikApp').directive('piwikAlert', alertAdapter);