@expcat/tigercat-vue 0.4.3 → 1.0.0

package/dist/chunk-4F5ABXXM.js

@@ -0,0 +1,248 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Transfer.ts
+function ArrowIcon(pathD) {
+  return vue.h(
+    "svg",
+    {
+      class: "w-4 h-4",
+      viewBox: tigercatCore.icon20ViewBox,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    [
+      vue.h("path", {
+        d: pathD,
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var Transfer = vue.defineComponent({
+  name: "TigerTransfer",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    sourceTitle: {
+      type: String,
+      default: "Source"
+    },
+    targetTitle: {
+      type: String,
+      default: "Target"
+    },
+    notFoundText: {
+      type: String,
+      default: "No data"
+    },
+    filterOption: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const sourceSelectedKeys = vue.ref(/* @__PURE__ */ new Set());
+    const targetSelectedKeys = vue.ref(/* @__PURE__ */ new Set());
+    const sourceSearch = vue.ref("");
+    const targetSearch = vue.ref("");
+    const { sourceItems, targetItems } = vue.computed(
+      () => tigercatCore.splitTransferData(props.dataSource, props.modelValue)
+    ).value;
+    const computedData = vue.computed(() => tigercatCore.splitTransferData(props.dataSource, props.modelValue));
+    const filteredSourceItems = vue.computed(
+      () => tigercatCore.filterTransferItems(computedData.value.sourceItems, sourceSearch.value, props.filterOption)
+    );
+    const filteredTargetItems = vue.computed(
+      () => tigercatCore.filterTransferItems(computedData.value.targetItems, targetSearch.value, props.filterOption)
+    );
+    const canMoveRight = vue.computed(() => {
+      if (props.disabled) return false;
+      for (const key of sourceSelectedKeys.value) {
+        const item = props.dataSource.find((d) => d.key === key);
+        if (item && !item.disabled) return true;
+      }
+      return false;
+    });
+    const canMoveLeft = vue.computed(() => {
+      if (props.disabled) return false;
+      for (const key of targetSelectedKeys.value) {
+        const item = props.dataSource.find((d) => d.key === key);
+        if (item && !item.disabled) return true;
+      }
+      return false;
+    });
+    function toggleSourceItem(key) {
+      const next = new Set(sourceSelectedKeys.value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      sourceSelectedKeys.value = next;
+    }
+    function toggleTargetItem(key) {
+      const next = new Set(targetSelectedKeys.value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      targetSelectedKeys.value = next;
+    }
+    function moveRight() {
+      if (!canMoveRight.value) return;
+      const keysToMove = [...sourceSelectedKeys.value].filter((key) => {
+        const item = props.dataSource.find((d) => d.key === key);
+        return item && !item.disabled;
+      });
+      const newTargetKeys = [...props.modelValue, ...keysToMove];
+      sourceSelectedKeys.value = /* @__PURE__ */ new Set();
+      emit("update:modelValue", newTargetKeys);
+      emit("change", newTargetKeys, "right", keysToMove);
+    }
+    function moveLeft() {
+      if (!canMoveLeft.value) return;
+      const keysToRemove = new Set(
+        [...targetSelectedKeys.value].filter((key) => {
+          const item = props.dataSource.find((d) => d.key === key);
+          return item && !item.disabled;
+        })
+      );
+      const newTargetKeys = props.modelValue.filter((k) => !keysToRemove.has(k));
+      targetSelectedKeys.value = /* @__PURE__ */ new Set();
+      emit("update:modelValue", newTargetKeys);
+      emit("change", newTargetKeys, "left", [...keysToRemove]);
+    }
+    function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearch) {
+      return vue.h("div", { class: tigercatCore.transferPanelClasses, role: "group", "aria-label": title }, [
+        // Header
+        vue.h("div", { class: tigercatCore.transferPanelHeaderClasses }, [
+          vue.h(
+            "span",
+            { class: "font-medium text-[var(--tiger-transfer-title,var(--tiger-text,#111827))]" },
+            `${title} (${items.length})`
+          )
+        ]),
+        // Search
+        props.showSearch ? vue.h("input", {
+          type: "text",
+          class: tigercatCore.transferSearchClasses,
+          placeholder: "Search...",
+          value: searchValue,
+          "aria-label": `Search ${title}`,
+          onInput: (e) => onSearch(e.target.value)
+        }) : null,
+        // Body
+        vue.h(
+          "div",
+          { class: tigercatCore.transferPanelBodyClasses, role: "listbox" },
+          items.length > 0 ? items.map((item) => {
+            const isSelected = selectedKeys.has(item.key);
+            const isDisabled = props.disabled || !!item.disabled;
+            return vue.h(
+              "label",
+              {
+                key: item.key,
+                class: tigercatCore.getTransferItemClasses(isSelected, isDisabled, props.size),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled
+              },
+              [
+                vue.h("input", {
+                  type: "checkbox",
+                  class: tigercatCore.getTransferCheckboxClasses(props.size),
+                  checked: isSelected,
+                  disabled: isDisabled,
+                  onChange: () => {
+                    if (!isDisabled) toggleFn(item.key);
+                  }
+                }),
+                vue.h("span", { class: "flex-1 truncate" }, item.label)
+              ]
+            );
+          }) : [vue.h("div", { class: tigercatCore.transferEmptyClasses }, props.notFoundText)]
+        )
+      ]);
+    }
+    return () => {
+      const containerClasses = tigercatCore.classNames(tigercatCore.transferBaseClasses, tigercatCore.coerceClassValue(attrs.class));
+      return vue.h("div", { class: containerClasses }, [
+        // Source panel
+        renderPanel(
+          props.sourceTitle,
+          filteredSourceItems.value,
+          sourceSelectedKeys.value,
+          toggleSourceItem,
+          sourceSearch.value,
+          (val) => {
+            sourceSearch.value = val;
+          }
+        ),
+        // Operation buttons
+        vue.h("div", { class: tigercatCore.transferOperationClasses }, [
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.getTransferButtonClasses(!canMoveRight.value),
+              disabled: !canMoveRight.value,
+              "aria-label": "Move selected to target",
+              onClick: moveRight
+            },
+            [ArrowIcon(tigercatCore.chevronRightSolidIcon20PathD)]
+          ),
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.getTransferButtonClasses(!canMoveLeft.value),
+              disabled: !canMoveLeft.value,
+              "aria-label": "Move selected to source",
+              onClick: moveLeft
+            },
+            [ArrowIcon(tigercatCore.chevronLeftSolidIcon20PathD)]
+          )
+        ]),
+        // Target panel
+        renderPanel(
+          props.targetTitle,
+          filteredTargetItems.value,
+          targetSelectedKeys.value,
+          toggleTargetItem,
+          targetSearch.value,
+          (val) => {
+            targetSearch.value = val;
+          }
+        )
+      ]);
+    };
+  }
+});
+var Transfer_default = Transfer;
+
+exports.Transfer = Transfer;
+exports.Transfer_default = Transfer_default;

package/dist/{chunk-J5J4UYGP.mjs → chunk-4K2CCBFT.mjs}

@@ -1,6 +1,6 @@
-import { createStatusIcon } from './chunk-7RRA3TIG.mjs';
-import { defineComponent, ref, computed, h } from 'vue';
-import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, mergeStyleValues, coerceClassValue } from '@expcat/tigercat-core';
+import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, h } from 'vue';
+import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertBannerClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, alertCountdownContainerClasses, alertCountdownBarClasses, alertCountdownColorClasses, mergeStyleValues, coerceClassValue } from '@expcat/tigercat-core';
 
 var Alert = defineComponent({
   name: "TigerAlert",
@@ -60,6 +60,13 @@ var Alert = defineComponent({
       type: String,
       default: "Close alert"
     },
+    /**
+     * Auto-close duration in milliseconds. 0 or undefined to disable.
+     */
+    duration: {
+      type: Number,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -73,6 +80,22 @@ var Alert = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Whether to display as full-width banner
+     * @since 0.9.0
+     */
+    banner: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to show countdown progress bar
+     * @since 0.9.0
+     */
+    showCountdown: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["close"],
@@ -84,7 +107,8 @@ var Alert = defineComponent({
         alertBaseClasses,
         alertSizeClasses[props.size],
         colorScheme.value.bg,
-        colorScheme.value.border
+        colorScheme.value.border,
+        props.banner && alertBannerClasses
       )
     );
     const iconClasses = computed(
@@ -110,6 +134,28 @@ var Alert = defineComponent({
         visible.value = false;
       }
     };
+    let autoCloseTimer;
+    const countdownProgress = ref(100);
+    let countdownInterval;
+    onMounted(() => {
+      if (props.duration && props.duration > 0 && props.closable) {
+        autoCloseTimer = setTimeout(() => {
+          visible.value = false;
+          emit("close", new MouseEvent("click"));
+        }, props.duration);
+        if (props.showCountdown) {
+          const startTime = Date.now();
+          countdownInterval = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            countdownProgress.value = Math.max(0, 100 - elapsed / props.duration * 100);
+          }, 50);
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      if (autoCloseTimer) clearTimeout(autoCloseTimer);
+      if (countdownInterval) clearInterval(countdownInterval);
+    });
     return () => {
       if (!visible.value) {
         return null;
@@ -121,7 +167,11 @@ var Alert = defineComponent({
       if (props.showIcon) {
         const iconPath = getAlertIconPath(props.type);
         children.push(
-          h("div", { class: alertIconContainerClasses }, createStatusIcon(iconPath, iconClasses.value))
+          h(
+            "div",
+            { class: alertIconContainerClasses },
+            createStatusIcon(iconPath, iconClasses.value)
+          )
         );
       }
       const contentChildren = [];
@@ -159,6 +209,16 @@ var Alert = defineComponent({
           )
         );
       }
+      if (props.showCountdown && props.duration && props.duration > 0 && props.closable) {
+        children.push(
+          h("div", { class: alertCountdownContainerClasses }, [
+            h("div", {
+              class: classNames(alertCountdownBarClasses, alertCountdownColorClasses[props.type]),
+              style: { width: `${countdownProgress.value}%` }
+            })
+          ])
+        );
+      }
       return h(
         "div",
         {

package/dist/{chunk-HTMTOXUO.mjs → chunk-4KCCUIGO.mjs}

@@ -1,6 +1,6 @@
-import { Modal } from './chunk-P47EXOAW.mjs';
+import { Modal } from './chunk-M6PEW6V5.mjs';
 import { ImageCropper } from './chunk-T77L326M.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
 import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
 
@@ -151,13 +151,13 @@ var CropUpload = defineComponent({
       const modal = h(
         Modal,
         {
-          visible: modalVisible.value,
+          open: modalVisible.value,
           size: "lg",
           title: props.modalTitle,
           closable: true,
           maskClosable: false,
           showDefaultFooter: false,
-          "onUpdate:visible": (val) => {
+          "onUpdate:open": (val) => {
             if (!val) handleCancel();
           }
         },

package/dist/chunk-4Y2SJZB5.js

@@ -0,0 +1,262 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/AutoComplete.ts
+var autoCompleteInstanceId = 0;
+var ClearIcon = vue.h(
+  "svg",
+  {
+    class: "w-4 h-4",
+    viewBox: tigercatCore.icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    vue.h("path", {
+      d: tigercatCore.closeSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var AutoComplete = vue.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 = vue.ref(false);
+    const inputValue = vue.ref(String(props.modelValue ?? ""));
+    const activeIndex = vue.ref(-1);
+    const containerRef = vue.ref(null);
+    const inputRef = vue.ref(null);
+    const filteredOptions = vue.computed(
+      () => tigercatCore.filterAutoCompleteOptions(props.options, inputValue.value, props.filterOption)
+    );
+    const showClearButton = vue.computed(
+      () => props.clearable && !props.disabled && inputValue.value !== ""
+    );
+    vue.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", "");
+      vue.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();
+      }
+    }
+    vue.watch(isOpen, (val) => {
+      if (val) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return () => {
+      const containerClasses = tigercatCore.classNames(tigercatCore.autoCompleteBaseClasses, tigercatCore.coerceClassValue(attrs.class));
+      const options = filteredOptions.value;
+      return vue.h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses
+        },
+        [
+          // Input
+          vue.h("input", {
+            ref: inputRef,
+            type: "text",
+            class: tigercatCore.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 ? vue.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 ? vue.h(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              class: tigercatCore.autoCompleteDropdownClasses
+            },
+            options.map(
+              (option, index) => vue.h(
+                "div",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": String(option.value) === String(props.modelValue),
+                  "aria-disabled": option.disabled,
+                  class: tigercatCore.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 ? vue.h(
+            "div",
+            {
+              class: tigercatCore.classNames(tigercatCore.autoCompleteDropdownClasses, tigercatCore.autoCompleteEmptyStateClasses)
+            },
+            props.notFoundText
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AutoComplete_default = AutoComplete;
+
+exports.AutoComplete = AutoComplete;
+exports.AutoComplete_default = AutoComplete_default;

package/dist/{chunk-YCI7GRQY.mjs → chunk-564LMZQL.mjs}

@@ -1,4 +1,4 @@
-import { useFloatingPopup } from './chunk-WIPPSHI6.mjs';
+import { useFloatingPopup } from './chunk-6A57RY3H.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { createFloatingIdFactory, classNames, getTooltipContainerClasses, coerceClassValue, getTooltipTriggerClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
 
@@ -7,10 +7,10 @@ var Tooltip = defineComponent({
   name: "TigerTooltip",
   inheritAttrs: false,
   props: {
-    /** Whether the tooltip is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) @default false */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the tooltip is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) @default false */
+    defaultOpen: { type: Boolean, default: false },
     /** Tooltip content text */
     content: { type: String, default: void 0 },
     /** Trigger type @default 'hover' */
@@ -25,7 +25,7 @@ var Tooltip = defineComponent({
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const {