elk/components/settings/SettingsProfileMetadata.vue

81 lines
2.5 KiB
Vue
Raw Normal View History

<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
const form = defineModel<{
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
}>({ required: true })
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,
)
})
function 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="$t('tooltip.pick_an_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-60 m2 me1>
<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-text-secondary
:placeholder="$t('settings.profile.appearance.profile_metadata_label')"
input-base
>
<input
v-model="form.fieldsAttributes[i - 1].value"
type="text" placeholder-text-secondary
:placeholder="$t('settings.profile.appearance.profile_metadata_value')"
input-base
>
</div>
</div>
</div>
</template>