vlite3 0.4.4 → 0.4.7

package/components/DataTable/DataTableToolbar.vue.js

@@ -1,52 +1,59 @@
-import { defineComponent as h, computed as p, openBlock as a, createElementBlock as t, normalizeClass as d, renderSlot as o, createCommentVNode as u, createElementVNode as n, createVNode as V } from "vue";
-import v from "../Input.vue.js";
-const g = {
+import { defineComponent as V, computed as d, openBlock as t, createElementBlock as o, normalizeClass as n, renderSlot as s, createCommentVNode as u, createElementVNode as m, createVNode as b } from "vue";
+import g from "../Input.vue.js";
+import { $t as i } from "../../utils/i18n.js";
+const w = {
   key: 0,
   class: "flex items-center gap-3 mr-auto"
-}, w = { class: "ml-auto" }, b = { class: "flex items-center gap-3" }, $ = /* @__PURE__ */ h({
+}, $ = { class: "ml-auto" }, k = { class: "flex items-center gap-3" }, T = /* @__PURE__ */ V({
   __name: "DataTableToolbar",
   props: {
     modelValue: { default: "" },
     showSearch: { type: Boolean, default: !0 },
-    placeholder: { default: "Search..." },
+    placeholder: {},
+    placeholderI18n: {},
     class: { default: "" },
     searchClass: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: m }) {
-    const s = l, i = m, r = p({
-      get: () => s.modelValue,
-      set: (e) => i("update:modelValue", e)
+  setup(a, { emit: h }) {
+    const l = a, p = h, r = d({
+      get: () => l.modelValue,
+      set: (e) => p("update:modelValue", e)
+    }), f = d(() => {
+      if (l.placeholderI18n) return i(l.placeholderI18n);
+      if (l.placeholder) return l.placeholder;
+      const e = i("vlite.dataTable.searchPlaceholder");
+      return e !== "vlite.dataTable.searchPlaceholder" ? e : "Search...";
     });
-    return (e, c) => (a(), t("div", {
-      class: d(["flex flex-col sm:flex-row items-center gap-4 p-1", s.class])
+    return (e, c) => (t(), o("div", {
+      class: n(["flex flex-col sm:flex-row items-center gap-4 p-1", l.class])
     }, [
-      e.$slots?.left ? (a(), t("div", g, [
-        o(e.$slots, "left")
+      e.$slots?.left ? (t(), o("div", w, [
+        s(e.$slots, "left")
       ])) : u("", !0),
-      n("div", w, [
-        o(e.$slots, "delete")
+      m("div", $, [
+        s(e.$slots, "delete")
       ]),
-      l.showSearch ? (a(), t("div", {
+      a.showSearch ? (t(), o("div", {
         key: 1,
-        class: d(["w-full sm:w-72!", l.searchClass])
+        class: n(["w-full sm:w-72!", a.searchClass])
       }, [
-        V(v, {
+        b(g, {
           modelValue: r.value,
-          "onUpdate:modelValue": c[0] || (c[0] = (f) => r.value = f),
-          placeholder: l.placeholder,
+          "onUpdate:modelValue": c[0] || (c[0] = (v) => r.value = v),
+          placeholder: f.value,
           icon: "lucide:search",
           variant: "outline",
           class: "bg-background",
           "show-clear-button": !0
         }, null, 8, ["modelValue", "placeholder"])
       ], 2)) : u("", !0),
-      n("div", b, [
-        o(e.$slots, "right")
+      m("div", k, [
+        s(e.$slots, "right")
       ])
     ], 2));
   }
 });
 export {
-  $ as default
+  T as default
 };

package/components/DataTable/types.d.ts

@@ -25,6 +25,7 @@ export interface TableFilter {
 export interface TableHeader {
     field: string;
     title: string;
+    titleI18n?: string;
     width?: string;
     minWidth?: string;
     sortable?: boolean;
@@ -42,6 +43,7 @@ export interface DataTableProps {
     search?: string;
     showSearch?: boolean;
     searchPlaceholder?: string;
+    searchPlaceholderI18n?: string;
     toolbarClass?: string;
     toolbarSearchClass?: string;
     headers: TableHeader[];
@@ -49,7 +51,9 @@ export interface DataTableProps {
     loading?: boolean;
     selectable?: boolean;
     emptyTitle?: string;
+    emptyTitleI18n?: string;
     emptyDescription?: string;
+    emptyDescriptionI18n?: string;
     emptyIcon?: string;
     showPagination?: boolean;
     paginationProps?: DataTablePaginationProps;

package/components/DatePicker.vue.d.ts

@@ -2,6 +2,7 @@ import { DatePickerMode } from 'v-datepicker-lite/types';
 import { ButtonSize, ButtonVariant } from '../types';
 type __VLS_Props = {
     placeholder?: string;
+    placeholderI18n?: string;
     modelValue?: any;
     value?: any;
     mode: DatePickerMode;

package/components/DatePicker.vue.js

@@ -1,13 +1,15 @@
-import { defineComponent as g, computed as s, openBlock as c, createBlock as f, unref as n, withCtx as m, createElementVNode as D, createVNode as u, renderSlot as w, mergeProps as v } from "vue";
+import { defineComponent as P, computed as n, openBlock as f, createBlock as v, unref as o, withCtx as r, createElementVNode as k, createVNode as m, renderSlot as w, mergeProps as h } from "vue";
 import b from "./Button.vue.js";
-import V from "./Dropdown/Dropdown.vue.js";
+import I from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import k, { TimePicker as P } from "v-datepicker-lite";
+import { $t as y } from "../utils/i18n.js";
+import V, { TimePicker as z } from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
-const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
+const S = { class: "overflow-hidden min-w-[300px]" }, H = /* @__PURE__ */ P({
   __name: "DatePicker",
   props: {
     placeholder: {},
+    placeholderI18n: {},
     modelValue: {},
     value: {},
     mode: {},
@@ -25,19 +27,19 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: h }) {
-    const l = e, o = h, a = s({
+  setup(e, { emit: x }) {
+    const l = e, u = x, a = n({
       get: () => l.modelValue ?? l.value,
       set: (t) => {
-        o("update:modelValue", t), o("change", t);
+        u("update:modelValue", t), u("change", t);
       }
-    }), y = (t) => t instanceof Date ? t.getHours() !== 0 || t.getMinutes() !== 0 : typeof t == "string" ? t.includes("T") || /\d{2}:\d{2}/.test(t) : !1, i = s(() => {
+    }), g = (t) => t instanceof Date ? t.getHours() !== 0 || t.getMinutes() !== 0 : typeof t == "string" ? t.includes("T") || /\d{2}:\d{2}/.test(t) : !1, i = n(() => {
       if (!a.value) return "";
       if (l.mode === "time") return a.value;
       try {
         const t = new Date(a.value);
         if (isNaN(t.getTime())) return String(a.value);
-        const d = l.mode === "dateTime" && y(a.value);
+        const d = l.mode === "dateTime" && g(a.value);
         return t.toLocaleDateString("en-US", {
           month: "short",
           day: "numeric",
@@ -47,10 +49,15 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
       } catch {
         return String(a.value);
       }
-    }), r = (t) => {
+    }), s = n(() => {
+      if (l.placeholderI18n) return y(l.placeholderI18n);
+      if (l.placeholder) return l.placeholder;
+      const t = y("vlite.datePicker.placeholder");
+      return t !== "vlite.datePicker.placeholder" ? t : "Select date";
+    }), c = (t) => {
       a.value = t;
     };
-    return (t, d) => e.mode !== "time" ? (c(), f(n(V), {
+    return (t, d) => e.mode !== "time" ? (f(), v(o(I), {
       key: 0,
       position: "bottom-start",
       class: "w-full",
@@ -58,13 +65,13 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
       teleport: e.teleport,
       disabled: e.disabled || e.readonly
     }, {
-      trigger: m(() => [
+      trigger: r(() => [
         w(t.$slots, "default", {
           value: a.value,
           displayValue: i.value
         }, () => [
-          u(b, v({
-            text: i.value || e.placeholder || "Select date",
+          m(b, h({
+            text: i.value || s.value,
             variant: e.variant || "outline",
             size: e.size || "md",
             icon: e.icon || "lucide:calendar",
@@ -72,9 +79,9 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
           }, e.btnProps, { class: "w-full justify-start text-left font-normal" }), null, 16, ["text", "variant", "size", "icon", "disabled"])
         ])
       ]),
-      default: m(() => [
-        D("div", z, [
-          u(n(k), {
+      default: r(() => [
+        k("div", S, [
+          m(o(V), {
             value: a.value,
             mode: e.mode,
             "min-date": e.minDate,
@@ -85,17 +92,17 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
             "time-format": "12h",
             disabled: e.disabled,
             readonly: e.readonly,
-            onChange: r
+            onChange: c
           }, null, 8, ["value", "mode", "min-date", "max-date", "disabled-dates", "minuteInterval", "disabled", "readonly"])
         ])
       ]),
       _: 3
-    }, 8, ["teleport", "disabled"])) : (c(), f(n(P), {
+    }, 8, ["teleport", "disabled"])) : (f(), v(o(z), {
       key: 1,
       "model-value": a.value,
       "onUpdate:modelValue": [
-        d[0] || (d[0] = (x) => a.value = x),
-        r
+        d[0] || (d[0] = (D) => a.value = D),
+        c
       ],
       mode: e.mode,
       "min-date": e.minDate,
@@ -107,9 +114,9 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
       disabled: e.disabled,
       readonly: e.readonly
     }, {
-      default: m(() => [
-        u(b, v({
-          text: i.value || e.placeholder || "Select date",
+      default: r(() => [
+        m(b, h({
+          text: i.value || s.value,
           variant: e.variant || "outline",
           size: e.size || "md",
           icon: e.icon || (e.mode === "time" ? "lucide:clock" : "lucide:calendar"),
@@ -121,5 +128,5 @@ const z = { class: "overflow-hidden min-w-[300px]" }, $ = /* @__PURE__ */ g({
   }
 });
 export {
-  $ as default
+  H as default
 };

package/components/Dropdown/DropdownBooleanItem.vue.js

@@ -1,7 +1,8 @@
-import { defineComponent as r, openBlock as i, createElementBlock as m, withModifiers as d, normalizeClass as u, createElementVNode as c, createBlock as f, createCommentVNode as p, toDisplayString as g, createVNode as h } from "vue";
-import v from "../Switch.vue.js";
-import x from "../Icon.vue.js";
-const k = { class: "flex items-center gap-2 flex-1 min-w-0" }, y = { class: "truncate font-medium" }, V = /* @__PURE__ */ r({
+import { defineComponent as m, computed as d, openBlock as l, createElementBlock as u, withModifiers as p, normalizeClass as f, createElementVNode as a, createBlock as g, createCommentVNode as v, toDisplayString as h, createVNode as x } from "vue";
+import y from "../Switch.vue.js";
+import b from "../Icon.vue.js";
+import { $t as k } from "../../utils/i18n.js";
+const w = { class: "flex items-center gap-2 flex-1 min-w-0" }, B = { class: "truncate font-medium" }, D = /* @__PURE__ */ m({
   __name: "DropdownBooleanItem",
   props: {
     option: {},
@@ -9,33 +10,33 @@ const k = { class: "flex items-center gap-2 flex-1 min-w-0" }, y = { class: "tru
     focused: { type: Boolean }
   },
   emits: ["change"],
-  setup(e, { emit: a }) {
-    const l = e, s = a, o = (t) => {
-      s("change", t, l.option);
+  setup(e, { emit: c }) {
+    const o = e, s = c, r = d(() => o.option.labelI18n ? k(o.option.labelI18n) : o.option.label), t = (n) => {
+      s("change", n, o.option);
     };
-    return (t, n) => (i(), m("div", {
+    return (n, i) => (l(), u("div", {
       "data-dropdown-item": "",
-      class: u(["relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", [
+      class: f(["relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", [
         e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
       ]]),
-      onClick: n[0] || (n[0] = d((w) => o(!e.value), ["stop"]))
+      onClick: i[0] || (i[0] = p((C) => t(!e.value), ["stop"]))
     }, [
-      c("div", k, [
-        e.option.icon ? (i(), f(x, {
+      a("div", w, [
+        e.option.icon ? (l(), g(b, {
           key: 0,
           icon: e.option.icon,
           class: "h-4 w-4 shrink-0 opacity-70"
-        }, null, 8, ["icon"])) : p("", !0),
-        c("span", y, g(e.option.label), 1)
+        }, null, 8, ["icon"])) : v("", !0),
+        a("span", B, h(r.value), 1)
       ]),
-      h(v, {
+      x(y, {
         "model-value": e.value,
         class: "ml-3 shrink-0 scale-75 origin-right",
-        "onUpdate:modelValue": o
+        "onUpdate:modelValue": t
       }, null, 8, ["model-value"])
     ], 2));
   }
 });
 export {
-  V as default
+  D as default
 };

package/components/Dropdown/DropdownGroupedLayout.vue.js

@@ -1,13 +1,14 @@
-import { defineComponent as v, computed as _, openBlock as t, createElementBlock as n, normalizeStyle as C, Fragment as a, renderList as i, createElementVNode as m, normalizeClass as $, toDisplayString as h, createBlock as d, createCommentVNode as f, createVNode as w } from "vue";
-import B from "../Icon.vue.js";
+import { defineComponent as _, computed as C, openBlock as t, createElementBlock as c, normalizeStyle as $, Fragment as a, renderList as i, createElementVNode as m, normalizeClass as h, toDisplayString as w, createBlock as d, createCommentVNode as f, createVNode as B } from "vue";
+import N from "../Icon.vue.js";
 import y from "./DropdownItem.vue.js";
-const N = { class: "font-semibold text-sm text-foreground" }, S = { class: "flex flex-col space-y-1" }, V = {
+import { $t as S } from "../../utils/i18n.js";
+const L = { class: "font-semibold text-sm text-foreground" }, V = { class: "flex flex-col space-y-1" }, z = {
   key: 0,
   class: "flex flex-col space-y-1 ml-3 pl-3 border-l border-border mt-0.5 mb-1.5"
-}, g = {
+}, A = {
   key: 1,
   class: "px-2 text-xs text-muted-foreground italic"
-}, j = /* @__PURE__ */ v({
+}, F = /* @__PURE__ */ _({
   __name: "DropdownGroupedLayout",
   props: {
     options: { default: () => [] },
@@ -18,56 +19,56 @@ const N = { class: "font-semibold text-sm text-foreground" }, S = { class: "flex
     headerClass: {}
   },
   emits: ["select", "mouseenter"],
-  setup(o, { emit: z }) {
-    const l = o, k = _(() => {
+  setup(o, { emit: D }) {
+    const l = o, k = C(() => {
       const e = l.columns;
       return typeof e == "number" ? { gridTemplateColumns: `repeat(${e}, minmax(0, 1fr))` } : { gridTemplateColumns: e };
-    }), u = (e) => l.selected ? Array.isArray(l.selected) ? l.selected.includes(e.value) : typeof l.selected == "object" && l.selected !== null && e.key && e.key in l.selected ? l.selected[e.key] === e.value : l.selected === e.value : !1;
-    return (e, A) => (t(), n("div", {
+    }), u = (e) => l.selected ? Array.isArray(l.selected) ? l.selected.includes(e.value) : typeof l.selected == "object" && l.selected !== null && e.key && e.key in l.selected ? l.selected[e.key] === e.value : l.selected === e.value : !1, b = (e) => e.labelI18n ? S(e.labelI18n) : e.label;
+    return (e, E) => (t(), c("div", {
       class: "grid gap-6 p-4",
-      style: C(k.value)
+      style: $(k.value)
     }, [
-      (t(!0), n(a, null, i(o.options, (s, p) => (t(), n("div", {
+      (t(!0), c(a, null, i(o.options, (s, p) => (t(), c("div", {
         key: s.key || s.value || p,
         class: "flex flex-col space-y-2 min-w-[150px]"
       }, [
         m("div", {
-          class: $(["flex items-center gap-2 px-2 py-1 mb-1", o.headerClass])
+          class: h(["flex items-center gap-2 px-2 py-1 mb-1", o.headerClass])
         }, [
-          m("span", N, h(s.label), 1),
-          s.icon ? (t(), d(B, {
+          m("span", L, w(b(s)), 1),
+          s.icon ? (t(), d(N, {
             key: 0,
             icon: s.icon,
             class: "w-4 h-4 text-muted-foreground"
           }, null, 8, ["icon"])) : f("", !0)
         ], 2),
-        m("div", S, [
-          s.children && s.children.length ? (t(!0), n(a, { key: 0 }, i(s.children, (c, x) => (t(), n(a, {
-            key: c.key || c.value || x
+        m("div", V, [
+          s.children && s.children.length ? (t(!0), c(a, { key: 0 }, i(s.children, (n, x) => (t(), c(a, {
+            key: n.key || n.value || x
           }, [
-            w(y, {
-              option: c,
-              selected: u(c),
+            B(y, {
+              option: n,
+              selected: u(n),
               selectable: o.selectable,
               class: "w-full",
-              onClick: (r) => e.$emit("select", c)
+              onClick: (r) => e.$emit("select", n)
             }, null, 8, ["option", "selected", "selectable", "onClick"]),
-            c.children && c.children.length ? (t(), n("div", V, [
-              (t(!0), n(a, null, i(c.children, (r, b) => (t(), d(y, {
-                key: r.key || r.value || b,
+            n.children && n.children.length ? (t(), c("div", z, [
+              (t(!0), c(a, null, i(n.children, (r, v) => (t(), d(y, {
+                key: r.key || r.value || v,
                 option: r,
                 selected: u(r),
                 selectable: o.selectable,
                 class: "w-full text-xs",
-                onClick: (D) => e.$emit("select", r)
+                onClick: (G) => e.$emit("select", r)
               }, null, 8, ["option", "selected", "selectable", "onClick"]))), 128))
             ])) : f("", !0)
-          ], 64))), 128)) : (t(), n("div", g, "No items"))
+          ], 64))), 128)) : (t(), c("div", A, "No items"))
         ])
       ]))), 128))
     ], 4));
   }
 });
 export {
-  j as default
+  F as default
 };

package/components/Dropdown/DropdownItem.vue.js

@@ -1,12 +1,13 @@
-import { defineComponent as f, openBlock as t, createElementBlock as i, normalizeClass as x, renderSlot as b, normalizeProps as y, guardReactiveProps as k, createBlock as s, createCommentVNode as n, createElementVNode as c, toDisplayString as a } from "vue";
-import d from "../Icon.vue.js";
-const h = ["data-disabled"], v = { class: "flex flex-col flex-1 min-w-0" }, g = { class: "flex items-center justify-between gap-2" }, p = { class: "truncate font-medium" }, w = {
+import { defineComponent as k, computed as l, openBlock as o, createElementBlock as s, normalizeClass as h, renderSlot as g, normalizeProps as w, guardReactiveProps as I, createBlock as p, createCommentVNode as i, createElementVNode as a, toDisplayString as c } from "vue";
+import f from "../Icon.vue.js";
+import { $t as d } from "../../utils/i18n.js";
+const B = ["data-disabled"], $ = { class: "flex flex-col flex-1 min-w-0" }, C = { class: "flex items-center justify-between gap-2" }, D = { class: "truncate font-medium" }, S = {
   key: 0,
   class: "text-xs text-muted-foreground whitespace-nowrap opacity-90"
-}, B = {
+}, z = {
   key: 0,
   class: "text-[10px] text-muted-foreground truncate opacity-70"
-}, z = /* @__PURE__ */ f({
+}, V = /* @__PURE__ */ k({
   __name: "DropdownItem",
   props: {
     option: {},
@@ -16,41 +17,41 @@ const h = ["data-disabled"], v = { class: "flex flex-col flex-1 min-w-0" }, g =
     index: {}
   },
   emits: ["click", "mouseenter"],
-  setup(e, { emit: r }) {
-    const u = r;
-    return (l, o) => (t(), i("div", {
+  setup(e, { emit: b }) {
+    const t = e, x = b, y = l(() => t.option.labelI18n ? d(t.option.labelI18n) : t.option.label), r = l(() => t.option.subtitleI18n ? d(t.option.subtitleI18n) : t.option.subtitle), u = l(() => t.option.descriptionI18n ? d(t.option.descriptionI18n) : t.option.description);
+    return (m, n) => (o(), s("div", {
       "data-dropdown-item": "",
-      class: x(["relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50", [
+      class: h(["relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50", [
         e.selectable && e.selected && !e.option.children ? "bg-accent" : "",
         e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
         e.option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
       ]]),
       "data-disabled": e.option.disabled ? !0 : void 0,
-      onClick: o[0] || (o[0] = (m) => u("click", e.option)),
-      onMouseenter: o[1] || (o[1] = (m) => l.$emit("mouseenter", e.index ?? -1))
+      onClick: n[0] || (n[0] = (v) => x("click", e.option)),
+      onMouseenter: n[1] || (n[1] = (v) => m.$emit("mouseenter", e.index ?? -1))
     }, [
-      b(l.$slots, "default", y(k({ option: e.option, index: e.index, selected: e.selected })), () => [
-        e.option.icon ? (t(), s(d, {
+      g(m.$slots, "default", w(I({ option: e.option, index: e.index, selected: e.selected })), () => [
+        e.option.icon ? (o(), p(f, {
           key: 0,
           icon: e.option.icon,
           class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
-        }, null, 8, ["icon"])) : n("", !0),
-        c("div", v, [
-          c("div", g, [
-            c("span", p, a(e.option.label), 1),
-            e.option.subtitle ? (t(), i("span", w, a(e.option.subtitle), 1)) : n("", !0)
+        }, null, 8, ["icon"])) : i("", !0),
+        a("div", $, [
+          a("div", C, [
+            a("span", D, c(y.value), 1),
+            r.value ? (o(), s("span", S, c(r.value), 1)) : i("", !0)
           ]),
-          e.option.description ? (t(), i("span", B, a(e.option.description), 1)) : n("", !0)
+          u.value ? (o(), s("span", z, c(u.value), 1)) : i("", !0)
         ]),
-        e.selectable && e.selected ? (t(), s(d, {
+        e.selectable && e.selected ? (o(), p(f, {
           key: 1,
           icon: "lucide:check",
           class: "ml-2 h-4 w-4 shrink-0 text-primary"
-        })) : n("", !0)
+        })) : i("", !0)
       ])
-    ], 42, h));
+    ], 42, B));
   }
 });
 export {
-  z as default
+  V as default
 };