@vespera-ui/vue 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -22,10 +22,12 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
   Alert: () => Alert,
+  AreaChart: () => AreaChart,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
   Banner: () => Banner,
+  BarChart: () => BarChart,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   Card: () => Card,
@@ -44,6 +46,7 @@ __export(index_exports, {
   Kbd: () => Kbd,
   NativeSelect: () => NativeSelect,
   NumberStepper: () => NumberStepper,
+  OTPInput: () => OTPInput,
   Pagination: () => Pagination,
   Progress: () => Progress,
   Radio: () => Radio,
@@ -61,6 +64,8 @@ __export(index_exports, {
   Tag: () => Tag,
   Textarea: () => Textarea,
   Timeline: () => Timeline,
+  Tree: () => Tree,
+  niceNum: () => niceNum,
   smoothPath: () => smoothPath
 });
 module.exports = __toCommonJS(index_exports);
@@ -1404,14 +1409,338 @@ var InlineEdit = (0, import_vue.defineComponent)({
     );
   }
 });
+var svgIconClass = (d, size, cls) => (0, import_vue.h)(
+  "svg",
+  {
+    class: cls,
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": 2,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  },
+  [(0, import_vue.h)("path", { d })]
+);
+var ICON_LAYERS = "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5";
+var treeNodeId = (n) => n.id ?? n.label;
+var VspTreeNode = (0, import_vue.defineComponent)({
+  name: "VspTreeNode",
+  props: {
+    node: { type: Object, required: true },
+    expanded: { type: Object, required: true },
+    selected: { type: String, default: null },
+    toggle: { type: Function, required: true },
+    select: { type: Function, required: true }
+  },
+  setup(props) {
+    return () => {
+      const node = props.node;
+      const id = treeNodeId(node);
+      const kids = node.children ?? [];
+      const hasKids = kids.length > 0;
+      const open = props.expanded.has(id);
+      return (0, import_vue.h)("div", null, [
+        (0, import_vue.h)(
+          "div",
+          {
+            class: cx("ui-tree-row", open && "open", props.selected === id && "sel"),
+            onClick: () => {
+              if (hasKids) props.toggle(id);
+              props.select(id);
+            }
+          },
+          [
+            hasKids ? svgIconClass(ICON_PATHS.chevR, 16, "tw-chev") : (0, import_vue.h)("span", { style: { width: "16px", flexShrink: 0 } }),
+            svgIconClass(hasKids ? ICON_LAYERS : ICON_DOC, 16, "tw-icon"),
+            (0, import_vue.h)(
+              "span",
+              {
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }
+              },
+              node.label
+            ),
+            node.badge != null ? (0, import_vue.h)(
+              "span",
+              { class: "mono", style: { fontSize: "11px", color: "var(--text-faint)" } },
+              node.badge
+            ) : null
+          ]
+        ),
+        hasKids && open ? (0, import_vue.h)(
+          "div",
+          { class: "ui-tree-children" },
+          kids.map(
+            (c, i) => (0, import_vue.h)(VspTreeNode, {
+              key: i,
+              node: c,
+              expanded: props.expanded,
+              selected: props.selected,
+              toggle: props.toggle,
+              select: props.select
+            })
+          )
+        ) : null
+      ]);
+    };
+  }
+});
+var Tree = (0, import_vue.defineComponent)({
+  name: "VspTree",
+  props: {
+    data: { type: Array, default: () => [] },
+    defaultExpanded: { type: Array, default: () => [] }
+  },
+  setup(props) {
+    const expanded = (0, import_vue.ref)(new Set(props.defaultExpanded));
+    const selected = (0, import_vue.ref)(null);
+    const toggle = (id) => {
+      const n = new Set(expanded.value);
+      if (n.has(id)) n.delete(id);
+      else n.add(id);
+      expanded.value = n;
+    };
+    return () => (0, import_vue.h)(
+      "div",
+      { class: "ui-tree" },
+      props.data.map(
+        (n, i) => (0, import_vue.h)(VspTreeNode, {
+          key: i,
+          node: n,
+          expanded: expanded.value,
+          selected: selected.value,
+          toggle,
+          select: (id) => selected.value = id
+        })
+      )
+    );
+  }
+});
+var OTPInput = (0, import_vue.defineComponent)({
+  name: "VspOTPInput",
+  props: {
+    length: { type: Number, default: 6 },
+    modelValue: { type: String, default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const refs = [];
+    const set = (i, ch) => {
+      const chars = Array.from({ length: props.length }, (_, k) => props.modelValue[k] ?? "");
+      chars[i] = ch.slice(-1);
+      emit("update:modelValue", chars.join(""));
+      if (ch && i < props.length - 1) refs[i + 1]?.focus();
+    };
+    const onKey = (i, e) => {
+      if (e.key === "Backspace" && !props.modelValue[i] && i > 0) refs[i - 1]?.focus();
+    };
+    return () => (0, import_vue.h)(
+      "div",
+      { class: "ui-otp" },
+      Array.from(
+        { length: props.length },
+        (_, i) => (0, import_vue.h)("input", {
+          key: i,
+          ref: (el) => {
+            refs[i] = el;
+          },
+          inputmode: "numeric",
+          maxlength: 1,
+          value: props.modelValue[i] ?? "",
+          onInput: (e) => set(i, e.target.value.replace(/\D/g, "")),
+          onKeydown: (e) => onKey(i, e)
+        })
+      )
+    );
+  }
+});
+function niceNum(n) {
+  if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1) + "M";
+  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(n % 1e3 === 0 ? 0 : 1) + "k";
+  return String(n);
+}
+var AreaChart = (0, import_vue.defineComponent)({
+  name: "VspAreaChart",
+  props: {
+    series: { type: Array, default: () => [] },
+    labels: { type: Array, default: void 0 },
+    width: { type: Number, default: 760 },
+    height: { type: Number, default: 260 },
+    color: { type: String, default: "var(--accent)" },
+    color2: { type: String, default: "var(--accent-2)" },
+    dual: Boolean
+  },
+  setup(props) {
+    const gid = "ac" + (0, import_vue.useId)().replace(/[^a-zA-Z0-9]/g, "");
+    const txt = (x, y, anchor, val) => (0, import_vue.h)(
+      "text",
+      {
+        x,
+        y,
+        "text-anchor": anchor,
+        "font-size": "10",
+        fill: "var(--text-faint)",
+        "font-family": "var(--font-mono)"
+      },
+      val
+    );
+    return () => {
+      const w = props.width;
+      const height = props.height;
+      const padL = 38;
+      const padB = 26;
+      const padT = 12;
+      const padR = 8;
+      const innerW = Math.max(10, w - padL - padR);
+      const innerH = height - padB - padT;
+      const s0 = props.series[0] ?? [];
+      const s1 = props.series[1];
+      const all = props.dual && s1 ? [...s0, ...s1] : s0;
+      const max = Math.max(...all, 0) * 1.12;
+      const rng = max || 1;
+      const sx = (i, len) => padL + i / Math.max(1, len - 1) * innerW;
+      const sy = (v) => padT + innerH - v / rng * innerH;
+      const mkPts = (arr) => arr.map((v, i) => [sx(i, arr.length), sy(v)]);
+      const lines = (props.dual && s1 ? [s0, s1] : [s0]).map(mkPts);
+      const yTicks = 4;
+      const grid = Array.from({ length: yTicks + 1 }, (_, i) => {
+        const y = sy(max / yTicks * i);
+        return (0, import_vue.h)("g", { key: "g" + i }, [
+          (0, import_vue.h)("line", {
+            x1: padL,
+            x2: w - padR,
+            y1: y,
+            y2: y,
+            stroke: "var(--grid-line)",
+            "stroke-width": "1"
+          }),
+          txt(padL - 8, y + 3.5, "end", niceNum(Math.round(max / yTicks * i)))
+        ]);
+      });
+      const lbls = props.labels ? props.labels.map(
+        (lb, i) => i % Math.ceil(props.labels.length / 7) === 0 ? txt(sx(i, props.labels.length), height - 8, "middle", lb) : null
+      ) : [];
+      const lineEls = lines.map((pts, li) => {
+        const stroke = li === 0 ? props.color : props.color2;
+        const lastPt = pts[pts.length - 1];
+        const firstPt = pts[0];
+        return (0, import_vue.h)("g", { key: "ln" + li }, [
+          li === 0 && firstPt && lastPt ? (0, import_vue.h)("path", {
+            d: `${smoothPath(pts)} L ${lastPt[0]} ${padT + innerH} L ${firstPt[0]} ${padT + innerH} Z`,
+            fill: `url(#${gid})`
+          }) : null,
+          (0, import_vue.h)("path", {
+            d: smoothPath(pts),
+            fill: "none",
+            stroke,
+            "stroke-width": "2.4",
+            "stroke-linecap": "round",
+            "stroke-dasharray": li === 1 ? "5 5" : void 0,
+            style: { opacity: li === 1 ? 0.7 : 1 }
+          })
+        ]);
+      });
+      return (0, import_vue.h)("svg", { width: w, height, style: { display: "block" } }, [
+        (0, import_vue.h)("defs", null, [
+          (0, import_vue.h)("linearGradient", { id: gid, x1: "0", x2: "0", y1: "0", y2: "1" }, [
+            (0, import_vue.h)("stop", { offset: "0", "stop-color": props.color, "stop-opacity": "0.22" }),
+            (0, import_vue.h)("stop", { offset: "1", "stop-color": props.color, "stop-opacity": "0" })
+          ])
+        ]),
+        ...grid,
+        ...lbls,
+        ...lineEls
+      ]);
+    };
+  }
+});
+var BarChart = (0, import_vue.defineComponent)({
+  name: "VspBarChart",
+  props: {
+    data: { type: Array, default: () => [] },
+    labels: { type: Array, default: void 0 },
+    width: { type: Number, default: 620 },
+    height: { type: Number, default: 240 },
+    color: { type: String, default: "var(--accent)" }
+  },
+  setup(props) {
+    return () => {
+      const w = props.width;
+      const height = props.height;
+      const padL = 34;
+      const padB = 26;
+      const padT = 10;
+      const innerW = Math.max(10, w - padL - 8);
+      const innerH = height - padB - padT;
+      const max = Math.max(...props.data, 0) * 1.15 || 1;
+      const bw = innerW / (props.data.length || 1);
+      const grid = [0, 0.5, 1].map((f, i) => {
+        const y = padT + innerH - f * innerH;
+        return (0, import_vue.h)("g", { key: "g" + i }, [
+          (0, import_vue.h)("line", { x1: padL, x2: w - 8, y1: y, y2: y, stroke: "var(--grid-line)" }),
+          (0, import_vue.h)(
+            "text",
+            {
+              x: padL - 8,
+              y: y + 3.5,
+              "text-anchor": "end",
+              "font-size": "10",
+              fill: "var(--text-faint)",
+              "font-family": "var(--font-mono)"
+            },
+            niceNum(Math.round(max * f))
+          )
+        ]);
+      });
+      const bars = props.data.map((v, i) => {
+        const bh = v / max * innerH;
+        const x = padL + i * bw + bw * 0.18;
+        const bwi = bw * 0.64;
+        return (0, import_vue.h)("g", { key: "b" + i }, [
+          (0, import_vue.h)("rect", {
+            x,
+            y: padT + innerH - bh,
+            width: bwi,
+            height: bh,
+            rx: "4",
+            fill: `color-mix(in oklab, ${props.color} 78%, transparent)`
+          }),
+          props.labels?.[i] != null ? (0, import_vue.h)(
+            "text",
+            {
+              x: x + bwi / 2,
+              y: height - 8,
+              "text-anchor": "middle",
+              "font-size": "10",
+              fill: "var(--text-faint)",
+              "font-family": "var(--font-mono)"
+            },
+            props.labels[i]
+          ) : null
+        ]);
+      });
+      return (0, import_vue.h)("svg", { width: w, height, style: { display: "block" } }, [...grid, ...bars]);
+    };
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   Alert,
+  AreaChart,
   Avatar,
   AvatarGroup,
   Badge,
   Banner,
+  BarChart,
   Breadcrumb,
   Button,
   Card,
@@ -1430,6 +1759,7 @@ var InlineEdit = (0, import_vue.defineComponent)({
   Kbd,
   NativeSelect,
   NumberStepper,
+  OTPInput,
   Pagination,
   Progress,
   Radio,
@@ -1447,6 +1777,8 @@ var InlineEdit = (0, import_vue.defineComponent)({
   Tag,
   Textarea,
   Timeline,
+  Tree,
+  niceNum,
   smoothPath
 });
 //# sourceMappingURL=index.cjs.map