@expcat/tigercat-vue 1.2.37 → 1.2.41

package/dist/{chunk-ILTIUESE.mjs → chunk-GFQDHFAX.mjs}

@@ -1,12 +1,21 @@
 import {
   Table
-} from "./chunk-W54LFA7A.mjs";
+} from "./chunk-CHDKJDZQ.mjs";
 import {
   Select
 } from "./chunk-PYT5DTQQ.mjs";
+import {
+  Popover
+} from "./chunk-PT4Q7C2A.mjs";
+import {
+  useTigerConfig
+} from "./chunk-VG6E4NX6.mjs";
 import {
   Input
 } from "./chunk-2WJADO6O.mjs";
+import {
+  Checkbox
+} from "./chunk-2BNQGU7E.mjs";
 import {
   Button
 } from "./chunk-PO5GVU4Q.mjs";
@@ -23,7 +32,12 @@ import {
 import {
   classNames,
   coerceClassValue,
-  mergeStyleValues
+  getImmediateTigerLocale,
+  getTableLabels,
+  isLazyTigerLocale,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveTigerLocale
 } from "@expcat/tigercat-core";
 var DataTableWithToolbar = defineComponent({
   name: "TigerDataTableWithToolbar",
@@ -41,6 +55,14 @@ var DataTableWithToolbar = defineComponent({
       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 = defineComponent({
       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 = defineComponent({
     "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 = useTigerConfig();
     const internalSearch = ref(props.toolbar?.defaultSearchValue ?? "");
+    const internalHiddenKeys = ref(
+      props.defaultHiddenColumnKeys ?? props.hiddenColumnKeys ?? []
+    );
     const internalFilters = ref({});
     const previousPageSize = ref(
       props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize ?? props.pagination.defaultPageSize ?? 10 : void 0
     );
     const vnodeProps = getCurrentInstance()?.vnode.props ?? {};
     const hasSearchListener = Boolean(vnodeProps.onSearch || vnodeProps.onSearchChange);
+    const resolvedTableLocale = ref();
+    let tableLocaleResolveId = 0;
+    watch(
+      () => props.locale,
+      (locale) => {
+        const resolveId = ++tableLocaleResolveId;
+        if (!locale) {
+          resolvedTableLocale.value = void 0;
+          return;
+        }
+        const immediateLocale = getImmediateTigerLocale(locale);
+        resolvedTableLocale.value = immediateLocale;
+        if (!isLazyTigerLocale(locale)) return;
+        resolveTigerLocale(locale).then((nextLocale) => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = nextLocale;
+          }
+        }).catch(() => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = immediateLocale;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    const tableLocale = computed(
+      () => mergeTigerLocale(config.value.locale, resolvedTableLocale.value)
+    );
+    const tableLabels = computed(() => getTableLabels(tableLocale.value, props.labels));
     watch(
       () => props.toolbar?.searchValue,
       (nextValue) => {
@@ -163,6 +228,14 @@ var DataTableWithToolbar = defineComponent({
         }
       }
     );
+    watch(
+      () => props.hiddenColumnKeys,
+      (nextValue) => {
+        if (nextValue !== void 0) {
+          internalHiddenKeys.value = nextValue;
+        }
+      }
+    );
     watch(
       () => props.toolbar?.filters,
       (filters) => {
@@ -195,6 +268,19 @@ var DataTableWithToolbar = defineComponent({
     });
     const hasFilters = computed(() => Boolean(props.toolbar?.filters?.length));
     const hasBulkActions = computed(() => Boolean(props.toolbar?.bulkActions?.length));
+    const hasColumnSettings = computed(() => Boolean(props.toolbar?.showColumnSettings));
+    const resolvedHiddenKeys = computed(() => 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 = computed(() => Boolean(vnodeProps.onSearch));
     const selectedKeys = computed(
       () => props.toolbar?.selectedKeys ?? props.rowSelection?.selectedRowKeys ?? []
@@ -202,7 +288,9 @@ var DataTableWithToolbar = defineComponent({
     const selectedCount = computed(
       () => props.toolbar?.selectedCount !== void 0 ? props.toolbar.selectedCount : selectedKeys.value.length
     );
-    const bulkLabel = computed(() => props.toolbar?.bulkActionsLabel ?? "\u5DF2\u9009\u62E9");
+    const bulkLabel = computed(
+      () => props.toolbar?.bulkActionsLabel ?? tableLabels.value.selectedText
+    );
     const wrapperClasses = computed(
       () => classNames(
         "tiger-data-table-with-toolbar flex flex-col",
@@ -249,8 +337,75 @@ var DataTableWithToolbar = defineComponent({
       }
       previousPageSize.value = pageSize;
     };
+    const renderColumnSettings = () => {
+      const lockedKeys = new Set(props.toolbar?.columnSettings?.lockedColumnKeys ?? []);
+      const panelTitle = props.toolbar?.columnSettings?.title ?? tableLabels.value.columnSettingsText;
+      return h(
+        Popover,
+        {
+          trigger: "click",
+          placement: "bottom-end"
+        },
+        {
+          default: () => h(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              class: "shrink-0 px-2",
+              "aria-label": tableLabels.value.columnSettingsAriaLabel
+            },
+            {
+              default: () => h(
+                "svg",
+                {
+                  class: "w-3.5 h-3.5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  viewBox: "0 0 24 24",
+                  "aria-hidden": "true"
+                },
+                [
+                  h("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"
+                  }),
+                  h("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  })
+                ]
+              )
+            }
+          ),
+          title: () => panelTitle,
+          content: () => h(
+            "div",
+            { class: "flex flex-col gap-2 min-w-[160px]" },
+            props.columns.map((column) => {
+              const locked = lockedKeys.has(column.key) || column.hideable === false;
+              return h(
+                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 = props.toolbar?.showSearchButton ?? true;
@@ -265,7 +420,7 @@ var DataTableWithToolbar = defineComponent({
                   type: "search",
                   size: "sm",
                   modelValue: searchValue.value,
-                  placeholder: props.toolbar?.searchPlaceholder ?? "\u641C\u7D22",
+                  placeholder: props.toolbar?.searchPlaceholder ?? tableLabels.value.searchPlaceholder,
                   "onUpdate:modelValue": (value) => handleSearchChange(String(value ?? "")),
                   onKeydown: (event) => {
                     if (event.key === "Enter") {
@@ -303,7 +458,9 @@ var DataTableWithToolbar = defineComponent({
                   onClick: handleSearchSubmit,
                   disabled: !canSearch.value
                 },
-                { default: () => props.toolbar?.searchButtonText ?? "\u641C\u7D22" }
+                {
+                  default: () => props.toolbar?.searchButtonText ?? tableLabels.value.searchButtonText
+                }
               ) : null
             ]
           )
@@ -345,7 +502,11 @@ var DataTableWithToolbar = defineComponent({
                 h("span", {
                   class: "w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] animate-pulse"
                 }),
-                h("span", null, `${bulkLabel.value} ${selectedCount.value} \u9879`)
+                h(
+                  "span",
+                  null,
+                  `${bulkLabel.value} ${selectedCount.value} ${tableLabels.value.selectedItemsText}`
+                )
               ]
             )
           );
@@ -375,7 +536,7 @@ var DataTableWithToolbar = defineComponent({
             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
         },
         [
           h("div", { class: "flex items-center gap-3 flex-wrap flex-1 min-w-0" }, leftNodes),
@@ -383,7 +544,10 @@ var DataTableWithToolbar = defineComponent({
             "div",
             { class: "flex items-center gap-2.5 flex-wrap ml-auto shrink-0" },
             bulkChildren
-          ) : null
+          ) : null,
+          hasColumnSettings.value ? h("div", { class: classNames("shrink-0", !hasBulkActions.value && "ml-auto") }, [
+            renderColumnSettings()
+          ]) : null
         ]
       );
     };
@@ -394,6 +558,7 @@ var DataTableWithToolbar = defineComponent({
         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 = defineComponent({
         striped: props.striped,
         hoverable: props.hoverable,
         loading: props.loading,
+        locale: props.locale,
+        labels: props.labels,
         emptyText: props.emptyText,
         pagination: props.pagination,
         rowSelection: props.rowSelection,

package/dist/{chunk-3EVCDIZE.js → chunk-KGDRA475.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkS3KTGULCjs = require('./chunk-S3KTGULC.js');
+var _chunkQOMWROWEjs = require('./chunk-QOMWROWE.js');
 
 
 var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
@@ -48,7 +48,7 @@ var Tooltip = _vue.defineComponent.call(void 0, {
       floatingRef,
       floatingStyles,
       triggerHandlers
-    } = _chunkS3KTGULCjs.useFloatingPopup.call(void 0, { props, emit });
+    } = _chunkQOMWROWEjs.useFloatingPopup.call(void 0, { props, emit });
     const tooltipId = createTooltipId();
     const containerClasses = _vue.computed.call(void 0, 
       () => _tigercatcore.classNames.call(void 0, _tigercatcore.getTooltipContainerClasses.call(void 0, ), props.className, _tigercatcore.coerceClassValue.call(void 0, attrsRecord.class))

package/dist/{chunk-WT3LV7OQ.mjs → chunk-KJ6VISRW.mjs}

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

package/dist/{chunk-6DYGPOYH.js → chunk-LUAI6VXV.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkS3KTGULCjs = require('./chunk-S3KTGULC.js');
+var _chunkQOMWROWEjs = require('./chunk-QOMWROWE.js');
 
 
 var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
@@ -54,7 +54,7 @@ var Popover = _vue.defineComponent.call(void 0, {
       floatingRef,
       floatingStyles,
       triggerHandlers
-    } = _chunkS3KTGULCjs.useFloatingPopup.call(void 0, { props, emit });
+    } = _chunkQOMWROWEjs.useFloatingPopup.call(void 0, { props, emit });
     const popoverId = createPopoverId();
     const titleId = `${popoverId}-title`;
     const contentId = `${popoverId}-content`;

package/dist/{chunk-UJZPEXF5.mjs → chunk-M4EP4OVR.mjs}

@@ -8,7 +8,9 @@ import {
 import { computed, ref, watch, onBeforeUnmount } from "vue";
 import {
   getTransformOrigin,
-  buildTriggerHandlerMap
+  FLOATING_OVERLAY_Z_INDEX,
+  buildTriggerHandlerMap,
+  restoreFocus
 } from "@expcat/tigercat-core";
 function useFloatingPopup(options) {
   const { props, emit, multiTrigger = true } = options;
@@ -32,6 +34,19 @@ function useFloatingPopup(options) {
   const containerRef = ref(null);
   const triggerRef = ref(null);
   const floatingRef = ref(null);
+  const restoreTriggerFocus = () => {
+    const trigger = triggerRef.value;
+    const target = trigger?.querySelector(
+      'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+    ) ?? trigger;
+    window.setTimeout(() => {
+      restoreFocus(target, { preventScroll: true });
+    }, 0);
+  };
+  const closeAndRestoreFocus = () => {
+    setVisible(false);
+    restoreTriggerFocus();
+  };
   const {
     x,
     y,
@@ -59,14 +74,14 @@ function useFloatingPopup(options) {
         outsideClickCleanup = useVueClickOutside({
           enabled: currentVisible,
           refs: [containerRef, floatingRef],
-          onOutsideClick: () => setVisible(false),
+          onOutsideClick: closeAndRestoreFocus,
           defer: true
         });
       }
       if (visible && trigger !== "manual") {
         escapeKeyCleanup = useVueEscapeKey({
           enabled: currentVisible,
-          onEscape: () => setVisible(false)
+          onEscape: closeAndRestoreFocus
         });
       }
     },
@@ -81,7 +96,7 @@ function useFloatingPopup(options) {
     left: `${x.value}px`,
     top: `${y.value}px`,
     transformOrigin: getTransformOrigin(actualPlacement.value),
-    zIndex: 1e3
+    zIndex: FLOATING_OVERLAY_Z_INDEX
   }));
   const handleToggle = () => {
     if (!props.disabled) setVisible(!currentVisible.value);