@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-SC4MACIG.mjs

@@ -0,0 +1,520 @@
+import {
+  Table,
+  tableProps
+} from "./chunk-2SC2HIVS.mjs";
+import {
+  Select
+} from "./chunk-KO7NA3F6.mjs";
+import {
+  Popover
+} from "./chunk-SG7V5ROT.mjs";
+import {
+  Input
+} from "./chunk-DU5F2EE7.mjs";
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Checkbox
+} from "./chunk-V5BSH3EF.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/DataTableWithToolbar.ts
+import {
+  defineComponent,
+  computed,
+  getCurrentInstance,
+  h,
+  ref,
+  watch
+} from "vue";
+import {
+  applyToolbarLocalView,
+  canSubmitToolbarSearch,
+  classNames,
+  coerceClassValue,
+  getDataTableToolbarBarClasses,
+  getDataTableToolbarWrapperClasses,
+  getImmediateTigerLocale,
+  getTableLabels,
+  isLazyTigerLocale,
+  isToolbarSearchRemote,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveTigerLocale,
+  resolveToolbarFilterMap,
+  resolveToolbarPageChange,
+  resolveToolbarSelectedKeys,
+  seedToolbarFilterState,
+  splitCompositeHostAttrs,
+  toggleHiddenColumnKey,
+  toolbarHasSearch
+} from "@expcat/tigercat-core";
+var DataTableWithToolbar = defineComponent({
+  name: "TigerDataTableWithToolbar",
+  inheritAttrs: false,
+  props: {
+    ...tableProps,
+    toolbar: {
+      type: Object,
+      default: void 0
+    },
+    tableClassName: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    "search-change": (_value) => true,
+    search: (_value) => true,
+    "filters-change": (_filters) => true,
+    "bulk-action": (_action, _keys) => true,
+    "selection-change": (_keys) => true,
+    "page-change": (_page) => true,
+    "page-size-change": (_page) => true,
+    "update:hiddenColumnKeys": (_hiddenKeys) => true,
+    "hidden-column-keys-change": (_hiddenKeys) => true
+  },
+  setup(props, { attrs, emit, slots }) {
+    const config = useTigerConfig();
+    const internalSearch = ref(props.toolbar?.defaultSearchValue ?? "");
+    const internalHiddenKeys = ref(props.defaultHiddenColumnKeys ?? []);
+    const internalFilters = ref(
+      seedToolbarFilterState({}, props.toolbar?.filters)
+    );
+    const extraFilterKeys = ref([]);
+    const internalSelectedKeys = ref(
+      props.rowSelection?.defaultSelectedRowKeys ?? []
+    );
+    const previousPageSize = ref(
+      props.pagination && typeof props.pagination === "object" ? props.pagination.pageSize ?? props.pagination.defaultPageSize ?? 10 : void 0
+    );
+    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.pagination,
+      (nextValue) => {
+        if (nextValue && typeof nextValue === "object") {
+          previousPageSize.value = nextValue.pageSize ?? nextValue.defaultPageSize ?? 10;
+        }
+      }
+    );
+    watch(
+      () => props.toolbar?.filters,
+      (filters) => {
+        const next = seedToolbarFilterState(internalFilters.value, filters);
+        if (next !== internalFilters.value) internalFilters.value = next;
+      },
+      { immediate: true, deep: true }
+    );
+    const searchValue = computed(
+      () => props.toolbar?.searchValue !== void 0 ? props.toolbar.searchValue : internalSearch.value
+    );
+    const resolvedHiddenKeys = computed(
+      () => props.hiddenColumnKeys !== void 0 ? props.hiddenColumnKeys : internalHiddenKeys.value
+    );
+    const resolvedFilters = computed(
+      () => resolveToolbarFilterMap(props.toolbar?.filters, internalFilters.value, extraFilterKeys.value)
+    );
+    const resolveHasSearch = () => {
+      if (props.toolbar?.search === false) return false;
+      if (toolbarHasSearch(props.toolbar)) return true;
+      const vnodeProps = getCurrentInstance()?.vnode.props ?? {};
+      return Boolean(vnodeProps.onSearch || vnodeProps.onSearchChange);
+    };
+    const hasFilters = computed(() => Boolean(props.toolbar?.filters?.length));
+    const hasFiltersExtra = computed(() => Boolean(slots["filters-extra"]));
+    const hasBulkActions = computed(() => Boolean(props.toolbar?.bulkActions?.length));
+    const hasColumnSettings = computed(() => Boolean(props.toolbar?.showColumnSettings));
+    const viewRows = computed(() => {
+      const rows = props.dataSource ?? [];
+      if (isToolbarSearchRemote(props.toolbar)) return rows;
+      return applyToolbarLocalView(
+        rows,
+        props.columns,
+        searchValue.value ?? "",
+        resolvedFilters.value
+      );
+    });
+    const selectedKeys = computed(
+      () => resolveToolbarSelectedKeys(
+        props.toolbar?.selectedKeys,
+        props.rowSelection?.selectedRowKeys,
+        internalSelectedKeys.value
+      )
+    );
+    const selectedCount = computed(
+      () => props.toolbar?.selectedCount !== void 0 ? props.toolbar.selectedCount : selectedKeys.value.length
+    );
+    const bulkLabel = computed(
+      () => props.toolbar?.bulkActionsLabel ?? tableLabels.value.selectedText
+    );
+    const handleHiddenColumnsChange = (nextHiddenKeys) => {
+      if (props.hiddenColumnKeys === void 0) internalHiddenKeys.value = nextHiddenKeys;
+      emit("update:hiddenColumnKeys", nextHiddenKeys);
+      emit("hidden-column-keys-change", nextHiddenKeys);
+    };
+    const handleSearchChange = (value) => {
+      if (props.toolbar?.searchValue === void 0) internalSearch.value = value;
+      props.toolbar?.onSearchChange?.(value);
+      emit("search-change", value);
+    };
+    const handleSearchSubmit = () => {
+      const value = searchValue.value ?? "";
+      props.toolbar?.onSearch?.(value);
+      emit("search", value);
+    };
+    const setFilterValue = (key, value, filter) => {
+      const inDefs = props.toolbar?.filters?.some((item) => item.key === key);
+      if (!inDefs && !extraFilterKeys.value.includes(key)) {
+        extraFilterKeys.value = [...extraFilterKeys.value, key];
+      }
+      if (!filter || filter.value === void 0) {
+        internalFilters.value = { ...internalFilters.value, [key]: value };
+      }
+      const next = resolveToolbarFilterMap(
+        props.toolbar?.filters,
+        { ...internalFilters.value, [key]: value },
+        extraFilterKeys.value
+      );
+      props.toolbar?.onFiltersChange?.(next);
+      emit("filters-change", next);
+    };
+    const handleSelectionChange = (keys) => {
+      if (props.toolbar?.selectedKeys === void 0 && props.rowSelection?.selectedRowKeys === void 0) {
+        internalSelectedKeys.value = keys;
+      }
+      emit("selection-change", keys);
+    };
+    const handleBulkAction = (action) => {
+      const keys = selectedKeys.value;
+      action.onClick?.(keys);
+      props.toolbar?.onBulkAction?.(action, keys);
+      emit("bulk-action", action, keys);
+    };
+    const handleTablePageChange = (page) => {
+      const result = resolveToolbarPageChange(page, previousPageSize.value);
+      previousPageSize.value = page.pageSize;
+      if (result.kind === "size") emit("page-size-change", page);
+      else emit("page-change", page);
+    };
+    const toolbarRenderContext = () => ({
+      searchValue: searchValue.value ?? "",
+      setSearch: handleSearchChange,
+      submitSearch: handleSearchSubmit,
+      filters: resolvedFilters.value,
+      setFilter: (key, value) => setFilterValue(key, value),
+      selectedKeys: selectedKeys.value,
+      selectedCount: selectedCount.value,
+      dataSource: viewRows.value,
+      hiddenColumnKeys: resolvedHiddenKeys.value,
+      setHiddenColumnKeys: handleHiddenColumnsChange
+    });
+    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(Icon, { name: "settings", class: "w-3.5 h-3.5" }) }
+          ),
+          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) => handleHiddenColumnsChange(
+                    toggleHiddenColumnKey(resolvedHiddenKeys.value, column.key, checked)
+                  )
+                },
+                { default: () => column.title }
+              );
+            })
+          )
+        }
+      );
+    };
+    const renderToolbar = () => {
+      if (slots.toolbar) return slots.toolbar(toolbarRenderContext());
+      const hasSearch = resolveHasSearch();
+      if (!hasSearch && !hasFilters.value && !hasFiltersExtra.value && !hasBulkActions.value && !hasColumnSettings.value) {
+        return null;
+      }
+      const leftNodes = [];
+      if (hasSearch) {
+        const showButton = props.toolbar?.showSearchButton ?? true;
+        leftNodes.push(
+          h(
+            "div",
+            {
+              class: classNames(
+                "flex items-center gap-2",
+                props.toolbar?.searchClassName ?? "w-full sm:w-auto sm:min-w-[220px] sm:max-w-[320px]"
+              )
+            },
+            [
+              h(
+                Input,
+                {
+                  type: "search",
+                  size: "sm",
+                  modelValue: searchValue.value,
+                  placeholder: props.toolbar?.searchPlaceholder ?? tableLabels.value.searchPlaceholder,
+                  "aria-label": props.toolbar?.searchPlaceholder ?? tableLabels.value.searchPlaceholder,
+                  "onUpdate:modelValue": (value) => handleSearchChange(String(value ?? "")),
+                  onKeydown: (event) => {
+                    if (event.key === "Enter") handleSearchSubmit();
+                  }
+                },
+                {
+                  prefix: () => h(Icon, {
+                    name: "search",
+                    class: "w-3.5 h-3.5 text-[var(--tiger-text-secondary,#6b7280)]"
+                  })
+                }
+              ),
+              showButton ? h(
+                Button,
+                {
+                  size: "sm",
+                  variant: "primary",
+                  class: "whitespace-nowrap shrink-0 rounded-[var(--tiger-radius-md,0.5rem)] px-3",
+                  onClick: handleSearchSubmit,
+                  disabled: !canSubmitToolbarSearch(props.toolbar)
+                },
+                {
+                  default: () => props.toolbar?.searchButtonText ?? tableLabels.value.searchButtonText
+                }
+              ) : null
+            ]
+          )
+        );
+      }
+      if (hasFilters.value) {
+        props.toolbar?.filters?.forEach((filter) => {
+          const currentValue = resolvedFilters.value[filter.key];
+          const clearable = filter.clearable !== false;
+          if (filter.render) {
+            const filterNode = filter.render({
+              filter,
+              value: currentValue,
+              filters: resolvedFilters.value,
+              setValue: (value) => setFilterValue(filter.key, value, filter),
+              setFilter: (key, value) => setFilterValue(key, value)
+            });
+            leftNodes.push(
+              h(
+                "div",
+                {
+                  key: filter.key,
+                  class: filter.itemClass ?? "w-full sm:w-auto",
+                  style: filter.itemStyle
+                },
+                filterNode == null ? [] : [filterNode]
+              )
+            );
+            return;
+          }
+          leftNodes.push(
+            h(
+              "div",
+              {
+                key: filter.key,
+                class: filter.itemClass ?? "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
+                style: filter.itemStyle
+              },
+              [
+                h(Select, {
+                  size: "sm",
+                  options: (filter.options ?? []).map((opt) => ({
+                    label: opt.label,
+                    value: opt.value
+                  })),
+                  modelValue: typeof currentValue === "string" || typeof currentValue === "number" ? currentValue : void 0,
+                  placeholder: filter.placeholder ?? filter.label,
+                  "aria-label": filter.label,
+                  clearable,
+                  "onUpdate:modelValue": (value) => {
+                    setFilterValue(filter.key, value ?? null, filter);
+                  }
+                })
+              ]
+            )
+          );
+        });
+      }
+      const filtersExtra = slots["filters-extra"]?.({
+        filters: resolvedFilters.value,
+        setFilter: (key, value) => setFilterValue(key, value),
+        dataSource: viewRows.value,
+        selectedKeys: selectedKeys.value,
+        hiddenColumnKeys: resolvedHiddenKeys.value
+      });
+      if (filtersExtra?.length) leftNodes.push(...filtersExtra);
+      const bulkChildren = [];
+      if (hasBulkActions.value) {
+        if (selectedCount.value > 0) {
+          bulkChildren.push(
+            h(
+              "div",
+              {
+                class: "flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-[var(--tiger-primary,#2563eb)]/10 text-[var(--tiger-primary,#2563eb)] text-xs font-medium border border-[var(--tiger-primary,#2563eb)]/15 shrink-0",
+                "aria-live": "polite"
+              },
+              [
+                h("span", {
+                  class: "w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] animate-pulse motion-reduce:animate-none"
+                }),
+                h(
+                  "span",
+                  null,
+                  `${bulkLabel.value} ${selectedCount.value} ${tableLabels.value.selectedItemsText}`
+                )
+              ]
+            )
+          );
+        }
+        ;
+        (props.toolbar?.bulkActions ?? []).forEach((action) => {
+          bulkChildren.push(
+            h(
+              Button,
+              {
+                key: action.key,
+                size: "sm",
+                variant: action.variant ?? "outline",
+                disabled: action.disabled || selectedCount.value === 0,
+                onClick: () => handleBulkAction(action)
+              },
+              { default: () => action.label }
+            )
+          );
+        });
+      }
+      return h(
+        "div",
+        {
+          class: getDataTableToolbarBarClasses({
+            bordered: props.bordered,
+            className: props.toolbar?.className
+          }),
+          style: props.toolbar?.style,
+          role: "toolbar",
+          "aria-label": tableLabels.value.toolbarAriaLabel
+        },
+        [
+          h("div", { class: "flex items-center gap-3 flex-wrap flex-1 min-w-0" }, leftNodes),
+          hasBulkActions.value ? h(
+            "div",
+            { class: "flex items-center gap-2.5 flex-wrap ml-auto shrink-0" },
+            bulkChildren
+          ) : null,
+          hasColumnSettings.value ? h("div", { class: classNames("shrink-0", !hasBulkActions.value && "ml-auto") }, [
+            renderColumnSettings()
+          ]) : null
+        ]
+      );
+    };
+    return () => {
+      const { host, rest } = splitCompositeHostAttrs(attrs);
+      const wrapperClass = getDataTableToolbarWrapperClasses({
+        bordered: props.bordered,
+        className: classNames(props.className, coerceClassValue(host.class))
+      });
+      const { toolbar: _toolbarSlot, "filters-extra": _filtersExtraSlot, ...tableSlots } = slots;
+      const tablePass = {};
+      for (const key of Object.keys(tableProps)) {
+        tablePass[key] = props[key];
+      }
+      return h(
+        "div",
+        {
+          ...host,
+          class: wrapperClass,
+          style: mergeStyleValues(host.style, props.style),
+          "data-tiger-data-table-with-toolbar": ""
+        },
+        [
+          renderToolbar(),
+          h(
+            Table,
+            {
+              ...rest,
+              ...tablePass,
+              dataSource: viewRows.value,
+              hiddenColumnKeys: resolvedHiddenKeys.value,
+              locale: resolvedTableLocale.value,
+              rowSelection: props.rowSelection ? { ...props.rowSelection, selectedRowKeys: selectedKeys.value } : void 0,
+              class: classNames(
+                props.tableClassName,
+                props.bordered && "border-none rounded-none shadow-none"
+              ),
+              onSelectionChange: handleSelectionChange,
+              onPageChange: handleTablePageChange
+            },
+            tableSlots
+          )
+        ]
+      );
+    };
+  }
+});
+var DataTableWithToolbar_default = DataTableWithToolbar;
+
+export {
+  DataTableWithToolbar,
+  DataTableWithToolbar_default
+};

