@expcat/tigercat-vue 2.0.19 → 2.1.1

package/dist/chunk-3ONCXHE5.mjs

@@ -0,0 +1,184 @@
+// src/components/Marquee.ts
+import { defineComponent, h, ref } from "vue";
+import {
+  composeComponentClasses,
+  getMarqueeContentClasses,
+  getMarqueeRootClasses,
+  getMarqueeTrackClasses,
+  getMarqueeTrackStyle,
+  injectMarqueeStyles,
+  isMarqueeFocusInside,
+  isMarqueePaused,
+  mergeStyleValues,
+  resolveMarqueeAriaLabel,
+  resolveMarqueeDirection,
+  resolveMarqueePauseOnHover,
+  resolveMarqueeRepeat
+} from "@expcat/tigercat-core";
+var Marquee = defineComponent({
+  name: "TigerMarquee",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Scroll direction
+     * @default 'left'
+     */
+    direction: {
+      type: String,
+      default: "left"
+    },
+    /**
+     * Time for one full loop, in milliseconds
+     * @default 20000
+     */
+    duration: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Pause looping while hovered or while focus is inside the region
+     * @default true
+     */
+    pauseOnHover: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Gap between items and between duplicated copies.
+     * A number is pixels; a string is a CSS length.
+     * @default 16
+     */
+    gap: {
+      type: [Number, String],
+      default: void 0
+    },
+    /**
+     * How many copies of the content to render for a seamless loop.
+     * Values below 2 skip looping and show a single static copy.
+     * @default 2
+     */
+    repeat: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Accessible name for the region
+     * @default 'Scrolling content'
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    injectMarqueeStyles();
+    const hovered = ref(false);
+    const focused = ref(false);
+    function callAttrHandler(handler, event) {
+      if (typeof handler === "function") {
+        const listener = handler;
+        listener(event);
+      }
+    }
+    return () => {
+      const attrsRecord = attrs;
+      const direction = resolveMarqueeDirection(props.direction);
+      const pauseOnHover = resolveMarqueePauseOnHover(props.pauseOnHover);
+      const copies = resolveMarqueeRepeat(props.repeat);
+      const paused = isMarqueePaused({
+        pauseOnHover,
+        hovered: hovered.value,
+        focused: focused.value
+      });
+      const attrAriaLabel = typeof attrsRecord["aria-label"] === "string" ? attrsRecord["aria-label"] : void 0;
+      const ariaLabel = resolveMarqueeAriaLabel(attrAriaLabel ?? props.ariaLabel);
+      const contentCopies = Array.from({ length: copies }, (_, index) => {
+        const clone = index > 0;
+        return h(
+          "div",
+          {
+            class: getMarqueeContentClasses({ direction, clone }),
+            "data-marquee-content": "",
+            ...clone ? { "data-marquee-clone": "", "aria-hidden": "true" } : {}
+          },
+          slots.default?.()
+        );
+      });
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getMarqueeRootClasses({
+              direction,
+              pauseOnHover,
+              repeat: copies,
+              className: props.className
+            }),
+            attrsRecord.class
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          role: "region",
+          "aria-label": ariaLabel,
+          "data-marquee": "",
+          "data-marquee-direction": direction,
+          "data-marquee-paused": paused ? "true" : "false",
+          "data-marquee-pause-on-hover": pauseOnHover ? "true" : "false",
+          onMouseenter: (event) => {
+            if (pauseOnHover) hovered.value = true;
+            callAttrHandler(attrsRecord.onMouseenter, event);
+          },
+          onMouseleave: (event) => {
+            if (pauseOnHover) hovered.value = false;
+            callAttrHandler(attrsRecord.onMouseleave, event);
+          },
+          onFocusin: (event) => {
+            if (pauseOnHover) focused.value = true;
+            callAttrHandler(attrsRecord.onFocusin, event);
+          },
+          onFocusout: (event) => {
+            if (pauseOnHover && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
+              focused.value = false;
+            }
+            callAttrHandler(attrsRecord.onFocusout, event);
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              class: getMarqueeTrackClasses(direction),
+              style: getMarqueeTrackStyle({
+                duration: props.duration,
+                gap: props.gap,
+                repeat: copies
+              }),
+              "data-marquee-track": ""
+            },
+            contentCopies
+          )
+        ]
+      );
+    };
+  }
+});
+var Marquee_default = Marquee;
+
+export {
+  Marquee,
+  Marquee_default
+};

