@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/{chunk-OZYJ3U4H.js → chunk-BGMAWKWV.js}

@@ -1,59 +1,78 @@
-'use strict';
+"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; }// src/components/Select.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Select.ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
 var selectInstanceId = 0;
-var ChevronDownIcon = vue.h(
+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,
+    viewBox: _tigercatcore.icon20ViewBox,
     fill: "currentColor"
   },
   [
-    vue.h("path", {
+    _vue.h.call(void 0, "path", {
       "fill-rule": "evenodd",
-      d: tigercatCore.chevronDownSolidIcon20PathD,
+      d: _tigercatcore.chevronDownSolidIcon20PathD,
       "clip-rule": "evenodd"
     })
   ]
 );
-var CloseIcon = vue.h(
+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,
+    viewBox: _tigercatcore.icon20ViewBox,
     fill: "currentColor"
   },
   [
-    vue.h("path", {
+    _vue.h.call(void 0, "path", {
       "fill-rule": "evenodd",
-      d: tigercatCore.closeSolidIcon20PathD,
+      d: _tigercatcore.closeSolidIcon20PathD,
       "clip-rule": "evenodd"
     })
   ]
 );
-var CheckIcon = vue.h(
+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,
+    viewBox: _tigercatcore.icon20ViewBox,
     fill: "currentColor"
   },
   [
-    vue.h("path", {
+    _vue.h.call(void 0, "path", {
       "fill-rule": "evenodd",
-      d: tigercatCore.checkSolidIcon20PathD,
+      d: _tigercatcore.checkSolidIcon20PathD,
       "clip-rule": "evenodd"
     })
   ]
 );
-var Select = vue.defineComponent({
+var Select = _vue.defineComponent.call(void 0, {
   name: "TigerSelect",
   props: {
     /**
@@ -135,6 +154,30 @@ var Select = vue.defineComponent({
      * @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
@@ -145,32 +188,47 @@ var Select = vue.defineComponent({
       default: 256
     }
   },
-  emits: ["update:modelValue", "change", "search"],
+  emits: ["update:modelValue", "change", "search", "create"],
   setup(props, { emit }) {
     const instanceId = ++selectInstanceId;
     const listboxId = `tiger-select-listbox-${instanceId}`;
     const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-    const isOpen = vue.ref(false);
-    const searchQuery = vue.ref("");
-    const activeIndex = vue.ref(-1);
-    const dropdownRef = vue.ref(null);
-    const triggerRef = vue.ref(null);
-    const searchInputRef = vue.ref(null);
-    const filteredOptions = vue.computed(() => {
-      if (!props.searchable || !searchQuery.value) {
-        return props.options;
-      }
-      return tigercatCore.filterOptions(props.options, searchQuery.value);
+    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(() => tigercatCore.flattenSelectOptions(props.options));
-    const flatFilteredOptions = vue.computed(() => tigercatCore.flattenSelectOptions(filteredOptions.value));
-    const displayText = vue.computed(() => {
+    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.filter((opt) => currentValue.includes(opt.value));
+        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);
@@ -182,10 +240,12 @@ var Select = vue.defineComponent({
       if (value === void 0 || value === null || value === "") {
         return props.placeholder;
       }
-      const option = allOptions.value.find((opt) => opt.value === value);
+      const option = [...allOptions.value, ...createdOptions.value].find(
+        (opt) => opt.value === value
+      );
       return option ? option.label : props.placeholder;
     });
-    const showClearButton = vue.computed(() => {
+    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) {
@@ -194,17 +254,17 @@ var Select = vue.defineComponent({
       }
       return props.modelValue === option.value;
     }
-    const findFirstEnabledIndex = () => tigercatCore.findFirstEnabledIndex(flatFilteredOptions.value);
-    const findLastEnabledIndex = () => tigercatCore.findLastEnabledIndex(flatFilteredOptions.value);
-    const findNextEnabledIndex = (current, direction) => tigercatCore.findNextEnabledIndex(flatFilteredOptions.value, current, direction);
+    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(() => {
-        const el = dropdownRef.value?.querySelector(`[data-option-index="${index}"]`);
-        el?.focus();
-        el?.scrollIntoView({ block: "nearest" });
+      _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) => {
@@ -215,8 +275,8 @@ var Select = vue.defineComponent({
       if (!props.disabled) {
         isOpen.value = !isOpen.value;
         if (isOpen.value && props.searchable) {
-          vue.nextTick(() => {
-            searchInputRef.value?.focus();
+          _vue.nextTick.call(void 0, () => {
+            _optionalChain([searchInputRef, 'access', _8 => _8.value, 'optionalAccess', _9 => _9.focus, 'call', _10 => _10()]);
           });
         }
       }
@@ -230,6 +290,10 @@ var Select = vue.defineComponent({
       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;
@@ -244,8 +308,9 @@ var Select = vue.defineComponent({
         emit("update:modelValue", option.value);
         emit("change", option.value);
         closeDropdown();
-        vue.nextTick(() => {
-          triggerRef.value?.focus();
+        _vue.nextTick.call(void 0, () => {
+          ;
+          _optionalChain([triggerRef, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]);
         });
       }
     }
@@ -263,13 +328,13 @@ var Select = vue.defineComponent({
     function handleSearchInput(event) {
       const target = event.target;
       searchQuery.value = target.value;
-      emit("search", target.value);
+      searchDebouncer.schedule(target.value);
     }
     function getActiveOption() {
       if (activeIndex.value < 0) {
         return void 0;
       }
-      return flatFilteredOptions.value[activeIndex.value];
+      return flatSelectableOptions.value[activeIndex.value];
     }
     function selectActiveOption() {
       const option = getActiveOption();
@@ -359,8 +424,9 @@ var Select = vue.defineComponent({
         case "Escape": {
           event.preventDefault();
           closeDropdown();
-          vue.nextTick(() => {
-            triggerRef.value?.focus();
+          _vue.nextTick.call(void 0, () => {
+            ;
+            _optionalChain([triggerRef, 'access', _14 => _14.value, 'optionalAccess', _15 => _15.focus, 'call', _16 => _16()]);
           });
           return;
         }
@@ -404,8 +470,9 @@ var Select = vue.defineComponent({
           event.preventDefault();
           event.stopPropagation();
           closeDropdown();
-          vue.nextTick(() => {
-            triggerRef.value?.focus();
+          _vue.nextTick.call(void 0, () => {
+            ;
+            _optionalChain([triggerRef, 'access', _17 => _17.value, 'optionalAccess', _18 => _18.focus, 'call', _19 => _19()]);
           });
           return;
         }
@@ -413,7 +480,7 @@ var Select = vue.defineComponent({
           return;
       }
     }
-    vue.watch(
+    _vue.watch.call(void 0, 
       isOpen,
       (open) => {
         if (open) {
@@ -424,7 +491,7 @@ var Select = vue.defineComponent({
               if (values.length === 0) {
                 return -1;
               }
-              return flatFilteredOptions.value.findIndex(
+              return flatSelectableOptions.value.findIndex(
                 (opt) => values.includes(opt.value) && !opt.disabled
               );
             }
@@ -432,7 +499,7 @@ var Select = vue.defineComponent({
             if (value === void 0 || value === null || value === "") {
               return -1;
             }
-            return flatFilteredOptions.value.findIndex(
+            return flatSelectableOptions.value.findIndex(
               (opt) => opt.value === value && !opt.disabled
             );
           })();
@@ -447,14 +514,31 @@ var Select = vue.defineComponent({
       },
       { immediate: true }
     );
-    vue.onBeforeUnmount(() => {
+    _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(props.size, props.disabled, isOpen.value);
-      return vue.h("div", { class: tigercatCore.selectBaseClasses }, [
+      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(
+        _vue.h.call(void 0, 
           "button",
           {
             ref: triggerRef,
@@ -469,18 +553,18 @@ var Select = vue.defineComponent({
             "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? getOptionId(activeIndex.value) : void 0
           },
           [
-            vue.h(
+            _vue.h.call(void 0, 
               "span",
               {
-                class: tigercatCore.classNames(
+                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("span", { class: "flex items-center gap-1" }, [
-              showClearButton.value && vue.h(
+            _vue.h.call(void 0, "span", { class: "flex items-center gap-1" }, [
+              showClearButton.value && _vue.h.call(void 0, 
                 "span",
                 {
                   class: "inline-flex",
@@ -490,10 +574,10 @@ var Select = vue.defineComponent({
                 },
                 CloseIcon
               ),
-              vue.h(
+              _vue.h.call(void 0, 
                 "span",
                 {
-                  class: tigercatCore.classNames("inline-flex", isOpen.value && "rotate-180")
+                  class: _tigercatcore.classNames.call(void 0, "inline-flex", isOpen.value && "rotate-180")
                 },
                 ChevronDownIcon
               )
@@ -501,11 +585,11 @@ var Select = vue.defineComponent({
           ]
         ),
         // Dropdown
-        isOpen.value && vue.h(
+        isOpen.value && _vue.h.call(void 0, 
           "div",
           {
             ref: dropdownRef,
-            class: tigercatCore.selectDropdownBaseClasses,
+            class: _tigercatcore.selectDropdownBaseClasses,
             role: "listbox",
             id: listboxId,
             "aria-multiselectable": props.multiple ? true : void 0,
@@ -513,10 +597,10 @@ var Select = vue.defineComponent({
           },
           [
             // Search input
-            props.searchable && vue.h("input", {
+            props.searchable && _vue.h.call(void 0, "input", {
               ref: searchInputRef,
               type: "text",
-              class: tigercatCore.selectSearchInputClasses,
+              class: _tigercatcore.selectSearchInputClasses,
               placeholder: "Search...",
               value: searchQuery.value,
               onInput: handleSearchInput,
@@ -525,10 +609,10 @@ var Select = vue.defineComponent({
             // Options list
             filteredOptions.value.length > 0 ? (() => {
               let optionIndex = -1;
-              const renderOptionItem = (option, idx) => {
+              const renderOptionItem = (option, idx, displayLabel = option.label) => {
                 const selected = isSelected(option);
                 const active = idx === activeIndex.value;
-                return vue.h(
+                return _vue.h.call(void 0, 
                   "div",
                   {
                     key: option.value,
@@ -538,7 +622,7 @@ var Select = vue.defineComponent({
                     "aria-selected": selected,
                     "aria-disabled": option.disabled ? true : void 0,
                     tabindex: active ? 0 : -1,
-                    class: tigercatCore.getSelectOptionClasses(selected, !!option.disabled, props.size),
+                    class: _tigercatcore.getSelectOptionClasses.call(void 0, selected, !!option.disabled, props.size),
                     onMouseenter: () => {
                       if (!option.disabled) {
                         activeIndex.value = idx;
@@ -547,17 +631,17 @@ var Select = vue.defineComponent({
                     onClick: () => selectOption(option)
                   },
                   [
-                    vue.h("span", { class: "flex items-center justify-between w-full" }, [
-                      vue.h("span", option.label),
-                      selected && vue.h("span", CheckIcon)
+                    _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)
                     ])
                   ]
                 );
               };
-              return filteredOptions.value.map((item) => {
-                if (tigercatCore.isOptionGroup(item)) {
-                  return vue.h("div", { key: item.label }, [
-                    vue.h("div", { class: tigercatCore.selectGroupLabelClasses }, item.label),
+              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);
@@ -567,9 +651,48 @@ var Select = vue.defineComponent({
                 optionIndex += 1;
                 return renderOptionItem(item, optionIndex);
               });
-            })() : vue.h(
+              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 },
+              { class: _tigercatcore.selectEmptyStateClasses },
               props.options.length === 0 ? props.noDataText : props.noOptionsText
             )
           ]
@@ -580,5 +703,7 @@ var Select = vue.defineComponent({
 });
 var Select_default = Select;
 
-exports.Select = Select;
-exports.Select_default = Select_default;
+
+
+
+exports.Select = Select; exports.Select_default = Select_default;