@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-I4BT2CJO.mjs

@@ -0,0 +1,520 @@
+import {
+  Table,
+  tableProps
+} from "./chunk-5XIHKQL7.mjs";
+import {
+  Select
+} from "./chunk-FM2P4ENM.mjs";
+import {
+  Popover
+} from "./chunk-KIGQEL2O.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-NN6AINLG.mjs → chunk-I77GUQV4.mjs}

@@ -1,14 +1,15 @@
 // src/components/Text.ts
 import { defineComponent, computed, h } from "vue";
 import {
-  getTextClasses
+  getTextClasses,
+  resolveTextTag
 } from "@expcat/tigercat-core";
 var Text = defineComponent({
   name: "TigerText",
   inheritAttrs: false,
   props: {
     /**
-     * HTML tag to render
+     * HTML tag to render. Only the TextTag whitelist is allowed.
      * @default 'p'
      */
     tag: {
@@ -32,7 +33,7 @@ var Text = defineComponent({
       default: "normal"
     },
     /**
-     * Text alignment
+     * Logical text alignment (`start` / `center` / `end` / `justify`)
      */
     align: {
       type: String
@@ -80,7 +81,8 @@ var Text = defineComponent({
   },
   setup(props, { slots, attrs }) {
     const textClasses = computed(() => getTextClasses(props));
-    return () => h(props.tag, { ...attrs, class: [textClasses.value, attrs.class] }, slots.default?.());
+    const resolvedTag = computed(() => resolveTextTag(props.tag));
+    return () => h(resolvedTag.value, { ...attrs, class: [textClasses.value, attrs.class] }, slots.default?.());
   }
 });
 var Text_default = Text;