@leavepulse/ui 0.24.1 → 0.25.0

package/dist/chunks/LpPie-BkjWlfSw.js

@@ -0,0 +1,525 @@
+import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createElementBlock, toDisplayString, createCommentVNode, normalizeStyle, createVNode, createElementVNode, createBlock, withCtx, withModifiers, Fragment, renderList, normalizeClass, renderSlot } from "vue";
+import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
+import { useReveal } from "../composables/useReveal.js";
+import { resolveSlices, arcPath, calloutLabels, formatTick } from "../components/chart.js";
+import { _ as _sfc_main$2 } from "./LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$4 } from "./LpNumberFlow-amWYaeuA.js";
+import { _ as _sfc_main$5 } from "./LpRollingText-CM5gkSeF.js";
+import { _ as _sfc_main$6 } from "./LpShift-DXNsauQZ.js";
+import { _ as _sfc_main$3 } from "./LpTooltip-hCLPAqMG.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex flex-col gap-0.5"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "text-sm font-medium text-ink"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "text-xs text-muted"
+};
+const _hoisted_4 = { class: "text-xs" };
+const _hoisted_5 = { class: "flex flex-wrap items-start gap-x-6 gap-y-3" };
+const _hoisted_6 = { class: "flex items-center gap-1.5" };
+const _hoisted_7 = ["width", "height"];
+const _hoisted_8 = { key: 0 };
+const _hoisted_9 = ["id"];
+const _hoisted_10 = ["d"];
+const _hoisted_11 = ["clip-path"];
+const _hoisted_12 = ["d", "fill", "transform", "opacity"];
+const _hoisted_13 = ["d", "onPointerenter", "onPointerleave", "onPointerdown", "onContextmenu"];
+const _hoisted_14 = { key: 1 };
+const _hoisted_15 = ["opacity", "onPointerenter", "onPointerleave", "onPointerdown", "onContextmenu"];
+const _hoisted_16 = ["points", "stroke"];
+const _hoisted_17 = ["x", "y", "text-anchor"];
+const _hoisted_18 = {
+  key: 0,
+  class: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center"
+};
+const _hoisted_19 = ["aria-pressed", "onPointerenter", "onPointerleave", "onPointerdown", "onContextmenu"];
+const _hoisted_20 = { class: "truncate text-muted-strong group-hover:text-ink" };
+const _hoisted_21 = {
+  key: 0,
+  class: "shrink-0 text-muted"
+};
+const _hoisted_22 = { class: "ml-auto shrink-0 pl-2 font-mono tabular-nums text-muted" };
+const ELBOW = 16;
+const RUN = 14;
+const LABEL_LINE = 17;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpPie",
+  props: {
+    slices: {},
+    type: { default: "donut" },
+    size: { default: 180 },
+    innerRatio: { default: 0.62 },
+    title: {},
+    subtitle: {},
+    maxSlices: { default: 6 },
+    otherLabel: { default: "Other" },
+    sortBySize: { type: Boolean },
+    unit: {},
+    formatValue: {},
+    labels: { type: Boolean },
+    labelWidth: { default: 140 },
+    showLegend: { type: Boolean },
+    showPercent: { type: Boolean, default: true },
+    showTotal: { type: Boolean, default: true },
+    padAngle: { default: 1.5 },
+    cornerRadius: { default: 4 },
+    hoverOffset: { default: 8 },
+    animate: { type: Boolean, default: true },
+    duration: { default: 900 },
+    menuItems: {},
+    emptyLabel: { default: "No data" }
+  },
+  emits: ["sliceClick", "selectionChange", "sliceContextMenu"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const resolved = computed(
+      () => resolveSlices(
+        props.slices,
+        props.maxSlices || void 0,
+        props.otherLabel,
+        !props.sortBySize
+      )
+    );
+    const hasData = computed(() => resolved.value.slices.length > 0);
+    const legendShown = computed(() => props.showLegend ?? !props.labels);
+    const fmt = (v) => `${props.formatValue ? props.formatValue(v) : formatTick(v)}${props.unit ?? ""}`;
+    const pct = (fraction) => {
+      const p = fraction * 100;
+      if (p > 0 && p < 0.1) return "<0.1%";
+      return `${Number(p.toFixed(p < 10 ? 1 : 0))}%`;
+    };
+    const arcAngles = computed(() => {
+      const list = resolved.value.slices;
+      const pad = list.length > 1 ? props.padAngle * Math.PI / 180 : 0;
+      let angle = -Math.PI / 2;
+      return list.map((s, index) => {
+        const sweep2 = s.fraction * Math.PI * 2;
+        const start = angle;
+        angle += sweep2;
+        const gap = Math.min(pad, sweep2 * 0.5);
+        return { index, slice: s, start: start + gap / 2, end: angle - gap / 2, mid: start + sweep2 / 2 };
+      });
+    });
+    const canvasWidth = computed(
+      () => props.labels ? props.size + (props.labelWidth + ELBOW + RUN) * 2 : props.size
+    );
+    const canvasHeight = computed(() => {
+      if (!props.labels) return props.size;
+      const right = arcAngles.value.filter((a) => Math.cos(a.mid) >= 0).length;
+      const perSide = Math.max(right, arcAngles.value.length - right) + 2;
+      return Math.max(props.size, perSide * LABEL_LINE + 16);
+    });
+    const cx = computed(() => canvasWidth.value / 2);
+    const cy = computed(() => canvasHeight.value / 2);
+    const outer = computed(() => props.size / 2 - 2 - props.hoverOffset);
+    const inner = computed(
+      () => props.type === "donut" ? outer.value * Math.min(0.95, Math.max(0, props.innerRatio)) : 0
+    );
+    const arcs = computed(
+      () => arcAngles.value.map(({ slice, start, end, mid }) => ({
+        ...slice,
+        d: arcPath(cx.value, cy.value, outer.value, inner.value, start, end, props.cornerRadius),
+        /*
+         * Push along the slice's own bisector, so it moves straight out of the
+         * circle rather than sideways.
+         *
+         * As an SVG `transform` attribute, not a CSS `translate`: Vue binds the
+         * latter as an inline style, and on an SVG <path> that produced no style
+         * attribute at all — the wedge never moved, though the dimming beside it
+         * worked and made it look as if it had.
+         */
+        lift: `translate(${(Math.cos(mid) * props.hoverOffset).toFixed(2)} ${(Math.sin(mid) * props.hoverOffset).toFixed(2)})`
+      }))
+    );
+    const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animate });
+    const sweep = ref(props.animate ? 0 : 1);
+    let sweepFrame = 0;
+    const stopSweep = () => {
+      if (sweepFrame) cancelAnimationFrame(sweepFrame);
+      sweepFrame = 0;
+    };
+    const runSweep = () => {
+      stopSweep();
+      if (prefersReducedMotion() || props.duration <= 0) {
+        sweep.value = 1;
+        return;
+      }
+      const started = performance.now();
+      const step = (now) => {
+        const t = Math.min(1, (now - started) / props.duration);
+        sweep.value = easeTravel(t);
+        sweepFrame = t < 1 ? requestAnimationFrame(step) : 0;
+      };
+      sweepFrame = requestAnimationFrame(step);
+    };
+    watch(
+      revealed,
+      (visible) => {
+        if (visible && props.animate) runSweep();
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(stopSweep);
+    const sweepId = `lp-pie-${Math.random().toString(36).slice(2, 9)}`;
+    const sweepPath = computed(() => {
+      const start = -Math.PI / 2;
+      const radius = outer.value + props.hoverOffset + 4;
+      return arcPath(cx.value, cy.value, radius, 0, start, start + Math.PI * 2 * sweep.value);
+    });
+    const callouts = computed(
+      () => props.labels ? calloutLabels(
+        arcAngles.value.map((a) => ({ index: a.index, mid: a.mid })),
+        cx.value,
+        cy.value,
+        outer.value,
+        ELBOW,
+        RUN,
+        LABEL_LINE,
+        canvasHeight.value
+      ) : []
+    );
+    const active = ref(-1);
+    const selected = ref(/* @__PURE__ */ new Set());
+    const anchor = ref(-1);
+    const dragging = ref(false);
+    const isSelected = (i) => selected.value.has(i);
+    const payloadFor = (i) => {
+      const a = arcs.value[i];
+      return { index: i, label: a.label, value: a.value, isOther: a.isOther };
+    };
+    const emitSelection = () => {
+      const indices = [...selected.value].sort((x, y) => x - y);
+      emit("selectionChange", indices.map(payloadFor));
+    };
+    const rangeTo = (i) => {
+      const from = anchor.value < 0 ? i : anchor.value;
+      const [lo, hi] = from <= i ? [from, i] : [i, from];
+      const next = new Set(selected.value);
+      for (let k = lo; k <= hi; k++) next.add(k);
+      return next;
+    };
+    const onSlicePointerDown = (i, e) => {
+      if (e.button === 2) return;
+      if (e.shiftKey) {
+        selected.value = rangeTo(i);
+      } else if (e.ctrlKey || e.metaKey) {
+        const next = new Set(selected.value);
+        if (next.has(i)) next.delete(i);
+        else next.add(i);
+        selected.value = next;
+        anchor.value = i;
+      } else {
+        const only = selected.value.size === 1 && selected.value.has(i);
+        selected.value = only ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([i]);
+        anchor.value = only ? -1 : i;
+        if (!only) beginDrag();
+      }
+      emitSelection();
+      emit("sliceClick", payloadFor(i));
+    };
+    const onSlicePointerEnter = (i) => {
+      clearTimeout(leaveTimer);
+      active.value = i;
+      if (!dragging.value || selected.value.has(i)) return;
+      const next = new Set(selected.value);
+      next.add(i);
+      selected.value = next;
+      emitSelection();
+    };
+    let leaveTimer;
+    const onSlicePointerLeave = (i) => {
+      if (active.value !== i) return;
+      clearTimeout(leaveTimer);
+      leaveTimer = setTimeout(() => {
+        if (active.value === i) active.value = -1;
+      }, 60);
+    };
+    const leaveChart = (e) => {
+      const to = e.relatedTarget;
+      if (to instanceof Element && (to.closest("[data-lp-follow]") || to.querySelector("[data-lp-follow]")))
+        return;
+      clearTimeout(leaveTimer);
+      active.value = -1;
+      endDrag();
+    };
+    const endDrag = () => {
+      dragging.value = false;
+      window.removeEventListener("pointerup", endDrag);
+      window.removeEventListener("pointercancel", endDrag);
+    };
+    const beginDrag = () => {
+      dragging.value = true;
+      window.addEventListener("pointerup", endDrag);
+      window.addEventListener("pointercancel", endDrag);
+    };
+    onBeforeUnmount(() => {
+      endDrag();
+      clearTimeout(leaveTimer);
+      window.removeEventListener("keydown", onKeydown);
+    });
+    const clearSelection = () => {
+      if (!selected.value.size) return;
+      selected.value = /* @__PURE__ */ new Set();
+      anchor.value = -1;
+      emitSelection();
+    };
+    const onKeydown = (e) => {
+      if (e.key === "Escape") clearSelection();
+    };
+    watch(
+      () => selected.value.size > 0,
+      (hasSelection) => {
+        if (hasSelection) window.addEventListener("keydown", onKeydown);
+        else window.removeEventListener("keydown", onKeydown);
+      }
+    );
+    const menuPoint = ref(
+      null
+    );
+    const menuEntries = computed(
+      () => props.menuItems && menuPoint.value ? props.menuItems(menuPoint.value, [...selected.value].sort((x, y) => x - y).map(payloadFor)) : []
+    );
+    const onSliceContextMenu = (i) => {
+      if (!selected.value.has(i)) {
+        selected.value = /* @__PURE__ */ new Set([i]);
+        anchor.value = i;
+        emitSelection();
+      }
+      menuPoint.value = payloadFor(i);
+      emit("sliceContextMenu", menuPoint.value);
+    };
+    const focused = computed(() => {
+      if (active.value >= 0) return active.value;
+      return selected.value.size === 1 ? [...selected.value][0] : -1;
+    });
+    const dimmed = (i) => selected.value.size > 0 && !selected.value.has(i);
+    const total = computed(() => resolved.value.total);
+    const selectedArcs = computed(
+      () => [...selected.value].sort((x, y) => x - y).map((i) => arcs.value[i])
+    );
+    const hovered = computed(() => active.value >= 0 ? arcs.value[active.value] : null);
+    const tipSlice = ref(null);
+    watch(hovered, (v) => {
+      if (v) tipSlice.value = v;
+    });
+    const centreValue = computed(() => {
+      if (focused.value >= 0) return arcs.value[focused.value].value;
+      if (selected.value.size > 1)
+        return selectedArcs.value.reduce((sum, a) => sum + a.value, 0);
+      return total.value;
+    });
+    const centreLabel = computed(() => {
+      if (focused.value >= 0) return arcs.value[focused.value].label;
+      if (selected.value.size > 1) return `${selected.value.size} selected`;
+      return "total";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "revealAnchor",
+        ref: revealAnchor,
+        class: "flex flex-col gap-3"
+      }, [
+        __props.title || __props.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          __props.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        !hasData.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "flex flex-col items-center justify-center gap-2 rounded-control border border-dashed border-line text-muted",
+          style: normalizeStyle({ width: `${__props.size}px`, height: `${__props.size}px` })
+        }, [
+          createVNode(_sfc_main$1, {
+            name: "lucide:chart-pie",
+            size: 18
+          }),
+          createElementVNode("span", _hoisted_4, toDisplayString(__props.emptyLabel), 1)
+        ], 4)) : (openBlock(), createBlock(_sfc_main$2, {
+          key: 2,
+          items: menuEntries.value,
+          always: !!__props.menuItems
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_5, [
+              createVNode(_sfc_main$3, {
+                delay: 80,
+                "follow-cursor": "",
+                side: "top",
+                disabled: !hovered.value
+              }, {
+                content: withCtx(() => [
+                  tipSlice.value ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 0,
+                    axis: "width"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_6, [
+                        createElementVNode("span", {
+                          class: "size-1.5 shrink-0 rounded-full transition-colors duration-fast",
+                          style: normalizeStyle({ backgroundColor: tipSlice.value.color })
+                        }, null, 4),
+                        createVNode(_sfc_main$5, {
+                          class: "text-muted-strong",
+                          value: tipSlice.value.label,
+                          duration: 200,
+                          align: "start"
+                        }, null, 8, ["value"]),
+                        createVNode(_sfc_main$4, {
+                          class: "font-mono text-ink",
+                          value: tipSlice.value.value,
+                          duration: 240,
+                          format: fmt,
+                          "animate-on-mount": false
+                        }, null, 8, ["value"]),
+                        createVNode(_sfc_main$5, {
+                          class: "text-muted",
+                          value: pct(tipSlice.value.fraction),
+                          duration: 200,
+                          align: "end"
+                        }, null, 8, ["value"])
+                      ])
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
+                ]),
+                default: withCtx(() => [
+                  createElementVNode("div", {
+                    class: "relative shrink-0",
+                    style: normalizeStyle({ width: `${canvasWidth.value}px`, height: `${canvasHeight.value}px` })
+                  }, [
+                    (openBlock(), createElementBlock("svg", {
+                      width: canvasWidth.value,
+                      height: canvasHeight.value,
+                      class: "touch-none select-none",
+                      onPointerleave: leaveChart,
+                      onPointerup: endDrag,
+                      onClick: withModifiers(clearSelection, ["self"])
+                    }, [
+                      __props.animate ? (openBlock(), createElementBlock("defs", _hoisted_8, [
+                        createElementVNode("clipPath", {
+                          id: `${sweepId}-sweep`
+                        }, [
+                          createElementVNode("path", { d: sweepPath.value }, null, 8, _hoisted_10)
+                        ], 8, _hoisted_9)
+                      ])) : createCommentVNode("", true),
+                      createElementVNode("g", {
+                        "clip-path": __props.animate ? `url(#${sweepId}-sweep)` : void 0
+                      }, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
+                          return openBlock(), createElementBlock("path", {
+                            key: a.label,
+                            d: a.d,
+                            fill: a.color,
+                            class: "pointer-events-none transition-[transform,opacity] duration-medium ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+                            transform: active.value === i ? a.lift : void 0,
+                            opacity: dimmed(i) ? 0.28 : 1
+                          }, null, 8, _hoisted_12);
+                        }), 128))
+                      ], 8, _hoisted_11),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
+                        return openBlock(), createElementBlock("path", {
+                          key: `hit-${a.label}`,
+                          d: a.d,
+                          fill: "transparent",
+                          class: "cursor-pointer",
+                          onPointerenter: ($event) => onSlicePointerEnter(i),
+                          onPointerleave: ($event) => onSlicePointerLeave(i),
+                          onPointerdown: ($event) => onSlicePointerDown(i, $event),
+                          onContextmenu: ($event) => onSliceContextMenu(i)
+                        }, null, 40, _hoisted_13);
+                      }), 128)),
+                      __props.labels ? (openBlock(), createElementBlock("g", _hoisted_14, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(callouts.value, (c) => {
+                          return openBlock(), createElementBlock("g", {
+                            key: `c-${c.index}`,
+                            class: "cursor-pointer transition-opacity duration-fast",
+                            opacity: dimmed(c.index) ? 0.35 : 1,
+                            onPointerenter: ($event) => onSlicePointerEnter(c.index),
+                            onPointerleave: ($event) => onSlicePointerLeave(c.index),
+                            onPointerdown: ($event) => onSlicePointerDown(c.index, $event),
+                            onContextmenu: ($event) => onSliceContextMenu(c.index)
+                          }, [
+                            createElementVNode("polyline", {
+                              points: c.points,
+                              fill: "none",
+                              stroke: arcs.value[c.index].color,
+                              "stroke-width": "1"
+                            }, null, 8, _hoisted_16),
+                            createElementVNode("text", {
+                              x: c.x,
+                              y: c.y,
+                              "text-anchor": c.side === "right" ? "start" : "end",
+                              "dominant-baseline": "middle",
+                              class: normalizeClass(["text-[11px]", active.value === c.index ? "fill-[var(--color-ink)]" : "fill-[var(--color-muted-strong)]"])
+                            }, toDisplayString(arcs.value[c.index].label) + ": " + toDisplayString(pct(arcs.value[c.index].fraction)), 11, _hoisted_17)
+                          ], 40, _hoisted_15);
+                        }), 128))
+                      ])) : createCommentVNode("", true)
+                    ], 40, _hoisted_7)),
+                    __props.type === "donut" && (__props.showTotal || _ctx.$slots.center) ? (openBlock(), createElementBlock("div", _hoisted_18, [
+                      renderSlot(_ctx.$slots, "center", {
+                        total: total.value,
+                        active: focused.value >= 0 ? arcs.value[focused.value] : null,
+                        selection: selectedArcs.value
+                      }, () => [
+                        createVNode(_sfc_main$4, {
+                          class: "font-mono text-xl font-medium text-ink",
+                          value: centreValue.value,
+                          duration: 360,
+                          format: fmt,
+                          "animate-on-mount": false
+                        }, null, 8, ["value"]),
+                        createVNode(_sfc_main$5, {
+                          class: "max-w-[80%] text-[11px] text-muted",
+                          value: centreLabel.value,
+                          duration: 260
+                        }, null, 8, ["value"])
+                      ])
+                    ])) : createCommentVNode("", true)
+                  ], 4)
+                ]),
+                _: 3
+              }, 8, ["disabled"]),
+              legendShown.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "flex min-w-0 flex-col gap-1.5",
+                onPointerup: endDrag
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: a.label,
+                    type: "button",
+                    class: normalizeClass(["group flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring", [dimmed(i) ? "opacity-45" : "", isSelected(i) ? "bg-surface-soft" : ""]]),
+                    "aria-pressed": isSelected(i),
+                    onPointerenter: ($event) => onSlicePointerEnter(i),
+                    onPointerleave: ($event) => onSlicePointerLeave(i),
+                    onPointerdown: ($event) => onSlicePointerDown(i, $event),
+                    onContextmenu: ($event) => onSliceContextMenu(i)
+                  }, [
+                    createElementVNode("span", {
+                      class: "size-2 shrink-0 rounded-full transition-transform duration-fast group-hover:scale-125",
+                      style: normalizeStyle({ backgroundColor: a.color })
+                    }, null, 4),
+                    createElementVNode("span", _hoisted_20, toDisplayString(a.label), 1),
+                    a.isOther ? (openBlock(), createElementBlock("span", _hoisted_21, "(" + toDisplayString(a.count) + ")", 1)) : createCommentVNode("", true),
+                    createElementVNode("span", _hoisted_22, toDisplayString(__props.showPercent ? pct(a.fraction) : fmt(a.value)), 1)
+                  ], 42, _hoisted_19);
+                }), 128))
+              ], 32)) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 3
+        }, 8, ["items", "always"]))
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};