kopia lustrzana https://github.com/elk-zone/elk
61 wiersze
1.7 KiB
Vue
61 wiersze
1.7 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: 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" placeholder="Label"
|
|
input-base
|
|
>
|
|
<input
|
|
v-model="form.fieldsAttributes[i - 1].value"
|
|
type="text" placeholder="Content"
|
|
input-base
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|