89 lines
2.2 KiB
Vue
89 lines
2.2 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<label :for="inputId" class="font-bold uppercase text-xl mb-2">{{ label }}</label>
|
|
<div class="flex items-end gap-8">
|
|
<input
|
|
:id="inputId"
|
|
:value="modelValue"
|
|
v-maska="maskOptions"
|
|
type="text"
|
|
:maxlength="maxLength"
|
|
:placeholder="placeholderText"
|
|
class="border-b border-black flex-1 min-w-0 text-xl uppercase h-[30px]"
|
|
@input="handleInput"
|
|
/>
|
|
<UiCheckbox
|
|
:id="checkboxId"
|
|
:model-value="allowAny"
|
|
label="Autoriser un format libre"
|
|
wrapper-class="ml-auto"
|
|
label-class="gap-3 whitespace-nowrap text-sm"
|
|
input-class="h-4 w-4 accent-primary-500"
|
|
@update:modelValue="handleAllowAnyChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { vMaska } from 'maska/vue'
|
|
type Props = {
|
|
modelValue: string
|
|
allowAny?: boolean
|
|
label?: string
|
|
id?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
allowAny: false,
|
|
label: 'Immatriculation',
|
|
id: 'license-plate'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: string): void
|
|
(event: 'update:allowAny', value: boolean): void
|
|
}>()
|
|
|
|
const inputId = computed(() => props.id)
|
|
const checkboxId = computed(() => `${props.id}-format`)
|
|
|
|
const maskOptions = computed(() =>
|
|
props.allowAny
|
|
? undefined
|
|
: {
|
|
mask: '@@-###-@@',
|
|
eager: true,
|
|
tokens: {
|
|
'@': {
|
|
pattern: /[A-Za-z]/,
|
|
transform: (char: string) => char.toUpperCase()
|
|
}
|
|
}
|
|
}
|
|
)
|
|
const placeholderText = computed(() => (props.allowAny ? '' : 'AA-123-AA'))
|
|
const maxLength = computed(() => (props.allowAny ? 20 : 9))
|
|
|
|
const handleInput = (event: Event) => {
|
|
const target = event.target as HTMLInputElement | null
|
|
if (!target) {
|
|
return
|
|
}
|
|
|
|
if (props.allowAny) {
|
|
emit('update:modelValue', target.value)
|
|
return
|
|
}
|
|
|
|
emit('update:modelValue', target.value)
|
|
}
|
|
|
|
const handleAllowAnyChange = (nextValue: boolean) => {
|
|
emit('update:allowAny', nextValue)
|
|
if (!nextValue) {
|
|
emit('update:modelValue', props.modelValue)
|
|
}
|
|
}
|
|
</script>
|