@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-K2U3FEL7.js → chunk-GAWIICIB.js}

@@ -159,6 +159,51 @@ var ImageCropper = vue.defineComponent({
       document.addEventListener("touchmove", onTouchMove, { passive: false });
       document.addEventListener("touchend", onTouchEnd);
     };
+    const updateCropRect = (nextRect) => {
+      cropRect.value = nextRect;
+      emit("crop-change", cropRect.value);
+    };
+    const getKeyboardDelta = (e) => {
+      const step = e.shiftKey ? 10 : 1;
+      switch (e.key) {
+        case "ArrowLeft":
+          return { dx: -step, dy: 0 };
+        case "ArrowRight":
+          return { dx: step, dy: 0 };
+        case "ArrowUp":
+          return { dx: 0, dy: -step };
+        case "ArrowDown":
+          return { dx: 0, dy: step };
+        default:
+          return null;
+      }
+    };
+    const handleMoveKeyDown = (e) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        tigercatCore.moveCropRect(cropRect.value, delta.dx, delta.dy, displayWidth.value, displayHeight.value)
+      );
+    };
+    const handleResizeKeyDown = (e, handle) => {
+      const delta = getKeyboardDelta(e);
+      if (!delta) return;
+      e.preventDefault();
+      updateCropRect(
+        tigercatCore.resizeCropRect(
+          cropRect.value,
+          handle,
+          delta.dx,
+          delta.dy,
+          displayWidth.value,
+          displayHeight.value,
+          props.aspectRatio,
+          props.minWidth,
+          props.minHeight
+        )
+      );
+    };
     const getCropResult = () => {
       return new Promise((resolve, reject) => {
         if (!imageRef.value) {
@@ -282,8 +327,12 @@ var ImageCropper = vue.defineComponent({
           width: `${cr.width}px`,
           height: `${cr.height}px`
         },
+        role: "button",
+        tabindex: 0,
+        "aria-label": "Move crop area",
         onMousedown: (e) => handleMouseDown(e, "move"),
-        onTouchstart: (e) => handleTouchStart(e, "move")
+        onTouchstart: (e) => handleTouchStart(e, "move"),
+        onKeydown: handleMoveKeyDown
       });
       const guideLines = props.guides ? [
         // Horizontal lines
@@ -344,8 +393,12 @@ var ImageCropper = vue.defineComponent({
         return vue.h("div", {
           class: tigercatCore.getCropperHandleClasses(handle),
           style: pos,
+          role: "button",
+          tabindex: 0,
+          "aria-label": `Resize crop area ${handle}`,
           onMousedown: (e) => handleMouseDown(e, "resize", handle),
-          onTouchstart: (e) => handleTouchStart(e, "resize", handle)
+          onTouchstart: (e) => handleTouchStart(e, "resize", handle),
+          onKeydown: (e) => handleResizeKeyDown(e, handle)
         });
       });
       return vue.h(

package/dist/{chunk-LFV3KYO2.js → chunk-GDKYQ7U6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunk6FXYRDYH_js = require('./chunk-6FXYRDYH.js');
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
 var chunk2KDSHEZT_js = require('./chunk-2KDSHEZT.js');
 var chunkDUQ7Q2GO_js = require('./chunk-DUQ7Q2GO.js');
 var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
@@ -151,7 +151,7 @@ var CommentThread = vue.defineComponent({
     const ACTION_BTN = `${BTN_BASE} text-gray-400 hover:text-gray-600 font-normal hover:bg-gray-50`;
     const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-medium hover:bg-[var(--tiger-primary,#2563eb)]/5`;
     const renderActionButton = (label, key, onClick, active) => vue.h(
-      chunkU7CCKZAG_js.Button,
+      chunk5436FG3B_js.Button,
       {
         key,
         size: "sm",
@@ -201,7 +201,7 @@ var CommentThread = vue.defineComponent({
           const actionKey = action.key ?? `${node.id}-action-${index}`;
           actions.push(
             vue.h(
-              chunkU7CCKZAG_js.Button,
+              chunk5436FG3B_js.Button,
               {
                 key: actionKey,
                 size: "sm",
@@ -281,7 +281,7 @@ var CommentThread = vue.defineComponent({
               replyingTo.value === node.id ? vue.h(
                 "div",
                 {
-                  class: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg"
+                  class: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-[var(--tiger-radius-md,0.5rem)]"
                 },
                 [
                   vue.h(chunk6FXYRDYH_js.Textarea, {
@@ -295,7 +295,7 @@ var CommentThread = vue.defineComponent({
                   }),
                   vue.h("div", { class: "flex items-center gap-2 justify-end" }, [
                     vue.h(
-                      chunkU7CCKZAG_js.Button,
+                      chunk5436FG3B_js.Button,
                       {
                         size: "sm",
                         variant: "ghost",
@@ -307,7 +307,7 @@ var CommentThread = vue.defineComponent({
                       { default: () => props.cancelReplyText }
                     ),
                     vue.h(
-                      chunkU7CCKZAG_js.Button,
+                      chunk5436FG3B_js.Button,
                       {
                         size: "sm",
                         variant: "primary",
@@ -319,7 +319,7 @@ var CommentThread = vue.defineComponent({
                 ]
               ) : null,
               hasChildren ? vue.h(
-                chunkU7CCKZAG_js.Button,
+                chunk5436FG3B_js.Button,
                 {
                   size: "sm",
                   variant: "ghost",
@@ -343,7 +343,7 @@ var CommentThread = vue.defineComponent({
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMore ? vue.h(
-                    chunkU7CCKZAG_js.Button,
+                    chunk5436FG3B_js.Button,
                     {
                       size: "sm",
                       variant: "ghost",
@@ -376,6 +376,7 @@ var CommentThread = vue.defineComponent({
           ...attrs,
           class: wrapperClasses.value,
           style: wrapperStyle.value,
+          role: attrs.role ?? "feed",
           "data-tiger-comment-thread": true,
           "aria-label": ariaLabel
         },

package/dist/chunk-GEPFTYKC.js

@@ -0,0 +1,378 @@
+'use strict';
+
+var chunkBZBQUUXF_js = require('./chunk-BZBQUUXF.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
+    },
+    filterText: { type: String, default: "" },
+    hiddenColumns: {
+      type: Array,
+      default: () => []
+    },
+    showCardCount: { type: Boolean, default: false },
+    allowAddCard: { type: Boolean, default: false },
+    allowAddColumn: { type: Boolean, default: false },
+    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", "column-add", "update:columns"],
+  setup(props, { slots, attrs, emit }) {
+    const config = chunkBZBQUUXF_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 visibleColumns = vue.computed(() => {
+      const cols = currentColumns.value;
+      if (!props.filterText && (!props.hiddenColumns || props.hiddenColumns.length === 0)) {
+        return cols;
+      }
+      return tigercatCore.filterColumns(cols, props.filterText || "", props.hiddenColumns);
+    });
+    const updateColumns = (next) => {
+      innerColumns.value = next;
+      emit("update:columns", next);
+    };
+    const dragSnap = vue.ref(tigercatCore.createDefaultDragSnapshot());
+    const boardRef = vue.ref(null);
+    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 dragCtrl = tigercatCore.createTaskBoardDragController(
+      {
+        onStateChange: (s) => {
+          dragSnap.value = s;
+        },
+        applyCardMove,
+        applyColumnMove,
+        getBoardEl: () => boardRef.value,
+        getColumnCount: () => currentColumns.value.length
+      },
+      { draggable: props.draggable, columnDraggable: props.columnDraggable }
+    );
+    vue.watch(
+      () => [props.draggable, props.columnDraggable],
+      () => dragCtrl.setOptions({ draggable: props.draggable, columnDraggable: props.columnDraggable })
+    );
+    vue.onMounted(() => {
+      dragCtrl.init();
+    });
+    vue.onBeforeUnmount(() => {
+      dragCtrl.dispose();
+    });
+    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 = dragSnap.value.drag?.type === "card" && dragSnap.value.drag.id === card.id;
+      const isKbGrabbed = dragSnap.value.kbDrag?.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) => {
+          if (e.dataTransfer) dragCtrl.cardDragStart(e.dataTransfer, card, column);
+        },
+        onDragend: () => dragCtrl.dragEnd(),
+        onTouchstart: (e) => dragCtrl.cardTouchStart(e, e.currentTarget, card, column),
+        onTouchmove: (e) => dragCtrl.cardTouchMove(e),
+        onTouchend: () => dragCtrl.cardTouchEnd(),
+        onKeydown: (e) => {
+          if (dragCtrl.cardKeyDown(e.key, card, column)) e.preventDefault();
+        }
+      };
+      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 = dragSnap.value.drag?.type === "card" && dragSnap.value.dropTargetColumnId === column.id;
+      const isColDragging = dragSnap.value.drag?.type === "column" && dragSnap.value.drag.id === column.id;
+      const wipOver = tigercatCore.isWipExceeded(column);
+      const cardCount = props.showCardCount ? tigercatCore.getColumnCardCount(column) : null;
+      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,
+          // When showCardCount is enabled, use the compact badge style
+          props.showCardCount && cardCount ? null : 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)
+          )
+        ]),
+        // Card count badge (Kanban-style)
+        props.showCardCount && cardCount ? vue.h(
+          "span",
+          {
+            class: tigercatCore.classNames(
+              tigercatCore.kanbanCardCountClasses,
+              wipOver && tigercatCore.taskBoardWipExceededClasses
+            )
+          },
+          cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`
+        ) : null,
+        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) => {
+            if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column, colIndex);
+          },
+          onDragend: () => dragCtrl.dragEnd(),
+          onTouchstart: (e) => dragCtrl.columnTouchStart(e, e.currentTarget, column, colIndex),
+          onTouchmove: (e) => dragCtrl.columnTouchMove(e),
+          onTouchend: () => dragCtrl.columnTouchEnd(),
+          style: props.columnDraggable ? "cursor: grab" : void 0
+        },
+        headerContent
+      );
+      const cards = column.cards.length > 0 ? column.cards.flatMap((card, i) => {
+        const nodes = [];
+        if (isDropTarget && dragSnap.value.dropIndex === i) {
+          nodes.push(vue.h("div", { key: `drop-${i}`, class: tigercatCore.taskBoardDropIndicatorClasses }));
+        }
+        nodes.push(renderCard(card, column));
+        return nodes;
+      }).concat(
+        isDropTarget && dragSnap.value.dropIndex >= 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) => {
+            e.preventDefault();
+            dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
+          },
+          onDragleave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget)
+        },
+        cards
+      );
+      const showAddCard = props.allowAddCard || props.onCardAdd;
+      const footer = slots["column-footer"] ? slots["column-footer"]({ column }) : showAddCard ? vue.h(
+        "div",
+        {
+          class: tigercatCore.classNames(
+            "border-t border-[var(--tiger-border,#e5e7eb)]",
+            tigercatCore.taskBoardAddCardClasses
+          ),
+          role: "button",
+          tabindex: 0,
+          onClick: () => {
+            emit("card-add", column.id);
+          },
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              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: dragSnap.value.drag?.type === "column" ? (e) => {
+            e.preventDefault();
+            dragCtrl.columnDragOver();
+          } : void 0,
+          onDrop: dragSnap.value.drag?.type === "column" ? (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) dragCtrl.columnDrop(e.dataTransfer, e.clientX);
+          } : void 0
+        },
+        [header, body, footer]
+      );
+    };
+    return () => {
+      const children = visibleColumns.value.map((col, i) => renderColumnNode(col, i));
+      if (props.allowAddColumn) {
+        children.push(
+          vue.h(
+            "div",
+            {
+              key: "__add-column",
+              class: tigercatCore.kanbanAddColumnClasses,
+              role: "button",
+              tabindex: 0,
+              onClick: () => emit("column-add"),
+              onKeydown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  emit("column-add");
+                }
+              }
+            },
+            "+ " + tigercatCore.resolveLocaleText(labels.value.addCardText)
+          )
+        );
+      }
+      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": ""
+        },
+        children
+      );
+    };
+  }
+});
+var TaskBoard_default = TaskBoard;
+
+exports.TaskBoard = TaskBoard;
+exports.TaskBoard_default = TaskBoard_default;