@expcat/tigercat-vue 2.0.4 → 2.1.0

package/dist/chunk-AOLRZG4E.mjs

@@ -0,0 +1,347 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  Tag
+} from "./chunk-342DH5CF.mjs";
+import {
+  useTigerConfig
+} from "./chunk-UOJOJBEU.mjs";
+
+// src/components/TagsInput.ts
+import { computed, defineComponent, h, inject, ref, watch } from "vue";
+import {
+  addTags,
+  classNames,
+  coerceClassValue,
+  extractTagCandidates,
+  formatRemoveTagLabel,
+  getTagsInputClearButtonClasses,
+  getTagsInputContainerClasses,
+  getTagsInputErrorClasses,
+  getTagsInputHighlightClasses,
+  getTagsInputInnerInputClasses,
+  getTagsInputLabels,
+  injectShakeStyle,
+  mergeStyleValues,
+  removeTagAt,
+  SHAKE_CLASS,
+  splitTagInput
+} from "@expcat/tigercat-core";
+var tagsInputIdCounter = 0;
+var TagsInput = defineComponent({
+  name: "TigerTagsInput",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Tags (for v-model)
+     */
+    modelValue: { type: Array, default: void 0 },
+    /**
+     * Default tags (for uncontrolled mode)
+     */
+    defaultValue: { type: Array, default: () => [] },
+    /**
+     * Input size
+     * @default 'md'
+     */
+    size: { type: String, default: "md" },
+    /**
+     * Validation status
+     * @default 'default'
+     */
+    status: { type: String, default: "default" },
+    /** Error message to display */
+    errorMessage: String,
+    /** Placeholder for the inner text input */
+    placeholder: { type: String, default: "" },
+    /** Whether the same tag may be added more than once */
+    allowDuplicates: Boolean,
+    /** Maximum number of tags */
+    max: { type: Number, default: void 0 },
+    /**
+     * Characters that commit input while typing and split pasted text
+     * @default [',']
+     */
+    delimiters: { type: Array, default: () => [","] },
+    /** Commit the pending input as a tag on blur */
+    addOnBlur: Boolean,
+    /** Validate/transform a candidate tag before it is added */
+    beforeAdd: {
+      type: Function,
+      default: void 0
+    },
+    /** Whether to show a clear-all button */
+    clearable: Boolean,
+    /** Whether the input is disabled */
+    disabled: Boolean,
+    /** Whether the input is readonly */
+    readonly: Boolean,
+    /** Name for the hidden input carrying the joined value */
+    name: String,
+    /** Id attribute applied to the inner text input */
+    id: String,
+    /** Aria-label template for tag remove buttons; supports {tag} */
+    removeTagAriaLabel: String,
+    /**
+     * Internal shake trigger counter (used by FormItem)
+     * @internal
+     */
+    _shakeTrigger: { type: Number, default: void 0 },
+    /** Additional CSS classes */
+    className: String,
+    /** Inline styles */
+    style: { type: Object, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": null,
+    add: null,
+    remove: null,
+    clear: null,
+    focus: null,
+    blur: null
+  },
+  setup(props, { emit, attrs }) {
+    injectShakeStyle();
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const effectiveStatus = computed(
+      () => props.status !== "default" ? props.status : formItemControl?.status.value ?? props.status
+    );
+    const effectiveErrorMessage = computed(
+      () => props.errorMessage ?? formItemControl?.errorMessage.value
+    );
+    const effectiveShakeTrigger = computed(
+      () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
+    );
+    const labels = computed(() => getTagsInputLabels(config.value.locale));
+    const instanceId = ++tagsInputIdCounter;
+    const errorMsgId = `tiger-tags-input-error-${instanceId}`;
+    const containerRef = ref(null);
+    const inputRef = ref(null);
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const innerTags = ref([...props.defaultValue]);
+    const tags = computed(() => isControlled.value ? props.modelValue ?? [] : innerTags.value);
+    const inputText = ref("");
+    const highlightedIndex = ref(null);
+    watch([effectiveStatus, effectiveShakeTrigger], ([newStatus]) => {
+      if (newStatus === "error" && containerRef.value) {
+        const el = containerRef.value;
+        el.classList.remove(SHAKE_CLASS);
+        void el.offsetWidth;
+        el.classList.add(SHAKE_CLASS);
+      }
+    });
+    const isInteractive = computed(() => !props.disabled && !props.readonly);
+    const setTags = (next) => {
+      if (!isControlled.value) innerTags.value = next;
+      emit("update:modelValue", next);
+    };
+    const commitCandidates = (candidates) => {
+      const prepared = [];
+      for (const raw of candidates) {
+        if (!props.beforeAdd) {
+          prepared.push(raw);
+          continue;
+        }
+        const result = props.beforeAdd(raw.trim());
+        if (result === false) continue;
+        prepared.push(typeof result === "string" ? result : raw);
+      }
+      if (prepared.length === 0) return [];
+      const { tags: nextTags, added } = addTags(tags.value, prepared, {
+        allowDuplicates: props.allowDuplicates,
+        max: props.max
+      });
+      if (added.length > 0) {
+        setTags(nextTags);
+        added.forEach((tag) => emit("add", tag));
+      }
+      return added;
+    };
+    const removeAt = (index) => {
+      const tag = tags.value[index];
+      if (tag === void 0) return;
+      setTags(removeTagAt(tags.value, index));
+      emit("remove", tag, index);
+    };
+    const handleInput = (event) => {
+      if (!isInteractive.value) return;
+      highlightedIndex.value = null;
+      const target = event.target;
+      const { candidates, pending } = extractTagCandidates(target.value, props.delimiters);
+      if (candidates.length > 0) commitCandidates(candidates);
+      inputText.value = pending;
+      target.value = pending;
+    };
+    const handleKeydown = (event) => {
+      if (!isInteractive.value) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        if (inputText.value.trim()) {
+          const added = commitCandidates([inputText.value]);
+          if (added.length > 0) inputText.value = "";
+        }
+        return;
+      }
+      if (event.key === "Backspace" && inputText.value === "") {
+        if (highlightedIndex.value !== null) {
+          removeAt(highlightedIndex.value);
+          highlightedIndex.value = null;
+        } else if (tags.value.length > 0) {
+          highlightedIndex.value = tags.value.length - 1;
+        }
+        return;
+      }
+      if (event.key === "ArrowLeft" && inputText.value === "" && tags.value.length > 0) {
+        highlightedIndex.value = highlightedIndex.value === null ? tags.value.length - 1 : Math.max(0, highlightedIndex.value - 1);
+        return;
+      }
+      if (event.key === "ArrowRight" && highlightedIndex.value !== null) {
+        highlightedIndex.value = highlightedIndex.value >= tags.value.length - 1 ? null : highlightedIndex.value + 1;
+        return;
+      }
+      if (event.key === "Escape" && highlightedIndex.value !== null) {
+        highlightedIndex.value = null;
+        return;
+      }
+      if (highlightedIndex.value !== null) highlightedIndex.value = null;
+    };
+    const handlePaste = (event) => {
+      if (!isInteractive.value) return;
+      const text = event.clipboardData?.getData("text") ?? "";
+      const candidates = splitTagInput(text, props.delimiters);
+      if (candidates.length <= 1) return;
+      event.preventDefault();
+      commitCandidates(candidates);
+      inputText.value = "";
+      if (inputRef.value) inputRef.value.value = "";
+    };
+    const handleFocus = (event) => emit("focus", event);
+    const handleBlur = (event) => {
+      highlightedIndex.value = null;
+      if (props.addOnBlur && inputText.value.trim() && isInteractive.value) {
+        const added = commitCandidates([inputText.value]);
+        if (added.length > 0) inputText.value = "";
+      }
+      emit("blur", event);
+    };
+    const handleClear = () => {
+      if (!isInteractive.value || tags.value.length === 0) return;
+      setTags([]);
+      inputText.value = "";
+      highlightedIndex.value = null;
+      emit("clear");
+      inputRef.value?.focus();
+    };
+    const handleContainerClick = (event) => {
+      if (event.target === containerRef.value) inputRef.value?.focus();
+    };
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const activeError = effectiveStatus.value === "error" && !!effectiveErrorMessage.value;
+      const isFull = props.max !== void 0 && tags.value.length >= props.max;
+      const removeLabelTemplate = props.removeTagAriaLabel ?? labels.value.removeTagLabel;
+      const tagSize = props.size === "lg" ? "md" : "sm";
+      const children = [];
+      tags.value.forEach((tag, index) => {
+        children.push(
+          h(
+            Tag,
+            {
+              key: `${tag}-${index}`,
+              size: tagSize,
+              closable: isInteractive.value,
+              closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
+              class: index === highlightedIndex.value ? getTagsInputHighlightClasses() : void 0,
+              onClose: (event) => {
+                event.preventDefault();
+                removeAt(index);
+              }
+            },
+            () => tag
+          )
+        );
+      });
+      children.push(
+        h("input", {
+          key: "text-input",
+          ref: inputRef,
+          class: getTagsInputInnerInputClasses(),
+          type: "text",
+          value: inputText.value,
+          placeholder: tags.value.length === 0 ? props.placeholder : "",
+          disabled: props.disabled,
+          readonly: props.readonly,
+          id: props.id ? `${props.id}-input` : props.id,
+          ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
+          ...activeError ? { "aria-describedby": errorMsgId } : {},
+          onInput: handleInput,
+          onKeydown: handleKeydown,
+          onPaste: handlePaste,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        })
+      );
+      if (props.clearable && tags.value.length > 0 && isInteractive.value) {
+        children.push(
+          h(
+            "button",
+            {
+              key: "clear",
+              type: "button",
+              class: getTagsInputClearButtonClasses(),
+              onClick: handleClear,
+              "aria-label": labels.value.clearAllLabel,
+              tabindex: -1
+            },
+            "\u2715"
+          )
+        );
+      }
+      if (props.name) {
+        children.push(
+          h("input", {
+            key: "hidden",
+            type: "hidden",
+            name: props.name,
+            value: tags.value.join(",")
+          })
+        );
+      }
+      const containerNode = h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          id: props.id,
+          class: classNames(
+            getTagsInputContainerClasses(props.size, effectiveStatus.value, {
+              disabled: props.disabled
+            }),
+            props.className,
+            coerceClassValue(attrClass)
+          ),
+          style: mergeStyleValues(props.style, attrStyle),
+          "data-state": isFull ? "full" : void 0,
+          onClick: handleContainerClick
+        },
+        children
+      );
+      if (!activeError) return containerNode;
+      return h("div", {}, [
+        containerNode,
+        h("div", { id: errorMsgId, class: getTagsInputErrorClasses() }, effectiveErrorMessage.value)
+      ]);
+    };
+  }
+});
+var TagsInput_default = TagsInput;
+
+export {
+  TagsInput,
+  TagsInput_default
+};

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
+};