@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.20 → 1.0.22

package/src/ui/InputOTPSlot.vue

@@ -1,61 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { cn } from '@/lib/utils';
-
-const props = defineProps({
-  index: Number,
-  char: String,
-  class: String,
-  disabled: Boolean,
-});
-
-const extDisplayChar = computed(() => {
-  return '';
-});
-
-const extIsActive = computed(() => {
-});
-
-const isActive = computed(() => {
-});
-
-const handleClick = () => {
-};
-
-const handleInput = (e) => {
-  const value = e.target.value;
-};
-
-</script>
-
-<template>
-  <!-- Fallback context: input field mode -->
-  <div
-    data-slot="input-otp-slot"
-    :data-index="props.index"
-    :data-active="isActive"
-    :class="cn('data-[active=true]:border-ring data-[active=true]:ring-ring/50 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px] cursor-text', props.class)"
-    @click="handleClick"
-  >
-    <input
-      ref="inputRef"
-      type="text"
-      inputmode="numeric"
-      pattern="[0-9]*"
-      maxlength="1"
-      :value="char"
-      @input="handleInput"
-      @keydown="handleKeydown"
-      @focus="isFocused = true"
-      @blur="isFocused = false"
-      class="absolute inset-0 w-full h-full bg-transparent border-0 outline-none text-center opacity-0 caret-transparent"
-      style="caret-color: transparent;"
-    />
-    <div class="pointer-events-none select-none relative z-10 flex items-center justify-center">
-      <span v-if="char" class="text-foreground">{{ displayChar }}</span>
-    </div>
-    <div v-if="isActive && !char" class="pointer-events-none absolute inset-0 flex items-center justify-center z-20">
-      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-    </div>
-  </div>
-</template>

package/src/ui/input-otp.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, defineAsyncComponent, useSlots } from 'vue';
-import { cn } from '@/lib/utils';
-// These would be your context keys (provide/inject)
-const InputOTPMaskContext = Symbol('InputOTPMaskContext');
-const FallbackInputOTPContext = Symbol('FallbackInputOTPContext');
-
-const props = defineProps({
-	class: String,
-	containerClass: String,
-	maxLength: { type: Number, required: true },
-	modelValue: { type: String, default: '' },
-	disabled: { type: Boolean, default: false },
-	masked: { type: Boolean, default: false },
-});
-const emit = defineEmits(['update:modelValue']);
-const slots = useSlots();
-
-const handleChange = (newValue: string) => {
-	if (newValue.length <= props.maxLength) {
-		emit('update:modelValue', newValue);
-	}
-};
-
-import { OTPInput } from "input-otp";
-
-const contextValue = computed(() => ({
-	value: props.modelValue,
-	onChange: handleChange,
-	maxLength: props.maxLength,
-	disabled: props.disabled,
-	masked: props.masked,
-}));
-
-</script>
-<template>
-    <OTPInput
-      data-slot="input-otp"
-      :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.containerClass)"
-      :class-name="cn('disabled:cursor-not-allowed', props.class)"
-      :maxlength="props.maxLength"
-      :value="props.modelValue"
-      :on-change="(val) => emit('update:modelValue', val)"
-      :disabled="props.disabled"
-      v-bind="props"
-      style="display: flex;"
-    >
-      <div class="flex items-center gap-2">
-        <slot />
-      </div>
-    </OTPInput>
-</template>