@expcat/tigercat-vue 1.2.47 → 1.3.0

package/dist/{chunk-6WM7E6C4.js → chunk-SZB5BZBG.js}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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 _chunkPXSV3J2Hjs = require('./chunk-PXSV3J2H.js');
+var _chunkSRFNKU2Hjs = require('./chunk-SRFNKU2H.js');
 
 
-var _chunkBGMAWKWVjs = require('./chunk-BGMAWKWV.js');
+var _chunkAEOREYSJjs = require('./chunk-AEOREYSJ.js');
 
 
-var _chunkLUAI6VXVjs = require('./chunk-LUAI6VXV.js');
+var _chunkXV6IYXAPjs = require('./chunk-XV6IYXAP.js');
 
 
 var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
@@ -18,7 +18,7 @@ var _chunkBYNMOQBBjs = require('./chunk-BYNMOQBB.js');
 var _chunk2YFXJUBTjs = require('./chunk-2YFXJUBT.js');
 
 
-var _chunk4VLNT2EDjs = require('./chunk-4VLNT2ED.js');
+var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
 
 // src/components/DataTableWithToolbar.ts
 
@@ -143,6 +143,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       type: Array,
       default: void 0
     },
+    cardClassName: {
+      type: [String, Function],
+      default: void 0
+    },
+    renderCard: {
+      type: Function,
+      default: void 0
+    },
     toolbar: {
       type: Object,
       default: void 0
@@ -349,14 +357,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       const lockedKeys = new Set(_nullishCoalesce(_optionalChain([props, 'access', _35 => _35.toolbar, 'optionalAccess', _36 => _36.columnSettings, 'optionalAccess', _37 => _37.lockedColumnKeys]), () => ( [])));
       const panelTitle = _nullishCoalesce(_optionalChain([props, 'access', _38 => _38.toolbar, 'optionalAccess', _39 => _39.columnSettings, 'optionalAccess', _40 => _40.title]), () => ( tableLabels.value.columnSettingsText));
       return _vue.h.call(void 0, 
-        _chunkLUAI6VXVjs.Popover,
+        _chunkXV6IYXAPjs.Popover,
         {
           trigger: "click",
           placement: "bottom-end"
         },
         {
           default: () => _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               size: "sm",
               variant: "outline",
@@ -411,7 +419,21 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         }
       );
     };
