@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-3VUEZQOO.mjs

@@ -0,0 +1,287 @@
+import {
+  usePopup
+} from "./chunk-ZWKDK6AF.mjs";
+import {
+  assignOverlayTriggerRef,
+  renderOverlayTrigger,
+  resolveOverlayTriggerElement
+} from "./chunk-CMYPAPF2.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueFocusTrap
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Popconfirm.ts
+import { defineComponent, computed, h, nextTick, ref, useId, watch } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getArrowStyles,
+  getOverlayTriggerAria,
+  getPopconfirmIconPath,
+  getPopconfirmContainerClasses,
+  getPopconfirmTriggerClasses,
+  getPopconfirmContentClasses,
+  getPopconfirmTitleClasses,
+  getPopconfirmDescriptionClasses,
+  getPopconfirmIconClasses,
+  getPopconfirmArrowClasses,
+  getPopconfirmButtonsClasses,
+  mergeStyleValues,
+  popconfirmIconPathStrokeLinecap,
+  popconfirmIconPathStrokeLinejoin,
+  popconfirmIconStrokeWidth,
+  popconfirmIconViewBox,
+  resolveLocaleText
+} from "@expcat/tigercat-core";
+var renderPopconfirmIcon = (iconType) => h(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: popconfirmIconViewBox,
+    "stroke-width": String(popconfirmIconStrokeWidth),
+    stroke: "currentColor"
+  },
+  [
+    h("path", {
+      "stroke-linecap": popconfirmIconPathStrokeLinecap,
+      "stroke-linejoin": popconfirmIconPathStrokeLinejoin,
+      d: getPopconfirmIconPath(iconType)
+    })
+  ]
+);
+var Popconfirm = defineComponent({
+  name: "TigerPopconfirm",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    title: { type: String, default: void 0 },
+    description: { type: String, default: void 0 },
+    icon: {
+      type: String,
+      default: "warning"
+    },
+    showIcon: { type: Boolean, default: true },
+    okText: { type: String, default: void 0 },
+    cancelText: { type: String, default: void 0 },
+    okType: { type: String, default: "primary" },
+    placement: { type: String, default: "top" },
+    offset: { type: Number, default: 8 },
+    disabled: { type: Boolean, default: false },
+    asChild: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: { type: [String, Object, Array], default: void 0 }
+  },
+  emits: ["update:open", "open-change", "confirm", "cancel"],
+  setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const arrowRef = ref(null);
+    const cancelRef = ref(null);
+    const confirming = ref(false);
+    const {
+      currentVisible,
+      setVisible,
+      containerRef,
+      triggerRef,
+      floatingRef,
+      closeAndRestoreFocus,
+      floatingStyles,
+      floatingClasses,
+      positioned,
+      overlayTarget,
+      actualPlacement,
+      arrowX,
+      arrowY
+    } = usePopup({ props, emit, multiTrigger: false, arrowRef });
+    useVueFocusTrap({ enabled: currentVisible, containerRef: floatingRef });
+    watch(currentVisible, (visible) => {
+      if (!visible) {
+        confirming.value = false;
+        return;
+      }
+      nextTick(() => {
+        resolveOverlayTriggerElement(cancelRef.value)?.focus();
+      });
+    });
+    const popconfirmId = `tiger-popconfirm-${useId()}`;
+    const titleId = `${popconfirmId}-title`;
+    const descriptionId = `${popconfirmId}-description`;
+    const resolvedTitle = computed(
+      () => resolveLocaleText(
+        "Are you sure you want to continue?",
+        props.title,
+        config.value.locale?.common?.confirmTitle
+      )
+    );
+    const resolvedOkText = computed(
+      () => resolveLocaleText("OK", props.okText, config.value.locale?.common?.okText)
+    );
+    const resolvedCancelText = computed(
+      () => resolveLocaleText("Cancel", props.cancelText, config.value.locale?.common?.cancelText)
+    );
+    const handleConfirm = () => {
+      emit("confirm");
+      closeAndRestoreFocus();
+    };
+    const handleCancel = () => {
+      if (confirming.value) return;
+      emit("cancel");
+      closeAndRestoreFocus();
+    };
+    const containerClasses = computed(
+      () => classNames(
+        getPopconfirmContainerClasses(),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const triggerClasses = computed(() => getPopconfirmTriggerClasses(props.disabled));
+    const iconClasses = computed(() => getPopconfirmIconClasses(props.icon));
+    const arrowClasses = getPopconfirmArrowClasses();
+    const contentClasses = getPopconfirmContentClasses();
+    const titleClasses = getPopconfirmTitleClasses();
+    const descriptionClasses = getPopconfirmDescriptionClasses();
+    const buttonsClasses = getPopconfirmButtonsClasses();
+    const arrowStyle = computed(
+      () => getArrowStyles(actualPlacement.value, { x: arrowX.value, y: arrowY.value })
+    );
+    return () => {
+      const triggerSlot = slots.trigger?.({ open: currentVisible.value });
+      const defaultSlot = triggerSlot ?? slots.default?.();
+      if (!defaultSlot || defaultSlot.length === 0) return null;
+      const {
+        class: _class,
+        style: _style,
+        title: _title,
+        onConfirm: _onConfirm,
+        ...restAttrs
+      } = attrs;
+      const describedBy = props.description || slots.description ? descriptionId : void 0;
+      const triggerAria = getOverlayTriggerAria({
+        kind: "dialog",
+        open: currentVisible.value,
+        controlsId: popconfirmId,
+        disabled: props.disabled
+      });
+      const trigger = renderOverlayTrigger({
+        asChild: props.asChild,
+        child: defaultSlot.length === 1 ? defaultSlot[0] : defaultSlot,
+        setTriggerRef: (el) => assignOverlayTriggerRef(triggerRef, el),
+        className: props.asChild ? void 0 : triggerClasses.value,
+        disabled: props.disabled,
+        preventDefaultOnClick: true,
+        aria: triggerAria,
+        handlers: {
+          onClick: () => {
+            if (props.disabled) return;
+            setVisible(!currentVisible.value);
+          }
+        }
+      });
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: containerClasses.value,
+          style: mergeStyleValues(props.style)
+        },
+        [
+          trigger,
+          renderVueOverlayTeleport(
+            h(
+              "div",
+              {
+                ref: floatingRef,
+                class: floatingClasses.value,
+                style: floatingStyles.value,
+                "data-positioned": positioned.value,
+                hidden: !currentVisible.value,
+                "aria-hidden": !currentVisible.value
+              },
+              [
+                h("div", { class: "relative" }, [
+                  h("div", {
+                    ref: arrowRef,
+                    class: arrowClasses,
+                    style: arrowStyle.value,
+                    "aria-hidden": "true"
+                  }),
+                  h(
+                    "div",
+                    {
+                      id: popconfirmId,
+                      role: "dialog",
+                      "aria-modal": "false",
+                      tabindex: -1,
+                      "aria-labelledby": titleId,
+                      "aria-describedby": describedBy,
+                      class: contentClasses
+                    },
+                    [
+                      h("div", { class: "flex items-start" }, [
+                        props.showIcon ? h("div", { class: iconClasses.value, "aria-hidden": "true" }, [
+                          renderPopconfirmIcon(props.icon)
+                        ]) : null,
+                        h("div", { class: "flex-1" }, [
+                          h(
+                            "div",
+                            { id: titleId, class: titleClasses },
+                            slots.title ? slots.title() : resolvedTitle.value
+                          ),
+                          props.description || slots.description ? h(
+                            "div",
+                            { id: descriptionId, class: descriptionClasses },
+                            slots.description ? slots.description() : props.description
+                          ) : null
+                        ])
+                      ]),
+                      h("div", { class: buttonsClasses }, [
+                        h(
+                          Button,
+                          {
+                            ref: cancelRef,
+                            size: "sm",
+                            variant: "outline",
+                            onClick: handleCancel
+                          },
+                          { default: () => resolvedCancelText.value }
+                        ),
+                        h(
+                          Button,
+                          {
+                            size: "sm",
+                            variant: "primary",
+                            danger: props.okType === "danger",
+                            loading: confirming.value,
+                            onClick: () => void handleConfirm()
+                          },
+                          { default: () => resolvedOkText.value }
+                        )
+                      ])
+                    ]
+                  )
+                ])
+              ]
+            ),
+            overlayTarget.value
+          )
+        ]
+      );
+    };
+  }
+});
+var Popconfirm_default = Popconfirm;
+
+export {
+  Popconfirm,
+  Popconfirm_default
+};

