@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-LQP4TYEZ.mjs

@@ -0,0 +1,307 @@
+import {
+  useChartInteraction
+} from "./chunk-AI6X2WFK.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-W2FOU4XH.mjs";
+import {
+  ChartTooltip
+} from "./chunk-JRDQVGMH.mjs";
+import {
+  ChartCanvas
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  ChartLegend
+} from "./chunk-V4H2Z5ZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/FunnelChart.ts
+import { defineComponent, computed, h, useId } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  layoutFunnel,
+  getChartElementOpacity,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  resolveChartTooltipContent,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale,
+  funnelStageDisplayLabel,
+  funnelSegmentTransitionClasses,
+  pieSliceLabelInsideClasses,
+  DEFAULT_FUNNEL_HEIGHT
+} from "@expcat/tigercat-core";
+var FunnelChart = defineComponent({
+  name: "TigerFunnelChart",
+  inheritAttrs: false,
+  props: {
+    width: { type: Number, default: 320 },
+    height: { type: Number, default: DEFAULT_FUNNEL_HEIGHT },
+    padding: { type: [Number, Object], default: 24 },
+    responsive: { type: Boolean, default: false },
+    data: { type: Array, required: true },
+    direction: { type: String, default: "vertical" },
+    gap: { type: Number, default: 2 },
+    pinch: { type: Boolean, default: false },
+    colors: { type: Array },
+    gradient: { type: Boolean, default: false },
+    showLabels: { type: Boolean, default: true },
+    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 },
+    showLegend: { type: Boolean, default: false },
+    legendPosition: { type: String, default: "bottom" },
+    legendMarkerSize: { type: Number, default: 10 },
+    legendGap: { type: Number, default: 8 },
+    showTooltip: { type: Boolean, default: true },
+    tooltipFormatter: {
+      type: Function
+    },
+    title: { type: String },
+    desc: { type: String },
+    className: { type: String },
+    onSegmentClick: {
+      type: Function
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "segment-click", "segment-hover"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
+    const interactive = computed(
+      () => props.hoverable || props.selectable || typeof props.onSegmentClick === "function"
+    );
+    const gradientPrefix = getStableChartGradientPrefix("funnel", useId());
+    const {
+      tooltipPosition,
+      resolvedHoveredIndex,
+      activeIndex,
+      resolvedSelectedIndex,
+      handleMouseEnter,
+      handleMouseMove,
+      handleMouseLeave,
+      handleClick,
+      handleKeyDown,
+      handleLegendClick,
+      handleLegendHover,
+      handleLegendLeave
+    } = 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),
+      getData: (index) => props.data[index],
+      onHoveredIndexChange: (index) => emit("update:hoveredIndex", index),
+      onSelectedIndexChange: (index) => emit("update:selectedIndex", index),
+      onHover: (index, datum) => emit("segment-hover", index, datum),
+      onClick: (index, datum) => {
+        props.onSegmentClick?.(index, datum);
+        emit("segment-click", index, datum);
+      }
+    });
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
+    const palette = computed(() => resolveChartPalette(props.colors));
+    const segments = computed(
+      () => layoutFunnel(props.data, {
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        gap: props.gap,
+        pinch: props.pinch,
+        colors: palette.value,
+        direction: props.direction
+      })
+    );
+    const total = computed(() => segments.value.reduce((sum, segment) => sum + segment.value, 0));
+    const stageName = (datum, index) => funnelStageDisplayLabel(datum, index, labels.value.stageName);
+    const legendItems = computed(
+      () => buildChartLegendItems({
+        data: props.data,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (d, i) => stageName(d, i),
+        getColor: (d, i) => d.color ?? palette.value[i % palette.value.length]
+      })
+    );
+    const tooltipContent = computed(
+      () => resolveChartTooltipContent(
+        resolvedHoveredIndex.value,
+        props.data,
+        props.tooltipFormatter,
+        (datum, index) => {
+          const pct = total.value > 0 ? (datum.value / total.value * 100).toFixed(1) : "0";
+          return `${stageName(datum, index)}: ${datum.value} (${pct}%)`;
+        }
+      )
+    );
+    return () => {
+      const segs = segments.value;
+      const visualActive = segs.findIndex(
+        (segment) => segment.index === (activeIndex.value ?? resolvedHoveredIndex.value)
+      );
+      const handleSegmentKeyDown = (event, visualIndex) => {
+        if (isChartNavigationKey(event.key)) {
+          event.preventDefault();
+          const nextVisual = nextChartRovingIndex(visualIndex, event.key, segs.length);
+          const next = segs[nextVisual];
+          const node = event.currentTarget.parentElement?.querySelector(
+            `[data-funnel-segment][data-index="${next.index}"]`
+          );
+          if (node instanceof SVGElement) node.focus();
+          handleMouseEnter(next.index, event);
+          return;
+        }
+        handleKeyDown(event, segs[visualIndex].index);
+      };
+      const chart = h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          responsive: props.responsive,
+          title: props.title,
+          desc: props.desc,
+          onResolvedSizeChange
+        },
+        {
+          default: () => [
+            props.gradient ? h(
+              "defs",
+              null,
+              segs.map(
+                (seg) => h(
+                  "linearGradient",
+                  {
+                    key: `grad-${seg.index}`,
+                    id: `${gradientPrefix}-${seg.index}`,
+                    gradientUnits: "userSpaceOnUse",
+                    x1: 0,
+                    y1: 0,
+                    x2: props.direction === "horizontal" ? innerRect.value.width : 0,
+                    y2: props.direction === "horizontal" ? 0 : innerRect.value.height
+                  },
+                  [
+                    h("stop", { offset: "0%", "stop-color": seg.color, "stop-opacity": "1" }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": seg.color,
+                      "stop-opacity": "0.55"
+                    })
+                  ]
+                )
+              )
+            ) : null,
+            h(
+              "g",
+              { "data-series-type": "funnel" },
+              segs.map(
+                (seg, visualIndex) => h("path", {
+                  key: `seg-${seg.index}`,
+                  d: seg.path,
+                  fill: props.gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
+                  opacity: getChartElementOpacity(seg.index, activeIndex.value, {
+                    activeOpacity: props.activeOpacity,
+                    inactiveOpacity: props.inactiveOpacity
+                  }),
+                  class: classNames(
+                    interactive.value && "cursor-pointer",
+                    funnelSegmentTransitionClasses
+                  ),
+                  "data-funnel-segment": "",
+                  "data-index": seg.index,
+                  tabindex: interactive.value ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                  role: interactive.value ? "button" : void 0,
+                  "aria-hidden": interactive.value ? void 0 : true,
+                  onMouseenter: (e) => handleMouseEnter(seg.index, e),
+                  onMousemove: handleMouseMove,
+                  onMouseleave: handleMouseLeave,
+                  onFocus: (e) => handleMouseEnter(seg.index, e),
+                  onClick: () => handleClick(seg.index),
+                  onKeydown: (e) => handleSegmentKeyDown(e, visualIndex)
+                })
+              )
+            ),
+            ...props.showLabels ? segs.map(
+              (seg) => h(
+                "text",
+                {
+                  key: `label-${seg.index}`,
+                  x: seg.cx,
+                  y: seg.cy,
+                  class: pieSliceLabelInsideClasses,
+                  "text-anchor": "middle",
+                  "dominant-baseline": "middle",
+                  "aria-hidden": "true"
+                },
+                stageName(
+                  props.data[seg.index] ?? { value: seg.value, label: seg.label },
+                  seg.index
+                )
+              )
+            ) : []
+          ]
+        }
+      );
+      const tooltip = props.showTooltip ? h(ChartTooltip, {
+        content: tooltipContent.value,
+        open: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
+        x: tooltipPosition.value.x,
+        y: tooltipPosition.value.y
+      }) : null;
+      return h(
+        "div",
+        {
+          class: getCartesianChartShellClasses({
+            showLegend: props.showLegend,
+            legendPosition: props.legendPosition,
+            responsive: props.responsive,
+            className: classNames(coerceClassValue(attrs.class), props.className)
+          })
+        },
+        [
+          chart,
+          props.showLegend ? h(ChartLegend, {
+            items: legendItems.value,
+            orientation: chartLegendOrientationFromPosition(props.legendPosition),
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            interactive: props.hoverable || props.selectable,
+            ariaLabel: labels.value.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }) : null,
+          tooltip
+        ]
+      );
+    };
+  }
+});
+var FunnelChart_default = FunnelChart;
+
+export {
+  FunnelChart,
+  FunnelChart_default
+};

