add OtpDialogModal

2026-04-22 00:03:51 +02:00 · 2026-02-12 20:49:55 +09:00
parent c93b3fbf9f
commit e643b6b5ad
14 changed files with 967 additions and 15 deletions
--- a/src/components/ui/input-otp/InputOTP.vue
+++ b/src/components/ui/input-otp/InputOTP.vue
@@ -0,0 +1,78 @@
+<script setup>
+    import { OTPInput } from 'vue-input-otp';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+    import { useForwardPropsEmits } from 'reka-ui';
+
+    const props = defineProps({
+        maxlength: { type: Number, required: true },
+        textAlign: { type: String, required: false },
+        inputmode: { type: String, required: false },
+        containerClass: { type: String, required: false },
+        pushPasswordManagerStrategy: { type: String, required: false },
+        noScriptCssFallback: { type: [String, null], required: false },
+        defaultValue: { type: null, required: false },
+        pasteTransformer: { type: Function, required: false },
+        accept: { type: String, required: false },
+        alt: { type: String, required: false },
+        autocomplete: { type: String, required: false },
+        autofocus: { type: Boolean, required: false },
+        capture: { type: [Boolean, String], required: false },
+        checked: { type: [Boolean, Array, Set], required: false },
+        crossorigin: { type: String, required: false },
+        disabled: { type: Boolean, required: false },
+        enterKeyHint: { type: String, required: false },
+        form: { type: String, required: false },
+        formaction: { type: String, required: false },
+        formenctype: { type: String, required: false },
+        formmethod: { type: String, required: false },
+        formnovalidate: { type: Boolean, required: false },
+        formtarget: { type: String, required: false },
+        height: { type: Number, required: false },
+        indeterminate: { type: Boolean, required: false },
+        list: { type: String, required: false },
+        max: { type: Number, required: false },
+        min: { type: Number, required: false },
+        minlength: { type: Number, required: false },
+        multiple: { type: Boolean, required: false },
+        name: { type: String, required: false },
+        pattern: { type: String, required: false },
+        placeholder: { type: String, required: false },
+        readonly: { type: Boolean, required: false },
+        required: { type: Boolean, required: false },
+        size: { type: Number, required: false },
+        src: { type: String, required: false },
+        step: { type: Number, required: false },
+        type: { type: String, required: false },
+        value: { type: null, required: false },
+        width: { type: Number, required: false },
+        class: { type: null, required: false }
+    });
+
+    const emits = defineEmits([
+        'complete',
+        'change',
+        'select',
+        'input',
+        'focus',
+        'blur',
+        'mouseover',
+        'mouseleave',
+        'paste'
+    ]);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <OTPInput
+        v-slot="slotProps"
+        v-bind="forwarded"
+        :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+        data-slot="input-otp"
+        class="disabled:cursor-not-allowed">
+        <slot v-bind="slotProps" />
+    </OTPInput>
+</template>