@expcat/tigercat-vue 0.3.70 → 0.4.0

package/dist/chunk-YQGKXFV5.js

@@ -0,0 +1,443 @@
+'use strict';
+
+var chunkLUN3PRLX_js = require('./chunk-LUN3PRLX.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+var TaskBoard = vue.defineComponent({
+  name: "TigerTaskBoard",
+  inheritAttrs: false,
+  props: {
+    columns: {
+      type: Array,
+      default: void 0
+    },
+    defaultColumns: {
+      type: Array,
+      default: () => []
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    columnDraggable: {
+      type: Boolean,
+      default: true
+    },
+    enforceWipLimit: {
+      type: Boolean,
+      default: false
+    },
+    beforeCardMove: {
+      type: Function,
+      default: void 0
+    },
+    beforeColumnMove: {
+      type: Function,
+      default: void 0
+    },
+    onCardAdd: {
+      type: Function,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["card-move", "column-move", "card-add", "update:columns"],
+  setup(props, { slots, attrs, emit }) {
+    const config = chunkLUN3PRLX_js.useTigerConfig();
+    const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
+    const labels = vue.computed(() => tigercatCore.getTaskBoardLabels(mergedLocale.value));
+    const innerColumns = vue.ref(props.columns ?? props.defaultColumns ?? []);
+    vue.watch(
+      () => props.columns,
+      (value) => {
+        if (value !== void 0) innerColumns.value = value;
+      }
+    );
+    vue.watch(
+      () => props.defaultColumns,
+      (value) => {
+        if (props.columns === void 0 && value !== void 0) {
+          innerColumns.value = value;
+        }
+      }
+    );
+    const currentColumns = vue.computed(() => props.columns ?? innerColumns.value);
+    const updateColumns = (next) => {
+      innerColumns.value = next;
+      emit("update:columns", next);
+    };
+    const dragState = vue.ref(null);
+    const dropTargetColumnId = vue.ref(null);
+    const dropIndex = vue.ref(-1);
+    const boardRef = vue.ref(null);
+    let touchTracker = null;
+    let touchRaf = 0;
+    const isTouchDevice = () => typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
+    const applyCardMove = async (cardId, fromColumnId, toColumnId, toIdx) => {
+      const result = tigercatCore.moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, toIdx, {
+        enforceWipLimit: props.enforceWipLimit
+      });
+      if (!result) return;
+      if (props.beforeCardMove) {
+        const ok = await props.beforeCardMove(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      emit("card-move", result.event);
+    };
+    const applyColumnMove = async (fromIdx, toIdx) => {
+      const result = tigercatCore.reorderColumns(
+        currentColumns.value,
+        fromIdx,
+        Math.min(toIdx, currentColumns.value.length - 1)
+      );
+      if (!result) return;
+      if (props.beforeColumnMove) {
+        const ok = await props.beforeColumnMove(result.event);
+        if (!ok) return;
+      }
+      updateColumns(result.columns);
+      emit("column-move", result.event);
+    };
+    const handleCardDragStart = (e, card, column) => {
+      if (!props.draggable || !e.dataTransfer) return;
+      const idx = column.cards.findIndex((c) => c.id === card.id);
+      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createCardDragData(card.id, column.id, idx));
+      dragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
+    };
+    const handleCardDragOver = (e, column) => {
+      e.preventDefault();
+      if (!dragState.value || dragState.value.type !== "card") return;
+      dropTargetColumnId.value = column.id;
+      const target = e.currentTarget;
+      const cardEls = target.querySelectorAll("[data-tiger-taskboard-card]");
+      const rects = [];
+      cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      dropIndex.value = tigercatCore.getDropIndex(e.clientY, rects);
+    };
+    const handleCardDrop = (e, column) => {
+      e.preventDefault();
+      if (!e.dataTransfer) return;
+      const data = tigercatCore.parseDragData(e.dataTransfer);
+      if (!data || data.type !== "card") return;
+      applyCardMove(
+        data.cardId,
+        data.columnId,
+        column.id,
+        dropIndex.value >= 0 ? dropIndex.value : column.cards.length
+      );
+      resetDragState();
+    };
+    const handleColumnDragStart = (e, column, index) => {
+      if (!props.columnDraggable || !e.dataTransfer) return;
+      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createColumnDragData(column.id, index));
+      dragState.value = { type: "column", id: column.id, fromIndex: index };
+    };
+    const handleColumnDragOver = (e) => {
+      if (!dragState.value || dragState.value.type !== "column") return;
+      e.preventDefault();
+    };
+    const handleColumnDrop = (e) => {
+      e.preventDefault();
+      if (!e.dataTransfer) return;
+      const data = tigercatCore.parseDragData(e.dataTransfer);
+      if (!data || data.type !== "column") return;
+      const colEls = boardRef.value?.querySelectorAll("[data-tiger-taskboard-column]");
+      if (!colEls) return;
+      const rects = [];
+      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      const toIdx = tigercatCore.getColumnDropIndex(e.clientX, rects);
+      applyColumnMove(data.index, toIdx);
+      resetDragState();
+    };
+    const handleDragEnd = () => {
+      resetDragState();
+    };
+    const handleDragLeave = (e) => {
+      const related = e.relatedTarget;
+      if (!related || !e.currentTarget.contains(related)) {
+        if (dragState.value?.type === "card") {
+          dropTargetColumnId.value = null;
+          dropIndex.value = -1;
+        }
+      }
+    };
+    const resetDragState = () => {
+      dragState.value = null;
+      dropTargetColumnId.value = null;
+      dropIndex.value = -1;
+    };
+    const setupTouch = () => {
+      if (!isTouchDevice()) return;
+      touchTracker = tigercatCore.createTouchDragTracker();
+    };
+    const handleTouchStart = (e, card, column) => {
+      if (!props.draggable || !touchTracker) return;
+      const idx = column.cards.findIndex((c) => c.id === card.id);
+      touchTracker.onTouchStart(e, e.currentTarget);
+      dragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
+    };
+    const handleTouchMove = (e) => {
+      if (!touchTracker || !dragState.value) return;
+      touchTracker.onTouchMove(e);
+      cancelAnimationFrame(touchRaf);
+      touchRaf = requestAnimationFrame(() => {
+        const st = touchTracker.getState();
+        if (dragState.value?.type === "card") {
+          const colEl = tigercatCore.findColumnFromPoint(st.currentX, st.currentY, boardRef.value);
+          if (colEl) {
+            const colId = colEl.getAttribute("data-tiger-taskboard-column-id");
+            dropTargetColumnId.value = colId ?? null;
+            const cardEls = colEl.querySelectorAll("[data-tiger-taskboard-card]");
+            const rects = [];
+            cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+            dropIndex.value = tigercatCore.getDropIndex(st.currentY, rects);
+          }
+        }
+      });
+    };
+    const handleTouchEnd = () => {
+      if (!touchTracker || !dragState.value) return;
+      touchTracker.onTouchEnd();
+      if (dragState.value.type === "card" && dropTargetColumnId.value != null) {
+        applyCardMove(
+          dragState.value.id,
+          dragState.value.fromColumnId,
+          dropTargetColumnId.value,
+          dropIndex.value >= 0 ? dropIndex.value : 0
+        );
+      }
+      resetDragState();
+    };
+    const handleColumnTouchStart = (e, column, index) => {
+      if (!props.columnDraggable || !touchTracker) return;
+      touchTracker.onTouchStart(e, e.currentTarget);
+      dragState.value = { type: "column", id: column.id, fromIndex: index };
+    };
+    const handleColumnTouchMove = (e) => {
+      if (!touchTracker || !dragState.value || dragState.value.type !== "column") return;
+      touchTracker.onTouchMove(e);
+    };
+    const handleColumnTouchEnd = () => {
+      if (!touchTracker || !dragState.value || dragState.value.type !== "column") return;
+      const st = touchTracker.onTouchEnd();
+      const colEls = boardRef.value?.querySelectorAll("[data-tiger-taskboard-column]");
+      if (!colEls) {
+        resetDragState();
+        return;
+      }
+      const rects = [];
+      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
+      const toIdx = tigercatCore.getColumnDropIndex(st.currentX, rects);
+      applyColumnMove(dragState.value.fromIndex, Math.min(toIdx, currentColumns.value.length - 1));
+      resetDragState();
+    };
+    const kbDragState = vue.ref(null);
+    const handleCardKeyDown = (e, card, column) => {
+      if (!props.draggable) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (!kbDragState.value) {
+          const idx = column.cards.findIndex((c) => c.id === card.id);
+          kbDragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
+        } else {
+          const cardIdx = column.cards.findIndex((c) => c.id === card.id);
+          if (kbDragState.value.fromColumnId !== void 0) {
+            applyCardMove(kbDragState.value.id, kbDragState.value.fromColumnId, column.id, cardIdx);
+          }
+          kbDragState.value = null;
+        }
+        return;
+      }
+      if (e.key === "Escape" && kbDragState.value) {
+        e.preventDefault();
+        kbDragState.value = null;
+      }
+    };
+    vue.onMounted(() => {
+      setupTouch();
+    });
+    vue.onBeforeUnmount(() => {
+      cancelAnimationFrame(touchRaf);
+    });
+    const wrapperClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.taskBoardBaseClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const wrapperStyle = vue.computed(
+      () => tigercatCore.mergeStyleValues(attrs.style, props.style)
+    );
+    const renderCard = (card, column) => {
+      const isDragging = dragState.value?.type === "card" && dragState.value.id === card.id;
+      const isKbGrabbed = kbDragState.value?.id === card.id;
+      const cardClasses = tigercatCore.classNames(
+        tigercatCore.taskBoardCardClasses,
+        isDragging && tigercatCore.taskBoardCardDraggingClasses,
+        isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)]"
+      );
+      const cardAttrs = {
+        key: String(card.id),
+        class: cardClasses,
+        draggable: props.draggable,
+        tabindex: 0,
+        role: "listitem",
+        "aria-roledescription": labels.value.dragHintText,
+        "aria-grabbed": isKbGrabbed ? "true" : void 0,
+        "data-tiger-taskboard-card": "",
+        "data-tiger-taskboard-card-id": String(card.id),
+        onDragstart: (e) => handleCardDragStart(e, card, column),
+        onDragend: handleDragEnd,
+        onTouchstart: (e) => handleTouchStart(e, card, column),
+        onTouchmove: handleTouchMove,
+        onTouchend: handleTouchEnd,
+        onKeydown: (e) => handleCardKeyDown(e, card, column)
+      };
+      if (slots.card) {
+        return vue.h("div", cardAttrs, slots.card({ card, column, isDragging }));
+      }
+      return vue.h("div", cardAttrs, [
+        vue.h("div", { class: "font-medium text-sm text-[var(--tiger-text,#1f2937)]" }, card.title),
+        card.description ? vue.h(
+          "div",
+          { class: "mt-1 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2" },
+          card.description
+        ) : null
+      ]);
+    };
+    const renderColumnNode = (column, colIndex) => {
+      const isDropTarget = dragState.value?.type === "card" && dropTargetColumnId.value === column.id;
+      const isColDragging = dragState.value?.type === "column" && dragState.value.id === column.id;
+      const wipOver = tigercatCore.isWipExceeded(column);
+      const colClasses = tigercatCore.classNames(
+        tigercatCore.taskBoardColumnClasses,
+        isDropTarget && tigercatCore.taskBoardColumnDropTargetClasses,
+        isColDragging && tigercatCore.taskBoardColumnDraggingClasses
+      );
+      const headerContent = slots["column-header"] ? slots["column-header"]({ column }) : [
+        vue.h("span", { class: wipOver ? tigercatCore.taskBoardWipExceededClasses : void 0 }, [
+          column.title,
+          column.wipLimit != null ? vue.h(
+            "span",
+            {
+              class: "ml-2 text-xs font-normal opacity-70",
+              title: tigercatCore.resolveLocaleText(
+                labels.value.wipLimitText.replace("{limit}", String(column.wipLimit))
+              )
+            },
+            `(${column.cards.length}/${column.wipLimit})`
+          ) : vue.h(
+            "span",
+            { class: "ml-2 text-xs font-normal opacity-50" },
+            String(column.cards.length)
+          )
+        ]),
+        column.description ? vue.h(
+          "span",
+          {
+            class: "text-xs font-normal text-[var(--tiger-text-muted,#6b7280)] truncate max-w-[120px]"
+          },
+          column.description
+        ) : null
+      ];
+      const header = vue.h(
+        "div",
+        {
+          class: tigercatCore.taskBoardColumnHeaderClasses,
+          draggable: props.columnDraggable,
+          onDragstart: (e) => handleColumnDragStart(e, column, colIndex),
+          onDragend: handleDragEnd,
+          onTouchstart: (e) => handleColumnTouchStart(e, column, colIndex),
+          onTouchmove: handleColumnTouchMove,
+          onTouchend: handleColumnTouchEnd,
+          style: props.columnDraggable ? "cursor: grab" : void 0
+        },
+        headerContent
+      );
+      const cards = column.cards.length > 0 ? column.cards.flatMap((card, i) => {
+        const nodes = [];
+        if (isDropTarget && dropIndex.value === i) {
+          nodes.push(vue.h("div", { key: `drop-${i}`, class: tigercatCore.taskBoardDropIndicatorClasses }));
+        }
+        nodes.push(renderCard(card, column));
+        return nodes;
+      }).concat(
+        isDropTarget && dropIndex.value >= column.cards.length ? [vue.h("div", { key: "drop-end", class: tigercatCore.taskBoardDropIndicatorClasses })] : []
+      ) : [
+        isDropTarget ? vue.h("div", { key: "drop-empty", class: tigercatCore.taskBoardDropIndicatorClasses }) : slots["empty-column"] ? slots["empty-column"]({ column }) : vue.h(
+          "div",
+          { class: tigercatCore.taskBoardEmptyClasses },
+          tigercatCore.resolveLocaleText(labels.value.emptyColumnText)
+        )
+      ];
+      const body = vue.h(
+        "div",
+        {
+          class: tigercatCore.taskBoardColumnBodyClasses,
+          role: "list",
+          "aria-label": column.title,
+          onDragover: (e) => handleCardDragOver(e, column),
+          onDrop: (e) => handleCardDrop(e, column),
+          onDragleave: handleDragLeave
+        },
+        cards
+      );
+      const footer = slots["column-footer"] ? slots["column-footer"]({ column }) : props.onCardAdd ? vue.h(
+        "div",
+        {
+          class: tigercatCore.classNames(
+            "border-t border-[var(--tiger-border,#e5e7eb)]",
+            tigercatCore.taskBoardAddCardClasses
+          ),
+          onClick: () => {
+            emit("card-add", column.id);
+          }
+        },
+        [vue.h("span", null, "+"), vue.h("span", null, tigercatCore.resolveLocaleText(labels.value.addCardText))]
+      ) : null;
+      return vue.h(
+        "div",
+        {
+          key: String(column.id),
+          class: colClasses,
+          "data-tiger-taskboard-column": "",
+          "data-tiger-taskboard-column-id": String(column.id),
+          onDragover: dragState.value?.type === "column" ? handleColumnDragOver : void 0,
+          onDrop: dragState.value?.type === "column" ? handleColumnDrop : void 0
+        },
+        [header, body, footer]
+      );
+    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        ref: boardRef,
+        class: wrapperClasses.value,
+        style: wrapperStyle.value,
+        role: "region",
+        "aria-label": tigercatCore.resolveLocaleText(labels.value.boardAriaLabel),
+        "data-tiger-task-board": ""
+      },
+      currentColumns.value.map((col, i) => renderColumnNode(col, i))
+    );
+  }
+});
+var TaskBoard_default = TaskBoard;
+
+exports.TaskBoard = TaskBoard;
+exports.TaskBoard_default = TaskBoard_default;

