veloce-vue 0.21.0 → 0.23.0

package/components/Message.vue.js

@@ -0,0 +1,109 @@
+import { defineComponent as $, computed as n, createElementBlock as z, openBlock as o, normalizeClass as E, renderSlot as s, createBlock as l, createCommentVNode as g, createElementVNode as I, unref as a } from "vue";
+import M from "../icons/Alert.vue.js";
+import N from "../icons/CheckCircle.vue.js";
+import c from "../icons/Close.vue.js";
+import t from "../icons/Info.vue.js";
+import p from "./icon/Icon.vue.js";
+import { getMargin as P } from "../utils/margin.js";
+import { getPadding as V } from "../utils/padding.js";
+const j = { class: "flex-1" }, Q = /* @__PURE__ */ $({
+  __name: "Message",
+  props: {
+    severity: { type: String, default: "info" },
+    variant: { type: String, default: "solid" },
+    icon: { type: Object, default: () => null },
+    closable: { type: Boolean, default: !1 },
+    // margin
+    margin: { type: String, default: "" },
+    marginLeft: { type: String, default: "" },
+    marginRight: { type: String, default: "" },
+    marginTop: { type: String, default: "lg" },
+    marginBottom: { type: String, default: "md" },
+    // padding
+    padding: { type: String, default: "" },
+    paddingLeft: { type: String, default: "" },
+    paddingRight: { type: String, default: "" },
+    paddingTop: { type: String, default: "" },
+    paddingBottom: { type: String, default: "" }
+  },
+  emits: ["close"],
+  setup(u, { emit: m }) {
+    const { margin: f, marginLeft: b, marginRight: y, marginTop: k, marginBottom: h } = P(), { padding: x, paddingLeft: v, paddingRight: S, paddingTop: w, paddingBottom: B } = V(), r = u, C = m, T = {
+      success: N,
+      info: t,
+      warning: M,
+      error: c,
+      primary: t,
+      secondary: t,
+      neutral: t
+    }, i = {
+      success: {
+        solid: "bg-success-light dark:bg-success/20 text-success border-success/30",
+        outlined: "border-success text-success bg-transparent"
+      },
+      info: {
+        solid: "bg-info-light dark:bg-info/20 text-info border-info/30",
+        outlined: "border-info text-info bg-transparent"
+      },
+      warning: {
+        solid: "bg-warning-light dark:bg-warning/20 text-warning border-warning/30",
+        outlined: "border-warning text-warning bg-transparent"
+      },
+      error: {
+        solid: "bg-error-light dark:bg-error/20 text-error border-error/30",
+        outlined: "border-error text-error bg-transparent"
+      },
+      primary: {
+        solid: "bg-primary-light dark:bg-primary/20 text-primary border-primary/30",
+        outlined: "border-primary text-primary bg-transparent"
+      },
+      secondary: {
+        solid: "bg-secondary-light dark:bg-secondary/20 text-secondary border-secondary/30",
+        outlined: "border-secondary text-secondary bg-transparent"
+      },
+      neutral: {
+        solid: "bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-200 border-neutral-300 dark:border-neutral-700",
+        outlined: "border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-200 bg-transparent"
+      }
+    }, _ = n(() => {
+      const e = r.variant === "outlined" ? "outlined" : "solid";
+      return i[r.severity]?.[e] || i.info.solid;
+    }), L = n(() => [
+      // margin
+      f[r.margin],
+      b[r.marginLeft],
+      y[r.marginRight],
+      k[r.marginTop],
+      h[r.marginBottom],
+      // padding
+      x[r.padding],
+      v[r.paddingLeft],
+      S[r.paddingRight],
+      w[r.paddingTop],
+      B[r.paddingBottom]
+    ]), d = n(() => r.icon || T[r.severity] || t), R = () => {
+      C("close");
+    };
+    return (e, A) => (o(), z("div", {
+      class: E([[_.value, L.value], "flex items-start gap-3 rounded border p-3"])
+    }, [
+      e.$slots.icon ? s(e.$slots, "icon", { key: 0 }) : d.value ? (o(), l(a(p), {
+        key: 1,
+        icon: d.value,
+        class: "mt-0.5 size-5 shrink-0"
+      }, null, 8, ["icon"])) : g("", !0),
+      I("div", j, [
+        s(e.$slots, "default")
+      ]),
+      r.closable ? (o(), l(a(p), {
+        key: 2,
+        icon: a(c),
+        class: "ml-auto shrink-0 cursor-pointer rounded p-0.5 duration-100 hover:bg-black/10 dark:hover:bg-white/10",
+        onClick: R
+      }, null, 8, ["icon"])) : g("", !0)
+    ], 2));
+  }
+});
+export {
+  Q as default
+};

