♻️ [core] migrate main vue file to composition API

LSS-Manager · Jul 29, 2023 · 4cb9db2 · 4cb9db2
1 parent c9368eb
commit 4cb9db2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 72 deletions.
diff --git a/src/LSSMV4.vue b/src/LSSMV4.vue
@@ -2,7 +2,7 @@
     <div :id="id">
         <v-dialog></v-dialog>
         <notifications
-            v-for="group in notificationGroups"
+            v-for="group in notificationStore.groups"
             :key="group"
             :group="group.replace(' ', '_')"
             :position="group"
@@ -12,7 +12,7 @@
                 <div
                     class="lssm-notification"
                     :class="`alert-${props.item.type} notification-${props.item.type}`"
-                    @click.capture="getHandler(props, $event)()"
+                    @click.capture="clickHandler(props, $event)"
                 >
                     <img
                         v-if="props.item.data.icon"
@@ -44,72 +44,47 @@
     </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue';
+<script setup lang="ts">
+import { getCurrentInstance, onMounted } from 'vue';
 
-import { defineNotificationStore } from '@stores/notifications';
-import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
-import { mapState } from 'pinia';
+import { useNotificationStore } from '@stores/notifications';
 import { useRootStore } from '@stores/index';
 import { useSettingsStore } from '@stores/settings';
 
-import type { DefaultProps } from 'vue/types/options';
-import type { LSSMV4Computed, LSSMV4Data, LSSMV4Methods } from 'typings/LSSMV4';
-
-export default Vue.extend<
-    LSSMV4Data,
-    LSSMV4Methods,
-    LSSMV4Computed,
-    DefaultProps
->({
-    name: 'LSSMV4',
-    components: {},
-    data() {
-        const rootStore = useRootStore();
-        return {
-            faTimes,
-            id: rootStore.nodeAttribute('app', true),
-        };
-    },
-    computed: {
-        ...mapState(defineNotificationStore, {
-            notificationGroups: 'groups',
-        }),
-    },
-    methods: {
-        getHandler(props, $event) {
-            return () =>
-                (($event.target as HTMLElement).closest('button.close')
-                    ? undefined
-                    : props.item.data.clickHandler?.(props, $event)) ??
-                props.close();
-        },
-    },
-    mounted() {
-        useSettingsStore()
-            .getModule('global')
-            .then(({ iconBg, iconBgAsNavBg }) => {
-                if (iconBgAsNavBg) {
-                    useRootStore().addStyle({
-                        selectorText:
-                            '.navbar-default, .navbar-default .dropdown-menu',
-                        style: {
-                            'background-color': `${iconBg} !important`,
-                        },
-                    });
-                }
-            });
-
-        // Workaround for when modals container appears behind V4 instance (dialogs are behind modals)
-        const modalsContainer =
-            document.querySelector<HTMLDivElement>('#modals-container');
-        if (
-            modalsContainer &&
-            this.$el.compareDocumentPosition(modalsContainer) &
-                Node.DOCUMENT_POSITION_FOLLOWING
-        )
-            this.$el.before(modalsContainer);
-    },
+const rootStore = useRootStore();
+const notificationStore = useNotificationStore();
+
+const id = rootStore.nodeAttribute('app', true);
+const clickHandler = (props, $event) =>
+    (($event.target as HTMLElement).closest('button.close')
+        ? undefined
+        : props.item.data.clickHandler?.(props, $event)) ?? props.close();
+
+onMounted(() => {
+    useSettingsStore()
+        .getModule('global')
+        .then(({ iconBg, iconBgAsNavBg }) => {
+            if (iconBgAsNavBg) {
+                useRootStore().addStyle({
+                    selectorText:
+                        '.navbar-default, .navbar-default .dropdown-menu',
+                    style: {
+                        'background-color': `${iconBg} !important`,
+                    },
+                });
+            }
+        });
+
+    // Workaround for when modals container appears behind V4 instance (dialogs are behind modals)
+    const modalsContainer =
+        document.querySelector<HTMLDivElement>('#modals-container');
+    if (
+        modalsContainer &&
+        getCurrentInstance()?.proxy.$el.compareDocumentPosition(
+            modalsContainer
+        ) & Node.DOCUMENT_POSITION_FOLLOWING
+    )
+        getCurrentInstance()?.proxy.$el.before(modalsContainer);
 });
 </script>
 

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -65,18 +65,22 @@ export default async (Vue: VueConstructor): Promise<VueI18n> => {
     return i18n;
 };
 
-const useI18n = (scope: string) => {
+const useI18n = (scope?: string) => {
     const { t, tc } = useI18nHelper();
     return {
         $t: t,
         $tc: tc,
-        $m: (key: VueI18n.Path, args?: VueI18n.Values) =>
-            t(`${scope}.${key}`, args),
-        $mc: (
-            key: VueI18n.Path,
-            choice?: VueI18n.Choice,
-            args?: VueI18n.Values
-        ) => tc(`${scope}.${key}`, choice, args),
+        $m: scope
+            ? (key: VueI18n.Path, args?: VueI18n.Values) =>
+                  t(`${scope}.${key}`, args)
+            : t,
+        $mc: scope
+            ? (
+                  key: VueI18n.Path,
+                  choice?: VueI18n.Choice,
+                  args?: VueI18n.Values
+              ) => tc(`${scope}.${key}`, choice, args)
+            : tc,
     };
 };