@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/{chunk-ZZ5LMO3X.js → chunk-QDFUM2QT.js}

@@ -1,31 +1,13 @@
 'use strict';
 
+var chunkJCMGBKS6_js = require('./chunk-JCMGBKS6.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/DatePicker.ts
-var createIcon = (path, className) => {
-  return vue.h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: tigercatCore.icon20ViewBox,
-      fill: "currentColor"
-    },
-    [
-      vue.h("path", {
-        "fill-rule": "evenodd",
-        d: path,
-        "clip-rule": "evenodd"
-      })
-    ]
-  );
-};
-var CalendarIcon = createIcon(tigercatCore.CalendarIconPath, "w-5 h-5");
-var CloseIcon = createIcon(tigercatCore.CloseIconPath, "w-4 h-4");
-var ChevronLeftIcon = createIcon(tigercatCore.ChevronLeftIconPath, "w-5 h-5");
-var ChevronRightIcon = createIcon(tigercatCore.ChevronRightIconPath, "w-5 h-5");
+var CalendarIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.CalendarIconPath, "w-5 h-5");
+var CloseIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.CloseIconPath, "w-4 h-4");
+var ChevronLeftIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.ChevronLeftIconPath, "w-5 h-5");
+var ChevronRightIcon = chunkJCMGBKS6_js.createFilledIcon(tigercatCore.ChevronRightIconPath, "w-5 h-5");
 var isDateLike = (value) => value === null || value instanceof Date || typeof value === "string";
 var isModelValue = (value) => {
   if (isDateLike(value)) return true;
@@ -162,6 +144,13 @@ var DatePicker = vue.defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Shortcut presets for quick date selection
+     */
+    shortcuts: {
+      type: Array,
+      default: void 0
     }
   },
   emits: {
@@ -370,6 +359,11 @@ var DatePicker = vue.defineComponent({
     function setToday() {
       selectDate(/* @__PURE__ */ new Date());
     }
+    function handleShortcut(shortcut) {
+      const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
+      emitValue(val);
+      closeCalendar();
+    }
     function selectDate(date) {
       if (!date) return;
       const normalizedDate = tigercatCore.normalizeDate(date);
@@ -626,6 +620,24 @@ var DatePicker = vue.defineComponent({
                   ]
                 );
               })(),
+              // Shortcuts panel
+              props.shortcuts?.length ? vue.h(
+                "div",
+                {
+                  class: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]"
+                },
+                props.shortcuts.map(
+                  (sc) => vue.h(
+                    "button",
+                    {
+                      type: "button",
+                      class: tigercatCore.datePickerFooterButtonClasses,
+                      onClick: () => handleShortcut(sc)
+                    },
+                    sc.label
+                  )
+                )
+              ) : null,
               // Footer (range mode only)
               isRangeMode.value ? vue.h("div", { class: tigercatCore.datePickerFooterClasses }, [
                 vue.h(

package/dist/{chunk-YCUO6ZKS.mjs → chunk-QDNTISP7.mjs}

@@ -1,7 +1,7 @@
 import { StepsItem } from './chunk-BQEVLY2O.mjs';
 import { Steps } from './chunk-7UU4PULK.mjs';
-import { useTigerConfig } from './chunk-TRDG56CB.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { useTigerConfig } from './chunk-XP5M2GK7.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { defineComponent, computed, ref, watch, h } from 'vue';
 import { mergeTigerLocale, getFormWizardLabels, classNames, coerceClassValue, mergeStyleValues, resolveLocaleText } from '@expcat/tigercat-core';
 
@@ -65,6 +65,10 @@ var FormWizard = defineComponent({
       type: Object,
       default: void 0
     },
+    autoSave: {
+      type: Function,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -121,6 +125,9 @@ var FormWizard = defineComponent({
       }
       emit("update:current", clamped);
       emit("change", clamped, prev);
+      if (props.autoSave && props.steps[clamped]) {
+        props.autoSave(clamped, props.steps[clamped]);
+      }
     };
     const runBeforeNext = async () => {
       if (!props.beforeNext || !currentStep.value) {
@@ -132,9 +139,20 @@ var FormWizard = defineComponent({
       }
       return false;
     };
+    const findNextUnskipped = (from, direction) => {
+      let idx = from;
+      while (idx >= 0 && idx < totalCount.value) {
+        const step = props.steps[idx];
+        if (!step?.disabled && !step?.skipCondition?.()) return idx;
+        idx += direction;
+      }
+      return currentIndex.value;
+    };
     const handlePrev = () => {
-      if (currentIndex.value <= 0 || props.steps[currentIndex.value - 1]?.disabled) return;
-      setCurrent(currentIndex.value - 1);
+      if (currentIndex.value <= 0) return;
+      const target = findNextUnskipped(currentIndex.value - 1, -1);
+      if (target === currentIndex.value) return;
+      setCurrent(target);
     };
     const handleNext = async () => {
       if (totalCount.value === 0) return;
@@ -145,8 +163,9 @@ var FormWizard = defineComponent({
         emit("finish", currentIndex.value, props.steps);
         return;
       }
-      if (props.steps[currentIndex.value + 1]?.disabled) return;
-      setCurrent(currentIndex.value + 1);
+      const target = findNextUnskipped(currentIndex.value + 1, 1);
+      if (target === currentIndex.value) return;
+      setCurrent(target);
     };
     const handleStepChange = async (nextIndex) => {
       if (nextIndex === currentIndex.value || props.steps[nextIndex]?.disabled) return;

package/dist/{chunk-GALASVSG.mjs → chunk-QNODDATK.mjs}

@@ -119,6 +119,28 @@ var Select = defineComponent({
     noDataText: {
       type: String,
       default: "No options available"
+    },
+    /**
+     * 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,
+    /**
+     * Height of the dropdown panel in pixels
+     * @default 256
+     * @since 0.5.0
+     */
+    listHeight: {
+      type: Number,
+      default: 256
     }
   },
   emits: ["update:modelValue", "change", "search"],
@@ -147,7 +169,12 @@ var Select = defineComponent({
         }
         const currentValue = props.modelValue;
         const selectedOptions = allOptions.value.filter((opt) => currentValue.includes(opt.value));
-        return selectedOptions.map((opt) => opt.label).join(", ");
+        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 === "") {
@@ -454,7 +481,8 @@ var Select = defineComponent({
             onKeydown: handleTriggerKeyDown,
             "aria-haspopup": "listbox",
             "aria-expanded": isOpen.value,
-            "aria-controls": listboxId
+            "aria-controls": listboxId,
+            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? getOptionId(activeIndex.value) : void 0
           },
           [
             h(
@@ -473,6 +501,7 @@ var Select = defineComponent({
                 {
                   class: "inline-flex",
                   "data-tiger-select-clear": "",
+                  "aria-label": "Clear selection",
                   onClick: clearSelection
                 },
                 CloseIcon

package/dist/chunk-RB7KVVWE.mjs

@@ -0,0 +1,259 @@
+import { h, defineComponent, ref, computed, watch, onBeforeUnmount, nextTick } from 'vue';
+import { icon20ViewBox, closeSolidIcon20PathD, filterAutoCompleteOptions, classNames, autoCompleteBaseClasses, coerceClassValue, getAutoCompleteInputClasses, autoCompleteDropdownClasses, getAutoCompleteOptionClasses, autoCompleteEmptyStateClasses } from '@expcat/tigercat-core';
+
+// src/components/AutoComplete.ts
+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: ""
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    notFoundText: {
+      type: String,
+      default: "No matches found"
+    },
+    filterOption: {
+      type: [Boolean, Function],
+      default: true
+    },
+    defaultActiveFirstOption: {
+      type: Boolean,
+      default: true
+    },
+    allowFreeInput: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "select", "search", "change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++autoCompleteInstanceId;
+    const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+    const isOpen = ref(false);
+    const inputValue = ref(String(props.modelValue ?? ""));
+    const activeIndex = ref(-1);
+    const containerRef = ref(null);
+    const inputRef = ref(null);
+    const filteredOptions = computed(
+      () => filterAutoCompleteOptions(props.options, inputValue.value, props.filterOption)
+    );
+    const showClearButton = computed(
+      () => props.clearable && !props.disabled && inputValue.value !== ""
+    );
+    watch(
+      () => props.modelValue,
+      (val) => {
+        inputValue.value = String(val ?? "");
+      }
+    );
+    function openDropdown() {
+      if (props.disabled) return;
+      isOpen.value = true;
+      if (props.defaultActiveFirstOption && filteredOptions.value.length > 0) {
+        activeIndex.value = 0;
+      }
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+      activeIndex.value = -1;
+    }
+    function handleInput(e) {
+      const val = e.target.value;
+      inputValue.value = val;
+      emit("update:modelValue", val);
+      emit("search", val);
+      emit("change", val);
+      if (!isOpen.value) openDropdown();
+      if (props.defaultActiveFirstOption) {
+        activeIndex.value = filteredOptions.value.length > 0 ? 0 : -1;
+      }
+    }
+    function handleSelect(option) {
+      if (option.disabled) return;
+      inputValue.value = option.label;
+      emit("update:modelValue", option.value);
+      emit("select", option.value, option);
+      emit("change", option.value);
+      closeDropdown();
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      inputValue.value = "";
+      emit("update:modelValue", "");
+      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":
+          e.preventDefault();
+          if (options.length > 0) {
+            let next = activeIndex.value + 1;
+            while (next < options.length && options[next].disabled) next++;
+            if (next < options.length) activeIndex.value = next;
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (options.length > 0) {
+            let prev = activeIndex.value - 1;
+            while (prev >= 0 && options[prev].disabled) prev--;
+            if (prev >= 0) activeIndex.value = prev;
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex.value >= 0 && activeIndex.value < options.length) {
+            handleSelect(options[activeIndex.value]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          closeDropdown();
+          break;
+      }
+    }
+    function handleClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    watch(isOpen, (val) => {
+      if (val) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    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,
+            role: "combobox",
+            "aria-expanded": String(isOpen.value),
+            "aria-haspopup": "listbox",
+            "aria-controls": isOpen.value ? listboxId : void 0,
+            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : void 0,
+            autocomplete: "off",
+            onInput: handleInput,
+            onFocus: openDropdown,
+            onKeydown: handleKeyDown
+          }),
+          // 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": "Clear",
+              onClick: handleClear
+            },
+            [ClearIcon]
+          ) : null,
+          // Dropdown
+          isOpen.value && options.length > 0 ? h(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              class: autoCompleteDropdownClasses
+            },
+            options.map(
+              (option, index) => h(
+                "div",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": String(option.value) === String(props.modelValue),
+                  "aria-disabled": option.disabled,
+                  class: getAutoCompleteOptionClasses(
+                    String(option.value) === String(props.modelValue),
+                    !!option.disabled,
+                    props.size
+                  ),
+                  onClick: () => handleSelect(option),
+                  onMouseenter: () => {
+                    activeIndex.value = index;
+                  }
+                },
+                option.label
+              )
+            )
+          ) : isOpen.value && inputValue.value && options.length === 0 ? h(
+            "div",
+            {
+              class: classNames(autoCompleteDropdownClasses, autoCompleteEmptyStateClasses)
+            },
+            props.notFoundText
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AutoComplete_default = AutoComplete;
+
+export { AutoComplete, AutoComplete_default };

package/dist/{chunk-LNWRZKX2.js → chunk-RDV4BMTK.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunk7AFJ7TKW_js = require('./chunk-7AFJ7TKW.js');
+var chunk6DP7XE77_js = require('./chunk-6DP7XE77.js');
 var vue = require('vue');
 
 // src/components/ImageGroup.ts
-chunk7AFJ7TKW_js.init_ImagePreview();
+chunk6DP7XE77_js.init_ImagePreview();
 var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
 var ImageGroup = vue.defineComponent({
   name: "TigerImageGroup",
@@ -41,11 +41,11 @@ var ImageGroup = vue.defineComponent({
     });
     return () => {
       const children = slots.default?.();
-      const preview = props.preview ? vue.h(chunk7AFJ7TKW_js.ImagePreview, {
-        visible: previewVisible.value,
+      const preview = props.preview ? vue.h(chunk6DP7XE77_js.ImagePreview, {
+        open: previewVisible.value,
         images: images.value,
         currentIndex: previewIndex.value,
-        "onUpdate:visible": (val) => {
+        "onUpdate:open": (val) => {
           previewVisible.value = val;
           if (!val) emit("preview-visible-change", false);
         },

package/dist/{chunk-ENVHCXM5.js → chunk-RQREJGY3.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3L36R3UN_js = require('./chunk-3L36R3UN.js');
+var chunkTHEYWGOT_js = require('./chunk-THEYWGOT.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -206,7 +206,7 @@ var DonutChart = vue.defineComponent({
       emit("slice-hover", datum, index);
     };
     return () => {
-      const pie = vue.h(chunk3L36R3UN_js.PieChart, {
+      const pie = vue.h(chunkTHEYWGOT_js.PieChart, {
         width: props.width,
         height: props.height,
         padding: props.padding,

package/dist/chunk-RSBAFDUA.mjs

@@ -0,0 +1,89 @@
+import { defineComponent, ref, computed, h } from 'vue';
+import { getFixedVirtualRange, classNames, virtualListContainerClasses, coerceClassValue, virtualListInnerClasses } from '@expcat/tigercat-core';
+
+// src/components/VirtualList.ts
+var VirtualList = defineComponent({
+  name: "TigerVirtualList",
+  props: {
+    itemCount: { type: Number, default: 0 },
+    itemHeight: { type: Number, default: 40 },
+    height: { type: Number, default: 400 },
+    overscan: { type: Number, default: 5 }
+  },
+  emits: ["scroll"],
+  setup(props, { emit, attrs, slots }) {
+    const scrollTop = ref(0);
+    const containerRef = ref(null);
+    const range = computed(
+      () => getFixedVirtualRange(
+        scrollTop.value,
+        props.height,
+        props.itemHeight,
+        props.itemCount,
+        props.overscan
+      )
+    );
+    function handleScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+        emit("scroll", scrollTop.value);
+      }
+    }
+    return () => {
+      const { startIndex, endIndex, offsetTop, totalHeight } = range.value;
+      const items = [];
+      for (let i = startIndex; i <= endIndex; i++) {
+        const slotContent = slots.default?.({ index: i });
+        items.push(
+          h(
+            "div",
+            {
+              key: i,
+              style: {
+                height: `${props.itemHeight}px`,
+                width: "100%"
+              }
+            },
+            slotContent
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          ref: containerRef,
+          class: classNames(virtualListContainerClasses, coerceClassValue(attrs.class)),
+          style: { height: `${props.height}px` },
+          onScroll: handleScroll
+        },
+        [
+          h(
+            "div",
+            {
+              class: virtualListInnerClasses,
+              style: { height: `${totalHeight}px` }
+            },
+            [
+              h(
+                "div",
+                {
+                  style: {
+                    transform: `translateY(${offsetTop}px)`,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%"
+                  }
+                },
+                items
+              )
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var VirtualList_default = VirtualList;
+
+export { VirtualList, VirtualList_default };