@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-BOHE5URZ.mjs → chunk-LAT52FFS.mjs}

@@ -1,9 +1,18 @@
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/TaskBoard.ts
-import { defineComponent, computed, ref, watch, h, onMounted, onBeforeUnmount } from "vue";
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  h,
+  onMounted,
+  onBeforeUnmount,
+  getCurrentInstance
+} from "vue";
 import {
   classNames,
   coerceClassValue,
@@ -27,20 +36,23 @@ import {
   kanbanSwimlaneClasses,
   kanbanSwimlaneHeaderClasses,
   kanbanSwimlaneDotClasses,
-  kanbanSwimlaneCollapsedClasses,
   kanbanAddColumnClasses,
-  filterColumns,
-  filterCards,
-  groupBySwimlane,
+  kanbanFilterHighlightClasses,
   getColumnCardCount,
   moveCard,
-  mapVisibleCardIndexToSource,
   reorderColumns,
   isWipExceeded,
   appendDefaultTaskBoardCard,
+  appendDefaultTaskBoardColumn,
   createTaskBoardDragController,
-  createDefaultDragSnapshot
+  createDefaultDragSnapshot,
+  resolveTaskBoardView
 } from "@expcat/tigercat-core";
+function cardMatchesFilter(card, filterText) {
+  if (!filterText.trim()) return false;
+  const lower = filterText.toLowerCase();
+  return (card.title ?? "").toLowerCase().includes(lower) || (card.description ?? "").toLowerCase().includes(lower);
+}
 var TaskBoard = defineComponent({
   name: "TigerTaskBoard",
   inheritAttrs: false,
@@ -53,18 +65,9 @@ var TaskBoard = defineComponent({
       type: Array,
       default: () => []
     },
-    draggable: {
-      type: Boolean,
-      default: true
-    },
-    columnDraggable: {
-      type: Boolean,
-      default: true
-    },
-    enforceWipLimit: {
-      type: Boolean,
-      default: false
-    },
+    draggable: { type: Boolean, default: true },
+    columnDraggable: { type: Boolean, default: true },
+    enforceWipLimit: { type: Boolean, default: false },
     beforeCardMove: {
       type: Function,
       default: void 0
@@ -73,10 +76,6 @@ var TaskBoard = defineComponent({
       type: Function,
       default: void 0
     },
-    onCardAdd: {
-      type: Function,
-      default: void 0
-    },
     filterText: { type: String, default: "" },
     hiddenColumns: {
       type: Array,
@@ -110,54 +109,79 @@ var TaskBoard = defineComponent({
       default: void 0
     }
   },
-  emits: ["card-move", "column-move", "card-add", "column-add", "update:columns"],
+  emits: [
+    "card-move",
+    "column-move",
+    "card-add",
+    "column-add",
+    "update:columns",
+    "swimlane-collapse"
+  ],
   setup(props, { slots, attrs, emit }) {
+    const instance = getCurrentInstance();
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
     const labels = computed(() => getTaskBoardLabels(mergedLocale.value, props.labels));
-    const innerColumns = ref(props.columns ?? props.defaultColumns ?? []);
+    const dir = computed(() => config.value.direction === "rtl" ? "rtl" : "ltr");
+    const innerColumns = ref(
+      props.columns !== void 0 ? 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 !== void 0 ? props.columns : innerColumns.value
+    );
+    const collapsedOverride = ref({});
+    const view = computed(
+      () => resolveTaskBoardView({
+        columns: currentColumns.value,
+        filterText: props.filterText,
+        hiddenColumns: props.hiddenColumns,
+        swimlanes: props.swimlanes,
+        swimlaneField: props.swimlaneField,
+        unassignedLabel: labels.value.unassignedSwimlaneText,
+        collapsedLaneState: collapsedOverride.value
+      })
     );
-    const currentColumns = computed(() => props.columns ?? innerColumns.value);
-    const visibleColumns = computed(() => {
-      const cols = currentColumns.value;
-      if (!props.filterText && (!props.hiddenColumns || props.hiddenColumns.length === 0)) {
-        return cols;
-      }
-      return filterColumns(cols, props.filterText || "", props.hiddenColumns);
-    });
     const updateColumns = (next) => {
       innerColumns.value = next;
       emit("update:columns", next);
     };
+    const hasListener = (propName) => typeof instance?.vnode.props?.[propName] === "function";
     const addCardToColumn = (columnId) => {
       emit("card-add", columnId);
-      if (props.onCardAdd == null) {
-        updateColumns(appendDefaultTaskBoardCard(currentColumns.value, columnId));
+      if (!hasListener("onCardAdd")) {
+        const col = currentColumns.value.find((item) => item.id === columnId);
+        if (props.enforceWipLimit && col && col.wipLimit != null && col.wipLimit > 0 && col.cards.length >= col.wipLimit) {
+          return;
+        }
+        updateColumns(
+          appendDefaultTaskBoardCard(currentColumns.value, columnId, labels.value.newCardTitle)
+        );
+      }
+    };
+    const addColumn = () => {
+      emit("column-add");
+      if (!hasListener("onColumnAdd")) {
+        updateColumns(
+          appendDefaultTaskBoardColumn(currentColumns.value, labels.value.newColumnTitle)
+        );
+      }
+    };
+    const toggleSwimlane = (laneId, collapsed) => {
+      emit("swimlane-collapse", laneId, collapsed);
+      if (!hasListener("onSwimlaneCollapse")) {
+        collapsedOverride.value = { ...collapsedOverride.value, [String(laneId)]: collapsed };
       }
     };
     const dragSnap = ref(createDefaultDragSnapshot());
     const boardRef = ref(null);
     const applyCardMove = async (cardId, fromColumnId, toColumnId, toIdx) => {
-      const sourceCol = currentColumns.value.find((c) => c.id === toColumnId);
-      const mappedIdx = sourceCol == null ? toIdx : mapVisibleCardIndexToSource(
-        sourceCol.cards,
-        filterCards(sourceCol.cards, props.filterText || ""),
-        toIdx
-      );
-      const result = moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, mappedIdx, {
+      const result = moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, toIdx, {
         enforceWipLimit: props.enforceWipLimit
       });
       if (!result) return;
@@ -169,11 +193,7 @@ var TaskBoard = defineComponent({
       emit("card-move", result.event);
     };
     const applyColumnMove = async (fromIdx, toIdx) => {
-      const result = reorderColumns(
-        currentColumns.value,
-        fromIdx,
-        Math.min(toIdx, currentColumns.value.length - 1)
-      );
+      const result = reorderColumns(currentColumns.value, fromIdx, toIdx);
       if (!result) return;
       if (props.beforeColumnMove) {
         const ok = await props.beforeColumnMove(result.event);
@@ -190,7 +210,9 @@ var TaskBoard = defineComponent({
         applyCardMove,
         applyColumnMove,
         getBoardEl: () => boardRef.value,
-        getColumnCount: () => currentColumns.value.length
+        getView: () => view.value,
+        getSourceColumns: () => currentColumns.value,
+        getDir: () => dir.value
       },
       { draggable: props.draggable, columnDraggable: props.columnDraggable }
     );
@@ -220,6 +242,7 @@ var TaskBoard = defineComponent({
       const cardClasses = classNames(
         taskBoardCardClasses,
         isDragging && taskBoardCardDraggingClasses,
+        cardMatchesFilter(card, props.filterText || "") && kanbanFilterHighlightClasses,
         isKbGrabbed && "ring-2 ring-[var(--tiger-primary,#2563eb)] ring-offset-2 shadow-[0_0_12px_rgba(37,99,235,0.25)]"
       );
       const cardAttrs = {
@@ -228,8 +251,7 @@ var TaskBoard = defineComponent({
         draggable: props.draggable,
         tabindex: 0,
         role: "listitem",
-        "aria-roledescription": labels.value.dragHintText,
-        "aria-grabbed": isKbGrabbed ? "true" : void 0,
+        title: labels.value.dragHintText,
         "data-tiger-taskboard-card": "",
         "data-tiger-taskboard-card-id": String(card.id),
         onDragstart: (e) => {
@@ -240,7 +262,10 @@ var TaskBoard = defineComponent({
         onTouchmove: (e) => dragCtrl.cardTouchMove(e),
         onTouchend: () => dragCtrl.cardTouchEnd(),
         onKeydown: (e) => {
-          if (dragCtrl.cardKeyDown(e.key, card, column)) e.preventDefault();
+          if (dragCtrl.cardKeyDown(e.key, card, column)) {
+            e.preventDefault();
+            e.stopPropagation();
+          }
         }
       };
       if (slots.card) {
@@ -255,11 +280,16 @@ var TaskBoard = defineComponent({
         ) : null
       ]);
     };
-    const renderColumnNode = (column, colIndex) => {
-      const isDropTarget = dragSnap.value.drag?.type === "card" && dragSnap.value.dropTargetColumnId === column.id;
+    const renderColumnNode = (viewColumn) => {
+      const column = viewColumn.source;
+      const kbGrabbing = dragSnap.value.kbDrag?.type === "card";
+      const isDropTarget = (dragSnap.value.drag?.type === "card" || kbGrabbing) && dragSnap.value.dropTargetColumnId === column.id;
       const isColDragging = dragSnap.value.drag?.type === "column" && dragSnap.value.drag.id === column.id;
+      const dropIdx = isDropTarget ? dragSnap.value.dropIndex : -1;
       const wipOver = isWipExceeded(column);
-      const cardCount = props.showCardCount ? getColumnCardCount(column) : null;
+      const cardCount = getColumnCardCount(column);
+      const countLabel = cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`;
+      const wipTitle = column.wipLimit != null ? resolveLocaleText(labels.value.wipLimitText.replace("{limit}", String(column.wipLimit))) : void 0;
       const colClasses = classNames(
         taskBoardColumnClasses,
         isDropTarget && taskBoardColumnDropTargetClasses,
@@ -268,37 +298,28 @@ var TaskBoard = defineComponent({
       const headerContent = slots["column-header"] ? slots["column-header"]({ column }) : [
         h("span", { class: wipOver ? taskBoardWipExceededClasses : void 0 }, [
           column.title,
-          // When showCardCount is enabled, use the compact badge style
-          props.showCardCount && cardCount ? null : column.wipLimit != null ? h(
+          !props.showCardCount && cardCount.limit != null ? h(
             "span",
             {
               class: classNames(
-                "ml-2 text-xs font-normal transition-all duration-200 px-1.5 py-0.5 rounded",
+                "ms-2 text-xs font-normal transition-all duration-200 px-1.5 py-0.5 rounded",
                 wipOver ? "bg-red-50 dark:bg-red-950/30 text-[var(--tiger-error,#ef4444)] font-semibold border border-red-200/30 dark:border-red-900/30 shadow-xs" : "opacity-70 bg-[var(--tiger-border,#e5e7eb)]/20 text-[var(--tiger-text-secondary,#6b7280)]"
               ),
-              title: resolveLocaleText(
-                labels.value.wipLimitText.replace("{limit}", String(column.wipLimit))
-              )
-            },
-            `(${column.cards.length}/${column.wipLimit})`
-          ) : h(
-            "span",
-            {
-              class: "ml-2 text-xs font-normal px-1.5 py-0.5 rounded bg-[var(--tiger-border,#e5e7eb)]/20 text-[var(--tiger-text-secondary,#6b7280)] opacity-70"
+              title: wipTitle
             },
-            String(column.cards.length)
-          )
+            `(${countLabel})`
+          ) : null
         ]),
-        // Card count badge (Kanban-style)
-        props.showCardCount && cardCount ? h(
+        props.showCardCount ? h(
           "span",
           {
             class: classNames(
               kanbanCardCountClasses,
               wipOver && `${taskBoardWipExceededClasses} bg-red-50 dark:bg-red-950/30 border border-red-200/50 dark:border-red-900/30 font-semibold shadow-xs`
-            )
+            ),
+            title: wipTitle
           },
-          cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`
+          countLabel
         ) : null,
         column.description ? h(
           "span",
@@ -313,80 +334,99 @@ var TaskBoard = defineComponent({
         {
           class: taskBoardColumnHeaderClasses,
           draggable: props.columnDraggable,
+          tabindex: props.columnDraggable ? 0 : void 0,
           onDragstart: (e) => {
-            if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column, colIndex);
+            if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column);
           },
           onDragend: () => dragCtrl.dragEnd(),
-          onTouchstart: (e) => dragCtrl.columnTouchStart(e, e.currentTarget, column, colIndex),
+          onTouchstart: (e) => dragCtrl.columnTouchStart(e, e.currentTarget, column),
           onTouchmove: (e) => dragCtrl.columnTouchMove(e),
           onTouchend: () => dragCtrl.columnTouchEnd(),
+          onKeydown: (e) => {
+            if (dragCtrl.columnKeyDown(e.key, column)) e.preventDefault();
+          },
           style: props.columnDraggable ? "cursor: grab" : void 0
         },
         headerContent
       );
-      const renderCardNode = (card, originalIndex) => {
+      const renderCardNode = (card, visibleIndex) => {
         const nodes = [];
-        if (isDropTarget && dragSnap.value.dropIndex === originalIndex) {
+        if (isDropTarget && dropIdx === visibleIndex) {
           nodes.push(
-            h("div", { key: `drop-${originalIndex}`, class: taskBoardDropIndicatorClasses })
+            h("div", { key: `drop-${visibleIndex}`, class: taskBoardDropIndicatorClasses })
           );
         }
         nodes.push(renderCard(card, column));
         return nodes;
       };
-      const cards = column.cards.length > 0 ? (props.swimlanes && props.swimlaneField ? groupBySwimlane(column.cards, props.swimlanes, props.swimlaneField).map(
-        (group) => h(
-          "div",
-          {
-            key: String(group.swimlane.id),
-            class: kanbanSwimlaneClasses,
-            "data-tiger-kanban-swimlane": "",
-            "data-tiger-kanban-swimlane-id": String(group.swimlane.id)
-          },
-          [
-            h("div", { class: kanbanSwimlaneHeaderClasses }, [
-              group.swimlane.color ? h("span", {
-                class: kanbanSwimlaneDotClasses,
-                style: { backgroundColor: group.swimlane.color }
-              }) : null,
-              h("span", null, group.swimlane.label),
+      let cards;
+      if (viewColumn.groups && viewColumn.groups.length > 0) {
+        let offset = 0;
+        cards = viewColumn.groups.map((group) => {
+          const prefix = offset;
+          if (!group.swimlane.collapsed) offset += group.cards.length;
+          return h(
+            "div",
+            {
+              key: String(group.swimlane.id),
+              class: kanbanSwimlaneClasses,
+              "data-tiger-kanban-swimlane": "",
+              "data-tiger-kanban-swimlane-id": String(group.swimlane.id)
+            },
+            [
               h(
-                "span",
+                "button",
                 {
-                  class: "ml-auto text-xs text-[var(--tiger-text-muted,#6b7280)]"
+                  type: "button",
+                  class: kanbanSwimlaneHeaderClasses,
+                  "aria-expanded": !group.swimlane.collapsed,
+                  onClick: () => toggleSwimlane(group.swimlane.id, !group.swimlane.collapsed)
                 },
-                String(group.cards.length)
-              )
-            ]),
-            h(
-              "div",
-              {
-                class: group.swimlane.collapsed ? kanbanSwimlaneCollapsedClasses : ""
-              },
-              group.cards.flatMap(
-                (card) => renderCardNode(
-                  card,
-                  column.cards.findIndex((item) => item.id === card.id)
-                )
-              )
-            )
-          ]
-        )
-      ) : column.cards.flatMap((card, i) => renderCardNode(card, i))).concat(
-        isDropTarget && dragSnap.value.dropIndex >= 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)
-        )
-      ];
+                [
+                  group.swimlane.color ? h("span", {
+                    class: kanbanSwimlaneDotClasses,
+                    style: { backgroundColor: group.swimlane.color }
+                  }) : null,
+                  h("span", null, group.swimlane.label),
+                  h(
+                    "span",
+                    { class: "ms-auto text-xs text-[var(--tiger-text-muted,#6b7280)]" },
+                    String(group.cards.length)
+                  )
+                ]
+              ),
+              group.swimlane.collapsed ? null : group.cards.flatMap((card, i) => renderCardNode(card, prefix + i))
+            ]
+          );
+        });
+        if (isDropTarget && dropIdx >= viewColumn.visibleCards.length) {
+          cards = cards.concat([
+            h("div", { key: "drop-end", class: taskBoardDropIndicatorClasses })
+          ]);
+        }
+      } else if (viewColumn.visibleCards.length > 0) {
+        cards = viewColumn.visibleCards.flatMap((card, i) => renderCardNode(card, i));
+        if (isDropTarget && dropIdx >= viewColumn.visibleCards.length) {
+          cards = cards.concat([
+            h("div", { key: "drop-end", class: taskBoardDropIndicatorClasses })
+          ]);
+        }
+      } else {
+        cards = [
+          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,
+          tabindex: viewColumn.visibleCards.length === 0 ? 0 : void 0,
           onDragover: (e) => {
             e.preventDefault();
             dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
@@ -395,29 +435,26 @@ var TaskBoard = defineComponent({
             e.preventDefault();
             if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
           },
-          onDragleave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget)
+          onDragleave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget),
+          onKeydown: (e) => {
+            if (e.target !== e.currentTarget) return;
+            if (dragCtrl.columnBodyKeyDown(e.key, column)) e.preventDefault();
+          }
         },
         cards
       );
-      const showAddCard = props.allowAddCard || props.onCardAdd;
+      const showAddCard = props.allowAddCard || hasListener("onCardAdd");
+      const atWip = props.enforceWipLimit && column.wipLimit != null && column.wipLimit > 0 && column.cards.length >= column.wipLimit;
       const footer = slots["column-footer"] ? slots["column-footer"]({ column }) : showAddCard ? h(
-        "div",
+        "button",
         {
+          type: "button",
           class: classNames(
             "border-t border-[var(--tiger-border,#e5e7eb)]",
             taskBoardAddCardClasses
           ),
-          role: "button",
-          tabindex: 0,
-          onClick: () => {
-            addCardToColumn(column.id);
-          },
-          onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              addCardToColumn(column.id);
-            }
-          }
+          disabled: atWip,
+          onClick: () => addCardToColumn(column.id)
         },
         [h("span", null, "+"), h("span", null, resolveLocaleText(labels.value.addCardText))]
       ) : null;
@@ -441,28 +478,22 @@ var TaskBoard = defineComponent({
       );
     };
     return () => {
-      const children = visibleColumns.value.map((col, i) => renderColumnNode(col, i));
+      const children = view.value.columns.map((col) => renderColumnNode(col));
       if (props.allowAddColumn) {
         children.push(
           h(
-            "div",
+            "button",
             {
               key: "__add-column",
+              type: "button",
               class: kanbanAddColumnClasses,
-              role: "button",
-              tabindex: 0,
-              onClick: () => emit("column-add"),
-              onKeydown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  emit("column-add");
-                }
-              }
+              onClick: () => addColumn()
             },
             "+ " + resolveLocaleText(labels.value.addColumnText)
           )
         );
       }
+      const liveMessage = dragSnap.value.kbDrag ? labels.value.dragHintText : "";
       return h(
         "div",
         {
@@ -474,7 +505,7 @@ var TaskBoard = defineComponent({
           "aria-label": resolveLocaleText(labels.value.boardAriaLabel),
           "data-tiger-task-board": ""
         },
-        children
+        [h("div", { class: "sr-only", "aria-live": "assertive" }, liveMessage), ...children]
       );
     };
   }