[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
This commit is contained in:
Ferdinand Thiessen 2021-05-20 20:31:37 +02:00
parent 734a3e51c9
commit 0873b2da22
6 changed files with 40 additions and 32 deletions

View File

@ -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": {

View File

@ -1,13 +1,21 @@
<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-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-btn v-close-popup label="Verknüpfung erstellen" dense @click="addShortCut(child)" />
</q-menu>
<q-item-section avatar>
<q-icon :name='child.icon' />
<q-icon :name="child.icon" />
</q-item-section>
<q-item-section>
<q-item-label>
@ -38,13 +46,14 @@ export default defineComponent({
addShortCut: (val: FG_Plugin.MenuLink) => val.link,
},
setup(props, { emit }) {
function isGranted(val: FG_Plugin.MenuLink) { return hasPermissions(val.permissions || [])};
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 };

View File

@ -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 };
},

4
src/plugins.d.ts vendored
View File

@ -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[];

View File

@ -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'],

View File

@ -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==