package/components/Message.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Message.vue.js";
+export {
+  f as default
+};

package/components/MiniEditor.vue.js

@@ -0,0 +1,132 @@
+import { defineComponent as k, ref as h, onMounted as y, watch as M, createElementBlock as b, openBlock as B, createElementVNode as E, createVNode as g, unref as m } from "vue";
+import v from "./Button.vue.js";
+import z from "../icons/Bold.vue.js";
+import A from "../icons/Italic.vue.js";
+import F from "../icons/Highlight.vue.js";
+const I = { class: "overflow-hidden rounded border" }, V = { class: "flex gap-2 border-b bg-neutral-50 p-2 dark:bg-neutral-800/25" }, W = /* @__PURE__ */ k({
+  __name: "MiniEditor",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(S, { emit: x }) {
+    const p = S, L = x, i = h(null), s = h(!1), u = h(!1), c = h(!1);
+    function N(e) {
+      i.value && (i.value.focus(), document.execCommand(e, !1), f(), a());
+    }
+    function T(e) {
+      const t = e.parentNode;
+      if (t) {
+        for (; e.firstChild; )
+          t.insertBefore(e.firstChild, e);
+        t.removeChild(e), t.normalize();
+      }
+    }
+    function _() {
+      if (!i.value) return;
+      i.value.focus();
+      const e = window.getSelection();
+      if (!e || e.rangeCount === 0) return;
+      const t = e.getRangeAt(0);
+      if (t.collapsed) return;
+      const l = [], w = t.commonAncestorContainer, H = document.createTreeWalker(w, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (n) => {
+          const o = n;
+          return o.tagName === "SPAN" && o.classList.contains("text-highlight") ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+      });
+      let C;
+      for (; C = H.nextNode(); ) {
+        const n = C;
+        l.includes(n) || l.push(n);
+      }
+      let r = t.commonAncestorContainer;
+      for (; r && r !== i.value; ) {
+        if (r.nodeType === Node.ELEMENT_NODE) {
+          const n = r;
+          n.tagName === "SPAN" && n.classList.contains("text-highlight") && (l.includes(n) || l.push(n));
+        }
+        r = r.parentNode;
+      }
+      if (l.length > 0)
+        [...l].sort((o, d) => o.contains(d) ? 1 : d.contains(o) ? -1 : 0).forEach((o) => {
+          o.parentNode && T(o);
+        });
+      else {
+        const n = document.createElement("span");
+        n.className = "text-highlight";
+        try {
+          t.surroundContents(n);
+        } catch {
+          const d = t.extractContents();
+          n.appendChild(d), t.insertNode(n);
+        }
+      }
+      f(), a();
+    }
+    function a() {
+      if (!i.value) return;
+      const e = window.getSelection();
+      if (!e || e.rangeCount === 0) {
+        s.value = !1, u.value = !1, c.value = !1;
+        return;
+      }
+      const t = e.anchorNode?.parentElement;
+      s.value = document.queryCommandState("bold"), u.value = document.queryCommandState("italic"), c.value = !!t?.classList?.contains("text-highlight");
+    }
+    function f() {
+      i.value && L("update:modelValue", i.value.innerHTML);
+    }
+    return y(() => {
+      i.value && (i.value.innerHTML = p.modelValue || "", a());
+    }), M(
+      () => p.modelValue,
+      (e) => {
+        i.value && i.value.innerHTML !== e && (i.value.innerHTML = e || "", a());
+      }
+    ), (e, t) => (B(), b("div", I, [
+      E("div", V, [
+        g(v, {
+          icon: m(z),
+          highlighted: s.value,
+          variant: s.value ? "solid" : "ghost",
+          severity: "neutral",
+          size: "sm",
+          onClick: t[0] || (t[0] = (l) => N("bold"))
+        }, null, 8, ["icon", "highlighted", "variant"]),
+        g(v, {
+          icon: m(A),
+          "icon-class": "size-4",
+          highlighted: u.value,
+          variant: u.value ? "solid" : "ghost",
+          severity: "neutral",
+          size: "sm",
+          onClick: t[1] || (t[1] = (l) => N("italic"))
+        }, null, 8, ["icon", "highlighted", "variant"]),
+        g(v, {
+          icon: m(F),
+          "icon-class": "size-4",
+          highlighted: c.value,
+          variant: c.value ? "solid" : "ghost",
+          severity: "neutral",
+          size: "sm",
+          title: "Highlight",
+          onClick: _
+        }, null, 8, ["icon", "highlighted", "variant"])
+      ]),
+      E("div", {
+        onKeyup: a,
+        class: "min-h-[150px] p-3 outline-none focus-visible:ring-0",
+        ref_key: "editor",
+        ref: i,
+        contenteditable: "true",
+        onInput: f,
+        onMouseup: a,
+        onFocus: a
+      }, null, 544)
+    ]));
+  }
+});
+export {
+  W as default
+};

