@expcat/tigercat-vue 0.3.69 → 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 };

package/dist/chunk-HTMTOXUO.mjs

@@ -0,0 +1,186 @@
+import { Modal } from './chunk-P47EXOAW.mjs';
+import { ImageCropper } from './chunk-T77L326M.mjs';
+import { Button } from './chunk-D6MR5YRE.mjs';
+import { defineComponent, ref, computed, h } from 'vue';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
+
+var CropUpload = defineComponent({
+  name: "TigerCropUpload",
+  inheritAttrs: false,
+  props: {
+    accept: { type: String, default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    maxSize: { type: Number, default: void 0 },
+    cropperProps: {
+      type: Object,
+      default: void 0
+    },
+    modalTitle: { type: String, default: "\u88C1\u526A\u56FE\u7247" },
+    modalWidth: { type: Number, default: 520 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["crop-complete", "error"],
+  setup(props, { slots, emit, attrs }) {
+    const fileInputRef = ref(null);
+    const modalVisible = ref(false);
+    const imageSrc = ref("");
+    const cropperRef = ref(null);
+    const cropping = ref(false);
+    const handleTriggerClick = () => {
+      if (props.disabled) return;
+      fileInputRef.value?.click();
+    };
+    const handleFileChange = (e) => {
+      const input = e.target;
+      const file = input.files?.[0];
+      if (!file) return;
+      if (props.maxSize && file.size > props.maxSize) {
+        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+        input.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        imageSrc.value = ev.target?.result;
+        modalVisible.value = true;
+      };
+      reader.readAsDataURL(file);
+      input.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!cropperRef.value) return;
+      cropping.value = true;
+      try {
+        const result = await cropperRef.value.getCropResult();
+        emit("crop-complete", result);
+        modalVisible.value = false;
+      } catch (err) {
+        emit("error", err);
+      } finally {
+        cropping.value = false;
+      }
+    };
+    const handleCancel = () => {
+      modalVisible.value = false;
+      imageSrc.value = "";
+    };
+    const triggerClasses = computed(
+      () => classNames(
+        props.disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const triggerStyle = computed(
+      () => mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const fileInput = h("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: props.accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      });
+      const trigger = slots.default ? h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        slots.default()
+      ) : h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        [
+          h(
+            "svg",
+            {
+              class: "w-5 h-5",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            },
+            [
+              h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: uploadPlusIconPath
+              })
+            ]
+          ),
+          h("span", null, "\u9009\u62E9\u56FE\u7247")
+        ]
+      );
+      const modal = h(
+        Modal,
+        {
+          visible: modalVisible.value,
+          size: "lg",
+          title: props.modalTitle,
+          closable: true,
+          maskClosable: false,
+          showDefaultFooter: false,
+          "onUpdate:visible": (val) => {
+            if (!val) handleCancel();
+          }
+        },
+        {
+          default: () => imageSrc.value ? h(ImageCropper, {
+            ref: cropperRef,
+            src: imageSrc.value,
+            ...props.cropperProps
+          }) : null,
+          footer: ({ cancel }) => h("div", { class: modalFooterClasses }, [
+            h(Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
+            h(
+              Button,
+              { onClick: handleConfirm, loading: cropping.value },
+              { default: () => "\u786E\u8BA4\u88C1\u526A" }
+            )
+          ])
+        }
+      );
+      return h("div", { class: "tiger-crop-upload inline-block" }, [fileInput, trigger, modal]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+export { CropUpload, CropUpload_default };