@expcat/tigercat-vue 1.2.37 → 1.2.41

package/dist/{chunk-2HT6YGRY.js → chunk-EWQJGR7E.js}

@@ -1,14 +1,23 @@
 "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 _chunkRRI3F52Bjs = require('./chunk-RRI3F52B.js');
+var _chunkOFTAQ2A4js = require('./chunk-OFTAQ2A4.js');
 
 
 var _chunkBGMAWKWVjs = require('./chunk-BGMAWKWV.js');
 
 
+var _chunkLUAI6VXVjs = require('./chunk-LUAI6VXV.js');
+
+
+var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
+
+
 var _chunkBYNMOQBBjs = require('./chunk-BYNMOQBB.js');
 
 
+var _chunk2YFXJUBTjs = require('./chunk-2YFXJUBT.js');
+
+
 var _chunk4VLNT2EDjs = require('./chunk-4VLNT2ED.js');
 
 // src/components/DataTableWithToolbar.ts
@@ -24,6 +33,11 @@ var _vue = require('vue');
 
 
 
+
+
+
+
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
   name: "TigerDataTableWithToolbar",
@@ -41,6 +55,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       type: Array,
       default: () => []
     },
+    hiddenColumnKeys: {
+      type: Array,
+      default: void 0
+    },
+    defaultHiddenColumnKeys: {
+      type: Array,
+      default: void 0
+    },
     sort: {
       type: Object,
       default: void 0
@@ -77,9 +99,17 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       type: Boolean,
       default: false
     },
+    locale: {
+      type: [Object, Function],
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    },
     emptyText: {
       type: String,
-      default: "No data"
+      default: void 0
     },
     rowSelection: {
       type: Object,
@@ -137,16 +167,51 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     "bulk-action": (_action, _keys) => true,
     "selection-change": (_keys) => true,
     "page-change": (_current, _pageSize) => true,
-    "page-size-change": (_current, _pageSize) => true
+    "page-size-change": (_current, _pageSize) => true,
+    "update:hiddenColumnKeys": (_hiddenKeys) => true,
+    "hidden-columns-change": (_hiddenKeys) => true
   },
   setup(props, { attrs, emit }) {
+    const config = _chunk25EYT2CBjs.useTigerConfig.call(void 0, );
     const internalSearch = _vue.ref.call(void 0, _nullishCoalesce(_optionalChain([props, 'access', _ => _.toolbar, 'optionalAccess', _2 => _2.defaultSearchValue]), () => ( "")));
+    const internalHiddenKeys = _vue.ref.call(void 0, 
+      _nullishCoalesce(_nullishCoalesce(props.defaultHiddenColumnKeys, () => ( props.hiddenColumnKeys)), () => ( []))
+    );
     const internalFilters = _vue.ref.call(void 0, {});
     const previousPageSize = _vue.ref.call(void 0, 
       props.pagination && typeof props.pagination === "object" ? _nullishCoalesce(_nullishCoalesce(props.pagination.pageSize, () => ( props.pagination.defaultPageSize)), () => ( 10)) : void 0
     );
     const vnodeProps = _nullishCoalesce(_optionalChain([_vue.getCurrentInstance.call(void 0, ), 'optionalAccess', _3 => _3.vnode, 'access', _4 => _4.props]), () => ( {}));
     const hasSearchListener = Boolean(vnodeProps.onSearch || vnodeProps.onSearchChange);
+    const resolvedTableLocale = _vue.ref.call(void 0, );
+    let tableLocaleResolveId = 0;
+    _vue.watch.call(void 0, 
+      () => props.locale,
+      (locale) => {
+        const resolveId = ++tableLocaleResolveId;
+        if (!locale) {
+          resolvedTableLocale.value = void 0;
+          return;
+        }
+        const immediateLocale = _tigercatcore.getImmediateTigerLocale.call(void 0, locale);
+        resolvedTableLocale.value = immediateLocale;
+        if (!_tigercatcore.isLazyTigerLocale.call(void 0, locale)) return;
+        _tigercatcore.resolveTigerLocale.call(void 0, locale).then((nextLocale) => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = nextLocale;
+          }
+        }).catch(() => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = immediateLocale;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    const tableLocale = _vue.computed.call(void 0, 
+      () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, resolvedTableLocale.value)
+    );
+    const tableLabels = _vue.computed.call(void 0, () => _tigercatcore.getTableLabels.call(void 0, tableLocale.value, props.labels));
     _vue.watch.call(void 0, 
       () => _optionalChain([props, 'access', _5 => _5.toolbar, 'optionalAccess', _6 => _6.searchValue]),
       (nextValue) => {
@@ -163,6 +228,14 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         }
       }
     );
