@expcat/tigercat-vue 1.1.0 → 1.2.14

package/dist/{chunk-FC27Q4CL.js → chunk-FP7SBCPO.js}

@@ -1,14 +1,32 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
-var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
-var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
-var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
+var _chunk2VOZFFW6js = require('./chunk-2VOZFFW6.js');
 
-var TreeMapChart = vue.defineComponent({
+
+var _chunkACYYQJ6Mjs = require('./chunk-ACYYQJ6M.js');
+
+
+var _chunkHBFFINAIjs = require('./chunk-HBFFINAI.js');
+
+
+var _chunkZOUJFFG4js = require('./chunk-ZOUJFFG4.js');
+
+
+var _chunkUHVUKLHFjs = require('./chunk-UHVUKLHF.js');
+
+// src/components/TreeMapChart.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var TreeMapChart = _vue.defineComponent.call(void 0, {
   name: "TigerTreeMapChart",
   props: {
     width: { type: Number, default: 400 },
@@ -56,14 +74,14 @@ var TreeMapChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkGZK6R2E3_js.useChartInteraction({
-      hoverable: vue.computed(() => props.hoverable),
+    } = _chunk2VOZFFW6js.useChartInteraction.call(void 0, {
+      hoverable: _vue.computed.call(void 0, () => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
-      selectable: vue.computed(() => props.selectable),
+      selectable: _vue.computed.call(void 0, () => props.selectable),
       selectedIndexProp: () => props.selectedIndex,
-      activeOpacity: vue.computed(() => props.activeOpacity),
-      inactiveOpacity: vue.computed(() => props.inactiveOpacity),
-      legendPosition: vue.computed(() => props.legendPosition),
+      activeOpacity: _vue.computed.call(void 0, () => props.activeOpacity),
+      inactiveOpacity: _vue.computed.call(void 0, () => props.inactiveOpacity),
+      legendPosition: _vue.computed.call(void 0, () => props.legendPosition),
       emit,
       getData: (index) => {
         const node = nodes.value[index];
@@ -71,20 +89,20 @@ var TreeMapChart = vue.defineComponent({
       },
       eventNames: { hover: "node-hover", click: "node-click" }
     });
-    const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
-    const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
-    const gradientPrefix = tigercatCore.getTreeMapGradientPrefix();
-    const nodes = vue.computed(
-      () => tigercatCore.computeTreeMapNodes(props.data, {
+    const innerRect = _vue.computed.call(void 0, () => _tigercatcore.getChartInnerRect.call(void 0, props.width, props.height, props.padding));
+    const palette = _vue.computed.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, props.colors));
+    const gradientPrefix = _tigercatcore.getStableChartGradientPrefix.call(void 0, "treemap", _vue.useId.call(void 0, ));
+    const nodes = _vue.computed.call(void 0, 
+      () => _tigercatcore.computeTreeMapNodes.call(void 0, props.data, {
         width: innerRect.value.width,
         height: innerRect.value.height,
         gap: props.gap,
         colors: palette.value
       })
     );
-    const total = vue.computed(() => nodes.value.reduce((s, n) => s + n.value, 0));
-    const legendItems = vue.computed(
-      () => tigercatCore.buildChartLegendItems({
+    const total = _vue.computed.call(void 0, () => nodes.value.reduce((s, n) => s + n.value, 0));
+    const legendItems = _vue.computed.call(void 0, 
+      () => _tigercatcore.buildChartLegendItems.call(void 0, {
         data: nodes.value,
         palette: palette.value,
         activeIndex: activeIndex.value,
@@ -92,31 +110,31 @@ var TreeMapChart = vue.defineComponent({
         getColor: (d) => d.color
       })
     );
-    const tooltipContent = vue.computed(
-      () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex.value, nodes.value, void 0, (node) => {
+    const tooltipContent = _vue.computed.call(void 0, 
+      () => _tigercatcore.resolveChartTooltipContent.call(void 0, resolvedHoveredIndex.value, nodes.value, void 0, (node) => {
         const pct = total.value > 0 ? (node.value / total.value * 100).toFixed(1) : "0";
         return `${node.label}: ${node.value} (${pct}%)`;
       })
     );
     return () => {
       const interactive = props.hoverable || props.selectable;
-      const chart = vue.h(
-        chunkUHVUKLHF_js.ChartCanvas,
+      const chart = _vue.h.call(void 0, 
+        _chunkUHVUKLHFjs.ChartCanvas,
         {
           width: props.width,
           height: props.height,
           padding: props.padding,
           title: props.title,
           desc: props.desc,
-          className: tigercatCore.classNames(props.className)
+          className: _tigercatcore.classNames.call(void 0, props.className)
         },
         {
           default: () => {
-            const gradientDefs = props.gradient ? vue.h(
+            const gradientDefs = props.gradient ? _vue.h.call(void 0, 
               "defs",
               null,
               nodes.value.map(
-                (node) => vue.h(
+                (node) => _vue.h.call(void 0, 
                   "linearGradient",
                   {
                     id: `${gradientPrefix}-${node.index}`,
@@ -126,12 +144,12 @@ var TreeMapChart = vue.defineComponent({
                     y2: "1"
                   },
                   [
-                    vue.h("stop", {
+                    _vue.h.call(void 0, "stop", {
                       offset: "0%",
                       "stop-color": node.color,
                       "stop-opacity": "1"
                     }),
-                    vue.h("stop", {
+                    _vue.h.call(void 0, "stop", {
                       offset: "100%",
                       "stop-color": node.color,
                       "stop-opacity": "0.7"
@@ -140,19 +158,19 @@ var TreeMapChart = vue.defineComponent({
                 )
               )
             ) : null;
-            return vue.h(
-              chunkHBFFINAI_js.ChartSeries,
+            return _vue.h.call(void 0, 
+              _chunkHBFFINAIjs.ChartSeries,
               { data: nodes.value, type: "treemap" },
               {
                 default: () => [
                   gradientDefs,
                   ...nodes.value.map((node) => {
-                    const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex.value, {
+                    const opacity = _tigercatcore.getChartElementOpacity.call(void 0, node.index, activeIndex.value, {
                       activeOpacity: props.activeOpacity,
                       inactiveOpacity: props.inactiveOpacity
                     });
                     const elems = [
-                      vue.h("rect", {
+                      _vue.h.call(void 0, "rect", {
                         key: `node-${node.index}`,
                         x: node.x,
                         y: node.y,
@@ -161,9 +179,9 @@ var TreeMapChart = vue.defineComponent({
                         rx: 2,
                         fill: props.gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
                         opacity,
-                        class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                        class: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
                         style: {
-                          transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                          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"
                         },
@@ -175,7 +193,7 @@ var TreeMapChart = vue.defineComponent({
                     ];
                     if (props.showLabels && node.w > 30 && node.h > props.minLabelSize + 4) {
                       elems.push(
-                        vue.h(
+                        _vue.h.call(void 0, 
                           "text",
                           {
                             key: `label-${node.index}`,
@@ -201,18 +219,18 @@ var TreeMapChart = vue.defineComponent({
           }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? _vue.h.call(void 0, _chunkZOUJFFG4js.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return vue.h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return _vue.h.call(void 0, "div", { class: "inline-block relative" }, [chart, tooltip]);
       }
-      return vue.h("div", { class: wrapperClasses.value }, [
+      return _vue.h.call(void 0, "div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkACYYQJ6M_js.ChartLegend, {
+        _vue.h.call(void 0, _chunkACYYQJ6Mjs.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,
@@ -229,5 +247,7 @@ var TreeMapChart = vue.defineComponent({
 });
 var TreeMapChart_default = TreeMapChart;
 
-exports.TreeMapChart = TreeMapChart;
-exports.TreeMapChart_default = TreeMapChart_default;
+
+
+
+exports.TreeMapChart = TreeMapChart; exports.TreeMapChart_default = TreeMapChart_default;

package/dist/chunk-FQWEOBQ4.mjs

@@ -0,0 +1,231 @@
+// src/components/Signature.ts
+import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  clampSignatureLineWidth,
+  cloneSignatureStrokes,
+  coerceClassValue,
+  drawSignatureStrokes,
+  getSignatureCanvasDataUrl,
+  getSignatureCanvasWrapClasses,
+  getSignaturePoint,
+  isSignatureEmpty,
+  mergeStyleValues,
+  signatureCanvasClasses,
+  signatureClearButtonClasses,
+  signatureRootClasses,
+  signatureStrokesToSvg,
+  signatureSvgToDataUrl,
+  signatureToolbarClasses
+} from "@expcat/tigercat-core";
+var DEFAULT_WIDTH = 480;
+var DEFAULT_HEIGHT = 180;
+var Signature = defineComponent({
+  name: "TigerSignature",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    width: { type: Number, default: DEFAULT_WIDTH },
+    height: { type: Number, default: DEFAULT_HEIGHT },
+    penColor: { type: String, default: "#111827" },
+    backgroundColor: { type: String, default: void 0 },
+    lineWidth: { type: Number, default: 2 },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    exportType: {
+      type: String,
+      default: "image/png"
+    },
+    quality: { type: Number, default: 0.92 },
+    ariaLabel: { type: String, default: "Signature pad" },
+    clearText: { type: String, default: "Clear" },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "begin", "end", "clear"],
+  setup(props, { attrs, emit, expose }) {
+    const canvasRef = ref(null);
+    const strokes = ref([]);
+    const activeStroke = ref(null);
+    const isDisabled = computed(() => props.disabled || props.readonly);
+    const normalizedLineWidth = computed(() => clampSignatureLineWidth(props.lineWidth));
+    const draw = (nextStrokes) => {
+      const canvas = canvasRef.value;
+      const context = canvas?.getContext("2d");
+      if (!canvas || !context) return;
+      const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+      canvas.width = props.width * ratio;
+      canvas.height = props.height * ratio;
+      canvas.style.width = `${props.width}px`;
+      canvas.style.height = `${props.height}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      drawSignatureStrokes(context, nextStrokes, {
+        width: props.width,
+        height: props.height,
+        backgroundColor: props.backgroundColor
+      });
+    };
+    watch(
+      [strokes, () => props.width, () => props.height, () => props.backgroundColor],
+      () => draw(strokes.value),
+      { deep: true, flush: "post" }
+    );
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value === "" && !isSignatureEmpty(strokes.value)) {
+          strokes.value = [];
+          activeStroke.value = null;
+          draw([]);
+        }
+      }
+    );
+    onMounted(() => {
+      draw(strokes.value);
+    });
+    const toSVG = () => signatureStrokesToSvg(strokes.value, {
+      width: props.width,
+      height: props.height,
+      backgroundColor: props.backgroundColor
+    });
+    const toDataURL = (type = props.exportType, quality = props.quality) => {
+      if (type === "image/svg+xml") return signatureSvgToDataUrl(toSVG());
+      return getSignatureCanvasDataUrl(canvasRef.value, type, quality);
+    };
+    const createPayload = (nextStrokes) => {
+      const value = props.exportType === "image/svg+xml" ? signatureSvgToDataUrl(
+        signatureStrokesToSvg(nextStrokes, {
+          width: props.width,
+          height: props.height,
+          backgroundColor: props.backgroundColor
+        })
+      ) : getSignatureCanvasDataUrl(canvasRef.value, props.exportType, props.quality);
+      return {
+        value,
+        empty: isSignatureEmpty(nextStrokes),
+        strokes: cloneSignatureStrokes(nextStrokes),
+        exportType: props.exportType
+      };
+    };
+    const emitChange = (nextStrokes) => {
+      const payload = createPayload(nextStrokes);
+      emit("update:modelValue", payload.value);
+      emit("change", payload);
+      return payload;
+    };
+    const clear = () => {
+      strokes.value = [];
+      activeStroke.value = null;
+      draw([]);
+      emitChange([]);
+      emit("clear");
+    };
+    const getPointFromEvent = (event) => {
+      const canvas = canvasRef.value;
+      const rect = canvas?.getBoundingClientRect() ?? {
+        left: 0,
+        top: 0,
+        width: props.width,
+        height: props.height
+      };
+      return getSignaturePoint(event.clientX, event.clientY, rect, props.width, props.height);
+    };
+    const handlePointerDown = (event) => {
+      if (isDisabled.value) return;
+      event.preventDefault();
+      canvasRef.value?.focus();
+      const stroke = {
+        color: props.penColor,
+        lineWidth: normalizedLineWidth.value,
+        points: [getPointFromEvent(event)]
+      };
+      activeStroke.value = stroke;
+      strokes.value = [...strokes.value, stroke];
+      emit("begin");
+    };
+    const handlePointerMove = (event) => {
+      if (!activeStroke.value || isDisabled.value) return;
+      event.preventDefault();
+      activeStroke.value.points.push(getPointFromEvent(event));
+      strokes.value = [...strokes.value];
+    };
+    const finishStroke = () => {
+      if (!activeStroke.value) return;
+      activeStroke.value = null;
+      const payload = emitChange(strokes.value);
+      emit("end", payload);
+    };
+    const handleKeyDown = (event) => {
+      if (!props.clearable || isDisabled.value) return;
+      if (event.key !== "Delete" && event.key !== "Backspace") return;
+      event.preventDefault();
+      clear();
+    };
+    expose({
+      clear,
+      isEmpty: () => isSignatureEmpty(strokes.value),
+      toDataURL,
+      toSVG
+    });
+    const rootClasses = computed(
+      () => classNames(signatureRootClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const rootStyle = computed(
+      () => mergeStyleValues(props.style, attrs.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: rootClasses.value,
+          style: rootStyle.value
+        },
+        [
+          h("div", { class: getSignatureCanvasWrapClasses(props.disabled, props.readonly) }, [
+            h("canvas", {
+              ref: canvasRef,
+              class: signatureCanvasClasses,
+              width: props.width,
+              height: props.height,
+              tabindex: isDisabled.value ? -1 : 0,
+              role: "img",
+              "aria-label": props.ariaLabel,
+              "aria-disabled": isDisabled.value || void 0,
+              onPointerdown: handlePointerDown,
+              onPointermove: handlePointerMove,
+              onPointerup: finishStroke,
+              onPointercancel: finishStroke,
+              onKeydown: handleKeyDown
+            })
+          ]),
+          props.clearable ? h("div", { class: signatureToolbarClasses }, [
+            h(
+              "button",
+              {
+                type: "button",
+                class: signatureClearButtonClasses,
+                disabled: isDisabled.value || isSignatureEmpty(strokes.value),
+                onClick: clear
+              },
+              props.clearText
+            )
+          ]) : null
+        ]
+      );
+    };
+  }
+});
+var Signature_default = Signature;
+
+export {
+  Signature,
+  Signature_default
+};