@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/chunk-RLPSCEBP.js

@@ -1,736 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-
-var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
-
-// src/components/Select.ts
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var selectInstanceId = 0;
-var ChevronDownIcon = _vue.h.call(void 0, 
-  "svg",
-  {
-    class: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: _tigercatcore.icon20ViewBox,
-    fill: "currentColor"
-  },
-  [
-    _vue.h.call(void 0, "path", {
-      "fill-rule": "evenodd",
-      d: _tigercatcore.chevronDownSolidIcon20PathD,
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var CloseIcon = _vue.h.call(void 0, 
-  "svg",
-  {
-    class: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: _tigercatcore.icon20ViewBox,
-    fill: "currentColor"
-  },
-  [
-    _vue.h.call(void 0, "path", {
-      "fill-rule": "evenodd",
-      d: _tigercatcore.closeSolidIcon20PathD,
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var CheckIcon = _vue.h.call(void 0, 
-  "svg",
-  {
-    class: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: _tigercatcore.icon20ViewBox,
-    fill: "currentColor"
-  },
-  [
-    _vue.h.call(void 0, "path", {
-      "fill-rule": "evenodd",
-      d: _tigercatcore.checkSolidIcon20PathD,
-      "clip-rule": "evenodd"
-    })
-  ]
-);
-var Select = _vue.defineComponent.call(void 0, {
-  name: "TigerSelect",
-  props: {
-    /**
-     * Selected value(s) (for v-model)
-     */
-    modelValue: {
-      type: [String, Number, Array]
-    },
-    /**
-     * Available options or option groups
-     * @default []
-     */
-    options: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Select size
-     * @default 'md'
-     */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Whether the select is disabled
-     */
-    disabled: Boolean,
-    /**
-     * Placeholder text
-     * @default 'Select an option'
-     */
-    placeholder: {
-      type: String,
-      default: "Select an option"
-    },
-    /**
-     * Enable search functionality
-     */
-    searchable: Boolean,
-    /**
-     * Allow multiple selection
-     */
-    multiple: Boolean,
-    /**
-     * Show clear button
-     * @default true
-     */
-    clearable: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Text shown when no search results
-     * @default 'No options found'
-     */
-    noOptionsText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Text shown when no data available
-     * @default 'No options available'
-     */
-    noDataText: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Maximum number of tags in multi-select display
-     * @since 0.5.0
-     */
-    maxTagCount: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Whether to use virtual scrolling
-     * @since 0.5.0
-     */
-    virtual: Boolean,
-    /**
-     * Whether search is handled remotely
-     */
-    remote: Boolean,
-    /**
-     * Debounce delay for search callbacks in milliseconds
-     * @default 0
-     */
-    searchDebounce: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Whether users can create a new option from the search query
-     */
-    creatable: Boolean,
-    /**
-     * Prefix text used for the creatable option row
-     * @default 'Create'
-     */
-    createOptionText: {
-      type: String,
-      default: "Create"
-    },
-    /**
-     * Height of the dropdown panel in pixels
-     * @default 256
-     * @since 0.5.0
-     */
-    listHeight: {
-      type: Number,
-      default: 256
-    },
-    /**
-     * Locale overrides merged on top of ConfigProvider locale
-     */
-    locale: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:modelValue", "change", "search", "create"],
-  setup(props, { emit }) {
-    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
-    const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
-    const instanceId = ++selectInstanceId;
-    const listboxId = `tiger-select-listbox-${instanceId}`;
-    const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-    const isOpen = _vue.ref.call(void 0, false);
-    const searchQuery = _vue.ref.call(void 0, "");
-    const activeIndex = _vue.ref.call(void 0, -1);
-    const createdOptions = _vue.ref.call(void 0, []);
-    const dropdownRef = _vue.ref.call(void 0, null);
-    const triggerRef = _vue.ref.call(void 0, null);
-    const searchInputRef = _vue.ref.call(void 0, null);
-    let searchDebouncer = _tigercatcore.createSelectSearchDebouncer.call(void 0, {
-      delay: props.searchDebounce,
-      onSearch: (query) => emit("search", query)
-    });
-    const filteredOptions = _vue.computed.call(void 0, () => {
-      return _tigercatcore.resolveSelectFilteredOptions.call(void 0, props.options, searchQuery.value, {
-        searchable: props.searchable,
-        remote: props.remote
-      });
-    });
-    const allOptions = _vue.computed.call(void 0, () => _tigercatcore.flattenSelectOptions.call(void 0, props.options));
-    const flatFilteredOptions = _vue.computed.call(void 0, () => _tigercatcore.flattenSelectOptions.call(void 0, filteredOptions.value));
-    const creatableOption = _vue.computed.call(void 0, 
-      () => _tigercatcore.resolveCreatableSelectOption.call(void 0, [...props.options, ...createdOptions.value], searchQuery.value, {
-        creatable: props.creatable && props.searchable
-      })
-    );
-    const flatSelectableOptions = _vue.computed.call(void 0, () => {
-      return creatableOption.value ? [...flatFilteredOptions.value, creatableOption.value] : flatFilteredOptions.value;
-    });
-    const displayText = _vue.computed.call(void 0, () => {
-      if (props.multiple && Array.isArray(props.modelValue)) {
-        if (props.modelValue.length === 0) {
-          return props.placeholder;
-        }
-        const currentValue = props.modelValue;
-        const selectedOptions = [...allOptions.value, ...createdOptions.value].filter(
-          (opt) => currentValue.includes(opt.value)
-        );
-        const labels = selectedOptions.map((opt) => opt.label);
-        if (props.maxTagCount !== void 0 && labels.length > props.maxTagCount) {
-          const visible = labels.slice(0, props.maxTagCount);
-          return `${visible.join(", ")} +${labels.length - props.maxTagCount}`;
-        }
-        return labels.join(", ");
-      }
-      const value = Array.isArray(props.modelValue) ? void 0 : props.modelValue;
-      if (value === void 0 || value === null || value === "") {
-        return props.placeholder;
-      }
-      const option = [...allOptions.value, ...createdOptions.value].find(
-        (opt) => opt.value === value
-      );
-      return option ? option.label : props.placeholder;
-    });
-    const showClearButton = _vue.computed.call(void 0, () => {
-      return props.clearable && !props.disabled && props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "" && (!Array.isArray(props.modelValue) || props.modelValue.length > 0);
-    });
-    function isSelected(option) {
-      if (props.multiple && Array.isArray(props.modelValue)) {
-        return props.modelValue.includes(option.value);
-      }
-      return props.modelValue === option.value;
-    }
-    const findFirstEnabledIndex = () => _tigercatcore.findFirstEnabledIndex.call(void 0, flatSelectableOptions.value);
-    const findLastEnabledIndex = () => _tigercatcore.findLastEnabledIndex.call(void 0, flatSelectableOptions.value);
-    const findNextEnabledIndex = (current, direction) => _tigercatcore.findNextEnabledIndex.call(void 0, flatSelectableOptions.value, current, direction);
-    const focusOptionAt = (index) => {
-      if (index < 0) {
-        return;
-      }
-      _vue.nextTick.call(void 0, () => {
-        const el = _optionalChain([dropdownRef, 'access', _ => _.value, 'optionalAccess', _2 => _2.querySelector, 'call', _3 => _3(`[data-option-index="${index}"]`)]);
-        _optionalChain([el, 'optionalAccess', _4 => _4.focus, 'call', _5 => _5()]);
-        _optionalChain([el, 'optionalAccess', _6 => _6.scrollIntoView, 'call', _7 => _7({ block: "nearest" })]);
-      });
-    };
-    const setActiveAndFocus = (index) => {
-      activeIndex.value = index;
-      focusOptionAt(index);
-    };
-    function toggleDropdown() {
-      if (!props.disabled) {
-        isOpen.value = !isOpen.value;
-        if (isOpen.value && props.searchable) {
-          _vue.nextTick.call(void 0, () => {
-            _optionalChain([searchInputRef, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.focus, 'call', _10 => _10()]);
-          });
-        }
-      }
-    }
-    function closeDropdown() {
-      isOpen.value = false;
-      searchQuery.value = "";
-      activeIndex.value = -1;
-    }
-    function selectOption(option) {
-      if (option.disabled) {
-        return;
-      }
-      if (creatableOption.value && option.value === creatableOption.value.value) {
-        createdOptions.value = [...createdOptions.value, option];
-        emit("create", option);
-      }
-      if (props.multiple) {
-        const currentValue = Array.isArray(props.modelValue) ? props.modelValue : [];
-        let newValue;
-        if (currentValue.includes(option.value)) {
-          newValue = currentValue.filter((v) => v !== option.value);
-        } else {
-          newValue = [...currentValue, option.value];
-        }
-        emit("update:modelValue", newValue);
-        emit("change", newValue);
-      } else {
-        emit("update:modelValue", option.value);
-        emit("change", option.value);
-        closeDropdown();
-        _vue.nextTick.call(void 0, () => {
-          ;
-          _optionalChain([triggerRef, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]);
-        });
-      }
-    }
-    function clearSelection(event) {
-      event.stopPropagation();
-      const newValue = props.multiple ? [] : void 0;
-      emit("update:modelValue", newValue);
-      emit("change", newValue);
-    }
-    function handleClickOutside(event) {
-      if (dropdownRef.value && triggerRef.value && !dropdownRef.value.contains(event.target) && !triggerRef.value.contains(event.target)) {
-        closeDropdown();
-      }
-    }
-    function handleSearchInput(event) {
-      const target = event.target;
-      searchQuery.value = target.value;
-      searchDebouncer.schedule(target.value);
-    }
-    function getActiveOption() {
-      if (activeIndex.value < 0) {
-        return void 0;
-      }
-      return flatSelectableOptions.value[activeIndex.value];
-    }
-    function selectActiveOption() {
-      const option = getActiveOption();
-      if (!option || option.disabled) {
-        return;
-      }
-      selectOption(option);
-    }
-    function handleTriggerKeyDown(event) {
-      if (props.disabled) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowDown": {
-          event.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-            return;
-          }
-          const next = findNextEnabledIndex(activeIndex.value, 1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-            return;
-          }
-          const next = findNextEnabledIndex(activeIndex.value, -1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Enter":
-        case " ": {
-          event.preventDefault();
-          if (!isOpen.value) {
-            isOpen.value = true;
-            return;
-          }
-          selectActiveOption();
-          return;
-        }
-        case "Escape": {
-          if (isOpen.value) {
-            event.preventDefault();
-            closeDropdown();
-          }
-          return;
-        }
-        default:
-          return;
-      }
-    }
-    function handleDropdownKeyDown(event) {
-      switch (event.key) {
-        case "ArrowDown": {
-          event.preventDefault();
-          const next = findNextEnabledIndex(activeIndex.value, 1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          const next = findNextEnabledIndex(activeIndex.value, -1);
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Home": {
-          event.preventDefault();
-          const next = findFirstEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "End": {
-          event.preventDefault();
-          const next = findLastEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Enter":
-        case " ": {
-          event.preventDefault();
-          selectActiveOption();
-          return;
-        }
-        case "Escape": {
-          event.preventDefault();
-          closeDropdown();
-          _vue.nextTick.call(void 0, () => {
-            ;
-            _optionalChain([triggerRef, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.focus, 'call', _16 => _16()]);
-          });
-          return;
-        }
-        case "Tab": {
-          closeDropdown();
-          return;
-        }
-        default:
-          return;
-      }
-    }
-    function handleSearchKeyDown(event) {
-      switch (event.key) {
-        case " ": {
-          event.stopPropagation();
-          return;
-        }
-        case "ArrowDown": {
-          event.preventDefault();
-          event.stopPropagation();
-          const next = activeIndex.value >= 0 ? activeIndex.value : findFirstEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "ArrowUp": {
-          event.preventDefault();
-          event.stopPropagation();
-          const next = activeIndex.value >= 0 ? activeIndex.value : findLastEnabledIndex();
-          setActiveAndFocus(next);
-          return;
-        }
-        case "Enter": {
-          if (activeIndex.value >= 0) {
-            event.preventDefault();
-            event.stopPropagation();
-            selectActiveOption();
-          }
-          return;
-        }
-        case "Escape": {
-          event.preventDefault();
-          event.stopPropagation();
-          closeDropdown();
-          _vue.nextTick.call(void 0, () => {
-            ;
-            _optionalChain([triggerRef, 'access', _17 => _17.value, 'optionalAccess', _18 => _18.focus, 'call', _19 => _19()]);
-          });
-          return;
-        }
-        default:
-          return;
-      }
-    }
-    _vue.watch.call(void 0, 
-      isOpen,
-      (open) => {
-        if (open) {
-          document.addEventListener("click", handleClickOutside);
-          const selectedIndex = (() => {
-            if (props.multiple && Array.isArray(props.modelValue)) {
-              const values = props.modelValue;
-              if (values.length === 0) {
-                return -1;
-              }
-              return flatSelectableOptions.value.findIndex(
-                (opt) => values.includes(opt.value) && !opt.disabled
-              );
-            }
-            const value = Array.isArray(props.modelValue) ? void 0 : props.modelValue;
-            if (value === void 0 || value === null || value === "") {
-              return -1;
-            }
-            return flatSelectableOptions.value.findIndex(
-              (opt) => opt.value === value && !opt.disabled
-            );
-          })();
-          const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
-          activeIndex.value = nextActive;
-          if (!props.searchable) {
-            focusOptionAt(nextActive);
-          }
-        } else {
-          document.removeEventListener("click", handleClickOutside);
-        }
-      },
-      { immediate: true }
-    );
-    _vue.watch.call(void 0, flatSelectableOptions, () => {
-      if (!isOpen.value) {
-        return;
-      }
-      activeIndex.value = findFirstEnabledIndex();
-    });
-    _vue.watch.call(void 0, 
-      () => props.searchDebounce,
-      (delay) => {
-        searchDebouncer.cancel();
-        searchDebouncer = _tigercatcore.createSelectSearchDebouncer.call(void 0, {
-          delay,
-          onSearch: (query) => emit("search", query)
-        });
-      }
-    );
-    _vue.onBeforeUnmount.call(void 0, () => {
-      document.removeEventListener("click", handleClickOutside);
-      searchDebouncer.cancel();
-    });
-    return () => {
-      const triggerClasses = _tigercatcore.getSelectTriggerClasses.call(void 0, props.size, props.disabled, isOpen.value);
-      return _vue.h.call(void 0, "div", { class: _tigercatcore.selectBaseClasses }, [
-        // Trigger button
-        _vue.h.call(void 0, 
-          "button",
-          {
-            ref: triggerRef,
-            type: "button",
-            class: triggerClasses,
-            disabled: props.disabled,
-            onClick: toggleDropdown,
-            onKeydown: handleTriggerKeyDown,
-            "aria-haspopup": "listbox",
-            "aria-expanded": isOpen.value,
-            "aria-controls": listboxId,
-            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? getOptionId(activeIndex.value) : void 0,
-            "data-state": isOpen.value ? "open" : "closed"
-          },
-          [
-            _vue.h.call(void 0, 
-              "span",
-              {
-                class: _tigercatcore.classNames.call(void 0, 
-                  "flex-1 text-left truncate",
-                  displayText.value === props.placeholder && "text-[var(--tiger-select-placeholder,var(--tiger-text-muted,#9ca3af))]"
-                )
-              },
-              displayText.value
-            ),
-            _vue.h.call(void 0, "span", { class: "flex items-center gap-1" }, [
-              showClearButton.value && _vue.h.call(void 0, 
-                "span",
-                {
-                  class: "inline-flex",
-                  "data-tiger-select-clear": "",
-                  "aria-label": "Clear selection",
-                  onClick: clearSelection
-                },
-                CloseIcon
-              ),
-              _vue.h.call(void 0, 
-                "span",
-                {
-                  class: _tigercatcore.classNames.call(void 0, "inline-flex", isOpen.value && "rotate-180")
-                },
-                ChevronDownIcon
-              )
-            ])
-          ]
-        ),
-        // Dropdown
-        isOpen.value && _vue.h.call(void 0, 
-          "div",
-          {
-            ref: dropdownRef,
-            class: _tigercatcore.selectDropdownBaseClasses,
-            role: "listbox",
-            id: listboxId,
-            "aria-multiselectable": props.multiple ? true : void 0,
-            onKeydown: handleDropdownKeyDown
-          },
-          [
-            // Search input
-            props.searchable && _vue.h.call(void 0, "input", {
-              ref: searchInputRef,
-              type: "text",
-              class: _tigercatcore.selectSearchInputClasses,
-              placeholder: _tigercatcore.resolveLocaleText.call(void 0, 
-                "Search...",
-                _optionalChain([mergedLocale, 'access', _20 => _20.value, 'optionalAccess', _21 => _21.common, 'optionalAccess', _22 => _22.searchPlaceholder])
-              ),
-              value: searchQuery.value,
-              onInput: handleSearchInput,
-              onKeydown: handleSearchKeyDown
-            }),
-            // Options list
-            filteredOptions.value.length > 0 ? (() => {
-              let optionIndex = -1;
-              const renderOptionItem = (option, idx, displayLabel = option.label) => {
-                const selected = isSelected(option);
-                const active = idx === activeIndex.value;
-                return _vue.h.call(void 0, 
-                  "div",
-                  {
-                    key: option.value,
-                    id: getOptionId(idx),
-                    "data-option-index": idx,
-                    role: "option",
-                    "aria-selected": selected,
-                    "aria-disabled": option.disabled ? true : void 0,
-                    tabindex: active ? 0 : -1,
-                    class: _tigercatcore.getSelectOptionClasses.call(void 0, selected, !!option.disabled, props.size),
-                    onMouseenter: () => {
-                      if (!option.disabled) {
-                        activeIndex.value = idx;
-                      }
-                    },
-                    onClick: () => selectOption(option)
-                  },
-                  [
-                    _vue.h.call(void 0, "span", { class: "flex items-center justify-between w-full" }, [
-                      _vue.h.call(void 0, "span", displayLabel),
-                      selected && _vue.h.call(void 0, "span", CheckIcon)
-                    ])
-                  ]
-                );
-              };
-              const optionNodes = filteredOptions.value.map((item) => {
-                if (_tigercatcore.isOptionGroup.call(void 0, item)) {
-                  return _vue.h.call(void 0, "div", { key: item.label }, [
-                    _vue.h.call(void 0, "div", { class: _tigercatcore.selectGroupLabelClasses }, item.label),
-                    item.options.map((option) => {
-                      optionIndex += 1;
-                      return renderOptionItem(option, optionIndex);
-                    })
-                  ]);
-                }
-                optionIndex += 1;
-                return renderOptionItem(item, optionIndex);
-              });
-              if (creatableOption.value) {
-                optionIndex += 1;
-                optionNodes.push(
-                  renderOptionItem(
-                    creatableOption.value,
-                    optionIndex,
-                    _tigercatcore.getCreateSelectOptionLabel.call(void 0, creatableOption.value, props.createOptionText)
-                  )
-                );
-              }
-              return optionNodes;
-            })() : creatableOption.value ? (() => {
-              const optionLabel = _tigercatcore.getCreateSelectOptionLabel.call(void 0, 
-                creatableOption.value,
-                props.createOptionText
-              );
-              return _vue.h.call(void 0, 
-                "div",
-                {
-                  key: creatableOption.value.value,
-                  id: getOptionId(0),
-                  "data-option-index": 0,
-                  role: "option",
-                  "aria-selected": false,
-                  tabindex: activeIndex.value === 0 ? 0 : -1,
-                  class: _tigercatcore.getSelectOptionClasses.call(void 0, false, false, props.size),
-                  onMouseenter: () => {
-                    activeIndex.value = 0;
-                  },
-                  onClick: () => selectOption(creatableOption.value)
-                },
-                [
-                  _vue.h.call(void 0, 
-                    "span",
-                    { class: "flex items-center justify-between w-full" },
-                    optionLabel
-                  )
-                ]
-              );
-            })() : _vue.h.call(void 0, 
-              "div",
-              { class: _tigercatcore.selectEmptyStateClasses },
-              props.options.length === 0 ? _tigercatcore.resolveLocaleText.call(void 0, 
-                "No options available",
-                props.noDataText,
-                _optionalChain([mergedLocale, 'access', _23 => _23.value, 'optionalAccess', _24 => _24.common, 'optionalAccess', _25 => _25.emptyText])
-              ) : _tigercatcore.resolveLocaleText.call(void 0, 
-                "No options found",
-                props.noOptionsText,
-                _optionalChain([mergedLocale, 'access', _26 => _26.value, 'optionalAccess', _27 => _27.common, 'optionalAccess', _28 => _28.emptyText])
-              )
-            )
-          ]
-        )
-      ]);
-    };
-  }
-});
-var Select_default = Select;
-
-
-
-
-exports.Select = Select; exports.Select_default = Select_default;