+    const toolbarRenderContext = () => ({
+      searchValue: _nullishCoalesce(searchValue.value, () => ( "")),
+      setSearch: handleSearchChange,
+      submitSearch: handleSearchSubmit,
+      filters: resolvedFilters.value,
+      setFilter: (key, value) => setFilterValue(key, value),
+      selectedKeys: selectedKeys.value,
+      selectedCount: selectedCount.value,
+      hiddenColumnKeys: resolvedHiddenKeys.value,
+      setHiddenColumnKeys: handleHiddenColumnsChange
+    });
     const renderToolbar = () => {
+      if (slots.toolbar) {
+        return slots.toolbar(toolbarRenderContext());
+      }
       if (!hasSearch.value && !hasFilters.value && !hasFiltersExtra.value && !hasBulkActions.value && !hasColumnSettings.value)
         return null;
       const leftNodes = [];
@@ -420,7 +442,12 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         leftNodes.push(
           _vue.h.call(void 0, 
             "div",
-            { class: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]" },
+            {
+              class: _tigercatcore.classNames.call(void 0, 
+                "flex items-center gap-2",
+                _nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.searchClassName]), () => ( "w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]"))
+              )
+            },
             [
               _vue.h.call(void 0, 
                 _chunkBYNMOQBBjs.Input,
@@ -428,7 +455,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   type: "search",
                   size: "sm",
                   modelValue: searchValue.value,
-                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
+                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _45 => _45.toolbar, 'optionalAccess', _46 => _46.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
                   "onUpdate:modelValue": (value) => handleSearchChange(String(_nullishCoalesce(value, () => ( "")))),
                   onKeydown: (event) => {
                     if (event.key === "Enter") {
@@ -458,7 +485,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                 }
               ),
               showButton ? _vue.h.call(void 0, 
-                _chunk4VLNT2EDjs.Button,
+                _chunkHA5QZ76Mjs.Button,
                 {
                   size: "sm",
                   variant: "primary",
@@ -467,7 +494,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   disabled: !canSearch.value
                 },
                 {
-                  default: () => _nullishCoalesce(_optionalChain([props, 'access', _45 => _45.toolbar, 'optionalAccess', _46 => _46.searchButtonText]), () => ( tableLabels.value.searchButtonText))
+                  default: () => _nullishCoalesce(_optionalChain([props, 'access', _47 => _47.toolbar, 'optionalAccess', _48 => _48.searchButtonText]), () => ( tableLabels.value.searchButtonText))
                 }
               ) : null
             ]
@@ -475,7 +502,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         );
       }
       if (hasFilters.value) {
-        _optionalChain([props, 'access', _47 => _47.toolbar, 'optionalAccess', _48 => _48.filters, 'optionalAccess', _49 => _49.forEach, 'call', _50 => _50((filter) => {
+        _optionalChain([props, 'access', _49 => _49.toolbar, 'optionalAccess', _50 => _50.filters, 'optionalAccess', _51 => _51.forEach, 'call', _52 => _52((filter) => {
           const currentValue = resolvedFilters.value[filter.key];
           const clearable = filter.clearable !== false;
           if (filter.render) {
@@ -489,15 +516,23 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             leftNodes.push(
               _vue.h.call(void 0, 
                 "div",
-                { key: filter.key, class: "w-full sm:w-auto" },
+                {
+                  key: filter.key,
+                  class: _nullishCoalesce(filter.itemClass, () => ( "w-full sm:w-auto")),
+                  style: filter.itemStyle
+                },
                 filterNode == null ? [] : [filterNode]
               )
             );
             return;
           }
           leftNodes.push(
-            _vue.h.call(void 0, "div", { key: filter.key, class: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]" }, [
-              _vue.h.call(void 0, _chunkBGMAWKWVjs.Select, {
+            _vue.h.call(void 0, "div", {
+              key: filter.key,
+              class: _nullishCoalesce(filter.itemClass, () => ( "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]")),
+              style: filter.itemStyle
+            }, [
+              _vue.h.call(void 0, _chunkAEOREYSJjs.Select, {
                 size: "sm",
                 options: (_nullishCoalesce(filter.options, () => ( []))).map((opt) => ({
                   label: opt.label,
@@ -514,11 +549,11 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           );
         })]);
       }
-      const filtersExtra = _optionalChain([slots, 'access', _51 => _51["filters-extra"], 'optionalCall', _52 => _52({
+      const filtersExtra = _optionalChain([slots, 'access', _53 => _53["filters-extra"], 'optionalCall', _54 => _54({
         filters: resolvedFilters.value,
         setFilter: (key, value) => setFilterValue(key, value)
       })]);
-      if (_optionalChain([filtersExtra, 'optionalAccess', _53 => _53.length])) {
+      if (_optionalChain([filtersExtra, 'optionalAccess', _55 => _55.length])) {
         leftNodes.push(...filtersExtra);
       }
       const bulkChildren = [];
@@ -544,10 +579,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           );
         }
         ;
-        (_nullishCoalesce(_optionalChain([props, 'access', _54 => _54.toolbar, 'optionalAccess', _55 => _55.bulkActions]), () => ( []))).forEach((action) => {
+        (_nullishCoalesce(_optionalChain([props, 'access', _56 => _56.toolbar, 'optionalAccess', _57 => _57.bulkActions]), () => ( []))).forEach((action) => {
           bulkChildren.push(
             _vue.h.call(void 0, 
-              _chunk4VLNT2EDjs.Button,
+              _chunkHA5QZ76Mjs.Button,
               {
                 key: action.key,
                 size: "sm",
@@ -565,8 +600,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         {
           class: _tigercatcore.classNames.call(void 0, 
             "tiger-data-table-toolbar flex flex-wrap items-center gap-3",
-            props.bordered ? "bg-[var(--tiger-surface-muted,#f9fafb)] dark:bg-gray-800/10 px-4 py-3.5 border-b border-[var(--tiger-border,#e5e7eb)]" : "bg-[var(--tiger-surface-muted,#f9fafb)]/80 dark:bg-gray-800/30 px-4 py-3.5 border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-sm"
+            props.bordered ? "bg-[var(--tiger-surface-muted,#f9fafb)] dark:bg-gray-800/10 px-4 py-3.5 border-b border-[var(--tiger-border,#e5e7eb)]" : "bg-[var(--tiger-surface-muted,#f9fafb)]/80 dark:bg-gray-800/30 px-4 py-3.5 border border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-md,0.5rem)] shadow-sm",
+            _optionalChain([props, 'access', _58 => _58.toolbar, 'optionalAccess', _59 => _59.className])
           ),
+          style: _optionalChain([props, 'access', _60 => _60.toolbar, 'optionalAccess', _61 => _61.style]),
           role: "toolbar",
           "aria-label": tableLabels.value.toolbarAriaLabel
         },
@@ -613,10 +650,17 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         responsiveMode: props.responsiveMode,
         cardBreakpoint: props.cardBreakpoint,
         cardLayout: props.cardLayout,
+        cardClassName: props.cardClassName,
+        renderCard: props.renderCard,
         class: props.bordered ? "border-none rounded-none shadow-none" : void 0,
         onSelectionChange: (keys) => emit("selection-change", keys),
         onPageChange: handleTablePageChange
       };
+      const {
+        toolbar: _toolbarSlot,
+        "filters-extra": _filtersExtraSlot,
+        ...tableSlots
+      } = slots;
       return _vue.h.call(void 0, 
         "div",
         {
@@ -624,7 +668,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           style: wrapperStyle.value,
           "data-tiger-data-table-with-toolbar": ""
         },
-        [renderToolbar(), _vue.h.call(void 0, _chunkPXSV3J2Hjs.Table, tableProps)]
+        [renderToolbar(), _vue.h.call(void 0, _chunkSRFNKU2Hjs.Table, tableProps, tableSlots)]
       );
     };
   }

package/dist/{chunk-KOTSKHPQ.mjs → chunk-TC6ZPQFT.mjs}

@@ -5,7 +5,7 @@ import {
   coerceClassValue,
   mergeStyleValues,
   getCardClasses,
-  cardSizeClasses,
+  resolveCardPadding,
   cardHeaderClasses,
   cardFooterClasses,
   cardCoverWrapperClasses,
@@ -34,6 +34,15 @@ var Card = defineComponent({
       type: String,
       default: "md"
     },
+    /**
+     * Padding override for the card content sections. `false` removes the
+     * built-in padding; a string supplies a custom padding utility class.
+     * Takes precedence over `size`.
+     */
+    padding: {
+      type: [Boolean, String],
+      default: void 0
+    },
     /**
      * Whether the card is hoverable (shows hover effect)
      * @default false
@@ -80,15 +89,16 @@ var Card = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    const paddingClass = computed(() => resolveCardPadding(props.size, props.padding));
     const cardClasses = computed(
       () => classNames(
         getCardClasses(props.variant, props.hoverable),
         cardDirectionClasses[props.direction],
-        !props.cover && cardSizeClasses[props.size]
+        !props.cover && paddingClass.value
       )
     );
     const isHorizontal = computed(() => props.direction === "horizontal");
-    const sectionSizeClass = computed(() => props.cover ? cardSizeClasses[props.size] : void 0);
+    const sectionSizeClass = computed(() => props.cover ? paddingClass.value : void 0);
     const getSectionClasses = (baseClasses) => classNames(baseClasses, sectionSizeClass.value);
     return () => {
       const attrsRecord = attrs;

package/dist/{chunk-L6W3XL3A.js → chunk-TZDNF5SK.js}

@@ -3,10 +3,10 @@
 var _chunk6FXYRDYHjs = require('./chunk-6FXYRDYH.js');
 
 
-var _chunk4VLNT2EDjs = require('./chunk-4VLNT2ED.js');
+var _chunkHA5QZ76Mjs = require('./chunk-HA5QZ76M.js');
 
 
-var _chunk2KDSHEZTjs = require('./chunk-2KDSHEZT.js');
+var _chunkBPAZBRCRjs = require('./chunk-BPAZBRCR.js');
 
 
 var _chunkTGHB5XSTjs = require('./chunk-TGHB5XST.js');
@@ -180,7 +180,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
         const likeCount = node.likes ? ` ${node.likes}` : "";
         actions.push(
           _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               key: "like",
               size: "sm",
@@ -214,7 +214,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
       if (props.showReply) {
         actions.push(
           _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               key: "reply",
               size: "sm",
@@ -252,7 +252,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
       if (props.showMore) {
         actions.push(
           _vue.h.call(void 0, 
-            _chunk4VLNT2EDjs.Button,
+            _chunkHA5QZ76Mjs.Button,
             {
               key: "more",
               size: "sm",
@@ -289,7 +289,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
           const actionKey = _nullishCoalesce(action.key, () => ( `${node.id}-action-${index}`));
           actions.push(
             _vue.h.call(void 0, 
-              _chunk4VLNT2EDjs.Button,
+              _chunkHA5QZ76Mjs.Button,
               {
                 key: actionKey,
                 size: "sm",
@@ -340,13 +340,13 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                   { default: () => _optionalChain([node, 'access', _9 => _9.user, 'optionalAccess', _10 => _10.title]) }
                 ) : null,
                 node.tag ? _vue.h.call(void 0, 
-                  _chunk2KDSHEZTjs.Tag,
+                  _chunkBPAZBRCRjs.Tag,
                   { size: "sm", variant: _nullishCoalesce(node.tag.variant, () => ( "default")), className: "rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-opacity-10" },
                   { default: () => _optionalChain([node, 'access', _11 => _11.tag, 'optionalAccess', _12 => _12.label]) }
                 ) : null,
                 ...(_nullishCoalesce(node.tags, () => ( []))).map(
                   (tag, index) => _vue.h.call(void 0, 
-                    _chunk2KDSHEZTjs.Tag,
+                    _chunkBPAZBRCRjs.Tag,
                     {
                       key: `${node.id}-tag-${index}`,
                       size: "sm",
@@ -387,7 +387,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                   }),
                   _vue.h.call(void 0, "div", { class: "flex items-center gap-2 justify-end" }, [
                     _vue.h.call(void 0, 
-                      _chunk4VLNT2EDjs.Button,
+                      _chunkHA5QZ76Mjs.Button,
                       {
                         size: "sm",
                         variant: "ghost",
@@ -400,7 +400,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                       { default: () => props.cancelReplyText }
                     ),
                     _vue.h.call(void 0, 
-                      _chunk4VLNT2EDjs.Button,
+                      _chunkHA5QZ76Mjs.Button,
                       {
                         size: "sm",
                         variant: "primary",
@@ -413,7 +413,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                 ]
               ) : null,
               hasChildren ? _vue.h.call(void 0, 
-                _chunk4VLNT2EDjs.Button,
+                _chunkHA5QZ76Mjs.Button,
                 {
                   size: "sm",
                   variant: "ghost",
@@ -437,7 +437,7 @@ var CommentThread = _vue.defineComponent.call(void 0, {
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMore ? _vue.h.call(void 0, 
-                    _chunk4VLNT2EDjs.Button,
+                    _chunkHA5QZ76Mjs.Button,
                     {
                       size: "sm",
                       variant: "ghost",

package/dist/{chunk-XGXGAK27.js → chunk-UG6O4F2A.js}

@@ -34,6 +34,15 @@ var Card = _vue.defineComponent.call(void 0, {
       type: String,
       default: "md"
     },
+    /**
+     * Padding override for the card content sections. `false` removes the
+     * built-in padding; a string supplies a custom padding utility class.
+     * Takes precedence over `size`.
+     */
+    padding: {
+      type: [Boolean, String],
+      default: void 0
+    },
     /**
      * Whether the card is hoverable (shows hover effect)
      * @default false
@@ -80,15 +89,16 @@ var Card = _vue.defineComponent.call(void 0, {
     }
   },
   setup(props, { slots, attrs }) {
+    const paddingClass = _vue.computed.call(void 0, () => _tigercatcore.resolveCardPadding.call(void 0, props.size, props.padding));
     const cardClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
         _tigercatcore.getCardClasses.call(void 0, props.variant, props.hoverable),
         _tigercatcore.cardDirectionClasses[props.direction],
-        !props.cover && _tigercatcore.cardSizeClasses[props.size]
+        !props.cover && paddingClass.value
       )
     );
     const isHorizontal = _vue.computed.call(void 0, () => props.direction === "horizontal");
-    const sectionSizeClass = _vue.computed.call(void 0, () => props.cover ? _tigercatcore.cardSizeClasses[props.size] : void 0);
+    const sectionSizeClass = _vue.computed.call(void 0, () => props.cover ? paddingClass.value : void 0);
     const getSectionClasses = (baseClasses) => _tigercatcore.classNames.call(void 0, baseClasses, sectionSizeClass.value);
     return () => {
       const attrsRecord = attrs;

package/dist/{chunk-7IVLFDZI.js → chunk-UWZSTI3E.js}

@@ -303,16 +303,24 @@ var Dropdown = _vue.defineComponent.call(void 0, {
     const _menuItemTabIndex = -1;
     return () => {
       const defaultSlot = _optionalChain([slots, 'access', _7 => _7.default, 'optionalCall', _8 => _8()]);
-      if (!defaultSlot || defaultSlot.length === 0) return null;
+      const triggerSlot = _optionalChain([slots, 'access', _9 => _9.trigger, 'optionalCall', _10 => _10({ open: currentVisible.value })]);
+      if ((!defaultSlot || defaultSlot.length === 0) && (!triggerSlot || triggerSlot.length === 0)) {
+        return null;
+      }
       let triggerNode = null;
       let menuNode = null;
-      defaultSlot.forEach((node) => {
+      if (triggerSlot && triggerSlot.length > 0) {
+        triggerNode = triggerSlot.length === 1 ? triggerSlot[0] : _vue.h.call(void 0, "span", triggerSlot);
+      }
+      _optionalChain([defaultSlot, 'optionalAccess', _11 => _11.forEach, 'call', _12 => _12((node) => {
         if (node.type === DropdownMenu) {
           menuNode = node;
           return;
         }
-        triggerNode = node;
-      });
+        if (!triggerSlot) {
+          triggerNode = node;
+        }
+      })]);
       const chevronNode = props.showArrow ? _vue.h.call(void 0, 
         "svg",
         {
@@ -337,7 +345,8 @@ var Dropdown = _vue.defineComponent.call(void 0, {
           onMouseleave: handleMouseLeave,
           "aria-haspopup": "menu",
           "aria-expanded": currentVisible.value,
-          "aria-controls": currentVisible.value ? menuId : void 0
+          "aria-controls": currentVisible.value ? menuId : void 0,
+          "data-state": currentVisible.value ? "open" : "closed"
         },
         [triggerNode, chevronNode]
       ) : null;

package/dist/{chunk-LBGTABIU.mjs → chunk-VCBBWDOV.mjs}

@@ -134,7 +134,9 @@ var Timeline = defineComponent({
         contentChildren.push(h("div", { class: timelineLabelClasses }, item.label));
       }
       if (item.content) {
-        contentChildren.push(h("div", { class: timelineDescriptionClasses }, item.content));
+        contentChildren.push(
+          h("div", { class: timelineDescriptionClasses }, item.content)
+        );
       }
       return h("li", { key, class: itemClasses }, [
         h("div", { class: tailClasses }),

package/dist/{chunk-GD2WAN62.js → chunk-VH2GDZBH.js}

@@ -129,7 +129,8 @@ var Popconfirm = _vue.defineComponent.call(void 0, {
     const iconClasses = _vue.computed.call(void 0, () => _tigercatcore.getPopconfirmIconClasses.call(void 0, props.icon));
     const okButtonClasses = _vue.computed.call(void 0, () => _tigercatcore.getPopconfirmOkButtonClasses.call(void 0, props.okType));
     return () => {
-      const defaultSlot = _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]);
+      const useTriggerSlot = Boolean(slots.trigger);
+      const defaultSlot = useTriggerSlot ? slots.trigger({ open: currentVisible.value }) : _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]);
       if (!defaultSlot || defaultSlot.length === 0) return null;
       const {
         class: _class,
@@ -140,10 +141,11 @@ var Popconfirm = _vue.defineComponent.call(void 0, {
         "aria-haspopup": "dialog",
         "aria-expanded": Boolean(currentVisible.value),
         "aria-controls": currentVisible.value ? popconfirmId : void 0,
-        "aria-disabled": props.disabled ? "true" : void 0
+        "aria-disabled": props.disabled ? "true" : void 0,
+        "data-state": currentVisible.value ? "open" : "closed"
       };
       const trigger = (() => {
-        if (defaultSlot.length === 1) {
+        if (!useTriggerSlot && defaultSlot.length === 1) {
           const only = defaultSlot[0];
           if (_vue.isVNode.call(void 0, only)) {
             const existingProps = _nullishCoalesce(only.props, () => ( {}));

package/dist/{chunk-VWEH6TGR.mjs → chunk-W6VKVYWZ.mjs}

@@ -1,6 +1,12 @@
 import {
   ImagePreview
 } from "./chunk-KY3O3FWK.mjs";
+import {
+  useFloatingPopup
+} from "./chunk-M4EP4OVR.mjs";
+import {
+  renderVueBodyTeleport
+} from "./chunk-BDTPFPSB.mjs";
 
 // src/components/Image.ts
 import {
@@ -37,6 +43,10 @@ var Image = defineComponent({
     fit: { type: String, default: "cover" },
     fallbackSrc: { type: String, default: void 0 },
     preview: { type: Boolean, default: true },
+    previewTrigger: {
+      type: String,
+      default: "click"
+    },
     lazy: { type: Boolean, default: false },
     className: { type: String, default: void 0 },
     style: {
@@ -53,6 +63,35 @@ var Image = defineComponent({
     const previewVisible = ref(false);
     let observer = null;
     const group = inject(IMAGE_GROUP_INJECTION_KEY, null);
+    const hoverPreviewEnabled = computed(
+      () => props.preview && props.previewTrigger === "hover" && !group
+    );
+    const clickPreviewEnabled = computed(() => props.preview && props.previewTrigger !== "hover");
+    const floatingPopupProps = {
+      get trigger() {
+        return "hover";
+      },
+      get placement() {
+        return "right";
+      },
+      get offset() {
+        return 12;
+      },
+      get disabled() {
+        return !hoverPreviewEnabled.value;
+      }
+    };
+    const {
+      currentVisible: hoverVisible,
+      triggerRef: hoverTriggerRef,
+      floatingRef: hoverFloatingRef,
+      floatingStyles: hoverFloatingStyles,
+      triggerHandlers: hoverTriggerHandlers
+    } = useFloatingPopup({ props: floatingPopupProps, emit });
+    const setContainerRef = (el) => {
+      containerRef.value = el;
+      hoverTriggerRef.value = el;
+    };
     const registeredIndex = ref(-1);
     onMounted(() => {
       if (group && props.src) {
@@ -103,7 +142,7 @@ var Image = defineComponent({
       emit("error");
     };
     const handleClick = () => {
-      if (!props.preview) return;
+      if (!clickPreviewEnabled.value) return;
       if (group) {
         group.openPreview(registeredIndex.value >= 0 ? registeredIndex.value : 0);
       } else {
@@ -193,25 +232,44 @@ var Image = defineComponent({
           emit("preview-open-change", val);
         }
       }) : null;
+      const hoverPreviewEl = hoverPreviewEnabled.value && hoverVisible.value && props.src ? renderVueBodyTeleport(
+        h(
+          "div",
+          {
+            ref: hoverFloatingRef,
+            style: hoverFloatingStyles.value,
+            "aria-hidden": true,
+            class: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-1 shadow-lg"
+          },
+          [
+            h("img", {
+              src: props.src,
+              alt: "",
+              class: "block max-w-[16rem] max-h-[16rem] object-contain"
+            })
+          ]
+        )
+      ) : null;
       return h(
         "div",
         {
           ...forwardedAttrs,
-          ref: containerRef,
+          ref: setContainerRef,
           class: containerClasses.value,
           style: containerStyle.value,
-          role: props.preview ? "button" : void 0,
-          tabindex: props.preview ? 0 : void 0,
-          "aria-label": props.preview ? `Preview ${props.alt || "image"}` : void 0,
+          role: clickPreviewEnabled.value ? "button" : void 0,
+          tabindex: clickPreviewEnabled.value ? 0 : void 0,
+          "aria-label": clickPreviewEnabled.value ? `Preview ${props.alt || "image"}` : void 0,
           onClick: handleClick,
           onKeydown: (e) => {
-            if (props.preview && (e.key === "Enter" || e.key === " ")) {
+            if (clickPreviewEnabled.value && (e.key === "Enter" || e.key === " ")) {
               e.preventDefault();
               handleClick();
             }
-          }
+          },
+          ...hoverPreviewEnabled.value ? hoverTriggerHandlers.value : {}
         },
-        [content, previewEl]
+        [content, previewEl, hoverPreviewEl]
       );
     };
   }