package/dist/components/ActivityFeed.d.mts

@@ -107,9 +107,9 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    className: string;
     style: Record<string, string | number>;
     loading: boolean;
-    className: string;
     emptyText: string;
     items: ActivityItem[];
     groups: ActivityGroup[];

package/dist/components/ActivityFeed.d.ts

@@ -107,9 +107,9 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    className: string;
     style: Record<string, string | number>;
     loading: boolean;
-    className: string;
     emptyText: string;
     items: ActivityItem[];
     groups: ActivityGroup[];

package/dist/components/Alert.d.mts

@@ -157,10 +157,10 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     type: AlertType;
+    className: string;
     style: Record<string, string | number>;
     title: string;
     size: AlertSize;
-    className: string;
     closable: boolean;
     closeAriaLabel: string;
     showIcon: boolean;

package/dist/components/Alert.d.ts

@@ -157,10 +157,10 @@ declare const Alert: vue.DefineComponent<vue.ExtractPropTypes<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     type: AlertType;
+    className: string;
     style: Record<string, string | number>;
     title: string;
     size: AlertSize;
-    className: string;
     closable: boolean;
     closeAriaLabel: string;
     showIcon: boolean;

package/dist/components/Anchor.d.mts

@@ -96,7 +96,7 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "click")[], "change" | "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "change")[], "click" | "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     /**
      * Whether to fix the anchor to the viewport
      * @default true
@@ -168,12 +168,9 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    style: Record<string, unknown>;
-    className: string;
-    direction: AnchorDirection;
     affix: boolean;
     bounds: number;
     offsetTop: number;
@@ -181,6 +178,9 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
     targetOffset: number;
     getCurrentAnchor: (activeLink: string) => string;
     getContainer: () => HTMLElement | Window;
+    direction: AnchorDirection;
+    className: string;
+    style: Record<string, unknown>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { Anchor, type AnchorContext, AnchorContextKey, type VueAnchorProps, Anchor as default };

package/dist/components/Anchor.d.ts

@@ -96,7 +96,7 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "click")[], "change" | "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("click" | "change")[], "click" | "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     /**
      * Whether to fix the anchor to the viewport
      * @default true
@@ -168,12 +168,9 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
     onClick?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
 }>, {
-    style: Record<string, unknown>;
-    className: string;
-    direction: AnchorDirection;
     affix: boolean;
     bounds: number;
     offsetTop: number;
@@ -181,6 +178,9 @@ declare const Anchor: vue.DefineComponent<vue.ExtractPropTypes<{
     targetOffset: number;
     getCurrentAnchor: (activeLink: string) => string;
     getContainer: () => HTMLElement | Window;
+    direction: AnchorDirection;
+    className: string;
+    style: Record<string, unknown>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { Anchor, type AnchorContext, AnchorContextKey, type VueAnchorProps, Anchor as default };

package/dist/components/AnchorLink.d.mts

@@ -61,8 +61,8 @@ declare const AnchorLink: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    title: string;
     className: string;
+    title: string;
     target: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/components/AnchorLink.d.ts

@@ -61,8 +61,8 @@ declare const AnchorLink: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    title: string;
     className: string;
+    title: string;
     target: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/components/Avatar.d.mts

@@ -148,10 +148,10 @@ declare const Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    style: Record<string, string | number>;
-    size: AvatarSize;
     className: string;
+    style: Record<string, string | number>;
     text: string;
+    size: AvatarSize;
     src: string;
     alt: string;
     shape: AvatarShape;

package/dist/components/Avatar.d.ts

@@ -148,10 +148,10 @@ declare const Avatar: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    style: Record<string, string | number>;
-    size: AvatarSize;
     className: string;
+    style: Record<string, string | number>;
     text: string;
+    size: AvatarSize;
     src: string;
     alt: string;
     shape: AvatarShape;

package/dist/components/BackTop.d.mts

@@ -78,8 +78,8 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    style: Record<string, unknown>;
     className: string;
+    style: Record<string, unknown>;
     target: () => HTMLElement | Window | null;
     duration: number;
     visibilityHeight: number;

package/dist/components/BackTop.d.ts

@@ -78,8 +78,8 @@ declare const BackTop: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    style: Record<string, unknown>;
     className: string;
+    style: Record<string, unknown>;
     target: () => HTMLElement | Window | null;
     duration: number;
     visibilityHeight: number;

package/dist/components/Badge.d.mts

@@ -93,10 +93,10 @@ declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     type: BadgeType;
+    className: string;
     style: Record<string, string | number>;
     size: BadgeSize;
     variant: BadgeVariant;
-    className: string;
     max: number;
     content: string | number;
     position: BadgePosition;

package/dist/components/Badge.d.ts

@@ -93,10 +93,10 @@ declare const Badge: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>> & Readonly<{}>, {
     type: BadgeType;
+    className: string;
     style: Record<string, string | number>;
     size: BadgeSize;
     variant: BadgeVariant;
-    className: string;
     max: number;
     content: string | number;
     position: BadgePosition;

package/dist/components/Breadcrumb.d.mts

@@ -75,8 +75,8 @@ declare const Breadcrumb: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    style: Record<string, unknown>;
     className: string;
+    style: Record<string, unknown>;
     separator: string;
     extra: VNodeChild | VNodeChild[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/dist/components/Breadcrumb.d.ts

@@ -75,8 +75,8 @@ declare const Breadcrumb: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    style: Record<string, unknown>;
     className: string;
+    style: Record<string, unknown>;
     separator: string;
     extra: VNodeChild | VNodeChild[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;