@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/chunk-E523VGZP.mjs

@@ -1,279 +0,0 @@
-import {
-  ChartTooltip
-} from "./chunk-SPFL55TF.mjs";
-import {
-  ChartCanvas
-} from "./chunk-SNNT64HK.mjs";
-
-// src/components/GaugeChart.ts
-import { defineComponent, computed, h, ref, watch, onBeforeUnmount, useId } from "vue";
-import {
-  classNames,
-  createGaugeArcPath,
-  createGaugeNeedlePath,
-  valueToGaugeAngle,
-  computeGaugeTicks,
-  getChartInnerRect,
-  chartAxisTickTextClasses,
-  getStableChartGradientPrefix,
-  createGaugeAnimation
-} from "@expcat/tigercat-core";
-var GaugeChart = defineComponent({
-  name: "TigerGaugeChart",
-  props: {
-    width: { type: Number, default: 280 },
-    height: { type: Number, default: 200 },
-    padding: { type: [Number, Object], default: 24 },
-    value: { type: Number, required: true },
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    startAngle: { type: Number, default: 135 },
-    endAngle: { type: Number, default: 405 },
-    arcWidth: { type: Number, default: 20 },
-    showTicks: { type: Boolean, default: true },
-    tickCount: { type: Number, default: 5 },
-    valueFormatter: { type: Function },
-    tooltipFormatter: { type: Function },
-    showTooltip: { type: Boolean, default: true },
-    label: { type: String },
-    segments: {
-      type: Array
-    },
-    trackColor: { type: String, default: "var(--tiger-border,#e5e7eb)" },
-    color: { type: String, default: "var(--tiger-primary,#2563eb)" },
-    gradient: { type: Boolean, default: false },
-    // a11y
-    title: { type: String },
-    desc: { type: String },
-    className: { type: String }
-  },
-  setup(props) {
-    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
-    const radius = computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2 - 4);
-    const cx = computed(() => innerRect.value.width / 2);
-    const cy = computed(() => innerRect.value.height / 2);
-    const gradientPrefix = getStableChartGradientPrefix("gauge", useId());
-    const valueGradientId = `${gradientPrefix}-value`;
-    const targetAngle = computed(
-      () => valueToGaugeAngle(props.value, props.min, props.max, props.startAngle, props.endAngle)
-    );
-    const animatedAngle = ref(targetAngle.value);
-    let animCtrl = null;
-    watch(targetAngle, (to, from) => {
-      animCtrl?.stop();
-      animCtrl = createGaugeAnimation({
-        from,
-        to,
-        onUpdate: (v) => {
-          animatedAngle.value = v;
-        }
-      });
-    });
-    onBeforeUnmount(() => {
-      animCtrl?.stop();
-    });
-    const wrapperRef = ref(null);
-    const tooltipState = ref({ open: false, x: 0, y: 0 });
-    const handleTooltipMove = (e) => {
-      if (!props.showTooltip) return;
-      tooltipState.value = { open: true, x: e.clientX, y: e.clientY };
-    };
-    const handleTooltipLeave = () => {
-      tooltipState.value = { ...tooltipState.value, open: false };
-    };
-    const handleTooltipFocus = () => {
-      if (!props.showTooltip) return;
-      const rect = wrapperRef.value?.getBoundingClientRect();
-      if (rect) {
-        tooltipState.value = {
-          open: true,
-          x: rect.left + rect.width / 2,
-          y: rect.top + rect.height / 2
-        };
-      }
-    };
-    const ticks = computed(
-      () => props.showTicks ? computeGaugeTicks(
-        cx.value,
-        cy.value,
-        radius.value,
-        props.min,
-        props.max,
-        props.startAngle,
-        props.endAngle,
-        props.tickCount
-      ) : []
-    );
-    return () => {
-      const r = radius.value;
-      const c = cx.value;
-      const cY = cy.value;
-      const aw = props.arcWidth;
-      const trackPath = createGaugeArcPath(c, cY, r, props.startAngle, props.endAngle, aw);
-      const valuePath = animatedAngle.value > props.startAngle ? createGaugeArcPath(c, cY, r, props.startAngle, animatedAngle.value, aw) : null;
-      const segmentArcs = props.segments?.map((seg, i) => {
-        const sStart = valueToGaugeAngle(
-          seg.range[0],
-          props.min,
-          props.max,
-          props.startAngle,
-          props.endAngle
-        );
-        const sEnd = valueToGaugeAngle(
-          seg.range[1],
-          props.min,
-          props.max,
-          props.startAngle,
-          props.endAngle
-        );
-        return h("path", {
-          key: `seg-${i}`,
-          d: createGaugeArcPath(c, cY, r, sStart, sEnd, aw),
-          fill: seg.color,
-          "stroke-width": 0
-        });
-      }) ?? [];
-      const needlePath = createGaugeNeedlePath(c, cY, r - aw - 6, animatedAngle.value);
-      const formattedValue = props.valueFormatter ? props.valueFormatter(props.value) : `${props.value}`;
-      const tooltipContent = props.tooltipFormatter ? props.tooltipFormatter(props.value) : props.label ? `${props.label}: ${formattedValue}` : formattedValue;
-      const canvas = h(
-        ChartCanvas,
-        {
-          width: props.width,
-          height: props.height,
-          padding: props.padding,
-          title: props.title,
-          desc: props.desc,
-          className: classNames(props.className)
-        },
-        {
-          default: () => [
-            // Gradient defs (opt-in, only when gradient mode is on and value arc renders)
-            props.gradient && !props.segments && valuePath ? h("defs", {}, [
-              h(
-                "linearGradient",
-                {
-                  id: valueGradientId,
-                  x1: 0,
-                  y1: 0,
-                  x2: 0,
-                  y2: 1
-                },
-                [
-                  h("stop", { offset: "0%", "stop-color": props.color, "stop-opacity": 1 }),
-                  h("stop", { offset: "100%", "stop-color": props.color, "stop-opacity": 0.55 })
-                ]
-              )
-            ]) : null,
-            // Track
-            h("path", {
-              d: trackPath,
-              fill: props.trackColor,
-              "stroke-width": 0
-            }),
-            // Segments or value arc
-            ...props.segments ? segmentArcs : valuePath ? [
-              h("path", {
-                d: valuePath,
-                fill: props.gradient ? `url(#${valueGradientId})` : props.color,
-                "stroke-width": 0
-              })
-            ] : [],
-            // Ticks
-            ...ticks.value.map((tick, i) => [
-              h("line", {
-                key: `tick-${i}`,
-                x1: tick.x1,
-                y1: tick.y1,
-                x2: tick.x2,
-                y2: tick.y2,
-                stroke: "var(--tiger-text-secondary,#6b7280)",
-                "stroke-width": 1
-              }),
-              h(
-                "text",
-                {
-                  key: `tick-label-${i}`,
-                  x: tick.x2 + (tick.x2 - tick.x1) * 1.5,
-                  y: tick.y2 + (tick.y2 - tick.y1) * 1.5,
-                  class: chartAxisTickTextClasses,
-                  "text-anchor": "middle",
-                  "dominant-baseline": "middle",
-                  style: { fontSize: "10px" }
-                },
-                tick.label
-              )
-            ]).flat(),
-            // Needle
-            h("path", {
-              d: needlePath,
-              fill: "var(--tiger-text,#374151)"
-            }),
-            // Center dot
-            h("circle", {
-              cx: c,
-              cy: cY,
-              r: 5,
-              fill: "var(--tiger-text,#374151)"
-            }),
-            // Value text
-            h(
-              "text",
-              {
-                x: c,
-                y: cY + r * 0.35,
-                class: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
-                "text-anchor": "middle",
-                "dominant-baseline": "middle"
-              },
-              formattedValue
-            ),
-            // Label
-            ...props.label ? [
-              h(
-                "text",
-                {
-                  x: c,
-                  y: cY + r * 0.35 + 20,
-                  class: chartAxisTickTextClasses,
-                  "text-anchor": "middle",
-                  "dominant-baseline": "middle"
-                },
-                props.label
-              )
-            ] : []
-          ]
-        }
-      );
-      return h(
-        "div",
-        {
-          ref: wrapperRef,
-          class: "inline-block relative",
-          tabindex: props.showTooltip ? 0 : void 0,
-          role: "img",
-          "aria-label": props.label ? `${props.label}: ${formattedValue}` : formattedValue,
-          onMousemove: handleTooltipMove,
-          onMouseleave: handleTooltipLeave,
-          onFocus: handleTooltipFocus,
-          onBlur: handleTooltipLeave
-        },
-        [
-          canvas,
-          props.showTooltip ? h(ChartTooltip, {
-            content: tooltipContent,
-            open: tooltipState.value.open && tooltipContent !== "",
-            x: tooltipState.value.x,
-            y: tooltipState.value.y
-          }) : null
-        ]
-      );
-    };
-  }
-});
-var GaugeChart_default = GaugeChart;
-
-export {
-  GaugeChart,
-  GaugeChart_default
-};

