45 lines
995 B
Vue
45 lines
995 B
Vue
<template>
|
|
<div
|
|
class="DropDown"
|
|
:class="{ active }"
|
|
ref="dropdown"
|
|
>
|
|
<button @click="active = !active">
|
|
<span>{{ current.label }}</span>
|
|
<Icon class="icon" name="uil:angle-down" mode="svg" />
|
|
</button>
|
|
<ul>
|
|
<li
|
|
v-for="element in elements"
|
|
@click="click(element)"
|
|
:class="{ selected : element.value === current.value }"
|
|
>
|
|
{{ element.label }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { DropDownElement } from '../../../../shared/DropDown'
|
|
|
|
type Props = {
|
|
elements : DropDownElement[]
|
|
current : DropDownElement
|
|
}
|
|
|
|
const { elements = [] } = defineProps<Props>()
|
|
const emit = defineEmits(['click'])
|
|
|
|
const active = ref(false)
|
|
const dropdown = useTemplateRef<HTMLDivElement>('dropdown')
|
|
|
|
const click = (element : DropDownElement) => {
|
|
emit('click', element)
|
|
active.value = false
|
|
}
|
|
|
|
onMounted(() => {
|
|
onClickOutside(dropdown, () => active.value = false)
|
|
})
|
|
</script>
|