[core][plugin] Fixed compatibility with Pinia

* API BREAK! Menu link title now must be a string or a function return a string
* Pinia unwraps Refs so we had to get rid of the ComputedRef
* Use current typescript

package.json

@@ -34,7 +34,7 @@
     "eslint-plugin-vue": "^7.9.0",
     "eslint-webpack-plugin": "^2.5.4",
     "prettier": "^2.3.0",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
     "vuedraggable": "^4.0.1"
   },
   "prettier": {

src/components/navigation/EssentialExpansionLink.vue

@@ -1,22 +1,30 @@
 <template>
-  <q-expansion-item v-if="isGranted(entry)" clickable tag="a" target="self" :label='title' :icon='entry.icon' expand-separator>
-      <q-list class='q-ml-lg'>
-        <div v-for='child in entry.children' :key='child.link'>
-    <q-item v-if='isGranted(child)' clickable :to='{name: child.link}'>
-      <q-menu context-menu>
-        <q-btn v-close-popup label='Verknüpfung erstellen' dense @click='addShortCut(child)'/>
-      </q-menu>
-      <q-item-section avatar>
-        <q-icon :name='child.icon' />
-      </q-item-section>
-      <q-item-section>
-        <q-item-label>
-          {{child.title}}
-        </q-item-label>
-      </q-item-section>
-    </q-item>
-        </div>
-      </q-list>
+  <q-expansion-item
+    v-if="isGranted(entry)"
+    clickable
+    tag="a"
+    target="self"
+    :label="title"
+    :icon="entry.icon"
+    expand-separator
+  >
+    <q-list class="q-ml-lg">
+      <div v-for="child in entry.children" :key="child.link">
+        <q-item v-if="isGranted(child)" clickable :to="{ name: child.link }">
+          <q-menu context-menu>
+            <q-btn v-close-popup label="Verknüpfung erstellen" dense @click="addShortCut(child)" />
+          </q-menu>
+          <q-item-section avatar>
+            <q-icon :name="child.icon" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>
+              {{ child.title }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
+    </q-list>
   </q-expansion-item>
 </template>
 
@@ -27,7 +35,7 @@ import { FG_Plugin } from 'src/plugins';
 
 export default defineComponent({
   name: 'EssentialExpansionLink',
-  components: {  },
+  components: {},
   props: {
     entry: {
       type: Object as PropType<FG_Plugin.MenuLink>,
@@ -37,17 +45,18 @@ export default defineComponent({
   emits: {
     addShortCut: (val: FG_Plugin.MenuLink) => val.link,
   },
-  setup(props, {emit}) {
-
-    function isGranted(val: FG_Plugin.MenuLink) { return hasPermissions(val.permissions || [])};
+  setup(props, { emit }) {
+    function isGranted(val: FG_Plugin.MenuLink) {
+      return hasPermissions(val.permissions || []);
+    }
     const title = computed(() =>
-      typeof props.entry.title === 'object' ? props.entry.title.value : props.entry.title
+      typeof props.entry.title === 'function' ? props.entry.title() : props.entry.title
     );
     function addShortCut(val: FG_Plugin.MenuLink) {
-      emit('addShortCut', val)
+      emit('addShortCut', val);
     }
 
-    return { isGranted, title, addShortCut};
+    return { isGranted, title, addShortCut };
   },
 });
 </script>

src/components/navigation/EssentialLink.vue

@@ -27,7 +27,7 @@ export default defineComponent({
   setup(props) {
     const isGranted = computed(() => hasPermissions(props.entry.permissions || []));
     const title = computed(() =>
-      typeof props.entry.title === 'object' ? props.entry.title.value : props.entry.title
+      typeof props.entry.title === 'function' ? props.entry.title() : props.entry.title
     );
     return { isGranted, title };
   },

src/plugins.d.ts

@@ -1,5 +1,5 @@
 import { RouteLocationRaw, RouteRecordRaw, RouteRecordName } from 'vue-router';
-import { Component, ComputedRef } from 'vue';
+import { Component } from 'vue';
 
 declare namespace FG_Plugin {
   /**
@@ -99,7 +99,7 @@ declare namespace FG_Plugin {
    * Base interface for internal use
    */
   interface MenuEntry {
-    title: string | ComputedRef<string>;
+    title: string | (() => string);
     icon: string;
     permissions?: string[];
     children?: this[];

src/plugins/user/routes/index.ts

@@ -1,11 +1,10 @@
 import { FG_Plugin } from 'src/plugins';
 import { useMainStore } from 'src/stores';
-import { computed } from 'vue';
 
 const mainRoutes: FG_Plugin.MenuRoute[] = [
   {
     get title() {
-      return computed(() => useMainStore().currentUser.display_name);
+      return () => useMainStore().currentUser.display_name;
     },
     icon: 'mdi-account',
     permissions: ['user'],

yarn.lock

@@ -8024,7 +8024,7 @@ typescript@4.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.2.tgz#1450f020618f872db0ea17317d16d8da8ddb8c4c"
   integrity sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==
 
-typescript@^4.2.3:
+typescript@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
   integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==