@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-LAAPLTP3.js → chunk-NCFY3VXA.js}

@@ -1,10 +1,7 @@
-'use strict';
-
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
-
-// src/components/Switch.ts
-var Switch = vue.defineComponent({
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Switch.ts
+var _vue = require('vue');
+var _tigercatcore = require('@expcat/tigercat-core');
+var Switch = _vue.defineComponent.call(void 0, {
   name: "TigerSwitch",
   inheritAttrs: false,
   props: {
@@ -50,10 +47,10 @@ var Switch = vue.defineComponent({
     change: (value) => typeof value === "boolean"
   },
   setup(props, { emit, attrs }) {
-    const switchClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.getSwitchClasses(props.size, props.checked, props.disabled), props.className)
+    const switchClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.getSwitchClasses.call(void 0, props.size, props.checked, props.disabled, props.className, attrs.class)
     );
-    const thumbClasses = vue.computed(() => tigercatCore.getSwitchThumbClasses(props.size, props.checked));
+    const thumbClasses = _vue.computed.call(void 0, () => _tigercatcore.getSwitchThumbClasses.call(void 0, props.size, props.checked));
     const emitChange = () => {
       if (props.disabled) return;
       const newValue = !props.checked;
@@ -67,7 +64,7 @@ var Switch = vue.defineComponent({
         emitChange();
       }
     };
-    return () => vue.h(
+    return () => _vue.h.call(void 0, 
       "button",
       {
         ...attrs,
@@ -75,7 +72,7 @@ var Switch = vue.defineComponent({
         role: "switch",
         "aria-checked": props.checked,
         "aria-disabled": props.disabled ? "true" : void 0,
-        class: [switchClasses.value, attrs.class],
+        class: switchClasses.value,
         style: props.style,
         disabled: props.disabled,
         tabindex: props.disabled ? -1 : attrs.tabindex,
@@ -83,7 +80,7 @@ var Switch = vue.defineComponent({
         onKeydown: handleKeyDown
       },
       [
-        vue.h("span", {
+        _vue.h.call(void 0, "span", {
           class: thumbClasses.value,
           "aria-hidden": "true"
         })
@@ -93,5 +90,7 @@ var Switch = vue.defineComponent({
 });
 var Switch_default = Switch;
 
-exports.Switch = Switch;
-exports.Switch_default = Switch_default;
+
+
+
+exports.Switch = Switch; exports.Switch_default = Switch_default;

package/dist/{chunk-NVJRZYES.mjs → chunk-NDS2DLUS.mjs}

@@ -1,11 +1,38 @@
-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, getPieArcs, resolveChartPalette, buildChartLegendItems, resolveChartTooltipContent, classNames, createPieArcPath, getChartElementOpacity, computePieHoverOffset, PIE_EMPHASIS_SHADOW, PIE_BASE_SHADOW, computePieLabelLine, polarToCartesian, chartAxisTickTextClasses } 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/PieChart.ts
+import { defineComponent, computed, h, useId } from "vue";
+import {
+  chartAxisTickTextClasses,
+  classNames,
+  computePieHoverOffset,
+  computePieLabelLine,
+  createPieArcPath,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getPieArcs,
+  getStableChartGradientPrefix,
+  PIE_BASE_SHADOW,
+  PIE_EMPHASIS_SHADOW,
+  polarToCartesian,
+  resolveChartPalette,
+  buildChartLegendItems,
+  resolveChartTooltipContent
+} from "@expcat/tigercat-core";
 var PieChart = defineComponent({
   name: "TigerPieChart",
   props: {
@@ -121,7 +148,7 @@ var PieChart = defineComponent({
     },
     borderColor: {
       type: String,
-      default: "#ffffff"
+      default: "var(--tiger-surface,#ffffff)"
     },
     hoverOffset: {
       type: Number,
@@ -134,6 +161,10 @@ var PieChart = defineComponent({
     shadow: {
       type: Boolean,
       default: false
+    },
+    gradient: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "slice-click", "slice-hover"],
@@ -180,6 +211,7 @@ var PieChart = defineComponent({
       })
     );
     const palette = computed(() => resolveChartPalette(props.colors));
+    const gradientPrefix = getStableChartGradientPrefix("pie", useId());
     const legendItems = computed(
       () => buildChartLegendItems({
         data: props.data,
@@ -223,6 +255,36 @@ var PieChart = defineComponent({
         },
         {
           default: () => {
+            const gradientDefs = props.gradient ? h(
+              "defs",
+              null,
+              arcs.value.map((arc) => {
+                const color = arc.data.color ?? palette.value[arc.index % palette.value.length];
+                return h(
+                  "linearGradient",
+                  {
+                    key: `pie-grad-${arc.index}`,
+                    id: `${gradientPrefix}-${arc.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": color,
+                      "stop-opacity": "1"
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                );
+              })
+            ) : null;
             const slices = h(
               ChartSeries,
               { data: props.data, type: "pie" },
@@ -246,7 +308,7 @@ var PieChart = defineComponent({
                   return h("path", {
                     key: `slice-${arc.index}`,
                     d: path,
-                    fill: color,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : color,
                     opacity,
                     stroke: props.borderColor,
                     "stroke-width": props.borderWidth,
@@ -255,7 +317,7 @@ var PieChart = defineComponent({
                     style: {
                       transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
                       transformOrigin: `${cx}px ${cy}px`,
-                      transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
+                      transition: "transform var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-spring,cubic-bezier(0.4,0,0.2,1)), opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-decelerate,ease-out)",
                       filter: props.shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
                     },
                     tabindex: props.selectable ? 0 : void 0,
@@ -272,7 +334,7 @@ var PieChart = defineComponent({
                 })
               }
             );
-            if (!props.showLabels) return [slices];
+            if (!props.showLabels) return [gradientDefs, slices];
             if (props.labelPosition === "outside") {
               const labelNodes = arcs.value.map((arc) => {
                 const color = arc.data.color ?? palette.value[arc.index % palette.value.length];
@@ -302,7 +364,7 @@ var PieChart = defineComponent({
                   )
                 ];
               }).flat();
-              return [slices, ...labelNodes];
+              return [gradientDefs, slices, ...labelNodes];
             }
             const labelRadius = innerR + (outerR - innerR) / 2;
             const insideLabels = arcs.value.map((arc) => {
@@ -322,7 +384,7 @@ var PieChart = defineComponent({
                 label
               );
             });
-            return [slices, ...insideLabels];
+            return [gradientDefs, slices, ...insideLabels];
           }
         }
       );
@@ -354,4 +416,7 @@ var PieChart = defineComponent({
 });
 var PieChart_default = PieChart;
 
-export { PieChart, PieChart_default };
+export {
+  PieChart,
+  PieChart_default
+};

package/dist/{chunk-W2WGLETE.mjs → chunk-NHBN6VAY.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, computeSunburstArcs, 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/SunburstChart.ts
+import { defineComponent, computed, h, useId } from "vue";
+import {
+  classNames,
+  computeSunburstArcs,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  resolveChartTooltipContent
+} from "@expcat/tigercat-core";
 var SunburstChart = defineComponent({
   name: "TigerSunburstChart",
   props: {
@@ -16,6 +36,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 +90,7 @@ var SunburstChart = defineComponent({
     });
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
     const palette = computed(() => resolveChartPalette(props.colors));
+    const gradientPrefix = getStableChartGradientPrefix("sunburst", useId());
     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 +137,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 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)",
+                        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, {
@@ -174,4 +232,7 @@ var SunburstChart = defineComponent({
 });
 var SunburstChart_default = SunburstChart;
 
-export { SunburstChart, SunburstChart_default };
+export {
+  SunburstChart,
+  SunburstChart_default
+};