@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-GGSM7VKL.mjs

@@ -0,0 +1,348 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/InputOTP.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  ref,
+  useId,
+  watch
+} from "vue";
+import {
+  SHAKE_CLASS,
+  applyOtpBackspace,
+  applyOtpCharInput,
+  applyOtpDelete,
+  classNames,
+  clampOtpClickIndex,
+  coerceClassValue,
+  devWarn,
+  distributeOtpPaste,
+  formatOtpSlotLabel,
+  getInputOTPLabels,
+  getOtpContainerClasses,
+  getOtpErrorClasses,
+  getOtpFocusIndex,
+  getOtpInputMode,
+  getOtpKeyIntent,
+  getOtpSeparatorClasses,
+  getOtpSeparatorIndices,
+  getOtpSlotClasses,
+  getOtpSlotTabIndex,
+  isOtpComplete,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  normalizeOtpValue,
+  runShakeAnimation,
+  sanitizeOtpInput,
+  shouldDistributeOtpInput
+} from "@expcat/tigercat-core";
+var InputOTP = defineComponent({
+  name: "TigerInputOTP",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    size: { type: String, default: "md" },
+    status: { type: String, default: void 0 },
+    errorMessage: String,
+    length: { type: Number, default: 6 },
+    type: { type: String, default: "numeric" },
+    pattern: { type: RegExp, default: void 0 },
+    masked: Boolean,
+    maskChar: { type: String, default: "\u2022" },
+    groups: { type: Array, default: void 0 },
+    separator: { type: String, default: "-" },
+    disabled: Boolean,
+    readonly: Boolean,
+    autoFocus: Boolean,
+    name: String,
+    id: String,
+    ariaLabel: String,
+    _shakeTrigger: { type: Number, default: void 0 },
+    className: String,
+    style: { type: Object, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": null,
+    complete: null,
+    focus: null,
+    blur: null
+  },
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const formValue = computed(() => formItemControl?.value.value);
+    const dir = computed(() => config.value.direction === "rtl" ? "rtl" : "ltr");
+    const labels = computed(() => getInputOTPLabels(config.value.locale));
+    const errorMsgId = `tiger-input-otp-error-${useId()}`;
+    const containerRef = ref(null);
+    const slotRefs = ref([]);
+    const charOptions = computed(() => ({ type: props.type, pattern: props.pattern }));
+    const inputMode = computed(() => getOtpInputMode(props.type, props.pattern));
+    const localValue = ref(
+      props.modelValue ?? (typeof formValue.value === "string" ? formValue.value : void 0) ?? props.defaultValue ?? ""
+    );
+    const currentValue = computed(
+      () => normalizeOtpValue(
+        props.modelValue !== void 0 ? props.modelValue : typeof formValue.value === "string" ? formValue.value : localValue.value,
+        props.length,
+        charOptions.value
+      )
+    );
+    const focusIndex = ref(getOtpFocusIndex(currentValue.value, props.length));
+    const separatorIndices = computed(() => {
+      const indices = getOtpSeparatorIndices(props.length, props.groups);
+      if (props.groups && props.groups.length > 0 && indices.length === 0) {
+        devWarn("InputOTP.groups", "[Tigercat] InputOTP: `groups` must sum to `length`; ignoring.");
+      }
+      return indices;
+    });
+    watch(
+      () => [props.modelValue, formValue.value],
+      ([model, controlValue]) => {
+        const source = model !== void 0 ? model : typeof controlValue === "string" ? controlValue : void 0;
+        if (source === void 0) return;
+        if (source !== localValue.value) localValue.value = source;
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value, props._shakeTrigger],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(containerRef.value);
+      },
+      { flush: "post" }
+    );
+    function focusSlot(index) {
+      const next = Math.max(0, Math.min(index, props.length - 1));
+      focusIndex.value = next;
+      slotRefs.value[next]?.focus();
+    }
+    onMounted(() => {
+      if (props.autoFocus) focusSlot(getOtpFocusIndex(currentValue.value, props.length));
+    });
+    function displayChar(val, index) {
+      const char = val[index] ?? "";
+      return char && props.masked ? props.maskChar : char;
+    }
+    function emitValue(next) {
+      if (next === currentValue.value) return;
+      if (props.modelValue === void 0 && typeof formValue.value !== "string") {
+        localValue.value = next;
+      }
+      emit("update:modelValue", next);
+      formItemControl?.onChange(next);
+      if (isOtpComplete(next, props.length)) emit("complete", next);
+    }
+    const isInteractive = computed(() => !effectiveDisabled.value && !props.readonly);
+    function handleSlotInput(index, event) {
+      if (!isInteractive.value) return;
+      const target = event.target;
+      const inputType = event.inputType;
+      const sanitized = sanitizeOtpInput(target.value, charOptions.value);
+      const result = applyOtpCharInput(currentValue.value, index, target.value, props.length, {
+        ...charOptions.value,
+        distributeFromStart: shouldDistributeOtpInput(index, inputType, sanitized.length)
+      });
+      target.value = displayChar(result.value, index);
+      emitValue(result.value);
+      focusSlot(result.nextIndex);
+    }
+    function handleSlotKeydown(index, event) {
+      if (!isInteractive.value) return;
+      const intent = getOtpKeyIntent(event.key, dir.value);
+      switch (intent.type) {
+        case "backspace": {
+          event.preventDefault();
+          const result = applyOtpBackspace(currentValue.value, index);
+          emitValue(result.value);
+          focusSlot(result.nextIndex);
+          break;
+        }
+        case "delete": {
+          event.preventDefault();
+          const result = applyOtpDelete(currentValue.value, index);
+          emitValue(result.value);
+          break;
+        }
+        case "move":
+          event.preventDefault();
+          focusSlot(index + intent.delta);
+          break;
+        case "home":
+          event.preventDefault();
+          focusSlot(0);
+          break;
+        case "end":
+          event.preventDefault();
+          focusSlot(getOtpFocusIndex(currentValue.value, props.length));
+          break;
+        default:
+          break;
+      }
+    }
+    function handlePaste(event) {
+      if (!isInteractive.value) return;
+      event.preventDefault();
+      const result = distributeOtpPaste(
+        event.clipboardData?.getData("text") ?? "",
+        props.length,
+        charOptions.value
+      );
+      if (!result) return;
+      emitValue(result.value);
+      focusSlot(result.nextIndex);
+    }
+    function containsNode(node) {
+      return node instanceof Node && !!containerRef.value?.contains(node);
+    }
+    expose({
+      focus: () => focusSlot(getOtpFocusIndex(currentValue.value, props.length)),
+      input: computed(() => slotRefs.value[0] ?? null)
+    });
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const activeError = status.value === "error" && !!props.errorMessage;
+      const slotClasses = getOtpSlotClasses(props.size, status.value, {
+        disabled: effectiveDisabled.value,
+        readonly: props.readonly
+      });
+      const labelledby = typeof restAttrs["aria-labelledby"] === "string" && restAttrs["aria-labelledby"].trim() ? restAttrs["aria-labelledby"] : formItemControl?.labelId.value;
+      const describedBy = mergeAriaDescribedBy(
+        mergeAriaDescribedBy(
+          typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+          activeError ? errorMsgId : void 0
+        ),
+        formItemControl?.describedBy.value
+      );
+      const currentTab = Math.min(Math.max(focusIndex.value, 0), props.length - 1);
+      const fieldId = props.id ?? formItemControl?.id.value;
+      const children = [];
+      for (let i = 0; i < props.length; i++) {
+        const isTabStop = i === currentTab;
+        children.push(
+          h("input", {
+            key: `slot-${i}`,
+            ref: (el) => {
+              slotRefs.value[i] = el;
+            },
+            class: slotClasses,
+            type: "text",
+            inputmode: inputMode.value,
+            autocomplete: i === 0 ? "one-time-code" : "off",
+            maxlength: 1,
+            value: displayChar(currentValue.value, i),
+            disabled: effectiveDisabled.value,
+            readonly: props.readonly,
+            tabindex: getOtpSlotTabIndex(i, currentTab, effectiveDisabled.value),
+            id: isTabStop ? fieldId : void 0,
+            "aria-label": formatOtpSlotLabel(labels.value.slotLabel, i + 1, props.length),
+            "aria-invalid": status.value === "error" ? true : void 0,
+            "aria-required": isTabStop && formItemControl?.required.value ? true : void 0,
+            "aria-describedby": isTabStop ? describedBy : void 0,
+            onInput: (event) => handleSlotInput(i, event),
+            onKeydown: (event) => handleSlotKeydown(i, event),
+            onMousedown: (event) => {
+              const next = clampOtpClickIndex(i, currentValue.value, props.length);
+              if (next !== i) {
+                event.preventDefault();
+                focusSlot(next);
+              }
+            },
+            onFocus: (event) => event.target.select()
+          })
+        );
+        if (separatorIndices.value.includes(i) && props.separator) {
+          children.push(
+            h(
+              "span",
+              {
+                key: `separator-${i}`,
+                "aria-hidden": "true",
+                class: getOtpSeparatorClasses(props.size)
+              },
+              props.separator
+            )
+          );
+        }
+      }
+      if (effectiveName.value) {
+        children.push(
+          h("input", {
+            key: "hidden",
+            type: "hidden",
+            name: effectiveName.value,
+            value: currentValue.value,
+            disabled: effectiveDisabled.value
+          })
+        );
+      }
+      const groupNode = h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          role: "group",
+          "aria-label": labelledby ? void 0 : props.ariaLabel ?? labels.value.groupLabel,
+          "aria-labelledby": labelledby,
+          class: getOtpContainerClasses(props.size),
+          onAnimationend: () => containerRef.value?.classList.remove(SHAKE_CLASS),
+          onPaste: handlePaste,
+          onFocusin: (event) => {
+            if (!containsNode(event.relatedTarget)) emit("focus", event);
+          },
+          onFocusout: (event) => {
+            if (!containsNode(event.relatedTarget)) {
+              formItemControl?.onBlur();
+              emit("blur", event);
+            }
+          }
+        },
+        children
+      );
+      const nodes = [groupNode];
+      if (activeError) {
+        nodes.push(
+          h(
+            "div",
+            { id: errorMsgId, class: getOtpErrorClasses(), "aria-live": "polite" },
+            props.errorMessage
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          class: classNames("inline-block", props.className, coerceClassValue(attrClass)),
+          style: mergeStyleValues(props.style, attrStyle)
+        },
+        nodes
+      );
+    };
+  }
+});
+var InputOTP_default = InputOTP;
+
+export {
+  InputOTP,
+  InputOTP_default
+};