47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
|
<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-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>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent, onMounted, PropType } from 'vue';
|
||
|
|
import { hasPermissions } from 'src/utils/permission';
|
||
|
|
import { FG_Plugin } from 'src/plugins';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'EssentialExpansionLink',
|
||
|
|
components: { },
|
||
|
|
props: {
|
||
|
|
entry: {
|
||
|
|
type: Object as PropType<FG_Plugin.MenuLink>,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
setup(props) {
|
||
|
|
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
|
||
|
|
);
|
||
|
|
onMounted(() => {
|
||
|
|
console.log(props.entry.children)
|
||
|
|
})
|
||
|
|
return { isGranted, title };
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|