@lumx/vue 4.25.1-alpha.0 → 4.25.1-alpha.1

package/index.js

@@ -1,7 +1,7 @@
 import { ColorVariant as Qd, Size as ct, VISUALLY_HIDDEN as ef, DIALOG_TRANSITION_DURATION as yc, AspectRatio as Nc, Typography as tf, IS_BROWSER as cs, ColorPalette as nf } from "@lumx/core/js/constants";
 export * from "@lumx/core/js/constants";
 export * from "@lumx/core/js/types";
-import { createVNode as m, mergeProps as A, Fragment as oe, isVNode as U, useAttrs as F, computed as P, toValue as je, getCurrentScope as Ac, onScopeDispose as Ar, toRef as ee, readonly as af, customRef as of, ref as B, shallowRef as He, watch as J, getCurrentInstance as Oc, onMounted as Je, inject as Ne, defineComponent as I, toRefs as rf, reactive as Cc, provide as Me, watchEffect as Ue, onUnmounted as we, isRef as ft, watchPostEffect as sf, onBeforeUnmount as on, Comment as Or, unref as xt, useSlots as $e, Text as Cr, useTemplateRef as lf, toRaw as Qe, nextTick as Pc, shallowReadonly as st, h as us, cloneVNode as cf, onWatcherCleanup as uf, createTextVNode as Sc, withDirectives as df, resolveDirective as ff } from "vue";
+import { createVNode as m, mergeProps as A, Fragment as oe, isVNode as U, useAttrs as F, computed as P, toValue as je, getCurrentScope as Ac, onScopeDispose as Ar, toRef as Q, readonly as af, customRef as of, ref as B, shallowRef as He, watch as J, getCurrentInstance as Oc, onMounted as Je, inject as Ne, defineComponent as I, toRefs as rf, reactive as Cc, provide as Me, watchEffect as Ue, onUnmounted as we, isRef as ft, watchPostEffect as sf, onBeforeUnmount as on, Comment as Or, unref as xt, useSlots as $e, Text as Cr, useTemplateRef as lf, toRaw as Qe, nextTick as Pc, shallowReadonly as st, h as us, cloneVNode as cf, onWatcherCleanup as uf, createTextVNode as Sc, withDirectives as df, resolveDirective as ff } from "vue";
 import { classNames as he } from "@lumx/core/js/utils";
 import { k as L, g as M, u as Y, C as Pr, T as Sr, P as rn, I as wc } from "./_internal/GIQod6ql.js";
 import { getDisabledState as hf } from "@lumx/core/js/utils/disabledState";
