@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-WV25G4M3.mjs

@@ -1,194 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/Rate.ts
-import { defineComponent, h, ref, computed } from "vue";
-import {
-  rateBaseClasses,
-  getRateStarClasses,
-  rateHalfStarInnerClasses,
-  rateActiveColor,
-  rateInactiveColor,
-  rateHoverColor,
-  starPathD,
-  starViewBox,
-  classNames,
-  coerceClassValue,
-  mergeTigerLocale,
-  getRateLabels
-} from "@expcat/tigercat-core";
-var Rate = defineComponent({
-  name: "TigerRate",
-  props: {
-    modelValue: { type: Number, default: 0 },
-    count: { type: Number, default: 5 },
-    allowHalf: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    size: { type: String, default: "md" },
-    allowClear: { type: Boolean, default: true },
-    character: { type: String, default: void 0 },
-    locale: { type: Object, default: void 0 },
-    labels: { type: Object, default: void 0 }
-  },
-  emits: ["update:modelValue", "change", "hover-change"],
-  setup(props, { emit, attrs }) {
-    const config = useTigerConfig();
-    const hoverValue = ref(0);
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getRateLabels(mergedLocale.value, props.labels));
-    const displayValue = computed(
-      () => hoverValue.value > 0 ? hoverValue.value : props.modelValue
-    );
-    function getStarValue(index, isHalf) {
-      return isHalf ? index + 0.5 : index + 1;
-    }
-    function handleClick(index, e) {
-      if (props.disabled) return;
-      const el = e.currentTarget;
-      const rect = el.getBoundingClientRect();
-      const isHalf = props.allowHalf && e.clientX - rect.left < rect.width / 2;
-      const val = getStarValue(index, isHalf);
-      const newVal = props.allowClear && val === props.modelValue ? 0 : val;
-      emit("update:modelValue", newVal);
-      emit("change", newVal);
-    }
-    function handleMouseMove(index, e) {
-      if (props.disabled) return;
-      const el = e.currentTarget;
-      const rect = el.getBoundingClientRect();
-      const isHalf = props.allowHalf && e.clientX - rect.left < rect.width / 2;
-      const val = getStarValue(index, isHalf);
-      if (val !== hoverValue.value) {
-        hoverValue.value = val;
-        emit("hover-change", val);
-      }
-    }
-    function handleMouseLeave() {
-      if (props.disabled) return;
-      hoverValue.value = 0;
-      emit("hover-change", 0);
-    }
-    function handleKeydown(e) {
-      if (props.disabled) return;
-      const step = props.allowHalf ? 0.5 : 1;
-      let next = props.modelValue;
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowUp":
-          next = Math.min(props.count, props.modelValue + step);
-          break;
-        case "ArrowLeft":
-        case "ArrowDown":
-          next = Math.max(0, props.modelValue - step);
-          break;
-        case "Home":
-          next = 0;
-          break;
-        case "End":
-          next = props.count;
-          break;
-        default:
-          return;
-      }
-      e.preventDefault();
-      if (next !== props.modelValue) {
-        emit("update:modelValue", next);
-        emit("change", next);
-      }
-    }
-    return () => {
-      const isChar = !!props.character;
-      const stars = [];
-      for (let i = 0; i < props.count; i++) {
-        const full = displayValue.value >= i + 1;
-        const half = props.allowHalf && !full && displayValue.value >= i + 0.5;
-        const isHovering = hoverValue.value > 0;
-        const colorClass = full || half ? isHovering ? rateHoverColor : rateActiveColor : rateInactiveColor;
-        const starContent = isChar ? h("span", null, props.character) : h(
-          "svg",
-          {
-            viewBox: starViewBox,
-            fill: "currentColor",
-            class: "w-full h-full"
-          },
-          [h("path", { d: starPathD })]
-        );
-        const children = half ? [
-          // Inactive background (full star)
-          h("span", { class: classNames("absolute inset-0", rateInactiveColor) }, [
-            isChar ? h("span", null, props.character) : h(
-              "svg",
-              {
-                viewBox: starViewBox,
-                fill: "currentColor",
-                class: "w-full h-full"
-              },
-              [h("path", { d: starPathD })]
-            )
-          ]),
-          // Active half (clipped left 50%; inner glyph keeps full-star width)
-          h(
-            "span",
-            {
-              class: classNames(
-                "absolute inset-0 overflow-hidden",
-                isHovering ? rateHoverColor : rateActiveColor
-              ),
-              style: { width: "50%" }
-            },
-            [
-              isChar ? h("span", { class: rateHalfStarInnerClasses }, props.character) : h(
-                "svg",
-                {
-                  viewBox: starViewBox,
-                  fill: "currentColor",
-                  class: rateHalfStarInnerClasses
-                },
-                [h("path", { d: starPathD })]
-              )
-            ]
-          )
-        ] : [h("span", { class: colorClass }, [starContent])];
-        stars.push(
-          h(
-            "span",
-            {
-              key: i,
-              class: getRateStarClasses(props.size, isChar, props.disabled),
-              "aria-hidden": "true",
-              onClick: (e) => handleClick(i, e),
-              onMousemove: (e) => handleMouseMove(i, e),
-              onMouseleave: handleMouseLeave
-            },
-            children
-          )
-        );
-      }
-      const valueText = labels.value.valueText.replace("{value}", String(props.modelValue)).replace("{plural}", props.modelValue === 1 ? "" : "s");
-      return h(
-        "div",
-        {
-          class: classNames(rateBaseClasses, coerceClassValue(attrs.class)),
-          role: "slider",
-          "aria-label": labels.value.ariaLabel,
-          "aria-valuemin": 0,
-          "aria-valuemax": props.count,
-          "aria-valuenow": props.modelValue,
-          "aria-valuetext": valueText,
-          "aria-disabled": props.disabled || void 0,
-          "aria-orientation": "horizontal",
-          tabindex: props.disabled ? -1 : 0,
-          onKeydown: handleKeydown
-        },
-        stars
-      );
-    };
-  }
-});
-var Rate_default = Rate;
-
-export {
-  Rate,
-  Rate_default
-};

