@vespera-ui/vue 0.3.0 → 0.5.0

package/README.md

@@ -39,7 +39,10 @@ Form components support `v-model` (`Input`, `Textarea`, `Switch`, `Checkbox`). B
 ## Components
 
 `Button`, `IconButton`, `Badge`, `Tag`, `Kbd`, `Divider`, `Spinner`, `Card`, `CardHead`, `Alert`,
-`Field`, `Input`, `Textarea`, `Switch`, `Checkbox`. More are being ported — the CSS layer already
-supports every Vespera component, so wrappers are thin.
+`Field`, `Input`, `Textarea`, `NativeSelect`, `Switch`, `Checkbox`, `Radio`, `RadioGroup`,
+`Slider`, `Progress`, `Skeleton`, `Avatar`, `AvatarGroup`, `Segmented`, `Tabs`, `Breadcrumb`,
+`Pagination`, `Stepper`, `CircularProgress`, `Stat`, `Timeline`, `DescriptionList`, `Banner`,
+`EmptyState`, `Accordion`. The overlay/portal components (dialogs, menus, toasts, the themed
+select, date pickers) are React-only for now — use the raw classes for those in other frameworks.
 
 License: Apache-2.0

package/dist/index.cjs

@@ -32,14 +32,18 @@ __export(index_exports, {
   CardHead: () => CardHead,
   Checkbox: () => Checkbox,
   CircularProgress: () => CircularProgress,
+  CopyButton: () => CopyButton,
   DescriptionList: () => DescriptionList,
   Divider: () => Divider,
+  Donut: () => Donut,
   EmptyState: () => EmptyState,
   Field: () => Field,
   IconButton: () => IconButton,
+  InlineEdit: () => InlineEdit,
   Input: () => Input,
   Kbd: () => Kbd,
   NativeSelect: () => NativeSelect,
+  NumberStepper: () => NumberStepper,
   Pagination: () => Pagination,
   Progress: () => Progress,
   Radio: () => Radio,
@@ -47,14 +51,17 @@ __export(index_exports, {
   Segmented: () => Segmented,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
+  Sparkline: () => Sparkline,
   Spinner: () => Spinner,
   Stat: () => Stat,
+  StatCard: () => StatCard,
   Stepper: () => Stepper,
   Switch: () => Switch,
   Tabs: () => Tabs,
   Tag: () => Tag,
   Textarea: () => Textarea,
-  Timeline: () => Timeline
+  Timeline: () => Timeline,
+  smoothPath: () => smoothPath
 });
 module.exports = __toCommonJS(index_exports);
 var import_vue = require("vue");
@@ -1032,6 +1039,371 @@ var Accordion = (0, import_vue.defineComponent)({
     );
   }
 });
