20 lines
1.2 KiB
Vue
20 lines
1.2 KiB
Vue
<template>
|
|
<Label class="my-2">{{ label }}
|
|
<PinInputRoot :disabled="disabled" :default-value="model?.split('')" @update:model-value="(v) => model = v.join('')" @complete="() => emit('complete')" class="flex gap-2 items-center mt-1">
|
|
<PinInputInput :type="hidden ? 'password' : undefined" v-for="(id, index) in amount" :key="id" :index="index" class="border border-light-35 dark:border-dark-35 w-10 h-10 outline-none
|
|
bg-light-20 dark:bg-dark-20 text-center text-light-100 dark:text-dark-100 placeholder:text-light-60 dark:placeholder:text-dark-60 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20
|
|
data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 caret-light-50 dark:caret-dark-50" />
|
|
</PinInputRoot>
|
|
</Label>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { hidden = false, amount, label, disabled = false } = defineProps<{
|
|
hidden?: boolean
|
|
label?: string
|
|
amount: number
|
|
disabled?: boolean
|
|
}>();
|
|
const model = defineModel<string>();
|
|
const emit = defineEmits(['complete']);
|
|
</script> |