veloce-vue 0.25.0 → 0.27.0

package/components/Drawer.vue.js

@@ -1,14 +1,15 @@
-import { defineComponent as v, mergeModels as h, useModel as g, computed as n, createElementBlock as d, openBlock as u, Fragment as w, createElementVNode as o, renderSlot as i, normalizeClass as f, createCommentVNode as x, createVNode as k, toDisplayString as c, unref as m } from "vue";
+import { defineComponent as v, mergeModels as h, useModel as g, computed as n, createElementBlock as d, openBlock as u, Fragment as w, createElementVNode as o, renderSlot as i, normalizeClass as f, createCommentVNode as x, createVNode as k, toDisplayString as m, unref as c } from "vue";
 /* empty css           */
 import y from "../icons/Close.vue.js";
 import "motion-v";
 import C from "./Button.vue.js";
+import "@vueuse/integrations/useCookies";
 import "@vueuse/core";
 /* empty css              */
 const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-between gap-2" }, B = { class: "text-[0.95em] font-medium" }, S = { class: "text-muted text-sm" }, z = { class: "size-full overflow-auto p-2" }, F = {
   key: 0,
   class: "border-t p-2"
-}, q = /* @__PURE__ */ v({
+}, A = /* @__PURE__ */ v({
   __name: "Drawer",
   props: /* @__PURE__ */ h({
     direction: { type: String, default: "bottom", options: ["left", "bottom", "right"] },
@@ -64,16 +65,16 @@ const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-bet
       }, [
         o("div", V, [
           o("div", $, [
-            o("h4", B, c(s.title), 1),
-            k(m(C), {
-              icon: m(y),
+            o("h4", B, m(s.title), 1),
+            k(c(C), {
+              icon: c(y),
               class: "p-1!",
               circle: "",
               variant: "ghost",
               onClick: l[1] || (l[1] = (a) => t.value = !1)
             }, null, 8, ["icon"])
           ]),
-          o("p", S, c(s.description), 1)
+          o("p", S, m(s.description), 1)
         ]),
         o("div", z, [
           i(e.$slots, "content")
@@ -90,5 +91,5 @@ const V = { class: "border-b p-2" }, $ = { class: "flex items-center justify-bet
   }
 });
 export {
-  q as default
+  A as default
 };

package/components/JsonRenderer.vue.js

@@ -14,10 +14,11 @@ import j from "./typography/Span.vue.js";
 /* empty css           */
 import "motion-v";
 /* empty css            */
-import "@vueuse/core";
+import "@vueuse/integrations/useCookies";
 import q from "./Message.vue.js";
+import "@vueuse/core";
 /* empty css              */
-const v = { class: "*:first:mt-0 *:last:mb-0" }, U = /* @__PURE__ */ _({
+const v = { class: "*:first:mt-0 *:last:mb-0" }, W = /* @__PURE__ */ _({
   __name: "JsonRenderer",
   props: {
     json: { type: Array, required: !0 }
@@ -59,5 +60,5 @@ const v = { class: "*:first:mt-0 *:last:mb-0" }, U = /* @__PURE__ */ _({
   }
 });
 export {
-  U as default
+  W as default
 };

package/components/Layout.vue.d.ts

@@ -5,7 +5,7 @@ declare function __VLS_template(): {
         'left-actions'?(_: {}): any;
         'right-actions'?(_: {}): any;
         sidebar?(_: {
-            showSidebar: true;
+            showSidebar: any;
             onClose: () => void;
         }): any;
         view?(_: {}): any;

package/components/Layout.vue.js

@@ -1,42 +1,48 @@
-import { defineComponent as u, ref as f, onMounted as p, createElementBlock as h, openBlock as n, Fragment as b, createElementVNode as o, createVNode as l, renderSlot as i, unref as e, withCtx as c, createBlock as v, createCommentVNode as _, normalizeClass as g } from "vue";
+import { defineComponent as p, ref as l, onMounted as h, createElementBlock as v, openBlock as c, Fragment as b, createElementVNode as t, createVNode as m, renderSlot as a, unref as s, withCtx as d, createBlock as g, createCommentVNode as _, normalizeClass as w } from "vue";
 /* empty css           */
-import w from "../icons/Hamburger.vue.js";
-import { AnimatePresence as x, motion as k } from "motion-v";
-import C from "./Button.vue.js";
-import { useStorage as S } from "@vueuse/core";
+import x from "../icons/Hamburger.vue.js";
+import { AnimatePresence as k, motion as C } from "motion-v";
+import S from "./Button.vue.js";
+import { useCookies as B } from "@vueuse/integrations/useCookies";
+import "@vueuse/core";
 /* empty css              */
-const B = { class: "flex h-14 items-center justify-between gap-4 border-b px-4" }, $ = { class: "flex items-center gap-2" }, y = { class: "header-actions flex items-center gap-2" }, z = { class: "relative h-[calc(100dvh-3.5rem)] overflow-hidden" }, M = /* @__PURE__ */ u({
+const $ = { class: "flex h-14 items-center justify-between gap-4 border-b px-4" }, y = { class: "flex items-center gap-2" }, z = { class: "header-actions flex items-center gap-2" }, N = { class: "relative h-[calc(100dvh-3.5rem)] overflow-hidden" }, T = /* @__PURE__ */ p({
   __name: "Layout",
   emits: ["sidebar"],
-  setup(N, { emit: d }) {
-    const m = d, t = S("showSidebar", !1), a = f(!0);
-    p(() => setTimeout(() => a.value = !1, 100));
-    const r = () => {
-      t.value = !t.value, m("sidebar", t.value);
+  setup(V, { emit: u }) {
+    const i = B(["showSidebar"]), f = u, e = l(i.get("showSidebar") ?? !0), r = l(!0);
+    h(() => setTimeout(() => r.value = !1, 100));
+    const n = () => {
+      e.value = !e.value, i.set("showSidebar", e.value, {
+        path: "/",
+        sameSite: "lax",
+        maxAge: 3600 * 24 * 365
+        // 1 year
+      }), f("sidebar", e.value);
     };
-    return (s, V) => (n(), h(b, null, [
-      o("header", B, [
-        o("div", $, [
-          l(e(C), {
-            icon: e(w),
+    return (o, A) => (c(), v(b, null, [
+      t("header", $, [
+        t("div", y, [
+          m(s(S), {
+            icon: s(x),
             iconClass: "size-6",
             class: "p-1!",
             variant: "soft",
-            onClick: r
+            onClick: n
           }, null, 8, ["icon"]),
-          i(s.$slots, "left-actions")
+          a(o.$slots, "left-actions")
         ]),
-        o("div", y, [
-          i(s.$slots, "right-actions")
+        t("div", z, [
+          a(o.$slots, "right-actions")
         ])
       ]),
-      o("main", z, [
-        l(e(x), null, {
-          default: c(() => [
-            e(t) ? (n(), v(e(k).div, {
+      t("main", N, [
+        m(s(k), null, {
+          default: d(() => [
+            e.value ? (c(), g(s(C).div, {
               key: 0,
               class: "bg-background absolute bottom-0 left-0 top-0 z-50 w-[240px] shrink-0 overflow-hidden border-r",
-              initial: a.value && e(t) ? { x: 0 } : { x: -240 },
+              initial: r.value && e.value ? { x: 0 } : { x: -240 },
               animate: { x: 0 },
               exit: { x: -240 },
               transition: {
@@ -44,10 +50,10 @@ const B = { class: "flex h-14 items-center justify-between gap-4 border-b px-4"
                 ease: [0.4, 0, 0.2, 1]
               }
             }, {
-              default: c(() => [
-                i(s.$slots, "sidebar", {
-                  showSidebar: e(t),
-                  onClose: r
+              default: d(() => [
+                a(o.$slots, "sidebar", {
+                  showSidebar: e.value,
+                  onClose: n
                 })
               ]),
               _: 3
@@ -55,15 +61,15 @@ const B = { class: "flex h-14 items-center justify-between gap-4 border-b px-4"
           ]),
           _: 3
         }),
-        o("div", {
-          class: g([{ "lg:ml-[240px]": e(t) }, "h-full overflow-auto p-2 transition-[margin-left] duration-300 ease-in-out"])
+        t("div", {
+          class: w([{ "lg:ml-[240px]": e.value }, "h-full overflow-auto p-2 transition-[margin-left] duration-300 ease-in-out"])
         }, [
-          i(s.$slots, "view")
+          a(o.$slots, "view")
         ], 2)
       ])
     ], 64));
   }
 });
 export {
-  M as default
+  T as default
 };

package/components/Modal.vue.js

@@ -3,6 +3,7 @@ import { defineComponent as f, useModel as x, createElementBlock as n, openBlock
 import w from "../icons/Close.vue.js";
 import { AnimatePresence as y, motion as b } from "motion-v";
 import k from "./Button.vue.js";
+import "@vueuse/integrations/useCookies";
 import { useWindowSize as g } from "@vueuse/core";
 /* empty css              */
 const C = {
@@ -11,7 +12,7 @@ const C = {
 }, 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({
+}, A = /* @__PURE__ */ f({
   __name: "Modal",
   props: {
     modelValue: {},
@@ -69,5 +70,5 @@ const C = {
   }
 });
 export {
-  j as default
+  A as default
 };

package/components/Select.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as j, mergeModels as w, useModel as A, computed as d, ref as v, useTemplateRef as D, watch as b, createElementBlock as s, openBlock as n, createVNode as y, unref as a, withCtx as O, createBlock as C, createCommentVNode as f, createElementVNode as z, Fragment as E, renderList as W, normalizeClass as S, toDisplayString as q } from "vue";
+import { defineComponent as j, mergeModels as w, useModel as A, computed as d, ref as v, useTemplateRef as D, watch as b, createElementBlock as s, openBlock as n, createVNode as y, unref as a, withCtx as O, createBlock as C, createCommentVNode as m, createElementVNode as z, Fragment as E, renderList as W, normalizeClass as S, toDisplayString as q } from "vue";
 /* empty css           */
 import H from "../icons/Check.vue.js";
 import P from "../icons/ChevronDown.vue.js";
@@ -7,12 +7,13 @@ import R from "./icon/Icon.vue.js";
 import { AnimatePresence as T, motion as U } from "motion-v";
 import _ from "./Button.vue.js";
 import G from "./Input.vue.js";
+import "@vueuse/integrations/useCookies";
 import { onClickOutside as I } from "@vueuse/core";
 /* empty css              */
 const J = {
   key: 0,
   class: "border-b p-2"
-}, K = { class: "h-full max-h-[220px] overflow-y-auto overflow-x-hidden p-2" }, X = ["onClick"], ue = /* @__PURE__ */ j({
+}, K = { class: "h-full max-h-[220px] overflow-y-auto overflow-x-hidden p-2" }, X = ["onClick"], ce = /* @__PURE__ */ j({
   __name: "Select",
   props: /* @__PURE__ */ w({
     options: { type: Array, required: !0 },
@@ -29,7 +30,7 @@ const J = {
   }),
   emits: /* @__PURE__ */ w(["update:isOpen"], ["update:modelValue"]),
   setup(l, { emit: V }) {
-    const r = l, B = V, g = A(l, "modelValue"), u = d(() => g.value), e = v(r.isOpen ?? !1), m = v(!1), h = D("target");
+    const r = l, B = V, g = A(l, "modelValue"), u = d(() => g.value), e = v(r.isOpen ?? !1), f = v(!1), h = D("target");
     I(h, () => {
       r.closeOnClickOutside, e.value = !1, p();
     }), b(
@@ -43,7 +44,7 @@ const J = {
     }, L = (t) => {
       g.value = t, p();
     }, p = () => {
-      e.value = !1, m.value = !1, i.value = "";
+      e.value = !1, f.value = !1, i.value = "";
     }, i = v(""), k = d(() => i.value ? r.options.filter((t) => t.toLowerCase().includes(i.value.toLowerCase())) : r.options), x = d(() => {
       switch (r.size) {
         case "sm":
@@ -95,12 +96,12 @@ const J = {
                   placeholder: "Search",
                   size: l.size
                 }, null, 8, ["modelValue", "trailing-icon", "size"])
-              ])) : f("", !0),
+              ])) : m("", !0),
               z("ul", K, [
                 (n(!0), s(E, null, W(k.value, (o, $) => (n(), s("li", {
                   key: $,
-                  class: S([[x.value, { "dark:text-neutral-300": o !== u.value }, { "bg-neutral-100/75 dark:bg-neutral-800/75": o === u.value && !m.value }], "flex w-full cursor-pointer items-center justify-between rounded border border-transparent text-left transition-colors duration-150 hover:bg-neutral-100/75 dark:hover:bg-neutral-800/75"]),
-                  onMouseenter: c[1] || (c[1] = (F) => m.value = !0),
+                  class: S([[x.value, { "dark:text-neutral-300": o !== u.value }, { "bg-neutral-100/75 dark:bg-neutral-800/75": o === u.value && !f.value }], "flex w-full cursor-pointer items-center justify-between rounded border border-transparent text-left transition-colors duration-150 hover:bg-neutral-100/75 dark:hover:bg-neutral-800/75"]),
+                  onMouseenter: c[1] || (c[1] = (F) => f.value = !0),
                   onClick: (F) => L(o)
                 }, [
                   z("span", null, q(o), 1),
@@ -108,16 +109,16 @@ const J = {
                     key: 0,
                     icon: a(H),
                     class: "size-5"
-                  }, null, 8, ["icon"])) : f("", !0)
+                  }, null, 8, ["icon"])) : m("", !0)
                 ], 42, X))), 128)),
                 k.value.length === 0 ? (n(), s("li", {
                   key: 0,
                   class: S([x.value, ""])
-                }, "No options found", 2)) : f("", !0)
+                }, "No options found", 2)) : m("", !0)
               ])
             ]),
             _: 1
-          })) : f("", !0)
+          })) : m("", !0)
         ]),
         _: 1
       })
@@ -125,5 +126,5 @@ const J = {
   }
 });
 export {
-  ue as default
+  ce as default
 };

package/components/typography/Code.vue.js

@@ -7,9 +7,10 @@ import E from "../Button.vue.js";
 import { getTypography as N } from "../../utils/typography.js";
 import { getMargin as P } from "../../utils/margin.js";
 import { getPadding as V } from "../../utils/padding.js";
+import "@vueuse/integrations/useCookies";
 import "@vueuse/core";
 /* empty css               */
-const U = /* @__PURE__ */ T({
+const X = /* @__PURE__ */ T({
   __name: "Code",
   props: {
     text: { type: String, default: "" },
@@ -33,8 +34,8 @@ const U = /* @__PURE__ */ T({
     paddingBottom: { type: String, default: "" }
   },
   setup(n) {
-    const { fontSizes: r, fontWeights: o, textColors: g, letterSpacings: p, lineHeights: d } = N(), { margin: l, marginLeft: m, marginRight: f, marginTop: u, marginBottom: s } = P(), { padding: c, paddingLeft: y, paddingRight: S, paddingTop: h, paddingBottom: b } = V(), t = n, k = v(() => [
-      r[t.fontSize],
+    const { fontSizes: a, fontWeights: o, textColors: g, letterSpacings: p, lineHeights: d } = N(), { margin: l, marginLeft: m, marginRight: f, marginTop: u, marginBottom: s } = P(), { padding: c, paddingLeft: y, paddingRight: S, paddingTop: h, paddingBottom: b } = V(), t = n, k = v(() => [
+      a[t.fontSize],
       g[t.color],
       o[t.fontWeight],
       d[t.lineHeight],
@@ -52,9 +53,9 @@ const U = /* @__PURE__ */ T({
       h[t.paddingTop],
       b[t.paddingBottom]
     ]), e = C(!1), B = async () => {
-      navigator.clipboard.writeText(t.text), e.value = !0, await new Promise((a) => setTimeout(a, 3e3)), e.value = !1;
+      navigator.clipboard.writeText(t.text), e.value = !0, await new Promise((r) => setTimeout(r, 3e3)), e.value = !1;
     };
-    return (a, D) => (L(), x("code", {
+    return (r, D) => (L(), x("code", {
       class: R([[k.value, n.block ? "block p-2.5" : "px-1.5 py-0.5"], "relative rounded border border-neutral-200 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800"])
     }, [
       z("span", null, w(t.text), 1),
@@ -70,5 +71,5 @@ const U = /* @__PURE__ */ T({
   }
 });
 export {
-  U as default
+  X as default
 };

package/composables/useColorMode.js

@@ -1,9 +1,29 @@
-import { computed as a, watch as l, onBeforeMount as d } from "vue";
-import { useStorage as s } from "@vueuse/core";
-const m = () => {
-  const e = s("color-mode", "dark"), o = a(() => e.value === "dark"), t = () => e.value = o.value ? "light" : "dark";
-  return l(e, (r) => document.documentElement.classList.toggle("dark", r === "dark")), d(() => document.documentElement.classList.toggle("dark", o.value)), { mode: e, isDark: o, toggleDark: t };
+import { computed as a, watch as r, onBeforeMount as s } from "vue";
+import { useCookies as u } from "@vueuse/integrations/useCookies";
+const i = () => {
+  const c = u(["color-mode"], {
+    autoUpdateDependencies: !0
+  }), o = a({
+    get: () => c.get("color-mode") || "dark",
+    set: (e) => {
+      c.set("color-mode", e, {
+        path: "/",
+        sameSite: "lax",
+        maxAge: 3600 * 24 * 365
+        // 1 year
+      });
+    }
+  }), t = a(() => o.value === "dark"), d = () => {
+    o.value = t.value ? "light" : "dark";
+  }, n = (e) => {
+    typeof document < "u" && (document.documentElement.classList.toggle("dark", e), document.documentElement.style.background = e ? "oklch(20.5% 0 0)" : "#fff");
+  };
+  return r(o, (e) => {
+    n(e === "dark");
+  }), s(() => {
+    n(t.value);
+  }), { mode: o, isDark: t, toggleDark: d };
 };
 export {
-  m as useColorMode
+  i as useColorMode
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veloce-vue",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "private": false,
   "type": "module",
   "description": "A Vue 3 library built with Vite + TypeScript + Tailwind CSS.",
@@ -58,8 +58,10 @@
     "./styles.css": "./veloce.css"
   },
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "motion-v": "^1.7.4"
+    "@vueuse/core": "^13.9.0",
+    "@vueuse/integrations": "^14.0.0",
+    "motion-v": "^1.7.4",
+    "vue": "^3.3.0"
   },
   "sideEffects": [
     "**/*.css",