+function smoothPath(pts) {
+  if (pts.length < 2) return "";
+  let d = `M ${pts[0][0]} ${pts[0][1]}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const [x0, y0] = pts[i];
+    const [x1, y1] = pts[i + 1];
+    const cx2 = (x0 + x1) / 2;
+    d += ` C ${cx2} ${y0} ${cx2} ${y1} ${x1} ${y1}`;
+  }
+  return d;
+}
+var Sparkline = (0, import_vue.defineComponent)({
+  name: "VspSparkline",
+  props: {
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: "var(--accent)" },
+    w: { type: Number, default: 110 },
+    h: { type: Number, default: 34 },
+    fill: { type: Boolean, default: true }
+  },
+  setup(props) {
+    const gid = "spk" + (0, import_vue.useId)().replace(/[^a-zA-Z0-9]/g, "");
+    return () => {
+      const data = props.data;
+      const min = Math.min(...data);
+      const max = Math.max(...data);
+      const rng = max - min || 1;
+      const pts = data.map((v, i) => [
+        i / (data.length - 1) * props.w,
+        props.h - 3 - (v - min) / rng * (props.h - 6)
+      ]);
+      const d = smoothPath(pts);
+      const last = pts[pts.length - 1] ?? [0, 0];
+      return (0, import_vue.h)(
+        "svg",
+        {
+          width: props.w,
+          height: props.h,
+          viewBox: `0 0 ${props.w} ${props.h}`,
+          style: { display: "block", overflow: "visible" }
+        },
+        [
+          props.fill ? (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.28" }),
+              (0, import_vue.h)("stop", { offset: "1", "stop-color": props.color, "stop-opacity": "0" })
+            ])
+          ]) : null,
+          props.fill ? (0, import_vue.h)("path", {
+            d: `${d} L ${props.w} ${props.h} L 0 ${props.h} Z`,
+            fill: `url(#${gid})`
+          }) : null,
+          (0, import_vue.h)("path", {
+            d,
+            fill: "none",
+            stroke: props.color,
+            "stroke-width": "2",
+            "stroke-linecap": "round"
+          }),
+          (0, import_vue.h)("circle", { cx: last[0], cy: last[1], r: "2.6", fill: props.color })
+        ]
+      );
+    };
+  }
+});
+var Donut = (0, import_vue.defineComponent)({
+  name: "VspDonut",
+  props: {
+    data: { type: Array, default: () => [] },
+    size: { type: Number, default: 168 },
+    thickness: { type: Number, default: 22 }
+  },
+  setup(props) {
+    return () => {
+      const total = props.data.reduce((s, d) => s + d.value, 0) || 1;
+      const r = (props.size - props.thickness) / 2;
+      const c = props.size / 2;
+      const circ = 2 * Math.PI * r;
+      let acc = 0;
+      const segs = props.data.map((d, i) => {
+        const len = d.value / total * circ;
+        const seg = (0, import_vue.h)("circle", {
+          key: i,
+          cx: c,
+          cy: c,
+          r,
+          fill: "none",
+          stroke: d.color,
+          "stroke-width": props.thickness,
+          "stroke-dasharray": `${len - 2.5} ${circ - len + 2.5}`,
+          "stroke-dashoffset": -acc,
+          "stroke-linecap": "round"
+        });
+        acc += len;
+        return seg;
+      });
+      return (0, import_vue.h)("div", { style: { display: "flex", alignItems: "center", gap: "22px" } }, [
+        (0, import_vue.h)(
+          "svg",
+          {
+            width: props.size,
+            height: props.size,
+            style: { transform: "rotate(-90deg)", flexShrink: 0 }
+          },
+          [
+            (0, import_vue.h)("circle", {
+              cx: c,
+              cy: c,
+              r,
+              fill: "none",
+              stroke: "var(--surface-3)",
+              "stroke-width": props.thickness
+            }),
+            ...segs
+          ]
+        ),
+        (0, import_vue.h)(
+          "div",
+          { style: { display: "flex", flexDirection: "column", gap: "9px", flex: 1 } },
+          props.data.map(
+            (d, i) => (0, import_vue.h)(
+              "div",
+              {
+                key: i,
+                style: { display: "flex", alignItems: "center", gap: "9px", fontSize: "12.5px" }
+              },
+              [
+                (0, import_vue.h)("i", {
+                  style: {
+                    width: "9px",
+                    height: "9px",
+                    borderRadius: "3px",
+                    background: d.color,
+                    flexShrink: 0
+                  }
+                }),
+                (0, import_vue.h)("span", { style: { color: "var(--text-dim)", flex: 1 } }, d.label),
+                (0, import_vue.h)(
+                  "span",
+                  { class: "mono tnum", style: { fontWeight: 600 } },
+                  `${Math.round(d.value / total * 100)}%`
+                )
+              ]
+            )
+          )
+        )
+      ]);
+    };
+  }
+});
+var StatCard = (0, import_vue.defineComponent)({
+  name: "VspStatCard",
+  props: {
+    label: { type: String, default: void 0 },
+    value: { type: String, default: void 0 },
+    delta: { type: String, default: void 0 },
+    deltaDir: { type: String, default: "up" },
+    spark: { type: Array, default: void 0 },
+    sparkColor: { type: String, default: "var(--accent)" }
+  },
+  setup(props, { slots }) {
+    return () => (0, import_vue.h)(
+      "div",
+      {
+        class: "card card-pad vsp-rise",
+        style: { display: "flex", flexDirection: "column", gap: "14px" }
+      },
+      [
+        (0, import_vue.h)(
+          "div",
+          { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } },
+          [
+            (0, import_vue.h)("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, [
+              (0, import_vue.h)(
+                "span",
+                {
+                  style: {
+                    width: "34px",
+                    height: "34px",
+                    borderRadius: "var(--r-sm)",
+                    display: "grid",
+                    placeItems: "center",
+                    background: "color-mix(in oklab, var(--accent) 13%, transparent)",
+                    color: "var(--accent)"
+                  }
+                },
+                slots.icon?.()
+              ),
+              (0, import_vue.h)("span", { class: "eyebrow" }, props.label)
+            ]),
+            props.delta != null ? (0, import_vue.h)(
+              "span",
+              { class: cx("badge", props.deltaDir === "up" ? "badge-pos" : "badge-neg") },
+              [
+                svgIcon(
+                  props.deltaDir === "up" ? "M12 19V5M5 12l7-7 7 7" : "M12 5v14M5 12l7 7 7-7",
+                  11
+                ),
+                props.delta
+              ]
+            ) : null
+          ]
+        ),
+        (0, import_vue.h)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
+              gap: "12px"
+            }
+          },
+          [
+            (0, import_vue.h)(
+              "div",
+              {
+                class: "tnum",
+                style: {
+                  fontSize: "30px",
+                  fontWeight: 800,
+                  letterSpacing: "-.02em",
+                  lineHeight: 1
+                }
+              },
+              props.value
+            ),
+            props.spark ? (0, import_vue.h)(Sparkline, { data: props.spark, color: props.sparkColor }) : null
+          ]
+        )
+      ]
+    );
+  }
+});
+var ICON_CHECK = "M20 6L9 17l-5-5";
+var ICON_DOC = "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6";
+var ICON_PENCIL = "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z";
+var NumberStepper = (0, import_vue.defineComponent)({
+  name: "VspNumberStepper",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: void 0 },
+    max: { type: Number, default: void 0 },
+    step: { type: Number, default: 1 },
+    unit: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const set = (v) => {
+      let n = v;
+      if (props.min != null && n < props.min) n = props.min;
+      if (props.max != null && n > props.max) n = props.max;
+      emit("update:modelValue", n);
+    };
+    return () => (0, import_vue.h)("div", { class: "ui-stepper" }, [
+      (0, import_vue.h)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Decrease",
+          disabled: props.min != null && props.modelValue <= props.min,
+          onClick: () => set(props.modelValue - props.step)
+        },
+        "\u2212"
+      ),
+      (0, import_vue.h)("span", { class: "val" }, [
+        props.modelValue,
+        props.unit ? (0, import_vue.h)("i", null, props.unit) : null
+      ]),
+      (0, import_vue.h)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Increase",
+          disabled: props.max != null && props.modelValue >= props.max,
+          onClick: () => set(props.modelValue + props.step)
+        },
+        "+"
+      )
+    ]);
+  }
+});
+var CopyButton = (0, import_vue.defineComponent)({
+  name: "VspCopyButton",
+  props: {
+    text: { type: String, required: true },
+    label: { type: String, default: "Copy" },
+    size: { type: String, default: "sm" }
+  },
+  setup(props) {
+    const done = (0, import_vue.ref)(false);
+    const copy = async () => {
+      try {
+        await navigator.clipboard?.writeText(props.text);
+      } catch {
+      }
+      done.value = true;
+      setTimeout(() => done.value = false, 1400);
+    };
+    return () => (0, import_vue.h)(
+      "button",
+      {
+        type: "button",
+        class: cx("btn", "btn-ghost", props.size === "sm" && "btn-sm"),
+        onClick: copy
+      },
+      [
+        done.value ? (0, import_vue.h)("span", { style: { color: "var(--success)", display: "inline-flex" } }, [
+          svgIcon(ICON_CHECK, 15)
+        ]) : svgIcon(ICON_DOC, 15),
+        done.value ? "Copied" : props.label
+      ]
+    );
+  }
+});
+var InlineEdit = (0, import_vue.defineComponent)({
+  name: "VspInlineEdit",
+  props: {
+    value: { type: String, default: "" },
+    placeholder: { type: String, default: "Empty" }
+  },
+  emits: ["save"],
+  setup(props, { emit }) {
+    const editing = (0, import_vue.ref)(false);
+    const draft = (0, import_vue.ref)(props.value);
+    const commit = () => {
+      editing.value = false;
+      if (draft.value !== props.value) emit("save", draft.value);
+    };
+    return () => editing.value ? (0, import_vue.h)("input", {
+      class: "ui-input",
+      value: draft.value,
+      style: { height: "32px", maxWidth: "240px" },
+      onVnodeMounted: (vn) => vn.el?.focus(),
+      onInput: (e) => draft.value = e.target.value,
+      onBlur: commit,
+      onKeydown: (e) => {
+        if (e.key === "Enter") commit();
+        if (e.key === "Escape") {
+          draft.value = props.value;
+          editing.value = false;
+        }
+      }
+    }) : (0, import_vue.h)(
+      "span",
+      {
+        class: "ui-inline",
+        onClick: () => {
+          draft.value = props.value;
+          editing.value = true;
+        }
+      },
+      [
+        (0, import_vue.h)(
+          "span",
+          { style: { color: props.value ? "var(--text)" : "var(--text-faint)" } },
+          props.value || props.placeholder
+        ),
+        (0, import_vue.h)("span", { class: "pen", style: { display: "inline-flex" } }, [
+          svgIcon(ICON_PENCIL, 14)
+        ])
+      ]
+    );
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -1046,14 +1418,18 @@ var Accordion = (0, import_vue.defineComponent)({
   CardHead,
   Checkbox,
   CircularProgress,
+  CopyButton,
   DescriptionList,
   Divider,
+  Donut,
   EmptyState,
   Field,
   IconButton,
+  InlineEdit,
   Input,
   Kbd,
   NativeSelect,
+  NumberStepper,
   Pagination,
   Progress,
   Radio,
@@ -1061,13 +1437,16 @@ var Accordion = (0, import_vue.defineComponent)({
   Segmented,
   Skeleton,
   Slider,
+  Sparkline,
   Spinner,
   Stat,
+  StatCard,
   Stepper,
   Switch,
   Tabs,
   Tag,
   Textarea,
-  Timeline
+  Timeline,
+  smoothPath
 });
 //# sourceMappingURL=index.cjs.map