package/components/MiniEditor.vue2.js

@@ -0,0 +1,4 @@
+import f from "./MiniEditor.vue.js";
+export {
+  f as default
+};

package/components/Modal.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as f, useModel as x, createElementBlock as n, openBlock as a, Fragment as v, createElementVNode as o, createVNode as d, renderSlot as r, unref as t, withCtx as m, createBlock as h, createCommentVNode as c } from "vue";
+/* empty css           */
+import w from "../icons/Close.vue.js";
+import { AnimatePresence as y, motion as b } from "motion-v";
+import k from "./Button.vue.js";
+import { useWindowSize as g } from "@vueuse/core";
+/* empty css              */
+const C = {
+  class: "bg-background text-muted flex max-w-[600px] flex-col overflow-hidden rounded border shadow-xl shadow-slate-700/10 sm:max-h-[95dvh] sm:w-[90%]",
+  role: "document"
+}, V = { class: "flex items-center gap-4 border-b px-4 py-2" }, _ = { class: "max-h-[calc(100dvh-100px)] flex-1 overflow-auto px-4 py-2 sm:max-h-[75vh]" }, $ = {
+  key: 0,
+  class: "border-t px-4 py-2"
+}, j = /* @__PURE__ */ f({
+  __name: "Modal",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(p) {
+    const s = x(p, "modelValue"), { width: i } = g();
+    return (l, e) => (a(), n(v, null, [
+      o("div", {
+        class: "w-fit",
+        onClick: e[0] || (e[0] = (u) => s.value = !0)
+      }, [
+        r(l.$slots, "default")
+      ]),
+      d(t(y), { initial: !1 }, {
+        default: m(() => [
+          s.value ? (a(), h(t(b).div, {
+            key: 0,
+            class: "modal-backdrop z-99999999 fixed left-0 top-0 flex items-center justify-center backdrop-blur-[2px] sm:h-screen sm:w-screen",
+            initial: { opacity: 0, scale: t(i) < 768 ? 1 : 0.85, translateX: t(i) < 768 ? "-120px" : "0" },
+            animate: { opacity: 1, scale: 1, translateX: "0" },
+            exit: { opacity: 0, scale: 1, translateX: "-120px" },
+            transition: {
+              duration: 0.15,
+              scale: { type: "spring", visualDuration: 0.2, bounce: 0.25 }
+            }
+          }, {
+            default: m(() => [
+              o("div", C, [
+                o("div", V, [
+                  e[2] || (e[2] = o("h3", { class: "text-primary flex-1 text-lg font-medium" }, "Modal title", -1)),
+                  d(t(k), {
+                    icon: t(w),
+                    class: "p-1!",
+                    variant: "ghost",
+                    circle: "",
+                    onClick: e[1] || (e[1] = (u) => s.value = !1)
+                  }, null, 8, ["icon"])
+                ]),
+                o("div", _, [
+                  r(l.$slots, "content")
+                ]),
+                l.$slots.footer ? (a(), n("div", $, [
+                  r(l.$slots, "footer")
+                ])) : c("", !0)
+              ])
+            ]),
+            _: 3
+          }, 8, ["initial"])) : c("", !0)
+        ]),
+        _: 3
+      })
+    ], 64));
+  }
+});
+export {
+  j as default
+};

package/components/Modal.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Modal.vue.js";
+export {
+  f as default
+};

package/components/Popover.vue.js

