@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-UNQO7EVG.mjs → chunk-MNVDK2BL.mjs}

@@ -1,40 +1,36 @@
 import {
-  useFloatingPopup
-} from "./chunk-PMQSXEMT.mjs";
+  usePopup
+} from "./chunk-ZWKDK6AF.mjs";
+import {
+  assignOverlayTriggerRef,
+  renderOverlayTrigger
+} from "./chunk-CMYPAPF2.mjs";
 import {
   renderVueOverlayTeleport
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-Y63TRXZO.mjs";
 
 // src/components/Tooltip.ts
-import { defineComponent, computed, h } from "vue";
+import { defineComponent, computed, h, useId } from "vue";
 import {
   classNames,
   coerceClassValue,
-  createFloatingIdFactory,
+  getOverlayTriggerAria,
   getTooltipContainerClasses,
   getTooltipTriggerClasses,
   getTooltipContentClasses
 } from "@expcat/tigercat-core";
-var createTooltipId = createFloatingIdFactory("tooltip");
 var Tooltip = defineComponent({
   name: "TigerTooltip",
   inheritAttrs: false,
   props: {
-    /** Whether the tooltip is open (controlled mode) */
     open: { type: Boolean, default: void 0 },
-    /** Default open state (uncontrolled mode) @default false */
     defaultOpen: { type: Boolean, default: false },
-    /** Tooltip content text */
     content: { type: String, default: void 0 },
-    /** Trigger type @default 'hover' */
     trigger: { type: String, default: "hover" },
-    /** Placement @default 'top' */
     placement: { type: String, default: "top" },
-    /** Disabled state @default false */
     disabled: { type: Boolean, default: false },
-    /** Offset in pixels @default 8 */
     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 }
   },
@@ -51,8 +47,8 @@ var Tooltip = defineComponent({
       positioned,
       overlayTarget,
       triggerHandlers
-    } = useFloatingPopup({ props, emit });
-    const tooltipId = createTooltipId();
+    } = usePopup({ props, emit });
+    const tooltipId = `tiger-tooltip-${useId()}`;
     const containerClasses = computed(
       () => classNames(getTooltipContainerClasses(), props.className, coerceClassValue(attrsRecord.class))
     );
@@ -64,9 +60,15 @@ var Tooltip = defineComponent({
       const {
         class: _class,
         style: _style,
+        title: _title,
         ...restAttrs
       } = attrsRecord;
-      const hasTooltipContent = Boolean(props.content || slots.content);
+      const triggerAria = getOverlayTriggerAria({
+        kind: "tooltip",
+        open: currentVisible.value,
+        describedBy: tooltipId,
+        disabled: props.disabled
+      });
       return h(
         "div",
         {
@@ -76,18 +78,15 @@ var Tooltip = defineComponent({
           style: props.style
         },
         [
-          // Trigger element
-          h(
-            "div",
-            {
-              ref: triggerRef,
-              class: triggerClasses.value,
-              "aria-describedby": hasTooltipContent ? tooltipId : void 0,
-              ...triggerHandlers.value
-            },
-            defaultSlot
-          ),
-          // Tooltip content (positioned with Floating UI)
+          renderOverlayTrigger({
+            asChild: props.asChild,
+            child: defaultSlot.length === 1 ? defaultSlot[0] : defaultSlot,
+            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",
@@ -101,11 +100,7 @@ var Tooltip = defineComponent({
               [
                 h(
                   "div",
-                  {
-                    id: tooltipId,
-                    role: "tooltip",
-                    class: contentClasses.value
-                  },
+                  { id: tooltipId, role: "tooltip", class: contentClasses.value },
                   slots.content ? slots.content() : props.content
                 )
               ]

package/dist/chunk-MPYKNKZU.mjs

@@ -0,0 +1,420 @@
+import {
+  useDrag
+} from "./chunk-DXL3YHRP.mjs";
+import {
+  Pagination
+} from "./chunk-IOSUZR6Z.mjs";
+import {
+  VirtualList
+} from "./chunk-SZO4WL42.mjs";
+import {
+  Empty
+} from "./chunk-X7UK3A6Z.mjs";
+import {
+  Loading
+} from "./chunk-OO27UB75.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/List.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  getCurrentInstance,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  watch
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  mergeTigerLocale,
+  getListClasses,
+  getListItemClasses,
+  getListItemExtraClasses,
+  getListHeaderFooterClasses,
+  getListGridColumnClass,
+  getListGridGapStyle,
+  getListSourceIndex,
+  resolveListGridColumnCount,
+  resolveListVirtualItemHeight,
+  paginateData,
+  calculatePagination,
+  listWrapperClasses,
+  listSizeClasses,
+  listEmptyStateClasses,
+  listLoadingOverlayClasses,
+  listItemMetaClasses,
+  listItemAvatarClasses,
+  listItemContentClasses,
+  listItemTitleClasses,
+  listItemDescriptionClasses,
+  listGridContainerClasses,
+  listDragHandleClasses,
+  getBuiltInPaginationContainerClasses,
+  resolvePaginationDisplayMode,
+  getPaginationLabels,
+  getListLabels,
+  formatPaginationTotal,
+  observeElementSize,
+  reorderSequence,
+  devWarn
+} from "@expcat/tigercat-core";
+function isInteractiveTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(target.closest("button, a, input, textarea, select, [data-list-drag-handle]"));
+}
+var List = defineComponent({
+  name: "TigerList",
+  inheritAttrs: false,
+  props: {
+    dataSource: { type: Array, default: () => [] },
+    size: { type: String, default: "md" },
+    bordered: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    split: { type: Boolean, default: true },
+    itemLayout: {
+      type: String,
+      default: "horizontal"
+    },
+    pagination: {
+      type: [Object, Boolean],
+      default: false
+    },
+    grid: { type: Object, default: void 0 },
+    virtual: { type: Boolean, default: false },
+    virtualHeight: { type: Number, default: 400 },
+    virtualItemHeight: { type: Number, default: void 0 },
+    virtualOverscan: { type: Number, default: 5 },
+    rowKey: {
+      type: [String, Function],
+      default: "key"
+    },
+    hoverable: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: { type: Object, default: void 0 },
+    draggable: { type: Boolean, default: false }
+  },
+  emits: ["item-click", "page-change", "reorder"],
+  setup(props, { emit, slots, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getListLabels(mergedLocale.value));
+    const instance = getCurrentInstance();
+    const hasItemClickListener = computed(() => {
+      const vnodeProps = instance?.vnode.props || {};
+      const handler = vnodeProps.onItemClick;
+      return typeof handler === "function" || Array.isArray(handler);
+    });
+    const rootRef = ref(null);
+    const containerWidth = ref(0);
+    let stopSize;
+    onMounted(() => {
+      if (!props.grid) return;
+      stopSize = observeElementSize(rootRef.value, ({ width }) => {
+        containerWidth.value = width;
+      });
+    });
+    onBeforeUnmount(() => stopSize?.());
+    watch(
+      () => props.grid,
+      (grid) => {
+        stopSize?.();
+        stopSize = void 0;
+        if (!grid) return;
+        stopSize = observeElementSize(rootRef.value, ({ width }) => {
+          containerWidth.value = width;
+        });
+      }
+    );
+    const paginationCfg = computed(
+      () => props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null
+    );
+    const isRemotePagination = computed(() => paginationCfg.value?.remote === true);
+    const internalCurrentPage = ref(paginationCfg.value?.current || 1);
+    const internalCurrentPageSize = ref(paginationCfg.value?.pageSize || 10);
+    watch(
+      () => paginationCfg.value?.current,
+      (current) => {
+        if (current !== void 0) internalCurrentPage.value = current;
+      }
+    );
+    watch(
+      () => paginationCfg.value?.pageSize,
+      (pageSize) => {
+        if (pageSize !== void 0) internalCurrentPageSize.value = pageSize;
+      }
+    );
+    const currentPage = computed(
+      () => paginationCfg.value?.current !== void 0 ? paginationCfg.value.current : internalCurrentPage.value
+    );
+    const currentPageSize = computed(
+      () => paginationCfg.value?.pageSize !== void 0 ? paginationCfg.value.pageSize : internalCurrentPageSize.value
+    );
+    const drag = useDrag({
+      containerId: "list",
+      config: { handleSelector: "[data-list-drag-handle]" },
+      onDrop: (event) => {
+        if (event.fromIndex === event.toIndex) return;
+        emit(
+          "reorder",
+          reorderSequence(props.dataSource, event.fromIndex, event.toIndex),
+          event.fromIndex,
+          event.toIndex
+        );
+      }
+    });
+    const paginatedData = computed(() => {
+      if (props.pagination === false) return props.dataSource;
+      if (isRemotePagination.value) return props.dataSource;
+      return paginateData(props.dataSource, currentPage.value, currentPageSize.value);
+    });
+    const paginationTotal = computed(
+      () => isRemotePagination.value ? paginationCfg.value?.total ?? props.dataSource.length : props.dataSource.length
+    );
+    const paginationInfo = computed(
+      () => props.pagination === false ? null : calculatePagination(paginationTotal.value, currentPage.value, currentPageSize.value)
+    );
+    const gridColumnCount = computed(
+      () => props.grid ? resolveListGridColumnCount(props.grid, containerWidth.value) : 1
+    );
+    const itemHeight = computed(
+      () => resolveListVirtualItemHeight(props.size, props.virtualItemHeight)
+    );
+    function handlePageChange(page) {
+      if (paginationCfg.value?.current === void 0) internalCurrentPage.value = page;
+      emit("page-change", { current: page, pageSize: currentPageSize.value });
+    }
+    function handlePageSizeChange(pageSize) {
+      if (paginationCfg.value?.pageSize === void 0) internalCurrentPageSize.value = pageSize;
+      if (paginationCfg.value?.current === void 0) internalCurrentPage.value = 1;
+      emit("page-change", { current: 1, pageSize });
+    }
+    function getItemKey(item, index) {
+      if (typeof props.rowKey === "function") return props.rowKey(item, index);
+      return item[props.rowKey] || index;
+    }
+    function renderDefault(item) {
+      const meta = [];
+      if (item.avatar) {
+        meta.push(
+          h("div", { class: listItemAvatarClasses }, [
+            typeof item.avatar === "string" ? h("img", {
+              src: item.avatar,
+              alt: item.title ? "" : labels.value.avatarAlt,
+              class: "w-10 h-10 rounded-full object-cover"
+            }) : item.avatar
+          ])
+        );
+      }
+      const content = [];
+      if (item.title) content.push(h("div", { class: listItemTitleClasses }, item.title));
+      if (item.description) {
+        content.push(h("div", { class: listItemDescriptionClasses }, item.description));
+      }
+      if (content.length > 0) meta.push(h("div", { class: listItemContentClasses }, content));
+      return [
+        meta.length > 0 ? h("div", { class: listItemMetaClasses }, meta) : null,
+        item.extra ? h(
+          "div",
+          {
+            class: getListItemExtraClasses(props.itemLayout),
+            onClick: (event) => event.stopPropagation()
+          },
+          item.extra
+        ) : null
+      ];
+    }
+    function renderListItem(item, pageIndex) {
+      const sourceIndex = getListSourceIndex(
+        pageIndex,
+        currentPage.value,
+        currentPageSize.value,
+        isRemotePagination.value
+      );
+      const key = getItemKey(item, sourceIndex);
+      const itemClasses = getListItemClasses(
+        props.size,
+        props.itemLayout,
+        props.split && !props.grid,
+        props.hoverable
+      );
+      const clickable = hasItemClickListener.value;
+      const bindings = props.draggable ? drag.getDragItemAttrs({ id: String(key), index: sourceIndex, containerId: "list" }) : {};
+      const {
+        class: dragClass,
+        onPointerdown,
+        draggable: _d,
+        ...dragRest
+      } = bindings;
+      const body = slots.renderItem ? slots.renderItem({ item, index: sourceIndex }) : renderDefault(item);
+      return h(
+        "li",
+        {
+          key,
+          class: classNames(itemClasses, dragClass),
+          onClick: clickable ? (event) => {
+            if (isInteractiveTarget(event.target)) return;
+            emit("item-click", item, sourceIndex);
+          } : void 0,
+          ...dragRest
+        },
+        [
+          props.draggable ? h(
+            "button",
+            {
+              type: "button",
+              "data-list-drag-handle": "",
+              class: listDragHandleClasses,
+              "aria-label": labels.value.dragHandleAriaLabel,
+              onPointerdown: (event) => {
+                event.stopPropagation();
+                onPointerdown?.(event);
+              },
+              onClick: (event) => event.stopPropagation(),
+              onKeydown: (event) => {
+                if (!event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") {
+                  return;
+                }
+                event.preventDefault();
+                const to = event.key === "ArrowUp" ? sourceIndex - 1 : sourceIndex + 1;
+                if (to < 0 || to >= props.dataSource.length) return;
+                emit(
+                  "reorder",
+                  reorderSequence(props.dataSource, sourceIndex, to),
+                  sourceIndex,
+                  to
+                );
+              }
+            },
+            "\u22EE\u22EE"
+          ) : null,
+          clickable && !slots.renderItem ? h(
+            "button",
+            {
+              type: "button",
+              class: "flex min-w-0 flex-1 items-center text-start",
+              onClick: () => emit("item-click", item, sourceIndex)
+            },
+            body
+          ) : body
+        ]
+      );
+    }
+    function renderItems() {
+      if (props.virtual && props.grid) {
+        devWarn("List.virtualGrid", "List: `virtual` is ignored when `grid` is set.");
+      }
+      if (paginatedData.value.length === 0) {
+        return h("div", { class: listEmptyStateClasses }, [
+          h(Empty, {
+            description: props.emptyText ?? mergedLocale.value?.common?.emptyText,
+            showImage: false,
+            locale: mergedLocale.value
+          })
+        ]);
+      }
+      const items = paginatedData.value.map((item, index) => renderListItem(item, index));
+      if (props.grid) {
+        return h(
+          "ul",
+          {
+            class: classNames(
+              listGridContainerClasses,
+              getListGridColumnClass(gridColumnCount.value),
+              props.grid.gutter === void 0 && "gap-4"
+            ),
+            style: getListGridGapStyle(props.grid.gutter),
+            ...props.draggable ? drag.getDropZoneAttrs() : {}
+          },
+          items
+        );
+      }
+      if (props.virtual) {
+        return h(
+          VirtualList,
+          {
+            role: "none",
+            itemCount: paginatedData.value.length,
+            itemHeight: itemHeight.value,
+            height: props.virtualHeight,
+            overscan: props.virtualOverscan
+          },
+          {
+            default: ({ index }) => {
+              const item = paginatedData.value[index];
+              return item ? renderListItem(item, index) : null;
+            }
+          }
+        );
+      }
+      return h("ul", props.draggable ? drag.getDropZoneAttrs() : {}, items);
+    }
+    function renderPaginationBar() {
+      if (props.pagination === false || !paginationInfo.value) return null;
+      const { totalPages } = paginationInfo.value;
+      const paginationConfig = props.pagination;
+      const paginationLabels = getPaginationLabels(mergedLocale.value);
+      const localeCode = mergedLocale.value?.locale;
+      const { simple, showQuickJumper } = resolvePaginationDisplayMode(totalPages, paginationConfig);
+      const totalText = paginationConfig.totalText ?? ((value, range) => formatPaginationTotal(paginationLabels.totalText, value, range, localeCode));
+      return h("div", { class: getBuiltInPaginationContainerClasses() }, [
+        h(Pagination, {
+          size: props.size === "lg" ? "large" : props.size === "sm" ? "small" : "medium",
+          align: "right",
+          current: currentPage.value,
+          pageSize: currentPageSize.value,
+          total: paginationTotal.value,
+          simple,
+          showQuickJumper,
+          showSizeChanger: paginationConfig.showSizeChanger !== false,
+          showTotal: paginationConfig.showTotal !== false,
+          totalText,
+          pageIndicatorText: paginationConfig.pageIndicatorText,
+          pageSizeOptions: paginationConfig.pageSizeOptions || [10, 20, 50, 100],
+          locale: mergedLocale.value,
+          onChange: (page) => handlePageChange(page),
+          onPageSizeChange: (_page, pageSize) => handlePageSizeChange(pageSize)
+        })
+      ]);
+    }
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        ref: rootRef,
+        class: classNames(
+          listWrapperClasses,
+          getListClasses(props.bordered),
+          listSizeClasses[props.size],
+          props.className,
+          coerceClassValue(attrs.class)
+        ),
+        style: mergeStyleValues(attrs.style, props.style)
+      },
+      [
+        slots.header ? h("div", { class: getListHeaderFooterClasses(props.size, false) }, slots.header()) : null,
+        h("div", { class: "relative", "aria-busy": props.loading || void 0 }, [
+          renderItems(),
+          props.loading ? h("div", { class: listLoadingOverlayClasses }, [
+            h(Loading, { variant: "spinner", "aria-hidden": true, role: "presentation" })
+          ]) : null
+        ]),
+        slots.footer ? h("div", { class: getListHeaderFooterClasses(props.size, true) }, slots.footer()) : null,
+        renderPaginationBar()
+      ]
+    );
+  }
+});
+var List_default = List;
+
+export {
+  List,
+  List_default
+};