package/dist/chunk-FEQ7PZXI.mjs

@@ -1,160 +0,0 @@
-// src/components/ColorSwatch.ts
-import { computed, defineComponent, h, nextTick, ref } from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  colorSwatchBaseClasses,
-  colorSwatchGridClasses,
-  colorSwatchGroupClasses,
-  colorSwatchGroupLabelClasses,
-  flattenColorSwatchGroups,
-  getColorSwatchButtonClasses,
-  getColorSwatchCheckClasses,
-  getNextColorSwatchIndex,
-  isColorSwatchSelected,
-  normalizeColorSwatchGroups
-} from "@expcat/tigercat-core";
-var checkPathD = "M5 10.5 8 13.5 15 6.5";
-var ColorSwatch = defineComponent({
-  name: "TigerColorSwatch",
-  props: {
-    modelValue: { type: String, default: void 0 },
-    defaultValue: { type: String },
-    disabled: { type: Boolean, default: false },
-    size: { type: String, default: "md" },
-    colors: { type: Array, default: void 0 },
-    groups: { type: Array, default: void 0 },
-    columns: { type: Number, default: 6 },
-    ariaLabel: { type: String, default: "Color swatches" }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { attrs, emit }) {
-    const innerValue = ref(props.defaultValue);
-    const focusIndex = ref(-1);
-    const optionRefs = ref([]);
-    const normalizedGroups = computed(() => normalizeColorSwatchGroups(props.groups, props.colors));
-    const options = computed(() => flattenColorSwatchGroups(normalizedGroups.value));
-    const selectedValue = computed(
-      () => props.modelValue !== void 0 ? props.modelValue : innerValue.value
-    );
-    const selectedIndex = computed(
-      () => options.value.findIndex((option) => isColorSwatchSelected(option.value, selectedValue.value))
-    );
-    const firstEnabledIndex = computed(() => options.value.findIndex((option) => !option.disabled));
-    const activeIndex = computed(
-      () => selectedIndex.value >= 0 ? selectedIndex.value : firstEnabledIndex.value
-    );
-    function handleSelect(option) {
-      if (props.disabled || option.disabled) return;
-      if (props.modelValue === void 0) innerValue.value = option.value;
-      emit("update:modelValue", option.value);
-      emit("change", option.value, option);
-    }
-    function handleKeydown(optionIndex, event) {
-      if (props.disabled) return;
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        const option = options.value[optionIndex];
-        if (option) handleSelect(option);
-        return;
-      }
-      const nextIndex = getNextColorSwatchIndex(
-        options.value,
-        optionIndex,
-        event.key,
-        props.columns
-      );
-      if (nextIndex === -1 || nextIndex === optionIndex) return;
-      event.preventDefault();
-      focusIndex.value = nextIndex;
-      nextTick(() => optionRefs.value[nextIndex]?.focus());
-    }
-    return () => {
-      let flatIndex = 0;
-      optionRefs.value = [];
-      return h(
-        "div",
-        {
-          class: classNames(colorSwatchBaseClasses, coerceClassValue(attrs.class)),
-          role: "radiogroup",
-          "aria-label": props.ariaLabel,
-          "aria-disabled": props.disabled || void 0
-        },
-        normalizedGroups.value.map(
-          (group, groupIndex) => h(
-            "div",
-            { key: `${groupIndex}-${group.label ?? "group"}`, class: colorSwatchGroupClasses },
-            [
-              group.label ? h("div", { class: colorSwatchGroupLabelClasses }, group.label) : null,
-              h(
-                "div",
-                {
-                  class: colorSwatchGridClasses,
-                  style: { gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))` }
-                },
-                group.colors.map((option) => {
-                  const optionIndex = flatIndex;
-                  flatIndex += 1;
-                  const selected = isColorSwatchSelected(option.value, selectedValue.value);
-                  const optionDisabled = props.disabled || !!option.disabled;
-                  const tabIndex = !optionDisabled && optionIndex === (focusIndex.value >= 0 ? focusIndex.value : activeIndex.value) ? 0 : -1;
-                  return h(
-                    "button",
-                    {
-                      key: `${option.groupIndex}-${option.index}-${option.value}`,
-                      ref: ((el) => {
-                        if (el instanceof HTMLElement) optionRefs.value[optionIndex] = el;
-                      }),
-                      type: "button",
-                      class: getColorSwatchButtonClasses(props.size, selected, optionDisabled),
-                      style: { backgroundColor: option.value },
-                      role: "radio",
-                      "aria-checked": selected,
-                      "aria-label": option.label,
-                      "aria-disabled": optionDisabled || void 0,
-                      tabindex: tabIndex,
-                      onFocus: () => {
-                        focusIndex.value = optionIndex;
-                      },
-                      onClick: () => handleSelect(option),
-                      onKeydown: (event) => handleKeydown(optionIndex, event)
-                    },
-                    selected ? h(
-                      "span",
-                      { class: getColorSwatchCheckClasses(props.size), "aria-hidden": "true" },
-                      [
-                        h(
-                          "svg",
-                          {
-                            viewBox: "0 0 20 20",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2.5",
-                            class: "h-full w-full"
-                          },
-                          [
-                            h("path", {
-                              d: checkPathD,
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round"
-                            })
-                          ]
-                        )
-                      ]
-                    ) : void 0
-                  );
-                })
-              )
-            ]
-          )
-        )
-      );
-    };
-  }
-});
-var ColorSwatch_default = ColorSwatch;
-
-export {
-  ColorSwatch,
-  ColorSwatch_default
-};

package/dist/chunk-FHUGOSEY.mjs

@@ -1,144 +0,0 @@
-// src/composables/useChartInteraction.ts
-import { ref, computed, getCurrentScope, onScopeDispose } from "vue";
-import {
-  classNames,
-  createChartPointerMoveScheduler,
-  getChartElementOpacity
-} from "@expcat/tigercat-core";
-function unref(value) {
-  return value?.value !== void 0 ? value.value : value;
-}
-function useChartInteraction(options) {
-  const { emit, getData, eventNames } = options;
-  const isHoverable = () => unref(options.hoverable);
-  const isShowTooltip = () => options.showTooltip === void 0 ? true : unref(options.showTooltip);
-  const localHoveredIndex = ref(null);
-  const localSelectedIndex = ref(null);
-  const tooltipPosition = ref({ x: 0, y: 0 });
-  const tooltipScheduler = createChartPointerMoveScheduler({
-    onPositionChange: (position) => {
-      tooltipPosition.value = position;
-    }
-  });
-  if (getCurrentScope()) {
-    onScopeDispose(() => tooltipScheduler.cancel());
-  }
-  const resolvedHoveredIndex = computed(() => {
-    const prop = options.hoveredIndexProp?.();
-    return prop !== void 0 ? prop : localHoveredIndex.value;
-  });
-  const resolvedSelectedIndex = computed(() => {
-    const prop = options.selectedIndexProp?.();
-    return prop !== void 0 ? prop : localSelectedIndex.value;
-  });
-  const activeIndex = computed(() => {
-    if (resolvedSelectedIndex.value !== null) return resolvedSelectedIndex.value;
-    if (unref(options.hoverable) && resolvedHoveredIndex.value !== null) {
-      return resolvedHoveredIndex.value;
-    }
-    return null;
-  });
-  const getElementOpacity = (index) => {
-    return getChartElementOpacity(index, activeIndex.value, {
-      activeOpacity: unref(options.activeOpacity),
-      inactiveOpacity: unref(options.inactiveOpacity)
-    });
-  };
-  const handleMouseEnter = (index, event) => {
-    const hoverable = isHoverable();
-    if (!hoverable && !isShowTooltip()) return;
-    if (options.hoveredIndexProp?.() === void 0) {
-      localHoveredIndex.value = index;
-    }
-    tooltipPosition.value = { x: event.clientX, y: event.clientY };
-    if (!hoverable) return;
-    emit("update:hoveredIndex", index);
-    if (eventNames?.hover && getData) {
-      emit(eventNames.hover, index, getData(index));
-    }
-  };
-  const handleMouseMove = (event) => {
-    tooltipScheduler.schedule({ x: event.clientX, y: event.clientY });
-  };
-  const handleMouseLeave = () => {
-    tooltipScheduler.cancel();
-    const hoverable = isHoverable();
-    if (!hoverable && !isShowTooltip()) return;
-    if (options.hoveredIndexProp?.() === void 0) {
-      localHoveredIndex.value = null;
-    }
-    if (!hoverable) return;
-    emit("update:hoveredIndex", null);
-    if (eventNames?.hover) {
-      emit(eventNames.hover, null, null);
-    }
-  };
-  const handleClick = (index) => {
-    if (!unref(options.selectable)) return;
-    const nextIndex = resolvedSelectedIndex.value === index ? null : index;
-    if (options.selectedIndexProp?.() === void 0) {
-      localSelectedIndex.value = nextIndex;
-    }
-    emit("update:selectedIndex", nextIndex);
-    if (eventNames?.click && getData) {
-      emit(eventNames.click, index, getData(index));
-    }
-  };
-  const handleKeyDown = (event, index) => {
-    if (!unref(options.selectable)) return;
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    handleClick(index);
-  };
-  const handleLegendClick = (index) => {
-    handleClick(index);
-  };
-  const handleLegendHover = (index) => {
-    if (!unref(options.hoverable)) return;
-    if (options.hoveredIndexProp?.() === void 0) {
-      localHoveredIndex.value = index;
-    }
-    emit("update:hoveredIndex", index);
-  };
-  const handleLegendLeave = () => {
-    handleMouseLeave();
-  };
-  const wrapperClasses = computed(() => {
-    const position = unref(options.legendPosition) ?? "bottom";
-    return classNames(
-      "inline-flex",
-      position === "right" ? "flex-row items-start gap-4" : position === "left" ? "flex-row-reverse items-start gap-4" : position === "top" ? "flex-col-reverse gap-2" : "flex-col gap-2"
-    );
-  });
-  const createLegendItems = (items, palette, labelFormatter) => {
-    return items.map((item, index) => ({
-      index,
-      label: labelFormatter ? labelFormatter(item, index) : item.label ?? String(item.x ?? index),
-      color: item.color ?? palette[index % palette.length],
-      active: activeIndex.value === null || activeIndex.value === index
-    }));
-  };
-  return {
-    localHoveredIndex,
-    localSelectedIndex,
-    tooltipPosition,
-    resolvedHoveredIndex,
-    resolvedSelectedIndex,
-    activeIndex,
-    getElementOpacity,
-    handleMouseEnter,
-    handleMouseMove,
-    handleMouseLeave,
-    handleClick,
-    handleKeyDown,
-    handleLegendClick,
-    handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses,
-    createLegendItems
-  };
-}
-
-export {
-  useChartInteraction
-};