vlite3 0.4.8 → 0.5.2

package/components/MultiSelect/MultiSelect.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as j, ref as E, computed as i, openBlock as s, createBlock as m, unref as v, withCtx as f, createVNode as h, createElementVNode as d, normalizeClass as w, createElementBlock as p, toDisplayString as b, Fragment as k, renderList as L, withModifiers as C, createCommentVNode as g, createTextVNode as A } from "vue";
-import x from "../Icon.vue.js";
-import D from "../Dropdown/Dropdown.vue.js";
-import F from "../Dropdown/DropdownMenu.vue.js";
-import { $t as y } from "../../utils/i18n.js";
-import $ from "../Badge.vue.js";
-const P = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }, T = {
+import { defineComponent as P, ref as g, computed as r, watch as U, openBlock as s, createBlock as m, unref as y, withCtx as v, createVNode as x, createElementVNode as d, normalizeClass as M, createElementBlock as h, toDisplayString as w, Fragment as I, renderList as q, withModifiers as T, createCommentVNode as V, createTextVNode as G } from "vue";
+import S from "../Icon.vue.js";
+import J from "../Dropdown/Dropdown.vue.js";
+import K from "../Dropdown/DropdownMenu.vue.js";
+import { $t as k } from "../../utils/i18n.js";
+import z from "../Badge.vue.js";
+const Q = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }, R = {
   key: 0,
   class: "text-muted-foreground pl-1"
-}, U = { class: "truncate" }, q = ["onClick"], G = { class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground" }, Y = /* @__PURE__ */ j({
+}, W = { class: "truncate" }, X = ["onClick"], Y = { class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground" }, ne = /* @__PURE__ */ P({
   __name: "MultiSelect",
   props: {
     modelValue: { default: () => [] },
@@ -22,113 +22,150 @@ const P = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }
     loading: { type: Boolean, default: !1 },
     hasMore: { type: Boolean, default: !1 },
     remote: { type: Boolean, default: !1 },
+    debounceTime: { default: 300 },
+    fetchSelected: {},
     layout: { default: "default" }
   },
   emits: ["update:modelValue", "change", "load-more", "search"],