package/dist/chunk-LSODMFHX.mjs

@@ -0,0 +1,297 @@
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/MaskInput.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  ref,
+  useId,
+  watch
+} from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  applyMaskInput,
+  callUnknownEventHandler,
+  classNames,
+  coerceClassValue,
+  formatMaskValue,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputFieldClasses,
+  getInputLabels,
+  getInputWrapperClasses,
+  getMaskInputMode,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  parseMask,
+  runShakeAnimation,
+  shouldEmitMaskComplete
+} from "@expcat/tigercat-core";
+var MaskInput = defineComponent({
+  name: "TigerMaskInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    mask: { type: String, required: true },
+    tokens: { type: Object, default: void 0 },
+    size: { type: String, default: void 0 },
+    status: { type: String, default: void 0 },
+    errorMessage: String,
+    placeholder: { type: String, default: "" },
+    disabled: Boolean,
+    readonly: Boolean,
+    clearable: Boolean,
+    name: String,
+    id: String,
+    autoComplete: String,
+    autoFocus: Boolean,
+    _shakeTrigger: { type: Number, default: void 0 },
+    className: String,
+    style: { type: Object, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": null,
+    change: null,
+    complete: null,
+    focus: null,
+    blur: null,
+    clear: null
+  },
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const labels = computed(() => getInputLabels(config.value.locale));
+    const inGroup = computed(() => inputGroup != null);
+    const effectiveSize = computed(() => props.size ?? inputGroup?.size ?? "md");
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const formValue = computed(() => formItemControl?.value.value);
+    const errorMsgId = `tiger-mask-input-error-${useId()}`;
+    const chromeRef = ref(null);
+    const inputRef = ref(null);
+    const isComposing = ref(false);
+    const spec = computed(() => parseMask(props.mask, props.tokens));
+    const localRaw = ref(
+      props.modelValue ?? (typeof formValue.value === "string" ? formValue.value : void 0) ?? props.defaultValue ?? ""
+    );
+    const rawValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : typeof formValue.value === "string" ? formValue.value : localRaw.value
+    );
+    const formatted = computed(() => formatMaskValue(rawValue.value, spec.value));
+    const maskedValue = computed(() => formatted.value.maskedValue);
+    const resolvedInputMode = computed(() => getMaskInputMode(props.mask, spec.value));
+    watch(
+      () => [props.modelValue, formValue.value],
+      ([model, controlValue]) => {
+        const source = model !== void 0 ? model : typeof controlValue === "string" ? controlValue : void 0;
+        if (source === void 0) return;
+        if (source !== localRaw.value) localRaw.value = source;
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value, props._shakeTrigger],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(chromeRef.value ?? inputRef.value);
+      },
+      { flush: "post" }
+    );
+    function commit(raw, detail, wasCompleted) {
+      if (props.modelValue === void 0 && typeof formValue.value !== "string") {
+        localRaw.value = raw;
+      }
+      emit("update:modelValue", raw);
+      emit("change", raw, detail);
+      formItemControl?.onChange(raw);
+      if (shouldEmitMaskComplete(wasCompleted, detail.completed)) {
+        emit("complete", raw, detail.maskedValue);
+      }
+    }
+    function applyValue(inputValue, caret) {
+      const wasCompleted = formatted.value.completed;
+      const result = applyMaskInput(inputValue, caret, spec.value, maskedValue.value);
+      if (inputRef.value) inputRef.value.value = result.maskedValue;
+      commit(
+        result.rawValue,
+        { maskedValue: result.maskedValue, completed: result.completed },
+        wasCompleted
+      );
+      nextTick(() => {
+        if (inputRef.value) inputRef.value.setSelectionRange(result.caret, result.caret);
+      });
+    }
+    function handleInput(event) {
+      if (isComposing.value) return;
+      const target = event.target;
+      applyValue(target.value, target.selectionStart ?? target.value.length);
+    }
+    function handlePaste(event) {
+      if (effectiveDisabled.value || props.readonly) return;
+      event.preventDefault();
+      const input = event.target;
+      const text = event.clipboardData?.getData("text") ?? "";
+      const start = input.selectionStart ?? input.value.length;
+      const end = input.selectionEnd ?? input.value.length;
+      applyValue(input.value.slice(0, start) + text + input.value.slice(end), start + text.length);
+    }
+    function handleClear() {
+      commit("", { maskedValue: "", completed: false }, formatted.value.completed);
+      emit("clear");
+      inputRef.value?.focus();
+    }
+    expose({
+      focus: () => inputRef.value?.focus(),
+      input: inputRef
+    });
+    return () => {
+      const { class: attrClass, style: attrStyle, type: attrType, ...restAttrs } = attrs;
+      const activeError = status.value === "error" && !!props.errorMessage;
+      const showClear = props.clearable && !effectiveDisabled.value && !props.readonly && rawValue.value.length > 0;
+      const hasExtras = activeError;
+      const describedBy = mergeAriaDescribedBy(
+        mergeAriaDescribedBy(
+          typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+          activeError ? errorMsgId : void 0
+        ),
+        formItemControl?.describedBy.value
+      );
+      const attrInputMode = typeof restAttrs.inputmode === "string" ? restAttrs.inputmode : void 0;
+      const field = h("input", {
+        ...restAttrs,
+        ref: inputRef,
+        class: getInputFieldClasses({
+          size: effectiveSize.value,
+          status: status.value,
+          hasSuffix: showClear
+        }),
+        type: typeof attrType === "string" ? attrType : "text",
+        inputmode: attrInputMode ?? resolvedInputMode.value,
+        value: maskedValue.value,
+        placeholder: props.placeholder,
+        disabled: effectiveDisabled.value,
+        readonly: props.readonly,
+        id: effectiveId.value,
+        autocomplete: props.autoComplete,
+        autofocus: props.autoFocus,
+        "aria-invalid": status.value === "error" ? true : restAttrs["aria-invalid"],
+        "aria-required": formItemControl?.required.value ? true : restAttrs["aria-required"],
+        "aria-describedby": describedBy,
+        onInput: (event) => {
+          handleInput(event);
+          callUnknownEventHandler(restAttrs.onInput, event);
+        },
+        onPaste: handlePaste,
+        onCompositionstart: () => {
+          isComposing.value = true;
+        },
+        onCompositionend: (event) => {
+          isComposing.value = false;
+          const target = event.target;
+          applyValue(target.value, target.selectionStart ?? target.value.length);
+        },
+        onFocus: (event) => emit("focus", event),
+        onBlur: (event) => {
+          formItemControl?.onBlur();
+          emit("blur", event);
+        }
+      });
+      const chrome = h(
+        "div",
+        {
+          ref: chromeRef,
+          class: classNames(
+            getInputWrapperClasses(status.value, { inGroup: inGroup.value && !hasExtras }),
+            !hasExtras ? props.className : void 0,
+            !hasExtras ? coerceClassValue(attrClass) : void 0
+          ),
+          style: !hasExtras ? mergeStyleValues(props.style, attrStyle) : void 0,
+          [TIGER_CHROME_ATTR]: "",
+          onAnimationend: () => chromeRef.value?.classList.remove(SHAKE_CLASS)
+        },
+        [
+          field,
+          effectiveName.value ? h("input", {
+            type: "hidden",
+            name: effectiveName.value,
+            value: rawValue.value,
+            disabled: effectiveDisabled.value
+          }) : null,
+          showClear ? h(
+            "button",
+            {
+              type: "button",
+              class: getInputClearButtonClasses(effectiveSize.value),
+              onMousedown: (event) => event.preventDefault(),
+              onClick: handleClear,
+              "aria-label": labels.value.clearAriaLabel,
+              tabindex: -1
+            },
+            [
+              h(Icon, {
+                name: "close",
+                size: "sm",
+                "aria-hidden": true
+              })
+            ]
+          ) : null
+        ]
+      );
+      if (!hasExtras) return chrome;
+      return h(
+        "div",
+        {
+          class: classNames(
+            inGroup.value ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+            props.className,
+            coerceClassValue(attrClass)
+          ),
+          style: mergeStyleValues(props.style, attrStyle)
+        },
+        [
+          chrome,
+          activeError ? h(
+            "div",
+            {
+              id: errorMsgId,
+              class: getInputErrorClasses(effectiveSize.value),
+              "aria-live": "polite"
+            },
+            props.errorMessage
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};