package/dist/chunk-3VZRHFXF.mjs

@@ -0,0 +1,337 @@
+import {
+  useChartInteraction
+} from "./chunk-AI6X2WFK.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-W2FOU4XH.mjs";
+import {
+  ChartTooltip
+} from "./chunk-2XITUFL6.mjs";
+import {
+  ChartCanvas
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  ChartLegend
+} from "./chunk-V4H2Z5ZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/TreeMapChart.ts
+import { defineComponent, computed, h, useId } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  layoutTreeMap,
+  getChartElementOpacity,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate,
+  treemapNodeTransitionClasses,
+  DEFAULT_TREEMAP_WIDTH,
+  DEFAULT_TREEMAP_HEIGHT,
+  DEFAULT_TREEMAP_PADDING,
+  DEFAULT_TREEMAP_GAP,
+  DEFAULT_TREEMAP_NODE_RADIUS,
+  DEFAULT_TREEMAP_MIN_LABEL_SIZE
+} from "@expcat/tigercat-core";
+var TreeMapChart = defineComponent({
+  name: "TigerTreeMapChart",
+  inheritAttrs: false,
+  props: {
+    width: { type: Number, default: DEFAULT_TREEMAP_WIDTH },
+    height: { type: Number, default: DEFAULT_TREEMAP_HEIGHT },
+    padding: { type: [Number, Object], default: DEFAULT_TREEMAP_PADDING },
+    responsive: { type: Boolean, default: false },
+    data: { type: Array, required: true },
+    gap: { type: Number, default: DEFAULT_TREEMAP_GAP },
+    showLabels: { type: Boolean, default: true },
+    minLabelSize: { type: Number, default: DEFAULT_TREEMAP_MIN_LABEL_SIZE },
+    nodeRadius: { type: Number, default: DEFAULT_TREEMAP_NODE_RADIUS },
+    colors: { type: Array },
+    gradient: { type: Boolean, default: false },
+    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 },
+    onNodeClick: {
+      type: Function
+    }
+  },
+  emits: ["update:hoveredIndex", "update:selectedIndex", "node-click", "node-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.onNodeClick === "function"
+    );
+    const gradientPrefix = getStableChartGradientPrefix("treemap", useId());
+    const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+      () => props.width,
+      () => props.height,
+      () => props.padding,
+      () => props.responsive
+    );
+    const palette = computed(() => resolveChartPalette(props.colors));
+    const nodes = computed(
+      () => layoutTreeMap(props.data, {
+        width: innerRect.value.width,
+        height: innerRect.value.height,
+        gap: props.gap,
+        colors: palette.value,
+        minLabelSize: props.minLabelSize
+      })
+    );
+    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) => nodes.value[index]?.datum,
+      onHoveredIndexChange: (index) => emit("update:hoveredIndex", index),
+      onSelectedIndexChange: (index) => emit("update:selectedIndex", index),
+      onHover: (index, datum) => emit("node-hover", index, datum),
+      onClick: (index, datum) => {
+        if (datum) props.onNodeClick?.(index, datum);
+        emit("node-click", index, datum);
+      }
+    });
+    const roots = computed(() => nodes.value.filter((node) => node.depth === 0));
+    const rootTotal = computed(() => roots.value.reduce((sum, node) => sum + node.value, 0));
+    const legendItems = computed(
+      () => buildChartLegendItems({
+        data: roots.value.map((node) => node.datum),
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        selectedIndex: resolvedSelectedIndex.value,
+        getLabel: (d) => d.label,
+        getColor: (_d, i) => roots.value[i]?.color ?? palette.value[i % palette.value.length]
+      }).map((item, i) => ({ ...item, index: roots.value[i]?.index ?? item.index }))
+    );
+    const tooltipContent = computed(() => {
+      if (resolvedHoveredIndex.value === null) return "";
+      const node = nodes.value[resolvedHoveredIndex.value];
+      if (!node) return "";
+      if (props.tooltipFormatter) return props.tooltipFormatter(node.datum, node.index);
+      const percent = rootTotal.value > 0 ? (node.value / rootTotal.value * 100).toFixed(1) : "0";
+      return formatChartTemplate(labels.value.treemapTooltip, {
+        label: node.label,
+        value: node.value,
+        percent
+      });
+    });
+    const handleNodeKeyDown = (event, visualIndex) => {
+      const current = nodes.value;
+      if (isChartNavigationKey(event.key)) {
+        event.preventDefault();
+        const nextVisual = nextChartRovingIndex(visualIndex, event.key, current.length);
+        const next = current[nextVisual];
+        const node = event.currentTarget?.parentElement?.querySelector(
+          `[data-treemap-node][data-index="${next.index}"]`
+        );
+        if (node instanceof SVGElement) node.focus();
+        handleMouseEnter(next.index, event);
+        return;
+      }
+      handleKeyDown(event, current[visualIndex].index);
+    };
+    return () => {
+      const current = nodes.value;
+      const visualActive = current.findIndex(
+        (node) => node.index === (activeIndex.value ?? resolvedHoveredIndex.value)
+      );
+      const chart = h(
+        ChartCanvas,
+        {
+          width: props.width,
+          height: props.height,
+          padding: props.padding,
+          responsive: props.responsive,
+          title: props.title,
+          desc: props.desc,
+          onResolvedSizeChange
+        },
+        {
+          default: () => [
+            h("defs", [
+              ...props.gradient ? current.map(
+                (node) => h(
+                  "linearGradient",
+                  {
+                    key: `grad-${node.index}`,
+                    id: `${gradientPrefix}-${node.index}`,
+                    gradientUnits: "userSpaceOnUse",
+                    x1: 0,
+                    y1: 0,
+                    x2: 0,
+                    y2: innerRect.value.height
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": node.color,
+                      "stop-opacity": "1"
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": node.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              ) : [],
+              ...current.map(
+                (node) => h(
+                  "clipPath",
+                  { key: `clip-${node.index}`, id: `${gradientPrefix}-clip-${node.index}` },
+                  [h("rect", { x: node.x, y: node.y, width: node.w, height: node.h })]
+                )
+              )
+            ]),
+            h(
+              "g",
+              { "data-series-type": "treemap" },
+              current.flatMap((node, visualIndex) => {
+                const opacity = getChartElementOpacity(node.index, activeIndex.value, {
+                  activeOpacity: props.activeOpacity,
+                  inactiveOpacity: props.inactiveOpacity
+                });
+                const percent = rootTotal.value > 0 ? (node.value / rootTotal.value * 100).toFixed(1) : "0";
+                const ariaLabel = formatChartTemplate(labels.value.treemapTooltip, {
+                  label: node.label,
+                  value: node.value,
+                  percent
+                });
+                const elems = [
+                  h("rect", {
+                    key: `node-${node.index}`,
+                    x: node.x,
+                    y: node.y,
+                    width: node.w,
+                    height: node.h,
+                    rx: props.nodeRadius,
+                    fill: props.gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                    opacity,
+                    "data-treemap-node": "",
+                    "data-index": node.index,
+                    class: classNames(
+                      interactive.value && "cursor-pointer",
+                      treemapNodeTransitionClasses
+                    ),
+                    tabindex: interactive.value ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                    role: interactive.value ? "button" : void 0,
+                    "aria-hidden": interactive.value ? void 0 : true,
+                    "aria-label": interactive.value ? ariaLabel : void 0,
+                    onMouseenter: (e) => handleMouseEnter(node.index, e),
+                    onMousemove: handleMouseMove,
+                    onMouseleave: handleMouseLeave,
+                    onFocus: (e) => handleMouseEnter(node.index, e),
+                    onClick: () => handleClick(node.index),
+                    onKeydown: (e) => handleNodeKeyDown(e, visualIndex)
+                  })
+                ];
+                if (props.showLabels && node.showLabel) {
+                  elems.push(
+                    h(
+                      "text",
+                      {
+                        key: `label-${node.index}`,
+                        x: node.x + node.w / 2,
+                        y: node.y + Math.min(14, node.h / 2),
+                        fill: node.labelFill,
+                        class: "pointer-events-none select-none",
+                        "text-anchor": "middle",
+                        "dominant-baseline": "middle",
+                        "font-size": node.fontSize,
+                        "clip-path": `url(#${gradientPrefix}-clip-${node.index})`,
+                        "aria-hidden": "true"
+                      },
+                      node.label
+                    )
+                  );
+                }
+                return elems;
+              })
+            )
+          ]
+        }
+      );
+      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: interactive.value,
+            ariaLabel: labels.value.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }) : null,
+          tooltip
+        ]
+      );
+    };
+  }
+});
+var TreeMapChart_default = TreeMapChart;
+
+export {
+  TreeMapChart,
+  TreeMapChart_default
+};