+    _vue.watch.call(void 0, 
+      () => props.hiddenColumnKeys,
+      (nextValue) => {
+        if (nextValue !== void 0) {
+          internalHiddenKeys.value = nextValue;
+        }
+      }
+    );
     _vue.watch.call(void 0, 
       () => _optionalChain([props, 'access', _7 => _7.toolbar, 'optionalAccess', _8 => _8.filters]),
       (filters) => {
@@ -195,14 +268,29 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     });
     const hasFilters = _vue.computed.call(void 0, () => Boolean(_optionalChain([props, 'access', _15 => _15.toolbar, 'optionalAccess', _16 => _16.filters, 'optionalAccess', _17 => _17.length])));
     const hasBulkActions = _vue.computed.call(void 0, () => Boolean(_optionalChain([props, 'access', _18 => _18.toolbar, 'optionalAccess', _19 => _19.bulkActions, 'optionalAccess', _20 => _20.length])));
+    const hasColumnSettings = _vue.computed.call(void 0, () => Boolean(_optionalChain([props, 'access', _21 => _21.toolbar, 'optionalAccess', _22 => _22.showColumnSettings])));
+    const resolvedHiddenKeys = _vue.computed.call(void 0, () => _nullishCoalesce(props.hiddenColumnKeys, () => ( internalHiddenKeys.value)));
+    const handleHiddenColumnsChange = (nextHiddenKeys) => {
+      if (props.hiddenColumnKeys === void 0) {
+        internalHiddenKeys.value = nextHiddenKeys;
+      }
+      emit("update:hiddenColumnKeys", nextHiddenKeys);
+      emit("hidden-columns-change", nextHiddenKeys);
+    };
+    const handleToggleColumnVisibility = (columnKey, visible) => {
+      const nextHiddenKeys = visible ? resolvedHiddenKeys.value.filter((key) => key !== columnKey) : [...resolvedHiddenKeys.value, columnKey];
+      handleHiddenColumnsChange(nextHiddenKeys);
+    };
     const canSearch = _vue.computed.call(void 0, () => Boolean(vnodeProps.onSearch));
     const selectedKeys = _vue.computed.call(void 0, 
-      () => _nullishCoalesce(_nullishCoalesce(_optionalChain([props, 'access', _21 => _21.toolbar, 'optionalAccess', _22 => _22.selectedKeys]), () => ( _optionalChain([props, 'access', _23 => _23.rowSelection, 'optionalAccess', _24 => _24.selectedRowKeys]))), () => ( []))
+      () => _nullishCoalesce(_nullishCoalesce(_optionalChain([props, 'access', _23 => _23.toolbar, 'optionalAccess', _24 => _24.selectedKeys]), () => ( _optionalChain([props, 'access', _25 => _25.rowSelection, 'optionalAccess', _26 => _26.selectedRowKeys]))), () => ( []))
     );
     const selectedCount = _vue.computed.call(void 0, 
-      () => _optionalChain([props, 'access', _25 => _25.toolbar, 'optionalAccess', _26 => _26.selectedCount]) !== void 0 ? props.toolbar.selectedCount : selectedKeys.value.length
+      () => _optionalChain([props, 'access', _27 => _27.toolbar, 'optionalAccess', _28 => _28.selectedCount]) !== void 0 ? props.toolbar.selectedCount : selectedKeys.value.length
+    );
+    const bulkLabel = _vue.computed.call(void 0, 
+      () => _nullishCoalesce(_optionalChain([props, 'access', _29 => _29.toolbar, 'optionalAccess', _30 => _30.bulkActionsLabel]), () => ( tableLabels.value.selectedText))
     );
-    const bulkLabel = _vue.computed.call(void 0, () => _nullishCoalesce(_optionalChain([props, 'access', _27 => _27.toolbar, 'optionalAccess', _28 => _28.bulkActionsLabel]), () => ( "\u5DF2\u9009\u62E9")));
     const wrapperClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, 
         "tiger-data-table-with-toolbar flex flex-col",
