@expcat/tigercat-vue 2.1.2 → 2.1.4

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-EC62TY2Y.mjs

@@ -1,300 +0,0 @@
-import {
-  renderVueOverlayTeleport,
-  useVueAnchoredOverlay
-} from "./chunk-Q7Y22OFX.mjs";
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/ColorPicker.ts
-import { defineComponent, h, ref, computed, watch } from "vue";
-import {
-  colorPickerBaseClasses,
-  getColorPickerTriggerClasses,
-  colorPickerPanelClasses,
-  colorPickerInputClasses,
-  colorPickerPresetClasses,
-  rgbToHex,
-  rgbToHsv,
-  hsvToRgb,
-  formatColorString,
-  parseColorInput,
-  parseColorParts,
-  classNames,
-  coerceClassValue,
-  mergeTigerLocale,
-  getColorPickerLabels,
-  formatColorPickerSelectPreset
-} from "@expcat/tigercat-core";
-function rgbFromValue(value) {
-  const parts = parseColorParts(value);
-  return parts ? { r: parts.r, g: parts.g, b: parts.b } : { r: 0, g: 0, b: 0 };
-}
-function explicitAlphaFromValue(value) {
-  if (!/^(rgba|hsla)\(/i.test(value.trim())) return null;
-  const parts = parseColorParts(value);
-  return parts ? parts.a : null;
-}
-var ColorPicker = defineComponent({
-  name: "TigerColorPicker",
-  props: {
-    modelValue: { type: String, default: "#2563eb" },
-    disabled: { type: Boolean, default: false },
-    size: { type: String, default: "md" },
-    showAlpha: { type: Boolean, default: false },
-    format: { type: String, default: "hex" },
-    presets: { type: Array, default: void 0 },
-    locale: { type: Object, default: void 0 },
-    labels: { type: Object, default: void 0 }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit, attrs }) {
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getColorPickerLabels(mergedLocale.value, props.labels));
-    const isOpen = ref(false);
-    const alpha = ref(explicitAlphaFromValue(props.modelValue) ?? 1);
-    const containerRef = ref(null);
-    const triggerRef = ref(null);
-    const panelRef = ref(null);
-    const overlay = useVueAnchoredOverlay({
-      enabled: isOpen,
-      referenceRef: triggerRef,
-      floatingRef: panelRef,
-      containerRef,
-      placement: "bottom-start",
-      offset: 4,
-      dismissOnOutside: true,
-      dismissOnEscape: true,
-      restoreFocusOnDismiss: true,
-      onDismiss: closePanel
-    });
-    const rgb = computed(() => rgbFromValue(props.modelValue));
-    const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
-    watch(
-      () => props.modelValue,
-      (value) => {
-        const next = explicitAlphaFromValue(value);
-        if (next !== null) alpha.value = next;
-      }
-    );
-    const displayValue = computed(
-      () => formatColorString(
-        rgb.value.r,
-        rgb.value.g,
-        rgb.value.b,
-        props.format,
-        props.showAlpha ? alpha.value : void 0
-      )
-    );
-    const swatchColor = computed(
-      () => props.showAlpha ? `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value})` : props.modelValue
-    );
-    const inputValue = ref(displayValue.value);
-    watch(displayValue, (v) => {
-      inputValue.value = v;
-    });
-    function togglePanel() {
-      if (props.disabled) return;
-      isOpen.value = !isOpen.value;
-    }
-    function closePanel() {
-      isOpen.value = false;
-    }
-    function handleTriggerKeydown(e) {
-      if (props.disabled) return;
-      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-        e.preventDefault();
-        isOpen.value = !isOpen.value;
-      } else if (e.key === "Escape" && isOpen.value) {
-        isOpen.value = false;
-      }
-    }
-    function handleAlphaChange(e) {
-      const nextAlpha = Number(e.target.value) / 100;
-      alpha.value = nextAlpha;
-      const format = props.format === "hex" ? "rgb" : props.format;
-      const next = formatColorString(rgb.value.r, rgb.value.g, rgb.value.b, format, nextAlpha);
-      emit("update:modelValue", next);
-      emit("change", next);
-    }
-    function handleHueChange(e) {
-      const hue = Number(e.target.value);
-      const { r, g, b } = hsvToRgb(hue, hsv.value.s, hsv.value.v);
-      const hex = rgbToHex(r, g, b);
-      emit("update:modelValue", hex);
-      emit("change", hex);
-    }
-    function handleInputChange(e) {
-      const val = e.target.value;
-      inputValue.value = val;
-      const parsed = parseColorInput(val);
-      if (parsed) {
-        emit("update:modelValue", parsed);
-        emit("change", parsed);
-      }
-    }
-    function handlePresetClick(color) {
-      emit("update:modelValue", color);
-      emit("change", color);
-    }
-    function handlePresetKeydown(e, color) {
-      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-        e.preventDefault();
-        handlePresetClick(color);
-      }
-    }
-    function handleClear() {
-      emit("update:modelValue", "");
-      emit("change", "");
-    }
-    return () => h(
-      "div",
-      {
-        ref: containerRef,
-        class: classNames(colorPickerBaseClasses, coerceClassValue(attrs.class))
-      },
-      [
-        // Color trigger swatch
-        h("div", {
-          ref: triggerRef,
-          class: getColorPickerTriggerClasses(props.size, props.disabled),
-          style: { backgroundColor: swatchColor.value },
-          role: "button",
-          "data-tiger-colorpicker-trigger": "",
-          "aria-label": labels.value.trigger,
-          title: labels.value.trigger,
-          "aria-haspopup": "dialog",
-          "aria-expanded": isOpen.value,
-          "aria-disabled": props.disabled || void 0,
-          tabindex: props.disabled ? -1 : 0,
-          onClick: togglePanel,
-          onKeydown: handleTriggerKeydown
-        }),
-        // Panel
-        isOpen.value ? renderVueOverlayTeleport(
-          h(
-            "div",
-            {
-              ref: panelRef,
-              class: classNames(colorPickerPanelClasses, overlay.floatingClasses.value),
-              style: overlay.floatingStyles.value,
-              "data-positioned": overlay.positioned.value,
-              "data-tiger-colorpicker-panel": "",
-              role: "dialog",
-              "aria-label": labels.value.panelTitle
-            },
-            [
-              h("div", { class: "mb-2 flex items-center justify-between gap-2" }, [
-                h(
-                  "span",
-                  { class: "text-xs font-medium text-[var(--tiger-text,#111827)]" },
-                  labels.value.panelTitle
-                ),
-                h(
-                  "button",
-                  {
-                    type: "button",
-                    class: "text-xs text-[var(--tiger-primary,#2563eb)] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-primary,#2563eb)]",
-                    "data-tiger-colorpicker-clear": "",
-                    onClick: handleClear
-                  },
-                  labels.value.clear
-                )
-              ]),
-              // Hue slider
-              h("div", { class: "mb-2" }, [
-                h(
-                  "label",
-                  { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-                  labels.value.hue
-                ),
-                h("input", {
-                  type: "range",
-                  min: 0,
-                  max: 360,
-                  value: hsv.value.h,
-                  class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": labels.value.hue,
-                  onInput: handleHueChange
-                })
-              ]),
-              // Alpha slider
-              props.showAlpha ? h("div", { class: "mb-2" }, [
-                h(
-                  "label",
-                  { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-                  labels.value.alpha
-                ),
-                h("input", {
-                  type: "range",
-                  min: 0,
-                  max: 100,
-                  value: Math.round(alpha.value * 100),
-                  class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": labels.value.alpha,
-                  onInput: handleAlphaChange
-                })
-              ]) : null,
-              // Color value input (rendered in the selected format)
-              h("div", { class: "mb-2" }, [
-                h(
-                  "label",
-                  {
-                    class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase"
-                  },
-                  props.format
-                ),
-                h("input", {
-                  type: "text",
-                  class: colorPickerInputClasses,
-                  value: inputValue.value,
-                  "aria-label": labels.value.value,
-                  onInput: handleInputChange
-                })
-              ]),
-              // Preview
-              h("div", { class: "flex items-center gap-2 mb-2" }, [
-                h("div", {
-                  class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
-                  style: { backgroundColor: swatchColor.value },
-                  "aria-label": labels.value.preview
-                }),
-                h(
-                  "span",
-                  { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
-                  displayValue.value
-                )
-              ]),
-              // Presets
-              props.presets && props.presets.length > 0 ? h("div", { class: "flex flex-wrap gap-1" }, [
-                ...props.presets.map(
-                  (color) => h("div", {
-                    key: color,
-                    class: colorPickerPresetClasses,
-                    style: { backgroundColor: color },
-                    role: "button",
-                    tabindex: 0,
-                    "aria-label": formatColorPickerSelectPreset(
-                      labels.value.selectPreset,
-                      color
-                    ),
-                    onClick: () => handlePresetClick(color),
-                    onKeydown: (e) => handlePresetKeydown(e, color)
-                  })
-                )
-              ]) : null
-            ]
-          ),
-          overlay.target.value
-        ) : null
-      ]
-    );
-  }
-});
-var ColorPicker_default = ColorPicker;
-
-export {
-  ColorPicker,
-  ColorPicker_default
-};