@expcat/tigercat-vue 0.3.70 → 0.4.0

package/dist/chunk-HFBRO2IF.mjs

@@ -0,0 +1,440 @@
+import { useTigerConfig } from './chunk-TRDG56CB.mjs';
+import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
+import { mergeTigerLocale, getTaskBoardLabels, classNames, taskBoardBaseClasses, coerceClassValue, mergeStyleValues, resolveLocaleText, createTouchDragTracker, isWipExceeded, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardWipExceededClasses, taskBoardColumnHeaderClasses, taskBoardDropIndicatorClasses, taskBoardEmptyClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, getColumnDropIndex, setDragData, createColumnDragData, taskBoardCardClasses, taskBoardCardDraggingClasses, parseDragData, getDropIndex, reorderColumns, findColumnFromPoint, createCardDragData, moveCard } from '@expcat/tigercat-core';
+
+var TaskBoard = 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 = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getTaskBoardLabels(mergedLocale.value));
+    const innerColumns = ref(props.columns ?? props.defaultColumns ?? []);
+    watch(
+      () => props.columns,
+      (value) => {
+        if (value !== void 0) innerColumns.value = value;
+      }
+    );
+    watch(
+      () => props.defaultColumns,
+      (value) => {
+        if (props.columns === void 0 && value !== void 0) {
+          innerColumns.value = value;
+        }
+      }
+    );
+    const currentColumns = computed(() => props.columns ?? innerColumns.value);
+    const updateColumns = (next) => {
+      innerColumns.value = next;
+      emit("update:columns", next);
+    };
+    const dragState = ref(null);
+    const dropTargetColumnId = ref(null);
+    const dropIndex = ref(-1);
+    const boardRef = 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 = 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 = 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);
+      setDragData(e.dataTransfer, 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 = getDropIndex(e.clientY, rects);
+    };
+    const handleCardDrop = (e, column) => {
+      e.preventDefault();
+      if (!e.dataTransfer) return;
+      const data = 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;
+      setDragData(e.dataTransfer, 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 = 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 = 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 = 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 = 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 = 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 = getColumnDropIndex(st.currentX, rects);
+      applyColumnMove(dragState.value.fromIndex, Math.min(toIdx, currentColumns.value.length - 1));
+      resetDragState();
+    };
+    const kbDragState = 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;
+      }
+    };
+    onMounted(() => {
+      setupTouch();
+    });
+    onBeforeUnmount(() => {
+      cancelAnimationFrame(touchRaf);
+    });
+    const wrapperClasses = computed(
+      () => classNames(
+        taskBoardBaseClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const wrapperStyle = computed(
+      () => 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 = classNames(
+        taskBoardCardClasses,
+        isDragging && 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 h("div", cardAttrs, slots.card({ card, column, isDragging }));
+      }
+      return h("div", cardAttrs, [
+        h("div", { class: "font-medium text-sm text-[var(--tiger-text,#1f2937)]" }, card.title),
+        card.description ? 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 = isWipExceeded(column);
+      const colClasses = classNames(
+        taskBoardColumnClasses,
+        isDropTarget && taskBoardColumnDropTargetClasses,
+        isColDragging && taskBoardColumnDraggingClasses
+      );
+      const headerContent = slots["column-header"] ? slots["column-header"]({ column }) : [
+        h("span", { class: wipOver ? taskBoardWipExceededClasses : void 0 }, [
+          column.title,
+          column.wipLimit != null ? h(
+            "span",
+            {
+              class: "ml-2 text-xs font-normal opacity-70",
+              title: resolveLocaleText(
+                labels.value.wipLimitText.replace("{limit}", String(column.wipLimit))
+              )
+            },
+            `(${column.cards.length}/${column.wipLimit})`
+          ) : h(
+            "span",
+            { class: "ml-2 text-xs font-normal opacity-50" },
+            String(column.cards.length)
+          )
+        ]),
+        column.description ? h(
+          "span",
+          {
+            class: "text-xs font-normal text-[var(--tiger-text-muted,#6b7280)] truncate max-w-[120px]"
+          },
+          column.description
+        ) : null
+      ];
+      const header = h(
+        "div",
+        {
+          class: 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(h("div", { key: `drop-${i}`, class: taskBoardDropIndicatorClasses }));
+        }
+        nodes.push(renderCard(card, column));
+        return nodes;
+      }).concat(
+        isDropTarget && dropIndex.value >= column.cards.length ? [h("div", { key: "drop-end", class: taskBoardDropIndicatorClasses })] : []
+      ) : [
+        isDropTarget ? h("div", { key: "drop-empty", class: taskBoardDropIndicatorClasses }) : slots["empty-column"] ? slots["empty-column"]({ column }) : h(
+          "div",
+          { class: taskBoardEmptyClasses },
+          resolveLocaleText(labels.value.emptyColumnText)
+        )
+      ];
+      const body = h(
+        "div",
+        {
+          class: 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 ? h(
+        "div",
+        {
+          class: classNames(
+            "border-t border-[var(--tiger-border,#e5e7eb)]",
+            taskBoardAddCardClasses
+          ),
+          onClick: () => {
+            emit("card-add", column.id);
+          }
+        },
+        [h("span", null, "+"), h("span", null, resolveLocaleText(labels.value.addCardText))]
+      ) : null;
+      return 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 () => h(
+      "div",
+      {
+        ...attrs,
+        ref: boardRef,
+        class: wrapperClasses.value,
+        style: wrapperStyle.value,
+        role: "region",
+        "aria-label": resolveLocaleText(labels.value.boardAriaLabel),
+        "data-tiger-task-board": ""
+      },
+      currentColumns.value.map((col, i) => renderColumnNode(col, i))
+    );
+  }
+});
+var TaskBoard_default = TaskBoard;
+
+export { TaskBoard, TaskBoard_default };