@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-UMQUWX7U.mjs → chunk-QD5ZCKPR.mjs}

@@ -1,13 +1,15 @@
 import {
   PieChart
-} from "./chunk-NDS2DLUS.mjs";
+} from "./chunk-AZXS4QWC.mjs";
 
 // src/components/DonutChart.ts
-import { defineComponent, computed, h } from "vue";
+import { defineComponent, computed, h, onMounted, ref } from "vue";
 import {
   classNames,
   getChartInnerRect,
-  normalizeChartPadding
+  normalizeChartPadding,
+  DONUT_ENTRANCE_KEYFRAMES,
+  DONUT_ENTRANCE_CLASS
 } from "@expcat/tigercat-core";
 var DONUT_PALETTE = [
   "var(--tiger-chart-1,#5470c6)",
@@ -113,6 +115,10 @@ var DonutChart = defineComponent({
       type: Number,
       default: 8
     },
+    legendFormatter: {
+      type: Function,
+      default: void 0
+    },
     // Tooltip props
     showTooltip: {
       type: Boolean,
@@ -173,6 +179,10 @@ var DonutChart = defineComponent({
   setup(props, { emit }) {
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const pad = computed(() => normalizeChartPadding(props.padding));
+    const entered = ref(false);
+    onMounted(() => {
+      if (props.animated) entered.value = true;
+    });
     const resolvedOuterRadius = computed(() => {
       if (typeof props.outerRadius === "number") return Math.max(0, props.outerRadius);
       return Math.max(0, Math.min(innerRect.value.width, innerRect.value.height) / 2);
@@ -245,6 +255,7 @@ var DonutChart = defineComponent({
         legendPosition: props.legendPosition,
         legendMarkerSize: props.legendMarkerSize,
         legendGap: props.legendGap,
+        legendFormatter: props.legendFormatter,
         showTooltip: props.showTooltip,
         tooltipFormatter: donutTooltipFormatter.value,
         title: props.title,
@@ -294,7 +305,18 @@ var DonutChart = defineComponent({
           ) : null
         ]
       ) : null;
-      return h("div", { class: "inline-block relative", "data-donut-chart": "true" }, [pie, center]);
+      const styleNode = props.animated && entered.value ? h("style", null, DONUT_ENTRANCE_KEYFRAMES) : null;
+      return h(
+        "div",
+        {
+          class: classNames(
+            "inline-block relative",
+            props.animated && entered.value && DONUT_ENTRANCE_CLASS
+          ),
+          "data-donut-chart": "true"
+        },
+        [styleNode, pie, center]
+      );
     };
   }
 });

package/dist/{chunk-NWS45JQP.mjs → chunk-RAO7ZJWR.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-R2HO74FE.mjs";
-import {
-  ChartLegend
-} from "./chunk-VVS2CQS4.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
+} from "./chunk-PE5OA4YG.mjs";
 import {
   ChartTooltip
-} from "./chunk-OK4PVFQG.mjs";
+} from "./chunk-SPFL55TF.mjs";
 import {
   ChartAxis
 } from "./chunk-ZWVA7HT3.mjs";
@@ -19,9 +13,15 @@ import {
 import {
   ChartGrid
 } from "./chunk-MI6TL3CQ.mjs";
+import {
+  ChartLegend
+} from "./chunk-HLPSHCXO.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
 
 // src/components/AreaChart.ts
-import { defineComponent, computed, h, ref, useId } from "vue";
+import { defineComponent, computed, getCurrentInstance, h, ref, useId } from "vue";
 import {
   classNames,
   createAreaPath,
@@ -249,12 +249,16 @@ var AreaChart = defineComponent({
     "point-hover"
   ],
   setup(props, { emit }) {
+    const instance = getCurrentInstance();
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
     const gradientPrefix = getStableChartGradientPrefix("area", useId());
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const resolvedSeries = computed(
-      () => resolveSeriesData(props.series, props.data)
+      () => resolveSeriesData(props.series, props.data, {
+        color: props.areaColor,
+        pointColor: props.pointColor
+      })
     );
     const {
       resolvedHoveredIndex: _resolvedHoveredIndex,
@@ -409,6 +413,18 @@ var AreaChart = defineComponent({
       hoveredPointInfo.value = null;
       emit("point-hover", null, null, null);
     };
+    const showPointTooltipFromElement = (el, seriesIndex, pointIndex) => {
+      if (!props.hoverable) return;
+      const rect = el.getBoundingClientRect();
+      hoveredPointInfo.value = { seriesIndex, pointIndex };
+      tooltipPosition.value = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+      emit(
+        "point-hover",
+        seriesIndex,
+        pointIndex,
+        resolvedSeries.value[seriesIndex]?.data[pointIndex]
+      );
+    };
     const handlePointClick = (seriesIndex, pointIndex) => {
       emit(
         "point-click",
@@ -425,6 +441,7 @@ var AreaChart = defineComponent({
       handleSeriesSelect(seriesIndex);
     };
     return () => {
+      const pointClickable = props.selectable || typeof instance?.vnode.props?.onPointClick === "function";
       const reversedSeriesData = [...seriesData.value].reverse();
       const chart = h(
         ChartCanvas,
@@ -633,6 +650,8 @@ var AreaChart = defineComponent({
                 sd.points.map((point) => {
                   const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
                   const hoverSize = sd.pointSize + 2;
+                  const datum = resolvedSeries.value[sd.seriesIndex]?.data?.[point.pointIndex];
+                  const pointInteractive = props.hoverable || pointClickable;
                   return h("circle", {
                     key: `point-${sd.seriesKey}-${point.pointIndex}`,
                     cx: point.x,
@@ -641,17 +660,46 @@ var AreaChart = defineComponent({
                     fill: sd.pointHollow ? "white" : props.pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     "stroke-width": sd.pointHollow ? 2 : 0,
-                    class: linePointTransitionClasses,
+                    class: classNames(
+                      linePointTransitionClasses,
+                      pointInteractive && "cursor-pointer"
+                    ),
                     style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
+                    role: pointInteractive ? "button" : "img",
+                    "aria-label": datum?.label ?? String(datum?.y ?? ""),
+                    tabindex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                    onMousemove: handlePointMouseMove,
-                    onMouseleave: handlePointMouseLeave,
-                    onClick: (e) => {
+                    onMouseenter: props.hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMousemove: props.hoverable ? handlePointMouseMove : void 0,
+                    onMouseleave: props.hoverable ? handlePointMouseLeave : void 0,
+                    onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);
-                    }
+                    } : void 0,
+                    onFocus: props.hoverable ? (e) => showPointTooltipFromElement(
+                      e.currentTarget,
+                      sd.seriesIndex,
+                      point.pointIndex
+                    ) : void 0,
+                    onBlur: props.hoverable ? handlePointMouseLeave : void 0,
+                    onKeydown: pointInteractive ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (pointClickable) {
+                          handlePointClick(sd.seriesIndex, point.pointIndex);
+                        } else {
+                          showPointTooltipFromElement(
+                            e.currentTarget,
+                            sd.seriesIndex,
+                            point.pointIndex
+                          );
+                        }
+                      } else if (e.key === "Escape" && props.hoverable) {
+                        handlePointMouseLeave();
+                      }
+                    } : void 0
                   });
                 })
               )
@@ -661,7 +709,7 @@ var AreaChart = defineComponent({
       );
       const tooltip = props.showTooltip ? h(ChartTooltip, {
         content: tooltipContent.value,
-        visible: hoveredPointInfo.value !== null && tooltipContent.value !== "",
+        open: hoveredPointInfo.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;

package/dist/{chunk-DOJPPVAN.mjs → chunk-RTZUIWCN.mjs}

@@ -177,7 +177,11 @@ var Timeline = defineComponent({
           h(
             "div",
             { class: timelineDescriptionClasses },
-            resolveLocaleText("Loading...", mergedLocale.value?.common?.loadingText)
+            resolveLocaleText(
+              "Loading...",
+              mergedLocale.value?.timeline?.pendingText,
+              mergedLocale.value?.common?.loadingText
+            )
           )
         ])
       ]);

package/dist/{chunk-OK4PVFQG.mjs → chunk-SPFL55TF.mjs}

@@ -1,6 +1,10 @@
 // src/components/ChartTooltip.ts
 import { defineComponent, h, computed, ref, watch, Teleport } from "vue";
-import { classNames, getChartTooltipTransform } from "@expcat/tigercat-core";
+import {
+  classNames,
+  getChartTooltipTransform,
+  resolveChartTooltipPosition
+} from "@expcat/tigercat-core";
 var ChartTooltip = defineComponent({
   name: "TigerChartTooltip",
   props: {
@@ -8,7 +12,7 @@ var ChartTooltip = defineComponent({
       type: String,
       required: true
     },
-    visible: {
+    open: {
       type: Boolean,
       default: false
     },
@@ -28,28 +32,27 @@ var ChartTooltip = defineComponent({
     const tooltipRef = ref(null);
     const adjustedPosition = ref({ x: props.x, y: props.y });
     watch(
-      () => [props.x, props.y, props.visible],
+      () => [props.x, props.y, props.open],
       (_value, _oldValue, onCleanup) => {
-        if (!props.visible) return;
-        let x = props.x + 12;
-        let y = props.y - 8;
+        if (!props.open) return;
+        const initialPosition = resolveChartTooltipPosition({
+          x: props.x,
+          y: props.y,
+          rect: { width: 0, height: 0 },
+          viewport: { width: window.innerWidth, height: window.innerHeight }
+        });
         const frameHandle = requestAnimationFrame(() => {
           if (!tooltipRef.value) return;
           const rect = tooltipRef.value.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const viewportHeight = window.innerHeight;
-          if (x + rect.width > viewportWidth - 8) {
-            x = props.x - rect.width - 12;
-          }
-          if (y + rect.height > viewportHeight - 8) {
-            y = props.y - rect.height - 8;
-          }
-          x = Math.max(8, x);
-          y = Math.max(8, y);
-          adjustedPosition.value = { x, y };
+          adjustedPosition.value = resolveChartTooltipPosition({
+            x: props.x,
+            y: props.y,
+            rect,
+            viewport: { width: window.innerWidth, height: window.innerHeight }
+          });
         });
         onCleanup(() => cancelAnimationFrame(frameHandle));
-        adjustedPosition.value = { x, y };
+        adjustedPosition.value = initialPosition;
       },
       { immediate: true }
     );
@@ -61,7 +64,7 @@ var ChartTooltip = defineComponent({
         "text-[color:var(--tiger-text-inverse,#f9fafb)]",
         "text-sm whitespace-nowrap",
         "transition-opacity duration-150",
-        props.visible ? "opacity-100" : "opacity-0",
+        props.open ? "opacity-100" : "opacity-0",
         props.className
       )
     );

package/dist/{chunk-6OQLZCQK.mjs → chunk-SYRRMZT2.mjs}

@@ -1,6 +1,6 @@
 import {
   useFloatingPopup
-} from "./chunk-M4EP4OVR.mjs";
+} from "./chunk-KE6RGD4Y.mjs";
 import {
   renderVueBodyTeleport
 } from "./chunk-BDTPFPSB.mjs";

package/dist/{chunk-A6T2IHFC.mjs → chunk-TM73IWEY.mjs}

@@ -1,7 +1,12 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/ImageAnnotation.ts
 import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
 import {
   classNames,
+  isActivationKey,
   coerceClassValue,
   createImageAnnotationBox,
   createImageAnnotationPath,
@@ -12,7 +17,7 @@ import {
   getImageAnnotationShapeAriaLabel,
   getImageAnnotationStrokeColor,
   getImageAnnotationToolButtonClasses,
-  getImageAnnotationToolLabel,
+  getImageEditorLabels,
   imageAnnotationContainerClasses,
   imageAnnotationDeleteButtonClasses,
   imageAnnotationImageClasses,
@@ -22,6 +27,7 @@ import {
   imageAnnotationStageClasses,
   imageAnnotationToolbarClasses,
   isBrowser,
+  mergeTigerLocale,
   mergeStyleValues,
   shouldCommitImageAnnotationBox
 } from "@expcat/tigercat-core";
@@ -29,6 +35,10 @@ var ImageAnnotation = defineComponent({
   name: "TigerImageAnnotation",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     src: { type: String, required: true },
     alt: { type: String, default: "Image to annotate" },
     modelValue: { type: Array, default: void 0 },
@@ -57,6 +67,16 @@ var ImageAnnotation = defineComponent({
   },
   emits: ["update:modelValue", "change", "select", "tool-change", "ready"],
   setup(props, { attrs, emit }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
+    const toolLabels = computed(() => ({
+      select: labels.value.selectToolText,
+      rectangle: labels.value.rectangleToolText,
+      ellipse: labels.value.ellipseToolText,
+      polygon: labels.value.polygonToolText,
+      freehand: labels.value.freehandToolText
+    }));
     const containerRef = ref(null);
     const overlayRef = ref(null);
     const idSeed = ref(0);
@@ -188,16 +208,18 @@ var ImageAnnotation = defineComponent({
       drawing.value = { tool: "polygon", start: points[0], points };
       draft.value = createImageAnnotationPath("polygon", "draft", points);
     };
+    const removeAnnotation = (annotation) => {
+      if (!canEdit.value) return;
+      const next = annotations.value.filter((item) => item.id !== annotation.id);
+      commitAnnotations(next, { type: "remove", annotation });
+      selectAnnotation(null);
+    };
     const removeSelectedAnnotation = () => {
       if (!canEdit.value || !activeSelectedId.value) return;
       const removed = annotations.value.find(
         (annotation) => annotation.id === activeSelectedId.value
       );
-      const next = annotations.value.filter(
-        (annotation) => annotation.id !== activeSelectedId.value
-      );
-      commitAnnotations(next, { type: "remove", annotation: removed });
-      selectAnnotation(null);
+      if (removed) removeAnnotation(removed);
     };
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -231,6 +253,21 @@ var ImageAnnotation = defineComponent({
           if (isDraft) return;
           event.stopPropagation();
           selectAnnotation(annotation);
+        },
+        // SVG `role="button"` does not fire click on Enter/Space natively, so
+        // wire keyboard activation (select) and Delete/Backspace (remove) here.
+        onKeydown: isDraft ? void 0 : (event) => {
+          if (isActivationKey(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+            selectAnnotation(annotation);
+            return;
+          }
+          if (event.key === "Delete" || event.key === "Backspace") {
+            event.preventDefault();
+            event.stopPropagation();
+            removeAnnotation(annotation);
+          }
         }
       };
       if (annotation.type === "rectangle") {
@@ -277,7 +314,10 @@ var ImageAnnotation = defineComponent({
       );
       const toolbar = h(
         "div",
-        { class: imageAnnotationToolbarClasses, "aria-label": "Annotation tools" },
+        {
+          class: imageAnnotationToolbarClasses,
+          "aria-label": labels.value.annotationToolbarAriaLabel
+        },
         [
           ...props.tools.map(
             (item) => h(
@@ -290,7 +330,7 @@ var ImageAnnotation = defineComponent({
                 "aria-pressed": activeTool.value === item,
                 onClick: () => setActiveTool(item)
               },
-              getImageAnnotationToolLabel(item)
+              toolLabels.value[item]
             )
           ),
           h(
@@ -301,7 +341,7 @@ var ImageAnnotation = defineComponent({
               disabled: !canEdit.value || !activeSelectedId.value,
               onClick: removeSelectedAnnotation
             },
-            "Delete"
+            labels.value.deleteText
           )
         ]
       );
@@ -330,7 +370,7 @@ var ImageAnnotation = defineComponent({
             width: displayWidth.value,
             height: displayHeight.value,
             viewBox: `0 0 ${displayWidth.value} ${displayHeight.value}`,
-            "aria-label": "Image annotation canvas",
+            "aria-label": labels.value.annotationCanvasAriaLabel,
             onMousedown: handleStageMouseDown,
             onClick: handleStageClick,
             onDblclick: commitPolygon
@@ -377,7 +417,7 @@ var ImageAnnotation = defineComponent({
               class: imageAnnotationStageClasses,
               style: imageLoaded.value ? { width: `${displayWidth.value}px` } : void 0,
               role: imageLoaded.value ? "application" : "img",
-              "aria-label": imageLoaded.value ? "Image annotation editor" : "Loading image for annotation"
+              "aria-label": imageLoaded.value ? labels.value.annotationEditorAriaLabel : labels.value.loadingAnnotationImageAriaLabel
             },
             stageChildren
           )

package/dist/{chunk-UANF7XE5.mjs → chunk-TQDN67YN.mjs}

@@ -14,11 +14,16 @@ import {
   createBackTopVisibilityController,
   mergeStyleValues,
   scrollToTop,
+  backTopBaseClasses,
   backTopButtonClasses,
   backTopContainerClasses,
   backTopHiddenClasses,
   backTopVisibleClasses,
-  backTopIconPath
+  backTopIconPath,
+  getViewportOffsetStyle,
+  isBrowser,
+  viewportFloatingBaseClasses,
+  viewportPlacementClasses
 } from "@expcat/tigercat-core";
 var DefaultIcon = h(
   "svg",
@@ -51,7 +56,7 @@ var BackTop = defineComponent({
      */
     target: {
       type: Function,
-      default: () => window
+      default: () => isBrowser() ? window : null
     },
     /**
      * Use immediate scroll when set to 0; positive values use native smooth scrolling
@@ -61,6 +66,18 @@ var BackTop = defineComponent({
       type: Number,
       default: 450
     },
+    position: {
+      type: String,
+      default: "auto"
+    },
+    placement: {
+      type: String,
+      default: "bottom-right"
+    },
+    offset: {
+      type: [Number, String, Object],
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -81,7 +98,8 @@ var BackTop = defineComponent({
       emit("click", event);
     };
     onMounted(() => {
-      targetElement.value = props.target() ?? window;
+      targetElement.value = props.target() ?? (isBrowser() ? window : null);
+      if (!targetElement.value) return;
       visibilityController = createBackTopVisibilityController({
         target: targetElement.value,
         getVisibilityHeight: () => props.visibilityHeight,
@@ -101,9 +119,13 @@ var BackTop = defineComponent({
       visibilityController?.cancel();
     });
     const buttonClasses = computed(() => {
-      const target = targetElement.value ?? props.target();
+      const target = targetElement.value ?? (isBrowser() ? props.target() : null);
       const isWindowTarget = !target || target === window;
-      const positionClasses = isWindowTarget ? backTopButtonClasses : backTopContainerClasses;
+      const positionClasses = props.position === "fixed" ? classNames(
+        viewportFloatingBaseClasses,
+        viewportPlacementClasses[props.placement],
+        backTopBaseClasses
+      ) : props.position === "sticky" ? backTopContainerClasses : isWindowTarget ? backTopButtonClasses : backTopContainerClasses;
       return classNames(
         positionClasses,
         visible.value ? backTopVisibleClasses : backTopHiddenClasses,
@@ -111,7 +133,13 @@ var BackTop = defineComponent({
         coerceClassValue(attrs.class)
       );
     });
-    const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const mergedStyle = computed(
+      () => mergeStyleValues(
+        props.position === "fixed" ? getViewportOffsetStyle(props.placement, props.offset) : void 0,
+        attrs.style,
+        props.style
+      )
+    );
     return () => {
       const content = slots.default ? slots.default() : DefaultIcon;
       return h(

package/dist/{chunk-SC3WTLKG.mjs → chunk-UD4FNMJN.mjs}

@@ -100,10 +100,17 @@ var Carousel = defineComponent({
       default: 500
     },
     /**
-     * Initial slide index (0-based)
+     * Controlled current slide index (0-based)
+     */
+    currentIndex: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Initial current slide index for uncontrolled usage
      * @default 0
      */
-    initialSlide: {
+    defaultCurrentIndex: {
       type: Number,
       default: 0
     },
@@ -138,15 +145,22 @@ var Carousel = defineComponent({
       default: void 0
     }
   },
-  emits: ["change", "before-change"],
+  emits: ["change", "before-change", "update:currentIndex"],
   setup(props, { slots, emit, attrs, expose }) {
-    const currentIndex = ref(props.initialSlide);
+    const internalCurrentIndex = ref(props.defaultCurrentIndex);
     const isPaused = ref(false);
     const slideCount = ref(0);
     const containerRef = ref(null);
     let autoplayController = null;
     let touchStartPoint = null;
     let touchCurrentPoint = null;
+    const isControlled = computed(() => props.currentIndex !== void 0);
+    const currentIndex = computed(
+      () => clampSlideIndex(
+        isControlled.value ? props.currentIndex : internalCurrentIndex.value,
+        slideCount.value
+      )
+    );
     const containerClasses = computed(() => {
       return classNames(getCarouselContainerClasses(props.className), coerceClassValue(attrs.class));
     });
@@ -202,7 +216,10 @@ var Carousel = defineComponent({
       }
       emit("before-change", currentIndex.value, clampedIndex);
       const prevIndex = currentIndex.value;
-      currentIndex.value = clampedIndex;
+      if (!isControlled.value) {
+        internalCurrentIndex.value = clampedIndex;
+      }
+      emit("update:currentIndex", clampedIndex);
       emit("change", clampedIndex, prevIndex);
     };
     const startAutoplay = () => {