@@ -213,7 +301,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     );
     const wrapperStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
     const handleSearchChange = (value) => {
-      if (_optionalChain([props, 'access', _29 => _29.toolbar, 'optionalAccess', _30 => _30.searchValue]) === void 0) {
+      if (_optionalChain([props, 'access', _31 => _31.toolbar, 'optionalAccess', _32 => _32.searchValue]) === void 0) {
         internalSearch.value = value;
       }
       emit("search-change", value);
@@ -236,7 +324,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
     };
     const handleBulkAction = (action) => {
       const keys = _nullishCoalesce(selectedKeys.value, () => ( []));
-      _optionalChain([action, 'access', _31 => _31.onClick, 'optionalCall', _32 => _32(keys)]);
+      _optionalChain([action, 'access', _33 => _33.onClick, 'optionalCall', _34 => _34(keys)]);
       emit("bulk-action", action, keys);
     };
     const handleTablePageChange = ({
@@ -249,11 +337,78 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
       }
       previousPageSize.value = pageSize;
     };
+    const renderColumnSettings = () => {
+      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,
+        {
+          trigger: "click",
+          placement: "bottom-end"
+        },
+        {
+          default: () => _vue.h.call(void 0, 
+            _chunk4VLNT2EDjs.Button,
+            {
+              size: "sm",
+              variant: "outline",
+              class: "shrink-0 px-2",
+              "aria-label": tableLabels.value.columnSettingsAriaLabel
+            },
+            {
+              default: () => _vue.h.call(void 0, 
+                "svg",
+                {
+                  class: "w-3.5 h-3.5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true"
+                },
+                [
+                  _vue.h.call(void 0, "path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                  }),
+                  _vue.h.call(void 0, "path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  })
+                ]
+              )
+            }
+          ),
+          title: () => panelTitle,
+          content: () => _vue.h.call(void 0, 
+            "div",
+            { class: "flex flex-col gap-2 min-w-[160px]" },
+            props.columns.map((column) => {
+              const locked = lockedKeys.has(column.key) || column.hideable === false;
+              return _vue.h.call(void 0, 
+                _chunk2YFXJUBTjs.Checkbox,
+                {
+                  key: column.key,
+                  size: "sm",
+                  modelValue: !resolvedHiddenKeys.value.includes(column.key),
+                  disabled: locked,
+                  "onUpdate:modelValue": (checked) => handleToggleColumnVisibility(column.key, checked)
+                },
+                { default: () => column.title }
+              );
+            })
+          )
+        }
+      );
+    };
     const renderToolbar = () => {
-      if (!hasSearch.value && !hasFilters.value && !hasBulkActions.value) return null;
+      if (!hasSearch.value && !hasFilters.value && !hasBulkActions.value && !hasColumnSettings.value)
+        return null;
       const leftNodes = [];
       if (hasSearch.value) {
-        const showButton = _nullishCoalesce(_optionalChain([props, 'access', _33 => _33.toolbar, 'optionalAccess', _34 => _34.showSearchButton]), () => ( true));
+        const showButton = _nullishCoalesce(_optionalChain([props, 'access', _41 => _41.toolbar, 'optionalAccess', _42 => _42.showSearchButton]), () => ( true));
         leftNodes.push(
           _vue.h.call(void 0, 
             "div",
@@ -265,7 +420,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   type: "search",
                   size: "sm",
                   modelValue: searchValue.value,
-                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _35 => _35.toolbar, 'optionalAccess', _36 => _36.searchPlaceholder]), () => ( "\u641C\u7D22")),
+                  placeholder: _nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.searchPlaceholder]), () => ( tableLabels.value.searchPlaceholder)),
                   "onUpdate:modelValue": (value) => handleSearchChange(String(_nullishCoalesce(value, () => ( "")))),
                   onKeydown: (event) => {
                     if (event.key === "Enter") {
@@ -303,14 +458,16 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                   onClick: handleSearchSubmit,
                   disabled: !canSearch.value
                 },
-                { default: () => _nullishCoalesce(_optionalChain([props, 'access', _37 => _37.toolbar, 'optionalAccess', _38 => _38.searchButtonText]), () => ( "\u641C\u7D22")) }
+                {
+                  default: () => _nullishCoalesce(_optionalChain([props, 'access', _45 => _45.toolbar, 'optionalAccess', _46 => _46.searchButtonText]), () => ( tableLabels.value.searchButtonText))
+                }
               ) : null
             ]
           )
         );
       }
       if (hasFilters.value) {
-        _optionalChain([props, 'access', _39 => _39.toolbar, 'optionalAccess', _40 => _40.filters, 'optionalAccess', _41 => _41.forEach, 'call', _42 => _42((filter) => {
+        _optionalChain([props, 'access', _47 => _47.toolbar, 'optionalAccess', _48 => _48.filters, 'optionalAccess', _49 => _49.forEach, 'call', _50 => _50((filter) => {
           const currentValue = resolvedFilters.value[filter.key];
           const clearable = filter.clearable !== false;
           leftNodes.push(
@@ -345,13 +502,17 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
                 _vue.h.call(void 0, "span", {
                   class: "w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] animate-pulse"
                 }),
-                _vue.h.call(void 0, "span", null, `${bulkLabel.value} ${selectedCount.value} \u9879`)
+                _vue.h.call(void 0, 
+                  "span",
+                  null,
+                  `${bulkLabel.value} ${selectedCount.value} ${tableLabels.value.selectedItemsText}`
+                )
               ]
             )
           );
         }
         ;
-        (_nullishCoalesce(_optionalChain([props, 'access', _43 => _43.toolbar, 'optionalAccess', _44 => _44.bulkActions]), () => ( []))).forEach((action) => {
+        (_nullishCoalesce(_optionalChain([props, 'access', _51 => _51.toolbar, 'optionalAccess', _52 => _52.bulkActions]), () => ( []))).forEach((action) => {
           bulkChildren.push(
             _vue.h.call(void 0, 
               _chunk4VLNT2EDjs.Button,
@@ -375,7 +536,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             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"
           ),
           role: "toolbar",
-          "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F"
+          "aria-label": tableLabels.value.toolbarAriaLabel
         },
         [
           _vue.h.call(void 0, "div", { class: "flex items-center gap-3 flex-wrap flex-1 min-w-0" }, leftNodes),
@@ -383,7 +544,10 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
             "div",
             { class: "flex items-center gap-2.5 flex-wrap ml-auto shrink-0" },
             bulkChildren
-          ) : null
+          ) : null,
+          hasColumnSettings.value ? _vue.h.call(void 0, "div", { class: _tigercatcore.classNames.call(void 0, "shrink-0", !hasBulkActions.value && "ml-auto") }, [
+            renderColumnSettings()
+          ]) : null
         ]
       );
     };
@@ -394,6 +558,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         columns: props.columns,
         columnLockable: props.columnLockable,
         dataSource: props.dataSource,
+        hiddenColumnKeys: resolvedHiddenKeys.value,
         ...props.sort !== void 0 ? { sort: props.sort } : {},
         ...props.defaultSort !== void 0 ? { defaultSort: props.defaultSort } : {},
         ...props.filters !== void 0 ? { filters: props.filters } : {},
@@ -403,6 +568,8 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
         striped: props.striped,
         hoverable: props.hoverable,
         loading: props.loading,
+        locale: props.locale,
+        labels: props.labels,
         emptyText: props.emptyText,
         pagination: props.pagination,
         rowSelection: props.rowSelection,
@@ -424,7 +591,7 @@ var DataTableWithToolbar = _vue.defineComponent.call(void 0, {
           style: wrapperStyle.value,
           "data-tiger-data-table-with-toolbar": ""
         },
-        [renderToolbar(), _vue.h.call(void 0, _chunkRRI3F52Bjs.Table, tableProps)]
+        [renderToolbar(), _vue.h.call(void 0, _chunkOFTAQ2A4js.Table, tableProps)]
       );
     };
   }

package/dist/{chunk-U2PPTMQX.mjs → chunk-FI2EIJIF.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-UJZPEXF5.mjs";
+} from "./chunk-M4EP4OVR.mjs";
 import {
   renderVueBodyTeleport
 } from "./chunk-BDTPFPSB.mjs";

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

@@ -1,6 +1,6 @@
 "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 _chunkS3KTGULCjs = require('./chunk-S3KTGULC.js');
+var _chunkQOMWROWEjs = require('./chunk-QOMWROWE.js');
 
 
 var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
@@ -93,7 +93,7 @@ var Popconfirm = _vue.defineComponent.call(void 0, {
       floatingRef,
       floatingStyles,
       actualPlacement
-    } = _chunkS3KTGULCjs.useFloatingPopup.call(void 0, { props, emit, multiTrigger: false });
+    } = _chunkQOMWROWEjs.useFloatingPopup.call(void 0, { props, emit, multiTrigger: false });
     const popconfirmId = createPopconfirmId();
     const titleId = `${popconfirmId}-title`;
     const descriptionId = `${popconfirmId}-description`;