vlite3 0.4.4 → 0.4.7

package/components/Slider.vue.js

@@ -1,15 +1,17 @@
-import { defineComponent as I, ref as k, watch as N, computed as r, openBlock as i, createElementBlock as v, normalizeClass as s, createBlock as R, createCommentVNode as f, toDisplayString as C, createElementVNode as b, normalizeStyle as x, withDirectives as F, vModelText as H } from "vue";
+import { defineComponent as N, ref as x, watch as R, computed as r, openBlock as i, createElementBlock as v, normalizeClass as s, createBlock as F, createCommentVNode as f, toDisplayString as C, createElementVNode as p, normalizeStyle as y, withDirectives as H, vModelText as L } from "vue";
 import U from "./Icon.vue.js";
-const W = {
+import { $t as W } from "../utils/i18n.js";
+const j = {
   key: 1,
   class: "text-sm font-medium whitespace-nowrap cursor-pointer"
-}, j = ["min", "max", "step", "disabled"], G = /* @__PURE__ */ I({
+}, q = ["min", "max", "step", "disabled"], K = /* @__PURE__ */ N({
   __name: "Slider",
   props: {
     min: { default: 0 },
     max: { default: 100 },
     step: { default: 1 },
     label: {},
+    labelI18n: {},
     icon: {},
     disabled: { type: Boolean },
     showValue: { type: Boolean, default: !0 },
@@ -19,15 +21,15 @@ const W = {
     size: { default: "md" }
   },
   emits: ["update:modelValue", "change", "iconClick"],
-  setup(l, { emit: $ }) {
-    const t = l, d = $, o = k(!1), g = k(!1), u = k(t.modelValue);
-    N(
+  setup(a, { emit: z }) {
+    const t = a, d = z, u = x(!1), g = x(!1), o = x(t.modelValue);
+    R(
       () => t.modelValue,
-      (n) => {
-        u.value = n;
+      (l) => {
+        o.value = l;
       }
     );
-    const h = r(() => t.centerOrigin !== void 0 ? t.centerOrigin : t.min < 0 && t.max > 0), y = r(() => t.max - t.min), p = r(() => (u.value - t.min) / y.value * 100), w = r(() => (0 - t.min) / y.value * 100), V = r(() => {
+    const b = r(() => t.centerOrigin !== void 0 ? t.centerOrigin : t.min < 0 && t.max > 0), V = r(() => t.max - t.min), h = r(() => (o.value - t.min) / V.value * 100), w = r(() => (0 - t.min) / V.value * 100), $ = r(() => {
       switch (t.size) {
         case "xs":
           return 10;
@@ -38,34 +40,34 @@ const W = {
         default:
           return 14;
       }
-    }), c = (n) => {
-      const e = V.value / 2, a = V.value;
-      return `calc(${n}% + (${e}px - ${a * (n / 100)}px))`;
-    }, z = r(() => {
-      if (h.value) {
-        const n = Math.min(p.value, w.value), e = Math.max(p.value, w.value), a = c(n), E = c(e);
+    }), c = (l) => {
+      const e = $.value / 2, n = $.value;
+      return `calc(${l}% + (${e}px - ${n * (l / 100)}px))`;
+    }, M = r(() => {
+      if (b.value) {
+        const l = Math.min(h.value, w.value), e = Math.max(h.value, w.value), n = c(l), E = c(e);
         return {
-          left: a,
-          width: `calc(${E} - ${a})`
+          left: n,
+          width: `calc(${E} - ${n})`
         };
       } else
         return {
           left: "0%",
-          width: c(p.value)
+          width: c(h.value)
         };
-    }), M = r(() => h.value ? u.value < 0 ? "rounded-r-none" : u.value > 0 ? "rounded-l-none" : "" : ""), B = r(() => ({
-      left: c(p.value)
-    })), S = () => {
-      d("update:modelValue", u.value);
-    }, D = () => {
-      d("change", u.value), o.value = !1;
+    }), B = r(() => b.value ? o.value < 0 ? "rounded-r-none" : o.value > 0 ? "rounded-l-none" : "" : ""), S = r(() => ({
+      left: c(h.value)
+    })), D = () => {
+      d("update:modelValue", o.value);
+    }, I = () => {
+      d("change", o.value), u.value = !1;
     }, P = r(() => Math.abs(t.modelValue) > 1e-3), O = () => {
       if (t.disabled) return;
-      const n = h.value ? 0 : t.min;
-      u.value = n, d("update:modelValue", n), d("change", n);
+      const l = b.value ? 0 : t.min;
+      o.value = l, d("update:modelValue", l), d("change", l);
     }, T = r(() => {
-      const n = t.step.toString().split(".")[1]?.length || 0;
-      return u.value.toFixed(n);
+      const l = t.step.toString().split(".")[1]?.length || 0;
+      return o.value.toFixed(l);
     }), m = r(() => ({
       xs: {
         track: "h-0.5",
@@ -91,82 +93,82 @@ const W = {
         wrapper: "h-7",
         tick: "h-4"
       }
-    })[t.size]);
-    return (n, e) => (i(), v("div", {
-      class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none": l.disabled }]),
-      onMouseenter: e[6] || (e[6] = (a) => g.value = !0),
-      onMouseleave: e[7] || (e[7] = (a) => g.value = !1)
+    })[t.size]), k = r(() => t.labelI18n ? W(t.labelI18n) : t.label);
+    return (l, e) => (i(), v("div", {
+      class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none": a.disabled }]),
+      onMouseenter: e[6] || (e[6] = (n) => g.value = !0),
+      onMouseleave: e[7] || (e[7] = (n) => g.value = !1)
     }, [
-      l.label || l.icon ? (i(), v("div", {
+      k.value || a.icon ? (i(), v("div", {
         key: 0,
-        class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": o.value || g.value }, l.labelClass || "text-muted-foreground"]]),
-        onClick: e[0] || (e[0] = (a) => d("iconClick")),
+        class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": u.value || g.value }, a.labelClass || "text-muted-foreground"]]),
+        onClick: e[0] || (e[0] = (n) => d("iconClick")),
         title: "Double-click to reset"
       }, [
-        l.icon ? (i(), R(U, {
+        a.icon ? (i(), F(U, {
           key: 0,
-          icon: l.icon,
+          icon: a.icon,
           class: "h-4 w-4"
         }, null, 8, ["icon"])) : f("", !0),
-        l.label ? (i(), v("label", W, C(l.label), 1)) : f("", !0)
+        k.value ? (i(), v("label", j, C(k.value), 1)) : f("", !0)
       ], 2)) : f("", !0),
-      b("div", {
+      p("div", {
         class: s(["relative flex-1 flex items-center group", m.value.wrapper])
       }, [
-        b("div", {
+        p("div", {
           class: s(["absolute w-full bg-secondary rounded-full overflow-hidden", m.value.track])
         }, null, 2),
-        h.value ? (i(), v("div", {
+        b.value ? (i(), v("div", {
           key: 0,
           class: s(["absolute top-1/2 w-0.5 bg-muted-foreground/30 rounded transform -translate-y-1/2 z-0", m.value.tick]),
-          style: x({ left: c(w.value) })
+          style: y({ left: c(w.value) })
         }, null, 6)) : f("", !0),
-        b("div", {
+        p("div", {
           class: s(["absolute bg-primary rounded-full will-change-transform", [
             {
-              "bg-muted-foreground": l.disabled,
-              "transition-all duration-75 ease-out": !o.value,
-              "duration-0": o.value
+              "bg-muted-foreground": a.disabled,
+              "transition-all duration-75 ease-out": !u.value,
+              "duration-0": u.value
             },
             m.value.track,
-            M.value
+            B.value
           ]]),
-          style: x(z.value)
+          style: y(M.value)
         }, null, 6),
-        b("div", {
+        p("div", {
           class: s(["absolute top-1/2 bg-background -ml-px border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10", [
             {
-              "border-primary shadow-md scale-110": o.value,
+              "border-primary shadow-md scale-110": u.value,
               "border-primary": P.value
             },
             m.value.thumb
           ]]),
-          style: x(B.value)
+          style: y(S.value)
         }, null, 6),
-        F(b("input", {
+        H(p("input", {
           type: "range",
-          "onUpdate:modelValue": e[1] || (e[1] = (a) => u.value = a),
-          min: l.min,
-          max: l.max,
-          step: l.step,
-          disabled: l.disabled,
-          onInput: S,
-          onChange: D,
-          onMousedown: e[2] || (e[2] = (a) => o.value = !0),
-          onTouchstart: e[3] || (e[3] = (a) => o.value = !0),
-          onMouseup: e[4] || (e[4] = (a) => o.value = !1),
-          onTouchend: e[5] || (e[5] = (a) => o.value = !1),
+          "onUpdate:modelValue": e[1] || (e[1] = (n) => o.value = n),
+          min: a.min,
+          max: a.max,
+          step: a.step,
+          disabled: a.disabled,
+          onInput: D,
+          onChange: I,
+          onMousedown: e[2] || (e[2] = (n) => u.value = !0),
+          onTouchstart: e[3] || (e[3] = (n) => u.value = !0),
+          onMouseup: e[4] || (e[4] = (n) => u.value = !1),
+          onTouchend: e[5] || (e[5] = (n) => u.value = !1),
           class: "slider-input absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20 m-0 p-0"
-        }, null, 40, j), [
+        }, null, 40, q), [
           [
-            H,
-            u.value,
+            L,
+            o.value,
             void 0,
             { number: !0 }
           ]
         ])
       ], 2),
-      l.showValue ? (i(), v("span", {
+      a.showValue ? (i(), v("span", {
         key: 1,
         onDblclick: O,
         class: "font-mono tabular-nums text-muted-foreground text-right min-w-6 text-sm"
@@ -175,5 +177,5 @@ const W = {
   }
 });
 export {
-  G as default
+  K as default
 };

package/components/Switch.vue.d.ts

@@ -2,6 +2,7 @@ interface Props {
     modelValue?: boolean;
     disabled?: boolean;
     label?: string;
+    labelI18n?: string;
     class?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {

package/components/Switch.vue.js

@@ -1,40 +1,45 @@
-import { defineComponent as d, openBlock as o, createElementBlock as n, createElementVNode as i, normalizeClass as a, toDisplayString as c, createCommentVNode as u } from "vue";
-const b = { class: "flex items-center gap-2" }, m = ["aria-checked", "aria-label", "disabled"], k = /* @__PURE__ */ d({
+import { defineComponent as u, computed as c, openBlock as n, createElementBlock as i, createElementVNode as r, normalizeClass as t, toDisplayString as m, createCommentVNode as b } from "vue";
+import { $t as f } from "../utils/i18n.js";
+const p = { class: "flex items-center gap-2" }, g = ["aria-checked", "aria-label", "disabled"], v = /* @__PURE__ */ u({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     label: {},
+    labelI18n: {},
     class: { default: "" }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: s }) {
-    const l = e, r = s, t = () => {
-      l.disabled || r("update:modelValue", !l.modelValue);
-    };
-    return (f, g) => (o(), n("div", b, [
-      i("button", {
+    const l = e, d = s, o = () => {
+      l.disabled || d("update:modelValue", !l.modelValue);
+    }, a = c(() => l.labelI18n ? f(l.labelI18n) : l.label);
+    return (h, k) => (n(), i("div", p, [
+      r("button", {
         type: "button",
         role: "switch",
         "aria-checked": e.modelValue,
-        "aria-label": e.label || "Toggle",
+        "aria-label": a.value || "Toggle",
         disabled: e.disabled,
-        class: a(["relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", [e.modelValue ? "bg-primary" : "bg-input", l.class]]),
-        onClick: t
+        class: t(["relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", [e.modelValue ? "bg-primary" : "bg-input", l.class]]),
+        onClick: o
       }, [
-        i("span", {
+        r("span", {
           "aria-hidden": "true",
-          class: a(["pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out", e.modelValue ? "translate-x-5" : "translate-x-0"])
+          class: t([
+            "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out",
+            e.modelValue ? "translate-x-5  rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"
+          ])
         }, null, 2)
-      ], 10, m),
-      e.label ? (o(), n("label", {
+      ], 10, g),
+      a.value ? (n(), i("label", {
         key: 0,
-        class: a([e.disabled ? "opacity-50" : "", "text-sm font-medium text-foreground cursor-pointer"]),
-        onClick: t
-      }, c(e.label), 3)) : u("", !0)
+        class: t([e.disabled ? "opacity-50" : "", "text-sm font-medium text-foreground cursor-pointer"]),
+        onClick: o
+      }, m(a.value), 3)) : b("", !0)
     ]));
   }
 });
 export {
-  k as default
+  v as default
 };

package/components/Tabes/Tabes.vue.js

@@ -1,7 +1,8 @@
-import { defineComponent as M, ref as g, watch as c, onMounted as j, computed as p, openBlock as i, createElementBlock as u, normalizeClass as l, normalizeStyle as A, createCommentVNode as y, Fragment as E, renderList as I, createBlock as N, createElementVNode as T, toDisplayString as _, nextTick as D } from "vue";
+import { defineComponent as M, ref as g, watch as c, onMounted as j, computed as p, openBlock as i, createElementBlock as u, normalizeClass as l, normalizeStyle as A, createCommentVNode as y, Fragment as E, renderList as N, createBlock as O, createElementVNode as T, toDisplayString as _, nextTick as D } from "vue";
 import { useResizeObserver as F } from "@vueuse/core";
-import O from "../Icon.vue.js";
-const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
+import q from "../Icon.vue.js";
+import { $t as G } from "../../utils/i18n.js";
+const H = ["aria-selected", "disabled", "onClick"], U = /* @__PURE__ */ M({
   __name: "Tabes",
   props: {
     options: {},
@@ -15,7 +16,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
   setup(s, { emit: x }) {
     const r = s, v = x, d = g(null), f = g(/* @__PURE__ */ new Map()), h = (e, n) => {
       e ? f.value.set(n, e) : f.value.delete(n);
-    }, m = g({
+    }, b = g({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
@@ -24,14 +25,14 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       await D();
       const e = d.value, n = f.value.get(r.modelValue);
       if (!e || !n) {
-        m.value.opacity = 0;
+        b.value.opacity = 0;
         return;
       }
-      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), b = t.left - a.left, $ = t.top - a.top, B = t.width, L = t.height;
-      m.value = {
-        width: `${B}px`,
-        height: `${L}px`,
-        transform: `translate(${b}px, ${$}px)`,
+      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), m = t.left - a.left, B = t.top - a.top, L = t.width, I = t.height;
+      b.value = {
+        width: `${L}px`,
+        height: `${I}px`,
+        transform: `translate(${m}px, ${B}px)`,
         opacity: 1
       };
     };
@@ -81,8 +82,8 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
           }
       else
         t = a ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const b = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [z.value, t, b].join(" ");
+      const m = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [z.value, t, m].join(" ");
     }, R = p(() => {
       const e = "absolute left-0 top-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] z-0 pointer-events-none";
       return r.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
@@ -94,7 +95,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       success: "bg-success",
       outline: "bg-accent/50 ring-1 ring-border",
       line: "bg-primary"
-    })[r.variant];
+    })[r.variant], $ = (e) => e.labelI18n ? G(e.labelI18n) : e.label;
     return (e, n) => (i(), u("div", {
       ref_key: "containerRef",
       ref: d,
@@ -104,9 +105,9 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       s.modelValue !== void 0 ? (i(), u("div", {
         key: 0,
         class: l([R.value, S()]),
-        style: A(m.value)
+        style: A(b.value)
       }, null, 6)) : y("", !0),
-      (i(!0), u(E, null, I(s.options, (a) => (i(), u("button", {
+      (i(!0), u(E, null, N(s.options, (a) => (i(), u("button", {
         key: a.value,
         ref_for: !0,
         ref: (t) => h(t, a.value),
@@ -117,18 +118,18 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
         onClick: (t) => k(a),
         type: "button"
       }, [
-        a.icon ? (i(), N(O, {
+        a.icon ? (i(), O(q, {
           key: 0,
           icon: a.icon,
           class: l(s.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4")
         }, null, 8, ["icon", "class"])) : y("", !0),
         T("span", {
           class: l(["whitespace-nowrap z-20 relative", s.textClass])
-        }, _(a.label), 3)
-      ], 10, q))), 128))
+        }, _($(a)), 3)
+      ], 10, H))), 128))
     ], 2));
   }
 });
 export {
-  K as default
+  U as default
 };

package/components/Tabes/types.d.ts

@@ -1,5 +1,6 @@
 export interface TabesOption {
     label: string;
+    labelI18n?: string;
     value: string | number;
     icon?: string;
     disabled?: boolean;

package/components/Textarea.vue.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     modelValue?: string;
     placeholder?: string;
+    placeholderI18n?: string;
     disabled?: boolean;
     rows?: number;
     class?: string;

package/components/Textarea.vue.js

@@ -1,34 +1,36 @@
-import { defineComponent as n, computed as c, openBlock as i, createElementBlock as m, normalizeClass as p } from "vue";
-const f = ["value", "rows", "disabled", "placeholder"], x = /* @__PURE__ */ n({
+import { defineComponent as i, computed as r, openBlock as p, createElementBlock as m, normalizeClass as f } from "vue";
+import { $t as b } from "../utils/i18n.js";
+const x = ["value", "rows", "disabled", "placeholder"], g = /* @__PURE__ */ i({
   __name: "Textarea",
   props: {
     modelValue: { default: "" },
     placeholder: {},
+    placeholderI18n: {},
     disabled: { type: Boolean, default: !1 },
     rows: { default: 3 },
     class: { default: "" }
   },
   emits: ["update:modelValue", "focus", "blur"],
-  setup(l, { emit: d }) {
-    const r = l, o = d, s = c(() => [
+  setup(l, { emit: s }) {
+    const o = l, t = s, n = r(() => [
       "flex min-h-[80px] w-full rounded-md border border-input px-3 py-2 text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50 bg-background text-foreground",
-      r.class
-    ].join(" ")), u = (a) => {
-      const e = a.target;
-      o("update:modelValue", e.value);
-    };
-    return (a, e) => (i(), m("textarea", {
+      o.class
+    ].join(" ")), u = (d) => {
+      const e = d.target;
+      t("update:modelValue", e.value);
+    }, c = r(() => o.placeholderI18n ? b(o.placeholderI18n) : o.placeholder);
+    return (d, e) => (p(), m("textarea", {
       value: l.modelValue,
       rows: l.rows,
       disabled: l.disabled,
-      placeholder: l.placeholder,
-      class: p(s.value),
+      placeholder: c.value,
+      class: f(n.value),
       onInput: u,
-      onFocus: e[0] || (e[0] = (t) => o("focus", t)),
-      onBlur: e[1] || (e[1] = (t) => o("blur", t))
-    }, null, 42, f));
+      onFocus: e[0] || (e[0] = (a) => t("focus", a)),
+      onBlur: e[1] || (e[1] = (a) => t("blur", a))
+    }, null, 42, x));
   }
 });
 export {
-  x as default
+  g as default
 };

package/components/ThemeToggle.vue.js

@@ -1,7 +1,8 @@
-import { defineComponent as a, renderSlot as l, unref as e, createVNode as r, normalizeClass as s } from "vue";
-import { useTheme as m } from "../composables/useTheme.js";
-import c from "./Button.vue.js";
-const g = /* @__PURE__ */ a({
+import { defineComponent as m, computed as d, renderSlot as u, unref as o, createVNode as h, normalizeClass as g } from "vue";
+import { useTheme as f } from "../composables/useTheme.js";
+import T from "./Button.vue.js";
+import { $t as c } from "../utils/i18n.js";
+const w = /* @__PURE__ */ m({
   __name: "ThemeToggle",
   props: {
     class: {},
@@ -10,23 +11,32 @@ const g = /* @__PURE__ */ a({
     variant: {}
   },
   setup(t) {
-    const { theme: o, toggleTheme: n } = m();
-    return (i, d) => l(i.$slots, "default", {
-      toggleTheme: e(n),
-      theme: e(o)
+    const { theme: i, toggleTheme: r } = f(), a = d(() => {
+      const n = i.value === "light", s = "vlite.themeToggle.switchToDark", l = "vlite.themeToggle.switchToLight";
+      if (n) {
+        const e = c(s);
+        return e !== s ? e : "Switch to dark mode";
+      } else {
+        const e = c(l);
+        return e !== l ? e : "Switch to light mode";
+      }
+    });
+    return (n, s) => u(n.$slots, "default", {
+      toggleTheme: o(r),
+      theme: o(i)
     }, () => [
-      r(c, {
-        icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
+      h(T, {
+        icon: o(i) === "light" ? "lucide:sun" : "lucide:moon",
         variant: t.variant || "secondary",
         rounded: t.rounded || "md",
         size: t.size,
-        class: s(t.class),
-        title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
-        onClick: e(n)
+        class: g(t.class),
+        title: a.value,
+        onClick: o(r)
       }, null, 8, ["icon", "variant", "rounded", "size", "class", "title", "onClick"])
     ]);
   }
 });
 export {
-  g as default
+  w as default
 };