elk/components/settings/SettingsProfileMetadata.vue

59 lines
1.7 KiB
Vue

<script setup lang="ts">
import type { UpdateCredentialsParams } from 'masto'
const { form } = defineModel<{
form: {
fieldsAttributes: NonNullable<UpdateCredentialsParams['fieldsAttributes']>
}
}>()
const fieldIcons = computed(() =>
Array.from({ length: 4 }, (_, i) =>
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
),
)
</script>
<template>
<div flex="~ col gap4">
<div v-for="i in 4" :key="i" flex="~ gap3" items-center>
<CommonDropdown placement="left">
<CommonTooltip content="Pick a icon">
<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'">
<div btn-action-icon @click="form.fieldsAttributes[i - 1].name = text">
<div text-xl :class="icon" />
</div>
</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>