@expcat/tigercat-vue 1.0.0 → 1.0.7

package/dist/chunk-CXJUEG75.js

@@ -1,331 +0,0 @@
-'use strict';
-
-var chunkV4PBWEAU_js = require('./chunk-V4PBWEAU.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
-
-var Kanban = vue.defineComponent({
-  name: "TigerKanban",
-  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: true },
-    allowAddCard: { type: Boolean, default: true },
-    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", "update:columns", "card-add", "column-add"],
-  setup(props, { emit, attrs, slots }) {
-    const config = chunkV4PBWEAU_js.useTigerConfig();
-    const boardRef = vue.ref(null);
-    const internalColumns = vue.ref(props.defaultColumns ?? []);
-    const isControlled = vue.computed(() => props.columns !== void 0);
-    const rawColumns = vue.computed(() => isControlled.value ? props.columns : internalColumns.value);
-    const visibleColumns = vue.computed(
-      () => tigercatCore.filterColumns(rawColumns.value, props.filterText || "", props.hiddenColumns)
-    );
-    vue.watch(
-      () => props.columns,
-      (v) => {
-        if (v) internalColumns.value = v;
-      }
-    );
-    function updateColumns(cols) {
-      if (!isControlled.value) internalColumns.value = cols;
-      emit("update:columns", cols);
-    }
-    const merged = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
-    const labels = vue.computed(() => tigercatCore.getTaskBoardLabels(merged.value));
-    const dragState = vue.ref(null);
-    const dropTargetCol = vue.ref(null);
-    const dropTargetIdx = vue.ref(-1);
-    const dragType = vue.computed(() => dragState.value?.type ?? null);
-    function onCardDragStart(e, card, colId, idx) {
-      if (!props.draggable || !e.dataTransfer) return;
-      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createCardDragData(card.id, colId, idx));
-      dragState.value = { type: "card", id: card.id, fromColumnId: colId, fromIndex: idx };
-    }
-    function onColumnDragStart(e, colId, idx) {
-      if (!props.columnDraggable || !e.dataTransfer) return;
-      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createColumnDragData(colId, idx));
-      dragState.value = { type: "column", id: colId, fromIndex: idx };
-    }
-    function onDragOver(e, colId) {
-      e.preventDefault();
-      if (!dragState.value) return;
-      dropTargetCol.value = colId;
-      if (dragState.value.type === "card") {
-        const colEl = e.currentTarget.querySelector("[data-kanban-body]");
-        if (colEl) {
-          const cards = Array.from(colEl.querySelectorAll("[data-kanban-card]"));
-          const rects = cards.map((c) => c.getBoundingClientRect());
-          dropTargetIdx.value = tigercatCore.getDropIndex(e.clientY, rects);
-        }
-      }
-    }
-    function onColumnDragOver(e) {
-      e.preventDefault();
-      if (!dragState.value || dragState.value.type !== "column") return;
-      const boardEl = boardRef.value;
-      if (!boardEl) return;
-      const cols = Array.from(boardEl.querySelectorAll("[data-kanban-column]"));
-      const rects = cols.map((c) => c.getBoundingClientRect());
-      dropTargetIdx.value = tigercatCore.getColumnDropIndex(e.clientX, rects);
-    }
-    async function onDrop(e) {
-      e.preventDefault();
-      if (!dragState.value || !e.dataTransfer) return;
-      const data = tigercatCore.parseDragData(e.dataTransfer);
-      if (!data) return;
-      const cols = rawColumns.value;
-      if (data.type === "card" && dropTargetCol.value != null) {
-        if (props.beforeCardMove) {
-          const evt = {
-            cardId: data.cardId,
-            fromColumnId: data.columnId,
-            toColumnId: dropTargetCol.value,
-            fromIndex: data.index,
-            toIndex: dropTargetIdx.value
-          };
-          const ok = await props.beforeCardMove(evt);
-          if (!ok) {
-            resetDrag();
-            return;
-          }
-        }
-        const result = tigercatCore.moveCard(
-          cols,
-          data.cardId,
-          data.columnId,
-          dropTargetCol.value,
-          dropTargetIdx.value,
-          { enforceWipLimit: props.enforceWipLimit }
-        );
-        if (result) {
-          updateColumns(result.columns);
-          emit("card-move", result.event);
-        }
-      } else if (data.type === "column") {
-        if (props.beforeColumnMove) {
-          const evt = {
-            columnId: data.columnId,
-            fromIndex: data.index,
-            toIndex: dropTargetIdx.value
-          };
-          const ok = await props.beforeColumnMove(evt);
-          if (!ok) {
-            resetDrag();
-            return;
-          }
-        }
-        const result = tigercatCore.reorderColumns(cols, data.index, dropTargetIdx.value);
-        if (result) {
-          updateColumns(result.columns);
-          emit("column-move", result.event);
-        }
-      }
-      resetDrag();
-    }
-    function onDragEnd() {
-      resetDrag();
-    }
-    function resetDrag() {
-      dragState.value = null;
-      dropTargetCol.value = null;
-      dropTargetIdx.value = -1;
-    }
-    const containerClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.getKanbanContainerClasses(props.className), tigercatCore.coerceClassValue(attrs.class))
-    );
-    const containerStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
-    return () => {
-      const children = visibleColumns.value.map((col, colIdx) => {
-        const wipExceeded = tigercatCore.isWipExceeded(col);
-        const cardCount = tigercatCore.getColumnCardCount(col);
-        const isDragOverCol = dropTargetCol.value === col.id;
-        const isColDragging = dragState.value?.type === "column" && dragState.value.id === col.id;
-        const headerContent = [
-          slots["column-header"] ? slots["column-header"]({ column: col }) : vue.h("span", {}, tigercatCore.resolveLocaleText(col.title)),
-          props.showCardCount ? vue.h(
-            "span",
-            {
-              class: tigercatCore.classNames(
-                tigercatCore.kanbanCardCountClasses,
-                wipExceeded && tigercatCore.taskBoardWipExceededClasses
-              )
-            },
-            cardCount.limit ? `${cardCount.count}/${cardCount.limit}` : `${cardCount.count}`
-          ) : null
-        ];
-        const header = vue.h(
-          "div",
-          {
-            class: tigercatCore.classNames(
-              tigercatCore.taskBoardColumnHeaderClasses,
-              wipExceeded && tigercatCore.taskBoardWipExceededClasses
-            )
-          },
-          headerContent
-        );
-        const cardEls = col.cards.map((card, cardIdx) => {
-          const isCardDragging = dragState.value?.type === "card" && dragState.value.id === card.id;
-          return vue.h(
-            "div",
-            {
-              key: card.id,
-              class: tigercatCore.classNames(
-                tigercatCore.taskBoardCardClasses,
-                isCardDragging && tigercatCore.taskBoardCardDraggingClasses
-              ),
-              draggable: props.draggable,
-              "data-kanban-card": "",
-              onDragstart: (e) => onCardDragStart(e, card, col.id, cardIdx)
-            },
-            slots.card ? slots.card({ card, columnId: col.id }) : [
-              vue.h("div", { class: "font-medium text-sm" }, tigercatCore.resolveLocaleText(card.title)),
-              card.description ? vue.h(
-                "div",
-                { class: "text-xs text-[var(--tiger-text-muted,#6b7280)] mt-1" },
-                card.description
-              ) : null
-            ]
-          );
-        });
-        if (isDragOverCol && dragType.value === "card" && dropTargetIdx.value >= 0) {
-          cardEls.splice(
-            dropTargetIdx.value,
-            0,
-            vue.h("div", {
-              key: "__drop-indicator",
-              class: tigercatCore.taskBoardDropIndicatorClasses
-            })
-          );
-        }
-        const body = vue.h(
-          "div",
-          {
-            class: tigercatCore.taskBoardColumnBodyClasses,
-            "data-kanban-body": ""
-          },
-          cardEls.length > 0 ? cardEls : [
-            vue.h(
-              "div",
-              { class: tigercatCore.taskBoardEmptyClasses },
-              tigercatCore.resolveLocaleText(labels.value.emptyColumnText)
-            )
-          ]
-        );
-        const addBtn = props.allowAddCard ? vue.h(
-          "div",
-          {
-            class: tigercatCore.kanbanAddCardClasses,
-            role: "button",
-            tabindex: 0,
-            onClick: () => {
-              props.onCardAdd?.(col.id);
-              emit("card-add", col.id);
-            },
-            onKeydown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                props.onCardAdd?.(col.id);
-                emit("card-add", col.id);
-              }
-            }
-          },
-          "+ " + tigercatCore.resolveLocaleText(labels.value.addCardText)
-        ) : null;
-        return vue.h(
-          "div",
-          {
-            key: col.id,
-            class: tigercatCore.classNames(
-              tigercatCore.taskBoardColumnClasses,
-              isDragOverCol && dragType.value === "card" && tigercatCore.taskBoardColumnDropTargetClasses,
-              isColDragging && tigercatCore.taskBoardColumnDraggingClasses
-            ),
-            "data-kanban-column": "",
-            draggable: props.columnDraggable,
-            onDragstart: (e) => onColumnDragStart(e, col.id, colIdx),
-            onDragover: (e) => onDragOver(e, col.id),
-            onDrop,
-            onDragend: onDragEnd
-          },
-          [header, body, addBtn]
-        );
-      });
-      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",
-        {
-          ref: boardRef,
-          class: containerClasses.value,
-          style: containerStyle.value,
-          role: "region",
-          "aria-label": "Kanban board",
-          onDragover: onColumnDragOver
-        },
-        children
-      );
-    };
-  }
-});
-var Kanban_default = Kanban;
-
-exports.Kanban = Kanban;
-exports.Kanban_default = Kanban_default;