package/dist/{chunk-4HUYX5WW.mjs → chunk-4PQZMDBK.mjs}

@@ -11,15 +11,24 @@ import {
   colorPickerPanelClasses,
   colorPickerInputClasses,
   colorPickerPresetClasses,
-  hexToRgb,
   rgbToHex,
   rgbToHsv,
   hsvToRgb,
   formatColorString,
   parseColorInput,
+  parseColorParts,
   classNames,
   coerceClassValue
 } from "@expcat/tigercat-core";
+function rgbFromValue(value) {
+  const parts = parseColorParts(value);
+  return parts ? { r: parts.r, g: parts.g, b: parts.b } : { r: 0, g: 0, b: 0 };
+}
+function explicitAlphaFromValue(value) {
+  if (!/^(rgba|hsla)\(/i.test(value.trim())) return null;
+  const parts = parseColorParts(value);
+  return parts ? parts.a : null;
+}
 var ColorPicker = defineComponent({
   name: "TigerColorPicker",
   props: {
@@ -33,7 +42,7 @@ var ColorPicker = defineComponent({
   emits: ["update:modelValue", "change"],
   setup(props, { emit, attrs }) {
     const isOpen = ref(false);
-    const alpha = ref(1);
+    const alpha = ref(explicitAlphaFromValue(props.modelValue) ?? 1);
     const containerRef = ref(null);
     const triggerRef = ref(null);
     const panelRef = ref(null);
@@ -49,8 +58,15 @@ var ColorPicker = defineComponent({
       restoreFocusOnDismiss: true,
       onDismiss: closePanel
     });
-    const rgb = computed(() => hexToRgb(props.modelValue));
+    const rgb = computed(() => rgbFromValue(props.modelValue));
     const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
+    watch(
+      () => props.modelValue,
+      (value) => {
+        const next = explicitAlphaFromValue(value);
+        if (next !== null) alpha.value = next;
+      }
+    );
     const displayValue = computed(
       () => formatColorString(
         rgb.value.r,
@@ -84,7 +100,12 @@ var ColorPicker = defineComponent({
       }
     }
     function handleAlphaChange(e) {
-      alpha.value = Number(e.target.value) / 100;
+      const nextAlpha = Number(e.target.value) / 100;
+      alpha.value = nextAlpha;
+      const format = props.format === "hex" ? "rgb" : props.format;
+      const next = formatColorString(rgb.value.r, rgb.value.g, rgb.value.b, format, nextAlpha);
+      emit("update:modelValue", next);
+      emit("change", next);
     }
     function handleHueChange(e) {
       const hue = Number(e.target.value);
@@ -96,10 +117,10 @@ var ColorPicker = defineComponent({
     function handleInputChange(e) {
       const val = e.target.value;
       inputValue.value = val;
-      const hex = parseColorInput(val);
-      if (hex) {
-        emit("update:modelValue", hex);
-        emit("change", hex);
+      const parsed = parseColorInput(val);
+      if (parsed) {
+        emit("update:modelValue", parsed);
+        emit("change", parsed);
       }
     }
     function handlePresetClick(color) {

package/dist/{chunk-DI6RRAGQ.mjs → chunk-562Z32GR.mjs}

@@ -1,15 +1,15 @@
 import {
   Table
-} from "./chunk-AU6IC6K7.mjs";
+} from "./chunk-ABNS4B5V.mjs";
 import {
   Select
 } from "./chunk-BZ6MVFV7.mjs";
 import {
   Popover
-} from "./chunk-OQVGB7X6.mjs";
+} from "./chunk-626VUZ2Q.mjs";
 import {
   Input
-} from "./chunk-XLNK3Z2P.mjs";
+} from "./chunk-POWDTOMF.mjs";
 import {
   Checkbox
 } from "./chunk-MYKKKVGK.mjs";

package/dist/{chunk-OQVGB7X6.mjs → chunk-626VUZ2Q.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-26OI3TEA.mjs";
+} from "./chunk-PMQSXEMT.mjs";
 import {
   renderVueOverlayTeleport
 } from "./chunk-Q7Y22OFX.mjs";

package/dist/{chunk-WUQMFKQ6.mjs → chunk-67VS6QHJ.mjs}

@@ -1,6 +1,12 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-UEGNXN5B.mjs";
 import {
   useChartInteraction
-} from "./chunk-PE5OA4YG.mjs";
+} from "./chunk-FHUGOSEY.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 import {
   ChartTooltip
 } from "./chunk-SPFL55TF.mjs";
@@ -9,16 +15,13 @@ import {
 } from "./chunk-ZWVA7HT3.mjs";
 import {
   ChartCanvas
-} from "./chunk-W5RZPTFD.mjs";
+} from "./chunk-SNNT64HK.mjs";
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
 import {
   ChartLegend
 } from "./chunk-V443QIJM.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
@@ -29,7 +32,6 @@ import {
   classNames,
   createLinearScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getNumberExtent,
   getStableChartGradientPrefix,
   getScatterHoverShadow,
@@ -158,6 +160,7 @@ var ScatterChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
+      showTooltip: computed(() => props.showTooltip),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
@@ -168,7 +171,12 @@ var ScatterChart = defineComponent({
       getData: (index) => props.data[index],
       eventNames: { hover: "point-hover", click: "point-click" }
     });
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
     const xValues = computed(() => props.data.map((item) => item.x));
     const yValues = computed(() => props.data.map((item) => item.y));
     const resolvedXScale = computed(() => {
@@ -252,7 +260,8 @@ var ScatterChart = defineComponent({
           responsive: props.responsive,
           title: props.title,
           desc: props.desc,
-          className: classNames(props.className)
+          className: classNames(props.className),
+          onResolvedSizeChange
         },
         {
           default: () => [
@@ -330,19 +339,24 @@ var ScatterChart = defineComponent({
                       ...shared
                     });
                   }
-                  return h("path", {
-                    key: `point-${index}`,
-                    d: getScatterPointPath(props.pointStyle, point.r),
-                    transform: `translate(${point.cx},${point.cy})`,
-                    ...shared
-                  });
+                  return h(
+                    "g",
+                    {
+                      key: `point-${index}`,
+                      transform: `translate(${point.cx},${point.cy})`
+                    },
+                    h("path", {
+                      d: getScatterPointPath(props.pointStyle, point.r),
+                      ...shared
+                    })
+                  );
                 })
               }
             )
           ].filter(Boolean)
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
         open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,

package/dist/chunk-6GR3XC5V.mjs

@@ -0,0 +1,281 @@
+// src/components/ScrollArea.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  shallowRef,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  computeScrollAreaState,
+  computeScrollFromThumbOffset,
+  computeScrollFromTrackPoint,
+  createDocumentDragSession,
+  createEmptyScrollAreaState,
+  getScrollAreaBoxStyle,
+  getScrollAreaContentClasses,
+  getScrollAreaScrollbarClasses,
+  getScrollAreaShadowClasses,
+  getScrollAreaShadowSides,
+  getScrollAreaThumbClasses,
+  getScrollAreaThumbStyle,
+  getScrollAreaViewportClasses,
+  observeScrollAreaSize,
+  readScrollAreaMetrics,
+  scrollAreaRootClasses,
+  shouldRenderScrollAreaScrollbar,
+  SCROLL_AREA_MIN_THUMB_SIZE
+} from "@expcat/tigercat-core";
+var ScrollArea = defineComponent({
+  name: "TigerScrollArea",
+  inheritAttrs: false,
+  props: {
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    scrollbar: {
+      type: String,
+      default: "auto"
+    },
+    scrollbarSize: {
+      type: String,
+      default: "md"
+    },
+    shadow: { type: Boolean, default: false },
+    minThumbSize: { type: Number, default: SCROLL_AREA_MIN_THUMB_SIZE },
+    height: { type: [Number, String], default: void 0 },
+    maxHeight: { type: [Number, String], default: void 0 },
+    width: { type: [Number, String], default: void 0 },
+    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 }
+  },
+  emits: ["scroll"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const viewportRef = ref(null);
+    const contentRef = ref(null);
+    const scrollState = shallowRef(createEmptyScrollAreaState());
+    const draggingAxis = ref(null);
+    let dragSession = null;
+    let stopObserving = null;
+    function syncState() {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      scrollState.value = computeScrollAreaState(
+        readScrollAreaMetrics(viewport),
+        props.minThumbSize
+      );
+    }
+    function handleScroll() {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      syncState();
+      emit("scroll", {
+        scrollTop: viewport.scrollTop,
+        scrollLeft: viewport.scrollLeft,
+        state: scrollState.value
+      });
+    }
+    function applyScroll(axis, position) {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      if (axis === "y") viewport.scrollTop = position;
+      else viewport.scrollLeft = position;
+      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;
+      event.preventDefault();
+      event.stopPropagation();
+      const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
+      const startOffset = axisState.thumbOffset;
+      const startPoint = axis === "y" ? event.clientY : event.clientX;
+      dragSession?.dispose();
+      draggingAxis.value = axis;
+      dragSession = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        ownerDocument: viewport.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const current = axis === "y" ? currentY : currentX;
+          const trackSize = trackSizeOf(axis);
+          applyScroll(
+            axis,
+            computeScrollFromThumbOffset(
+              startOffset + (current - startPoint),
+              trackSize,
+              axisState.thumbSize,
+              scrollSizeOf(axis),
+              trackSize
+            )
+          );
+        },
+        onEnd: () => {
+          draggingAxis.value = null;
+          dragSession = null;
+        }
+      });
+    }
+    function handleTrackMouseDown(axis, event) {
+      const target = event.target;
+      if (target?.dataset.scrollAreaThumb) {
+        startThumbDrag(axis, event);
+        return;
+      }
+      const track = event.currentTarget;
+      const rect = track.getBoundingClientRect();
+      const point = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+      const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
+      const trackSize = trackSizeOf(axis);
+      applyScroll(
+        axis,
+        computeScrollFromTrackPoint(
+          point,
+          trackSize,
+          axisState.thumbSize,
+          scrollSizeOf(axis),
+          trackSize
+        )
+      );
+    }
+    function scrollTo(options) {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      const behavior = options.behavior ?? "auto";
+      if (typeof viewport.scrollTo === "function") {
+        viewport.scrollTo({ top: options.top, left: options.left, behavior });
+      } else {
+        if (options.top !== void 0) viewport.scrollTop = options.top;
+        if (options.left !== void 0) viewport.scrollLeft = options.left;
+      }
+      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;
+    });
+    watch(
+      () => [props.direction, props.minThumbSize],
+      () => {
+        void nextTick(syncState);
+      }
+    );
+    expose({
+      scrollTo,
+      scrollToTop,
+      scrollToBottom,
+      getViewport: () => viewportRef.value,
+      getState: () => scrollState.value
+    });
+    function renderScrollbar(axis) {
+      const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
+      if (!shouldRenderScrollAreaScrollbar(props.scrollbar, props.direction, axis, axisState)) {
+        return null;
+      }
+      return h(
+        "div",
+        {
+          key: `scrollbar-${axis}`,
+          class: getScrollAreaScrollbarClasses(axis, props.scrollbarSize, props.scrollbar),
+          "data-scroll-area-scrollbar": axis,
+          "aria-hidden": "true",
+          onMousedown: (event) => handleTrackMouseDown(axis, event)
+        },
+        [
+          h("div", {
+            class: getScrollAreaThumbClasses(axis, draggingAxis.value === axis),
+            style: getScrollAreaThumbStyle(axis, axisState),
+            "data-scroll-area-thumb": axis
+          })
+        ]
+      );
+    }
+    return () => {
+      const shadows = props.shadow ? getScrollAreaShadowSides(scrollState.value, props.direction) : [];
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(scrollAreaRootClasses, props.className, coerceClassValue(attrs.class)),
+          style: mergeStyleValues(attrs.style),
+          "data-scroll-area": ""
+        },
+        [
+          h(
+            "div",
+            {
+              ref: viewportRef,
+              class: getScrollAreaViewportClasses(props.direction, props.viewportClassName),
+              style: getScrollAreaBoxStyle(props),
+              tabindex: 0,
+              role: props.ariaLabel ? "region" : void 0,
+              "aria-label": props.ariaLabel,
+              "data-scroll-area-viewport": "",
+              onScroll: handleScroll
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: contentRef,
+                  class: getScrollAreaContentClasses(props.direction),
+                  "data-scroll-area-content": ""
+                },
+                slots.default?.()
+              )
+            ]
+          ),
+          ...shadows.map(
+            (side) => h("div", {
+              key: `shadow-${side}`,
+              class: getScrollAreaShadowClasses(side),
+              "data-scroll-area-shadow": side,
+              "aria-hidden": "true"
+            })
+          ),
+          renderScrollbar("y"),
+          renderScrollbar("x")
+        ]
+      );
+    };
+  }
+});
+var ScrollArea_default = ScrollArea;
+
+export {
+  ScrollArea,
+  ScrollArea_default
+};