vlite3 1.1.6 → 1.1.8

package/components/Dropdown/DropdownMenu.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as ee, ref as C, computed as v, watch as j, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as i, createVNode as T, createCommentVNode as d, renderSlot as b, unref as r, normalizeStyle as se, normalizeClass as E, toDisplayString as N, createBlock as m, Fragment as P, renderList as oe, withCtx as V, createElementVNode as S, createSlots as ne, mergeProps as re, nextTick as ae } from "vue";
-import O from "../Icon.vue.js";
+import { defineComponent as ee, ref as j, computed as y, watch as E, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as i, createVNode as O, createCommentVNode as u, renderSlot as b, unref as r, normalizeStyle as se, normalizeClass as T, createElementVNode as k, toDisplayString as N, createBlock as h, Fragment as P, renderList as oe, withCtx as V, createSlots as ne, mergeProps as re, nextTick as ae } from "vue";
+import w from "../Icon.vue.js";
 import ie from "../Input.vue.js";
 /* empty css            */
 import ce from "./DropdownItem.vue.js";
@@ -7,7 +7,7 @@ import de 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 _ } from "../../utils/i18n.js";
+import { $t as $ } from "../../utils/i18n.js";
 import he from "./Dropdown.vue.js";
 const ve = ["dir"], ye = {
   key: 0,
@@ -17,14 +17,14 @@ const ve = ["dir"], ye = {
   class: "shrink-0"
 }, be = ["tabindex"], ke = {
   key: 0,
-  class: "px-2 py-6 text-center text-sm text-muted-foreground"
+  class: "flex flex-col items-center justify-center px-4 py-8 text-center text-sm text-muted-foreground whitespace-pre-line break-words"
 }, we = {
   key: 0,
   class: "h-px bg-border my-1 mx-1"
-}, pe = ["onMouseenter"], xe = { class: "flex items-center flex-1 min-w-0" }, Se = { class: "truncate" }, Oe = {
+}, pe = ["onMouseenter"], xe = { class: "flex items-center flex-1 min-w-0" }, Me = { class: "truncate" }, Se = {
   key: 3,
   class: "flex justify-center py-2"
-}, _e = {
+}, Oe = {
   key: 3,
   class: "shrink-0"
 }, De = /* @__PURE__ */ ee({
@@ -46,43 +46,48 @@ const ve = ["dir"], ye = {
     searchable: { type: Boolean, default: !0 },
     remote: { type: Boolean, default: !1 },
     debounceTime: { default: 300 },
-    direction: { default: "ltr" }
+    direction: { default: "ltr" },
+    emptyMessage: { default: "No options found" },
+    searchEmptyMessage: {}
   },
   emits: ["select", "close", "load-more", "search"],
   setup(a, { emit: D }) {
-    const t = a, f = D, $ = C(null), h = C(""), { getMenuId: z, getAllRecursiveIds: H } = me(), L = v(() => {
-      const e = _("vlite.dropdown.empty");
-      return e !== "vlite.dropdown.empty" ? e : "No options found";
-    }), R = v(() => {
-      const e = _("vlite.dropdown.search");
+    const t = a, f = D, _ = j(null), d = j(""), { getMenuId: z, getAllRecursiveIds: H } = me(), L = y(() => {
+      if (d.value && d.value.trim() !== "")
+        return t.searchEmptyMessage ? t.searchEmptyMessage : `No results found for
+"${d.value}"`;
+      const e = $("vlite.dropdown.empty");
+      return e !== "vlite.dropdown.empty" ? e : t.emptyMessage;
+    }), R = y(() => {
+      const e = $("vlite.dropdown.search");
       return e !== "vlite.dropdown.search" ? e : "Search...";
-    }), u = v(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), I = v(() => t.remote ? t.searchable : t.searchable && (u.value.length || 0) > 9);
-    let k = null;
-    j(h, (e) => {
-      t.remote && (k && clearTimeout(k), k = setTimeout(() => {
+    }), m = y(() => t.options ? t.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), I = y(() => t.searchable && (m.value.length || 0) > 5);
+    let p = null;
+    E(d, (e) => {
+      t.remote && (p && clearTimeout(p), p = setTimeout(() => {
         e !== void 0 && f("search", e);
       }, t.debounceTime));
     });
     const A = (e) => {
       const s = e.target;
       s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && f("load-more");
-    }, w = (e, s) => {
+    }, x = (e, s) => {
       e.disabled || f("select", e);
     }, {
-      focusedIndex: y,
-      isKeyboardMode: p,
+      focusedIndex: g,
+      isKeyboardMode: M,
       filteredOptions: F,
-      handleKeyDown: M,
-      handleMouseMove: B,
-      onMouseEnterItem: x,
+      handleKeyDown: B,
+      handleMouseMove: C,
+      onMouseEnterItem: S,
       scrollToIndex: K
     } = fe({
-      options: u,
-      searchQuery: h,
-      containerRef: $,
+      options: m,
+      searchQuery: d,
+      containerRef: _,
       emit: (e, ...s) => f(e, ...s),
-      handleSelect: (e, s) => w(e)
-    }), g = v(() => t.remote ? h.value ? u.value : t.cachedOptions.length ? t.cachedOptions : u.value : F.value), U = (e) => {
+      handleSelect: (e, s) => x(e)
+    }), v = y(() => t.remote ? d.value ? m.value : t.cachedOptions.length ? t.cachedOptions : m.value : F.value), U = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
     }, 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) => {
@@ -111,27 +116,27 @@ const ve = ["dir"], ye = {
     }, W = async () => {
       await ae();
       let e = -1;
-      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = u.value.findIndex((s) => s.value === t.selected)), e !== -1 && K(e));
+      t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = m.value.findIndex((s) => s.value === t.selected)), e !== -1 && K(e));
     };
-    j(
-      () => g.value,
+    E(
+      () => v.value,
       () => {
-        y.value = -1;
+        g.value = -1;
       }
     ), te(() => {
-      W(), window.addEventListener("keydown", M);
+      W(), window.addEventListener("keydown", B);
     }), le(() => {
-      window.removeEventListener("keydown", M);
+      window.removeEventListener("keydown", B);
     });
-    const X = (e) => e.labelI18n ? _(e.labelI18n) : e.label, Y = (e) => e.showChevron !== !1;
+    const X = (e) => e.labelI18n ? $(e.labelI18n) : e.label, Y = (e) => e.showChevron !== !1;
     return (e, s) => (o(), i("div", {
       class: "dropdown-menu w-full min-w-[150px] flex flex-col",
       dir: a.direction
     }, [
       I.value ? (o(), i("div", ye, [
-        T(ie, {
-          modelValue: h.value,
-          "onUpdate:modelValue": s[0] || (s[0] = (l) => h.value = l),
+        O(ie, {
+          modelValue: d.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (l) => d.value = l),
           placeholder: R.value,
           icon: "lucide:search",
           size: "sm",
@@ -143,42 +148,48 @@ const ve = ["dir"], ye = {
           "show-clear-button": !1,
           "data-testid": "dropdown-search-input"
         }, null, 8, ["modelValue", "placeholder"])
-      ])) : d("", !0),
+      ])) : u("", !0),
       e.$slots.header ? (o(), i("div", ge, [
         b(e.$slots, "header", {}, void 0, !0)
-      ])) : d("", !0),
-      u.value.length > 0 || e.$slots.menu ? (o(), i("div", {
+      ])) : u("", !0),
+      m.value.length > 0 || e.$slots.menu || v.value.length === 0 ? (o(), i("div", {
         key: 2,
         ref_key: "containerRef",
-        ref: $,
+        ref: _,
         tabindex: I.value ? -1 : 0,
         role: "menu",
-        class: E([
+        class: T([
           "w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1 scrollbar-thin",
           t.class
         ]),
         style: se({ maxHeight: t.maxHeight }),
         onMousemove: s[1] || (s[1] = //@ts-ignore
-        (...l) => r(B) && r(B)(...l)),
+        (...l) => r(C) && r(C)(...l)),
         onScroll: A
       }, [
-        g.value.length === 0 && u.value.length > 0 && !a.loading ? (o(), i("div", ke, N(L.value), 1)) : d("", !0),
-        a.layout === "grouped" ? (o(), m(ue, {
+        v.value.length === 0 && !a.loading ? (o(), i("div", ke, [
+          O(w, {
+            icon: "lucide:inbox",
+            class: "w-8 h-8 mb-2 opacity-70"
+          }),
+          k("span", null, N(L.value), 1)
+        ])) : u("", !0),
+        a.layout === "grouped" ? (o(), h(ue, {
           key: 1,
-          options: g.value,
+          options: v.value,
           selected: a.selected,
           selectable: a.selectable,
           columns: a.columns,
-          onSelect: w
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), i(P, { key: 2 }, oe(g.value, (l, n) => (o(), i(P, { key: n }, [
-          l.label === "---" ? (o(), i("div", we)) : l.data?.isBoolean ? (o(), m(de, {
+          onSelect: x
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), i(P, { key: 2 }, oe(v.value, (l, n) => (o(), i(P, { key: n }, [
+          l.label === "---" ? (o(), i("div", we)) : l.data?.isBoolean ? (o(), h(de, {
             key: 1,
             option: l,
             value: G(l),
-            focused: r(p) && r(y) === n,
+            focused: r(M) && r(g) === n,
             onChange: J,
-            onMouseenter: (c) => r(x)(n)
-          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(he, {
+            onMouseenter: (c) => r(S)(n)
+          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), h(he, {
             key: 2,
             "is-nested": !0,
             position: l.position || t.nestedPosition,
@@ -195,42 +206,42 @@ const ve = ["dir"], ye = {
             onOnSelect: (c) => Q(l, c)
           }, {
             trigger: V(() => [
-              S("div", {
+              k("div", {
                 tabindex: 0,
                 "data-dropdown-item": "",
-                class: E(["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 focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1", [
-                  r(p) && r(y) === n ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                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 focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-1", [
+                  r(M) && r(g) === n ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : "",
                   l.triggerClass || l.class || ""
                 ]]),
-                onMouseenter: (c) => r(x)(n)
+                onMouseenter: (c) => r(S)(n)
               }, [
-                S("div", xe, [
-                  l.icon || l.emoji ? (o(), m(O, {
+                k("div", xe, [
+                  l.icon || l.emoji ? (o(), h(w, {
                     key: 0,
                     icon: l.icon,
                     emoji: l.emoji,
                     class: "mr-2 h-4 w-4 shrink-0 mt-0.5"
-                  }, null, 8, ["icon", "emoji"])) : d("", !0),
-                  S("span", Se, N(X(l)), 1)
+                  }, null, 8, ["icon", "emoji"])) : u("", !0),
+                  k("span", Me, N(X(l)), 1)
                 ]),
-                Y(l) ? (o(), m(O, {
+                Y(l) ? (o(), h(w, {
                   key: 0,
                   icon: a.direction === "rtl" ? "lucide:chevron-left" : "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
-                }, null, 8, ["icon"])) : d("", !0)
+                }, null, 8, ["icon"])) : u("", !0)
               ], 42, pe)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), m(ce, {
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), h(ce, {
             key: 3,
             option: l,
             index: n,
             selected: q(l),
-            focused: r(p) && r(y) === n,
+            focused: r(M) && r(g) === n,
             selectable: a.selectable,
-            onClick: (c) => w(l),
-            onMouseenter: (c) => r(x)(n)
+            onClick: (c) => x(l),
+            onMouseenter: (c) => r(S)(n)
           }, ne({ _: 2 }, [
             e.$slots.item ? {
               name: "default",
@@ -241,17 +252,17 @@ const ve = ["dir"], ye = {
             } : void 0
           ]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        a.loading ? (o(), i("div", Oe, [
-          T(O, {
+        a.loading ? (o(), i("div", Se, [
+          O(w, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
           })
-        ])) : d("", !0),
+        ])) : u("", !0),
         b(e.$slots, "menu", {}, void 0, !0)
-      ], 46, be)) : d("", !0),
-      e.$slots.footer ? (o(), i("div", _e, [
+      ], 46, be)) : u("", !0),
+      e.$slots.footer ? (o(), i("div", Oe, [
         b(e.$slots, "footer", {}, void 0, !0)
-      ])) : d("", !0)
+      ])) : u("", !0)
     ], 8, ve));
   }
 });

package/components/Dropdown/DropdownTrigger.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as a, openBlock as l, createBlock as d, mergeProps as n } from "vue";
-import o from "../Button.vue.js";
+import { defineComponent as a, openBlock as l, createBlock as d, mergeProps as i } from "vue";
+import n from "../Button.vue.js";
 const s = /* @__PURE__ */ a({
   __name: "DropdownTrigger",
   props: {
@@ -14,7 +14,7 @@ const s = /* @__PURE__ */ a({
     triggerProps: {}
   },
   setup(e) {
-    return (t, i) => (l(), d(o, n({
+    return (t, o) => (l(), d(n, i({
       text: e.selectedLabel || e.placeholder,
       iconRight: e.disabled || e.readonly ? void 0 : "iconamoon:arrow-down-2",
       variant: "outline",
@@ -22,7 +22,11 @@ const s = /* @__PURE__ */ a({
       dir: e.direction
     }, e.triggerProps, {
       icon: e.selectedIcon || e.triggerProps?.icon,
-      class: ["w-full justify-between! font-normal px-2.5!", [e.className, e.readonly && !e.disabled ? "pointer-events-none" : ""]],
+      class: ["w-full font-normal px-2.5!", [
+        e.className,
+        e.readonly && !e.disabled ? "pointer-events-none justify-start!" : "",
+        e.disabled || e.readonly ? "justify-start!" : "justify-between!"
+      ]],
       "icon-right-class": "ml-auto!",
       "data-testid": t.$attrs["data-testid"] || "dropdown-trigger"
     }), null, 16, ["text", "iconRight", "disabled", "dir", "icon", "class", "data-testid"]));

package/components/MultiSelect/MultiSelect.vue.d.ts

@@ -4,6 +4,8 @@ interface Props {
     options?: (IDropdownOption | string | number)[];
     placeholder?: string;
     placeholderI18n?: string;
+    emptyMessage?: string;
+    searchEmptyMessage?: string;
     disabled?: boolean;
     readonly?: boolean;
     searchable?: boolean;
@@ -20,7 +22,23 @@ interface Props {
     wrap?: boolean;
     rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        menu?(_: {}): any;
+        item?(_: {
+            option: IDropdownOption;
+            index: number;
+            selected: boolean;
+        }): any;
+        header?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     search: (query: string) => any;
     change: (value: any[]) => any;
     "update:modelValue": (value: any[]) => any;
@@ -44,8 +62,15 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     searchable: boolean;
     remote: boolean;
     debounceTime: number;
+    emptyMessage: string;
     maxVisible: number;
     showControls: boolean;
     wrap: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};