@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-CQPHZU3H.mjs

@@ -0,0 +1,73 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, h } from 'vue';
+import { classNames, getInfiniteScrollContainerClasses, coerceClassValue, infiniteScrollLoaderClasses, infiniteScrollEndClasses, shouldLoadMore } from '@expcat/tigercat-core';
+
+// src/components/InfiniteScroll.ts
+var InfiniteScroll = defineComponent({
+  name: "TigerInfiniteScroll",
+  inheritAttrs: false,
+  props: {
+    hasMore: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    threshold: { type: Number, default: 100 },
+    loadingText: { type: String, default: "Loading..." },
+    endText: { type: String, default: "No more data" },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    inverse: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["load-more"],
+  setup(props, { emit, slots, attrs }) {
+    const containerRef = ref(null);
+    const containerClasses = computed(
+      () => classNames(
+        getInfiniteScrollContainerClasses(props.direction, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    function checkScroll() {
+      if (props.disabled || props.loading || !props.hasMore) return;
+      const el = containerRef.value;
+      if (!el) return;
+      if (shouldLoadMore(el, props.threshold, props.direction, props.inverse)) {
+        emit("load-more");
+      }
+    }
+    onMounted(() => {
+      containerRef.value?.addEventListener("scroll", checkScroll, {
+        passive: true
+      });
+    });
+    onBeforeUnmount(() => {
+      containerRef.value?.removeEventListener("scroll", checkScroll);
+    });
+    return () => {
+      const content = slots.default?.();
+      const loader = props.loading ? h(
+        "div",
+        {
+          class: infiniteScrollLoaderClasses,
+          role: "status",
+          "aria-live": "polite"
+        },
+        slots.loader?.() ?? props.loadingText
+      ) : null;
+      const end = !props.hasMore && !props.loading ? h("div", { class: infiniteScrollEndClasses }, slots.end?.() ?? props.endText) : null;
+      const children = props.inverse ? [loader, content, end] : [content, loader, end];
+      return h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses.value
+        },
+        children
+      );
+    };
+  }
+});
+var InfiniteScroll_default = InfiniteScroll;
+
+export { InfiniteScroll, InfiniteScroll_default };

package/dist/chunk-CXJUEG75.js

@@ -0,0 +1,331 @@
+'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;

package/dist/{chunk-ATOLZW76.js → chunk-D6AWPRGV.js}

@@ -75,6 +75,27 @@ var Form = vue.defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Whether the form is in a loading state (prevents submit)
+     * @default false
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // v0.6.0 props
+    fieldDependencies: {
+      type: Object,
+      default: void 0
+    },
+    undoable: {
+      type: Boolean,
+      default: false
+    },
+    maxHistorySize: {
+      type: Number,
+      default: 50
     }
   },
   emits: {
@@ -90,6 +111,9 @@ var Form = vue.defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = vue.reactive([]);
     const fieldRules = vue.reactive({});
+    const history = vue.ref(
+      tigercatCore.createFormHistory(props.model ?? {}, props.maxHistorySize)
+    );
     const registerFieldRules = (fieldName, rules) => {
       if (!fieldName) {
         return;
@@ -120,24 +144,29 @@ var Form = vue.defineComponent({
     };
     const validateField = async (fieldName, rulesOverride, trigger) => {
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
-      if (!effectiveFieldRules) {
-        return;
-      }
-      const error = await runFieldValidation(fieldName, rulesOverride, trigger);
-      const existingIndex = errors.findIndex((e) => e.field === fieldName);
-      const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
-      if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
-        if (existingIndex !== -1) {
-          errors.splice(existingIndex, 1);
+      if (effectiveFieldRules) {
+        const error = await runFieldValidation(fieldName, rulesOverride, trigger);
+        const existingIndex = errors.findIndex((e) => e.field === fieldName);
+        const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
+        if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
+          if (existingIndex !== -1) {
+            errors.splice(existingIndex, 1);
+          }
+          if (error) {
+            errors.push({
+              field: fieldName,
+              message: error
+            });
+          }
         }
-        if (error) {
-          errors.push({
-            field: fieldName,
-            message: error
-          });
+        emit("validate", fieldName, !error, error || void 0);
+      }
+      if (props.fieldDependencies) {
+        const dependents = tigercatCore.getDependentFields(fieldName, props.fieldDependencies);
+        for (const dep of dependents) {
+          await validateField(dep);
         }
       }
-      emit("validate", fieldName, !error, error || void 0);
     };
     const validate = async () => {
       errors.splice(0, errors.length);
@@ -191,8 +220,44 @@ var Form = vue.defineComponent({
     const resetFields = () => {
       clearValidate();
     };
+    const addField = (fieldName, defaultValue) => {
+      if (props.model && fieldName) {
+        props.model[fieldName] = defaultValue ?? null;
+      }
+    };
+    const removeField = (fieldName) => {
+      if (props.model && fieldName) {
+        delete props.model[fieldName];
+        clearValidate(fieldName);
+      }
+    };
+    const snapshotHistory = () => {
+      if (!props.undoable || !props.model) return;
+      history.value = tigercatCore.pushFormHistory(history.value, props.model);
+    };
+    const undo = () => {
+      if (!props.undoable) return;
+      const result = tigercatCore.undoFormHistory(history.value);
+      if (result && props.model) {
+        history.value = result;
+        Object.keys(props.model).forEach((k) => delete props.model[k]);
+        Object.assign(props.model, { ...result.present });
+      }
+    };
+    const redo = () => {
+      if (!props.undoable) return;
+      const result = tigercatCore.redoFormHistory(history.value);
+      if (result && props.model) {
+        history.value = result;
+        Object.keys(props.model).forEach((k) => delete props.model[k]);
+        Object.assign(props.model, { ...result.present });
+      }
+    };
+    const canUndoNow = vue.computed(() => props.undoable && tigercatCore.canUndo(history.value));
+    const canRedoNow = vue.computed(() => props.undoable && tigercatCore.canRedo(history.value));
     const handleSubmit = async (event) => {
       event.preventDefault();
+      if (props.loading) return;
       const valid = await validate();
       emit("submit", { valid, values: props.model, errors });
     };
@@ -206,6 +271,7 @@ var Form = vue.defineComponent({
       inlineMessage: props.inlineMessage,
       showRequiredAsterisk: props.showRequiredAsterisk,
       disabled: props.disabled,
+      loading: props.loading,
       errors,
       registerFieldRules,
       validateField,
@@ -217,13 +283,21 @@ var Form = vue.defineComponent({
       validateFields,
       validateField,
       clearValidate,
-      resetFields
+      resetFields,
+      addField,
+      removeField,
+      undo,
+      redo,
+      snapshotHistory,
+      canUndo: canUndoNow,
+      canRedo: canRedoNow
     });
     const formClasses = vue.computed(() => {
       return tigercatCore.classNames(
         "tiger-form",
         `tiger-form--label-${props.labelPosition}`,
-        props.disabled && "tiger-form--disabled"
+        props.disabled && "tiger-form--disabled",
+        props.loading && "tiger-form--loading"
       );
     });
     return () => {

package/dist/{chunk-MYF3ZRV3.mjs → chunk-DBPY5M7Y.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, computed, h } from 'vue';
-import { getDescriptionsClasses, getDescriptionsTableClasses, mergeStyleValues, classNames, descriptionsWrapperClasses, coerceClassValue, descriptionsHeaderClasses, descriptionsTitleClasses, descriptionsExtraClasses, groupItemsIntoRows, descriptionsVerticalWrapperClasses, getDescriptionsLabelClasses, getDescriptionsContentClasses, getDescriptionsVerticalItemClasses } from '@expcat/tigercat-core';
+import { defineComponent, ref, onMounted, onUnmounted, computed, h } from 'vue';
+import { resolveResponsiveValue, getDescriptionsClasses, getDescriptionsTableClasses, mergeStyleValues, classNames, descriptionsWrapperClasses, coerceClassValue, descriptionsHeaderClasses, descriptionsTitleClasses, descriptionsExtraClasses, groupItemsIntoRows, descriptionsVerticalWrapperClasses, getDescriptionsLabelClasses, getDescriptionsContentClasses, getDescriptionsVerticalItemClasses } from '@expcat/tigercat-core';
 
 // src/components/Descriptions.ts
 var Descriptions = defineComponent({
@@ -29,13 +29,12 @@ var Descriptions = defineComponent({
       default: false
     },
     /**
-     * Number of columns per row
+     * Number of columns per row (number or responsive object)
      * @default 3
      */
     column: {
-      type: Number,
-      default: 3,
-      validator: (value) => value > 0
+      type: [Number, Object],
+      default: 3
     },
     /**
      * Descriptions size
@@ -92,6 +91,22 @@ var Descriptions = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 1024);
+    let onResize;
+    if (typeof window !== "undefined" && typeof props.column === "object") {
+      onResize = () => {
+        windowWidth.value = window.innerWidth;
+      };
+    }
+    onMounted(() => {
+      if (onResize) window.addEventListener("resize", onResize);
+    });
+    onUnmounted(() => {
+      if (onResize) window.removeEventListener("resize", onResize);
+    });
+    const effectiveColumn = computed(() => {
+      return resolveResponsiveValue(props.column, windowWidth.value, 3);
+    });
     const descriptionsClasses = computed(() => {
       return getDescriptionsClasses(props.size);
     });
@@ -116,7 +131,7 @@ var Descriptions = defineComponent({
       if (items.length === 0 && !slots.default) {
         return null;
       }
-      const rows = groupItemsIntoRows(items, props.column);
+      const rows = groupItemsIntoRows(items, effectiveColumn.value);
       return h("table", { class: tableClasses.value }, [
         h(
           "tbody",
@@ -128,7 +143,7 @@ var Descriptions = defineComponent({
     function renderRow(rowItems) {
       const cells = [];
       rowItems.forEach((item) => {
-        const span = Math.min(item.span || 1, props.column);
+        const span = Math.min(item.span || 1, effectiveColumn.value);
         const labelClass = classNames(
           getDescriptionsLabelClasses(props.bordered, props.size, props.layout),
           item.labelClassName