elk/components/common/dropdown/DropdownItem.vue

73 lines
1.4 KiB
Vue
Raw Normal View History

2022-11-24 11:34:05 +03:00
<script setup lang="ts">
import { dropdownContextKey } from './ctx'
const props = defineProps<{
text?: string
2022-11-24 12:15:58 +03:00
description?: string
2022-11-24 11:34:05 +03:00
icon?: string
2022-11-24 12:15:58 +03:00
checked?: boolean
command?: boolean
2022-11-24 11:34:05 +03:00
}>()
const emit = defineEmits(['click'])
2022-11-26 08:05:44 +03:00
const { hide } = inject(dropdownContextKey, undefined) || {}
2022-11-24 11:34:05 +03:00
const el = ref<HTMLDivElement>()
2022-11-24 11:34:05 +03:00
const handleClick = (evt: MouseEvent) => {
2022-11-26 08:05:44 +03:00
hide?.()
2022-11-24 11:34:05 +03:00
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)
},
})
2022-11-24 11:34:05 +03:00
</script>
<template>
2022-11-24 12:15:58 +03:00
<div
v-bind="$attrs" ref="el"
flex gap-3 items-center cursor-pointer px4 py3
hover-bg-active
:aria-label="text"
2022-11-24 12:15:58 +03:00
@click="handleClick"
>
2022-11-24 11:34:05 +03:00
<div v-if="icon" :class="icon" />
2022-11-24 12:15:58 +03:00
<div flex="~ col">
2022-11-26 08:05:44 +03:00
<div text-15px>
<slot>
{{ text }}
</slot>
2022-11-24 12:15:58 +03:00
</div>
<div text-3 text-secondary>
2022-11-24 12:15:58 +03:00
<slot name="description">
<p v-if="description">
{{ description }}
</p>
</slot>
</div>
</div>
<div flex-auto />
<div v-if="checked" i-ri:check-line />
2022-11-26 15:58:10 +03:00
<slot name="actions" />
2022-11-24 11:34:05 +03:00
</div>
</template>