@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/{chunk-ZWTC2CUB.mjs → chunk-PYT5DTQQ.mjs}

@@ -1,7 +1,28 @@
-import { h, defineComponent, ref, computed, watch, onBeforeUnmount, nextTick } from 'vue';
-import { icon20ViewBox, chevronDownSolidIcon20PathD, closeSolidIcon20PathD, checkSolidIcon20PathD, filterOptions, flattenSelectOptions, findFirstEnabledIndex, getSelectTriggerClasses, selectBaseClasses, classNames, selectDropdownBaseClasses, selectSearchInputClasses, isOptionGroup, selectGroupLabelClasses, selectEmptyStateClasses, findNextEnabledIndex, findLastEnabledIndex, getSelectOptionClasses } from '@expcat/tigercat-core';
-
 // src/components/Select.ts
+import { defineComponent, computed, ref, h, watch, nextTick, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  getSelectTriggerClasses,
+  getSelectOptionClasses,
+  selectBaseClasses,
+  selectDropdownBaseClasses,
+  selectGroupLabelClasses,
+  selectSearchInputClasses,
+  selectEmptyStateClasses,
+  isOptionGroup,
+  createSelectSearchDebouncer,
+  getCreateSelectOptionLabel,
+  flattenSelectOptions,
+  resolveCreatableSelectOption,
+  resolveSelectFilteredOptions,
+  findFirstEnabledIndex as pickerFindFirstEnabledIndex,
+  findLastEnabledIndex as pickerFindLastEnabledIndex,
+  findNextEnabledIndex as pickerFindNextEnabledIndex,
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  checkSolidIcon20PathD
+} from "@expcat/tigercat-core";
 var selectInstanceId = 0;
 var ChevronDownIcon = h(
   "svg",
@@ -133,6 +154,30 @@ var Select = 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
@@ -143,7 +188,7 @@ var Select = 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}`;
@@ -151,24 +196,39 @@ var Select = defineComponent({
     const isOpen = ref(false);
     const searchQuery = ref("");
     const activeIndex = ref(-1);
+    const createdOptions = ref([]);
     const dropdownRef = ref(null);
     const triggerRef = ref(null);
     const searchInputRef = ref(null);
+    let searchDebouncer = createSelectSearchDebouncer({
+      delay: props.searchDebounce,
+      onSearch: (query) => emit("search", query)
+    });
     const filteredOptions = computed(() => {
-      if (!props.searchable || !searchQuery.value) {
-        return props.options;
-      }
-      return filterOptions(props.options, searchQuery.value);
+      return resolveSelectFilteredOptions(props.options, searchQuery.value, {
+        searchable: props.searchable,
+        remote: props.remote
+      });
     });
     const allOptions = computed(() => flattenSelectOptions(props.options));
     const flatFilteredOptions = computed(() => flattenSelectOptions(filteredOptions.value));
+    const creatableOption = computed(
+      () => resolveCreatableSelectOption([...props.options, ...createdOptions.value], searchQuery.value, {
+        creatable: props.creatable && props.searchable
+      })
+    );
+    const flatSelectableOptions = computed(() => {
+      return creatableOption.value ? [...flatFilteredOptions.value, creatableOption.value] : flatFilteredOptions.value;
+    });
     const displayText = computed(() => {
       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);
@@ -180,7 +240,9 @@ var Select = 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 = computed(() => {
@@ -192,9 +254,9 @@ var Select = defineComponent({
       }
       return props.modelValue === option.value;
     }
-    const findFirstEnabledIndex$1 = () => findFirstEnabledIndex(flatFilteredOptions.value);
-    const findLastEnabledIndex$1 = () => findLastEnabledIndex(flatFilteredOptions.value);
-    const findNextEnabledIndex$1 = (current, direction) => findNextEnabledIndex(flatFilteredOptions.value, current, direction);
+    const findFirstEnabledIndex = () => pickerFindFirstEnabledIndex(flatSelectableOptions.value);
+    const findLastEnabledIndex = () => pickerFindLastEnabledIndex(flatSelectableOptions.value);
+    const findNextEnabledIndex = (current, direction) => pickerFindNextEnabledIndex(flatSelectableOptions.value, current, direction);
     const focusOptionAt = (index) => {
       if (index < 0) {
         return;
@@ -228,6 +290,10 @@ var Select = 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;
@@ -243,6 +309,7 @@ var Select = defineComponent({
         emit("change", option.value);
         closeDropdown();
         nextTick(() => {
+          ;
           triggerRef.value?.focus();
         });
       }
@@ -261,13 +328,13 @@ var Select = 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();
@@ -287,7 +354,7 @@ var Select = defineComponent({
             isOpen.value = true;
             return;
           }
-          const next = findNextEnabledIndex$1(activeIndex.value, 1);
+          const next = findNextEnabledIndex(activeIndex.value, 1);
           setActiveAndFocus(next);
           return;
         }
@@ -297,7 +364,7 @@ var Select = defineComponent({
             isOpen.value = true;
             return;
           }
-          const next = findNextEnabledIndex$1(activeIndex.value, -1);
+          const next = findNextEnabledIndex(activeIndex.value, -1);
           setActiveAndFocus(next);
           return;
         }
@@ -326,25 +393,25 @@ var Select = defineComponent({
       switch (event.key) {
         case "ArrowDown": {
           event.preventDefault();
-          const next = findNextEnabledIndex$1(activeIndex.value, 1);
+          const next = findNextEnabledIndex(activeIndex.value, 1);
           setActiveAndFocus(next);
           return;
         }
         case "ArrowUp": {
           event.preventDefault();
-          const next = findNextEnabledIndex$1(activeIndex.value, -1);
+          const next = findNextEnabledIndex(activeIndex.value, -1);
           setActiveAndFocus(next);
           return;
         }
         case "Home": {
           event.preventDefault();
-          const next = findFirstEnabledIndex$1();
+          const next = findFirstEnabledIndex();
           setActiveAndFocus(next);
           return;
         }
         case "End": {
           event.preventDefault();
-          const next = findLastEnabledIndex$1();
+          const next = findLastEnabledIndex();
           setActiveAndFocus(next);
           return;
         }
@@ -358,6 +425,7 @@ var Select = defineComponent({
           event.preventDefault();
           closeDropdown();
           nextTick(() => {
+            ;
             triggerRef.value?.focus();
           });
           return;
@@ -379,14 +447,14 @@ var Select = defineComponent({
         case "ArrowDown": {
           event.preventDefault();
           event.stopPropagation();
-          const next = activeIndex.value >= 0 ? activeIndex.value : findFirstEnabledIndex$1();
+          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$1();
+          const next = activeIndex.value >= 0 ? activeIndex.value : findLastEnabledIndex();
           setActiveAndFocus(next);
           return;
         }
@@ -403,6 +471,7 @@ var Select = defineComponent({
           event.stopPropagation();
           closeDropdown();
           nextTick(() => {
+            ;
             triggerRef.value?.focus();
           });
           return;
@@ -422,7 +491,7 @@ var Select = defineComponent({
               if (values.length === 0) {
                 return -1;
               }
-              return flatFilteredOptions.value.findIndex(
+              return flatSelectableOptions.value.findIndex(
                 (opt) => values.includes(opt.value) && !opt.disabled
               );
             }
@@ -430,11 +499,11 @@ var Select = defineComponent({
             if (value === void 0 || value === null || value === "") {
               return -1;
             }
-            return flatFilteredOptions.value.findIndex(
+            return flatSelectableOptions.value.findIndex(
               (opt) => opt.value === value && !opt.disabled
             );
           })();
-          const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex$1();
+          const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
           activeIndex.value = nextActive;
           if (!props.searchable) {
             focusOptionAt(nextActive);
@@ -445,8 +514,25 @@ var Select = defineComponent({
       },
       { immediate: true }
     );
+    watch(flatSelectableOptions, () => {
+      if (!isOpen.value) {
+        return;
+      }
+      activeIndex.value = findFirstEnabledIndex();
+    });
+    watch(
+      () => props.searchDebounce,
+      (delay) => {
+        searchDebouncer.cancel();
+        searchDebouncer = createSelectSearchDebouncer({
+          delay,
+          onSearch: (query) => emit("search", query)
+        });
+      }
+    );
     onBeforeUnmount(() => {
       document.removeEventListener("click", handleClickOutside);
+      searchDebouncer.cancel();
     });
     return () => {
       const triggerClasses = getSelectTriggerClasses(props.size, props.disabled, isOpen.value);
@@ -523,7 +609,7 @@ var Select = 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 h(
@@ -546,13 +632,13 @@ var Select = defineComponent({
                   },
                   [
                     h("span", { class: "flex items-center justify-between w-full" }, [
-                      h("span", option.label),
+                      h("span", displayLabel),
                       selected && h("span", CheckIcon)
                     ])
                   ]
                 );
               };
-              return filteredOptions.value.map((item) => {
+              const optionNodes = filteredOptions.value.map((item) => {
                 if (isOptionGroup(item)) {
                   return h("div", { key: item.label }, [
                     h("div", { class: selectGroupLabelClasses }, item.label),
@@ -565,6 +651,45 @@ var Select = defineComponent({
                 optionIndex += 1;
                 return renderOptionItem(item, optionIndex);
               });
+              if (creatableOption.value) {
+                optionIndex += 1;
+                optionNodes.push(
+                  renderOptionItem(
+                    creatableOption.value,
+                    optionIndex,
+                    getCreateSelectOptionLabel(creatableOption.value, props.createOptionText)
+                  )
+                );
+              }
+              return optionNodes;
+            })() : creatableOption.value ? (() => {
+              const optionLabel = getCreateSelectOptionLabel(
+                creatableOption.value,
+                props.createOptionText
+              );
+              return h(
+                "div",
+                {
+                  key: creatableOption.value.value,
+                  id: getOptionId(0),
+                  "data-option-index": 0,
+                  role: "option",
+                  "aria-selected": false,
+                  tabindex: activeIndex.value === 0 ? 0 : -1,
+                  class: getSelectOptionClasses(false, false, props.size),
+                  onMouseenter: () => {
+                    activeIndex.value = 0;
+                  },
+                  onClick: () => selectOption(creatableOption.value)
+                },
+                [
+                  h(
+                    "span",
+                    { class: "flex items-center justify-between w-full" },
+                    optionLabel
+                  )
+                ]
+              );
             })() : h(
               "div",
               { class: selectEmptyStateClasses },
@@ -578,4 +703,7 @@ var Select = defineComponent({
 });
 var Select_default = Select;
 
-export { Select, Select_default };
+export {
+  Select,
+  Select_default
+};

package/dist/{chunk-V667FK4C.mjs → chunk-PZH2RTSS.mjs}

@@ -1,7 +1,47 @@
-import { VirtualList } from './chunk-GWNXDOIG.mjs';
-import { defineComponent, getCurrentInstance, computed, ref, h } from 'vue';
-import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, mergeStyleValues, coerceClassValue, listLoadingOverlayClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getListHeaderFooterClasses, listEmptyStateClasses, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
+import {
+  VirtualList
+} from "./chunk-PENI3H3I.mjs";
 
+// src/components/List.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  getCurrentInstance,
+  h
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  getListClasses,
+  getListItemClasses,
+  getListHeaderFooterClasses,
+  getGridColumnClasses,
+  paginateData,
+  calculatePagination,
+  listWrapperClasses,
+  listSizeClasses,
+  listEmptyStateClasses,
+  listLoadingOverlayClasses,
+  listItemMetaClasses,
+  listItemAvatarClasses,
+  listItemContentClasses,
+  listItemTitleClasses,
+  listItemDescriptionClasses,
+  listItemExtraClasses,
+  listGridContainerClasses,
+  getSpinnerSVG,
+  normalizeSvgAttrs,
+  getLoadingOverlaySpinnerClasses,
+  getSimplePaginationContainerClasses,
+  getSimplePaginationTotalClasses,
+  getSimplePaginationControlsClasses,
+  getSimplePaginationSelectClasses,
+  getSimplePaginationButtonClasses,
+  getSimplePaginationPageIndicatorClasses,
+  getSimplePaginationButtonsWrapperClasses
+} from "@expcat/tigercat-core";
 var spinnerSvg = getSpinnerSVG("spinner");
 var LoadingSpinner = () => {
   return h(
@@ -470,4 +510,7 @@ var List = defineComponent({
 });
 var List_default = List;
 
-export { List, List_default };
+export {
+  List,
+  List_default
+};

package/dist/chunk-Q4MH333P.js

@@ -1,11 +1,11 @@
-'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/CheckboxGroup.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/CheckboxGroup.ts
+
+var _tigercatcore = require('@expcat/tigercat-core');
 var CheckboxGroupKey = /* @__PURE__ */ Symbol("CheckboxGroup");
-var CheckboxGroup = vue.defineComponent({
+var CheckboxGroup = _vue.defineComponent.call(void 0, {
   name: "TigerCheckboxGroup",
   inheritAttrs: false,
   props: {
@@ -63,9 +63,9 @@ var CheckboxGroup = vue.defineComponent({
     change: (value) => Array.isArray(value)
   },
   setup(props, { slots, emit, attrs }) {
-    const internalValue = vue.ref(props.defaultValue);
-    const isControlled = vue.computed(() => props.modelValue !== void 0);
-    const value = vue.computed(() => {
+    const internalValue = _vue.ref.call(void 0, props.defaultValue);
+    const isControlled = _vue.computed.call(void 0, () => props.modelValue !== void 0);
+    const value = _vue.computed.call(void 0, () => {
       return isControlled.value ? props.modelValue : internalValue.value;
     });
     const updateValue = (val, checked) => {
@@ -83,28 +83,30 @@ var CheckboxGroup = vue.defineComponent({
       emit("update:modelValue", currentValue);
       emit("change", currentValue);
     };
-    vue.provide(
+    _vue.provide.call(void 0, 
       CheckboxGroupKey,
-      vue.computed(() => ({
+      _vue.computed.call(void 0, () => ({
         value: value.value,
         disabled: props.disabled,
         size: props.size,
         updateValue
       }))
     );
-    return () => vue.h(
+    return () => _vue.h.call(void 0, 
       "div",
       {
         ...attrs,
-        class: tigercatCore.classNames(props.className, tigercatCore.coerceClassValue(attrs.class)),
+        class: _tigercatcore.classNames.call(void 0, props.className, _tigercatcore.coerceClassValue.call(void 0, attrs.class)),
         style: [attrs.style, props.style]
       },
-      slots.default?.()
+      _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()])
     );
   }
 });
 var CheckboxGroup_default = CheckboxGroup;
 
-exports.CheckboxGroup = CheckboxGroup;
-exports.CheckboxGroupKey = CheckboxGroupKey;
-exports.CheckboxGroup_default = CheckboxGroup_default;
+
+
+
+
+exports.CheckboxGroupKey = CheckboxGroupKey; exports.CheckboxGroup = CheckboxGroup; exports.CheckboxGroup_default = CheckboxGroup_default;