77 lines
1.4 KiB
Vue
77 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
is?: string
|
|
text?: string
|
|
description?: string
|
|
icon?: string
|
|
checked?: boolean
|
|
command?: boolean
|
|
}>(), {
|
|
is: 'div',
|
|
})
|
|
const emit = defineEmits(['click'])
|
|
|
|
const { hide } = useDropdownContext() || {}
|
|
|
|
const el = ref<HTMLDivElement>()
|
|
|
|
const handleClick = (evt: MouseEvent) => {
|
|
hide?.()
|
|
emit('click', evt)
|
|
}
|
|
|
|
useCommand({
|
|
scope: 'Actions',
|
|
|
|
order: -1,
|
|
visible: () => props.command && props.text,
|
|
|
|
name: () => props.text!,
|
|
icon: () => props.icon ?? 'i-ri:question-line',
|
|
description: () => props.description,
|
|
|
|
onActivate() {
|
|
const clickEvent = new MouseEvent('click', {
|
|
view: window,
|
|
bubbles: true,
|
|
cancelable: true,
|
|
})
|
|
el.value?.dispatchEvent(clickEvent)
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
v-bind="$attrs"
|
|
:is="is"
|
|
ref="el"
|
|
flex gap-3 items-center cursor-pointer px4 py3
|
|
select-none
|
|
hover-bg-active
|
|
:aria-label="text"
|
|
@click="handleClick"
|
|
>
|
|
<div v-if="icon" :class="icon" />
|
|
<div flex="~ col">
|
|
<div text-15px>
|
|
<slot>
|
|
{{ text }}
|
|
</slot>
|
|
</div>
|
|
<div text-3 text-secondary>
|
|
<slot name="description">
|
|
<p v-if="description">
|
|
{{ description }}
|
|
</p>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
|
|
<div flex-auto />
|
|
|
|
<div v-if="checked" i-ri:check-line />
|
|
<slot name="actions" />
|
|
</component>
|
|
</template>
|