@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-AY7CGLMO.mjs → chunk-TWZHKFFE.mjs}

@@ -1,7 +1,12 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/ImageCompare.ts
 import { defineComponent, h, onBeforeUnmount, ref, watch } from "vue";
 import {
   composeComponentClasses,
+  createDocumentDragSession,
   getImageCompareAfterClasses,
   getImageCompareBeforeClasses,
   getImageCompareClipStyle,
@@ -10,11 +15,12 @@ import {
   getImageCompareImgClasses,
   getImageCompareKeyboardPosition,
   getImageCompareKnobClasses,
+  getImageCompareLabels,
   getImageCompareLineClasses,
+  getImageComparePointerClientPoint,
   getImageComparePositionFromPointer,
   getImageCompareRootClasses,
   getImageCompareRootStyle,
-  getImageComparePointerClientPoint,
   isImageCompareInteractiveTarget,
   isImageCompareVertical,
   mergeStyleValues,
@@ -22,12 +28,18 @@ import {
   resolveImageCompareFit,
   resolveImageCompareOrientation,
   resolveImageComparePosition,
+  resolveImageCompareRtl,
   resolveImageCompareStep
 } from "@expcat/tigercat-core";
-function callAttrHandler(handler, event) {
+function invokeListener(handler, event) {
   if (typeof handler === "function") {
-    const listener = handler;
-    listener(event);
+    handler(event);
+    return;
+  }
+  if (Array.isArray(handler)) {
+    for (const fn of handler) {
+      if (typeof fn === "function") fn(event);
+    }
   }
 }
 var ImageCompare = defineComponent({
@@ -127,8 +139,8 @@ var ImageCompare = defineComponent({
       default: void 0
     },
     /**
-     * Accessible name for the comparison handle
-     * @default 'Image comparison'
+     * Accessible name for the comparison handle.
+     * Empty values fall back to `locale.imageCompare.ariaLabel`.
      */
     ariaLabel: {
       type: String,
@@ -160,12 +172,14 @@ var ImageCompare = defineComponent({
     change: (value) => typeof value === "number"
   },
   setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
     const rootRef = ref(null);
     const handleRef = ref(null);
     const dragging = ref(false);
     const internalPosition = ref(
       resolveImageComparePosition(props.position ?? props.defaultPosition, props.step)
     );
+    let dragSession = null;
     watch(
       () => props.position,
       (value) => {
@@ -186,48 +200,58 @@ var ImageCompare = defineComponent({
       emit("update:position", resolved);
       emit("change", resolved);
     };
-    const positionFromEvent = (event) => {
+    const resolvedDir = () => {
+      const attrDir = attrs.dir;
+      if (typeof attrDir === "string") return attrDir;
+      return config.value.direction;
+    };
+    const positionFromPoint = (clientX, clientY) => {
       const root = rootRef.value;
-      const point = getImageComparePointerClientPoint(event);
-      if (!root || !point) return null;
+      if (!root) return null;
       return getImageComparePositionFromPointer({
-        clientX: point.clientX,
-        clientY: point.clientY,
+        clientX,
+        clientY,
         rect: root.getBoundingClientRect(),
         orientation: props.orientation,
-        step: props.step
+        step: props.step,
+        rtl: resolveImageCompareRtl(resolvedDir())
       });
     };
-    const handleMove = (event) => {
-      if (props.disabled || !dragging.value) return;
-      const next = positionFromEvent(event);
-      if (next === null) return;
-      commit(next);
-    };
-    const handleEnd = () => {
+    const stopDrag = () => {
+      dragSession?.dispose();
+      dragSession = null;
       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 (event.button !== 0) return;
       if (isImageCompareInteractiveTarget(event.target, handleRef.value)) return;
       event.preventDefault();
-      const alreadyDragging = dragging.value;
-      dragging.value = true;
-      const next = positionFromEvent(event);
+      const point = getImageComparePointerClientPoint(event);
+      if (!point) return;
+      const next = positionFromPoint(point.clientX, point.clientY);
       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);
+      dragging.value = true;
+      dragSession?.dispose();
+      dragSession = createDocumentDragSession({
+        startX: point.clientX,
+        startY: point.clientY,
+        ownerDocument: event.currentTarget instanceof Node ? event.currentTarget.ownerDocument ?? void 0 : void 0,
+        pointerId: event.pointerId,
+        pointerTarget: event.currentTarget instanceof Element ? event.currentTarget : null,
+        onMove: ({ event: moveEvent, currentX, currentY }) => {
+          if (moveEvent.cancelable) moveEvent.preventDefault();
+          const moved = positionFromPoint(currentX, currentY);
+          if (moved !== null) commit(moved);
+        },
+        onEnd: () => {
+          dragSession = null;
+          dragging.value = false;
+        }
+      });
     };
-    onBeforeUnmount(handleEnd);
+    onBeforeUnmount(stopDrag);
     const renderPaneContent = (slot, src, alt) => {
       if (slot) return slot();
       if (!src) return null;
@@ -244,25 +268,29 @@ var ImageCompare = defineComponent({
       const step = resolveImageCompareStep(props.step);
       const position = currentPosition();
       const vertical = isImageCompareVertical(orientation);
+      const dir = resolvedDir();
+      const rtl = resolveImageCompareRtl(dir);
+      const labels = getImageCompareLabels(config.value.locale);
       const attrAriaLabel = typeof attrsRecord["aria-label"] === "string" ? attrsRecord["aria-label"] : void 0;
-      const ariaLabel = resolveImageCompareAriaLabel(attrAriaLabel ?? props.ariaLabel);
+      const explicitAriaLabel = resolveImageCompareAriaLabel(attrAriaLabel ?? props.ariaLabel);
       const {
         class: _class,
         style: _style,
+        dir: _dir,
         "aria-label": _ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-describedby": ariaDescribedby,
-        onMousedown,
-        onMouseDown,
-        onTouchstart,
-        onTouchStart,
+        onPointerdown,
+        onPointerDown,
         ...restAttrs
       } = attrsRecord;
+      const resolvedAriaLabel = ariaLabelledby ? explicitAriaLabel : explicitAriaLabel ?? labels.ariaLabel;
       return h(
         "div",
         {
           ...restAttrs,
           ref: rootRef,
+          dir,
           class: composeComponentClasses(
             getImageCompareRootClasses({
               orientation,
@@ -273,8 +301,6 @@ var ImageCompare = defineComponent({
           ),
           style: mergeStyleValues(
             getImageCompareRootStyle({
-              position,
-              step,
               width: props.width,
               height: props.height
             }),
@@ -286,13 +312,10 @@ var ImageCompare = defineComponent({
           "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) => {
+          onPointerdown: (event) => {
+            invokeListener(onPointerdown ?? onPointerDown, event);
+            if (event.defaultPrevented) return;
             startDrag(event);
-            callAttrHandler(onTouchstart ?? onTouchStart, event);
           }
         },
         [
@@ -308,7 +331,7 @@ var ImageCompare = defineComponent({
             "div",
             {
               class: getImageCompareBeforeClasses(),
-              style: getImageCompareClipStyle(position, orientation, step),
+              style: getImageCompareClipStyle(position, orientation, step, rtl),
               "data-image-compare-before": ""
             },
             [renderPaneContent(slots.before, props.beforeSrc, props.beforeAlt)]
@@ -321,11 +344,11 @@ var ImageCompare = defineComponent({
                 orientation,
                 disabled: props.disabled
               }),
-              style: getImageCompareHandleStyle(position, orientation, step),
+              style: getImageCompareHandleStyle(position, orientation, step, rtl),
               "data-image-compare-handle": "",
               role: "slider",
               tabindex: props.disabled ? -1 : 0,
-              "aria-label": ariaLabel,
+              "aria-label": resolvedAriaLabel,
               "aria-labelledby": ariaLabelledby,
               "aria-describedby": ariaDescribedby,
               "aria-valuemin": 0,
@@ -336,7 +359,10 @@ var ImageCompare = defineComponent({
               "aria-disabled": props.disabled,
               onKeydown: (event) => {
                 if (props.disabled) return;
-                const next = getImageCompareKeyboardPosition(event.key, position, step);
+                const next = getImageCompareKeyboardPosition(event.key, position, step, {
+                  orientation,
+                  rtl
+                });
                 if (next === null) return;
                 event.preventDefault();
                 commit(next);

package/dist/chunk-TYJBLP5U.mjs

@@ -0,0 +1,67 @@
+import {
+  LayoutContextKey
+} from "./chunk-OKVAKVTR.mjs";
+
+// src/components/Content.ts
+import { defineComponent, h, computed, inject, onBeforeUnmount, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getLayoutContentClasses,
+  injectLayoutGridStyles
+} from "@expcat/tigercat-core";
+var Content = defineComponent({
+  name: "TigerContent",
+  inheritAttrs: false,
+  props: {
+    className: {
+      type: String,
+      default: void 0
+    },
+    as: {
+      type: String,
+      default: "main"
+    },
+    padding: {
+      type: [Boolean, String],
+      default: true
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    injectLayoutGridStyles();
+    const layout = inject(LayoutContextKey, null);
+    const rootRef = ref(null);
+    onBeforeUnmount(() => layout?.setContentEl(null));
+    const contentClasses = computed(
+      () => classNames(
+        getLayoutContentClasses(props.padding),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => h(
+      props.as || "main",
+      {
+        ...attrs,
+        ref: (el) => {
+          const node = el;
+          rootRef.value = node;
+          layout?.setContentEl(node);
+        },
+        class: contentClasses.value,
+        style: props.style
+      },
+      slots.default?.()
+    );
+  }
+});
+var Content_default = Content;
+
+export {
+  Content,
+  Content_default
+};

package/dist/chunk-UDYEWEBD.mjs

@@ -0,0 +1,351 @@
+import {
+  Steps
+} from "./chunk-7G6YBK6O.mjs";
+import {
+  useFormContext
+} from "./chunk-ONSDH4KJ.mjs";
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/FormWizard.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  h,
+  useId
+} from "vue";
+import {
+  canClickWizardStep,
+  classNames,
+  clampStepIndex,
+  coerceClassValue,
+  createAsyncLock,
+  findNextUnskippedStep,
+  getFormWizardActionsClasses,
+  getFormWizardBodyClasses,
+  getFormWizardHeaderClasses,
+  getFormWizardLabels,
+  getFormWizardWrapperClasses,
+  isLastAvailableStep,
+  isStepSkipped,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveLocaleText,
+  runWizardAdvanceGate
+} from "@expcat/tigercat-core";
+var FormWizard = defineComponent({
+  name: "TigerFormWizard",
+  inheritAttrs: false,
+  props: {
+    steps: {
+      type: Array,
+      default: () => []
+    },
+    current: {
+      type: Number,
+      default: void 0
+    },
+    defaultCurrent: {
+      type: Number,
+      default: 0
+    },
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    size: {
+      type: String,
+      default: "default"
+    },
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    showSteps: {
+      type: Boolean,
+      default: true
+    },
+    showActions: {
+      type: Boolean,
+      default: true
+    },
+    prevText: {
+      type: String,
+      default: void 0
+    },
+    nextText: {
+      type: String,
+      default: void 0
+    },
+    finishText: {
+      type: String,
+      default: void 0
+    },
+    beforeNext: {
+      type: Function,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    autoSave: {
+      type: Function,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change", "update:current", "finish"],
+  setup(props, { slots, attrs, emit, expose }) {
+    const config = useTigerConfig();
+    const formContext = useFormContext();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getFormWizardLabels(mergedLocale.value, props.labels));
+    const innerCurrent = ref(clampStepIndex(props.defaultCurrent ?? 0, props.steps.length));
+    const errorMessage = ref();
+    const pending = ref(false);
+    const lock = createAsyncLock();
+    const titleId = useId();
+    const totalCount = computed(() => props.steps.length);
+    const currentIndex = computed(
+      () => clampStepIndex(
+        props.current !== void 0 ? props.current : innerCurrent.value,
+        totalCount.value
+      )
+    );
+    const currentStep = computed(() => props.steps[currentIndex.value]);
+    const isLast = computed(() => isLastAvailableStep(currentIndex.value, props.steps));
+    const isFirst = computed(() => {
+      if (currentIndex.value <= 0) return true;
+      return findNextUnskippedStep(currentIndex.value - 1, -1, props.steps, currentIndex.value) === currentIndex.value;
+    });
+    const wrapperClasses = computed(
+      () => getFormWizardWrapperClasses({
+        bordered: props.bordered,
+        className: classNames(props.className, coerceClassValue(attrs.class))
+      })
+    );
+    const wrapperStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const setCurrent = async (next) => {
+      const clamped = clampStepIndex(next, totalCount.value);
+      const prev = currentIndex.value;
+      if (props.current === void 0) innerCurrent.value = clamped;
+      emit("update:current", clamped);
+      emit("change", clamped, prev);
+      if (props.autoSave && props.steps[clamped]) {
+        await props.autoSave(clamped, props.steps[clamped]);
+      }
+    };
+    const formApi = () => formContext?.value;
+    const validateAdvance = () => {
+      const form = formApi();
+      return runWizardAdvanceGate({
+        currentIndex: currentIndex.value,
+        currentStep: currentStep.value,
+        steps: props.steps,
+        beforeNext: props.beforeNext,
+        validateFields: form ? (fields) => form.validateFields(fields) : void 0
+      });
+    };
+    const finishAt = async (index) => {
+      const form = formApi();
+      if (form) {
+        const fields = props.steps[index]?.fields;
+        const valid = fields?.length ? await form.validateFields(fields) : await form.validate();
+        if (!valid) return;
+        await form.submit();
+      }
+      emit("finish", index, props.steps, form?.getValues());
+      if (props.autoSave && props.steps[index]) {
+        await props.autoSave(index, props.steps[index]);
+      }
+    };
+    const handlePrev = () => {
+      if (currentIndex.value <= 0) return;
+      const target = findNextUnskippedStep(
+        currentIndex.value - 1,
+        -1,
+        props.steps,
+        currentIndex.value
+      );
+      if (target === currentIndex.value) return;
+      errorMessage.value = void 0;
+      void setCurrent(target);
+    };
+    const handleNext = async () => {
+      if (totalCount.value === 0) return;
+      await lock.run(async () => {
+        pending.value = true;
+        try {
+          const outcome = await validateAdvance();
+          if (!outcome.ok) {
+            errorMessage.value = outcome.message;
+            return;
+          }
+          errorMessage.value = void 0;
+          if (isLast.value) {
+            await finishAt(currentIndex.value);
+            return;
+          }
+          const target = findNextUnskippedStep(
+            currentIndex.value + 1,
+            1,
+            props.steps,
+            currentIndex.value
+          );
+          if (target === currentIndex.value) return;
+          await setCurrent(target);
+        } finally {
+          pending.value = false;
+        }
+      });
+    };
+    const handleStepChange = (nextIndex) => {
+      if (!canClickWizardStep(nextIndex, currentIndex.value, props.steps)) return;
+      errorMessage.value = void 0;
+      void setCurrent(nextIndex);
+    };
+    expose({
+      next: handleNext,
+      prev: handlePrev,
+      finish: handleNext
+    });
+    const renderContent = () => {
+      if (!currentStep.value) return void 0;
+      if (slots.step) return slots.step({ step: currentStep.value, index: currentIndex.value });
+      if (slots.default) {
+        return slots.default({ step: currentStep.value, index: currentIndex.value });
+      }
+      if (currentStep.value.content != null) return currentStep.value.content;
+      return void 0;
+    };
+    return () => {
+      const stepItems = props.steps.map((step, index) => ({
+        key: step.key ?? index,
+        title: step.title,
+        description: isStepSkipped(step) ? labels.value.skippedText : step.description,
+        status: step.status,
+        icon: step.icon,
+        disabled: step.disabled || isStepSkipped(step) || props.clickable && index > currentIndex.value
+      }));
+      const { class: _class, style: _style, ...hostAttrs } = attrs;
+      if (totalCount.value === 0) {
+        return h("div", {
+          ...hostAttrs,
+          class: wrapperClasses.value,
+          style: wrapperStyle.value,
+          "data-tiger-form-wizard": "",
+          role: "group",
+          "aria-label": labels.value.ariaLabel
+        });
+      }
+      return h(
+        "div",
+        {
+          ...hostAttrs,
+          class: wrapperClasses.value,
+          style: wrapperStyle.value,
+          "data-tiger-form-wizard": "",
+          role: "group",
+          "aria-label": labels.value.ariaLabel
+        },
+        [
+          props.showSteps ? h("div", { class: getFormWizardHeaderClasses(props.bordered) }, [
+            h(Steps, {
+              current: currentIndex.value,
+              direction: props.direction,
+              size: props.size,
+              simple: props.simple,
+              clickable: props.clickable,
+              items: stepItems,
+              "onUpdate:current": handleStepChange
+            })
+          ]) : void 0,
+          h("div", { class: getFormWizardBodyClasses(), "aria-labelledby": titleId }, [
+            h("div", { id: titleId, class: "sr-only" }, currentStep.value?.title),
+            h("div", { class: "sr-only", "aria-live": "polite" }, currentStep.value?.title),
+            errorMessage.value ? h(
+              "div",
+              {
+                role: "alert",
+                class: "mb-3 w-full text-sm text-[var(--tiger-error,#dc2626)]"
+              },
+              errorMessage.value
+            ) : void 0,
+            renderContent()
+          ]),
+          props.showActions ? h("div", { class: getFormWizardActionsClasses(props.bordered), role: "group" }, [
+            !isFirst.value ? h(
+              Button,
+              {
+                htmlType: "button",
+                variant: "secondary",
+                class: "group",
+                onClick: handlePrev,
+                disabled: pending.value,
+                size: props.size === "small" ? "sm" : "md"
+              },
+              {
+                icon: () => h(Icon, { name: "arrow-left", class: "w-3.5 h-3.5" }),
+                default: () => resolveLocaleText(labels.value.prevText, props.prevText)
+              }
+            ) : h("div"),
+            h(
+              Button,
+              {
+                htmlType: "button",
+                variant: "primary",
+                class: "group",
+                onClick: handleNext,
+                loading: pending.value,
+                disabled: pending.value,
+                size: props.size === "small" ? "sm" : "md",
+                iconPosition: isLast.value ? "start" : "end"
+              },
+              {
+                icon: () => h(Icon, {
+                  name: isLast.value ? "check" : "arrow-right",
+                  class: "w-3.5 h-3.5"
+                }),
+                default: () => isLast.value ? resolveLocaleText(labels.value.finishText, props.finishText) : resolveLocaleText(labels.value.nextText, props.nextText)
+              }
+            )
+          ]) : void 0
+        ]
+      );
+    };
+  }
+});
+var FormWizard_default = FormWizard;
+
+export {
+  FormWizard,
+  FormWizard_default
+};