@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-6GR3XC5V.mjs → chunk-G6R2CQRS.mjs}

@@ -1,18 +1,24 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
 // src/components/ScrollArea.ts
 import {
+  computed,
   defineComponent,
   h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
   ref,
   shallowRef,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
   watch
 } from "vue";
 import {
+  applyScrollAreaWheel,
   classNames,
   coerceClassValue,
-  mergeStyleValues,
+  computeScrollAreaKeyboardDelta,
   computeScrollAreaState,
   computeScrollFromThumbOffset,
   computeScrollFromTrackPoint,
@@ -20,14 +26,23 @@ import {
   createEmptyScrollAreaState,
   getScrollAreaBoxStyle,
   getScrollAreaContentClasses,
+  getScrollAreaGutterStyle,
+  getScrollAreaLabels,
   getScrollAreaScrollbarClasses,
+  getScrollAreaScrollbarPlacementStyle,
   getScrollAreaShadowClasses,
   getScrollAreaShadowSides,
+  getScrollAreaShadowStyle,
   getScrollAreaThumbClasses,
   getScrollAreaThumbStyle,
   getScrollAreaViewportClasses,
+  mergeTigerLocale,
   observeScrollAreaSize,
+  physicalInlineScrollFromLogical,
+  readInlineDirection,
   readScrollAreaMetrics,
+  resolveScrollAreaViewportTabIndex,
+  scrollAreaHasFocusable,
   scrollAreaRootClasses,
   shouldRenderScrollAreaScrollbar,
   SCROLL_AREA_MIN_THUMB_SIZE
@@ -56,7 +71,8 @@ var ScrollArea = defineComponent({
     maxWidth: { type: [Number, String], default: void 0 },
     ariaLabel: { type: String, default: void 0 },
     className: { type: String, default: void 0 },
-    viewportClassName: { type: String, default: void 0 }
+    viewportClassName: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 }
   },
   emits: ["scroll"],
   setup(props, { slots, emit, attrs, expose }) {
@@ -64,50 +80,61 @@ var ScrollArea = defineComponent({
     const contentRef = ref(null);
     const scrollState = shallowRef(createEmptyScrollAreaState());
     const draggingAxis = ref(null);
+    const scrolling = ref(false);
     let dragSession = null;
     let stopObserving = null;
+    let scrollTimer = 0;
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getScrollAreaLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     function syncState() {
       const viewport = viewportRef.value;
       if (!viewport) return;
       scrollState.value = computeScrollAreaState(
         readScrollAreaMetrics(viewport),
-        props.minThumbSize
+        props.minThumbSize,
+        readInlineDirection(viewport)
       );
     }
     function handleScroll() {
       const viewport = viewportRef.value;
       if (!viewport) return;
       syncState();
+      scrolling.value = true;
+      window.clearTimeout(scrollTimer);
+      scrollTimer = window.setTimeout(() => {
+        scrolling.value = false;
+      }, 600);
       emit("scroll", {
         scrollTop: viewport.scrollTop,
         scrollLeft: viewport.scrollLeft,
         state: scrollState.value
       });
     }
-    function applyScroll(axis, position) {
+    function applyScroll(axis, logical) {
       const viewport = viewportRef.value;
       if (!viewport) return;
-      if (axis === "y") viewport.scrollTop = position;
-      else viewport.scrollLeft = position;
+      if (axis === "y") viewport.scrollTop = logical;
+      else {
+        viewport.scrollLeft = physicalInlineScrollFromLogical(
+          logical,
+          viewport.scrollWidth,
+          viewport.clientWidth,
+          readInlineDirection(viewport),
+          viewport.scrollLeft
+        );
+      }
       handleScroll();
     }
-    function trackSizeOf(axis) {
-      const viewport = viewportRef.value;
-      if (!viewport) return 0;
-      return axis === "y" ? viewport.clientHeight : viewport.clientWidth;
-    }
-    function scrollSizeOf(axis) {
-      const viewport = viewportRef.value;
-      if (!viewport) return 0;
-      return axis === "y" ? viewport.scrollHeight : viewport.scrollWidth;
-    }
     function startThumbDrag(axis, event) {
       const viewport = viewportRef.value;
-      if (!viewport) return;
+      if (!viewport || event.button !== 0) return;
       event.preventDefault();
       event.stopPropagation();
       const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
       const startOffset = axisState.thumbOffset;
+      const rtl = axis === "x" && readInlineDirection(viewport) === "rtl";
       const startPoint = axis === "y" ? event.clientY : event.clientX;
       dragSession?.dispose();
       draggingAxis.value = axis;
@@ -115,16 +142,20 @@ var ScrollArea = defineComponent({
         startX: event.clientX,
         startY: event.clientY,
         ownerDocument: viewport.ownerDocument,
+        pointerId: event.pointerId,
+        pointerTarget: event.currentTarget instanceof Element ? event.currentTarget : null,
+        lockAxis: axis,
         onMove: ({ currentX, currentY }) => {
           const current = axis === "y" ? currentY : currentX;
-          const trackSize = trackSizeOf(axis);
+          const delta = rtl ? startPoint - current : current - startPoint;
+          const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
           applyScroll(
             axis,
             computeScrollFromThumbOffset(
-              startOffset + (current - startPoint),
+              startOffset + delta,
               trackSize,
               axisState.thumbSize,
-              scrollSizeOf(axis),
+              axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
               trackSize
             )
           );
@@ -135,24 +166,27 @@ var ScrollArea = defineComponent({
         }
       });
     }
-    function handleTrackMouseDown(axis, event) {
+    function handleTrackPointerDown(axis, event) {
       const target = event.target;
       if (target?.dataset.scrollAreaThumb) {
         startThumbDrag(axis, event);
         return;
       }
+      const viewport = viewportRef.value;
+      if (!viewport) return;
       const track = event.currentTarget;
       const rect = track.getBoundingClientRect();
-      const point = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+      const rtl = axis === "x" && readInlineDirection(viewport) === "rtl";
+      const point = axis === "y" ? event.clientY - rect.top : rtl ? rect.right - event.clientX : event.clientX - rect.left;
       const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
-      const trackSize = trackSizeOf(axis);
+      const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
       applyScroll(
         axis,
         computeScrollFromTrackPoint(
           point,
           trackSize,
           axisState.thumbSize,
-          scrollSizeOf(axis),
+          axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
           trackSize
         )
       );
@@ -169,23 +203,14 @@ var ScrollArea = defineComponent({
       }
       handleScroll();
     }
-    function scrollToTop(behavior) {
-      scrollTo({ top: 0, behavior });
-    }
-    function scrollToBottom(behavior) {
-      const viewport = viewportRef.value;
-      if (!viewport) return;
-      scrollTo({ top: viewport.scrollHeight, behavior });
-    }
     onMounted(() => {
       syncState();
       stopObserving = observeScrollAreaSize([viewportRef.value, contentRef.value], syncState);
     });
     onBeforeUnmount(() => {
       dragSession?.dispose();
-      dragSession = null;
       stopObserving?.();
-      stopObserving = null;
+      window.clearTimeout(scrollTimer);
     });
     watch(
       () => [props.direction, props.minThumbSize],
@@ -195,8 +220,8 @@ var ScrollArea = defineComponent({
     );
     expose({
       scrollTo,
-      scrollToTop,
-      scrollToBottom,
+      scrollToTop: (behavior) => scrollTo({ top: 0, behavior }),
+      scrollToBottom: (behavior) => scrollTo({ top: viewportRef.value?.scrollHeight ?? 0, behavior }),
       getViewport: () => viewportRef.value,
       getState: () => scrollState.value
     });
@@ -205,14 +230,33 @@ var ScrollArea = defineComponent({
       if (!shouldRenderScrollAreaScrollbar(props.scrollbar, props.direction, axis, axisState)) {
         return null;
       }
+      const otherVisible = axis === "y" ? shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "x",
+        scrollState.value.x
+      ) : shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "y",
+        scrollState.value.y
+      );
       return h(
         "div",
         {
           key: `scrollbar-${axis}`,
           class: getScrollAreaScrollbarClasses(axis, props.scrollbarSize, props.scrollbar),
+          style: getScrollAreaScrollbarPlacementStyle(axis, props.scrollbarSize, otherVisible),
           "data-scroll-area-scrollbar": axis,
+          "data-dragging": draggingAxis.value === axis ? "" : void 0,
           "aria-hidden": "true",
-          onMousedown: (event) => handleTrackMouseDown(axis, event)
+          onPointerdown: (event) => handleTrackPointerDown(axis, event),
+          onWheel: (event) => {
+            const viewport = viewportRef.value;
+            if (!viewport) return;
+            applyScrollAreaWheel(event, viewport);
+            handleScroll();
+          }
         },
         [
           h("div", {
@@ -224,14 +268,50 @@ var ScrollArea = defineComponent({
       );
     }
     return () => {
+      const visibleY = shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "y",
+        scrollState.value.y
+      );
+      const visibleX = shouldRenderScrollAreaScrollbar(
+        props.scrollbar,
+        props.direction,
+        "x",
+        scrollState.value.x
+      );
+      const overflow = visibleY && scrollState.value.y.scrollable || visibleX && scrollState.value.x.scrollable;
+      const userTabIndex = typeof attrs.tabindex === "number" ? attrs.tabindex : typeof attrs.tabIndex === "number" ? attrs.tabIndex : void 0;
+      const tabIndex = resolveScrollAreaViewportTabIndex({
+        overflow,
+        hasFocusable: scrollAreaHasFocusable(contentRef.value),
+        userTabIndex
+      });
+      const labelledBy = attrs["aria-labelledby"] || void 0;
+      const attrLabel = attrs["aria-label"] || props.ariaLabel;
+      const viewportName = attrLabel || labelledBy || (tabIndex === 0 ? labels.value.ariaLabel : void 0);
+      const {
+        class: attrClass,
+        style: attrStyle,
+        tabindex: _t,
+        tabIndex: _t2,
+        ...rootAttrs
+      } = attrs;
       const shadows = props.shadow ? getScrollAreaShadowSides(scrollState.value, props.direction) : [];
+      const restRoot = {};
+      const restA11y = {};
+      for (const [key, value] of Object.entries(rootAttrs)) {
+        if (key.startsWith("aria-")) restA11y[key] = value;
+        else restRoot[key] = value;
+      }
       return h(
         "div",
         {
-          ...attrs,
-          class: classNames(scrollAreaRootClasses, props.className, coerceClassValue(attrs.class)),
-          style: mergeStyleValues(attrs.style),
-          "data-scroll-area": ""
+          ...restRoot,
+          class: classNames(scrollAreaRootClasses, props.className, coerceClassValue(attrClass)),
+          style: attrStyle,
+          "data-scroll-area": "",
+          "data-scrolling": scrolling.value ? "" : void 0
         },
         [
           h(
@@ -239,12 +319,40 @@ var ScrollArea = defineComponent({
             {
               ref: viewportRef,
               class: getScrollAreaViewportClasses(props.direction, props.viewportClassName),
-              style: getScrollAreaBoxStyle(props),
-              tabindex: 0,
-              role: props.ariaLabel ? "region" : void 0,
-              "aria-label": props.ariaLabel,
+              style: {
+                ...getScrollAreaBoxStyle(props),
+                ...getScrollAreaGutterStyle(props.scrollbarSize, visibleX, visibleY)
+              },
+              tabindex: tabIndex,
+              role: viewportName ? "region" : void 0,
+              "aria-label": attrLabel || (tabIndex === 0 ? labels.value.ariaLabel : void 0),
+              "aria-labelledby": labelledBy,
               "data-scroll-area-viewport": "",
-              onScroll: handleScroll
+              onScroll: handleScroll,
+              onKeydown: (event) => {
+                const viewport = viewportRef.value;
+                if (!viewport) return;
+                const delta = computeScrollAreaKeyboardDelta(
+                  event.key,
+                  props.direction,
+                  { width: viewport.clientWidth, height: viewport.clientHeight },
+                  readInlineDirection(viewport)
+                );
+                if (!delta) return;
+                event.preventDefault();
+                if ("to" in delta) {
+                  applyScroll(
+                    delta.axis,
+                    delta.to === "start" ? 0 : delta.axis === "y" ? viewport.scrollHeight : viewport.scrollWidth
+                  );
+                  return;
+                }
+                if (delta.axis === "y") applyScroll("y", viewport.scrollTop + delta.delta);
+                else {
+                  const logical = scrollState.value.x.progress * Math.max(viewport.scrollWidth - viewport.clientWidth, 0) + delta.delta;
+                  applyScroll("x", logical);
+                }
+              }
             },
             [
               h(
@@ -262,6 +370,7 @@ var ScrollArea = defineComponent({
             (side) => h("div", {
               key: `shadow-${side}`,
               class: getScrollAreaShadowClasses(side),
+              style: getScrollAreaShadowStyle(side),
               "data-scroll-area-shadow": side,
               "aria-hidden": "true"
             })