@umbra.ui/core 0.1.0

package/src/components/inputs/OTP/OTP.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { computed, ref, watch, nextTick, useCssModule } from "vue";
+import "./theme.css";
+
+interface Props {
+  modelValue?: string;
+  length?: number;
+  disabled?: boolean;
+  error?: string;
+  loading?: boolean;
+  autoFocus?: boolean;
+  autoSubmit?: boolean;
+}
+
+interface Emits {
+  (e: "update:modelValue", value: string): void;
+  (e: "complete", value: string): void;
+  (e: "change", value: string): void;
+  (e: "focus"): void;
+  (e: "blur"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  length: 6,
+  disabled: false,
+  error: "",
+  loading: false,
+  autoFocus: true,
+  autoSubmit: true,
+});
+
+const emit = defineEmits<Emits>();
+
+// Get CSS module styles
+const $style = useCssModule();
+
+// Create refs for each input field
+const inputRefs = ref<(HTMLInputElement | null)[]>([]);
+const values = ref<string[]>(new Array(props.length).fill(""));
+
+// Initialize values from modelValue
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      values.value = newValue
+        .split("")
+        .concat(
+          new Array(Math.max(0, props.length - newValue.length)).fill("")
+        );
+    } else {
+      values.value = new Array(props.length).fill("");
+    }
+  },
+  { immediate: true }
+);
+
+// Computed properties
+const otpValue = computed(() => values.value.join(""));
+const isComplete = computed(
+  () =>
+    values.value.every((v) => v !== "") && values.value.length === props.length
+);
+const canInteract = computed(() => !props.disabled && !props.loading);
+
+// Emit modelValue updates
+watch(otpValue, (newValue) => {
+  emit("update:modelValue", newValue);
+  emit("change", newValue);
+
+  if (isComplete.value && props.autoSubmit) {
+    emit("complete", newValue);
+  }
+});
+
+// Auto-focus on mount
+const mounted = ref(false);
+watch(mounted, async (isMounted) => {
+  if (isMounted && props.autoFocus && inputRefs.value[0]) {
+    await nextTick();
+    inputRefs.value[0]?.focus();
+  }
+});
+
+// Input handling
+const handleInput = async (index: number, event: Event) => {
+  if (!canInteract.value) return;
+
+  const input = event.target as HTMLInputElement;
+  const value = input.value;
+
+  // Handle paste
+  if (value.length > 1) {
+    // Create a mock ClipboardEvent for the pasted value
+    const mockEvent = {
+      clipboardData: {
+        getData: () => value,
+      },
+    } as unknown as ClipboardEvent;
+    await handlePaste(mockEvent, index);
+    return;
+  }
+
+  // Validate single character input
+  const sanitized = sanitizeInput(value);
+  values.value[index] = sanitized;
+
+  // Move to next field if valid input
+  if (sanitized && index < props.length - 1) {
+    await nextTick();
+    inputRefs.value[index + 1]?.focus();
+  }
+};
+
+const handleKeyDown = async (index: number, event: KeyboardEvent) => {
+  if (!canInteract.value) return;
+
+  // Handle backspace
+  if (event.key === "Backspace") {
+    event.preventDefault();
+
+    if (values.value[index]) {
+      // Clear current field
+      values.value[index] = "";
+    } else if (index > 0) {
+      // Move to previous field and clear it
+      values.value[index - 1] = "";
+      await nextTick();
+      inputRefs.value[index - 1]?.focus();
+    }
+  }
+
+  // Handle arrow keys
+  if (event.key === "ArrowLeft" && index > 0) {
+    event.preventDefault();
+    inputRefs.value[index - 1]?.focus();
+  }
+
+  if (event.key === "ArrowRight" && index < props.length - 1) {
+    event.preventDefault();
+    inputRefs.value[index + 1]?.focus();
+  }
+
+  // Handle delete
+  if (event.key === "Delete") {
+    event.preventDefault();
+    // Clear all fields from current position
+    for (let i = index; i < props.length; i++) {
+      values.value[i] = "";
+    }
+  }
+};
+
+const handlePaste = async (event: ClipboardEvent, index: number) => {
+  const pastedValue = event.clipboardData?.getData("text") || "";
+  const chars = pastedValue.replace(/\D/g, "").split("");
+
+  for (let i = 0; i < chars.length && index + i < props.length; i++) {
+    values.value[index + i] = chars[i];
+  }
+
+  // Focus the next empty field or the last field
+  await nextTick();
+  const nextEmptyIndex = values.value.findIndex((v, i) => i >= index && !v);
+  const focusIndex =
+    nextEmptyIndex !== -1
+      ? nextEmptyIndex
+      : Math.min(index + chars.length, props.length - 1);
+  inputRefs.value[focusIndex]?.focus();
+};
+
+const handleFocus = (index: number) => {
+  emit("focus");
+  // Select the input content for easier replacement
+  inputRefs.value[index]?.select();
+};
+
+const handleBlur = () => {
+  emit("blur");
+};
+
+const sanitizeInput = (input: string): string => {
+  // Only allow digits
+  return input.replace(/\D/g, "").slice(0, 1);
+};
+
+const isValidInput = (value: string): boolean => {
+  return value !== "";
+};
+
+// Public methods via defineExpose
+const focus = () => {
+  inputRefs.value[0]?.focus();
+};
+
+const clear = () => {
+  values.value = new Array(props.length).fill("");
+  inputRefs.value[0]?.focus();
+};
+
+defineExpose({
+  focus,
+  clear,
+});
+
+// Set mounted flag
+mounted.value = true;
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.pin_entry">
+      <div
+        v-for="(_, index) in values"
+        :key="index"
+        :class="[
+          $style.pin,
+          {
+            [$style.error]: error,
+            [$style.disabled]: disabled || loading,
+            [$style.filled]: isValidInput(values[index]),
+          },
+        ]"
+        :style="{
+          backgroundColor: isValidInput(values[index])
+            ? 'var(--otp-pin-filled-bg)'
+            : 'var(--otp-pin-empty-bg)',
+        }"
+      >
+        <input
+          :ref="el => inputRefs[index] = el as HTMLInputElement"
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]"
+          maxlength="1"
+          :value="values[index]"
+          :disabled="!canInteract"
+          :style="{
+            color: isValidInput(values[index])
+              ? 'var(--otp-pin-filled-text)'
+              : 'var(--otp-pin-empty-text)',
+          }"
+          :aria-label="`Digit ${index + 1} of ${length}`"
+          :aria-invalid="!!error"
+          :aria-describedby="error ? 'otp-error' : undefined"
+          @input="handleInput(index, $event)"
+          @keydown="handleKeyDown(index, $event)"
+          @paste="(event) => handlePaste(event, index)"
+          @focus="handleFocus(index)"
+          @blur="handleBlur"
+        />
+      </div>
+    </div>
+
+    <div v-if="error" :class="$style.error" id="otp-error" role="alert">
+      {{ error }}
+    </div>
+
+    <div v-if="loading" :class="$style.loading_text">Verifying...</div>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1.176rem;
+}
+
+.pin_entry {
+  display: flex;
+  align-items: center;
+  gap: 1.471rem;
+}
+
+.pin {
+  max-width: 2.941rem;
+  min-height: 4.118rem;
+  background-color: var(--otp-pin-empty-bg);
+  border-radius: 0.471rem;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  border: 1px solid var(--otp-pin-border);
+  transition: border 0.3s ease;
+}
+
+.pin.filled {
+  border: 1px solid var(--otp-filled-border);
+}
+
+.pin input {
+  width: 100%;
+  min-height: 4.118rem;
+  outline: none;
+  border: none;
+  background: transparent;
+  color: var(--otp-pin-empty-text);
+  font-size: 2.353rem;
+  font-family: "Menlo", monospace;
+  text-align: center;
+}
+
+.pin:focus-within {
+  border: 1px solid var(--otp-focus-border);
+}
+
+.pin.error {
+  border: 1px solid var(--otp-error-border);
+}
+
+.pin.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.error {
+  color: var(--otp-error-text);
+  font-size: 0.875rem;
+}
+
+.loading_text {
+  color: var(--otp-loading-text);
+  font-size: 0.875rem;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 480px) {
+  .pin_entry {
+    gap: 12px;
+  }
+  .pin input {
+    font-size: 20px;
+    font-weight: bold;
+  }
+}
+</style>