mediacube-ui-v2 0.0.325 → 0.0.327

package/dist/ai-catalog/index.json

@@ -1,6 +1,6 @@
 {
   "catalogSchemaVersion": 2,
-  "libraryVersion": "0.0.325",
+  "libraryVersion": "0.0.327",
   "packageName": "mediacube-ui-v2",
   "pathHash": "9b6f3b8016b22ac7",
   "componentCount": 76,

package/dist/ai-catalog/types/ITranslations.ts

@@ -30,7 +30,7 @@ export const UiFilterTranslations: IFilterPlaceholders = {
   fast_filters: 'Fast filters',
   added_filters: 'Added filters',
   enter_preset_name: 'Enter preset name',
-  enter_preset_tooltip: 'Сохранение выбранных параметров фильтра в пользовательский пресет',
+  enter_preset_tooltip: 'Save selected filter parameters to a custom preset',
   from: 'From',
   to: 'To',
   enter: 'Enter',
@@ -54,11 +54,11 @@ export const UiFilterTranslations: IFilterPlaceholders = {
     confirm: 'Confirm'
   },
   messages: {
-    same_filter: 'Уже есть фильтр с таким параметром',
-    same_preset_name: 'Уже есть фильтр с таким именем',
-    accidentally_cleared: 'Случайно очистили?',
-    accidentally_deleted: 'Случайно удалили?',
-    more_than: 'Значение "от" не может быть больше значения "до"'
+    same_filter: 'A filter with this parameter already exists',
+    same_preset_name: 'A preset with this name already exists',
+    accidentally_cleared: 'Accidentally cleared?',
+    accidentally_deleted: 'Accidentally deleted?',
+    more_than: 'The "From" value cannot be greater than the "To" value'
   }
 }
 

package/dist/components/elements/McFieldSelect/McFieldSelect.vue2.js

@@ -1,26 +1,26 @@
-import { defineComponent as qe, defineAsyncComponent as W, useSlots as He, inject as je, ref as p, computed as i, onBeforeUnmount as Ie, watch as X, openBlock as c, createElementBlock as F, normalizeStyle as Ye, normalizeClass as ie, createElementVNode as T, renderSlot as O, createBlock as v, unref as r, withCtx as a, createTextVNode as E, toDisplayString as m, createCommentVNode as S, createVNode as g, mergeProps as Ge, createSlots as K, nextTick as se } from "vue";
+import { defineComponent as qe, defineAsyncComponent as W, useSlots as He, inject as je, ref as p, computed as i, onBeforeUnmount as Ie, watch as K, openBlock as s, createElementBlock as F, normalizeStyle as Ye, normalizeClass as se, createElementVNode as T, renderSlot as O, createBlock as u, unref as a, withCtx as r, createTextVNode as E, toDisplayString as f, createCommentVNode as _, createVNode as S, mergeProps as Ge, createSlots as J, nextTick as ce } from "vue";
 import Ue from "vue-multiselect";
-import { Directions as ce } from "../../../enums/ui/Directions2.js";
+import { Directions as ue } from "../../../enums/ui/Directions2.js";
 import { useFieldErrors as Xe } from "../../../composables/useFieldErrors2.js";
 import { SelectGroupKeys as w, SelectListDirections as Ke } from "../../../enums/Select2.js";
-import { PreviewSizes as ue } from "../../../enums/Preview2.js";
-import { TitleVariations as de } from "../../../enums/Title2.js";
+import { PreviewSizes as de } from "../../../enums/Preview2.js";
+import { TitleVariations as me } from "../../../enums/Title2.js";
 import { TooltipPositions as Je } from "../../../enums/Tooltip2.js";
-import { Weights as J } from "../../../enums/ui/Weights2.js";
+import { Weights as Q } from "../../../enums/ui/Weights2.js";
 import { ChipSize as Qe } from "../../../enums/Chip2.js";
 import { useTheme as Ze } from "../../../composables/useTheme2.js";
 import { useThrottleFn as et } from "@vueuse/core";
-import y from "../McTitle/McTitle.vue2.js";
+import h from "../McTitle/McTitle.vue2.js";
 import '../../../assets/components/elements/McSvgIcon/index.css';import '../../../assets/components/elements/McTitle/index.css';/* empty css                    */
 import q from "../McSvgIcon/McSvgIcon.vue2.js";
 /* empty css                      */
 const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc-field-select__main" }, nt = {
   key: 1,
   class: "mc-field-select__single-label"
-}, rt = {
+}, at = {
   key: 0,
   class: "mc-field-select__prepend"
-}, at = {
+}, rt = {
   key: 0,
   class: "mc-field-select__footer"
 }, it = { key: 1 }, Ct = /* @__PURE__ */ qe({
@@ -250,7 +250,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
     },
     dir: {
       type: String,
-      default: ce.Ltr
+      default: ue.Ltr
     },
     /**
      * На какое после смотреть что бы считать его заголовком строки
@@ -269,14 +269,14 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
   },
   emits: ["original-input", "tag", "search-change", "update:modelValue", "handle-open", "handle-close"],
   setup(k, { emit: pe }) {
-    const me = W(() => import("../McAvatar/McAvatar.vue.js")), fe = W(() => import("../McTooltip/McTooltip.vue.js")), Q = W(() => import("../../patterns/McPreview/McPreview.vue.js")), ve = W(() => import("../McChip/McChip.vue.js")), C = pe, ge = He(), Z = je("dsOptions", {}), e = k, u = Ze("select"), b = Xe(e.errors), H = p(null), x = p(null), j = p(null), $ = p([]), h = p(null), A = p(), L = p(!1), N = p(null), I = p(null), R = p(null), B = i(() => e.options.some(
+    const H = W(() => import("../McAvatar/McAvatar.vue.js")), fe = W(() => import("../McTooltip/McTooltip.vue.js")), Z = W(() => import("../../patterns/McPreview/McPreview.vue.js")), ve = W(() => import("../McChip/McChip.vue.js")), C = pe, ge = He(), ee = je("dsOptions", {}), e = k, d = Ze("select"), y = Xe(e.errors), j = p(null), x = p(null), I = p(null), $ = p([]), g = p(null), A = p(), L = p(!1), z = p(null), Y = p(null), N = p(null), B = i(() => e.options.some(
       (t) => Object.prototype.hasOwnProperty.call(t, w.Label) && Object.prototype.hasOwnProperty.call(t, w.Values) && //@ts-ignore
       Array.isArray(t[w.Values])
-    )), ee = i(() => !!e.title), te = i(() => e.avatar || e.icon), V = i(() => e.multiple), he = i(() => V.value ? !!(e.modelValue || [])?.length : !!e.modelValue), ye = i(() => e.noResultsText ?? Z.componentTranslations?.select?.noResultsText), be = i(() => e.emptyList ?? Z.componentTranslations?.select?.emptyList), _e = i(() => ({
+    )), te = i(() => !!e.title), le = i(() => e.avatar || e.icon), V = i(() => e.multiple), he = i(() => V.value ? !!(e.modelValue || [])?.length : !!e.modelValue), ye = i(() => e.noResultsText ?? ee.componentTranslations?.select?.noResultsText), be = i(() => e.emptyList ?? ee.componentTranslations?.select?.emptyList), _e = i(() => ({
       label: e.titleField,
       trackBy: e.valueField,
       loading: e.loading,
-      options: P.value,
+      options: R.value,
       searchable: e.searchable,
       showLabels: e.showLabels,
       multiple: e.multiple,
@@ -294,16 +294,16 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
       appendToBody: e.renderAbsoluteList,
       ...B.value ? { groupLabel: w.Label } : {},
       ...B.value ? { groupValues: w.Values } : {}
-    })), P = i(() => {
+    })), R = i(() => {
       if (B.value) return e.options;
       const t = /* @__PURE__ */ new Set();
       return [...e.options, ...$.value].filter((l) => {
         const n = l[e.valueField];
         return t.has(String(n)) ? !1 : (t.add(String(n)), !0);
       });
-    }), Se = i(() => B.value ? P.value.map((t) => t[w.Values]).flat() : P.value), we = i(() => new Map(Se.value.map((t) => [String(t[e.valueField]), t]))), ke = i(() => e.dir === ce.Rtl), Ce = i(() => ({
+    }), Se = i(() => B.value ? R.value.map((t) => t[w.Values]).flat() : R.value), we = i(() => new Map(Se.value.map((t) => [String(t[e.valueField]), t]))), ke = i(() => e.dir === ue.Rtl), Ce = i(() => ({
       "mc-field-select": !0,
-      "mc-field-select--error": !!b.errorText.value,
+      "mc-field-select--error": !!y.errorText.value,
       "mc-field-select--disabled": e.disabled,
       [`mc-field-select--bg-${e.backgroundColor}`]: !!e.backgroundColor,
       "mc-field-select--is-empty-options-list": Ve.value || e.loading,
@@ -313,17 +313,17 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
       "mc-field-select--hide-arrow": !!ge.arrow
     })), xe = i(() => `${e.title}${e.required ? " *" : ""}`), Be = i(() => {
       const t = ["gray", "dark-gray", "black"], o = ["white"];
-      let l = "gray", n = e.backgroundColor, s = e.backgroundColor, d = "black";
-      return (!e.backgroundColor || o.includes(e.backgroundColor)) && (n = u.component.color), t.includes(e.backgroundColor) && (d = "white", l = "white", n = "black"), e.disabled && !e.backgroundColor && (s = "hover-gray"), {
+      let l = "gray", n = e.backgroundColor, c = e.backgroundColor, m = "black";
+      return (!e.backgroundColor || o.includes(e.backgroundColor)) && (n = d.component.color), t.includes(e.backgroundColor) && (m = "white", l = "white", n = "black"), e.disabled && !e.backgroundColor && (c = "hover-gray"), {
         "--mc-field-select-max-height": e.maxHeight,
-        "--mc-field-select-bg-color": s && u.colors[s],
-        "--mc-field-select-color": u.colors[u.component.color],
-        "--mc-field-select-selected-color": u.colors[u.component.selected],
-        "--mc-field-select-border-color": n && u.colors[n],
-        "--mc-field-select-label-color": u.colors[d],
-        "--mc-field-select-placeholder-color": u.colors[l]
+        "--mc-field-select-bg-color": c && d.colors[c],
+        "--mc-field-select-color": d.colors[d.component.color],
+        "--mc-field-select-selected-color": d.colors[d.component.selected],
+        "--mc-field-select-border-color": n && d.colors[n],
+        "--mc-field-select-label-color": d.colors[m],
+        "--mc-field-select-placeholder-color": d.colors[l]
       };
-    }), Ve = i(() => e.hideSelected && !H.value || !e.options.length ? e.multiple ? B.value ? !1 : Array.isArray(e.modelValue) && e.options.length === e.modelValue.length : !!e.modelValue && P.value?.length === 1 && !H.value : e.options.length === 0 ? !e.options.length : !1), z = i({
+    }), Ve = i(() => e.hideSelected && !j.value || !e.options.length ? e.multiple ? B.value ? !1 : Array.isArray(e.modelValue) && e.options.length === e.modelValue.length : !!e.modelValue && R.value?.length === 1 && !j.value : e.options.length === 0 ? !e.options.length : !1), P = i({
       get() {
         let t = V.value ? e.modelValue || [] : [e.modelValue].filter(Boolean);
         t = t.map((l) => {
@@ -333,6 +333,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
             [e.valueField]: n?.[e.valueField] || l,
             text: n?.text,
             icon: n?.icon,
+            avatar: n?.avatar,
             is_closable: n && (!Object.prototype.hasOwnProperty.call(n, "is_closable") || n.is_closable) || !n
           };
         });
@@ -345,22 +346,22 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
         const [l] = o;
         $e(t), Oe(V.value ? o : l);
       }
-    }), le = (t = []) => {
-      const o = /* @__PURE__ */ new Set(), l = B.value ? t.flatMap((s) => s[w.Values] ?? []) : t, n = [...$.value, ...l];
-      $.value = n.filter((s) => {
-        const d = s[e.valueField];
-        if (o.has(String(d))) return !1;
-        const _ = e.modelValue?.constructor === Array ? e.modelValue.map((G) => String(G)).includes(String(s[e.valueField])) : String(s[e.valueField]) === String(e.modelValue);
-        return _ && o.add(String(d)), _;
+    }), oe = (t = []) => {
+      const o = /* @__PURE__ */ new Set(), l = B.value ? t.flatMap((c) => c[w.Values] ?? []) : t, n = [...$.value, ...l];
+      $.value = n.filter((c) => {
+        const m = c[e.valueField];
+        if (o.has(String(m))) return !1;
+        const b = e.modelValue?.constructor === Array ? e.modelValue.map((U) => String(U)).includes(String(c[e.valueField])) : String(c[e.valueField]) === String(e.modelValue);
+        return b && o.add(String(m)), b;
       });
-    }, oe = (t) => {
+    }, ne = (t) => {
       if (!t || t.nodeType !== Node.ELEMENT_NODE || t === document.documentElement)
         return document.documentElement;
       const { overflow: o, overflowY: l } = getComputedStyle(t);
-      if (["auto", "scroll"].some((d) => [o, l].includes(d)))
+      if (["auto", "scroll"].some((m) => [o, l].includes(m)))
         return t;
-      const s = t.parentNode;
-      return !s || s.nodeType !== Node.ELEMENT_NODE ? document.documentElement : oe(s);
+      const c = t.parentNode;
+      return !c || c.nodeType !== Node.ELEMENT_NODE ? document.documentElement : ne(c);
     }, Te = (t) => {
       if (!t) return null;
       let o = t.parentElement;
@@ -370,204 +371,210 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
         o = o.parentElement;
       }
       return null;
-    }, ne = i(() => ["iPhone", "iPad"].some((t) => navigator?.platform?.includes(t)) && window.visualViewport?.offsetTop || 0), M = et(() => {
-      if (!h.value || !x.value) return;
+    }, ae = i(() => ["iPhone", "iPad"].some((t) => navigator?.platform?.includes(t)) && window.visualViewport?.offsetTop || 0), M = et(() => {
+      if (!g.value || !x.value) return;
       const {
         top: t = 0,
         bottom: o = 0,
         height: l = 0,
         width: n = 0,
-        left: s = 0
-      } = j.value?.getBoundingClientRect() || {}, d = h.value.getBoundingClientRect(), _ = x.value;
-      if (!_) return;
-      const G = t - d.top, Pe = o - d.bottom;
-      if (G >= -l && Pe < l) {
-        const f = _.$refs.list, D = Te(f), ze = D ? D.left : 0, ae = D ? D.top : 0;
-        f.style.width = `${n}px`, f.style.position = "fixed", f.style.left = `${s - ze}px`;
-        const Me = j.value?.querySelector(".mc-field-select__header")?.offsetHeight, De = 8;
-        let U = e.openDirection;
-        switch (U === Ke.Auto && (U = _?.isAbove ? "top" : "bottom"), U) {
+        left: c = 0
+      } = I.value?.getBoundingClientRect() || {}, m = g.value.getBoundingClientRect(), b = x.value;
+      if (!b) return;
+      const U = t - m.top, Re = o - m.bottom;
+      if (U >= -l && Re < l) {
+        const v = b.$refs.list, D = Te(v), Pe = D ? D.left : 0, ie = D ? D.top : 0;
+        v.style.width = `${n}px`, v.style.position = "fixed", v.style.left = `${c - Pe}px`;
+        const Me = I.value?.querySelector(".mc-field-select__header")?.offsetHeight, De = 8;
+        let X = e.openDirection;
+        switch (X === Ke.Auto && (X = b?.isAbove ? "top" : "bottom"), X) {
           case "top": {
-            const We = t + (ee.value ? Me + De : 0) + ne.value - f.getBoundingClientRect().height - 8;
-            f.style.top = `${We - ae}px`, f.style.bottom = "auto";
+            const We = t + (te.value ? Me + De : 0) + ae.value - v.getBoundingClientRect().height - 8;
+            v.style.top = `${We - ie}px`, v.style.bottom = "auto";
             break;
           }
           case "bottom":
-            f.style.bottom = "auto", f.style.top = `${t + ne.value + l - ae}px`;
+            v.style.bottom = "auto", v.style.top = `${t + ae.value + l - ie}px`;
             break;
         }
       } else if (!/Android/i.test(navigator.userAgent))
-        return _.deactivate();
+        return b.deactivate();
     }, 16), Ee = () => {
-      Y(), h.value = oe(x.value.$el) || document.documentElement, h.value.addEventListener("scroll", M), A.value?.disconnect(), A.value = new ResizeObserver(M), A.value.observe(h.value);
+      G(), g.value = ne(x.value.$el) || document.documentElement, g.value.addEventListener("scroll", M), A.value?.disconnect(), A.value = new ResizeObserver(M), A.value.observe(g.value);
     }, Le = (t) => {
       const o = { [e.titleField]: t, [e.valueField]: t };
-      $.value.push(o), z.value = V.value ? [...z.value, o] : o, C("tag", t);
+      $.value.push(o), P.value = V.value ? [...P.value, o] : o, C("tag", t);
     }, Fe = (t) => {
-      H.value = t, C("search-change", t);
+      j.value = t, C("search-change", t);
     }, Oe = (t) => {
-      b.toggleErrorVisible(), C("update:modelValue", t);
+      y.toggleErrorVisible(), C("update:modelValue", t);
     }, $e = (t) => {
       C("original-input", t);
     }, Ae = () => {
       const t = x.value;
       if (!t?.$refs?.list) return;
       const o = t.$refs.list;
-      if (o.parentNode?.nodeName === "BODY" || R.value?.contains(o)) return;
-      N.value = o.parentElement, I.value = o.nextSibling;
+      if (o.parentNode?.nodeName === "BODY" || N.value?.contains(o)) return;
+      z.value = o.parentElement, Y.value = o.nextSibling;
       const l = document.createElement("div");
       l.className = "mc-field-select mc-field-select--list-portal";
       const n = document.createElement("div");
-      n.className = "multiselect", n.appendChild(o), l.appendChild(n), document.body.appendChild(l), R.value = l, L.value = !0, se(M);
+      n.className = "multiselect", n.appendChild(o), l.appendChild(n), document.body.appendChild(l), N.value = l, L.value = !0, ce(M);
     }, re = () => {
-      if (!L.value || !N.value) return;
-      const o = x.value?.$refs?.list, l = R.value;
-      o && l?.contains(o) && N.value.insertBefore(o, I.value), l?.remove(), L.value = !1, N.value = null, I.value = null, R.value = null;
+      if (!L.value || !z.value) return;
+      const o = x.value?.$refs?.list, l = N.value;
+      o && l?.contains(o) && z.value.insertBefore(o, Y.value), l?.remove(), L.value = !1, z.value = null, Y.value = null, N.value = null;
+    }, ze = () => {
+      C("handle-open"), e.renderAbsoluteList && (Ee(), ce(Ae));
+    }, G = () => {
+      A.value?.disconnect(), g.value && (g.value.removeEventListener("scroll", M), g.value = null);
     }, Ne = () => {
-      C("handle-open"), e.renderAbsoluteList && (Ee(), se(Ae));
-    }, Y = () => {
-      A.value?.disconnect(), h.value && (h.value.removeEventListener("scroll", M), h.value = null);
-    }, Re = () => {
-      L.value && re(), Y(), C("handle-close");
+      L.value && re(), G(), C("handle-close");
     };
     return Ie(() => {
-      L.value && re(), Y();
-    }), X(
+      L.value && re(), G();
+    }), K(
       () => e.options,
       (t) => {
-        le(t);
+        oe(t);
       },
       { immediate: !0 }
-    ), X(
+    ), K(
       () => e.modelValue,
       () => {
-        le();
+        oe();
       },
       { immediate: !0, deep: !0 }
-    ), X(
+    ), K(
       () => e.errors,
       (t) => {
-        b.setError(t);
+        y.setError(t);
       }
-    ), (t, o) => (c(), F("div", {
+    ), (t, o) => (s(), F("div", {
       ref_key: "field_select_wrapper_ref",
-      ref: j,
+      ref: I,
       dir: k.dir,
-      class: ie(Ce.value),
+      class: se(Ce.value),
       style: Ye(Be.value)
     }, [
       T("div", lt, [
         O(t.$slots, "header", {}, () => [
-          ee.value ? (c(), v(y, {
+          te.value ? (s(), u(h, {
             key: 0,
             "max-width": "100%",
-            weight: r(J).Medium
+            weight: a(Q).Medium
           }, {
-            default: a(() => [
-              E(m(xe.value), 1)
+            default: r(() => [
+              E(f(xe.value), 1)
             ]),
             _: 1
-          }, 8, ["weight"])) : S("", !0)
+          }, 8, ["weight"])) : _("", !0)
         ])
       ]),
       T("div", ot, [
-        g(r(Ue), Ge({
+        S(a(Ue), Ge({
           ref_key: "field_select_ref",
           ref: x,
-          modelValue: z.value,
-          "onUpdate:modelValue": o[0] || (o[0] = (l) => z.value = l)
+          modelValue: P.value,
+          "onUpdate:modelValue": o[0] || (o[0] = (l) => P.value = l)
         }, _e.value, {
           onTag: Le,
           onSearchChange: Fe,
-          onOpen: Ne,
-          onClose: Re
-        }), K({
-          singleLabel: a(({ option: l }) => [
-            e.optionWithPreview ? (c(), v(r(Q), {
+          onOpen: ze,
+          onClose: Ne
+        }), J({
+          singleLabel: r(({ option: l }) => [
+            e.optionWithPreview ? (s(), u(a(Z), {
               key: 0,
               class: "option__desc",
-              size: r(ue).L
-            }, K({
-              top: a(() => [
-                g(y, {
-                  weight: r(J).SemiBold,
+              size: a(de).L
+            }, J({
+              top: r(() => [
+                S(h, {
+                  weight: a(Q).SemiBold,
                   "html-data": l[e.titleField]
                 }, null, 8, ["weight", "html-data"])
               ]),
-              right: a(() => [
+              right: r(() => [
                 O(t.$slots, "arrow")
               ]),
               _: 2
             }, [
-              l.icon ? {
+              l.icon || l.avatar ? {
                 name: "left",
-                fn: a(() => [
-                  g(q, {
+                fn: r(() => [
+                  l.icon ? (s(), u(q, {
+                    key: 0,
                     name: l.icon,
                     color: l.iconColor || "main",
                     size: "400"
-                  }, null, 8, ["name", "color"])
+                  }, null, 8, ["name", "color"])) : (s(), u(a(H), {
+                    key: 1,
+                    src: l.avatar,
+                    size: "400",
+                    rounded: ""
+                  }, null, 8, ["src"]))
                 ]),
                 key: "0"
               } : void 0,
               l.text ? {
                 name: "bottom",
-                fn: a(() => [
-                  g(y, {
+                fn: r(() => [
+                  S(h, {
                     color: "gray",
                     ellipsis: ""
                   }, {
-                    default: a(() => [
-                      E(m(l.text), 1)
+                    default: r(() => [
+                      E(f(l.text), 1)
                     ]),
                     _: 2
                   }, 1024)
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["size"])) : (c(), F("div", nt, [
-              te.value ? (c(), F("div", rt, [
-                k.avatar ? (c(), v(r(me), {
+            ]), 1032, ["size"])) : (s(), F("div", nt, [
+              le.value ? (s(), F("div", at, [
+                k.avatar ? (s(), u(a(H), {
                   key: 0,
                   src: k.avatar
-                }, null, 8, ["src"])) : (c(), v(q, {
+                }, null, 8, ["src"])) : (s(), u(q, {
                   key: 1,
                   color: l.iconColor || "main",
                   name: e.icon
                 }, null, 8, ["color", "name"]))
-              ])) : S("", !0),
+              ])) : _("", !0),
               T("div", {
-                class: ie(["mc-field-select__label-text", te.value ? "mc-field-select__label-text--indent-left" : ""])
-              }, m(l ? l[e.titleField] : k.placeholder), 3)
+                class: se(["mc-field-select__label-text", le.value ? "mc-field-select__label-text--indent-left" : ""])
+              }, f(l ? l[e.titleField] : k.placeholder), 3)
             ]))
           ]),
-          noResult: a(() => [
+          noResult: r(() => [
             O(t.$slots, "noResult", {}, () => [
-              T("span", null, m(ye.value), 1)
+              T("span", null, f(ye.value), 1)
             ])
           ]),
-          noOptions: a(() => [
+          noOptions: r(() => [
             O(t.$slots, "noOptions", {}, () => [
-              T("span", null, m(be.value), 1)
+              T("span", null, f(be.value), 1)
             ])
           ]),
-          tag: a((l) => [
-            g(r(ve), {
-              size: r(Qe).Xs,
+          tag: r((l) => [
+            S(a(ve), {
+              size: a(Qe).Xs,
               class: "multiselect__tag",
-              variation: `${r(u).component.selected}-invert`,
+              variation: `${a(d).component.selected}-invert`,
               "text-color": "black",
               closable: !l?.option?.hasOwnProperty("is_closable") || l?.option?.is_closable,
               onClose: (n) => l.remove(l.option)
             }, {
-              button: a(() => [
-                g(q, {
+              button: r(() => [
+                S(q, {
                   size: "250",
                   name: "cancel"
                 })
               ]),
-              default: a(() => [
-                E(m(l.option[e.titleField]) + " ", 1)
+              default: r(() => [
+                E(f(l.option[e.titleField]) + " ", 1)
               ]),
               _: 2
             }, 1032, ["size", "variation", "closable", "onClose"])
@@ -576,62 +583,68 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
         }, [
           k.optionsTooltip || e.optionWithPreview ? {
             name: "option",
-            fn: a(({ option: l }) => [
-              l.$isLabel ? (c(), v(y, {
+            fn: r(({ option: l }) => [
+              l.$isLabel ? (s(), u(h, {
                 key: 0,
                 color: "gray"
               }, {
-                default: a(() => [
-                  E(m(l.$groupLabel), 1)
+                default: r(() => [
+                  E(f(l.$groupLabel), 1)
                 ]),
                 _: 2
-              }, 1024)) : S("", !0),
-              e.optionWithPreview ? (c(), v(r(Q), {
+              }, 1024)) : _("", !0),
+              e.optionWithPreview ? (s(), u(a(Z), {
                 key: 1,
                 class: "option__desc",
-                size: r(ue).L
-              }, K({
-                top: a(() => [
-                  g(y, {
-                    weight: r(J).SemiBold,
+                size: a(de).L
+              }, J({
+                top: r(() => [
+                  S(h, {
+                    weight: a(Q).SemiBold,
                     "html-data": l[e.titleField]
                   }, null, 8, ["weight", "html-data"])
                 ]),
                 _: 2
               }, [
-                l.icon ? {
+                l.icon || l.avatar ? {
                   name: "left",
-                  fn: a(() => [
-                    g(q, {
+                  fn: r(() => [
+                    l.icon ? (s(), u(q, {
+                      key: 0,
                       name: l.icon,
                       color: l.iconColor || "main",
                       size: "400"
-                    }, null, 8, ["name", "color"])
+                    }, null, 8, ["name", "color"])) : (s(), u(a(H), {
+                      key: 1,
+                      src: l.avatar,
+                      size: "400",
+                      rounded: ""
+                    }, null, 8, ["src"]))
                   ]),
                   key: "0"
                 } : void 0,
                 l.text ? {
                   name: "bottom",
-                  fn: a(() => [
-                    g(y, { color: "gray" }, {
-                      default: a(() => [
-                        E(m(l.text), 1)
+                  fn: r(() => [
+                    S(h, { color: "gray" }, {
+                      default: r(() => [
+                        E(f(l.text), 1)
                       ]),
                       _: 2
                     }, 1024)
                   ]),
                   key: "1"
                 } : void 0
-              ]), 1032, ["size"])) : (c(), v(r(fe), {
+              ]), 1032, ["size"])) : (s(), u(a(fe), {
                 key: 2,
                 class: "mc-field-select__options-tooltip-target",
                 "max-width": "m",
                 color: "black",
-                placement: r(Je).Top,
+                placement: a(Je).Top,
                 content: l[e.titleField]
               }, {
-                default: a(() => [
-                  T("span", null, m(l[e.titleField]), 1)
+                default: r(() => [
+                  T("span", null, f(l[e.titleField]), 1)
                 ]),
                 _: 2
               }, 1032, ["placement", "content"]))
@@ -640,31 +653,31 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
           } : void 0
         ]), 1040, ["modelValue"])
       ]),
-      r(b).errorText.value || e.helpText || t.$slots.footer ? (c(), F("div", at, [
-        r(b).errorText.value ? (c(), v(y, {
+      a(y).errorText.value || e.helpText || t.$slots.footer ? (s(), F("div", rt, [
+        a(y).errorText.value ? (s(), u(h, {
           key: 0,
           "tag-name": "div",
           color: "red",
-          variation: r(de).Overline,
+          variation: a(me).Overline,
           "max-width": "100%",
-          "html-data": r(b).errorText.value
-        }, null, 8, ["variation", "html-data"])) : S("", !0),
-        r(b).errorText.value ? (c(), F("br", it)) : S("", !0),
+          "html-data": a(y).errorText.value
+        }, null, 8, ["variation", "html-data"])) : _("", !0),
+        a(y).errorText.value ? (s(), F("br", it)) : _("", !0),
         O(t.$slots, "footer", {}, () => [
-          e.helpText ? (c(), v(y, {
+          e.helpText ? (s(), u(h, {
             key: 0,
             "tag-name": "div",
-            variation: r(de).Overline,
+            variation: a(me).Overline,
             color: "gray",
             "max-width": "100%"
           }, {
-            default: a(() => [
-              E(m(e.helpText), 1)
+            default: r(() => [
+              E(f(e.helpText), 1)
             ]),
             _: 1
-          }, 8, ["variation"])) : S("", !0)
+          }, 8, ["variation"])) : _("", !0)
         ])
-      ])) : S("", !0)
+      ])) : _("", !0)
     ], 14, tt));
   }
 });