@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-HSXB2ASL.mjs → chunk-WLRLKW2W.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
-import { imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, classNames, imageViewerNavBtnClasses, imageViewerImgClasses, imageViewerToolbarBtnClasses, imageViewerToolbarClasses, imageViewerBackdropClasses, coerceClassValue, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
+import { createDefaultTransform, createPanState, createPinchState, imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, classNames, imageViewerNavBtnClasses, getImageTransformStyle, imageViewerImgClasses, imageViewerToolbarBtnClasses, imageViewerToolbarClasses, imageViewerBackdropClasses, coerceClassValue, movePinch, movePan, startPinch, startPan, applyWheelZoom, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
 
 // src/components/ImageViewer.ts
 function createSvgIcon(pathD, label) {
@@ -70,41 +70,112 @@ var ImageViewer = defineComponent({
   emits: ["update:open", "update:currentIndex", "close"],
   setup(props, { emit, attrs }) {
     const index = ref(props.currentIndex);
-    const zoom = ref(1);
-    const rotation = ref(0);
+    const transform = ref(createDefaultTransform());
+    let panState = createPanState();
+    let pinchState = createPinchState();
     watch(
       () => props.currentIndex,
       (val) => {
         index.value = val;
       }
     );
+    function resetTransform() {
+      transform.value = createDefaultTransform();
+      panState = createPanState();
+      pinchState = createPinchState();
+    }
     const handleClose = () => {
       emit("update:open", false);
       emit("close");
     };
     const handlePrev = () => {
       index.value = (index.value - 1 + props.images.length) % props.images.length;
-      zoom.value = 1;
-      rotation.value = 0;
+      resetTransform();
       emit("update:currentIndex", index.value);
     };
     const handleNext = () => {
       index.value = (index.value + 1) % props.images.length;
-      zoom.value = 1;
-      rotation.value = 0;
+      resetTransform();
       emit("update:currentIndex", index.value);
     };
     const handleZoomIn = () => {
-      zoom.value = clampZoom(zoom.value + 0.25, props.minZoom, props.maxZoom);
+      transform.value = {
+        ...transform.value,
+        scale: clampZoom(transform.value.scale + 0.25, props.minZoom, props.maxZoom)
+      };
     };
     const handleZoomOut = () => {
-      zoom.value = clampZoom(zoom.value - 0.25, props.minZoom, props.maxZoom);
+      transform.value = {
+        ...transform.value,
+        scale: clampZoom(transform.value.scale - 0.25, props.minZoom, props.maxZoom)
+      };
     };
     const handleRotateLeft = () => {
-      rotation.value = normalizeRotation(rotation.value - 90);
+      transform.value = {
+        ...transform.value,
+        rotation: normalizeRotation(transform.value.rotation - 90)
+      };
     };
     const handleRotateRight = () => {
-      rotation.value = normalizeRotation(rotation.value + 90);
+      transform.value = {
+        ...transform.value,
+        rotation: normalizeRotation(transform.value.rotation + 90)
+      };
+    };
+    const handleWheel = (e) => {
+      if (!props.zoomable) return;
+      e.preventDefault();
+      const newScale = applyWheelZoom(transform.value.scale, e.deltaY, {
+        minZoom: props.minZoom,
+        maxZoom: props.maxZoom
+      });
+      transform.value = { ...transform.value, scale: newScale };
+    };
+    const handleMouseDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      panState = startPan(e.clientX, e.clientY, transform.value.translateX, transform.value.translateY);
+    };
+    const handleMouseMove = (e) => {
+      if (!panState.isPanning) return;
+      const result = movePan(panState, e.clientX, e.clientY);
+      transform.value = { ...transform.value, ...result };
+    };
+    const handleMouseUp = () => {
+      panState = createPanState();
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2 && props.zoomable) {
+        e.preventDefault();
+        pinchState = startPinch(e.touches[0], e.touches[1], transform.value.scale);
+      } else if (e.touches.length === 1) {
+        panState = startPan(
+          e.touches[0].clientX,
+          e.touches[0].clientY,
+          transform.value.translateX,
+          transform.value.translateY
+        );
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && pinchState.isPinching) {
+        e.preventDefault();
+        const newScale = movePinch(
+          pinchState,
+          e.touches[0],
+          e.touches[1],
+          props.minZoom,
+          props.maxZoom
+        );
+        transform.value = { ...transform.value, scale: newScale };
+      } else if (e.touches.length === 1 && panState.isPanning) {
+        const result = movePan(panState, e.touches[0].clientX, e.touches[0].clientY);
+        transform.value = { ...transform.value, ...result };
+      }
+    };
+    const handleTouchEnd = () => {
+      pinchState = createPinchState();
+      panState = createPanState();
     };
     const handleKeydown = (e) => {
       if (!props.open) return;
@@ -180,9 +251,18 @@ var ImageViewer = defineComponent({
           src: props.images[index.value],
           alt: `Image ${index.value + 1}`,
           style: {
-            transform: `scale(${zoom.value}) rotate(${rotation.value}deg)`
+            transform: getImageTransformStyle(transform.value)
           },
-          draggable: false
+          draggable: false,
+          onWheel: handleWheel,
+          onMousedown: handleMouseDown,
+          onMousemove: handleMouseMove,
+          onMouseup: handleMouseUp,
+          onMouseleave: handleMouseUp,
+          onTouchstart: handleTouchStart,
+          onTouchmove: handleTouchMove,
+          onTouchend: handleTouchEnd,
+          onTouchcancel: handleTouchEnd
         })
       );
       const toolbarButtons = [];

package/dist/{chunk-KYQAAQKV.mjs → chunk-WOFQV2N7.mjs}

@@ -1,10 +1,10 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, getFunnelGradientPrefix, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 
 var FunnelChart = defineComponent({
   name: "TigerFunnelChart",
@@ -17,6 +17,7 @@ var FunnelChart = defineComponent({
     gap: { type: Number, default: 2 },
     pinch: { type: Boolean, default: false },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -78,6 +79,7 @@ var FunnelChart = defineComponent({
       })
     );
     const total = computed(() => props.data.reduce((s, d) => s + d.value, 0));
+    const gradientPrefix = getFunnelGradientPrefix();
     const legendItems = computed(
       () => buildChartLegendItems({
         data: props.data,
@@ -113,6 +115,31 @@ var FunnelChart = defineComponent({
         },
         {
           default: () => {
+            const defs = props.gradient ? h(
+              "defs",
+              {},
+              segments.value.map(
+                (seg) => h(
+                  "linearGradient",
+                  {
+                    key: `grad-${seg.index}`,
+                    id: `${gradientPrefix}-${seg.index}`,
+                    x1: 0,
+                    y1: 0,
+                    x2: 0,
+                    y2: 1
+                  },
+                  [
+                    h("stop", { offset: "0%", "stop-color": seg.color, "stop-opacity": 1 }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": seg.color,
+                      "stop-opacity": 0.55
+                    })
+                  ]
+                )
+              )
+            ) : null;
             const paths = h(
               ChartSeries,
               { data: props.data, type: "funnel" },
@@ -125,7 +152,7 @@ var FunnelChart = defineComponent({
                   return h("path", {
                     key: `seg-${seg.index}`,
                     d: seg.path,
-                    fill: seg.color,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
                     opacity,
                     class: classNames(interactive && "cursor-pointer"),
                     style: {
@@ -157,7 +184,7 @@ var FunnelChart = defineComponent({
                 seg.label
               )
             );
-            return [paths, ...labels];
+            return [defs, paths, ...labels].filter(Boolean);
           }
         }
       );

package/dist/{chunk-W2WGLETE.mjs → chunk-WOVUC5FQ.mjs}

@@ -1,10 +1,10 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartLegend } from './chunk-VVS2CQS4.mjs';
 import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
 import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, resolveChartPalette, computeSunburstArcs, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, getSunburstGradientPrefix, computeSunburstArcs, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
 
 var SunburstChart = defineComponent({
   name: "TigerSunburstChart",
@@ -16,6 +16,7 @@ var SunburstChart = defineComponent({
     innerRadiusRatio: { type: Number, default: 0 },
     showLabels: { type: Boolean, default: true },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -69,6 +70,7 @@ var SunburstChart = defineComponent({
     });
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const palette = computed(() => resolveChartPalette(props.colors));
+    const gradientPrefix = getSunburstGradientPrefix();
     const outerRadius = computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2);
     const innerRadius = computed(
       () => outerRadius.value * Math.max(0, Math.min(1, props.innerRadiusRatio))
@@ -115,35 +117,71 @@ var SunburstChart = defineComponent({
           className: classNames(props.className)
         },
         {
-          default: () => h(
-            ChartSeries,
-            { data: arcs.value, type: "sunburst" },
-            {
-              default: () => arcs.value.map((arc) => {
-                const opacity = getChartElementOpacity(arc.index, activeIndex.value, {
-                  activeOpacity: props.activeOpacity,
-                  inactiveOpacity: props.inactiveOpacity
-                });
-                return h("path", {
-                  key: `arc-${arc.index}`,
-                  d: arc.path,
-                  fill: arc.color,
-                  opacity,
-                  stroke: "#ffffff",
-                  "stroke-width": 1,
-                  class: classNames(interactive && "cursor-pointer"),
-                  style: { transition: "opacity 0.2s ease-out" },
-                  tabindex: props.selectable ? 0 : void 0,
-                  role: props.selectable ? "button" : "img",
-                  "aria-label": arc.label,
-                  onMouseenter: (e) => handleMouseEnter(arc.index, e),
-                  onMousemove: handleMouseMove,
-                  onMouseleave: handleMouseLeave,
-                  onClick: () => handleClick(arc.index)
-                });
-              })
-            }
-          )
+          default: () => {
+            const gradientDefs = props.gradient ? h(
+              "defs",
+              null,
+              arcs.value.map(
+                (arc) => h(
+                  "linearGradient",
+                  {
+                    id: `${gradientPrefix}-${arc.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": arc.color,
+                      "stop-opacity": "1"
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": arc.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              )
+            ) : null;
+            return h(
+              ChartSeries,
+              { data: arcs.value, type: "sunburst" },
+              {
+                default: () => [
+                  gradientDefs,
+                  ...arcs.value.map((arc) => {
+                    const opacity = getChartElementOpacity(arc.index, activeIndex.value, {
+                      activeOpacity: props.activeOpacity,
+                      inactiveOpacity: props.inactiveOpacity
+                    });
+                    return h("path", {
+                      key: `arc-${arc.index}`,
+                      d: arc.path,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
+                      opacity,
+                      stroke: "var(--tiger-surface,#ffffff)",
+                      "stroke-width": 1,
+                      class: classNames(interactive && "cursor-pointer"),
+                      style: {
+                        transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                        filter: activeIndex.value === arc.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
+                      },
+                      tabindex: props.selectable ? 0 : void 0,
+                      role: props.selectable ? "button" : "img",
+                      "aria-label": arc.label,
+                      onMouseenter: (e) => handleMouseEnter(arc.index, e),
+                      onMousemove: handleMouseMove,
+                      onMouseleave: handleMouseLeave,
+                      onClick: () => handleClick(arc.index)
+                    });
+                  })
+                ]
+              }
+            );
+          }
         }
       );
       const tooltip = props.showTooltip && props.hoverable ? h(ChartTooltip, {

package/dist/{chunk-665NGSV3.mjs → chunk-WPEFGEAK.mjs}

@@ -1,8 +1,7 @@
-import { init_ImagePreview, ImagePreview } from './chunk-ZUVR5UZL.mjs';
+import { ImagePreview } from './chunk-RKU54YLW.mjs';
 import { defineComponent, ref, provide, onBeforeUnmount, h } from 'vue';
+import { getImageGroupClasses, unregisterImageGroupItem, registerImageGroupItem } from '@expcat/tigercat-core';
 
-// src/components/ImageGroup.ts
-init_ImagePreview();
 var IMAGE_GROUP_INJECTION_KEY = "tiger-image-group";
 var ImageGroup = defineComponent({
   name: "TigerImageGroup",
@@ -16,15 +15,12 @@ var ImageGroup = defineComponent({
     const previewIndex = ref(0);
     const context = {
       register(src) {
-        const idx = images.value.length;
-        images.value.push(src);
-        return idx;
+        const result = registerImageGroupItem(images.value, src);
+        images.value = result.items;
+        return result.index;
       },
       unregister(src) {
-        const idx = images.value.indexOf(src);
-        if (idx > -1) {
-          images.value.splice(idx, 1);
-        }
+        images.value = unregisterImageGroupItem(images.value, src);
       },
       openPreview(index) {
         if (!props.preview) return;
@@ -51,7 +47,7 @@ var ImageGroup = defineComponent({
           previewIndex.value = val;
         }
       }) : null;
-      return h("div", { class: "tiger-image-group", role: "group" }, [children, preview]);
+      return h("div", { class: getImageGroupClasses(), role: "group" }, [children, preview]);
     };
   }
 });