diff options
author | dizzy <diosmosis@users.noreply.github.com> | 2021-09-30 16:02:03 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-30 16:02:03 +0300 |
commit | c69f12a66a86c93e6f9ad8449cf7c4957b128768 (patch) | |
tree | 4aa8a4fc17715fddcd0a5f5080f3464a9729201c /plugins/CoreHome/vue/src | |
parent | 10fe3ec18cb29969cfa44bd4d9608e5e0d33c041 (diff) |
[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
Diffstat (limited to 'plugins/CoreHome/vue/src')
-rw-r--r-- | plugins/CoreHome/vue/src/Alert/Alert.adapter.ts | 52 | ||||
-rw-r--r-- | plugins/CoreHome/vue/src/Alert/Alert.vue | 21 | ||||
-rw-r--r-- | plugins/CoreHome/vue/src/Alert/alert.less | 124 | ||||
-rw-r--r-- | plugins/CoreHome/vue/src/index.ts | 1 |
4 files changed, 198 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; + } + } +} diff --git a/plugins/CoreHome/vue/src/index.ts b/plugins/CoreHome/vue/src/index.ts index 8c7273ec62..750b337f54 100644 --- a/plugins/CoreHome/vue/src/index.ts +++ b/plugins/CoreHome/vue/src/index.ts @@ -1,3 +1,4 @@ export { default as activityIndicatorAdapter } from './ActivityIndicator/ActivityIndicator.adapter'; export { default as ActivityIndicator } from './ActivityIndicator/ActivityIndicator.vue'; export { default as translate } from './translate'; +export { default as alertAdapter } from './Alert/Alert.adapter'; |