@vespera-ui/vue 0.4.0 → 0.6.0

package/dist/index.js

@@ -1208,28 +1208,487 @@ var StatCard = defineComponent({
     );
   }
 });
+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)
+        ])
+      ]
+    );
+  }
+});
+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,
   CardHead,
   Checkbox,
   CircularProgress,
+  CopyButton,
   DescriptionList,
   Divider,
   Donut,
   EmptyState,
   Field,
   IconButton,
+  InlineEdit,
   Input,
   Kbd,
   NativeSelect,
+  NumberStepper,
+  OTPInput,
   Pagination,
   Progress,
   Radio,
@@ -1247,6 +1706,8 @@ export {
   Tag,
   Textarea,
   Timeline,
+  Tree,
+  niceNum,
   smoothPath
 };
 //# sourceMappingURL=index.js.map