65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { UpdateCredentialsParams } from 'masto'
|
|
|
|
const { form } = defineModel<{
|
|
form: {
|
|
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
|
|
}
|
|
}>()
|
|
const dropdown = $ref<any>()
|
|
|
|
const fieldIcons = computed(() =>
|
|
Array.from({ length: 4 }, (_, i) =>
|
|
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
|
|
),
|
|
)
|
|
|
|
const chooseIcon = (i: number, text: string) => {
|
|
form.value.fieldsAttributes[i].name = text
|
|
dropdown[i]?.hide()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div flex="~ col gap4">
|
|
<div v-for="i in 4" :key="i" flex="~ gap3" items-center>
|
|
<CommonDropdown ref="dropdown" placement="left">
|
|
<CommonTooltip content="Pick a icon">
|
|
<button type="button" btn-action-icon>
|
|
<div :class="fieldIcons[i - 1] || 'i-ri:question-mark'" />
|
|
</button>
|
|
</CommonTooltip>
|
|
<template #popper>
|
|
<div flex="~ wrap gap-1" max-w-50 m2>
|
|
<CommonTooltip
|
|
v-for="(icon, text) in accountFieldIcons"
|
|
:key="icon"
|
|
:content="text"
|
|
>
|
|
<template v-if="text !== 'Joined'">
|
|
<button type="button" btn-action-icon @click="chooseIcon(i - 1, text)">
|
|
<div text-xl :class="icon" />
|
|
</button>
|
|
</template>
|
|
</CommonTooltip>
|
|
</div>
|
|
</template>
|
|
</CommonDropdown>
|
|
<input
|
|
v-model="form.fieldsAttributes[i - 1].name"
|
|
type="text"
|
|
p2 border-rounded w-full bg-transparent
|
|
outline-none border="~ base"
|
|
placeholder="Label"
|
|
>
|
|
<input
|
|
v-model="form.fieldsAttributes[i - 1].value"
|
|
type="text"
|
|
p2 border-rounded w-full bg-transparent
|
|
outline-none border="~ base"
|
|
placeholder="Content"
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|