@vespera-ui/vue 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -1159,5 +1159,176 @@ declare const InlineEdit: vue.DefineComponent<vue.ExtractPropTypes<{
     value: string;
     placeholder: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface TreeNodeData {
+    id?: string;
+    label: string;
+    badge?: string;
+    children?: TreeNodeData[];
+}
+declare const Tree: vue.DefineComponent<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<TreeNodeData[]>;
+        default: () => never[];
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<TreeNodeData[]>;
+        default: () => never[];
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    data: TreeNodeData[];
+    defaultExpanded: string[];
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const OTPInput: vue.DefineComponent<vue.ExtractPropTypes<{
+    length: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    length: {
+        type: NumberConstructor;
+        default: number;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    length: number;
+    modelValue: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function niceNum(n: number): string;
+declare const AreaChart: vue.DefineComponent<vue.ExtractPropTypes<{
+    series: {
+        type: PropType<number[][]>;
+        default: () => never[];
+    };
+    labels: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    color2: {
+        type: StringConstructor;
+        default: string;
+    };
+    dual: BooleanConstructor;
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    series: {
+        type: PropType<number[][]>;
+        default: () => never[];
+    };
+    labels: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    color2: {
+        type: StringConstructor;
+        default: string;
+    };
+    dual: BooleanConstructor;
+}>> & Readonly<{}>, {
+    height: number;
+    width: number;
+    color: string;
+    dual: boolean;
+    series: number[][];
+    labels: string[];
+    color2: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const BarChart: vue.DefineComponent<vue.ExtractPropTypes<{
+    data: {
+        type: PropType<number[]>;
+        default: () => never[];
+    };
+    labels: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => 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[];
+    };
+    labels: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    data: number[];
+    height: number;
+    width: number;
+    color: string;
+    labels: 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, 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 };
+export { Accordion, type AccordionItem, Alert, type AlertTone, AreaChart, Avatar, AvatarGroup, Badge, type BadgeTone, Banner, BarChart, Breadcrumb, Button, type ButtonVariant, Card, CardHead, Checkbox, CircularProgress, CopyButton, DescriptionList, Divider, Donut, type DonutDatum, EmptyState, Field, IconButton, InlineEdit, Input, Kbd, NativeSelect, NumberStepper, OTPInput, 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, Tree, type TreeNodeData, niceNum, smoothPath };

package/dist/index.js

@@ -1339,13 +1339,337 @@ var InlineEdit = defineComponent({
     );
   }
 });
+var svgIconClass = (d, size, cls) => 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"
+  },
+  [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 = 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 h("div", null, [
+        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") : h("span", { style: { width: "16px", flexShrink: 0 } }),
+            svgIconClass(hasKids ? ICON_LAYERS : ICON_DOC, 16, "tw-icon"),
+            h(
+              "span",
+              {
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }
+              },
+              node.label
+            ),
+            node.badge != null ? h(
+              "span",
+              { class: "mono", style: { fontSize: "11px", color: "var(--text-faint)" } },
+              node.badge
+            ) : null
+          ]
+        ),
+        hasKids && open ? h(
+          "div",
+          { class: "ui-tree-children" },
+          kids.map(
+            (c, i) => h(VspTreeNode, {
+              key: i,
+              node: c,
+              expanded: props.expanded,
+              selected: props.selected,
+              toggle: props.toggle,
+              select: props.select
+            })
+          )
+        ) : null
+      ]);
+    };
+  }
+});
+var Tree = defineComponent({
+  name: "VspTree",
+  props: {
+    data: { type: Array, default: () => [] },
+    defaultExpanded: { type: Array, default: () => [] }
+  },
+  setup(props) {
+    const expanded = ref(new Set(props.defaultExpanded));
+    const selected = 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 () => h(
+      "div",
+      { class: "ui-tree" },
+      props.data.map(
+        (n, i) => h(VspTreeNode, {
+          key: i,
+          node: n,
+          expanded: expanded.value,
+          selected: selected.value,
+          toggle,
+          select: (id) => selected.value = id
+        })
+      )
+    );
+  }
+});
+var OTPInput = 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 () => h(
+      "div",
+      { class: "ui-otp" },
+      Array.from(
+        { length: props.length },
+        (_, i) => 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 = 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" + useId().replace(/[^a-zA-Z0-9]/g, "");
+    const txt = (x, y, anchor, val) => 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 h("g", { key: "g" + i }, [
+          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 h("g", { key: "ln" + li }, [
+          li === 0 && firstPt && lastPt ? h("path", {
+            d: `${smoothPath(pts)} L ${lastPt[0]} ${padT + innerH} L ${firstPt[0]} ${padT + innerH} Z`,
+            fill: `url(#${gid})`
+          }) : null,
+          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 h("svg", { width: w, height, style: { display: "block" } }, [
+        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.22" }),
+            h("stop", { offset: "1", "stop-color": props.color, "stop-opacity": "0" })
+          ])
+        ]),
+        ...grid,
+        ...lbls,
+        ...lineEls
+      ]);
+    };
+  }
+});
+var BarChart = 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 h("g", { key: "g" + i }, [
+          h("line", { x1: padL, x2: w - 8, y1: y, y2: y, stroke: "var(--grid-line)" }),
+          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 h("g", { key: "b" + i }, [
+          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 ? 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 h("svg", { width: w, height, style: { display: "block" } }, [...grid, ...bars]);
+    };
+  }
+});
 export {
   Accordion,
   Alert,
+  AreaChart,
   Avatar,
   AvatarGroup,
   Badge,
   Banner,
+  BarChart,
   Breadcrumb,
   Button,
   Card,
@@ -1364,6 +1688,7 @@ export {
   Kbd,
   NativeSelect,
   NumberStepper,
+  OTPInput,
   Pagination,
   Progress,
   Radio,
@@ -1381,6 +1706,8 @@ export {
   Tag,
   Textarea,
   Timeline,
+  Tree,
+  niceNum,
   smoothPath
 };
 //# sourceMappingURL=index.js.map