@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-66JX7T3H.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-NWPALCKN.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
+};

package/dist/{chunk-SNNT64HK.mjs → chunk-6K5BLE4Q.mjs}

@@ -1,10 +1,22 @@
 // src/components/ChartCanvas.ts
-import { defineComponent, computed, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  defineComponent,
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useId,
+  watch
+} from "vue";
 import {
   chartCanvasBaseClasses,
+  chartCanvasHostClasses,
   classNames,
   coerceClassValue,
   createChartResizeObserverController,
+  DEFAULT_CHART_PADDING,
+  DEFAULT_CHART_SIZE,
   getChartInnerRect,
   resolveResponsiveChartSize
 } from "@expcat/tigercat-core";
@@ -17,11 +29,11 @@ var ChartCanvas = defineComponent({
   props: {
     width: {
       type: Number,
-      default: 320
+      default: DEFAULT_CHART_SIZE.width
     },
     height: {
       type: Number,
-      default: 200
+      default: DEFAULT_CHART_SIZE.height
     },
     responsive: {
       type: Boolean,
@@ -29,7 +41,7 @@ var ChartCanvas = defineComponent({
     },
     padding: {
       type: [Number, Object],
-      default: 24
+      default: () => ({ ...DEFAULT_CHART_PADDING })
     },
     className: {
       type: String
@@ -42,7 +54,8 @@ var ChartCanvas = defineComponent({
     }
   },
   setup(props, { slots, attrs, emit }) {
-    const svgRef = ref(null);
+    const hostRef = ref(null);
+    const labelId = useId();
     const observedSize = ref(null);
     const resizeController = createChartResizeObserverController({
       onSizeChange: (size) => {
@@ -70,7 +83,7 @@ var ChartCanvas = defineComponent({
         observedSize.value = null;
         return;
       }
-      const target = svgRef.value?.parentElement;
+      const target = hostRef.value;
       if (target) {
         resizeController.observe(target);
       }
@@ -89,28 +102,43 @@ var ChartCanvas = defineComponent({
     return () => {
       const rect = innerRect.value;
       const size = resolvedSize.value;
+      const titleId = props.title ? `${labelId}-title` : void 0;
+      const descId = props.desc ? `${labelId}-desc` : void 0;
+      const named = Boolean(props.title || attrs["aria-label"]);
       return h(
-        "svg",
+        "div",
         {
-          ...attrs,
-          ref: svgRef,
-          width: size.width,
-          height: size.height,
-          viewBox: `0 0 ${size.width} ${size.height}`,
-          class: svgClasses.value,
-          style: svgStyle.value
+          ref: hostRef,
+          class: chartCanvasHostClasses,
+          "data-chart-canvas-host": ""
         },
         [
-          props.title ? h("title", props.title) : null,
-          props.desc ? h("desc", props.desc) : null,
           h(
-            "g",
+            "svg",
             {
-              transform: `translate(${rect.x}, ${rect.y})`
+              ...attrs,
+              width: size.width,
+              height: size.height,
+              viewBox: `0 0 ${size.width} ${size.height}`,
+              class: svgClasses.value,
+              style: svgStyle.value,
+              role: named ? "img" : void 0,
+              "aria-labelledby": titleId,
+              "aria-describedby": descId
             },
-            slots.default?.({ innerRect: rect, width: size.width, height: size.height })
+            [
+              props.title ? h("title", { id: titleId }, props.title) : null,
+              props.desc ? h("desc", { id: descId }, props.desc) : null,
+              h(
+                "g",
+                {
+                  transform: `translate(${rect.x}, ${rect.y})`
+                },
+                slots.default?.({ innerRect: rect, width: size.width, height: size.height })
+              )
+            ].filter(Boolean)
           )
-        ].filter(Boolean)
+        ]
       );
     };
   }