@@ -0,0 +1,78 @@
+import { defineComponent as v, ref as y, createElementBlock as x, openBlock as s, createElementVNode as l, createVNode as u, renderSlot as d, unref as a, withCtx as i, createBlock as m, createCommentVNode as c, normalizeClass as n } from "vue";
+import { AnimatePresence as f, motion as p } from "motion-v";
+const C = /* @__PURE__ */ v({
+  __name: "Popover",
+  props: {
+    position: { type: String, default: "bottom", options: ["top", "bottom"] },
+    bodyClass: { type: String, default: "" },
+    contentClass: { type: String, default: "" }
+  },
+  setup(t) {
+    const o = y(!1);
+    return (r, e) => (s(), x("div", {
+      class: "relative inline-block",
+      onMouseleave: e[1] || (e[1] = (b) => o.value = !1)
+    }, [
+      l("div", {
+        class: "relative",
+        onMouseover: e[0] || (e[0] = (b) => o.value = !0)
+      }, [
+        u(a(f), null, {
+          default: i(() => [
+            o.value ? (s(), m(a(p).svg, {
+              key: 0,
+              class: n([{ "top-full": t.position === "bottom", "bottom-full rotate-180": t.position === "top" }, "text-border absolute left-1/2 w-4 -translate-x-1/2"]),
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              initial: { opacity: 0, scale: 0.8 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.8 },
+              transition: {
+                duration: 0.2,
+                ease: [0.4, 0, 0.2, 1]
+              }
+            }, {
+              default: i(() => [...e[2] || (e[2] = [
+                l("path", {
+                  fill: "currentColor",
+                  d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19"
+                }, null, -1)
+              ])]),
+              _: 1
+            }, 8, ["class"])) : c("", !0)
+          ]),
+          _: 1
+        }),
+        l("div", {
+          class: n([t.position === "top" ? "-top-3.5" : "-bottom-3.5", "absolute left-0 right-0 mx-auto h-4"])
+        }, null, 2),
+        d(r.$slots, "default")
+      ], 32),
+      u(a(f), null, {
+        default: i(() => [
+          o.value ? (s(), m(a(p).div, {
+            key: 0,
+            class: n([[t.bodyClass, { "bottom-full mb-3": t.position === "top" }, { "top-full mt-3": t.position === "bottom" }], "absolute left-1/2 z-50 w-fit -translate-x-1/2"]),
+            initial: { opacity: 0, scale: 0.95, y: t.position === "top" ? 10 : -10 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            exit: { opacity: 0, scale: 0.95, y: t.position === "top" ? 10 : -10 },
+            transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }
+          }, {
+            default: i(() => [
+              l("div", {
+                class: n([t.contentClass, "bg-background w-[200px] rounded-md border p-3"])
+              }, [
+                d(r.$slots, "body")
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["class", "initial", "exit"])) : c("", !0)
+        ]),
+        _: 3
+      })
+    ], 32));
+  }
+});
+export {
+  C as default
+};

package/components/Popover.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Popover.vue.js";
+export {
+  f as default
+};

package/components/ProgressBar.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as c, computed as n, createElementBlock as s, openBlock as o, createElementVNode as l, normalizeClass as t, normalizeStyle as p, createCommentVNode as y, toDisplayString as f } from "vue";
+const x = { class: "w-full" }, b = /* @__PURE__ */ c({
+  __name: "ProgressBar",
+  props: {
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    severity: { type: String, default: "primary" },
+    striped: { type: Boolean, default: !1 },
+    animated: { type: Boolean, default: !1 },
+    mode: { type: String, default: "determinate" },
+    textColor: { type: String, default: "white" }
+  },
+  setup(i) {
+    const e = i, r = n(() => Math.min(Math.max(e.value, 0), e.max) / e.max * 100), a = {
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      success: "bg-success",
+      info: "bg-info",
+      warning: "bg-warning",
+      error: "bg-error",
+      neutral: "bg-neutral-500"
+    }, d = {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      error: "text-error",
+      neutral: "text-neutral-500",
+      white: "text-white"
+    }, u = n(() => [a[e.severity] || a.primary, { "bg-stripes": e.striped }, { "animate-pulse": e.animated }]);
+    return (m, g) => (o(), s("div", x, [
+      l("div", {
+        class: t([{ "h-4": e.mode === "determinate", "h-1.5": e.mode === "indeterminate" }, "w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800"])
+      }, [
+        l("div", {
+          class: t([u.value, "h-full transition-all duration-500 ease-out"]),
+          style: p({ width: `${r.value}%` })
+        }, [
+          e.mode === "determinate" ? (o(), s("div", {
+            key: 0,
+            class: t([d[e.textColor], "px-2 text-center text-xs font-medium"])
+          }, f(Math.round(r.value)) + "%", 3)) : y("", !0)
+        ], 6)
+      ], 2)
+    ]));
+  }
+});
+export {
+  b as default
+};

package/components/ProgressBar.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ProgressBar.vue.js";
+export {
+  f as default
+};

package/components/ProgressSpinner.vue.js

@@ -0,0 +1,47 @@
+import { defineComponent as l, computed as a, createElementBlock as c, openBlock as p, normalizeClass as m, createElementVNode as n } from "vue";
+const d = /* @__PURE__ */ l({
+  __name: "ProgressSpinner",
+  props: {
+    severity: { type: String, default: "primary" },
+    size: { type: String, default: "md" }
+  },
+  setup(o) {
+    const e = o, t = {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      error: "text-error",
+      neutral: "text-neutral-500"
+    }, s = {
+      sm: "size-8",
+      md: "size-12",
+      lg: "size-16",
+      xl: "size-24"
+    }, i = a(() => [t[e.severity] || t.primary, s[e.size] || s.md]);
+    return (u, r) => (p(), c("svg", {
+      class: m([i.value, "animate-spin"]),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, [...r[0] || (r[0] = [
+      n("circle", {
+        class: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        "stroke-width": "4",
+        stroke: "currentColor"
+      }, null, -1),
+      n("path", {
+        class: "opacity-75",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+        fill: "currentColor"
+      }, null, -1)
+    ])], 2));
+  }
+});
+export {
+  d as default
+};

package/components/ProgressSpinner.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ProgressSpinner.vue.js";
+export {
+  f as default
+};

package/components/RangeSlider.vue.js

@@ -0,0 +1,61 @@
+import { defineComponent as b, mergeModels as y, useModel as E, ref as v, onMounted as x, onUnmounted as L, createElementBlock as w, openBlock as p, createElementVNode as s, createCommentVNode as M, normalizeStyle as d, normalizeClass as f, createTextVNode as V, toDisplayString as B } from "vue";
+const P = { class: "progress-container relative min-w-full px-3 py-4" }, S = { class: "relative h-2 rounded-full bg-neutral-100 dark:bg-neutral-800" }, k = /* @__PURE__ */ b({
+  __name: "RangeSlider",
+  props: /* @__PURE__ */ y({
+    showTooltip: { type: Boolean, default: !1 },
+    tooltipPosition: { type: String, default: "top" }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(l) {
+    const o = E(l, "modelValue"), r = v(!1), a = v(!1), n = (t) => {
+      if (!r.value) return;
+      const i = document.querySelector(".progress-container");
+      if (!i) return;
+      const m = i.getBoundingClientRect();
+      let u;
+      t instanceof TouchEvent ? u = t.touches[0]?.clientX ?? 0 : u = t.clientX;
+      const h = u - m.left, g = Math.max(0, Math.min(100, h / m.width * 100));
+      o.value = g;
+    }, c = (t) => {
+      r.value = !0, a.value = !0, n(t);
+    }, e = () => {
+      r.value = !1, a.value = !1;
+    };
+    return x(() => {
+      window.addEventListener("mousemove", n), window.addEventListener("mouseup", e), window.addEventListener("mouseleave", e), window.addEventListener("touchmove", n, { passive: !1 }), window.addEventListener("touchend", e), window.addEventListener("touchcancel", e);
+    }), L(() => {
+      window.removeEventListener("mousemove", n), window.removeEventListener("mouseup", e), window.removeEventListener("mouseleave", e), window.removeEventListener("touchmove", n), window.removeEventListener("touchend", e), window.removeEventListener("touchcancel", e);
+    }), (t, i) => (p(), w("div", P, [
+      s("div", S, [
+        s("div", {
+          class: "bg-primary absolute h-2 rounded-full",
+          style: d({ width: o.value + "%" })
+        }, null, 4),
+        s("div", {
+          class: "absolute top-1/2 -ml-2 flex h-4 w-4 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow",
+          style: d({ left: o.value + "%" }),
+          unselectable: "on",
+          onselectstart: "return false;",
+          onMousedown: c,
+          onTouchstart: c
+        }, null, 36),
+        a.value && l.showTooltip ? (p(), w("div", {
+          key: 0,
+          class: f([[l.tooltipPosition === "top" ? "-top-9" : "-bottom-9"], "absolute mx-auto w-10 -translate-x-1/2 select-none rounded bg-neutral-700 px-2 py-1 text-xs text-white"]),
+          style: d({ left: o.value + "%" })
+        }, [
+          V(B(Math.round(o.value)) + "% ", 1),
+          s("span", {
+            class: f([[l.tooltipPosition === "top" ? "-bottom-1" : "-top-1"], "absolute left-1/2 -ml-1 h-2 w-2 rotate-45 bg-neutral-700"])
+          }, null, 2)
+        ], 6)) : M("", !0)
+      ])
+    ]));
+  }
+});
+export {
+  k as default
+};

package/components/RangeSlider.vue2.js

@@ -0,0 +1,4 @@
+import f from "./RangeSlider.vue.js";
+export {
+  f as default
+};