@teammodlr/ui-kit 2.3.15 → 2.3.16

package/lib/index.es.js

@@ -1,5 +1,5 @@
 import * as hr from "vue";
-import { defineComponent as R, renderSlot as A, ref as w, readonly as co, watch as U, computed as g, provide as $e, openBlock as m, createElementBlock as x, normalizeStyle as le, normalizeClass as T, toRef as se, Fragment as ae, createElementVNode as I, createCommentVNode as H, withDirectives as on, vShow as ii, inject as ge, resolveComponent as ne, createTextVNode as me, toDisplayString as Q, createVNode as X, withCtx as D, toRefs as Qe, onMounted as ye, createBlock as z, mergeProps as ee, reactive as Ie, renderList as Ee, onBeforeUnmount as rn, resolveDynamicComponent as To, onUnmounted as Ot, vModelCheckbox as va, getCurrentScope as Eo, onScopeDispose as xo, unref as C, isRef as an, customRef as ma, getCurrentInstance as et, watchEffect as Ce, nextTick as ie, withModifiers as we, toHandlers as sn, Teleport as tt, Transition as Tt, withKeys as It, shallowRef as Ut, shallowReadonly as At, Comment as ha, cloneVNode as ga, h as Be, markRaw as ui, normalizeProps as fe, guardReactiveProps as pe, effectScope as ya, toHandlerKey as di, camelize as ba, mergeDefaults as wa, watchPostEffect as ci, onBeforeUpdate as fi, onUpdated as pi, TransitionGroup as vi, vModelRadio as mi, vModelText as hi, toRaw as gr, onActivated as gi, onDeactivated as yi } from "vue";
+import { defineComponent as R, renderSlot as A, ref as w, readonly as co, watch as U, computed as g, provide as $e, openBlock as m, createElementBlock as x, normalizeStyle as ie, normalizeClass as T, toRef as se, Fragment as ae, createElementVNode as I, createCommentVNode as H, withDirectives as on, vShow as ii, inject as ge, resolveComponent as ne, createTextVNode as me, toDisplayString as Q, createVNode as X, withCtx as D, toRefs as Qe, onMounted as ye, createBlock as z, mergeProps as ee, reactive as Ie, renderList as Ee, onBeforeUnmount as rn, resolveDynamicComponent as To, onUnmounted as Ot, vModelCheckbox as va, getCurrentScope as Eo, onScopeDispose as xo, unref as C, isRef as an, customRef as ma, getCurrentInstance as et, watchEffect as Ce, nextTick as ue, withModifiers as we, toHandlers as sn, Teleport as tt, Transition as Tt, withKeys as It, shallowRef as Ut, shallowReadonly as At, Comment as ha, cloneVNode as ga, h as Be, markRaw as ui, normalizeProps as fe, guardReactiveProps as pe, effectScope as ya, toHandlerKey as di, camelize as ba, mergeDefaults as wa, watchPostEffect as ci, onBeforeUpdate as fi, onUpdated as pi, TransitionGroup as vi, vModelRadio as mi, vModelText as hi, toRaw as gr, onActivated as gi, onDeactivated as yi } from "vue";
 const bi = {
   h: {
     type: Function,
@@ -129,7 +129,7 @@ const Bi = {
 };
 function Ri(e, t, n, o, r, a) {
   return m(), x("div", {
-    style: le({ height: `${e.height}px` }),
+    style: ie({ height: `${e.height}px` }),
     class: T(e.computedWrapperClass)
   }, [
     A(e.$slots, "default")
@@ -366,7 +366,7 @@ const [Ki, qi] = Sa("ConfigProvider"), Ui = {
 function Zi(e, t, n, o, r, a) {
   return m(), x("img", {
     class: T(e.computedClasses),
-    style: le(e.computedStyles),
+    style: ie(e.computedStyles),
     src: e.source,
     alt: e.alt
   }, null, 14, Yi);
@@ -491,7 +491,7 @@ function du(e, t, n, o, r, a) {
       class: T(e.style.item)
     }, [
       I("div", {
-        style: le([{ display: "inline-block", position: "relative", outline: "0" }, { zIndex: e.avatars.length - u }])
+        style: ie([{ display: "inline-block", position: "relative", outline: "0" }, { zIndex: e.avatars.length - u }])
       }, [
         X(s, {
           src: l.src,
@@ -2102,7 +2102,7 @@ function Ec(e) {
       var N, V = S === "y" ? Ae : Re, F = S === "y" ? Ne : Ve, G = S === "y" ? "height" : "width", W = P[S], oe = W + h[V], Y = W - h[F], ke = p ? -L[G] / 2 : 0, Se = O === jt ? B[G] : L[G], ve = O === jt ? -L[G] : -B[G], Me = t.elements.arrow, qe = p && Me ? jo(Me) : {
         width: 0,
         height: 0
-      }, Oe = t.modifiersData["arrow#persistent"] ? t.modifiersData["arrow#persistent"].padding : Na(), nt = Oe[V], ut = Oe[F], We = Gt(0, B[G], qe[G]), He = E ? B[G] / 2 - ke - We - nt - M.mainAxis : Se - We - nt - M.mainAxis, pn = E ? -B[G] / 2 + ke + We + ut + M.mainAxis : ve + We + ut + M.mainAxis, Z = t.elements.arrow && dn(t.elements.arrow), ue = Z ? S === "y" ? Z.clientTop || 0 : Z.clientLeft || 0 : 0, de = (N = $ == null ? void 0 : $[S]) != null ? N : 0, be = W + He - de - ue, q = W + pn - de, re = Gt(p ? Pn(oe, be) : oe, W, p ? Ct(Y, q) : Y);
+      }, Oe = t.modifiersData["arrow#persistent"] ? t.modifiersData["arrow#persistent"].padding : Na(), nt = Oe[V], ut = Oe[F], We = Gt(0, B[G], qe[G]), He = E ? B[G] / 2 - ke - We - nt - M.mainAxis : Se - We - nt - M.mainAxis, pn = E ? -B[G] / 2 + ke + We + ut + M.mainAxis : ve + We + ut + M.mainAxis, Z = t.elements.arrow && dn(t.elements.arrow), de = Z ? S === "y" ? Z.clientTop || 0 : Z.clientLeft || 0 : 0, le = (N = $ == null ? void 0 : $[S]) != null ? N : 0, be = W + He - le - de, q = W + pn - le, re = Gt(p ? Pn(oe, be) : oe, W, p ? Ct(Y, q) : Y);
       P[S] = re, _[S] = re - W;
     }
     if (l) {
@@ -2373,10 +2373,10 @@ function Hn(e) {
   n && U(n, (b) => {
     v(b), f();
   }), ye(() => {
-    ie(p);
+    ue(p);
   }), rn(h);
   function f() {
-    ie(() => {
+    ue(() => {
       i && i.forceUpdate(), o.value && (d.value = o.value.clientWidth);
     });
   }
@@ -2493,7 +2493,7 @@ function Zc(e, t, n, o, r, a) {
       I("div", {
         ref: "slider",
         class: T(e.style.sliderBar),
-        style: le({ background: e.background }),
+        style: ie({ background: e.background }),
         onMousedown: t[0] || (t[0] = (...s) => e.handleMouseDown && e.handleMouseDown(...s)),
         onTouchstart: t[1] || (t[1] = we((...s) => e.handleMouseDown && e.handleMouseDown(...s), ["prevent"]))
       }, null, 38)
@@ -2505,7 +2505,7 @@ function Zc(e, t, n, o, r, a) {
     }, [
       I("div", {
         class: T(e.style.hueSliderThumb),
-        style: le({ left: `${e.modelValue}%` })
+        style: ie({ left: `${e.modelValue}%` })
       }, null, 6)
     ], 32)
   ], 2);
@@ -2765,42 +2765,42 @@ const ts = /* @__PURE__ */ K(uf, [["render", ff]]), pf = R({
       isDrop: !1,
       offset: [-2, 2]
     }), F = g(() => 1 - B.y), G = g(() => B.x), W = g(() => i.value === "inherit" ? { r: 0, g: 0, b: 0, a: 0 } : Id(S.value * 3.6, F.value, G.value, k.value / 100)), oe = g(() => _d(S.value * 3.6, k.value / 100)), Y = () => {
-      t("update:modelValue", i.value), t("onColorChange", i.value);
-    }, ke = () => {
-      i.value !== "inherit" && (i.value = mn(W.value.r, W.value.g, W.value.b, W.value.a)), d.value = W.value.r.toString(), c.value = W.value.g.toString(), f.value = W.value.b.toString(), p.value = W.value.a.toFixed(2).toString(), n.lazy || Y();
+      t("update:modelValue", i.value);
+    }, ke = (Z = !0) => {
+      i.value !== "inherit" && (i.value = mn(W.value.r, W.value.g, W.value.b, W.value.a)), d.value = W.value.r.toString(), c.value = W.value.g.toString(), f.value = W.value.b.toString(), p.value = W.value.a.toFixed(2).toString(), Z && !n.lazy && Y();
     };
     U(() => W.value, () => {
-      ke();
+      ke(!1);
     }), U(() => e.color, (Z) => {
       Z && Z !== i.value && (i.value = Z, ve());
     });
-    const Se = (Z, ue) => {
-      B.x = Z.s, B.y = 1 - Z.v, S.value = 1 / 360 * Z.h * 100, k.value = ue * 100, ke();
+    const Se = (Z, de, le = !0) => {
+      B.x = Z.s, B.y = 1 - Z.v, S.value = 1 / 360 * Z.h * 100, k.value = de * 100, ke(le);
     }, ve = (Z = !0) => {
       if (i.value === "inherit") {
         Z && n.lazy && Y();
         return;
       }
-      let ue = i.value.replace("#", "");
-      ue.length === 3 && (ue = ue.split("").map((be) => be + be).join(""));
-      const de = Rd(`#${ue}`);
-      de.a === 0 && (de.a = 0, k.value = 0), Se(br(de.r, de.g, de.b), de.a), Z && n.lazy && Y();
+      let de = i.value.replace("#", "");
+      de.length === 3 && (de = de.split("").map((be) => be + be).join(""));
+      const le = Rd(`#${de}`);
+      le.a === 0 && (le.a = 0, k.value = 0), Se(br(le.r, le.g, le.b), le.a, Z), Z && n.lazy && Y();
     }, Me = () => {
       e.modelValue === "inherit" ? i.value = "#FFFFFF" : i.value = "inherit", Y();
     }, qe = () => {
       let Z = parseInt(d.value);
       (isNaN(Z) || Z > 255 || Z < 0) && (Z = W.value.r);
-      let ue = parseInt(c.value);
-      (isNaN(ue) || ue > 255 || ue < 0) && (ue = W.value.g);
-      let de = parseInt(f.value);
-      (isNaN(de) || de > 255 || de < 0) && (de = W.value.b);
+      let de = parseInt(c.value);
+      (isNaN(de) || de > 255 || de < 0) && (de = W.value.g);
+      let le = parseInt(f.value);
+      (isNaN(le) || le > 255 || le < 0) && (le = W.value.b);
       let be = parseFloat(p.value);
-      (isNaN(be) || be > 1 || be < 0) && (be = W.value.a), Se(br(Z, ue, de), be), i.value === "inherit" ? (i.value = mn(Z, ue, de, be), Y()) : n.lazy && Y();
+      (isNaN(be) || be > 1 || be < 0) && (be = W.value.a), Se(br(Z, de, le), be), i.value === "inherit" ? (i.value = mn(Z, de, le, be), Y()) : n.lazy && Y();
     };
     U(() => $.value, () => {
       $.value || (P.value = !1);
-    }), U(() => P.value, (Z, ue) => {
-      ue && !Z && n.lazy && Y();
+    }), U(() => P.value, (Z, de) => {
+      de && !Z && n.lazy && Y();
     }), U(() => [j.value, M.value], () => {
       P.value && Oe();
     }), U(() => e.modelValue, () => {
@@ -2808,21 +2808,21 @@ const ts = /* @__PURE__ */ K(uf, [["render", ff]]), pf = R({
       (!Z || Z.trim() === "") && (Z = e.defaultColor ?? "#FFFFFF"), i.value = Z, ve(!1);
     });
     const Oe = () => {
-      var Z, ue, de, be;
-      B.x = Math.min(Math.max(j.value, 0), ((Z = v.value) == null ? void 0 : Z.clientWidth) || 0) / (((ue = v.value) == null ? void 0 : ue.clientWidth) || 0), B.y = Math.min(Math.max(M.value, 0), ((de = v.value) == null ? void 0 : de.clientHeight) || 0) / (((be = v.value) == null ? void 0 : be.clientHeight) || 0);
+      var Z, de, le, be;
+      B.x = Math.min(Math.max(j.value, 0), ((Z = v.value) == null ? void 0 : Z.clientWidth) || 0) / (((de = v.value) == null ? void 0 : de.clientWidth) || 0), B.y = Math.min(Math.max(M.value, 0), ((le = v.value) == null ? void 0 : le.clientHeight) || 0) / (((be = v.value) == null ? void 0 : be.clientHeight) || 0);
     }, nt = () => {
       i.value === "inherit" && (i.value = mn(W.value.r, W.value.g, W.value.b, W.value.a), Y()), P.value = !0, Oe();
     };
     ye(() => {
       const Z = e.modelValue.match(/rgba?\s*\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*(?:[,\s]\s*([\d.]+%?))?\s*\)/i);
       if (Z) {
-        const [ue, de, be, q, re] = Z, J = re !== void 0 ? re.endsWith("%") ? parseFloat(re) / 100 : parseFloat(re) : 1;
-        i.value = mn(parseInt(de), parseInt(be), parseInt(q), J);
+        const [de, le, be, q, re] = Z, J = re !== void 0 ? re.endsWith("%") ? parseFloat(re) / 100 : parseFloat(re) : 1;
+        i.value = mn(parseInt(le), parseInt(be), parseInt(q), J);
       } else
         i.value = e.color || e.modelValue;
       ve(!1);
     }), Io(_, (Z) => {
-      l.value = !1;
+      l.value = !1, t("onColorChange", i.value);
     }), U(() => a.value, () => {
       a.value && (i.value = a.value, Y(), ve());
     });
@@ -2836,8 +2836,8 @@ const ts = /* @__PURE__ */ K(uf, [["render", ff]]), pf = R({
       n.lazy && Y();
     }, He = w(i.value);
     return U(i, (Z) => {
-      var ue, de;
-      document.activeElement !== ((de = (ue = E.value) == null ? void 0 : ue.$el) == null ? void 0 : de.querySelector("input")) && (He.value = Z);
+      var de, le;
+      document.activeElement !== ((le = (de = E.value) == null ? void 0 : de.$el) == null ? void 0 : le.querySelector("input")) && (He.value = Z);
     }), {
       isOpen: l,
       popper: _,
@@ -2954,7 +2954,7 @@ function Ef(e, t, n, o, r, a) {
           e.modelValue === "inherit" ? (m(), x("div", mf, "Inherit")) : (m(), x("div", {
             key: 1,
             class: T(e.style.referenceColor),
-            style: le({ backgroundColor: `rgba(${e.finalColor.r}, ${e.finalColor.g}, ${e.finalColor.b}, ${e.finalColor.a})` })
+            style: ie({ backgroundColor: `rgba(${e.finalColor.r}, ${e.finalColor.g}, ${e.finalColor.b}, ${e.finalColor.a})` })
           }, null, 6))
         ])
       ])
@@ -2971,13 +2971,13 @@ function Ef(e, t, n, o, r, a) {
             key: 0,
             class: T(e.style.container),
             ref: "popper",
-            style: le({ zIndex: e.zIndex })
+            style: ie({ zIndex: e.zIndex })
           }, [
             I("div", {
               ref: "picker",
               onMousedown: t[3] || (t[3] = (...i) => e.handleMouseDown && e.handleMouseDown(...i)),
               class: T(e.style.colours),
-              style: le(`background: rgb(${e.mainColor.r}, ${e.mainColor.g}, ${e.mainColor.b});`)
+              style: ie(`background: rgb(${e.mainColor.r}, ${e.mainColor.g}, ${e.mainColor.b});`)
             }, [
               I("div", {
                 class: T(e.style.whiteGradient)
@@ -2990,7 +2990,7 @@ function Ef(e, t, n, o, r, a) {
                 onMousedown: t[1] || (t[1] = (...i) => e.handleMouseDown && e.handleMouseDown(...i)),
                 onDragover: t[2] || (t[2] = we(() => {
                 }, ["prevent"])),
-                style: le({ left: `${e.position.x * 100}%`, top: `${e.position.y * 100}%` })
+                style: ie({ left: `${e.position.x * 100}%`, top: `${e.position.y * 100}%` })
               }, null, 38)
             ], 38),
             I("div", {
@@ -3012,7 +3012,7 @@ function Ef(e, t, n, o, r, a) {
                 class: T(e.style.preview)
               }, [
                 I("div", {
-                  style: le(`width: 100%; height: 100%; background-color: rgba(${e.finalColor.r}, ${e.finalColor.g}, ${e.finalColor.b}, ${e.finalColor.a});`)
+                  style: ie(`width: 100%; height: 100%; background-color: rgba(${e.finalColor.r}, ${e.finalColor.g}, ${e.finalColor.b}, ${e.finalColor.a});`)
                 }, null, 4)
               ], 2)),
               I("div", gf, [
@@ -4447,7 +4447,7 @@ function yt(e, t, n, o = {}) {
     return U(
       () => e[t],
       (P) => {
-        k || (k = !0, S.value = h(P), ie(() => k = !1));
+        k || (k = !0, S.value = h(P), ue(() => k = !1));
       }
     ), U(
       S,
@@ -4581,7 +4581,7 @@ const Np = cs(() => {
       "touchmove",
       (f) => Wp(f),
       { passive: !1 }
-    )), ie(() => {
+    )), ue(() => {
       document.body.style.pointerEvents = "none", document.body.style.overflow = "hidden";
     });
   }, { immediate: !0, flush: "sync" }), e;
@@ -4933,7 +4933,7 @@ function sv(e, t) {
     async (h, b) => {
       var O;
       const E = b !== h;
-      if (await ie(), E) {
+      if (await ue(), E) {
         const S = r.value, k = wn(t.value);
         h ? (d("MOUNT"), c("enter"), k === "none" && c("after-enter")) : k === "none" || ((O = o.value) == null ? void 0 : O.display) === "none" ? (d("UNMOUNT"), c("leave"), c("after-leave")) : b && S !== k ? (d("ANIMATION_OUT"), c("leave")) : (d("UNMOUNT"), c("after-leave"));
       }
@@ -5093,7 +5093,7 @@ function cv(e, t) {
     if (!gt)
       return;
     const s = async (l) => {
-      t != null && t.value && (await ie(), !(!t.value || hs(t.value, l.target)) && l.target && !r.value && ds(
+      t != null && t.value && (await ue(), !(!t.value || hs(t.value, l.target)) && l.target && !r.value && ds(
         uv,
         e,
         { originalEvent: l }
@@ -5130,7 +5130,7 @@ const ot = Ie({
       const y = [...ot.branches].some(
         (h) => h == null ? void 0 : h.contains(v.target)
       );
-      !d.value || y || (o("pointerDownOutside", v), o("interactOutside", v), await ie(), v.defaultPrevented || o("dismiss"));
+      !d.value || y || (o("pointerDownOutside", v), o("interactOutside", v), await ue(), v.defaultPrevented || o("dismiss"));
     }, a), f = cv((v) => {
       [...ot.branches].some(
         (y) => y == null ? void 0 : y.contains(v.target)
@@ -5153,7 +5153,7 @@ const ot = Ie({
       "as-child": v.asChild,
       as: v.as,
       "data-dismissable-layer": "",
-      style: le({
+      style: ie({
         pointerEvents: i.value ? d.value ? "auto" : "none" : void 0
       }),
       onFocusCapture: C(f).onFocusCapture,
@@ -5281,7 +5281,7 @@ const wv = /* @__PURE__ */ R({
       });
     }), Ce(async (d) => {
       const c = a.value;
-      if (await ie(), !c)
+      if (await ue(), !c)
         return;
       l.add(u);
       const f = document.activeElement;
@@ -5548,7 +5548,7 @@ const $s = {
         ref_key: "floatingRef",
         ref: l,
         "data-radix-popper-content-wrapper": "",
-        style: le({
+        style: ie({
           ...C(h),
           transform: C(O) ? C(h).transform : "translate(0, -200%)",
           // keep off the page when measuring
@@ -5632,7 +5632,7 @@ const $s = {
         ref: (d) => {
           C(n).onArrowChange(d);
         },
-        style: le({
+        style: ie({
           position: "absolute",
           left: (s = C(n).arrowX) != null && s.value ? `${(l = C(n).arrowX) == null ? void 0 : l.value}px` : void 0,
           top: (u = C(n).arrowY) != null && u.value ? `${(i = C(n).arrowY) == null ? void 0 : i.value}px` : void 0,
@@ -6067,7 +6067,7 @@ const [TC, Qv] = je("RovingFocusGroup"), em = /* @__PURE__ */ R({
       }
     }
     async function s(l) {
-      await ie(), !l.defaultPrevented && tn(l) && n.onItemLeave(l);
+      await ue(), !l.defaultPrevented && tn(l) && n.onItemLeave(l);
     }
     return (l, u) => (m(), z(C(Hv), {
       value: { textValue: l.textValue }
@@ -6087,10 +6087,10 @@ const [TC, Qv] = je("RovingFocusGroup"), em = /* @__PURE__ */ R({
           onPointermove: a,
           onPointerleave: s,
           onFocus: u[0] || (u[0] = async (i) => {
-            await ie(), !(i.defaultPrevented || l.disabled) && (r.value = !0);
+            await ue(), !(i.defaultPrevented || l.disabled) && (r.value = !0);
           }),
           onBlur: u[1] || (u[1] = async (i) => {
-            await ie(), !i.defaultPrevented && (r.value = !1);
+            await ue(), !i.defaultPrevented && (r.value = !1);
           })
         }), {
           default: D(() => [
@@ -6120,7 +6120,7 @@ const [TC, Qv] = je("RovingFocusGroup"), em = /* @__PURE__ */ R({
           bubbles: !0,
           cancelable: !0
         });
-        o("select", c), await ie(), c.defaultPrevented ? u.value = !1 : s.onClose();
+        o("select", c), await ue(), c.defaultPrevented ? u.value = !1 : s.onClose();
       }
     }
     return (d, c) => (m(), z(Ms, ee(n, {
@@ -6131,7 +6131,7 @@ const [TC, Qv] = je("RovingFocusGroup"), em = /* @__PURE__ */ R({
       }),
       onPointerup: c[1] || (c[1] = async (f) => {
         var p;
-        await ie(), !f.defaultPrevented && (u.value || (p = f.currentTarget) == null || p.click());
+        await ue(), !f.defaultPrevented && (u.value || (p = f.currentTarget) == null || p.click());
       }),
       onKeydown: c[2] || (c[2] = async (f) => {
         const p = C(l).searchRef.value !== "";
@@ -6577,7 +6577,7 @@ const [TC, Qv] = je("RovingFocusGroup"), em = /* @__PURE__ */ R({
     async function d(c) {
       var f;
       const p = a.searchRef.value !== "";
-      t.disabled || p && c.key === " " || Sv[o.dir.value].includes(c.key) && (n.onOpenChange(!0), await ie(), (f = n.content.value) == null || f.focus(), c.preventDefault());
+      t.disabled || p && c.key === " " || Sv[o.dir.value].includes(c.key) && (n.onOpenChange(!0), await ue(), (f = n.content.value) == null || f.focus(), c.preventDefault());
     }
     return (c, f) => (m(), z(rr, { "as-child": "" }, {
       default: D(() => [
@@ -6671,13 +6671,13 @@ const cm = /* @__PURE__ */ R({
       a.value = { x: p.clientX, y: p.clientY }, r.onOpenChange(!0);
     }
     async function d(p) {
-      n.value || (await ie(), p.defaultPrevented || (u(), i(p), p.preventDefault()));
+      n.value || (await ue(), p.defaultPrevented || (u(), i(p), p.preventDefault()));
     }
     async function c(p) {
-      n.value || (await ie(), Wr(p) && !p.defaultPrevented && (u(), l.value = window.setTimeout(() => i(p), 700)));
+      n.value || (await ue(), Wr(p) && !p.defaultPrevented && (u(), l.value = window.setTimeout(() => i(p), 700)));
     }
     async function f(p) {
-      n.value || (await ie(), Wr(p) && !p.defaultPrevented && u());
+      n.value || (await ue(), Wr(p) && !p.defaultPrevented && u());
     }
     return (p, v) => (m(), x(ae, null, [
       X(C(rr), {
@@ -7029,7 +7029,7 @@ const cm = /* @__PURE__ */ R({
           "data-state": C(n).open.value ? "open" : "closed",
           onClick: s[0] || (s[0] = async (l) => {
             var u;
-            !a.disabled && l.button === 0 && l.ctrlKey === !1 && ((u = C(n)) == null || u.onOpenToggle(), await ie(), C(n).open.value && l.preventDefault());
+            !a.disabled && l.button === 0 && l.ctrlKey === !1 && ((u = C(n)) == null || u.onOpenToggle(), await ue(), C(n).open.value && l.preventDefault());
           }),
           onKeydown: s[1] || (s[1] = It(
             (l) => {
@@ -7667,7 +7667,7 @@ function Xs(e, t) {
   return U(e, (r) => {
     o(r);
   }), ye(() => {
-    ie(() => {
+    ue(() => {
       o(e.value);
     });
   }), n;
@@ -7794,7 +7794,7 @@ const ch = /* @__PURE__ */ K(uh, [["render", dh]]), fh = R({
     ), U(s, ($) => {
       $ && y(), t("update:open", $);
     }), ye(() => {
-      ie(() => {
+      ue(() => {
         O(e.placement);
       });
     }), ce("resize", () => {
@@ -7894,7 +7894,7 @@ function ph(e, t, n, o, r, a) {
                 key: 0,
                 ref: "popper",
                 class: T(e.menuClasses),
-                style: le({ zIndex: e.zIndex, maxHeight: e.maxHeight })
+                style: ie({ zIndex: e.zIndex, maxHeight: e.maxHeight })
               }, [
                 A(e.$slots, "menu")
               ], 6)) : H("", !0)
@@ -8102,7 +8102,7 @@ const Th = R({
     $e(Bo, o), ye(() => {
       e.autoFocus && n && n.length > 0 && n[0].focus();
     }), U(() => e.errors, (u) => {
-      u && ie(() => {
+      u && ue(() => {
         if (Array.isArray(u))
           u.forEach((i) => {
             const d = n.find((c) => c.name === i.field);
@@ -8136,7 +8136,7 @@ const Th = R({
 });
 function Eh(e, t, n, o, r, a) {
   return m(), x("form", {
-    style: le(e.computedStyles),
+    style: ie(e.computedStyles),
     class: T([
       e.computedClasses
     ]),
@@ -8619,7 +8619,7 @@ function Sg(e, t, n, o, r, a) {
         e.isOpen ? (m(), x("div", {
           key: 0,
           class: T(e.style.mask),
-          style: le({ zIndex: e.zIndex })
+          style: ie({ zIndex: e.zIndex })
         }, null, 6)) : H("", !0),
         e.isOpen ? (m(), x("div", {
           key: 1,
@@ -8628,7 +8628,7 @@ function Sg(e, t, n, o, r, a) {
           ref: "wrapperRef",
           role: "dialog",
           class: T(e.computedWrapperClasses),
-          style: le(e.computedWrapperStyles),
+          style: ie(e.computedWrapperStyles),
           onClick: t[4] || (t[4] = (...s) => e.onOutsideClick && e.onOutsideClick(...s))
         }, [
           I("div", ee({
@@ -9600,7 +9600,7 @@ const Yy = R({
         inline: "nearest"
       });
     }), U(i, (q) => {
-      ie(() => {
+      ue(() => {
         if (q || (c.value = ""), q && (O.value = h()), e.searchable && s.value && s.value.focus(), q && a.value) {
           const re = Y.value.findIndex(
             (J) => J.value === F.value
@@ -9612,7 +9612,7 @@ const Yy = R({
         y.value = !1;
       });
     });
-    const Z = g(() => L.value || e.error), ue = g(() => e.multiple && Y.value.length == 0 && !c.value ? !1 : i.value), de = (q) => {
+    const Z = g(() => L.value || e.error), de = g(() => e.multiple && Y.value.length == 0 && !c.value ? !1 : i.value), le = (q) => {
       setTimeout(() => {
         l.value && !i.value && Se();
       }, 10);
@@ -9628,10 +9628,10 @@ const Yy = R({
       searchRef: s,
       selectRef: l,
       popper: $,
-      focusSelect: de,
+      focusSelect: le,
       onSelectClick: be,
       id: k,
-      isOpen: ue,
+      isOpen: de,
       open: i,
       selected: F,
       selectedMax: G,
@@ -9748,7 +9748,7 @@ function ib(e, t, n, o, r, a) {
               key: 0,
               class: T(e.style.menu),
               ref: "popper",
-              style: le(e.computedConsistentWidth),
+              style: ie(e.computedConsistentWidth),
               "aria-hidden": e.isOpen ? "false" : "true"
             }, [
               e.searchable || e.multiple && e.selectAll ? (m(), x("div", {
@@ -9859,7 +9859,7 @@ const fb = R({
 function pb(e, t, n, o, r, a) {
   return m(), x("div", {
     class: T(e.computedClasses),
-    style: le(e.computedStyles)
+    style: ie(e.computedStyles)
   }, null, 6);
 }
 const vb = /* @__PURE__ */ K(fb, [["render", pb]]);
@@ -10185,7 +10185,7 @@ const kl = /* @__PURE__ */ K(Nb, [["render", Vb]]), Wb = R({
 });
 function Hb(e, t, n, o, r, a) {
   return m(), x("th", {
-    style: le(e.computedStyles)
+    style: ie(e.computedStyles)
   }, [
     A(e.$slots, "default")
   ], 4);
@@ -10339,7 +10339,7 @@ function r0(e, t, n, o, r, a) {
           (m(!0), x(ae, null, Ee(e.headers, (f, p) => (m(), z(l, {
             key: p,
             width: f.width,
-            style: le({ textAlign: f.align })
+            style: ie({ textAlign: f.align })
           }, {
             default: D(() => [
               A(e.$slots, `${f.key}-header`, {}, () => [
@@ -10369,7 +10369,7 @@ function r0(e, t, n, o, r, a) {
               }, 1024)) : H("", !0),
               (m(!0), x(ae, null, Ee(e.headers, (y, h) => (m(), z(i, {
                 key: h,
-                style: le({ textAlign: y.align })
+                style: ie({ textAlign: y.align })
               }, {
                 default: D(() => [
                   A(e.$slots, y.key, {
@@ -10778,7 +10778,7 @@ function x0(e, t, n, o, r, a) {
               role: "tooltip",
               class: T(e.computedClasses),
               ref: "popper",
-              style: le({ zIndex: e.zIndex })
+              style: ie({ zIndex: e.zIndex })
             }, [
               A(e.$slots, "content", { html: e.text }, () => [
                 I("span", { innerHTML: e.text }, null, 8, E0)
@@ -11033,10 +11033,10 @@ function U0(e, t, n, o, r, a) {
   }, [
     I("div", {
       ref: "contentWrapper",
-      style: le({ width: `${e.totalWidth}px`, height: `${e.totalHeight}px` })
+      style: ie({ width: `${e.totalWidth}px`, height: `${e.totalHeight}px` })
     }, [
       I("div", {
-        style: le({ transform: `translate(${e.offsetX}px, ${e.offsetY}px)` })
+        style: ie({ transform: `translate(${e.offsetX}px, ${e.offsetY}px)` })
       }, [
         (m(!0), x(ae, null, Ee(e.renderedItems, (s, l) => (m(), x("div", {
           key: l,
@@ -11044,7 +11044,7 @@ function U0(e, t, n, o, r, a) {
         }, [
           (m(!0), x(ae, null, Ee(s, (u, i) => (m(), x("div", {
             key: i,
-            style: le({ width: `${e.itemWidth}px`, height: `${e.itemHeight}px` })
+            style: ie({ width: `${e.itemWidth}px`, height: `${e.itemHeight}px` })
           }, [
             A(e.$slots, "item", { item: u })
           ], 4))), 128))
@@ -11310,11 +11310,11 @@ const d1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }
     }
     return ce(window, "resize", () => {
-      e.open && (e.draggable ? ie(() => L()) : ie(() => B()));
+      e.open && (e.draggable ? ue(() => L()) : ue(() => B()));
     }), U(
       () => e.open,
       async (j) => {
-        j && (await ie(), B(), t("onOpen"));
+        j && (await ue(), B(), t("onOpen"));
       },
       { immediate: !0 }
     ), n({
@@ -11358,7 +11358,7 @@ function v1(e, t, n, o, r, a) {
         e.open ? (m(), x("div", {
           key: 0,
           class: T(e.style.root),
-          style: le({ zIndex: e.zIndex, position: "fixed", inset: "0", pointerEvents: e.modal ? "all" : "none" })
+          style: ie({ zIndex: e.zIndex, position: "fixed", inset: "0", pointerEvents: e.modal ? "all" : "none" })
         }, [
           e.modal ? (m(), x("div", {
             key: 0,
@@ -11370,7 +11370,7 @@ function v1(e, t, n, o, r, a) {
           }, [
             I("div", {
               ref: "dialog",
-              style: le(e.computedStyle)
+              style: ie(e.computedStyle)
             }, [
               f1,
               e.$slots.container ? A(e.$slots, "container", {
@@ -11437,11 +11437,11 @@ const Kl = /* @__PURE__ */ K(c1, [["render", v1]]), m1 = R({
         options: c,
         open: async () => {
           const p = t.value[i];
-          p && p.open ? p.open() : (await ie(), f.options.open = !0, s(i));
+          p && p.open ? p.open() : (await ue(), f.options.open = !0, s(i));
         },
         close: async () => {
           const p = t.value[i];
-          p && p.close ? p.close() : (await ie(), f.options.open = !1, l(i));
+          p && p.close ? p.close() : (await ue(), f.options.open = !1, l(i));
         }
       };
       return e[i] = f, f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teammodlr/ui-kit",
-  "version": "2.3.15",
+  "version": "2.3.16",
   "description": "",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",

package/src/components/colorpicker/ColorPicker.vue

@@ -212,10 +212,9 @@ export default defineComponent({
 
         const emitModelValue = () => {
             emit('update:modelValue', hexInput.value);
-            emit('onColorChange', hexInput.value);
         };
 
-        const setInputs = () => {
+        const setInputs = (shouldEmit: boolean = true) => {
             if (hexInput.value !== 'inherit') {
                 hexInput.value = RGBAToHex(finalColor.value.r, finalColor.value.g, finalColor.value.b, finalColor.value.a);
             }
@@ -224,13 +223,13 @@ export default defineComponent({
             bInput.value = finalColor.value.b.toString();
             aInput.value = finalColor.value.a.toFixed(2).toString();
 
-            if (!modelModifiers.lazy) {
+            if (shouldEmit && !modelModifiers.lazy) {
                 emitModelValue();
             }
         };
 
         watch(() => finalColor.value, () => {
-            setInputs();
+            setInputs(false);
         });
 
         watch(() => props.color, (newColor) => {
@@ -240,12 +239,12 @@ export default defineComponent({
             }
         });
 
-        const updateFromHSV = (hsv: HSV, alpha: number) => {
+        const updateFromHSV = (hsv: HSV, alpha: number, shouldEmit: boolean = true) => {
             position.x = hsv.s;
             position.y = 1 - hsv.v;
             hueSlider.value = ((1 / 360) * hsv.h) * 100;
             opacitySlider.value = alpha * 100;
-            setInputs();
+            setInputs(shouldEmit);
         }
 
         const updateFromHex = (shouldEmit = true) => {
@@ -266,7 +265,7 @@ export default defineComponent({
                 opacitySlider.value = 0;
             }
 
-            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a);
+            updateFromHSV(RGBToHSV(color.r, color.g, color.b), color.a, shouldEmit);
             if (shouldEmit && modelModifiers.lazy) {
                 emitModelValue();
             }
@@ -379,6 +378,7 @@ export default defineComponent({
 
         onClickOutside(popper, (e) => {
             isOpen.value = false;
+            emit('onColorChange', hexInput.value);
         });