69 lines
2.5 KiB
Vue
69 lines
2.5 KiB
Vue
<template>
|
|
<Menu as="div" class="relative inline-block h-full">
|
|
<div class="h-full">
|
|
<MenuButton
|
|
:class="[
|
|
'flex flex-col items-center justify-around h-full w-min p-1 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
|
|
active ? 'text-green-500' : ''
|
|
]"
|
|
:aria-label="label || 'Options'">
|
|
<component v-if="icon" :is="icon" class="h-6 w-6" aria-hidden="true" />
|
|
<ToolbarLabel :label="label" />
|
|
</MenuButton>
|
|
</div>
|
|
|
|
<MenuItems
|
|
class="absolute left-0 mt-2 w-max origin-top-left rounded-sm bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
|
|
<div class="px-1 py-1">
|
|
<MenuItem v-for="(item, index) in items" :key="index" v-slot="{ active }" :disabled="item.disabled">
|
|
<button
|
|
:class="[
|
|
item.isSelected ? 'text-green-500' : active ? 'text-green-500' : 'text-white',
|
|
'group flex w-full items-center rounded-sm px-3 py-2 text-sm',
|
|
item.disabled ? 'opacity-50 cursor-not-allowed' : ''
|
|
]"
|
|
@click="item.onClick">
|
|
{{ item.label }}
|
|
</button>
|
|
</MenuItem>
|
|
</div>
|
|
</MenuItems>
|
|
</Menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
|
|
import ToolbarLabel from './ToolbarLabel.vue';
|
|
|
|
defineProps({
|
|
icon: {
|
|
type: [Object, Function],
|
|
required: false,
|
|
default: null
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
items: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
validator: items => {
|
|
return items.every(
|
|
item =>
|
|
item &&
|
|
item.label &&
|
|
typeof item.onClick === 'function' &&
|
|
(item.isSelected === undefined || typeof item.isSelected === 'boolean')
|
|
);
|
|
}
|
|
}
|
|
});
|
|
</script>
|