@vespera-ui/vue 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -896,5 +896,268 @@ declare const Accordion: vue.DefineComponent<vue.ExtractPropTypes<{
     multiple: boolean;
     defaultOpen: number[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type Pt = [number, number];
+/** Smooth (cubic) SVG path through points. */
+declare function smoothPath(pts: Pt[]): string;
+declare const Sparkline: vue.DefineComponent<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    w: {
+        type: NumberConstructor;
+        default: number;
+    };
+    h: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    w: {
+        type: NumberConstructor;
+        default: number;
+    };
+    h: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    fill: boolean;
+    data: number[];
+    w: number;
+    h: number;
+    color: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface DonutDatum {
+    label: string;
+    value: number;
+    color: string;
+}
+declare const Donut: vue.DefineComponent<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<DonutDatum[]>;
+        default: () => never[];
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<DonutDatum[]>;
+        default: () => never[];
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    data: DonutDatum[];
+    thickness: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const StatCard: vue.DefineComponent<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    delta: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    deltaDir: {
+        type: PropType<"up" | "down">;
+        default: string;
+    };
+    spark: {
+        type: PropType<number[]>;
+        default: undefined;
+    };
+    sparkColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    delta: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    deltaDir: {
+        type: PropType<"up" | "down">;
+        default: string;
+    };
+    spark: {
+        type: PropType<number[]>;
+        default: undefined;
+    };
+    sparkColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+    value: string;
+    delta: string;
+    deltaDir: "up" | "down";
+    spark: number[];
+    sparkColor: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const NumberStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    unit: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    max: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    unit: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: number;
+    min: number;
+    max: number;
+    step: number;
+    unit: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const CopyButton: vue.DefineComponent<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm">;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<"sm">;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    size: "sm";
+    label: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const InlineEdit: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "save"[], "save", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onSave?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    placeholder: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Accordion, type AccordionItem, Alert, type AlertTone, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, DescriptionList, Divider, EmptyState, Field, IconButton, Input, Kbd, NativeSelect, Pagination, type Person, Progress, Radio, RadioGroup, Segmented, type SelectOption, Skeleton, Slider, Spinner, Stat, Stepper, Switch, type TabItem, Tabs, Tag, Textarea, Timeline, type TimelineItem };
+export { Accordion, type AccordionItem, Alert, type AlertTone, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, CopyButton, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, InlineEdit, Input, Kbd, NativeSelect, NumberStepper, Pagination, type Person, Progress, Radio, RadioGroup, Segmented, type SelectOption, Skeleton, Slider, Sparkline, Spinner, Stat, StatCard, Stepper, Switch, type TabItem, Tabs, Tag, Textarea, Timeline, type TimelineItem, smoothPath };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, ref, useId } from "vue";
 var cx = (...parts) => parts.filter(Boolean).join(" ");
 var Button = defineComponent({
   name: "VspButton",
@@ -974,6 +974,371 @@ var Accordion = 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 = 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" + 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 h(
+        "svg",
+        {
+          width: props.w,
+          height: props.h,
+          viewBox: `0 0 ${props.w} ${props.h}`,
+          style: { display: "block", overflow: "visible" }
+        },
+        [
+          props.fill ? h("defs", null, [
+            h("linearGradient", { id: gid, x1: "0", x2: "0", y1: "0", y2: "1" }, [
+              h("stop", { offset: "0", "stop-color": props.color, "stop-opacity": "0.28" }),
+              h("stop", { offset: "1", "stop-color": props.color, "stop-opacity": "0" })
+            ])
+          ]) : null,
+          props.fill ? h("path", {
+            d: `${d} L ${props.w} ${props.h} L 0 ${props.h} Z`,
+            fill: `url(#${gid})`
+          }) : null,
+          h("path", {
+            d,
+            fill: "none",
+            stroke: props.color,
+            "stroke-width": "2",
+            "stroke-linecap": "round"
+          }),
+          h("circle", { cx: last[0], cy: last[1], r: "2.6", fill: props.color })
+        ]
+      );
+    };
+  }
+});
+var Donut = 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 = 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 h("div", { style: { display: "flex", alignItems: "center", gap: "22px" } }, [
+        h(
+          "svg",
+          {
+            width: props.size,
+            height: props.size,
+            style: { transform: "rotate(-90deg)", flexShrink: 0 }
+          },
+          [
+            h("circle", {
+              cx: c,
+              cy: c,
+              r,
+              fill: "none",
+              stroke: "var(--surface-3)",
+              "stroke-width": props.thickness
+            }),
+            ...segs
+          ]
+        ),
+        h(
+          "div",
+          { style: { display: "flex", flexDirection: "column", gap: "9px", flex: 1 } },
+          props.data.map(
+            (d, i) => h(
+              "div",
+              {
+                key: i,
+                style: { display: "flex", alignItems: "center", gap: "9px", fontSize: "12.5px" }
+              },
+              [
+                h("i", {
+                  style: {
+                    width: "9px",
+                    height: "9px",
+                    borderRadius: "3px",
+                    background: d.color,
+                    flexShrink: 0
+                  }
+                }),
+                h("span", { style: { color: "var(--text-dim)", flex: 1 } }, d.label),
+                h(
+                  "span",
+                  { class: "mono tnum", style: { fontWeight: 600 } },
+                  `${Math.round(d.value / total * 100)}%`
+                )
+              ]
+            )
+          )
+        )
+      ]);
+    };
+  }
+});
+var StatCard = 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 () => h(
+      "div",
+      {
+        class: "card card-pad vsp-rise",
+        style: { display: "flex", flexDirection: "column", gap: "14px" }
+      },
+      [
+        h(
+          "div",
+          { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } },
+          [
+            h("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, [
+              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?.()
+              ),
+              h("span", { class: "eyebrow" }, props.label)
+            ]),
+            props.delta != null ? 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
+          ]
+        ),
+        h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-end",
+              justifyContent: "space-between",
+              gap: "12px"
+            }
+          },
+          [
+            h(
+              "div",
+              {
+                class: "tnum",
+                style: {
+                  fontSize: "30px",
+                  fontWeight: 800,
+                  letterSpacing: "-.02em",
+                  lineHeight: 1
+                }
+              },
+              props.value
+            ),
+            props.spark ? 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 = 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 () => h("div", { class: "ui-stepper" }, [
+      h(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Decrease",
+          disabled: props.min != null && props.modelValue <= props.min,
+          onClick: () => set(props.modelValue - props.step)
+        },
+        "\u2212"
+      ),
+      h("span", { class: "val" }, [
+        props.modelValue,
+        props.unit ? h("i", null, props.unit) : null
+      ]),
+      h(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Increase",
+          disabled: props.max != null && props.modelValue >= props.max,
+          onClick: () => set(props.modelValue + props.step)
+        },
+        "+"
+      )
+    ]);
+  }
+});
+var CopyButton = defineComponent({
+  name: "VspCopyButton",
+  props: {
+    text: { type: String, required: true },
+    label: { type: String, default: "Copy" },
+    size: { type: String, default: "sm" }
+  },
+  setup(props) {
+    const done = ref(false);
+    const copy = async () => {
+      try {
+        await navigator.clipboard?.writeText(props.text);
+      } catch {
+      }
+      done.value = true;
+      setTimeout(() => done.value = false, 1400);
+    };
+    return () => h(
+      "button",
+      {
+        type: "button",
+        class: cx("btn", "btn-ghost", props.size === "sm" && "btn-sm"),
+        onClick: copy
+      },
+      [
+        done.value ? h("span", { style: { color: "var(--success)", display: "inline-flex" } }, [
+          svgIcon(ICON_CHECK, 15)
+        ]) : svgIcon(ICON_DOC, 15),
+        done.value ? "Copied" : props.label
+      ]
+    );
+  }
+});
+var InlineEdit = defineComponent({
+  name: "VspInlineEdit",
+  props: {
+    value: { type: String, default: "" },
+    placeholder: { type: String, default: "Empty" }
+  },
+  emits: ["save"],
+  setup(props, { emit }) {
+    const editing = ref(false);
+    const draft = ref(props.value);
+    const commit = () => {
+      editing.value = false;
+      if (draft.value !== props.value) emit("save", draft.value);
+    };
+    return () => editing.value ? 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;
+        }
+      }
+    }) : h(
+      "span",
+      {
+        class: "ui-inline",
+        onClick: () => {
+          draft.value = props.value;
+          editing.value = true;
+        }
+      },
+      [
+        h(
+          "span",
+          { style: { color: props.value ? "var(--text)" : "var(--text-faint)" } },
+          props.value || props.placeholder
+        ),
+        h("span", { class: "pen", style: { display: "inline-flex" } }, [
+          svgIcon(ICON_PENCIL, 14)
+        ])
+      ]
+    );
+  }
+});
 export {
   Accordion,
   Alert,
@@ -987,14 +1352,18 @@ export {
   CardHead,
   Checkbox,
   CircularProgress,
+  CopyButton,
   DescriptionList,
   Divider,
+  Donut,
   EmptyState,
   Field,
   IconButton,
+  InlineEdit,
   Input,
   Kbd,
   NativeSelect,
+  NumberStepper,
   Pagination,
   Progress,
   Radio,
@@ -1002,13 +1371,16 @@ export {
   Segmented,
   Skeleton,
   Slider,
+  Sparkline,
   Spinner,
   Stat,
+  StatCard,
   Stepper,
   Switch,
   Tabs,
   Tag,
   Textarea,
-  Timeline
+  Timeline,
+  smoothPath
 };
 //# sourceMappingURL=index.js.map