[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

3 files changed, 197 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);
diff --git a/plugins/CoreHome/vue/src/Alert/Alert.vue b/plugins/CoreHome/vue/src/Alert/Alert.vue
new file mode 100644
index 0000000000..bb2af8afcd
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Alert/Alert.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="alert"
+    :class="{ [`alert-${severity}`]: true }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    severity: {
+      type: String,
+      required: true,
+    },
+  },
+});
+</script>
diff --git a/plugins/CoreHome/vue/src/Alert/alert.less b/plugins/CoreHome/vue/src/Alert/alert.less
new file mode 100644
index 0000000000..6d1dc174cb
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Alert/alert.less
@@ -0,0 +1,124 @@
+.alert-icon-center-vertically(@font-size) {
+  @half-height: @font-size / 2;
+  // IE8 doesn't support calc(): it's OK, the icon will just be aligned to the top
+  top: calc(~'50% - @{half-height}');
+  // phantomjs only supports -webkit-calc()
+  top: -webkit-calc(~'50% - @{half-height}');
+}
+
+.alert {
+  padding: 20px 20px 20px 60px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  font-size: 14px;
+  position: relative;
+  &:before {
+    font-family: "matomo";
+    content: "\e625";
+    position: absolute;
+    left: 20px;
+    line-height: 100%; // line-height = font-size
+    font-size: 24px;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+}
+
+body #content .alert-success p {
+  color: @color-green-piwik;
+}
+
+.alert-success {
+  color: @color-green-piwik;
+  border-color: @color-green-piwik;
+  &:before {
+    content: "\e63d";
+    color: @color-green-piwik;
+  }
+  p {
+    color: @color-green-piwik;
+  }
+  a {
+    color: @color-green-piwik;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+body #content .alert-info p {
+  color: #838383;
+}
+
+.alert-info {
+  color: #838383;
+  background-color: #F5F5F5;
+  font-size: 14px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  p {
+    color: #838383;
+  }
+  &:before {
+    color: #afafaf;
+    font-size: 20px;
+  }
+  a {
+    color: #838383;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+body #content .alert-warning p {
+  color: #fbf7f1;
+}
+
+.alert-warning {
+  color: #f57c00;
+  border-color: #f57c00;
+  &:before {
+    content: "\e621";
+    color: #f57c00;
+  }
+  p {
+    color: #f57c00;
+  }
+  a {
+    color: #f57c00;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+body #content .alert-danger p {
+  color: @color-red-piwik;
+}
+
+.alert-danger {
+  color: @color-red-piwik;
+  border-color: @color-red-piwik;
+  &:before {
+    content: "\e616";
+    color: @color-red-piwik;
+  }
+  p {
+    color: @color-red-piwik;
+  }
+  a {
+    color: @color-red-piwik;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}