81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import type { mastodon } from 'masto'
|
|
|
|
const { form } = defineModel<{
|
|
form: {
|
|
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
|
|
}
|
|
}>()
|
|
const dropdown = $ref<any>()
|
|
|
|
const fieldIcons = computed(() =>
|
|
Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
|
|
getAccountFieldIcon(form.value.fieldsAttributes[i].name),
|
|
),
|
|
)
|
|
|
|
const fieldCount = $computed(() => {
|
|
// find last non-empty field
|
|
const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
|
|
if (idx === -1)
|
|
return 1
|
|
return Math.min(
|
|
form.value.fieldsAttributes.length - idx + 1,
|
|
maxAccountFieldCount.value,
|
|
)
|
|
})
|
|
|
|
const chooseIcon = (i: number, text: string) => {
|
|
form.value.fieldsAttributes[i].name = text
|
|
dropdown[i]?.hide()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div space-y-2>
|
|
<div font-medium>
|
|
{{ $t('settings.profile.appearance.profile_metadata') }}
|
|
</div>
|
|
<div text-sm text-secondary>
|
|
{{ $t('settings.profile.appearance.profile_metadata_desc', [maxAccountFieldCount]) }}
|
|
</div>
|
|
|
|
<div flex="~ col gap4">
|
|
<div v-for="i in fieldCount" :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" placeholder="Label"
|
|
input-base
|
|
>
|
|
<input
|
|
v-model="form.fieldsAttributes[i - 1].value"
|
|
type="text" placeholder="Content"
|
|
input-base
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|