package/dist/chunk-X5LJT76O.mjs

@@ -1,255 +0,0 @@
-import {
-  useChartInteraction
-} from "./chunk-FHUGOSEY.mjs";
-import {
-  ChartSeries
-} from "./chunk-2ZUEXCVJ.mjs";
-import {
-  ChartTooltip
-} from "./chunk-SPFL55TF.mjs";
-import {
-  ChartCanvas
-} from "./chunk-SNNT64HK.mjs";
-import {
-  ChartLegend
-} from "./chunk-V443QIJM.mjs";
-
-// src/components/SunburstChart.ts
-import { defineComponent, computed, h, useId } from "vue";
-import {
-  classNames,
-  computeSunburstArcs,
-  getSunburstLabelPoint,
-  getChartElementOpacity,
-  getChartInnerRect,
-  getStableChartGradientPrefix,
-  resolveChartPalette,
-  buildChartLegendItems,
-  resolveChartTooltipContent
-} from "@expcat/tigercat-core";
-var SunburstChart = defineComponent({
-  name: "TigerSunburstChart",
-  props: {
-    width: { type: Number, default: 320 },
-    height: { type: Number, default: 320 },
-    padding: { type: [Number, Object], default: 24 },
-    data: { type: Array, required: true },
-    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 },
-    activeOpacity: { type: Number, default: 1 },
-    inactiveOpacity: { type: Number, default: 0.25 },
-    selectable: { type: Boolean, default: false },
-    selectedIndex: { type: Number, default: void 0 },
-    // Legend
-    showLegend: { type: Boolean, default: false },
-    legendPosition: { type: String, default: "bottom" },
-    legendMarkerSize: { type: Number, default: 10 },
-    legendGap: { type: Number, default: 8 },
-    // Tooltip
-    showTooltip: { type: Boolean, default: true },
-    tooltipFormatter: {
-      type: Function
-    },
-    // a11y
-    title: { type: String },
-    desc: { type: String },
-    className: { type: String }
-  },
-  emits: ["update:hoveredIndex", "update:selectedIndex", "arc-click", "arc-hover"],
-  setup(props, { emit }) {
-    const {
-      tooltipPosition,
-      resolvedHoveredIndex,
-      activeIndex,
-      handleMouseEnter,
-      handleMouseMove,
-      handleMouseLeave,
-      handleClick,
-      handleLegendClick,
-      handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
-    } = useChartInteraction({
-      hoverable: computed(() => props.hoverable),
-      showTooltip: computed(() => props.showTooltip),
-      hoveredIndexProp: () => props.hoveredIndex,
-      selectable: computed(() => props.selectable),
-      selectedIndexProp: () => props.selectedIndex,
-      activeOpacity: computed(() => props.activeOpacity),
-      inactiveOpacity: computed(() => props.inactiveOpacity),
-      legendPosition: computed(() => props.legendPosition),
-      emit,
-      getData: (index) => {
-        const arc = arcs.value[index];
-        return arc ? { label: arc.label, value: arc.value } : {};
-      },
-      eventNames: { hover: "arc-hover", click: "arc-click" }
-    });
-    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))
-    );
-    const cx = computed(() => innerRect.value.width / 2);
-    const cy = computed(() => innerRect.value.height / 2);
-    const arcs = computed(
-      () => computeSunburstArcs(props.data, {
-        cx: cx.value,
-        cy: cy.value,
-        innerRadius: innerRadius.value,
-        outerRadius: outerRadius.value,
-        colors: palette.value
-      })
-    );
-    const rootArcs = computed(() => arcs.value.filter((a) => a.depth === 0));
-    const legendItems = computed(
-      () => buildChartLegendItems({
-        data: rootArcs.value,
-        palette: palette.value,
-        activeIndex: activeIndex.value,
-        getLabel: (d) => d.label,
-        getColor: (d) => d.color
-      })
-    );
-    const tooltipContent = computed(
-      () => resolveChartTooltipContent(
-        resolvedHoveredIndex.value,
-        arcs.value,
-        void 0,
-        (arc) => `${arc.label}: ${arc.value}`
-      )
-    );
-    return () => {
-      const interactive = props.hoverable || props.selectable;
-      const chart = h(
-        ChartCanvas,
-        {
-          width: props.width,
-          height: props.height,
-          padding: props.padding,
-          title: props.title,
-          desc: props.desc,
-          className: classNames(props.className)
-        },
-        {
-          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;
-            const paths = 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 labels = props.showLabels ? arcs.value.map((arc) => {
-              const { x, y } = getSunburstLabelPoint(arc, cx.value, cy.value);
-              return h(
-                "text",
-                {
-                  key: `label-${arc.index}`,
-                  x,
-                  y,
-                  "text-anchor": "middle",
-                  "dominant-baseline": "middle",
-                  class: "fill-white text-xs",
-                  style: { pointerEvents: "none" },
-                  "aria-hidden": "true"
-                },
-                arc.label
-              );
-            }) : [];
-            return h(
-              ChartSeries,
-              { data: arcs.value, type: "sunburst" },
-              {
-                default: () => [gradientDefs, ...paths, ...labels]
-              }
-            );
-          }
-        }
-      );
-      const tooltip = props.showTooltip ? h(ChartTooltip, {
-        content: tooltipContent.value,
-        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
-        x: tooltipPosition.value.x,
-        y: tooltipPosition.value.y
-      }) : null;
-      if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
-      }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
-    };
-  }
-});
-var SunburstChart_default = SunburstChart;
-
-export {
-  SunburstChart,
-  SunburstChart_default
-};