@@ -354,7 +354,7 @@ typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 const Rc = (e) => e != null, Gt = () => {
 };
 function Uf(...e) {
-  if (e.length !== 1) return ee(...e);
+  if (e.length !== 1) return Q(...e);
   const t = e[0];
   return typeof t == "function" ? af(of(() => ({
     get: t,
@@ -1818,7 +1818,7 @@ const xi = I({
   }
 }), cu = "Icon", ym = "lumx-icon", uu = ym, {
   block: Nm
-} = q(uu), Am = {}, Q = (e) => {
+} = q(uu), Am = {}, ee = (e) => {
   const {
     className: t,
     color: n,
@@ -1867,14 +1867,14 @@ const xi = I({
     fill: "currentColor"
   }, null)])]);
 };
-Q.displayName = cu;
-Q.className = uu;
-Q.defaultProps = Am;
+ee.displayName = cu;
+ee.className = uu;
+ee.defaultProps = Am;
 const ze = /* @__PURE__ */ I((e) => {
   const t = F(), n = Y({
     defaultTheme: void 0
   }), a = D(() => e.class);
-  return () => m(Q, A(e, t, {
+  return () => m(ee, A(e, t, {
     className: a.value,
     theme: e.theme || n.value
   }), null);
@@ -2326,7 +2326,7 @@ const Um = "Thumbnail", Gm = "lumx-thumbnail", {
     loading: y
   }), null), !H && z && m("span", {
     className: St("fallback")
-  }, [Z ? Q({
+  }, [Z ? ee({
     icon: l,
     size: ct.xxs,
     theme: S
@@ -2415,12 +2415,12 @@ const Jm = {
   } = re(P(() => ({
     ...e,
     ...a
-  }))), h = Xm(ee(() => e.image), s), f = P(() => h.value === "isLoaded"), g = Zm({
-    image: ee(() => e.image),
-    aspectRatio: ee(() => e.aspectRatio),
-    focusPoint: ee(() => e.focusPoint),
-    width: ee(() => typeof e.imgProps?.width == "number" ? e.imgProps.width : void 0),
-    height: ee(() => typeof e.imgProps?.height == "number" ? e.imgProps.height : void 0),
+  }))), h = Xm(Q(() => e.image), s), f = P(() => h.value === "isLoaded"), g = Zm({
+    image: Q(() => e.image),
+    aspectRatio: Q(() => e.aspectRatio),
+    focusPoint: Q(() => e.focusPoint),
+    width: Q(() => typeof e.imgProps?.width == "number" ? e.imgProps.width : void 0),
+    height: Q(() => typeof e.imgProps?.height == "number" ? e.imgProps.height : void 0),
     element: s,
     isLoaded: f
   }), p = (v) => {
@@ -3396,7 +3396,7 @@ const Nu = "IconButton", gp = "lumx-icon-button", dr = {
   } = e, i = n ? m("img", {
     alt: "",
     src: n
-  }, null) : Q({
+  }, null) : ee({
     icon: a
   });
   return Mt({
@@ -5380,7 +5380,7 @@ const Qg = (e) => {
   } = e, z = (O || "").length, Z = z > 0, k = p ? p - z : 0, j = p ? m("span", {
     className: fe("char-counter"),
     role: "status"
-  }, [N ? N(k) : k, k === 0 && Q({
+  }, [N ? N(k) : k, k === 0 && ee({
     icon: Tt,
     size: V.xxs
   })]) : void 0;
@@ -5414,7 +5414,7 @@ const Qg = (e) => {
   })]), m("div", {
     className: fe("wrapper"),
     ref: b
-  }, [l && Q({
+  }, [l && ee({
     className: fe("input-icon"),
     color: T === ge.dark ? "light" : void 0,
     icon: l,
@@ -5423,7 +5423,7 @@ const Qg = (e) => {
     className: fe("chips")
   }, [t, _]) : m("div", {
     className: fe("input-wrapper")
-  }, [_]), (d || s) && Q({
+  }, [_]), (d || s) && ee({
     className: fe("input-validity"),
     color: T === ge.dark ? "light" : void 0,
     icon: d ? sn : Tt,
@@ -5914,7 +5914,7 @@ const Av = {
         d.value = b;
       });
   }), J(
-    ee(e, "value"),
+    Q(e, "value"),
     () => {
       const y = s.value, v = u.value;
       !y || !v || y.refilterOption(v);
@@ -6258,7 +6258,7 @@ const Kv = {
   slots: n,
   attrs: a
 }) => {
-  const o = D(() => e.class), r = P(() => xt(e.anchorRef)), s = ee(e, "focusElement"), {
+  const o = D(() => e.class), r = P(() => xt(e.anchorRef)), s = Q(e, "focusElement"), {
     styles: i,
     isPositioned: l,
     position: c,
@@ -6267,16 +6267,16 @@ const Kv = {
   } = Uv({
     anchorRef: r,
     boundaryRef: P(() => xt(e.boundaryRef)),
-    offset: ee(e, "offset"),
-    hasArrow: ee(e, "hasArrow"),
-    fitToAnchorWidth: ee(e, "fitToAnchorWidth"),
-    fitWithinViewportHeight: ee(e, "fitWithinViewportHeight"),
-    width: ee(e, "width"),
-    minWidth: ee(e, "minWidth"),
-    maxWidth: ee(e, "maxWidth"),
-    height: ee(e, "height"),
-    minHeight: ee(e, "minHeight"),
-    maxHeight: ee(e, "maxHeight"),
+    offset: Q(e, "offset"),
+    hasArrow: Q(e, "hasArrow"),
+    fitToAnchorWidth: Q(e, "fitToAnchorWidth"),
+    fitWithinViewportHeight: Q(e, "fitWithinViewportHeight"),
+    width: Q(e, "width"),
+    minWidth: Q(e, "minWidth"),
+    maxWidth: Q(e, "maxWidth"),
+    height: Q(e, "height"),
+    minHeight: Q(e, "minHeight"),
+    maxHeight: Q(e, "maxHeight"),
     placement: P(() => e.placement || Kt.placement),
     style: P(() => {
     }),
@@ -6792,7 +6792,7 @@ const cd = /* @__PURE__ */ I((e) => {
     className: Yi("title"),
     id: u
   }, {
-    default: () => [o && Q({
+    default: () => [o && ee({
       icon: o
     }), a]
   }), m("ul", A(r, {
@@ -7817,7 +7817,7 @@ const $y = "Card", Ly = "lumx-card", {
     className: De("input-background")
   }, null), m("div", {
     className: De("input-indicator")
-  }, [Q({
+  }, [ee({
     icon: v ? bf : vf
   })])])]), m("div", {
     className: De("content")
@@ -8459,7 +8459,7 @@ const Od = (e) => (t) => U(t) && t.type === e, iN = {
     className: $(t, PN({
       [`theme-${n}`]: !!n
     }))
-  }), [Q({
+  }), [ee({
     icon: yf,
     color: n === ge.dark ? X.light : X.dark,
     size: V.xs
@@ -8633,7 +8633,7 @@ const MN = "Flag", $N = "lumx-flag", {
       [`color-${c}`]: !!c,
       "is-truncated": u
     }))
-  }), [n && Q({
+  }), [n && ee({
     icon: n,
     size: V.xxs,
     className: Yl("icon")
@@ -9613,7 +9613,7 @@ const TA = "MenuPopover", _A = "lumx-menu-popover", {
       [`color-${c}`]: !!c,
       "has-background": a
     }))
-  }), [(r || u) && Q({
+  }), [(r || u) && ee({
     className: Qo("icon"),
     icon: r || u,
     size: V.xs,
@@ -10236,7 +10236,7 @@ const QP = /* @__PURE__ */ I((e, {
       className: Ot("background")
     }, null), m("span", {
       className: Ot("wrapper")
-    }, [o && Q({
+    }, [o && ee({
       className: Ot("icon"),
       icon: o,
       size: V.s
@@ -10647,15 +10647,15 @@ const sS = /* @__PURE__ */ I((e, {
   }), [m(u, A({
     className: `${Xe}-wrapper`
   }, d), {
-    default: () => [a && !o && Q({
+    default: () => [a && !o && ee({
       className: `${Xe}-icon`,
       icon: a,
       size: V.xxs
-    }), o && i === Ut.asc && Q({
+    }), o && i === Ut.asc && ee({
       className: `${Xe}-icon`,
       icon: wf,
       size: V.xxs
-    }), o && i === Ut.desc && Q({
+    }), o && i === Ut.desc && ee({
       className: `${Xe}-icon`,
       icon: Sf,
       size: V.xxs
@@ -11327,19 +11327,26 @@ function Ud(e, t, n) {
   }
   return n ? String(le(n, e)) : "";
 }
+const IC = ({
+  selectionType: e,
+  isSelected: t
+}) => {
+  let n;
+  if (e === "multiple")
+    n = t ? Cf : Of;
+  else if (e === "single")
+    n = t ? sn : Pf;
+  else
+    return null;
+  return m(ee, {
+    icon: n,
+    color: t ? "primary" : void 0,
+    className: "lumx-combobox-option__selection-icon"
+  }, null);
+};
 function pc(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !U(e);
 }
-function IC(e, t) {
-  const n = t ? "primary" : void 0;
-  return e === "multiple" ? Q({
-    icon: t ? Cf : Of,
-    color: n
-  }) : e === "single" ? Q({
-    icon: t ? sn : Pf,
-    color: n
-  }) : null;
-}
 function rs(e, t) {
   const {
     options: n,
@@ -11378,7 +11385,10 @@ function rs(e, t) {
   }
   const h = i ? new Set((Array.isArray(i) ? i : [i]).map((f) => le(a, f))) : void 0;
   return n?.map((f, g) => {
-    const p = le(a || o, f), y = le(o || a, f) || p, v = r && le(r, f), b = h?.has(p) ?? !1, N = IC(l, b);
+    const p = le(a || o, f), y = le(o || a, f) || p, v = r && le(r, f), b = h?.has(p) ?? !1, N = m(IC, {
+      selectionType: l,
+      isSelected: b
+    }, null);
     return s ? s(f, {
       index: g,
       value: p,