@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-TQEN6GDE.mjs

@@ -0,0 +1,348 @@
+import {
+  Affix
+} from "./chunk-S3A7X7PP.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Anchor.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  provide,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  onUpdated,
+  watch,
+  nextTick,
+  reactive
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  mergeTigerLocale,
+  getAnchorLabels,
+  getAnchorWrapperClasses,
+  getAnchorInkContainerClasses,
+  getAnchorInkActiveClasses,
+  getAnchorLinkClasses,
+  getAnchorLinkListClasses,
+  anchorNestedListClasses,
+  createAnchorObserver,
+  createProgrammaticScrollLock,
+  findAnchorLinkElement,
+  getAnchorInkStyle,
+  getAnchorTargetElement,
+  replaceAnchorHash,
+  resolveActiveAnchorHref,
+  resolveAnchorScrollContainer,
+  resolveScrollRoot,
+  scrollToAnchor,
+  shouldHandleAnchorClick,
+  sortAnchorHrefsByDocumentOrder
+} from "@expcat/tigercat-core";
+var AnchorContextKey = /* @__PURE__ */ Symbol("AnchorContext");
+var AnchorLink = defineComponent({
+  name: "TigerAnchorLink",
+  inheritAttrs: false,
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    target: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const anchorContext = inject(AnchorContextKey, null);
+    const linkRef = ref(null);
+    const register = () => {
+      if (linkRef.value) anchorContext?.registerLink(props.href, linkRef.value);
+    };
+    onMounted(() => {
+      register();
+    });
+    watch(
+      () => props.href,
+      (_next, prev) => {
+        if (linkRef.value && prev) anchorContext?.unregisterLink(prev, linkRef.value);
+        register();
+      }
+    );
+    onBeforeUnmount(() => {
+      if (linkRef.value) anchorContext?.unregisterLink(props.href, linkRef.value);
+    });
+    const handleClick = (event) => {
+      const userClick = attrs.onClick;
+      userClick?.(event);
+      if (!anchorContext) return;
+      anchorContext.handleLinkClick(props.href, event, props.target);
+    };
+    const linkClasses = computed(() => {
+      const isActive = anchorContext?.activeLink === props.href;
+      return classNames(
+        getAnchorLinkClasses(Boolean(isActive), props.className),
+        coerceClassValue(attrs.class)
+      );
+    });
+    return () => {
+      const slotContent = slots.default?.();
+      const nested = props.title != null && Boolean(slotContent?.length);
+      const isActive = anchorContext?.activeLink === props.href;
+      const link = h(
+        "a",
+        {
+          ...attrs,
+          ref: linkRef,
+          href: props.href,
+          target: props.target,
+          class: linkClasses.value,
+          "data-anchor-href": props.href,
+          "aria-current": isActive ? "location" : void 0,
+          onClick: handleClick
+        },
+        nested ? props.title : slotContent ?? props.title
+      );
+      if (!anchorContext) return link;
+      return h("li", [
+        link,
+        nested ? h("ul", { class: anchorNestedListClasses }, slotContent) : null
+      ]);
+    };
+  }
+});
+var Anchor = defineComponent({
+  name: "TigerAnchor",
+  inheritAttrs: false,
+  props: {
+    affix: {
+      type: Boolean,
+      default: true
+    },
+    bounds: {
+      type: Number,
+      default: 5
+    },
+    offsetTop: {
+      type: Number,
+      default: 0
+    },
+    showInkInFixed: {
+      type: Boolean,
+      default: true
+    },
+    targetOffset: {
+      type: Number,
+      default: void 0
+    },
+    getCurrentAnchor: {
+      type: Function,
+      default: void 0
+    },
+    getContainer: {
+      type: [String, Object, Function],
+      default: void 0
+    },
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click", "change"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const activeLink = ref("");
+    const linkEntries = ref([]);
+    const anchorRef = ref(null);
+    const inkRef = ref(null);
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labelSet = computed(() => getAnchorLabels(mergedLocale.value, props.labels));
+    const scrollLock = createProgrammaticScrollLock(
+      () => resolveAnchorScrollContainer(props.getContainer)
+    );
+    const scrollOffset = computed(() => props.targetOffset ?? props.offsetTop);
+    const links = computed(() => sortAnchorHrefsByDocumentOrder(linkEntries.value));
+    const registerLink = (href, node) => {
+      const existing = linkEntries.value.find((entry) => entry.node === node);
+      if (existing) {
+        existing.href = href;
+        linkEntries.value = [...linkEntries.value];
+        return;
+      }
+      linkEntries.value = [...linkEntries.value, { href, node }];
+    };
+    const unregisterLink = (href, node) => {
+      linkEntries.value = linkEntries.value.filter(
+        (entry) => entry.node !== node || entry.href !== href
+      );
+    };
+    const applyActive = (href) => {
+      const finalHref = resolveActiveAnchorHref(href, props.getCurrentAnchor);
+      if (finalHref !== activeLink.value) {
+        activeLink.value = finalHref;
+        emit("change", finalHref);
+      }
+      return finalHref;
+    };
+    let stopObserver = null;
+    const setupObserver = () => {
+      stopObserver?.();
+      const container = resolveAnchorScrollContainer(props.getContainer);
+      const root = container === window ? null : container;
+      stopObserver = createAnchorObserver(links.value, {
+        offsetTop: scrollOffset.value,
+        bounds: props.bounds,
+        root,
+        onChange: (newActiveLink) => {
+          if (scrollLock.isLocked()) return;
+          applyActive(newActiveLink);
+        }
+      });
+    };
+    const scrollTo = (href) => {
+      scrollToAnchor(href, resolveAnchorScrollContainer(props.getContainer), scrollOffset.value);
+    };
+    const handleLinkClick = (href, event, targetAttr) => {
+      const hasTargetElement = Boolean(getAnchorTargetElement(href));
+      if (!shouldHandleAnchorClick(event, {
+        target: targetAttr,
+        hasTargetElement
+      })) {
+        emit("click", event, href);
+        return;
+      }
+      event.preventDefault();
+      emit("click", event, href);
+      const finalHref = applyActive(href);
+      scrollLock.lock();
+      scrollTo(finalHref);
+      replaceAnchorHash(finalHref);
+    };
+    const updateInkPosition = () => {
+      if (!inkRef.value || !anchorRef.value || !activeLink.value) return;
+      const activeLinkElement = findAnchorLinkElement(anchorRef.value, activeLink.value);
+      if (!activeLinkElement) return;
+      const next = getAnchorInkStyle(
+        props.direction,
+        activeLinkElement.getBoundingClientRect(),
+        anchorRef.value.getBoundingClientRect()
+      );
+      inkRef.value.style.top = next.top;
+      inkRef.value.style.height = next.height;
+      inkRef.value.style.insetInlineStart = next.insetInlineStart;
+      inkRef.value.style.width = next.width;
+    };
+    const resolvedKey = computed(() => {
+      const resolved = resolveScrollRoot(props.getContainer);
+      return resolved.isWindow ? "window" : resolved.target;
+    });
+    watch(activeLink, () => {
+      nextTick(updateInkPosition);
+    });
+    watch(() => props.direction, updateInkPosition);
+    watch([links, scrollOffset, resolvedKey, () => props.bounds], () => {
+      nextTick(() => setupObserver());
+    });
+    onMounted(() => {
+      nextTick(() => {
+        setupObserver();
+        updateInkPosition();
+      });
+    });
+    onUpdated(() => {
+      updateInkPosition();
+    });
+    onBeforeUnmount(() => {
+      stopObserver?.();
+      scrollLock.dispose();
+    });
+    const wrapperClasses = computed(
+      () => classNames(getAnchorWrapperClasses(props.className), coerceClassValue(attrs.class))
+    );
+    const showInk = computed(() => !props.affix || props.showInkInFixed);
+    const contextValue = reactive({
+      activeLink: "",
+      direction: props.direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick,
+      scrollTo
+    });
+    watch([activeLink, () => props.direction], ([newActive, newDir]) => {
+      contextValue.activeLink = newActive;
+      contextValue.direction = newDir;
+    });
+    provide(AnchorContextKey, contextValue);
+    expose({
+      scrollTo
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const navLabel = typeof attrsRecord["aria-label"] === "string" && attrsRecord["aria-label"] || labelSet.value.ariaLabel;
+      const inkIndicator = showInk.value ? [
+        h("div", { class: getAnchorInkContainerClasses(props.direction) }, [
+          h("div", {
+            ref: inkRef,
+            class: getAnchorInkActiveClasses(props.direction)
+          })
+        ])
+      ] : [];
+      const nav = h(
+        "nav",
+        {
+          ...attrs,
+          ref: anchorRef,
+          class: wrapperClasses.value,
+          style: mergeStyleValues(attrs.style, props.style),
+          "aria-label": navLabel
+        },
+        [
+          ...inkIndicator,
+          h("ul", { class: getAnchorLinkListClasses(props.direction) }, slots.default?.())
+        ]
+      );
+      if (props.affix) {
+        return h(Affix, { offsetTop: props.offsetTop }, { default: () => nav });
+      }
+      return nav;
+    };
+  }
+});
+var Anchor_default = Anchor;
+
+export {
+  AnchorContextKey,
+  AnchorLink,
+  Anchor,
+  Anchor_default
+};

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