From c69f12a66a86c93e6f9ad8449cf7c4957b128768 Mon Sep 17 00:00:00 2001
From: dizzy <diosmosis@users.noreply.github.com>
Date: Thu, 30 Sep 2021 06:02:03 -0700
Subject: [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
---
 plugins/CoreHome/vue/src/Alert/Alert.adapter.ts | 52 +++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 plugins/CoreHome/vue/src/Alert/Alert.adapter.ts

(limited to 'plugins/CoreHome/vue/src/Alert/Alert.adapter.ts')

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);
-- 
cgit v1.2.3