fix(settings): close dropdown after choosing icon
parent
ddb6e90e21
commit
5dffd380b0
|
@ -7,8 +7,13 @@ defineProps<{
|
||||||
const dropdown = $ref<any>()
|
const dropdown = $ref<any>()
|
||||||
const colorMode = useColorMode()
|
const colorMode = useColorMode()
|
||||||
|
|
||||||
|
const hide = () => dropdown.hide()
|
||||||
provide(dropdownContextKey, {
|
provide(dropdownContextKey, {
|
||||||
hide: () => dropdown.hide(),
|
hide,
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
hide,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -6,18 +6,24 @@ const { form } = defineModel<{
|
||||||
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
|
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
|
||||||
}
|
}
|
||||||
}>()
|
}>()
|
||||||
|
const dropdown = $ref<any>()
|
||||||
|
|
||||||
const fieldIcons = computed(() =>
|
const fieldIcons = computed(() =>
|
||||||
Array.from({ length: 4 }, (_, i) =>
|
Array.from({ length: 4 }, (_, i) =>
|
||||||
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
|
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const chooseIcon = (i: number, text: string) => {
|
||||||
|
form.value.fieldsAttributes[i].name = text
|
||||||
|
dropdown[i]?.hide()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex="~ col gap4">
|
<div flex="~ col gap4">
|
||||||
<div v-for="i in 4" :key="i" flex="~ gap3" items-center>
|
<div v-for="i in 4" :key="i" flex="~ gap3" items-center>
|
||||||
<CommonDropdown placement="left">
|
<CommonDropdown ref="dropdown" placement="left">
|
||||||
<CommonTooltip content="Pick a icon">
|
<CommonTooltip content="Pick a icon">
|
||||||
<button btn-action-icon>
|
<button btn-action-icon>
|
||||||
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
|
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
|
||||||
|
@ -31,7 +37,7 @@ const fieldIcons = computed(() =>
|
||||||
:content="text"
|
:content="text"
|
||||||
>
|
>
|
||||||
<template v-if="text !== 'Joined'">
|
<template v-if="text !== 'Joined'">
|
||||||
<div btn-action-icon @click="form.fieldsAttributes[i - 1].name = text">
|
<div btn-action-icon @click="chooseIcon(i - 1, text)">
|
||||||
<div text-xl :class="icon" />
|
<div text-xl :class="icon" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue