@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-MX2KCWM2.js → chunk-K3CIXMN4.js}

@@ -1,10 +1,16 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Splitter.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Splitter.ts
-var Splitter = vue.defineComponent({
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Splitter = _vue.defineComponent.call(void 0, {
   name: "TigerSplitter",
   props: {
     direction: {
@@ -42,12 +48,13 @@ var Splitter = vue.defineComponent({
   },
   emits: ["update:sizes", "resize-start", "resize", "resize-end"],
   setup(props, { slots, emit, attrs }) {
-    const containerRef = vue.ref(null);
-    const paneSizes = vue.ref([]);
-    const draggingIndex = vue.ref(-1);
-    const startPos = vue.ref(0);
-    const startSizes = vue.ref([]);
-    vue.watch(
+    const containerRef = _vue.ref.call(void 0, null);
+    const paneSizes = _vue.ref.call(void 0, []);
+    const draggingIndex = _vue.ref.call(void 0, -1);
+    const startPos = _vue.ref.call(void 0, 0);
+    const startSizes = _vue.ref.call(void 0, []);
+    let dragSession = null;
+    _vue.watch.call(void 0, 
       () => props.sizes,
       (newSizes) => {
         if (newSizes) paneSizes.value = [...newSizes];
@@ -61,7 +68,7 @@ var Splitter = vue.defineComponent({
       }
       const el = containerRef.value;
       if (!el) return;
-      const slotChildren = slots.default?.() || [];
+      const slotChildren = _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]) || [];
       const paneCount = slotChildren.length;
       if (paneCount === 0) return;
       const totalGutter = (paneCount - 1) * props.gutterSize;
@@ -69,30 +76,52 @@ var Splitter = vue.defineComponent({
       const eachSize = total / paneCount;
       paneSizes.value = Array.from({ length: paneCount }, () => eachSize);
     };
-    vue.onMounted(initSizes);
-    const containerClasses = vue.computed(
-      () => tigercatCore.classNames(
-        tigercatCore.getSplitterContainerClasses(props.direction, props.className),
-        tigercatCore.coerceClassValue(attrs.class)
+    _vue.onMounted.call(void 0, initSizes);
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getSplitterContainerClasses.call(void 0, props.direction, props.className),
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
     );
     const getMins = () => paneSizes.value.map(() => props.min);
     const getMaxes = () => paneSizes.value.map(() => props.max);
+    const cleanupDragSession = () => {
+      _optionalChain([dragSession, 'optionalAccess', _3 => _3.dispose, 'call', _4 => _4()]);
+      dragSession = null;
+    };
     const onMouseDown = (index, e) => {
       if (props.disabled) return;
       e.preventDefault();
+      cleanupDragSession();
       draggingIndex.value = index;
       startPos.value = props.direction === "horizontal" ? e.clientX : e.clientY;
       startSizes.value = [...paneSizes.value];
       emit("resize-start", { index, sizes: [...paneSizes.value] });
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp);
+      dragSession = _tigercatcore.createDocumentDragSession.call(void 0, {
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: _optionalChain([e, 'access', _5 => _5.currentTarget, 'optionalAccess', _6 => _6.ownerDocument]),
+        onMove: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY);
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyDragResize(currentX, currentY);
+          if (draggingIndex.value >= 0) {
+            emit("resize-end", {
+              index: draggingIndex.value,
+              sizes: [...paneSizes.value]
+            });
+          }
+          draggingIndex.value = -1;
+          dragSession = null;
+        }
+      });
     };
-    const onMouseMove = (e) => {
+    const applyDragResize = (currentX, currentY) => {
       if (draggingIndex.value < 0) return;
-      const currentPos = props.direction === "horizontal" ? e.clientX : e.clientY;
+      const currentPos = props.direction === "horizontal" ? currentX : currentY;
       const delta = currentPos - startPos.value;
-      const newSizes = tigercatCore.resizePanes(
+      const newSizes = _tigercatcore.resizePanes.call(void 0, 
         startSizes.value,
         draggingIndex.value,
         delta,
@@ -105,29 +134,17 @@ var Splitter = vue.defineComponent({
         emit("resize", { index: draggingIndex.value, sizes: newSizes });
       }
     };
-    const onMouseUp = () => {
-      if (draggingIndex.value >= 0) {
-        emit("resize-end", {
-          index: draggingIndex.value,
-          sizes: [...paneSizes.value]
-        });
-      }
-      draggingIndex.value = -1;
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
-    vue.onBeforeUnmount(() => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
+    _vue.onBeforeUnmount.call(void 0, () => {
+      cleanupDragSession();
     });
     return () => {
-      const children = slots.default?.() || [];
+      const children = _optionalChain([slots, 'access', _7 => _7.default, 'optionalCall', _8 => _8()]) || [];
       const nodes = [];
       children.forEach((child, i) => {
         const size = paneSizes.value[i];
-        const paneStyle = size != null ? tigercatCore.getPaneStyle(size, props.direction) : void 0;
+        const paneStyle = size != null ? _tigercatcore.getPaneStyle.call(void 0, size, props.direction) : void 0;
         nodes.push(
-          vue.h(
+          _vue.h.call(void 0, 
             "div",
             {
               class: "tiger-splitter-pane relative overflow-auto",
@@ -140,10 +157,10 @@ var Splitter = vue.defineComponent({
         if (i < children.length - 1) {
           const isDragging = draggingIndex.value === i;
           nodes.push(
-            vue.h(
+            _vue.h.call(void 0, 
               "div",
               {
-                class: tigercatCore.getSplitterGutterClasses(props.direction, isDragging, props.disabled),
+                class: _tigercatcore.getSplitterGutterClasses.call(void 0, props.direction, isDragging, props.disabled),
                 role: "separator",
                 "aria-orientation": props.direction === "horizontal" ? "vertical" : "horizontal",
                 tabindex: props.disabled ? -1 : 0,
@@ -160,7 +177,7 @@ var Splitter = vue.defineComponent({
                   }
                   if (delta !== 0) {
                     e.preventDefault();
-                    const newSizes = tigercatCore.resizePanes(paneSizes.value, i, delta, getMins(), getMaxes());
+                    const newSizes = _tigercatcore.resizePanes.call(void 0, paneSizes.value, i, delta, getMins(), getMaxes());
                     if (newSizes) {
                       paneSizes.value = newSizes;
                       emit("update:sizes", newSizes);
@@ -169,12 +186,12 @@ var Splitter = vue.defineComponent({
                   }
                 }
               },
-              [vue.h("div", { class: tigercatCore.getSplitterGutterHandleClasses(props.direction) })]
+              [_vue.h.call(void 0, "div", { class: _tigercatcore.getSplitterGutterHandleClasses.call(void 0, props.direction) })]
             )
           );
         }
       });
-      return vue.h(
+      return _vue.h.call(void 0, 
         "div",
         {
           ref: containerRef,
@@ -189,5 +206,7 @@ var Splitter = vue.defineComponent({
 });
 var Splitter_default = Splitter;
 
-exports.Splitter = Splitter;
-exports.Splitter_default = Splitter_default;
+
+
+
+exports.Splitter = Splitter; exports.Splitter_default = Splitter_default;

package/dist/{chunk-5XF5IAUD.mjs → chunk-K5ZZZ4TL.mjs}

@@ -1,11 +1,31 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartLegend } from './chunk-F5HOHSFH.mjs';
-import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
-import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, resolveChartPalette, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import {
+  useChartInteraction
+} from "./chunk-R2HO74FE.mjs";
+import {
+  ChartLegend
+} from "./chunk-VVS2CQS4.mjs";
+import {
+  ChartSeries
+} from "./chunk-2ZUEXCVJ.mjs";
+import {
+  ChartTooltip
+} from "./chunk-OK4PVFQG.mjs";
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
 
+// src/components/TreeMapChart.ts
+import { defineComponent, computed, h, useId } from "vue";
+import {
+  classNames,
+  computeTreeMapNodes,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  resolveChartTooltipContent
+} from "@expcat/tigercat-core";
 var TreeMapChart = defineComponent({
   name: "TigerTreeMapChart",
   props: {
@@ -17,6 +37,7 @@ var TreeMapChart = defineComponent({
     showLabels: { type: Boolean, default: true },
     minLabelSize: { type: Number, default: 10 },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -70,6 +91,7 @@ var TreeMapChart = defineComponent({
     });
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const palette = computed(() => resolveChartPalette(props.colors));
+    const gradientPrefix = getStableChartGradientPrefix("treemap", useId());
     const nodes = computed(
       () => computeTreeMapNodes(props.data, {
         width: innerRect.value.width,
@@ -108,55 +130,90 @@ var TreeMapChart = defineComponent({
         },
         {
           default: () => {
+            const gradientDefs = props.gradient ? h(
+              "defs",
+              null,
+              nodes.value.map(
+                (node) => h(
+                  "linearGradient",
+                  {
+                    id: `${gradientPrefix}-${node.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": node.color,
+                      "stop-opacity": "1"
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": node.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              )
+            ) : null;
             return h(
               ChartSeries,
               { data: nodes.value, type: "treemap" },
               {
-                default: () => nodes.value.map((node) => {
-                  const opacity = getChartElementOpacity(node.index, activeIndex.value, {
-                    activeOpacity: props.activeOpacity,
-                    inactiveOpacity: props.inactiveOpacity
-                  });
-                  const elems = [
-                    h("rect", {
-                      key: `node-${node.index}`,
-                      x: node.x,
-                      y: node.y,
-                      width: node.w,
-                      height: node.h,
-                      rx: 2,
-                      fill: node.color,
-                      opacity,
-                      class: classNames(interactive && "cursor-pointer"),
-                      style: { transition: "opacity 0.2s ease-out" },
-                      onMouseenter: (e) => handleMouseEnter(node.index, e),
-                      onMousemove: handleMouseMove,
-                      onMouseleave: handleMouseLeave,
-                      onClick: () => handleClick(node.index)
-                    })
-                  ];
-                  if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
-                    elems.push(
-                      h(
-                        "text",
-                        {
-                          key: `label-${node.index}`,
-                          x: node.x + node.w / 2,
-                          y: node.y + node.h / 2,
-                          class: "fill-white text-xs",
-                          "text-anchor": "middle",
-                          "dominant-baseline": "middle",
-                          style: {
-                            pointerEvents: "none",
-                            fontSize: `${Math.min(12, node.h * 0.3)}px`
-                          }
+                default: () => [
+                  gradientDefs,
+                  ...nodes.value.map((node) => {
+                    const opacity = getChartElementOpacity(node.index, activeIndex.value, {
+                      activeOpacity: props.activeOpacity,
+                      inactiveOpacity: props.inactiveOpacity
+                    });
+                    const elems = [
+                      h("rect", {
+                        key: `node-${node.index}`,
+                        x: node.x,
+                        y: node.y,
+                        width: node.w,
+                        height: node.h,
+                        rx: 2,
+                        fill: props.gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                        opacity,
+                        class: classNames(interactive && "cursor-pointer"),
+                        style: {
+                          transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
+                          rx: "var(--tiger-chart-block-radius, 2px)",
+                          filter: activeIndex.value === node.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
                         },
-                        node.label
-                      )
-                    );
-                  }
-                  return elems;
-                }).flat()
+                        onMouseenter: (e) => handleMouseEnter(node.index, e),
+                        onMousemove: handleMouseMove,
+                        onMouseleave: handleMouseLeave,
+                        onClick: () => handleClick(node.index)
+                      })
+                    ];
+                    if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
+                      elems.push(
+                        h(
+                          "text",
+                          {
+                            key: `label-${node.index}`,
+                            x: node.x + node.w / 2,
+                            y: node.y + node.h / 2,
+                            class: "fill-white text-xs",
+                            "text-anchor": "middle",
+                            "dominant-baseline": "middle",
+                            style: {
+                              pointerEvents: "none",
+                              fontSize: `${Math.min(12, node.h * 0.3)}px`
+                            }
+                          },
+                          node.label
+                        )
+                      );
+                    }
+                    return elems;
+                  }).flat()
+                ]
               }
             );
           }
@@ -190,4 +247,7 @@ var TreeMapChart = defineComponent({
 });
 var TreeMapChart_default = TreeMapChart;
 
-export { TreeMapChart, TreeMapChart_default };
+export {
+  TreeMapChart,
+  TreeMapChart_default
+};