vlite3 0.4.4 → 0.4.7

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,30 +1,31 @@
-import { defineComponent as G, defineAsyncComponent as J, ref as B, computed as I, watch as C, toRef as Q, onMounted as W, onBeforeUnmount as X, openBlock as o, createElementBlock as c, createVNode as x, createCommentVNode as i, renderSlot as v, unref as n, normalizeStyle as Y, normalizeClass as T, createBlock as m, Fragment as N, renderList as Z, withCtx as V, createElementVNode as p, toDisplayString as ee, createSlots as te, mergeProps as le, nextTick as se } from "vue";
-import S from "../Icon.vue.js";
-import oe from "../Input.vue.js";
-import ne from "./DropdownItem.vue.js";
-import re from "./DropdownBooleanItem.vue.js";
-import de from "./DropdownGroupedLayout.vue.js";
-import { useDropdownNavigation as ce } from "./composables/useDropdownNavigation.js";
-import { useDropdownIds as ae } from "./composables/useDropdownIds.js";
-const ie = ["dir"], ue = {
+import { defineComponent as Y, defineAsyncComponent as Z, ref as C, computed as v, watch as T, toRef as ee, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as c, createVNode as x, createCommentVNode as i, renderSlot as g, unref as n, normalizeStyle as se, normalizeClass as D, toDisplayString as E, createBlock as m, Fragment as N, renderList as oe, withCtx as V, createElementVNode as S, createSlots as ne, mergeProps as re, nextTick as de } from "vue";
+import $ from "../Icon.vue.js";
+import ce from "../Input.vue.js";
+import ae from "./DropdownItem.vue.js";
+import ie from "./DropdownBooleanItem.vue.js";
+import ue from "./DropdownGroupedLayout.vue.js";
+import { useDropdownNavigation as fe } from "./composables/useDropdownNavigation.js";
+import { useDropdownIds as me } from "./composables/useDropdownIds.js";
+import { $t as I } from "../../utils/i18n.js";
+const he = ["dir"], ye = {
   key: 0,
   class: "bg-body border-b mb-1 z-10 rounded-t-md shrink-0"
-}, fe = {
+}, ve = {
   key: 1,
   class: "shrink-0"
-}, me = {
+}, ge = {
   key: 0,
   class: "px-2 py-6 text-center text-sm text-muted-foreground"
-}, he = {
+}, ke = {
   key: 0,
   class: "h-px bg-border my-1 mx-1"
-}, ye = ["onMouseenter"], ve = { class: "flex items-center gap-2 flex-1 min-w-0" }, ge = { class: "truncate" }, ke = {
+}, be = ["onMouseenter"], we = { class: "flex items-center gap-2 flex-1 min-w-0" }, pe = { class: "truncate" }, xe = {
   key: 3,
   class: "flex justify-center py-2"
-}, be = {
+}, Se = {
   key: 3,
   class: "shrink-0 border-t mt-1 pt-1"
-}, Ie = /* @__PURE__ */ G({
+}, Ne = /* @__PURE__ */ Y({
   __name: "DropdownMenu",
   props: {
     options: { default: () => [] },
@@ -46,37 +47,43 @@ const ie = ["dir"], ue = {
   },
   emits: ["select", "close", "load-more", "search"],
   setup(r, { emit: j }) {
-    const D = J(() => import("./Dropdown.vue2.js")), t = r, u = j, $ = B(null), f = B(""), { getMenuId: E, getAllRecursiveIds: P } = ae(), _ = I(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
-    let g = null;
-    C(f, (e) => {
-      t.remote && (g && clearTimeout(g), g = setTimeout(() => {
+    const P = Z(() => import("./Dropdown.vue2.js")), t = r, u = j, M = C(null), f = C(""), { getMenuId: _, getAllRecursiveIds: H } = me(), R = v(() => {
+      const e = I("vlite.dropdown.empty");
+      return e !== "vlite.dropdown.empty" ? e : "No options found";
+    }), z = v(() => {
+      const e = I("vlite.dropdown.search");
+      return e !== "vlite.dropdown.search" ? e : "Search...";
+    }), A = v(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
+    let k = null;
+    T(f, (e) => {
+      t.remote && (k && clearTimeout(k), k = setTimeout(() => {
         e && u("search", e);
       }, 100));
     });
-    const H = (e) => {
+    const L = (e) => {
       const s = e.target;
       s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && u("load-more");
-    }, k = (e, s) => {
+    }, b = (e, s) => {
       e.disabled || u("select", e);
     }, {
       focusedIndex: h,
-      isKeyboardMode: b,
-      filteredOptions: R,
+      isKeyboardMode: w,
+      filteredOptions: F,
       // rename
-      handleKeyDown: M,
-      handleMouseMove: O,
-      onMouseEnterItem: w,
-      scrollToIndex: z
-    } = ce({
-      options: Q(t, "options"),
+      handleKeyDown: O,
+      handleMouseMove: B,
+      onMouseEnterItem: p,
+      scrollToIndex: K
+    } = fe({
+      options: ee(t, "options"),
       searchQuery: f,
-      containerRef: $,
+      containerRef: M,
       emit: (e, ...s) => u(e, ...s),
-      handleSelect: (e, s) => k(e)
-    }), y = I(() => t.remote ? f.value ? t.options : t.cachedOptions.length ? t.cachedOptions : t.options : R.value), A = (e) => {
+      handleSelect: (e, s) => b(e)
+    }), y = v(() => t.remote ? f.value ? t.options : t.cachedOptions.length ? t.cachedOptions : t.options : F.value), U = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
-    }, L = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, F = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], K = (e, s) => {
+    }, q = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, G = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], J = (e, s) => {
       if (!s.key) return;
       const l = {
         label: s.label,
@@ -85,7 +92,7 @@ const ie = ["dir"], ue = {
         data: s.data
       };
       u("select", l);
-    }, U = (e, s) => {
+    }, Q = (e, s) => {
       let l = s.value;
       e.key && (l = { [e.key]: l });
       const d = {
@@ -95,142 +102,144 @@ const ie = ["dir"], ue = {
         key: e.key
       };
       u("select", d);
-    }, q = async () => {
-      await se();
+    }, W = async () => {
+      await de();
       let e = -1;
-      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = t.options.findIndex((s) => s.value === t.selected)), e !== -1 && z(e));
+      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = t.options.findIndex((s) => s.value === t.selected)), e !== -1 && K(e));
     };
-    return C(
+    T(
       () => y.value,
       () => {
         h.value = -1;
       }
-    ), W(() => {
-      q(), window.addEventListener("keydown", M);
-    }), X(() => {
-      window.removeEventListener("keydown", M);
-    }), (e, s) => (o(), c("div", {
+    ), te(() => {
+      W(), window.addEventListener("keydown", O);
+    }), le(() => {
+      window.removeEventListener("keydown", O);
+    });
+    const X = (e) => e.labelI18n ? I(e.labelI18n) : e.label;
+    return (e, s) => (o(), c("div", {
       class: "dropdown-menu w-full min-w-[150px] flex flex-col",
       dir: r.direction
     }, [
-      _.value ? (o(), c("div", ue, [
-        x(oe, {
+      A.value ? (o(), c("div", ye, [
+        x(ce, {
           modelValue: f.value,
           "onUpdate:modelValue": s[0] || (s[0] = (l) => f.value = l),
-          placeholder: "Search...",
+          placeholder: z.value,
           icon: "lucide:search",
           size: "sm",
           class: "font-medium!",
           variant: "transparent",
           "show-clear-button": !1
-        }, null, 8, ["modelValue"])
+        }, null, 8, ["modelValue", "placeholder"])
       ])) : i("", !0),
-      e.$slots.header ? (o(), c("div", fe, [
-        v(e.$slots, "header")
+      e.$slots.header ? (o(), c("div", ve, [
+        g(e.$slots, "header")
       ])) : i("", !0),
       t?.options.length > 0 || e.$slots.menu ? (o(), c("div", {
         key: 2,
         ref_key: "containerRef",
-        ref: $,
+        ref: M,
         tabindex: "0",
         role: "menu",
-        class: T([
+        class: D([
           "w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1",
           t.class
         ]),
-        style: Y({ maxHeight: t.maxHeight }),
+        style: se({ maxHeight: t.maxHeight }),
         onMousemove: s[1] || (s[1] = //@ts-ignore
-        (...l) => n(O) && n(O)(...l)),
-        onScroll: H
+        (...l) => n(B) && n(B)(...l)),
+        onScroll: L
       }, [
-        y.value.length === 0 && r.options?.length > 0 && !r.loading ? (o(), c("div", me, " No options found ")) : i("", !0),
-        r.layout === "grouped" ? (o(), m(de, {
+        y.value.length === 0 && r.options?.length > 0 && !r.loading ? (o(), c("div", ge, E(R.value), 1)) : i("", !0),
+        r.layout === "grouped" ? (o(), m(ue, {
           key: 1,
           options: y.value,
           selected: r.selected,
           selectable: r.selectable,
           columns: r.columns,
-          onSelect: k
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), c(N, { key: 2 }, Z(y.value, (l, d) => (o(), c(N, { key: d }, [
-          l.label === "---" ? (o(), c("div", he)) : l.data?.isBoolean ? (o(), m(re, {
+          onSelect: b
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), c(N, { key: 2 }, oe(y.value, (l, d) => (o(), c(N, { key: d }, [
+          l.label === "---" ? (o(), c("div", ke)) : l.data?.isBoolean ? (o(), m(ie, {
             key: 1,
             option: l,
-            value: F(l),
-            focused: n(b) && n(h) === d,
-            onChange: K,
-            onMouseenter: (a) => n(w)(d)
-          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(n(D), {
+            value: G(l),
+            focused: n(w) && n(h) === d,
+            onChange: J,
+            onMouseenter: (a) => n(p)(d)
+          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(n(P), {
             key: 2,
             position: l.position || t.nestedPosition,
             offset: l.offset || t.nestedOffset,
             class: "w-full",
             options: l.children,
-            selected: A(l),
-            menuId: n(E)(l),
+            selected: U(l),
+            menuId: n(_)(l),
             nestedPosition: t.nestedPosition,
             nestedOffset: t.nestedOffset,
             selectable: t.selectable,
-            ignoreClickOutside: n(P)(l.children),
+            ignoreClickOutside: n(H)(l.children),
             direction: r.direction,
-            onOnSelect: (a) => U(l, a)
+            onOnSelect: (a) => Q(l, a)
           }, {
             trigger: V(() => [
-              p("div", {
+              S("div", {
                 "data-dropdown-item": "",
-                class: T(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full", [
-                  n(b) && n(h) === d ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                class: D(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full", [
+                  n(w) && n(h) === d ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : ""
                 ]]),
-                onMouseenter: (a) => n(w)(d)
+                onMouseenter: (a) => n(p)(d)
               }, [
-                p("div", ve, [
-                  l.icon ? (o(), m(S, {
+                S("div", we, [
+                  l.icon ? (o(), m($, {
                     key: 0,
                     icon: l.icon,
                     class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
                   }, null, 8, ["icon"])) : i("", !0),
-                  p("span", ge, ee(l.label), 1)
+                  S("span", pe, E(X(l)), 1)
                 ]),
-                x(S, {
+                x($, {
                   icon: r.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
                 }, null, 8, ["icon"])
-              ], 42, ye)
+              ], 42, be)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), m(ne, {
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), m(ae, {
             key: 3,
             option: l,
             index: d,
-            selected: L(l),
-            focused: n(b) && n(h) === d,
+            selected: q(l),
+            focused: n(w) && n(h) === d,
             selectable: r.selectable,
-            onClick: (a) => k(l),
-            onMouseenter: (a) => n(w)(d)
-          }, te({ _: 2 }, [
+            onClick: (a) => b(l),
+            onMouseenter: (a) => n(p)(d)
+          }, ne({ _: 2 }, [
             e.$slots.item ? {
               name: "default",
               fn: V((a) => [
-                v(e.$slots, "item", le({ ref_for: !0 }, a))
+                g(e.$slots, "item", re({ ref_for: !0 }, a))
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        r.loading ? (o(), c("div", ke, [
-          x(S, {
+        r.loading ? (o(), c("div", xe, [
+          x($, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
           })
         ])) : i("", !0),
-        v(e.$slots, "menu")
+        g(e.$slots, "menu")
       ], 38)) : i("", !0),
-      e.$slots.footer ? (o(), c("div", be, [
-        v(e.$slots, "footer")
+      e.$slots.footer ? (o(), c("div", Se, [
+        g(e.$slots, "footer")
       ])) : i("", !0)
-    ], 8, ie));
+    ], 8, he));
   }
 });
 export {
-  Ie as default
+  Ne as default
 };

package/components/Dropdown/composables/useDropdownNavigation.js

@@ -1,42 +1,43 @@
-import { ref as s, computed as i } from "vue";
-function h(a) {
-  const t = s(-1), l = s(!1), u = i(() => {
-    const e = a.options.value;
-    if (!a.searchQuery.value) return e;
-    const o = a.searchQuery.value.toLowerCase();
-    return e.filter((n) => n.label.toLowerCase().includes(o));
+import { ref as u, computed as i } from "vue";
+import { $t as c } from "../../../utils/i18n.js";
+function b(n) {
+  const t = u(-1), o = u(!1), s = i(() => {
+    const e = n.options.value;
+    if (!n.searchQuery.value) return e;
+    const a = n.searchQuery.value.toLowerCase();
+    return e.filter((l) => (l.labelI18n ? c(l.labelI18n) : l.label).toLowerCase().includes(a));
   }), r = (e) => {
-    if (!a.containerRef.value || e < 0) return;
-    const n = a.containerRef.value.querySelectorAll("[data-dropdown-item]")[e];
-    n && n.scrollIntoView({ block: "nearest" });
+    if (!n.containerRef.value || e < 0) return;
+    const l = n.containerRef.value.querySelectorAll("[data-dropdown-item]")[e];
+    l && l.scrollIntoView({ block: "nearest" });
   };
   return {
     focusedIndex: t,
-    isKeyboardMode: l,
-    filteredOptions: u,
+    isKeyboardMode: o,
+    filteredOptions: s,
     handleKeyDown: (e) => {
-      const o = u.value;
-      if (o.length !== 0)
-        switch (["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && (l.value = !0), e.key) {
+      const a = s.value;
+      if (a.length !== 0)
+        switch (["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && (o.value = !0), e.key) {
           case "ArrowDown":
-            e.preventDefault(), e.stopPropagation(), t.value < o.length - 1 ? t.value++ : t.value = 0, r(t.value);
+            e.preventDefault(), e.stopPropagation(), t.value < a.length - 1 ? t.value++ : t.value = 0, r(t.value);
             break;
           case "ArrowUp":
-            e.preventDefault(), e.stopPropagation(), t.value > 0 ? t.value-- : (t.value, t.value = o.length - 1), r(t.value);
+            e.preventDefault(), e.stopPropagation(), t.value > 0 ? t.value-- : (t.value, t.value = a.length - 1), r(t.value);
             break;
           case "Enter":
-            if (e.preventDefault(), e.stopPropagation(), t.value >= 0 && t.value < o.length) {
-              const n = o[t.value];
-              n.children || a.handleSelect(n, t.value);
+            if (e.preventDefault(), e.stopPropagation(), t.value >= 0 && t.value < a.length) {
+              const l = a[t.value];
+              l.children || n.handleSelect(l, t.value);
             }
             break;
           case "Escape":
-            e.preventDefault(), e.stopPropagation(), a.emit("close");
+            e.preventDefault(), e.stopPropagation(), n.emit("close");
             break;
         }
     },
     handleMouseMove: () => {
-      l.value && (l.value = !1);
+      o.value && (o.value = !1);
     },
     onMouseEnterItem: (e) => {
       t.value = e;
@@ -45,5 +46,5 @@ function h(a) {
   };
 }
 export {
-  h as useDropdownNavigation
+  b as useDropdownNavigation
 };

package/components/Dropdown/composables/useDropdownSelection.js

@@ -1,41 +1,43 @@
-import { computed as s } from "vue";
+import { computed as f } from "vue";
 import { deepMerge as g } from "../../../utils/object.js";
-function S(a, r) {
-  const n = s(() => a.modelValue !== void 0 ? a.modelValue : a.selected), o = (l = [], t) => {
+import { $t as k } from "../../../utils/i18n.js";
+function h(r, n) {
+  const u = f(() => r.modelValue !== void 0 ? r.modelValue : r.selected), o = (l = [], t) => {
     for (const e of l) {
-      if (e.value === t) return e.label;
+      const a = e.labelI18n ? k(e.labelI18n) : e.label;
+      if (e.value === t) return a;
       if (e.key && typeof t == "object" && t !== null && e.key in t) {
         if (e.children) {
           const c = o(e.children, t[e.key]);
-          if (c) return `${e.label} / ${c}`;
+          if (c) return `${a} / ${c}`;
         }
-        return e.value === t[e.key], e.label;
+        return e.value === t[e.key], a;
       }
     }
     return "";
-  }, i = s(() => !a.showSelectedLabel || !a.selectable || !a.options?.length ? "" : o(a.options, n.value));
+  }, i = f(() => !r.showSelectedLabel || !r.selectable || !r.options?.length ? "" : o(r.options, u.value));
   return {
-    currentValue: n,
+    currentValue: u,
     selectedLabel: i,
     selectOption: (l) => {
       if (typeof l != "string" && l?.disabled) return;
-      const t = n.value;
+      const t = u.value;
       let e = l?.value ?? l?.label;
-      const c = l.data;
+      const a = l.data;
       if (l.key && (typeof e == "object" && e !== null && l.key in e || (e = { [l.key]: e })), t && typeof t == "object" && !Array.isArray(t) && l.key) {
-        const u = l.key, b = l.value ?? l.label, y = t[u] === b;
-        if (a.toggleSelection && y) {
+        const c = l.key, y = l.value ?? l.label, b = t[c] === y;
+        if (r.toggleSelection && b) {
           const d = { ...t };
-          delete d[u], r("update:modelValue", d), r("onSelect", { value: d, data: c });
+          delete d[c], n("update:modelValue", d), n("onSelect", { value: d, data: a });
           return;
         }
-        const f = g(t, e);
-        r("update:modelValue", f), r("onSelect", { value: f, data: c });
+        const s = g(t, e);
+        n("update:modelValue", s), n("onSelect", { value: s, data: a });
       } else
-        a.toggleSelection && t === (l.value ?? l.label) ? (r("update:modelValue", void 0), r("onSelect", { value: void 0, data: c })) : (r("update:modelValue", e), r("onSelect", { value: e, data: c }));
+        r.toggleSelection && t === (l.value ?? l.label) ? (n("update:modelValue", void 0), n("onSelect", { value: void 0, data: a })) : (n("update:modelValue", e), n("onSelect", { value: e, data: a }));
     }
   };
 }
 export {
-  S as useDropdownSelection
+  h as useDropdownSelection
 };

package/components/Empty/Empty.vue.d.ts

@@ -1,6 +1,8 @@
 interface Props {
     title?: string;
+    titleI18n?: string;
     description?: string;
+    descriptionI18n?: string;
     icon?: string;
 }
 declare function __VLS_template(): {
@@ -14,8 +16,6 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    title: string;
-    description: string;
     icon: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/components/Empty/Empty.vue.js

@@ -1,33 +1,47 @@
-import { defineComponent as r, openBlock as i, createElementBlock as s, createElementVNode as e, createVNode as d, toDisplayString as l, renderSlot as n } from "vue";
-import c from "../Icon.vue.js";
-const a = { class: "flex flex-col items-center justify-center py-28 gap-5 rounded-3xl border border-gray-150 bg-muted/50 w-full mt-4" }, f = { class: "w-17 h-17 rounded-full bg-gray-200/60 border border-gray-250 shadow-inner flex items-center justify-center" }, u = { class: "text-center space-y-1" }, m = { class: "text-fs-5 font-semibold text-foreground tracking-tight" }, h = ["innerHTML"], _ = /* @__PURE__ */ r({
+import { defineComponent as d, computed as o, openBlock as a, createElementBlock as p, createElementVNode as i, createVNode as u, toDisplayString as f, renderSlot as s } from "vue";
+import m from "../Icon.vue.js";
+import { $t as n } from "../../utils/i18n.js";
+const h = { class: "flex flex-col items-center justify-center py-28 gap-5 rounded-3xl border border-gray-150 bg-muted/50 w-full mt-4" }, y = { class: "w-17 h-17 rounded-full bg-gray-200/60 border border-gray-250 shadow-inner flex items-center justify-center" }, g = { class: "text-center space-y-1" }, _ = { class: "text-fs-5 font-semibold text-foreground tracking-tight" }, x = ["innerHTML"], k = /* @__PURE__ */ d({
   __name: "Empty",
   props: {
-    title: { default: "No data found" },
-    description: { default: "There is nothing to display here right now." },
+    title: {},
+    titleI18n: {},
+    description: {},
+    descriptionI18n: {},
     icon: { default: "lucide:inbox" }
   },
-  setup(t) {
-    return (o, g) => (i(), s("div", a, [
-      e("div", f, [
-        d(c, {
-          icon: t.icon,
+  setup(r) {
+    const t = r, l = o(() => {
+      if (t.titleI18n) return n(t.titleI18n);
+      if (t.title) return t.title;
+      const e = n("vlite.empty.title");
+      return e !== "vlite.empty.title" ? e : "No data found";
+    }), c = o(() => {
+      if (t.descriptionI18n) return n(t.descriptionI18n);
+      if (t.description) return t.description;
+      const e = n("vlite.empty.description");
+      return e !== "vlite.empty.description" ? e : "There is nothing to display here right now.";
+    });
+    return (e, v) => (a(), p("div", h, [
+      i("div", y, [
+        u(m, {
+          icon: r.icon,
           class: "w-7 h-7 text-muted-foreground",
           "stroke-width": "1.2"
         }, null, 8, ["icon"])
       ]),
-      e("div", u, [
-        e("h3", m, l(t.title), 1),
-        e("p", {
+      i("div", g, [
+        i("h3", _, f(l.value), 1),
+        i("p", {
           class: "text-sm text-gray-700 font-light leading-relaxed",
-          innerHTML: t.description
-        }, null, 8, h)
+          innerHTML: c.value
+        }, null, 8, x)
       ]),
-      n(o.$slots, "action"),
-      n(o.$slots, "default")
+      s(e.$slots, "action"),
+      s(e.$slots, "default")
     ]));
   }
 });
 export {
-  _ as default
+  k as default
 };

package/components/FilePicker/FilePicker.vue.d.ts

@@ -17,6 +17,8 @@ interface Props {
     maxFiles?: number;
     variant?: 'dropzone' | 'input';
     placeholder?: string;
+    placeholderI18n?: string;
+    textI18n?: string;
     size?: InputSize;
     rounded?: InputRounded;
 }
@@ -49,8 +51,8 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     size: InputSize;
     variant: "dropzone" | "input";
     modelValue: FilePickerValue | FilePickerValue[] | null;
-    loading: boolean;
     rounded: InputRounded;
+    loading: boolean;
     multiSelect: boolean;
     fileTypes: string[];
     returnFormat: "file" | "base64";