@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-SJYR5CSS.mjs

@@ -0,0 +1,528 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/AutoComplete.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  h,
+  inject,
+  watch,
+  nextTick,
+  useId
+} from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  autoCompleteClearButtonClasses,
+  autoCompleteClearIconClasses,
+  autoCompleteDoneActionClasses,
+  autoCompleteDoneButtonClasses,
+  autoCompleteDropdownClasses,
+  autoCompleteEmptyStateClasses,
+  autoCompleteListboxClasses,
+  autoCompleteTrailingSlotClasses,
+  classNames,
+  closeSolidIcon20PathD,
+  coerceAutoCompleteFormValue,
+  coerceClassValue,
+  filterAutoCompleteOptions,
+  getAutoCompleteInputClasses,
+  getAutoCompleteKeyIntent,
+  getAutoCompleteOptionClasses,
+  getAutoCompleteOptionKey,
+  getAutoCompletePanelStyle,
+  getAutoCompleteRootClasses,
+  getEmptyLabels,
+  getInitialPickerActiveIndex,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerNavigationIndex,
+  getPickerOptionAria,
+  getPickerOptionId,
+  getSelectLabels,
+  icon20ViewBox,
+  isSameAutoCompleteValue,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  resolveAutoCompleteBlurCommit,
+  resolveAutoCompleteIdleQuery,
+  resolveAutoCompleteInitialQuery,
+  resolveLocaleText,
+  runShakeAnimation,
+  shouldShowAutoCompleteClear
+} from "@expcat/tigercat-core";
+function iconVNode(path, className) {
+  return h(
+    "svg",
+    {
+      class: className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    [
+      h("path", {
+        "fill-rule": "evenodd",
+        d: path,
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var AutoComplete = defineComponent({
+  name: "TigerAutoComplete",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: [String, Number] },
+    defaultValue: { type: [String, Number] },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: "" },
+    searchValue: { type: String, default: void 0 },
+    defaultSearchValue: { type: String, default: void 0 },
+    size: { type: String, default: "md" },
+    disabled: Boolean,
+    clearable: Boolean,
+    emptyText: { type: String, default: void 0 },
+    filterOption: {
+      type: [Boolean, Function],
+      default: true
+    },
+    defaultActiveFirstOption: { type: Boolean, default: true },
+    allowFreeInput: { type: Boolean, default: true },
+    loading: Boolean,
+    status: { type: String, default: void 0 },
+    name: String,
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+    dropdownClassName: String,
+    getPopupContainer: { type: Function },
+    listHeight: { type: Number, default: 256 },
+    locale: { type: Object },
+    className: String
+  },
+  emits: [
+    "update:modelValue",
+    "update:searchValue",
+    "update:open",
+    "change",
+    "select",
+    "search-change",
+    "open-change",
+    "blur",
+    "focus"
+  ],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const emptyLabels = computed(() => getEmptyLabels(mergedLocale.value));
+    const selectLabels = computed(() => getSelectLabels(mergedLocale.value));
+    const instanceId = useId();
+    const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+    const initialCommitted = props.modelValue ?? coerceAutoCompleteFormValue(formItemControl?.value.value) ?? props.defaultValue;
+    const localValue = ref(initialCommitted);
+    const localOpen = ref(props.defaultOpen);
+    const localSearch = ref(
+      resolveAutoCompleteInitialQuery({
+        searchValue: props.searchValue,
+        defaultSearchValue: props.defaultSearchValue,
+        committed: initialCommitted,
+        optionList: props.options
+      })
+    );
+    const activeIndex = ref(-1);
+    const isEditing = ref(false);
+    const hadCommitted = ref(initialCommitted !== void 0);
+    const rootRef = ref(null);
+    const inputRef = ref(null);
+    const dropdownRef = ref(null);
+    const selected = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : coerceAutoCompleteFormValue(formItemControl?.value.value) ?? localValue.value
+    );
+    const isOpen = computed(() => props.open !== void 0 ? props.open : localOpen.value);
+    const searchQuery = computed(() => props.searchValue ?? localSearch.value);
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const filteredOptions = computed(
+      () => filterAutoCompleteOptions(props.options, searchQuery.value, props.filterOption)
+    );
+    const hasOptions = computed(() => filteredOptions.value.length > 0);
+    const showClear = computed(
+      () => shouldShowAutoCompleteClear({
+        clearable: props.clearable,
+        disabled: effectiveDisabled.value,
+        query: searchQuery.value,
+        committed: selected.value
+      })
+    );
+    watch(
+      () => [props.modelValue, formItemControl?.value.value],
+      ([model, formValue]) => {
+        const next = model !== void 0 ? model : coerceAutoCompleteFormValue(formValue);
+        if (next === void 0) return;
+        localValue.value = next;
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(rootRef.value);
+      },
+      { flush: "post" }
+    );
+    watch([selected, () => props.options], () => {
+      if (props.searchValue !== void 0) return;
+      if (isEditing.value) return;
+      if (selected.value === void 0) {
+        if (hadCommitted.value) localSearch.value = "";
+        hadCommitted.value = false;
+        return;
+      }
+      hadCommitted.value = true;
+      localSearch.value = resolveAutoCompleteIdleQuery(selected.value, props.options);
+    });
+    function setOpen(next) {
+      if (props.open === void 0) localOpen.value = next;
+      emit("update:open", next);
+      emit("open-change", next);
+    }
+    function setSearch(query) {
+      if (props.searchValue === void 0) localSearch.value = query;
+      emit("update:searchValue", query);
+      emit("search-change", query);
+    }
+    function setSelected(next, option) {
+      if (props.modelValue === void 0) localValue.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+      formItemControl?.onChange(next);
+      if (option) emit("select", option.value, option);
+    }
+    function openDropdown() {
+      if (effectiveDisabled.value) return;
+      setOpen(true);
+      activeIndex.value = getInitialPickerActiveIndex(
+        filteredOptions.value,
+        props.defaultActiveFirstOption
+      );
+    }
+    function closeDropdown() {
+      setOpen(false);
+      activeIndex.value = -1;
+    }
+    function commitCurrentQuery() {
+      const result = resolveAutoCompleteBlurCommit({
+        query: searchQuery.value,
+        committed: selected.value,
+        optionList: props.options,
+        allowFreeInput: props.allowFreeInput
+      });
+      setSearch(result.query);
+      if (result.didCommit) setSelected(result.value, result.option);
+      return result;
+    }
+    function revertQuery() {
+      setSearch(resolveAutoCompleteIdleQuery(selected.value, props.options));
+    }
+    function handleDismiss(reason) {
+      if (reason === "escape") {
+        isEditing.value = false;
+        revertQuery();
+        closeDropdown();
+        return;
+      }
+      isEditing.value = false;
+      commitCurrentQuery();
+      closeDropdown();
+    }
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: inputRef,
+      floatingRef: dropdownRef,
+      containerRef: rootRef,
+      placement: () => props.placement ?? "bottom-start",
+      offset: () => props.offset ?? 4,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: () => props.getPopupContainer?.() ?? null,
+      onDismiss: handleDismiss
+    });
+    function handleSelect(option) {
+      if (option.disabled || effectiveDisabled.value) return;
+      isEditing.value = false;
+      setSearch(option.label);
+      setSelected(option.value, option);
+      closeDropdown();
+    }
+    function handleInput(event) {
+      if (effectiveDisabled.value) return;
+      const next = event.target.value;
+      isEditing.value = true;
+      setSearch(next);
+      if (!isOpen.value) setOpen(true);
+      activeIndex.value = getInitialPickerActiveIndex(
+        filterAutoCompleteOptions(props.options, next, props.filterOption),
+        props.defaultActiveFirstOption
+      );
+    }
+    function handleClear(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      isEditing.value = true;
+      setSearch("");
+      setSelected(void 0);
+      nextTick(() => inputRef.value?.focus());
+      if (!isOpen.value) setOpen(true);
+      activeIndex.value = getInitialPickerActiveIndex(props.options, props.defaultActiveFirstOption);
+    }
+    function handleFocus(event) {
+      isEditing.value = true;
+      openDropdown();
+      emit("focus", event);
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (rootRef.value && next && rootRef.value.contains(next) || dropdownRef.value && next && dropdownRef.value.contains(next)) {
+        return;
+      }
+      isEditing.value = false;
+      commitCurrentQuery();
+      closeDropdown();
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    function handleKeyDown(event) {
+      const intent = getAutoCompleteKeyIntent(event.key, isOpen.value, activeIndex.value);
+      switch (intent.type) {
+        case "open":
+          event.preventDefault();
+          openDropdown();
+          return;
+        case "navigate":
+          event.preventDefault();
+          activeIndex.value = getPickerNavigationIndex(
+            filteredOptions.value,
+            activeIndex.value,
+            intent.key
+          );
+          return;
+        case "select-active": {
+          event.preventDefault();
+          const option = filteredOptions.value[activeIndex.value];
+          if (option) handleSelect(option);
+          return;
+        }
+        case "commit-query":
+          event.preventDefault();
+          isEditing.value = false;
+          commitCurrentQuery();
+          closeDropdown();
+          return;
+        case "close":
+          event.preventDefault();
+          isEditing.value = false;
+          revertQuery();
+          closeDropdown();
+          return;
+        default:
+          return;
+      }
+    }
+    expose({
+      focus: () => inputRef.value?.focus(),
+      open: openDropdown,
+      close: closeDropdown,
+      input: inputRef
+    });
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const ariaLabel = typeof restAttrs["aria-label"] === "string" ? restAttrs["aria-label"] : void 0;
+      const attrLabelledby = typeof restAttrs["aria-labelledby"] === "string" ? restAttrs["aria-labelledby"] : void 0;
+      const labelledby = attrLabelledby?.trim() ? attrLabelledby : formItemControl?.labelId.value;
+      const describedBy = mergeAriaDescribedBy(
+        typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      );
+      const attrId = typeof restAttrs.id === "string" ? restAttrs.id : void 0;
+      const effectiveId = attrId ?? formItemControl?.id.value;
+      const effectiveName = props.name ?? formItemControl?.name.value;
+      const expanded = isOpen.value && hasOptions.value;
+      const comboboxAria = {
+        ...getPickerComboboxAria({
+          expanded,
+          listboxId,
+          activeIndex: expanded ? activeIndex.value : -1
+        }),
+        "aria-autocomplete": "list",
+        id: effectiveId,
+        name: effectiveName,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelledby,
+        "aria-describedby": describedBy,
+        "aria-invalid": status.value === "error" ? true : void 0,
+        "aria-required": formItemControl?.required.value ? true : void 0
+      };
+      const options = filteredOptions.value;
+      const dropdown = isOpen.value ? renderVueOverlayTeleport(
+        h(
+          "div",
+          {
+            ref: dropdownRef,
+            class: classNames(
+              autoCompleteDropdownClasses,
+              overlay.floatingClasses.value,
+              props.dropdownClassName
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value,
+            "data-tiger-autocomplete-dropdown": "",
+            onMousedown: (event) => event.preventDefault(),
+            onFocusout: handleFocusOut
+          },
+          [
+            hasOptions.value ? h(
+              "div",
+              {
+                class: autoCompleteListboxClasses,
+                style: getAutoCompletePanelStyle(props.listHeight),
+                ...getPickerListboxAria({ id: listboxId })
+              },
+              options.map((option, index) => {
+                const selectedFlag = isSameAutoCompleteValue(option.value, selected.value);
+                const isActive = index === activeIndex.value;
+                return h(
+                  "div",
+                  {
+                    key: getAutoCompleteOptionKey(option, index),
+                    id: getPickerOptionId(listboxId, index),
+                    "data-active": isActive || void 0,
+                    ...getPickerOptionAria({
+                      selected: selectedFlag,
+                      disabled: !!option.disabled
+                    }),
+                    class: getAutoCompleteOptionClasses({
+                      isSelected: selectedFlag,
+                      isDisabled: !!option.disabled,
+                      isActive,
+                      size: props.size
+                    }),
+                    onMousedown: (event) => event.preventDefault(),
+                    onClick: () => handleSelect(option),
+                    onMouseenter: () => {
+                      if (!option.disabled) activeIndex.value = index;
+                    }
+                  },
+                  option.label
+                );
+              })
+            ) : h(
+              "div",
+              { class: autoCompleteEmptyStateClasses },
+              props.loading ? mergedLocale.value?.common?.loadingText ?? "Loading..." : resolveLocaleText(emptyLabels.value.noResults, props.emptyText)
+            ),
+            h("div", { class: autoCompleteDoneActionClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: autoCompleteDoneButtonClasses,
+                  onClick: closeDropdown
+                },
+                selectLabels.value.doneText
+              )
+            ])
+          ]
+        ),
+        overlay.target.value
+      ) : null;
+      return h(
+        "div",
+        {
+          ref: rootRef,
+          class: getAutoCompleteRootClasses(
+            inputGroup != null,
+            classNames(props.className, coerceClassValue(attrClass))
+          ),
+          style: attrStyle ?? void 0,
+          [TIGER_CHROME_ATTR]: "",
+          onAnimationend: () => rootRef.value?.classList.remove(SHAKE_CLASS)
+        },
+        [
+          h("div", { class: "relative" }, [
+            h("input", {
+              ...restAttrs,
+              ref: inputRef,
+              type: "text",
+              class: getAutoCompleteInputClasses({
+                size: props.size,
+                disabled: effectiveDisabled.value,
+                isOpen: isOpen.value,
+                status: status.value,
+                hasClear: showClear.value
+              }),
+              value: searchQuery.value,
+              placeholder: props.placeholder,
+              disabled: effectiveDisabled.value,
+              autocomplete: "off",
+              onInput: handleInput,
+              onFocus: handleFocus,
+              onKeydown: handleKeyDown,
+              onFocusout: handleFocusOut,
+              ...comboboxAria
+            }),
+            showClear.value ? h("span", { class: autoCompleteTrailingSlotClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: autoCompleteClearButtonClasses,
+                  "data-tiger-autocomplete-clear": "",
+                  "aria-label": mergedLocale.value?.common?.clearText ?? "Clear",
+                  onMousedown: (event) => event.preventDefault(),
+                  onClick: handleClear
+                },
+                [iconVNode(closeSolidIcon20PathD, autoCompleteClearIconClasses)]
+              )
+            ]) : null
+          ]),
+          dropdown
+        ]
+      );
+    };
+  }
+});
+var AutoComplete_default = AutoComplete;
+
+export {
+  AutoComplete,
+  AutoComplete_default
+};