2023-09-29 10:45:18 +13:00
|
|
|
<template>
|
|
|
|
<q-btn
|
|
|
|
v-if="hasProperDataInput"
|
|
|
|
flat
|
|
|
|
class="appControlSingleMenu non-selectable"
|
|
|
|
dark
|
|
|
|
size="md"
|
|
|
|
no-caps
|
|
|
|
>
|
|
|
|
{{ menuTitle }}
|
|
|
|
|
|
|
|
<!-- Button menu-->
|
|
|
|
<q-menu
|
|
|
|
anchor="bottom left"
|
|
|
|
square
|
|
|
|
dark
|
|
|
|
transition-show="jump-down"
|
|
|
|
transition-hide="jump-up"
|
|
|
|
>
|
|
|
|
<q-list
|
|
|
|
class="appControlSingleMenu__list"
|
|
|
|
dark
|
|
|
|
>
|
|
|
|
<template
|
|
|
|
v-for="(menuItem,index) in menuData"
|
|
|
|
:key="index"
|
|
|
|
>
|
|
|
|
<q-separator
|
|
|
|
v-if="menuItem.mode === 'separator'"
|
|
|
|
class="appControlSingleMenu__separator"
|
|
|
|
dark
|
|
|
|
/>
|
|
|
|
|
|
|
|
<q-item
|
|
|
|
v-if="menuItem.mode === 'item'"
|
|
|
|
v-close-popup="menuItem.submenu === undefined ? true : false"
|
|
|
|
clickable
|
|
|
|
:class="['appControlSingleMenu__item', `text-${menuItem.specialColor}`, 'non-selectable']"
|
|
|
|
:disable="(!menuItem.conditions)"
|
2023-10-15 03:41:36 +13:00
|
|
|
@click="(menuItem.trigger)
|
|
|
|
? menuItem.triggerArguments
|
|
|
|
? menuItem.trigger(...menuItem.triggerArguments)
|
|
|
|
: menuItem.trigger()
|
|
|
|
: false"
|
2023-09-29 10:45:18 +13:00
|
|
|
>
|
|
|
|
<q-item-section>{{ menuItem.text }}</q-item-section>
|
|
|
|
<q-item-section avatar>
|
2023-10-15 03:41:36 +13:00
|
|
|
<q-icon
|
|
|
|
class="appControlSingleMenu__icon"
|
|
|
|
:name="menuItem.icon"
|
|
|
|
/>
|
2023-09-29 10:45:18 +13:00
|
|
|
</q-item-section>
|
|
|
|
|
|
|
|
<!-- Sub-menu-->
|
|
|
|
<q-menu
|
|
|
|
v-if="menuItem.submenu !== undefined"
|
|
|
|
anchor="top end"
|
|
|
|
self="top start"
|
|
|
|
square
|
|
|
|
dark
|
|
|
|
transition-show="jump-right"
|
|
|
|
transition-hide="jump-left"
|
2023-10-15 03:41:36 +13:00
|
|
|
class="-subMenu"
|
2023-09-29 10:45:18 +13:00
|
|
|
>
|
|
|
|
<q-list
|
|
|
|
class="appControlSingleMenu__list"
|
|
|
|
dark
|
|
|
|
>
|
|
|
|
<template
|
|
|
|
v-for="(submenuItem,subIndex) in menuItem.submenu"
|
|
|
|
:key="subIndex"
|
|
|
|
>
|
|
|
|
<q-separator
|
|
|
|
v-if="submenuItem.mode === 'separator'"
|
|
|
|
class="appControlSingleMenu__separator"
|
|
|
|
dark
|
|
|
|
/>
|
|
|
|
<q-item
|
|
|
|
v-if="submenuItem.mode === 'item'"
|
|
|
|
v-close-popup
|
|
|
|
clickable
|
|
|
|
:class="['appControlSingleMenu__item', `text-${submenuItem.specialColor}`, 'non-selectable']"
|
|
|
|
:disable="(!submenuItem.conditions)"
|
|
|
|
@click="(submenuItem.trigger) ? submenuItem.trigger() : false"
|
|
|
|
>
|
|
|
|
<q-item-section>{{ submenuItem.text }}</q-item-section>
|
|
|
|
<q-item-section avatar>
|
2023-10-15 03:41:36 +13:00
|
|
|
<q-icon
|
|
|
|
class="appControlSingleMenu__icon"
|
|
|
|
:name="submenuItem.icon"
|
|
|
|
/>
|
2023-09-29 10:45:18 +13:00
|
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
|
|
</template>
|
|
|
|
</q-list>
|
|
|
|
</q-menu>
|
|
|
|
<!-- Sub-menu end -->
|
|
|
|
</q-item>
|
|
|
|
</template>
|
|
|
|
</q-list>
|
|
|
|
</q-menu>
|
|
|
|
<!-- Main menu end -->
|
|
|
|
</q-btn>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { I_appMenusDataList } from 'app/interfaces/I_appMenusDataList'
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
|
|
dataInput: I_appMenusDataList
|
|
|
|
}>()
|
|
|
|
|
|
|
|
const hasProperDataInput = (props.dataInput.title && props.dataInput.data)
|
|
|
|
|
|
|
|
const menuTitle = props.dataInput.title
|
|
|
|
const menuData = props.dataInput.data
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.appControlSingleMenu {
|
2023-10-15 03:41:36 +13:00
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
color: $appControlMenus_singleHover;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__icon {
|
|
|
|
font-size: $iconSize;
|
|
|
|
}
|
2023-09-29 10:45:18 +13:00
|
|
|
|
2023-10-15 03:41:36 +13:00
|
|
|
&__list {
|
2023-09-29 10:45:18 +13:00
|
|
|
background-color: $appControlMenus_bgColor;
|
|
|
|
color: $appControlMenus_color;
|
|
|
|
}
|
|
|
|
|
2023-10-15 03:41:36 +13:00
|
|
|
&__item {
|
2023-09-29 10:45:18 +13:00
|
|
|
min-height: 42px;
|
2023-10-15 03:41:36 +13:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
2023-09-29 10:45:18 +13:00
|
|
|
color: $appControlMenus_singleHover;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-10-15 03:41:36 +13:00
|
|
|
&__separator {
|
2023-09-29 10:45:18 +13:00
|
|
|
background-color: $appControlMenus_separatorColor;
|
|
|
|
height: 0.5px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|