@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-UUWPSRNV.mjs

@@ -1,337 +0,0 @@
-import {
-  FORM_ITEM_CONTROL_INJECTION_KEY
-} from "./chunk-P2LZ2MR5.mjs";
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/InputOTP.ts
-import { computed, defineComponent, h, inject, onMounted, ref, watch } from "vue";
-import {
-  applyOtpBackspace,
-  applyOtpCharInput,
-  applyOtpDelete,
-  classNames,
-  coerceClassValue,
-  devWarn,
-  distributeOtpPaste,
-  formatOtpSlotLabel,
-  getInputOTPLabels,
-  getOtpContainerClasses,
-  getOtpErrorClasses,
-  getOtpSeparatorClasses,
-  getOtpSeparatorIndices,
-  getOtpSlotClasses,
-  injectShakeStyle,
-  isOtpComplete,
-  mergeStyleValues,
-  normalizeOtpValue,
-  SHAKE_CLASS
-} from "@expcat/tigercat-core";
-var inputOtpIdCounter = 0;
-var InputOTP = defineComponent({
-  name: "TigerInputOTP",
-  inheritAttrs: false,
-  props: {
-    /**
-     * Value (for v-model) — the joined characters
-     */
-    modelValue: { type: String, default: void 0 },
-    /**
-     * Default value (for uncontrolled mode)
-     */
-    defaultValue: { type: String, default: "" },
-    /**
-     * Input size
-     * @default 'md'
-     */
-    size: { type: String, default: "md" },
-    /**
-     * Validation status
-     * @default 'default'
-     */
-    status: { type: String, default: "default" },
-    /**
-     * Error message to display
-     */
-    errorMessage: String,
-    /**
-     * Number of character slots
-     * @default 6
-     */
-    length: { type: Number, default: 6 },
-    /**
-     * Allowed character set
-     * @default 'numeric'
-     */
-    type: { type: String, default: "numeric" },
-    /**
-     * Per-character validation regex; overrides `type` filtering
-     */
-    pattern: { type: RegExp, default: void 0 },
-    /**
-     * Hide entered characters (renders maskChar instead)
-     */
-    masked: Boolean,
-    /**
-     * Character shown per filled slot when masked
-     * @default '•'
-     */
-    maskChar: { type: String, default: "\u2022" },
-    /**
-     * Visual slot grouping, e.g. [3, 3]
-     */
-    groups: { type: Array, default: void 0 },
-    /**
-     * Separator rendered between groups
-     * @default '-'
-     */
-    separator: { type: String, default: "-" },
-    /** Whether the input is disabled */
-    disabled: Boolean,
-    /** Whether the input is readonly */
-    readonly: Boolean,
-    /** Whether to autofocus the first empty slot on mount */
-    autoFocus: Boolean,
-    /** Name for the hidden input carrying the joined value */
-    name: String,
-    /** Id attribute applied to the group element */
-    id: String,
-    /** Accessible label for the slot group */
-    ariaLabel: String,
-    /**
-     * Internal shake trigger counter (used by FormItem)
-     * @internal
-     */
-    _shakeTrigger: { type: Number, default: void 0 },
-    /** Additional CSS classes */
-    className: String,
-    /** Inline styles */
-    style: { type: Object, default: void 0 }
-  },
-  emits: {
-    "update:modelValue": null,
-    complete: null,
-    focus: null,
-    blur: null
-  },
-  setup(props, { emit, attrs }) {
-    injectShakeStyle();
-    const config = useTigerConfig();
-    const formItemControl = inject(
-      FORM_ITEM_CONTROL_INJECTION_KEY,
-      null
-    );
-    const effectiveStatus = computed(
-      () => props.status !== "default" ? props.status : formItemControl?.status.value ?? props.status
-    );
-    const effectiveErrorMessage = computed(
-      () => props.errorMessage ?? formItemControl?.errorMessage.value
-    );
-    const effectiveShakeTrigger = computed(
-      () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
-    );
-    const labels = computed(() => getInputOTPLabels(config.value.locale));
-    const instanceId = ++inputOtpIdCounter;
-    const errorMsgId = `tiger-input-otp-error-${instanceId}`;
-    const containerRef = ref(null);
-    const slotRefs = ref([]);
-    const charOptions = computed(() => ({ type: props.type, pattern: props.pattern }));
-    const isControlled = computed(() => props.modelValue !== void 0);
-    const innerValue = ref(props.defaultValue ?? "");
-    const currentValue = computed(
-      () => normalizeOtpValue(
-        isControlled.value ? props.modelValue ?? "" : innerValue.value,
-        props.length,
-        charOptions.value
-      )
-    );
-    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([effectiveStatus, effectiveShakeTrigger], ([newStatus]) => {
-      if (newStatus === "error" && containerRef.value) {
-        const el = containerRef.value;
-        el.classList.remove(SHAKE_CLASS);
-        void el.offsetWidth;
-        el.classList.add(SHAKE_CLASS);
-      }
-    });
-    const focusSlot = (index) => {
-      slotRefs.value[Math.max(0, Math.min(index, props.length - 1))]?.focus();
-    };
-    onMounted(() => {
-      if (props.autoFocus) {
-        focusSlot(Math.min(currentValue.value.length, props.length - 1));
-      }
-    });
-    const displayChar = (val, index) => {
-      const char = val[index] ?? "";
-      return char && props.masked ? props.maskChar : char;
-    };
-    const emitValue = (next) => {
-      if (next === currentValue.value) return;
-      if (!isControlled.value) innerValue.value = next;
-      emit("update:modelValue", next);
-      if (isOtpComplete(next, props.length)) emit("complete", next);
-    };
-    const isInteractive = computed(() => !props.disabled && !props.readonly);
-    const handleSlotInput = (index, event) => {
-      if (!isInteractive.value) return;
-      const target = event.target;
-      const result = applyOtpCharInput(
-        currentValue.value,
-        index,
-        target.value,
-        props.length,
-        charOptions.value
-      );
-      target.value = displayChar(result.value, index);
-      emitValue(result.value);
-      focusSlot(result.nextIndex);
-    };
-    const handleSlotKeydown = (index, event) => {
-      if (!isInteractive.value) return;
-      switch (event.key) {
-        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 "ArrowLeft":
-          event.preventDefault();
-          focusSlot(index - 1);
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          focusSlot(index + 1);
-          break;
-        case "Home":
-          event.preventDefault();
-          focusSlot(0);
-          break;
-        case "End":
-          event.preventDefault();
-          focusSlot(Math.min(currentValue.value.length, props.length - 1));
-          break;
-      }
-    };
-    const handlePaste = (event) => {
-      if (!isInteractive.value) return;
-      event.preventDefault();
-      const text = event.clipboardData?.getData("text") ?? "";
-      const result = distributeOtpPaste(text, props.length, charOptions.value);
-      if (!result) return;
-      emitValue(result.value);
-      focusSlot(result.nextIndex);
-    };
-    const handleSlotFocus = (event) => {
-      ;
-      event.target.select();
-    };
-    const containsNode = (node) => node instanceof Node && !!containerRef.value?.contains(node);
-    const handleGroupFocusin = (event) => {
-      if (!containsNode(event.relatedTarget)) emit("focus", event);
-    };
-    const handleGroupFocusout = (event) => {
-      if (!containsNode(event.relatedTarget)) emit("blur", event);
-    };
-    return () => {
-      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
-      const activeError = effectiveStatus.value === "error" && !!effectiveErrorMessage.value;
-      const slotClasses = getOtpSlotClasses(props.size, effectiveStatus.value, {
-        disabled: props.disabled,
-        readonly: props.readonly
-      });
-      const children = [];
-      for (let i = 0; i < props.length; i++) {
-        children.push(
-          h("input", {
-            key: `slot-${i}`,
-            ref: (el) => {
-              slotRefs.value[i] = el;
-            },
-            class: slotClasses,
-            type: "text",
-            inputmode: props.type === "numeric" ? "numeric" : void 0,
-            autocomplete: i === 0 ? "one-time-code" : "off",
-            value: displayChar(currentValue.value, i),
-            disabled: props.disabled,
-            readonly: props.readonly,
-            "aria-label": formatOtpSlotLabel(labels.value.slotLabel, i + 1, props.length),
-            ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
-            onInput: (event) => handleSlotInput(i, event),
-            onKeydown: (event) => handleSlotKeydown(i, event),
-            onFocus: handleSlotFocus
-          })
-        );
-        if (separatorIndices.value.includes(i) && props.separator) {
-          children.push(
-            h(
-              "span",
-              {
-                key: `separator-${i}`,
-                "aria-hidden": "true",
-                class: getOtpSeparatorClasses(props.size)
-              },
-              props.separator
-            )
-          );
-        }
-      }
-      if (props.name) {
-        children.push(
-          h("input", { key: "hidden", type: "hidden", name: props.name, value: currentValue.value })
-        );
-      }
-      const groupNode = h(
-        "div",
-        {
-          ...restAttrs,
-          ref: containerRef,
-          id: props.id,
-          role: "group",
-          "aria-label": props.ariaLabel ?? labels.value.groupLabel,
-          ...activeError ? { "aria-describedby": errorMsgId } : {},
-          class: getOtpContainerClasses(props.size),
-          onPaste: handlePaste,
-          onFocusin: handleGroupFocusin,
-          onFocusout: handleGroupFocusout
-        },
-        children
-      );
-      const nodes = [groupNode];
-      if (activeError) {
-        nodes.push(
-          h("div", { id: errorMsgId, class: getOtpErrorClasses() }, effectiveErrorMessage.value)
-        );
-      }
-      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
-};

package/dist/chunk-VY6FVIOZ.mjs

@@ -1,344 +0,0 @@
-import {
-  renderVueOverlayTeleport,
-  useVueAnchoredOverlay
-} from "./chunk-Q7Y22OFX.mjs";
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/AutoComplete.ts
-import { defineComponent, h, ref, computed, watch, nextTick } from "vue";
-import {
-  resolveLocaleText,
-  mergeTigerLocale,
-  autoCompleteBaseClasses,
-  autoCompleteDropdownClasses,
-  autoCompleteEmptyStateClasses,
-  getAutoCompleteInputClasses,
-  getAutoCompleteOptionClasses,
-  filterAutoCompleteOptions,
-  resolveAutoCompleteDisplayValue,
-  getInitialPickerActiveIndex,
-  getPickerComboboxAria,
-  getPickerListboxAria,
-  getPickerNavigationIndex,
-  getPickerOptionAria,
-  getPickerOptionId,
-  coerceClassValue,
-  classNames,
-  icon20ViewBox,
-  closeSolidIcon20PathD
-} from "@expcat/tigercat-core";
-var autoCompleteInstanceId = 0;
-var ClearIcon = h(
-  "svg",
-  {
-    class: "w-4 h-4",
-    viewBox: icon20ViewBox,
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg"
-  },
-  [
-    h("path", {
-      d: closeSolidIcon20PathD,
-      "fill-rule": "evenodd",
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var AutoComplete = defineComponent({
-  name: "TigerAutoComplete",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    searchValue: {
-      type: String,
-      default: void 0
-    },
-    defaultSearchValue: {
-      type: String,
-      default: ""
-    },
-    size: {
-      type: String,
-      default: "md"
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    emptyText: {
-      type: String,
-      default: void 0
-    },
-    filterOption: {
-      type: [Boolean, Function],
-      default: true
-    },
-    defaultActiveFirstOption: {
-      type: Boolean,
-      default: true
-    },
-    allowFreeInput: {
-      type: Boolean,
-      default: true
-    },
-    locale: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:modelValue", "update:searchValue", "select", "search-change", "change"],
-  setup(props, { emit, attrs }) {
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const instanceId = ++autoCompleteInstanceId;
-    const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
-    const isOpen = ref(false);
-    const uncontrolledSearchValue = ref(
-      props.searchValue ?? resolveAutoCompleteDisplayValue(props.modelValue, props.options, props.defaultSearchValue)
-    );
-    const inputValue = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
-    const activeIndex = ref(-1);
-    const containerRef = ref(null);
-    const inputRef = ref(null);
-    const dropdownRef = ref(null);
-    const overlay = useVueAnchoredOverlay({
-      enabled: isOpen,
-      referenceRef: inputRef,
-      floatingRef: dropdownRef,
-      containerRef,
-      placement: "bottom-start",
-      offset: 4,
-      matchReferenceWidth: true,
-      dismissOnOutside: true,
-      dismissOnEscape: true,
-      restoreFocusOnDismiss: true,
-      onDismiss: closeDropdown
-    });
-    const filteredOptions = computed(
-      () => filterAutoCompleteOptions(props.options, inputValue.value, props.filterOption)
-    );
-    const showClearButton = computed(
-      () => props.clearable && !props.disabled && inputValue.value !== ""
-    );
-    watch([() => props.modelValue, () => props.options], () => {
-      if (props.searchValue === void 0) {
-        uncontrolledSearchValue.value = resolveAutoCompleteDisplayValue(
-          props.modelValue,
-          props.options,
-          props.defaultSearchValue
-        );
-      }
-    });
-    function openDropdown() {
-      if (props.disabled) return;
-      isOpen.value = true;
-      activeIndex.value = getInitialPickerActiveIndex(
-        filteredOptions.value,
-        props.defaultActiveFirstOption
-      );
-    }
-    function closeDropdown() {
-      isOpen.value = false;
-      activeIndex.value = -1;
-    }
-    function constrainToOption() {
-      if (props.allowFreeInput) return;
-      const match = props.options.find((o) => !o.disabled && o.label === inputValue.value);
-      if (match) {
-        if (String(match.value) !== String(props.modelValue)) {
-          emit("update:modelValue", match.value);
-          emit("select", match.value, match);
-          emit("change", match.value);
-        }
-        return;
-      }
-      const current = props.options.find((o) => String(o.value) === String(props.modelValue));
-      const revertLabel = current ? current.label : "";
-      if (revertLabel !== inputValue.value) {
-        uncontrolledSearchValue.value = revertLabel;
-        emit("update:searchValue", revertLabel);
-        emit("search-change", revertLabel);
-        emit("update:modelValue", current ? current.value : "");
-        emit("change", current ? current.value : "");
-      }
-    }
-    function handleInput(e) {
-      const val = e.target.value;
-      if (props.searchValue === void 0) {
-        uncontrolledSearchValue.value = val;
-      }
-      emit("update:modelValue", val);
-      emit("update:searchValue", val);
-      emit("search-change", val);
-      emit("change", val);
-      if (!isOpen.value) openDropdown();
-      if (props.defaultActiveFirstOption) {
-        activeIndex.value = getInitialPickerActiveIndex(filteredOptions.value, true);
-      }
-    }
-    function handleSelect(option) {
-      if (option.disabled) return;
-      if (props.searchValue === void 0) {
-        uncontrolledSearchValue.value = option.label;
-      }
-      emit("update:modelValue", option.value);
-      emit("update:searchValue", option.label);
-      emit("select", option.value, option);
-      emit("search-change", option.label);
-      emit("change", option.value);
-      closeDropdown();
-    }
-    function handleClear(e) {
-      e.stopPropagation();
-      if (props.searchValue === void 0) {
-        uncontrolledSearchValue.value = "";
-      }
-      emit("update:modelValue", "");
-      emit("update:searchValue", "");
-      emit("change", "");
-      nextTick(() => inputRef.value?.focus());
-    }
-    function handleKeyDown(e) {
-      if (!isOpen.value) {
-        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-          e.preventDefault();
-          openDropdown();
-        }
-        return;
-      }
-      const options = filteredOptions.value;
-      switch (e.key) {
-        case "ArrowDown":
-        case "ArrowUp":
-        case "Home":
-        case "End":
-          e.preventDefault();
-          activeIndex.value = getPickerNavigationIndex(options, activeIndex.value, e.key);
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (activeIndex.value >= 0 && activeIndex.value < options.length) {
-            handleSelect(options[activeIndex.value]);
-          } else {
-            constrainToOption();
-            closeDropdown();
-          }
-          break;
-        case "Escape":
-          e.preventDefault();
-          closeDropdown();
-          break;
-      }
-    }
-    return () => {
-      const containerClasses = classNames(autoCompleteBaseClasses, coerceClassValue(attrs.class));
-      const options = filteredOptions.value;
-      return h(
-        "div",
-        {
-          ref: containerRef,
-          class: containerClasses
-        },
-        [
-          // Input
-          h("input", {
-            ref: inputRef,
-            type: "text",
-            class: getAutoCompleteInputClasses(props.size, props.disabled, isOpen.value),
-            value: inputValue.value,
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            ...getPickerComboboxAria({
-              expanded: isOpen.value,
-              listboxId,
-              activeIndex: activeIndex.value
-            }),
-            autocomplete: "off",
-            onInput: handleInput,
-            onFocus: openDropdown,
-            onKeydown: handleKeyDown,
-            onBlur: constrainToOption
-          }),
-          // Clear button
-          showClearButton.value ? h(
-            "button",
-            {
-              type: "button",
-              class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-autocomplete-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-autocomplete-clear-hover,var(--tiger-text,#111827))] transition-colors",
-              "aria-label": resolveLocaleText("Clear", mergedLocale.value?.common?.clearText),
-              onClick: handleClear
-            },
-            [ClearIcon]
-          ) : null,
-          // Dropdown
-          isOpen.value && (options.length > 0 || inputValue.value) ? renderVueOverlayTeleport(
-            h(
-              "div",
-              {
-                ref: dropdownRef,
-                ...options.length > 0 ? getPickerListboxAria({ id: listboxId }) : {},
-                class: classNames(
-                  autoCompleteDropdownClasses,
-                  options.length === 0 && autoCompleteEmptyStateClasses,
-                  overlay.floatingClasses.value
-                ),
-                style: overlay.floatingStyles.value,
-                "data-positioned": overlay.positioned.value
-              },
-              options.length > 0 ? options.map(
-                (option, index) => h(
-                  "div",
-                  {
-                    id: getPickerOptionId(listboxId, index),
-                    ...getPickerOptionAria({
-                      selected: String(option.value) === String(props.modelValue),
-                      disabled: !!option.disabled
-                    }),
-                    class: getAutoCompleteOptionClasses(
-                      String(option.value) === String(props.modelValue),
-                      !!option.disabled,
-                      props.size
-                    ),
-                    onMousedown: (e) => e.preventDefault(),
-                    onClick: () => handleSelect(option),
-                    onMouseenter: () => {
-                      activeIndex.value = index;
-                    }
-                  },
-                  option.label
-                )
-              ) : resolveLocaleText(
-                "No matches found",
-                props.emptyText,
-                mergedLocale.value?.common?.emptyText
-              )
-            ),
-            overlay.target.value
-          ) : null
-        ]
-      );
-    };
-  }
-});
-var AutoComplete_default = AutoComplete;
-
-export {
-  AutoComplete,
-  AutoComplete_default
-};