Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
<fieldset class="tw-flex tw-gap-3 tw-items-start">
<FormGroup
v-slot="attrs"
class="tw-m-0 tw-min-w-16 tw-max-w-content tw-flex-1"
:errors="getFieldErrors(errors, 'typeId')"
>
<select
v-model="link.typeId"
v-bind="attrs"
class="tw-truncate tw-min-w-0"
:required="deletable"
:aria-label="t('link.fields.typeId')"
@blur="emit('check')"
>
<option :value="null" />
<option v-for="type in activeLinkTypes" :key="type.id" :value="type.id">
{{ type.name }}
</option>
<optgroup v-if="inactiveLinkTypes.length > 0" :label="t('linkType.inactive')">
<option v-for="type in inactiveLinkTypes" :key="type.id" :value="type.id">
{{ type.name }}
</option>
</optgroup>
</select>
</FormGroup>
<FormGroup v-slot="attrs" class="tw-m-0 tw-flex-[2]" :errors="getFieldErrors(errors, 'url')">
<input
v-bind="attrs"
ref="urlEl"
v-model="link.url"
type="url"
:required="deletable"
:aria-label="t('link.fields.url')"
:placeholder="t('link.urlExample')"
class="user-invalid:tw-text-rose-600"
@blur="onURLBlur"
/>
</FormGroup>
<button
type="button"
class="btn btn-sm btn-default tw-size-9 tw-translate-y-px"
:title="t('delete')"
:role="deletable ? undefined : 'presentation'"
:style="{ visibility: deletable ? undefined : 'hidden' }"
@click="emit('delete')"
>
<icon-system-uicons-trash />
<span class="tw-sr-only">{{ t('delete') }}</span>
</button>
</fieldset>
</template>
<script lang="ts" setup>
import { ErrorDetail } from '@rokoli/bnb'
import { computed, ref } from 'vue'
import { useI18n } from '@/i18n'
import { useLinkTypeStore } from '@/stores'
import { Link } from '@/types'
import FormGroup from '@/components/generic/FormGroup.vue'
import { getFieldErrors } from '@/form'
defineOptions({ compatConfig: { MODE: 3 } })
const link = defineModel<Link>({ required: true })
const props = defineProps<{ deletable?: boolean; errors: ErrorDetail[] }>()
const emit = defineEmits<{ check: []; delete: [] }>()
const { t } = useI18n()
const linkTypeStore = useLinkTypeStore()
const urlEl = ref<HTMLInputElement>()
const activeLinkTypes = computed(() => linkTypeStore.items.filter((l) => l.isActive))
const inactiveLinkTypes = computed(() => linkTypeStore.items.filter((l) => !l.isActive))
function onURLBlur() {
if (props.deletable || urlEl.value?.checkValidity()) emit('check')
}
</script>