@expcat/tigercat-vue 0.3.70 → 0.4.2

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.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkNGW5UMAN_js = require('../chunk-NGW5UMAN.js');
+var chunkEBTLMVDJ_js = require('../chunk-EBTLMVDJ.js');
 require('../chunk-27T3QDSF.js');
-require('../chunk-DN5GU5PC.js');
 require('../chunk-ZED7TU62.js');
+require('../chunk-DN5GU5PC.js');
 require('../chunk-2KDSHEZT.js');
 require('../chunk-DUQ7Q2GO.js');
 require('../chunk-WEFQCJAG.js');
@@ -16,9 +16,9 @@ require('../chunk-PNKVD2UK.js');
 
 Object.defineProperty(exports, "ActivityFeed", {
   enumerable: true,
-  get: function () { return chunkNGW5UMAN_js.ActivityFeed; }
+  get: function () { return chunkEBTLMVDJ_js.ActivityFeed; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkNGW5UMAN_js.ActivityFeed_default; }
+  get: function () { return chunkEBTLMVDJ_js.ActivityFeed_default; }
 });

package/dist/components/ActivityFeed.mjs

@@ -1,7 +1,7 @@
-export { ActivityFeed, ActivityFeed_default as default } from '../chunk-D7VMY6WX.mjs';
+export { ActivityFeed, ActivityFeed_default as default } from '../chunk-RVEEEDJQ.mjs';
 import '../chunk-LBGTABIU.mjs';
-import '../chunk-Q6OYCTQO.mjs';
 import '../chunk-4YHOD7LT.mjs';
+import '../chunk-Q6OYCTQO.mjs';
 import '../chunk-3G4VPV4D.mjs';
 import '../chunk-6V7XCCXN.mjs';
 import '../chunk-YXN3YY5Y.mjs';

package/dist/components/Collapse.d.mts

@@ -153,10 +153,10 @@ declare const Collapse: vue.DefineComponent<vue.ExtractPropTypes<{
     style: Record<string, string | number>;
     className: string;
     bordered: boolean;
+    expandIconPosition: ExpandIconPosition;
     activeKey: string | number | (string | number)[];
     defaultActiveKey: string | number | (string | number)[];
     accordion: boolean;
-    expandIconPosition: ExpandIconPosition;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { Collapse, type CollapseContext, CollapseContextKey, type VueCollapseProps, Collapse as default };

package/dist/components/Collapse.d.ts

@@ -153,10 +153,10 @@ declare const Collapse: vue.DefineComponent<vue.ExtractPropTypes<{
     style: Record<string, string | number>;
     className: string;
     bordered: boolean;
+    expandIconPosition: ExpandIconPosition;
     activeKey: string | number | (string | number)[];
     defaultActiveKey: string | number | (string | number)[];
     accordion: boolean;
-    expandIconPosition: ExpandIconPosition;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { Collapse, type CollapseContext, CollapseContextKey, type VueCollapseProps, Collapse as default };

package/dist/components/DataTableWithToolbar.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkYZK2HXRT_js = require('../chunk-YZK2HXRT.js');
-require('../chunk-3PQIZBT5.js');
+var chunkLGRUMMOG_js = require('../chunk-LGRUMMOG.js');
+require('../chunk-WV3Y45YK.js');
 require('../chunk-HNQZ5JRB.js');
 require('../chunk-AGAJJYP2.js');
 require('../chunk-WC4B72TZ.js');
@@ -14,9 +14,9 @@ require('../chunk-PNKVD2UK.js');
 
 Object.defineProperty(exports, "DataTableWithToolbar", {
   enumerable: true,
-  get: function () { return chunkYZK2HXRT_js.DataTableWithToolbar; }
+  get: function () { return chunkLGRUMMOG_js.DataTableWithToolbar; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunkYZK2HXRT_js.DataTableWithToolbar_default; }
+  get: function () { return chunkLGRUMMOG_js.DataTableWithToolbar_default; }
 });

package/dist/components/DataTableWithToolbar.mjs

@@ -1,5 +1,5 @@
-export { DataTableWithToolbar, DataTableWithToolbar_default as default } from '../chunk-ND4XDRYR.mjs';
-import '../chunk-ZTJTIQZY.mjs';
+export { DataTableWithToolbar, DataTableWithToolbar_default as default } from '../chunk-TCJBN2DA.mjs';
+import '../chunk-DEFEAEYE.mjs';
 import '../chunk-GALASVSG.mjs';
 import '../chunk-NHCCPMLC.mjs';
 import '../chunk-VURU7TLN.mjs';