@expcat/tigercat-vue 2.0.19 → 2.1.1

package/dist/chunk-AY7CGLMO.mjs

@@ -0,0 +1,368 @@
+// src/components/ImageCompare.ts
+import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
+import {
+  composeComponentClasses,
+  getImageCompareAfterClasses,
+  getImageCompareBeforeClasses,
+  getImageCompareClipStyle,
+  getImageCompareHandleClasses,
+  getImageCompareHandleStyle,
+  getImageCompareImgClasses,
+  getImageCompareKeyboardPosition,
+  getImageCompareKnobClasses,
+  getImageCompareLineClasses,
+  getImageComparePositionFromPointer,
+  getImageCompareRootClasses,
+  getImageCompareRootStyle,
+  getImageComparePointerClientPoint,
+  isImageCompareInteractiveTarget,
+  isImageCompareVertical,
+  mergeStyleValues,
+  resolveImageCompareAriaLabel,
+  resolveImageCompareFit,
+  resolveImageCompareOrientation,
+  resolveImageComparePosition,
+  resolveImageCompareStep
+} from "@expcat/tigercat-core";
+function callAttrHandler(handler, event) {
+  if (typeof handler === "function") {
+    const listener = handler;
+    listener(event);
+  }
+}
+var ImageCompare = defineComponent({
+  name: "TigerImageCompare",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Before (starting) image URL. The `before` slot takes precedence when provided.
+     */
+    beforeSrc: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * After (ending) image URL. The `after` slot takes precedence when provided.
+     */
+    afterSrc: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Alternative text for the before image
+     * @default ''
+     */
+    beforeAlt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alternative text for the after image
+     * @default ''
+     */
+    afterAlt: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Object-fit applied to the before/after `<img>` elements
+     * @default 'cover'
+     */
+    fit: {
+      type: String,
+      default: "cover"
+    },
+    /**
+     * Handle position as a percentage of the before image that is visible
+     * (controlled mode)
+     */
+    position: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Initial handle position (uncontrolled mode)
+     * @default 50
+     */
+    defaultPosition: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Comparison axis
+     * @default 'horizontal'
+     */
+    orientation: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * Keyboard and pointer snap increment, in percentage points
+     * @default 1
+     */
+    step: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Whether pointer and keyboard adjustment are disabled
+     * @default false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Root width (CSS value). A number is treated as pixels.
+     */
+    width: {
+      type: [Number, String],
+      default: void 0
+    },
+    /**
+     * Root height (CSS value). A number is treated as pixels.
+     */
+    height: {
+      type: [Number, String],
+      default: void 0
+    },
+    /**
+     * Accessible name for the comparison handle
+     * @default 'Image comparison'
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    /**
+     * Emitted when the handle position changes (for v-model:position)
+     */
+    "update:position": (value) => typeof value === "number",
+    /**
+     * Emitted when the handle position changes
+     */
+    change: (value) => typeof value === "number"
+  },
+  setup(props, { slots, emit, attrs }) {
+    const rootRef = ref(null);
+    const handleRef = ref(null);
+    const dragging = ref(false);
+    const internalPosition = ref(
+      resolveImageComparePosition(props.position ?? props.defaultPosition, props.step)
+    );
+    watch(
+      () => props.position,
+      (value) => {
+        if (value !== void 0) {
+          internalPosition.value = resolveImageComparePosition(value, props.step);
+        }
+      }
+    );
+    const currentPosition = () => resolveImageComparePosition(
+      props.position !== void 0 ? props.position : internalPosition.value,
+      props.step
+    );
+    const commit = (next) => {
+      const resolved = resolveImageComparePosition(next, props.step);
+      if (props.position === void 0) {
+        internalPosition.value = resolved;
+      }
+      emit("update:position", resolved);
+      emit("change", resolved);
+    };
+    const positionFromEvent = (event) => {
+      const root = rootRef.value;
+      const point = getImageComparePointerClientPoint(event);
+      if (!root || !point) return null;
+      return getImageComparePositionFromPointer({
+        clientX: point.clientX,
+        clientY: point.clientY,
+        rect: root.getBoundingClientRect(),
+        orientation: props.orientation,
+        step: props.step
+      });
+    };
+    const handleMove = (event) => {
+      if (props.disabled || !dragging.value) return;
+      const next = positionFromEvent(event);
+      if (next === null) return;
+      commit(next);
+    };
+    const handleEnd = () => {
+      dragging.value = false;
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleEnd);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("touchend", handleEnd);
+    };
+    const startDrag = (event) => {
+      if (props.disabled) return;
+      if ("button" in event && event.button !== 0) return;
+      if (isImageCompareInteractiveTarget(event.target, handleRef.value)) return;
+      event.preventDefault();
+      const alreadyDragging = dragging.value;
+      dragging.value = true;
+      const next = positionFromEvent(event);
+      if (next !== null) commit(next);
+      handleRef.value?.focus();
+      if (alreadyDragging) return;
+      document.addEventListener("mousemove", handleMove);
+      document.addEventListener("mouseup", handleEnd);
+      document.addEventListener("touchmove", handleMove);
+      document.addEventListener("touchend", handleEnd);
+    };
+    onBeforeUnmount(handleEnd);
+    const renderPaneContent = (slot, src, alt) => {
+      if (slot) return slot();
+      if (!src) return null;
+      return h("img", {
+        src,
+        alt,
+        class: getImageCompareImgClasses(resolveImageCompareFit(props.fit)),
+        draggable: false
+      });
+    };
+    return () => {
+      const attrsRecord = attrs;
+      const orientation = resolveImageCompareOrientation(props.orientation);
+      const step = resolveImageCompareStep(props.step);
+      const position = currentPosition();
+      const vertical = isImageCompareVertical(orientation);
+      const attrAriaLabel = typeof attrsRecord["aria-label"] === "string" ? attrsRecord["aria-label"] : void 0;
+      const ariaLabel = resolveImageCompareAriaLabel(attrAriaLabel ?? props.ariaLabel);
+      const {
+        class: _class,
+        style: _style,
+        "aria-label": _ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        onMousedown,
+        onMouseDown,
+        onTouchstart,
+        onTouchStart,
+        ...restAttrs
+      } = attrsRecord;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: rootRef,
+          class: composeComponentClasses(
+            getImageCompareRootClasses({
+              orientation,
+              disabled: props.disabled,
+              className: props.className
+            }),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(
+            getImageCompareRootStyle({
+              position,
+              step,
+              width: props.width,
+              height: props.height
+            }),
+            attrsRecord.style,
+            props.style
+          ),
+          "data-image-compare": "",
+          "data-image-compare-orientation": orientation,
+          "data-image-compare-position": String(position),
+          "data-image-compare-disabled": props.disabled ? "true" : "false",
+          "data-image-compare-dragging": dragging.value ? "true" : "false",
+          onMousedown: (event) => {
+            startDrag(event);
+            callAttrHandler(onMousedown ?? onMouseDown, event);
+          },
+          onTouchstart: (event) => {
+            startDrag(event);
+            callAttrHandler(onTouchstart ?? onTouchStart, event);
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              class: getImageCompareAfterClasses(),
+              "data-image-compare-after": ""
+            },
+            [renderPaneContent(slots.after, props.afterSrc, props.afterAlt)]
+          ),
+          h(
+            "div",
+            {
+              class: getImageCompareBeforeClasses(),
+              style: getImageCompareClipStyle(position, orientation, step),
+              "data-image-compare-before": ""
+            },
+            [renderPaneContent(slots.before, props.beforeSrc, props.beforeAlt)]
+          ),
+          h(
+            "div",
+            {
+              ref: handleRef,
+              class: getImageCompareHandleClasses({
+                orientation,
+                disabled: props.disabled
+              }),
+              style: getImageCompareHandleStyle(position, orientation, step),
+              "data-image-compare-handle": "",
+              role: "slider",
+              tabindex: props.disabled ? -1 : 0,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              "aria-describedby": ariaDescribedby,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": position,
+              "aria-valuetext": `${position}%`,
+              "aria-orientation": vertical ? "vertical" : "horizontal",
+              "aria-disabled": props.disabled,
+              onKeydown: (event) => {
+                if (props.disabled) return;
+                const next = getImageCompareKeyboardPosition(event.key, position, step);
+                if (next === null) return;
+                event.preventDefault();
+                commit(next);
+              }
+            },
+            [
+              h("div", {
+                class: getImageCompareLineClasses(orientation),
+                "data-image-compare-line": "",
+                "aria-hidden": "true"
+              }),
+              h("div", {
+                class: getImageCompareKnobClasses(),
+                "data-image-compare-knob": "",
+                "aria-hidden": "true"
+              })
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var ImageCompare_default = ImageCompare;
+
+export {
+  ImageCompare,
+  ImageCompare_default
+};

package/dist/chunk-BBNCP55O.mjs

@@ -0,0 +1,156 @@
+// src/components/Highlight.ts
+import { Comment, defineComponent, h } from "vue";
+import {
+  composeComponentClasses,
+  getHighlightMarkClasses,
+  getHighlightRootClasses,
+  getHighlightSegments,
+  mergeStyleValues,
+  resolveHighlightText
+} from "@expcat/tigercat-core";
+function flattenVueText(input) {
+  if (input == null || typeof input === "boolean") return "";
+  if (typeof input === "string" || typeof input === "number") return String(input);
+  if (typeof input === "function") {
+    return flattenVueText(input());
+  }
+  if (Array.isArray(input)) {
+    let out = "";
+    for (const item of input) out += flattenVueText(item);
+    return out;
+  }
+  if (typeof input !== "object") return "";
+  const node = input;
+  if (node.type === Comment) return "";
+  if (typeof node.children === "string" || typeof node.children === "number") {
+    return String(node.children);
+  }
+  if (typeof node.children === "function") {
+    return flattenVueText(node.children());
+  }
+  if (Array.isArray(node.children)) {
+    return flattenVueText(node.children);
+  }
+  if (node.children && typeof node.children === "object") {
+    const slots = node.children;
+    if (typeof slots.default === "function") {
+      return flattenVueText(slots.default());
+    }
+  }
+  return "";
+}
+var Highlight = defineComponent({
+  name: "TigerHighlight",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Source text to search. When omitted, the default slot is flattened to a string.
+     */
+    text: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Keyword string(s) and/or regular expression(s) to highlight.
+     */
+    keywords: {
+      type: [String, Array, RegExp],
+      default: void 0
+    },
+    /**
+     * Match case for string keywords. Regular expressions keep their own `i` flag.
+     * @default false
+     */
+    caseSensitive: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Highlight every occurrence. When false, only the first match of each keyword.
+     * @default true
+     */
+    global: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS classes on highlighted `mark` elements
+     */
+    highlightClassName: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles on highlighted `mark` elements
+     */
+    highlightStyle: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const attrsRecord = attrs;
+      const source = resolveHighlightText(props.text, flattenVueText(slots.default?.()));
+      const segments = getHighlightSegments(source, props.keywords, {
+        caseSensitive: props.caseSensitive,
+        global: props.global
+      });
+      const markClasses = getHighlightMarkClasses(props.highlightClassName);
+      const markStyle = mergeStyleValues(props.highlightStyle);
+      const children = [];
+      for (const segment of segments) {
+        if (segment.highlighted) {
+          children.push(
+            h(
+              "mark",
+              {
+                class: markClasses,
+                style: markStyle,
+                "data-highlight-mark": ""
+              },
+              segment.text
+            )
+          );
+        } else {
+          children.push(segment.text);
+        }
+      }
+      return h(
+        "span",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getHighlightRootClasses(props.className),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-highlight": "",
+          "data-highlight-case-sensitive": props.caseSensitive ? "true" : "false",
+          "data-highlight-global": props.global ? "true" : "false"
+        },
+        children
+      );
+    };
+  }
+});
+var Highlight_default = Highlight;
+
+export {
+  Highlight,
+  Highlight_default
+};

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

@@ -30,11 +30,14 @@ import {
   kanbanSwimlaneCollapsedClasses,
   kanbanAddColumnClasses,
   filterColumns,
+  filterCards,
   groupBySwimlane,
   getColumnCardCount,
   moveCard,
+  mapVisibleCardIndexToSource,
   reorderColumns,
   isWipExceeded,
+  appendDefaultTaskBoardCard,
   createTaskBoardDragController,
   createDefaultDragSnapshot
 } from "@expcat/tigercat-core";
@@ -139,10 +142,22 @@ var TaskBoard = defineComponent({
       innerColumns.value = next;
       emit("update:columns", next);
     };
+    const addCardToColumn = (columnId) => {
+      emit("card-add", columnId);
+      if (props.onCardAdd == null) {
+        updateColumns(appendDefaultTaskBoardCard(currentColumns.value, columnId));
+      }
+    };
     const dragSnap = ref(createDefaultDragSnapshot());
     const boardRef = ref(null);
     const applyCardMove = async (cardId, fromColumnId, toColumnId, toIdx) => {
-      const result = moveCard(currentColumns.value, 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, {
         enforceWipLimit: props.enforceWipLimit
       });
       if (!result) return;
@@ -395,12 +410,12 @@ var TaskBoard = defineComponent({
           role: "button",
           tabindex: 0,
           onClick: () => {
-            emit("card-add", column.id);
+            addCardToColumn(column.id);
           },
           onKeydown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              emit("card-add", column.id);
+              addCardToColumn(column.id);
             }
           }
         },

package/dist/{chunk-5RIHHZF6.mjs → chunk-BQK7LH2L.mjs}

@@ -271,6 +271,7 @@ var InputNumber = defineComponent({
     });
     onBeforeUnmount(() => repeatController.stop());
     return () => {
+      const { class: _attrClass, style: attrStyle, ...restAttrs } = attrs;
       const children = [];
       if (props.controls && props.controlsPosition === "both") {
         children.push(
@@ -307,6 +308,7 @@ var InputNumber = defineComponent({
       }
       children.push(
         h("input", {
+          ...restAttrs,
           ref: inputRef,
           type: "text",
           inputmode: "decimal",
@@ -423,7 +425,8 @@ var InputNumber = defineComponent({
       return h(
         "div",
         {
-          class: wrapperClasses.value
+          class: wrapperClasses.value,
+          style: attrStyle
         },
         children
       );

package/dist/{chunk-E6EZHSGY.mjs → chunk-BSOLH6R5.mjs}

@@ -26,7 +26,6 @@ var QRCode = defineComponent({
     size: { type: Number, default: 128 },
     color: { type: String, default: "#000000" },
     bgColor: { type: String, default: "#ffffff" },
-    level: { type: String, default: "M" },
     status: { type: String, default: "active" },
     className: { type: String, default: void 0 },
     locale: { type: Object, default: void 0 }

package/dist/{chunk-RSM6FOWX.mjs → chunk-CCC3S6LK.mjs}

@@ -227,12 +227,15 @@ var FormWizard = defineComponent({
       setCurrent(target);
     };
     const handleStepChange = async (nextIndex) => {
-      if (nextIndex === currentIndex.value || props.steps[nextIndex]?.disabled) return;
-      if (nextIndex > currentIndex.value) {
+      if (nextIndex === currentIndex.value) return;
+      const direction = nextIndex > currentIndex.value ? 1 : -1;
+      if (direction === 1) {
         const ok = await runBeforeNext();
         if (!ok) return;
       }
-      setCurrent(nextIndex);
+      const target = findNextUnskipped(nextIndex, direction);
+      if (target === currentIndex.value) return;
+      setCurrent(target);
     };
     const renderContent = () => {
       if (!currentStep.value) {

package/dist/{chunk-U75YXWSA.mjs → chunk-CLTRADS7.mjs}

@@ -1,9 +1,12 @@
 import {
   TaskBoard
-} from "./chunk-EGIMTTZA.mjs";
+} from "./chunk-BOHE5URZ.mjs";
 
 // src/components/Kanban.ts
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref } from "vue";
+import {
+  appendDefaultTaskBoardCard
+} from "@expcat/tigercat-core";
 var Kanban = defineComponent({
   name: "TigerKanban",
   inheritAttrs: false,
@@ -59,7 +62,14 @@ var Kanban = defineComponent({
   },
   emits: ["card-move", "column-move", "update:columns", "card-add", "column-add"],
   setup(props, { emit, attrs, slots }) {
+    const pendingColumns = ref(void 0);
     const handleCardAdd = (colId) => {
+      if (props.onCardAdd == null) {
+        const source = props.columns ?? pendingColumns.value ?? props.defaultColumns;
+        const next = appendDefaultTaskBoardCard(source, colId);
+        pendingColumns.value = next;
+        emit("update:columns", next);
+      }
       props.onCardAdd?.(colId);
       emit("card-add", colId);
     };
@@ -67,14 +77,13 @@ var Kanban = defineComponent({
       TaskBoard,
       {
         ...attrs,
-        columns: props.columns,
+        columns: props.columns !== void 0 ? props.columns : pendingColumns.value,
         defaultColumns: props.defaultColumns,
         draggable: props.draggable,
         columnDraggable: props.columnDraggable,
         enforceWipLimit: props.enforceWipLimit,
         beforeCardMove: props.beforeCardMove,
         beforeColumnMove: props.beforeColumnMove,
-        // Only set onCardAdd when needed — its presence affects button visibility
         onCardAdd: props.allowAddCard || props.onCardAdd ? handleCardAdd : void 0,
         filterText: props.filterText,
         hiddenColumns: props.hiddenColumns,
@@ -88,7 +97,10 @@ var Kanban = defineComponent({
         style: props.style,
         "onCard-move": (e) => emit("card-move", e),
         "onColumn-move": (e) => emit("column-move", e),
-        "onUpdate:columns": (cols) => emit("update:columns", cols),
+        "onUpdate:columns": (cols) => {
+          pendingColumns.value = cols;
+          emit("update:columns", cols);
+        },
         "onColumn-add": () => emit("column-add")
       },
       slots