Initialer Laravel Commit für BetiX

resources/js/components/ui/input-otp/InputOTP.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  maxlength?: number;
+  disabled?: boolean;
+  autofocus?: boolean;
+  id?: string;
+}>(), {
+  modelValue: '',
+  maxlength: 6,
+  disabled: false,
+  autofocus: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (v: string) => emit('update:modelValue', v.slice(0, props.maxlength)),
+});
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <input
+      :id="id"
+      v-model="value"
+      type="text"
+      inputmode="numeric"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :autofocus="autofocus"
+      class="sr-only"
+    />
+    <slot />
+  </div>
+</template>