@vespera-ui/vue 0.3.0 → 0.4.0

package/dist/index.d.cts

@@ -896,5 +896,157 @@ 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>;
 
-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, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, Input, Kbd, NativeSelect, 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.d.ts

@@ -896,5 +896,157 @@ 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>;
 
-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, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, Input, Kbd, NativeSelect, 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,240 @@ 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
+          ]
+        )
+      ]
+    );
+  }
+});
 export {
   Accordion,
   Alert,
@@ -989,6 +1223,7 @@ export {
   CircularProgress,
   DescriptionList,
   Divider,
+  Donut,
   EmptyState,
   Field,
   IconButton,
@@ -1002,13 +1237,16 @@ export {
   Segmented,
   Skeleton,
   Slider,
+  Sparkline,
   Spinner,
   Stat,
+  StatCard,
   Stepper,
   Switch,
   Tabs,
   Tag,
   Textarea,
-  Timeline
+  Timeline,
+  smoothPath
 };
 //# sourceMappingURL=index.js.map