package/dist/{chunk-626VUZ2Q.mjs → chunk-SG7V5ROT.mjs}

@@ -1,46 +1,43 @@
 import {
-  useFloatingPopup
-} from "./chunk-PMQSXEMT.mjs";
+  usePopup
+} from "./chunk-ZWKDK6AF.mjs";
 import {
-  renderVueOverlayTeleport
-} from "./chunk-Q7Y22OFX.mjs";
+  assignOverlayTriggerRef,
+  renderOverlayTrigger
+} from "./chunk-CMYPAPF2.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueFocusTrap
+} from "./chunk-Y63TRXZO.mjs";
 
 // src/components/Popover.ts
-import { defineComponent, computed, h } from "vue";
+import { defineComponent, computed, h, nextTick, useId, watch } from "vue";
 import {
   classNames,
   coerceClassValue,
-  createFloatingIdFactory,
+  getFocusableElements,
+  getOverlayTriggerAria,
   getPopoverContainerClasses,
-  getPopoverTriggerClasses,
   getPopoverContentClasses,
+  getPopoverContentStyle,
+  getPopoverTriggerClasses,
   POPOVER_TITLE_CLASSES,
   POPOVER_TEXT_CLASSES
 } from "@expcat/tigercat-core";
-var createPopoverId = createFloatingIdFactory("popover");
 var Popover = defineComponent({
   name: "TigerPopover",
   inheritAttrs: false,
   props: {
-    /** Whether the popover is open (controlled mode) */
     open: { type: Boolean, default: void 0 },
-    /** Default open state (uncontrolled mode) */
     defaultOpen: { type: Boolean, default: false },
-    /** Popover title text */
     title: { type: String, default: void 0 },
-    /** Popover content text */
     content: { type: String, default: void 0 },
-    /** Trigger type @default 'click' */
     trigger: { type: String, default: "click" },
-    /** Placement @default 'top' */
     placement: { type: String, default: "top" },
-    /** Disabled state */
     disabled: { type: Boolean, default: false },
-    /** Width (pixel number or Tailwind class) */
-    width: { type: [String, Number], default: void 0 },
-    /** Offset distance in pixels @default 8 */
+    width: { type: [Number, String], default: void 0 },
     offset: { type: Number, default: 8 },
-    /** Additional CSS classes */
+    asChild: { type: Boolean, default: false },
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
@@ -57,15 +54,29 @@ var Popover = defineComponent({
       positioned,
       overlayTarget,
       triggerHandlers
-    } = useFloatingPopup({ props, emit });
-    const popoverId = createPopoverId();
+    } = usePopup({ props, emit });
+    const trapEnabled = computed(() => currentVisible.value && props.trigger === "click");
+    useVueFocusTrap({ enabled: trapEnabled, containerRef: floatingRef });
+    watch(currentVisible, (visible) => {
+      if (!visible || props.trigger !== "click") return;
+      nextTick(() => {
+        const root = floatingRef.value;
+        if (!root) return;
+        const dialog = root.querySelector('[role="dialog"]') ?? root;
+        const first = getFocusableElements(dialog)[0] ?? dialog;
+        first.focus();
+      });
+    });
+    const popoverId = `tiger-popover-${useId()}`;
     const titleId = `${popoverId}-title`;
     const contentId = `${popoverId}-content`;
     const containerClasses = computed(
       () => classNames(getPopoverContainerClasses(), props.className, coerceClassValue(attrsRecord.class))
     );
     const triggerClasses = computed(() => getPopoverTriggerClasses(props.disabled));
-    const contentClasses = computed(() => getPopoverContentClasses(props.width));
+    const hasCustomWidth = computed(() => Boolean(getPopoverContentStyle(props.width)));
+    const contentClasses = computed(() => getPopoverContentClasses(hasCustomWidth.value));
+    const contentStyle = computed(() => getPopoverContentStyle(props.width));
     return () => {
       const triggerSlotContent = slots.trigger ? slots.trigger({ open: currentVisible.value }) : slots.default?.();
       if (!triggerSlotContent || triggerSlotContent.length === 0) return null;
@@ -76,6 +87,12 @@ var Popover = defineComponent({
       } = attrsRecord;
       const hasTitle = Boolean(props.title || slots.title);
       const hasContent = Boolean(props.content || slots.content);
+      const triggerAria = getOverlayTriggerAria({
+        kind: "dialog",
+        open: currentVisible.value,
+        controlsId: popoverId,
+        disabled: props.disabled
+      });
       return h(
         "div",
         {
@@ -85,24 +102,15 @@ var Popover = defineComponent({
           style: props.style
         },
         [
-          // Trigger
-          h(
-            "div",
-            {
-              ref: triggerRef,
-              class: triggerClasses.value,
-              "aria-haspopup": "dialog",
-              "aria-disabled": props.disabled ? "true" : void 0,
-              // `data-state` is the stable styling hook. `aria-expanded` is
-              // intentionally omitted: the trigger is a generic wrapper without
-              // an interactive role, where `aria-expanded` is invalid (the
-              // user's own interactive element carries the real semantics).
-              "data-state": currentVisible.value ? "open" : "closed",
-              ...triggerHandlers.value
-            },
-            triggerSlotContent
-          ),
-          // Floating content
+          renderOverlayTrigger({
+            asChild: props.asChild,
+            child: triggerSlotContent.length === 1 ? triggerSlotContent[0] : triggerSlotContent,
+            setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+            className: props.asChild ? void 0 : triggerClasses.value,
+            disabled: props.disabled,
+            aria: triggerAria,
+            handlers: triggerHandlers.value
+          }),
           currentVisible.value ? renderVueOverlayTeleport(
             h(
               "div",
@@ -120,9 +128,12 @@ var Popover = defineComponent({
                     id: popoverId,
                     role: "dialog",
                     "aria-modal": "false",
+                    tabindex: -1,
+                    "aria-label": hasTitle ? void 0 : props.title || props.content,
                     "aria-labelledby": hasTitle ? titleId : void 0,
                     "aria-describedby": hasContent ? contentId : void 0,
-                    class: contentClasses.value
+                    class: contentClasses.value,
+                    style: contentStyle.value
                   },
                   [
                     hasTitle && h(