-  setup(o, { emit: S }) {
-    const t = o, r = S, u = E(!1), B = i(() => {
-      if (t.placeholderI18n) return y(t.placeholderI18n);
-      if (t.placeholder) return t.placeholder;
-      const a = y("vlite.multiSelect.placeholder");
-      return a !== "vlite.multiSelect.placeholder" ? a : "Select items...";
-    }), c = i(() => t.options.filter((a) => {
-      const e = a.value ?? a.label;
-      return t.modelValue.includes(e);
-    })), O = i(() => c.value.slice(0, t.maxVisible)), V = i(() => c.value.length - t.maxVisible), M = (a) => {
-      const e = a.value ?? a.label, l = [...t.modelValue], n = l.indexOf(e);
-      n === -1 ? l.push(e) : l.splice(n, 1), r("update:modelValue", l), r("change", l);
-    }, I = (a) => {
-      const e = t.modelValue.filter((l) => l !== a);
-      r("update:modelValue", e), r("change", e);
-    }, N = () => {
-      r("update:modelValue", []), r("change", []);
-    }, z = i(() => [
+  setup(o, { emit: E }) {
+    const a = o, i = E, c = g(!1), N = r(() => {
+      if (a.placeholderI18n) return k(a.placeholderI18n);
+      if (a.placeholder) return a.placeholder;
+      const e = k("vlite.multiSelect.placeholder");
+      return e !== "vlite.multiSelect.placeholder" ? e : "Select items...";
+    }), p = r(() => a.options ? a.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), u = g(/* @__PURE__ */ new Map()), b = g(!1), j = async (e) => {
+      if (!a.fetchSelected || !e?.length) return;
+      const t = e.filter((l) => {
+        const n = u.value.has(l), C = p.value.some(($) => ($.value ?? $.label) === l);
+        return !n && !C;
+      });
+      if (t.length) {
+        b.value = !0;
+        try {
+          (await a.fetchSelected(t)).forEach((n) => {
+            u.value.set(n.value ?? n.label, n);
+          });
+        } catch (l) {
+          console.error("[MultiSelect] Hydration failed:", l);
+        } finally {
+          b.value = !1;
+        }
+      }
+    };
+    U(
+      () => a.modelValue,
+      (e) => {
+        j(e || []);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const O = r(() => {
+      const e = [...p.value], t = new Set(e.map((l) => l.value ?? l.label));
+      return u.value.forEach((l, n) => {
+        t.has(n) || (e.unshift(l), t.add(n));
+      }), e;
+    }), f = r(() => O.value.filter((e) => {
+      const t = e.value ?? e.label;
+      return a.modelValue.includes(t);
+    })), H = r(() => f.value.slice(0, a.maxVisible)), B = r(() => f.value.length - a.maxVisible), L = (e) => {
+      const t = e.value ?? e.label;
+      u.value.has(t) || u.value.set(t, e);
+      const l = [...a.modelValue], n = l.indexOf(t);
+      n === -1 ? l.push(t) : l.splice(n, 1), i("update:modelValue", l), i("change", l);
+    }, A = (e) => {
+      const t = a.modelValue.filter((l) => l !== e);
+      i("update:modelValue", t), i("change", t);
+    }, D = () => {
+      i("update:modelValue", []), i("change", []);
+    }, F = r(() => [
       "flex items-center justify-between w-full px-3 py-1.5 rounded-md border text-sm transition-colors cursor-pointer",
-      t.disabled ? "opacity-50 cursor-not-allowed bg-muted" : "bg-background hover:bg-gray-50/70",
-      t.variant === "outline" ? "border-input" : "border-transparent bg-muted",
-      u.value ? "border-primary/20" : ""
+      a.disabled ? "opacity-50 cursor-not-allowed bg-muted" : a.variant === "floating" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70",
+      a.variant === "outline" || a.variant === "floating" ? "border-input" : "border-transparent bg-muted",
+      c.value ? "border-primary/20" : ""
     ].join(" "));
-    return i(() => t.size === "sm" ? "xs" : "sm"), (a, e) => (s(), m(v(D), {
-      isOpen: u.value,
-      "onUpdate:isOpen": e[3] || (e[3] = (l) => u.value = l),
+    return r(() => a.size === "sm" ? "xs" : "sm"), (e, t) => (s(), m(y(J), {
+      isOpen: c.value,
+      "onUpdate:isOpen": t[3] || (t[3] = (l) => c.value = l),
       "close-on-select": !1,
       selectable: !0,
       disabled: o.disabled
     }, {
-      trigger: f(({ isOpen: l }) => [
+      trigger: v(({ isOpen: l }) => [
         d("div", {
-          class: w(z.value)
+          class: M(F.value)
         }, [
-          d("div", P, [
-            c.value.length === 0 ? (s(), p("span", T, b(B.value), 1)) : (s(), p(k, { key: 1 }, [
-              (s(!0), p(k, null, L(O.value, (n) => (s(), m($, {
+          d("div", Q, [
+            f.value.length === 0 ? (s(), h("span", R, w(N.value), 1)) : (s(), h(I, { key: 1 }, [
+              (s(!0), h(I, null, q(H.value, (n) => (s(), m(z, {
                 key: n.value,
                 variant: "secondary",
                 class: "gap-1 pr-1 truncate max-w-[150px]"
               }, {
-                default: f(() => [
-                  d("span", U, b(n.labelI18n ? v(y)(n.labelI18n) : n.label), 1),
-                  o.disabled ? g("", !0) : (s(), p("button", {
+                default: v(() => [
+                  d("span", W, w(n.labelI18n ? y(k)(n.labelI18n) : n.label), 1),
+                  o.disabled ? V("", !0) : (s(), h("button", {
                     key: 0,
                     type: "button",
-                    onClick: C((H) => I(n.value), ["stop"]),
+                    onClick: T((C) => A(n.value), ["stop"]),
                     class: "hover:bg-destructive/10 hover:text-destructive rounded-full p-0.5 transition-colors"
                   }, [
-                    h(x, {
+                    x(S, {
                       icon: "lucide:x",
                       class: "w-3 h-3"
                     })
-                  ], 8, q))
+                  ], 8, X))
                 ]),
                 _: 2
               }, 1024))), 128)),
-              V.value > 0 ? (s(), m($, {
+              B.value > 0 ? (s(), m(z, {
                 key: 0,
                 variant: "secondary",
                 class: "font-normal text-muted-foreground"
               }, {
-                default: f(() => [
-                  A(" +" + b(V.value), 1)
+                default: v(() => [
+                  G(" +" + w(B.value), 1)
                 ]),
                 _: 1
-              })) : g("", !0)
+              })) : V("", !0)
             ], 64))
           ]),
-          d("div", G, [
-            c.value.length > 0 && !o.disabled ? (s(), m(x, {
+          d("div", Y, [
+            f.value.length > 0 && !o.disabled ? (s(), m(S, {
               key: 0,
               icon: "lucide:x",
               class: "w-4 h-4 hover:text-foreground transition-colors",
-              onClick: C(N, ["stop"])
-            })) : g("", !0),
-            e[4] || (e[4] = d("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
-            h(x, {
+              onClick: T(D, ["stop"])
+            })) : V("", !0),
+            t[4] || (t[4] = d("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
+            x(S, {
               icon: "lucide:chevron-down",
-              class: w(["w-4 h-4 transition-transform duration-200", { "rotate-180": l }])
+              class: M(["w-4 h-4 transition-transform duration-200", { "rotate-180": l }])
             }, null, 8, ["class"])
           ])
         ], 2)
       ]),
-      default: f(() => [
-        h(v(F), {
-          options: o.options,
+      default: v(() => [
+        x(y(K), {
+          options: p.value,
+          cachedOptions: O.value,
           selected: o.modelValue,
           class: "min-w-[300px]",
-          loading: o.loading,
+          loading: o.loading || b.value,
           hasMore: o.hasMore,
           searchable: o.searchable,
           remote: o.remote,
+          debounceTime: o.debounceTime,
           layout: o.layout,
-          onSelect: M,
-          onClose: e[0] || (e[0] = (l) => u.value = !1),
-          onLoadMore: e[1] || (e[1] = (l) => a.$emit("load-more")),
-          onSearch: e[2] || (e[2] = (l) => a.$emit("search", l))
-        }, null, 8, ["options", "selected", "loading", "hasMore", "searchable", "remote", "layout"])
+          onSelect: L,
+          onClose: t[0] || (t[0] = (l) => c.value = !1),
+          onLoadMore: t[1] || (t[1] = (l) => e.$emit("load-more")),
+          onSearch: t[2] || (t[2] = (l) => e.$emit("search", l))
+        }, null, 8, ["options", "cachedOptions", "selected", "loading", "hasMore", "searchable", "remote", "debounceTime", "layout"])
       ]),
       _: 1
     }, 8, ["isOpen", "disabled"]));
   }
 });
 export {
-  Y as default
+  ne as default
 };

package/components/Navbar/Navbar.vue.d.ts

@@ -2,33 +2,64 @@ import { NavbarProps } from '../../types/navbar.type';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        header?(_: any): any;
         'mobile-trigger'?(_: {
-            isOpen: boolean;
+            isOpen: any;
             toggle: () => boolean;
         }): any;
         'mobile-trigger'?(_: {
-            isOpen: boolean;
+            isOpen: any;
             toggle: () => boolean;
         }): any;
+        'mobile-trigger'?(_: {
+            isOpen: any;
+            toggle: () => boolean;
+        }): any;
+        'mobile-trigger'?(_: {
+            isOpen: any;
+            toggle: () => boolean;
+        }): any;
+        logo?(_: {}): any;
+        logo?(_: {}): any;
+        logo?(_: {}): any;
         logo?(_: {}): any;
         logo?(_: {}): any;
         logo?(_: {}): any;
         logo?(_: {}): any;
+        logo?(_: {}): any;
+        left?(_: {}): any;
+        left?(_: {}): any;
+        left?(_: {}): any;
+        left?(_: {}): any;
         left?(_: {}): any;
         left?(_: {}): any;
         left?(_: {}): any;
         left?(_: {}): any;
         left?(_: {}): any;
+        left?(_: {}): any;
+        center?(_: {}): any;
+        center?(_: {}): any;
+        center?(_: {}): any;
         center?(_: {}): any;
         center?(_: {}): any;
         center?(_: {}): any;
         center?(_: {}): any;
         center?(_: {}): any;
+        center?(_: {}): any;
+        center?(_: {}): any;
+        right?(_: {}): any;
+        right?(_: {}): any;
+        right?(_: {}): any;
         right?(_: {}): any;
         right?(_: {}): any;
         right?(_: {}): any;
         default?(_: {}): any;
         default?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+        main?(_: {}): any;
+        'mobile-menu'?(_: {}): any;
+        'mobile-menu'?(_: {}): any;
         'mobile-menu'?(_: {}): any;
         'mobile-menu'?(_: {}): any;
     };
@@ -36,7 +67,7 @@ declare function __VLS_template(): {
         mobileTriggerRef: HTMLButtonElement;
         mobileMenuRef: HTMLDivElement;
     };
-    rootEl: HTMLElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<NavbarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -44,27 +75,35 @@ declare const __VLS_component: import('vue').DefineComponent<NavbarProps, {}, {}
 }, string, import('vue').PublicProps, Readonly<NavbarProps> & Readonly<{
     "onToggle-mobile"?: () => any;
 }>, {
+    floating: boolean;
+    variant: import('../../types/navbar.type').NavbarVariant;
+    compact: boolean;
     class: string;
-    width: string;
     height: string;
-    variant: import('../../types/navbar.type').NavbarVariant;
-    contentClass: string;
     border: boolean;
     position: import('../../types/navbar.type').NavbarPosition;
-    compact: boolean;
+    contentClass: string;
+    breadcrumb: boolean;
     centerPosition: import('../../types/navbar.type').NavbarCenterPosition;
     glass: boolean;
-    floating: boolean;
+    renderNestedTabs: boolean;
     mobileBreakpoint: "sm" | "md" | "lg" | "xl";
     logoClass: string;
     menuClass: string;
     rightClass: string;
     mobileTriggerClass: string;
     mobileMenuVariant: "sidepanel" | "dropdown";
+    sidebarToggle: boolean;
+    breadcrumbPosition: "header" | "main";
+    breadcrumbVariant: import('../Breadcrumb').BreadcrumbVariant;
+    breadcrumbSeparator: import('../Breadcrumb').BreadcrumbSeparator;
+    breadcrumbSize: import('../Breadcrumb').BreadcrumbSize;
+    breadcrumbHomeIcon: string;
+    breadcrumbClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     mobileTriggerRef: HTMLButtonElement;
     mobileMenuRef: HTMLDivElement;
-}, HTMLElement>;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {