@topvisor/ui 1.0.28 → 1.0.30-0

package/formsExt/formsExt.js

@@ -1,12 +1,12 @@
-import { Core as oe } from "../core/app.js";
-import { defineComponent as E, ref as b, computed as z, createElementBlock as h, openBlock as p, normalizeClass as C, createCommentVNode as A, createElementVNode as M, toDisplayString as $, createVNode as U, withKeys as B, withModifiers as T, createBlock as S, createSlots as G, withCtx as k, createTextVNode as L, watch as I, toRef as le, mergeProps as Y, mergeModels as D, useModel as Q, Fragment as N, renderList as H, withDirectives as Z, vModelRadio as ae, resolveDirective as se, unref as O, renderSlot as F } from "vue";
-import { w as ne, _ as R, f as re, d as ie, u as ue, C as de } from "../.chunks/forms-qJ3k2PG6.es.js";
-import { invertKeyboardLayout as pe } from "../utils/keyboard.js";
-import { TopPopup as ce, TopPopupListItem as j, TopPopupWidgetInput as me } from "../popup/popup.js";
-import { _ as fe } from "../.chunks/menu.vue_vue_type_style_index_0_lang-CDkyMyEi.es.js";
-const te = ["../assets/formsExt.css"].map((n) => import.meta.resolve(n));
-oe.insertCSSLinkToPage(te, !0);
-const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
+import { Core as x } from "../core/app.js";
+import { defineComponent as I, ref as C, computed as F, createElementBlock as v, openBlock as u, normalizeClass as $, createCommentVNode as k, createElementVNode as E, toDisplayString as w, createVNode as K, withKeys as L, withModifiers as M, createBlock as T, createSlots as R, withCtx as A, createTextVNode as B, watch as _, toRef as oe, mergeProps as Y, mergeModels as J, useModel as X, Fragment as P, renderList as N, withDirectives as Q, vModelRadio as te, resolveDirective as le, unref as V, renderSlot as U } from "vue";
+import { w as se, _ as W, f as ae, d as ne, u as re, C as j, x as ie } from "../.chunks/forms-DvSi_Mh8.es.js";
+import { invertKeyboardLayout as ue } from "../utils/keyboard.js";
+import { TopPopup as de, TopPopupListItem as D, TopPopupWidgetInput as pe } from "../popup/popup.js";
+import { _ as ce } from "../.chunks/menu.vue_vue_type_style_index_0_lang-LMqVTnj9.es.js";
+const ee = ["../assets/formsExt.css"].map((n) => import.meta.resolve(n));
+x.insertCSSLinkToPage(ee, !0);
+const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
   __name: "editArea",
   props: {
     defaultValue: { default: "" },
@@ -30,92 +30,92 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     hint: {}
   },
   emits: ["submit", "close", "clickOnTitle"],
-  setup(n, { emit: s }) {
-    const e = n, t = s, m = b(e.defaultValue), g = b(e.isFocused), u = z(() => m.value !== e.defaultValue), f = (l) => {
-      t("submit", l), m.value = e.defaultValue;
-    }, d = () => {
-      if (e.forceShowCloseBtn && !u.value) {
-        t("close");
+  setup(n, { emit: t }) {
+    const o = n, l = t, d = C(o.defaultValue), s = C(o.isFocused), m = F(() => d.value !== o.defaultValue), c = (r) => {
+      l("submit", r), d.value = o.defaultValue;
+    }, y = () => {
+      if (o.forceShowCloseBtn && !m.value) {
+        l("close");
         return;
       }
-      m.value = e.defaultValue;
-    }, v = () => {
-      e.attachToKeyboard && t("clickOnTitle");
+      d.value = o.defaultValue;
+    }, b = () => {
+      o.attachToKeyboard && l("clickOnTitle");
     };
-    return (l, y) => (p(), h("div", {
-      class: C({
+    return (r, h) => (u(), v("div", {
+      class: $({
         "top-editArea": !0,
-        "top-editArea-attachedToKeyboard": l.attachToKeyboard
+        "top-editArea-attachedToKeyboard": r.attachToKeyboard
       })
     }, [
-      l.title ? (p(), h("div", {
+      r.title ? (u(), v("div", {
         key: 0,
         class: "top-editArea_title",
-        onClick: y[0] || (y[0] = (r) => v())
-      }, $(l.title), 1)) : A("", !0),
-      M("div", {
-        class: C({
+        onClick: h[0] || (h[0] = (i) => b())
+      }, w(r.title), 1)) : k("", !0),
+      E("div", {
+        class: $({
           "top-editArea_form": !0,
-          "top-error": l.isError,
-          "top-focus": g.value
+          "top-error": r.isError,
+          "top-focus": s.value
         })
       }, [
-        U(ne, {
-          modelValue: m.value,
-          "onUpdate:modelValue": y[1] || (y[1] = (r) => m.value = r),
-          name: l.name,
-          placeholder: l.placeholder,
-          rows: l.rows,
-          minHeight: l.minHeight,
-          expandable: l.expandable,
-          disabled: l.disabled,
-          readonly: l.readonly,
-          isError: l.isError,
-          hint: l.hint,
+        K(se, {
+          modelValue: d.value,
+          "onUpdate:modelValue": h[1] || (h[1] = (i) => d.value = i),
+          name: r.name,
+          placeholder: r.placeholder,
+          rows: r.rows,
+          minHeight: r.minHeight,
+          expandable: r.expandable,
+          disabled: r.disabled,
+          readonly: r.readonly,
+          isError: r.isError,
+          hint: r.hint,
           class: "top-editArea_element",
-          onFocus: y[2] || (y[2] = () => g.value = !0),
-          onBlur: y[3] || (y[3] = () => g.value = !1),
+          onFocus: h[2] || (h[2] = () => s.value = !0),
+          onBlur: h[3] || (h[3] = () => s.value = !1),
           onKeyup: [
-            B(d, ["esc"]),
-            y[4] || (y[4] = B(T((r) => f(m.value), ["ctrl"]), ["enter"]))
+            L(y, ["esc"]),
+            h[4] || (h[4] = L(M((i) => c(d.value), ["ctrl"]), ["enter"]))
           ]
         }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint"]),
-        M("div", ve, [
-          u.value || l.forceShowCloseBtn ? (p(), S(R, {
+        E("div", me, [
+          m.value || r.forceShowCloseBtn ? (u(), T(W, {
             key: 0,
-            icon: l.$core.state.isMobile ? "" : "",
+            icon: r.$core.state.isMobile ? "" : "",
             class: "top-editArea_button",
             color: "theme",
             styling: "soft",
-            onClick: d
-          }, G({ _: 2 }, [
-            l.$core.state.isMobile ? void 0 : {
+            onClick: y
+          }, R({ _: 2 }, [
+            r.$core.state.isMobile ? void 0 : {
               name: "default",
-              fn: k(() => [
-                L($(l.cancelText), 1)
+              fn: A(() => [
+                B(w(r.cancelText), 1)
               ]),
               key: "0"
             }
-          ]), 1032, ["icon"])) : A("", !0),
-          u.value ? (p(), S(R, {
+          ]), 1032, ["icon"])) : k("", !0),
+          m.value ? (u(), T(W, {
             key: 1,
             class: "top-editArea_button",
-            icon: l.$core.state.isMobile ? "" : "",
-            onClick: y[5] || (y[5] = (r) => f(m.value))
-          }, G({ _: 2 }, [
-            l.$core.state.isMobile ? void 0 : {
+            icon: r.$core.state.isMobile ? "" : "",
+            onClick: h[5] || (h[5] = (i) => c(d.value))
+          }, R({ _: 2 }, [
+            r.$core.state.isMobile ? void 0 : {
               name: "default",
-              fn: k(() => [
-                L($(l.submitText), 1)
+              fn: A(() => [
+                B(w(r.submitText), 1)
               ]),
               key: "0"
             }
-          ]), 1032, ["icon"])) : A("", !0)
+          ]), 1032, ["icon"])) : k("", !0)
         ])
       ], 2)
     ], 2));
   }
-}), he = { class: "top-editInput" }, ge = /* @__PURE__ */ E({
+}), ve = { class: "top-editInput" }, ye = /* @__PURE__ */ I({
   __name: "editInput",
   props: {
     modelValue: {},
@@ -123,34 +123,34 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     button: {}
   },
   emits: ["update:modelValue"],
-  setup(n, { emit: s }) {
-    const e = n, t = b(e.modelValue);
-    I(le(e.modelValue), () => {
-      t.value = e.modelValue;
+  setup(n, { emit: t }) {
+    const o = n, l = C(o.modelValue);
+    _(oe(o.modelValue), () => {
+      l.value = o.modelValue;
     });
-    const m = s, g = () => {
-      m("update:modelValue", t.value);
+    const d = t, s = () => {
+      d("update:modelValue", l.value);
     };
-    return (u, f) => (p(), h("div", he, [
-      U(re, Y(u.input, {
-        onKeydownCapture: f[0] || (f[0] = B(T((d) => t.value = u.modelValue, ["stop"]), ["esc"])),
-        onKeydown: B(T(g, ["stop"]), ["enter"]),
-        modelValue: t.value,
-        "onUpdate:modelValue": f[1] || (f[1] = (d) => t.value = d)
+    return (m, c) => (u(), v("div", ve, [
+      K(ae, Y(m.input, {
+        onKeydownCapture: c[0] || (c[0] = L(M((y) => l.value = m.modelValue, ["stop"]), ["esc"])),
+        onKeydown: L(M(s, ["stop"]), ["enter"]),
+        modelValue: l.value,
+        "onUpdate:modelValue": c[1] || (c[1] = (y) => l.value = y)
       }), null, 16, ["onKeydown", "modelValue"]),
-      t.value !== u.modelValue ? (p(), S(R, Y({
+      l.value !== m.modelValue ? (u(), T(W, Y({
         key: 0,
         icon: "",
         styling: "soft"
-      }, u.button, { onClick: g }), null, 16)) : A("", !0)
+      }, m.button, { onClick: s }), null, 16)) : k("", !0)
     ]));
   }
-}), be = ["data-top-icon", "onClick"], Ve = {
+}), he = ["data-top-icon", "onClick"], be = {
   key: 0,
   class: "top-radioGroup_circle"
-}, Ae = ["value", "disabled"], we = /* @__PURE__ */ E({
+}, ge = ["value", "disabled"], ke = /* @__PURE__ */ I({
   __name: "radioGroup",
-  props: /* @__PURE__ */ D({
+  props: /* @__PURE__ */ J({
     modelValue: {},
     radiosProps: {},
     showIndicator: { type: Boolean },
@@ -162,91 +162,142 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ D(["update:modelValue"], ["update:modelValue"]),
-  setup(n, { emit: s }) {
-    const e = Q(n, "modelValue"), t = n, m = b(null);
-    I(e, () => {
-      var u, f, d, v, l;
-      (u = t.radiosProps) != null && u.some((y) => y.value === e.value) || (e.value = ((d = (f = t.radiosProps) == null ? void 0 : f[0]) == null ? void 0 : d.value) ?? ""), (l = (v = m.value) == null ? void 0 : v.querySelector(".radioGroup_item-selected")) == null || l.scrollIntoView();
+  emits: ["update:modelValue"],
+  setup(n) {
+    const t = X(n, "modelValue"), o = n, l = C(null);
+    _(t, () => {
+      var s, m, c, y, b;
+      (s = o.radiosProps) != null && s.some((r) => r.value === t.value) || (t.value = ((c = (m = o.radiosProps) == null ? void 0 : m[0]) == null ? void 0 : c.value) ?? ""), (b = (y = l.value) == null ? void 0 : y.querySelector(".radioGroup_item-selected")) == null || b.scrollIntoView();
     }, { immediate: !0 });
-    const g = "radioGroup-" + Math.random();
-    return (u, f) => (p(), h("div", {
+    const d = "radioGroup-" + Math.random();
+    return (s, m) => (u(), v("div", {
       ref_key: "elRef",
-      ref: m,
-      class: C({
+      ref: l,
+      class: $({
         "top-radioGroup": !0,
         "top-scrollBarXHidding": !0,
-        ["top-size_" + u.size]: !!u.size,
-        "top-error": u.isError
+        ["top-size_" + s.size]: !!s.size,
+        "top-error": s.isError
       })
     }, [
-      (p(!0), h(N, null, H(u.radiosProps, (d) => (p(), h("label", {
-        class: C({
-          "top-radioGroup_item-selected": d.value === e.value,
+      (u(!0), v(P, null, N(s.radiosProps, (c) => (u(), v("label", {
+        class: $({
+          "top-radioGroup_item-selected": c.value === t.value,
           "top-radioGroup_item": !0,
           "top-forms-focusable": !0,
-          "top-disabled": d.disabled
+          "top-disabled": c.disabled
         }),
-        "data-top-icon": d.icon,
-        onClick: (v) => e.value = d.value
+        "data-top-icon": c.icon,
+        onClick: (y) => t.value = c.value
       }, [
-        L($(d.title) + " ", 1),
-        u.showIndicator ? (p(), h("span", Ve)) : A("", !0),
-        Z(M("input", {
-          "onUpdate:modelValue": f[0] || (f[0] = (v) => e.value = v),
-          name: g,
+        B(w(c.title) + " ", 1),
+        s.showIndicator ? (u(), v("span", be)) : k("", !0),
+        Q(E("input", {
+          "onUpdate:modelValue": m[0] || (m[0] = (y) => t.value = y),
+          name: d,
           type: "radio",
-          class: C({
+          class: $({
             "top-unvisible": !0
           }),
-          value: d.value,
-          disabled: d.disabled
-        }, null, 8, Ae), [
-          [ae, e.value]
+          value: c.value,
+          disabled: c.disabled
+        }, null, 8, ge), [
+          [te, t.value]
         ])
-      ], 10, be))), 256))
+      ], 10, he))), 256))
     ], 2));
   }
-}), Ce = (n, s, e) => {
-  const t = b([]), m = b(!1);
-  let g = "", u;
+}), Ve = ["data-top-icon"], Ce = ["value", "checked", "disabled", "onChange"], $e = /* @__PURE__ */ I({
+  __name: "checkboxGroup",
+  props: /* @__PURE__ */ J({
+    modelValue: {},
+    items: {},
+    size: { default: "s" },
+    styling: { default: "outline" },
+    isError: { type: Boolean }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const t = X(n, "modelValue"), o = (l) => {
+      const d = [...t.value], s = d.indexOf(l);
+      s === -1 ? d.push(l) : d.splice(s, 1), t.value = d;
+    };
+    return (l, d) => (u(), v("div", {
+      class: $({
+        "top-checkboxGroup": !0,
+        ["top-checkboxGroup-" + l.styling]: !0,
+        "top-scrollBarXHidding": !0,
+        ["top-size_" + l.size]: !!l.size,
+        "top-error": l.isError
+      })
+    }, [
+      (u(!0), v(P, null, N(l.items, (s) => (u(), v("label", {
+        key: s.id,
+        class: $({
+          "top-checkboxGroup_item": !0,
+          "top-checkboxGroup_item-selected": t.value.includes(s.id),
+          "top-forms-focusable": !0,
+          "top-disabled": s.disabled
+        }),
+        "data-top-icon": s.icon
+      }, [
+        E("input", {
+          type: "checkbox",
+          class: "top-unvisible",
+          value: s.id,
+          checked: t.value.includes(s.id),
+          disabled: s.disabled,
+          onChange: (m) => o(s.id)
+        }, null, 40, Ce),
+        B(" " + w(s.title), 1)
+      ], 10, Ve))), 128))
+    ], 2));
+  }
+}), we = (n, t, o) => {
+  const l = C([]), d = C(!1);
+  let s = "", m;
   n && !n.params.limit && (n.params.limit = 100);
-  const f = async () => {
+  const c = async () => {
     if (!n) return;
-    let r, V;
-    if (e && (n.cache ??= /* @__PURE__ */ new Map(), V = JSON.stringify(n.params), r = n.cache.get(V), r))
-      return r;
-    if (m.value = !0, r = await n.call(), m.value = !1, r.errors) return;
-    if (!Array.isArray(r.result)) {
+    let i, S;
+    if (o && (n.cache ??= /* @__PURE__ */ new Map(), S = JSON.stringify(n.params), i = n.cache.get(S), i))
+      return i;
+    if (d.value = !0, i = await n.call(), d.value = !1, i.errors) return;
+    if (!Array.isArray(i.result)) {
       console.warn("В result ожидался массив");
       return;
     }
-    const _ = r.result.findIndex((P) => P.id === void 0 || P.name === void 0);
-    if (_ !== -1) {
-      console.warn(`В result[${_}] нет id или name`);
+    const z = i.result.findIndex((O) => O.id === void 0 || O.name === void 0);
+    if (z !== -1) {
+      console.warn(`В result[${z}] нет id или name`);
       return;
     }
-    return e && n.cache.set(V, r), r;
-  }, d = async () => {
+    return o && n.cache.set(S, i), i;
+  }, y = async () => {
     if (!n) return;
-    n.params.offset = 0, n.params.search = g;
-    const r = await f();
-    r && (u = r.nextOffset, t.value = r.result);
-  }, v = async () => {
-    if (!n || !u || m.value) return;
-    n.params.offset = u, n.params.search = g;
-    const r = await f();
-    r && (u = r.nextOffset, t.value = t.value.concat(r.result));
-  }, l = ie(() => d(), 200);
+    n.params.offset = 0, n.params.search = s;
+    const i = await c();
+    i && (m = i.nextOffset, l.value = i.result);
+  }, b = async () => {
+    if (!n || !m || d.value) return;
+    n.params.offset = m, n.params.search = s;
+    const i = await c();
+    i && (m = i.nextOffset, l.value = l.value.concat(i.result));
+  }, r = ne(() => y(), 200);
   return {
-    items: t,
-    isLoading: m,
-    loadAppend: v,
-    setSearchTextAndLoad: (r, V = !0) => {
-      n && (r.length < s || r === g && t.value.length || (g = r, V ? l() : d()));
+    items: l,
+    isLoading: d,
+    loadAppend: b,
+    setSearchTextAndLoad: (i, S = !0) => {
+      n && (i.length < t || i === s && l.value.length || (s = i, S ? r() : y()));
     }
   };
-}, $e = { class: "top-selector2_itemMulti top-ellipsis" }, ke = /* @__PURE__ */ E({
+}, Ae = { class: "top-selector2_itemMulti top-ellipsis" }, Te = /* @__PURE__ */ I({
   __name: "itemMulti",
   props: {
     id: {},
@@ -254,13 +305,13 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
   },
   emits: ["delete"],
   setup(n) {
-    return (s, e) => (p(), h("div", $e, [
-      L($(s.name) + " ", 1),
-      M("span", {
+    return (t, o) => (u(), v("div", Ae, [
+      B(w(t.name) + " ", 1),
+      E("span", {
         class: "top-selector2_itemMultiDelete",
         "data-top-icon": "",
-        onClick: e[0] || (e[0] = (t) => s.$emit("delete", s.id)),
-        onMousedown: e[1] || (e[1] = T(() => {
+        onClick: o[0] || (o[0] = (l) => t.$emit("delete", t.id)),
+        onMousedown: o[1] || (o[1] = M(() => {
         }, ["stop"]))
       }, null, 32)
     ]));
@@ -268,12 +319,12 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
 }), Se = {
   key: 0,
   class: "top-selector2_activeItems"
-}, Te = {
+}, Be = {
   key: 1,
   class: "top-selector2_activeName top-ellipsis"
-}, Ie = /* @__PURE__ */ E({
+}, Ie = /* @__PURE__ */ I({
   __name: "selector2",
-  props: /* @__PURE__ */ D({
+  props: /* @__PURE__ */ J({
     modelValue: {},
     items: { default: () => [] },
     multiselect: { type: Boolean },
@@ -295,175 +346,185 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
   }),
   emits: ["update:modelValue"],
   setup(n) {
-    const s = n, e = Q(n, "modelValue"), t = b(""), m = () => {
-      t.value = "", v.items.value = [];
-    }, g = {
+    const t = n, o = X(n, "modelValue"), l = C(""), d = () => {
+      l.value = "", b.items.value = [];
+    }, s = {
       id: 0,
-      name: ue().Common.All
-    }, u = b(null), f = b(null), d = () => {
-      var o;
-      return (o = u.value) == null ? void 0 : o.popup;
+      name: re().Common.All
+    }, m = C(null), c = C(null), y = () => {
+      var e;
+      return (e = m.value) == null ? void 0 : e.popup;
     };
-    window.__STORYBOOK_PREVIEW__ && !s.modelValue && I(
-      () => s.multiselect,
+    window.__STORYBOOK_PREVIEW__ && !t.modelValue && _(
+      () => t.multiselect,
       () => {
-        e.value = s.multiselect ? [] : { id: null, name: "" };
+        o.value = t.multiselect ? [] : { id: null, name: "" };
       },
       { immediate: !0 }
     );
-    const v = Ce(s.apiRequest, s.minLength, s.useCache), l = z(() => {
-      const o = [];
-      return !s.multiselect && s.appendAllValue && o.push(g), s.items.forEach((a) => o.push({ ...a })), o;
-    }), y = (o, a = !0) => a && o.id === null ? Array.isArray(e.value) ? e.value.some((c) => c.id === o.id && c.name === o.name) : o.name === e.value.name : Array.isArray(e.value) ? e.value.some((c) => c.id === o.id) : o.id === e.value.id, r = z(() => {
-      const o = t.value.toLowerCase(), a = pe(o);
-      let c = [];
-      return l.value.forEach((i) => {
-        const w = i.name.toLowerCase();
-        (i.id === Number(o) || w.includes(o) || w.includes(a)) && (w === o || w === a ? c.unshift(i) : c.push(i));
-      }), c.push(...v.items.value), s.appendSearchToResult && t.value && (!c.length || c[0].name.toLowerCase() !== o) && c.push({
+    const b = we(t.apiRequest, t.minLength, t.useCache), r = F(() => {
+      const e = [];
+      return !t.multiselect && t.appendAllValue && e.push(s), t.items.forEach((a) => e.push({ ...a })), e;
+    }), h = (e, a = !0) => a && e.id === null ? Array.isArray(o.value) ? o.value.some((f) => f.id === e.id && f.name === e.name) : e.name === o.value.name : Array.isArray(o.value) ? o.value.some((f) => f.id === e.id) : e.id === o.value.id, i = F(() => {
+      const e = l.value.toLowerCase(), a = ue(e);
+      let f = [];
+      return r.value.forEach((p) => {
+        const g = p.name.toLowerCase();
+        (p.id === Number(e) || g.includes(e) || g.includes(a)) && (g === e || g === a ? f.unshift(p) : f.push(p));
+      }), f.push(...b.items.value), t.appendSearchToResult && l.value && (!f.length || f[0].name.toLowerCase() !== e) && f.push({
         id: null,
-        name: t.value
-      }), s.multiselect && (c = c.filter((i) => !y(i))), c;
-    }), V = b(v.isLoading.value);
-    I(v.isLoading, () => {
-      V.value = v.isLoading.value;
-    });
-    const _ = async (o) => {
-      var a, c;
-      if (s.multiselect) {
-        if (!Array.isArray(e.value) || y(o))
+        name: l.value
+      }), t.multiselect && (f = f.filter((p) => !h(p))), f;
+    }), S = async (e) => {
+      if (t.multiselect) {
+        if (!Array.isArray(o.value) || h(e))
           return;
-        s.apiRequest && t.value && (V.value = !0);
-        const i = [...e.value];
-        i.push({ ...o }), e.value = i, de.state.isMobile ? (a = d()) == null || a.close() : setTimeout(() => {
-          var w, W, J, X;
-          (w = d()) == null || w.recalcPosition(), (X = (J = (W = d()) == null ? void 0 : W.elPopupWidget) == null ? void 0 : J.querySelector("input")) == null || X.focus(), t.value && m();
+        const a = [...o.value];
+        a.push({ ...e }), o.value = a, j.state.isMobile || setTimeout(() => {
+          var f, p, g, H;
+          (f = y()) == null || f.recalcPosition(), (H = (g = (p = y()) == null ? void 0 : p.elPopupWidget) == null ? void 0 : g.querySelector("input")) == null || H.focus(), l.value && d();
         });
       } else
-        JSON.stringify(o) !== JSON.stringify(e.value) && (e.value = { ...o }), (c = d()) == null || c.close();
-    }, P = () => {
-      if (!Array.isArray(e.value)) {
-        const a = (l.value.findIndex((c) => c.id === e.value.id) + 1) % l.value.length;
-        e.value = { ...l.value[a] };
+        JSON.stringify(e) !== JSON.stringify(o.value) && (o.value = { ...e });
+    }, z = () => {
+      if (!Array.isArray(o.value)) {
+        const a = (r.value.findIndex((f) => f.id === o.value.id) + 1) % r.value.length;
+        o.value = { ...r.value[a] };
       }
-    }, q = async (o) => {
-      Array.isArray(e.value) && (e.value = e.value.filter((a) => a.id !== o), setTimeout(() => {
+    }, O = async (e) => {
+      Array.isArray(o.value) && (o.value = o.value.filter((a) => a.id !== e), setTimeout(() => {
         var a;
-        (a = d()) == null || a.recalcPosition();
+        (a = y()) == null || a.recalcPosition();
       }));
-    }, K = b(!1);
-    s.apiRequest && (I(K, () => {
-      K.value && v.setSearchTextAndLoad(t.value, !1);
-    }), I(t, () => v.setSearchTextAndLoad(t.value)));
-    const x = (o) => {
-      const a = o.target;
-      a.scrollTop / (a.scrollHeight - a.offsetHeight) > 0.8 && v.loadAppend();
-    }, ee = () => {
-      var o;
-      K.value = !1, (o = f.value) == null || o.focus(), t.value && m();
+    }, G = C(!1);
+    t.apiRequest && (_(G, () => {
+      G.value && b.setSearchTextAndLoad(l.value, !1);
+    }), _(l, () => b.setSearchTextAndLoad(l.value)));
+    const Z = (e) => {
+      const a = e.target;
+      a.scrollTop / (a.scrollHeight - a.offsetHeight) > 0.8 && b.loadAppend();
+    }, q = () => {
+      var e;
+      G.value = !1, (e = c.value) == null || e.focus(), l.value && d();
     };
-    return (o, a) => {
-      const c = se("top-focus");
-      return p(), S(O(ce), {
+    return (e, a) => {
+      const f = le("top-focus");
+      return u(), T(V(de), {
         ref_key: "popupRef",
-        ref: u,
-        onOpen: a[3] || (a[3] = (i) => K.value = !0),
-        onClose: a[4] || (a[4] = (i) => ee()),
-        onScrollContentList: a[5] || (a[5] = (i) => o.apiRequest ? x(i) : void 0),
+        ref: m,
+        onOpen: a[3] || (a[3] = (p) => G.value = !0),
+        onClose: a[4] || (a[4] = (p) => q()),
+        onScrollContentList: a[5] || (a[5] = (p) => e.apiRequest ? Z(p) : void 0),
         notch: !1,
         transitionDuration: 0
-      }, G({
-        opener: k(() => [
-          Z((p(), h("div", {
+      }, R({
+        opener: A(() => [
+          Q((u(), v("div", {
             ref_key: "elRef",
-            ref: f,
-            class: C({
+            ref: c,
+            class: $({
               "top-selector2": !0,
-              "top-selector2-multiselect": o.multiselect,
-              ["top-size_" + o.size]: !0,
-              "top-disabled": o.disabled,
-              "top-forms-focusable": !o.disabled,
-              "top-error": o.isError
+              "top-selector2-multiselect": e.multiselect,
+              ["top-size_" + e.size]: !0,
+              "top-disabled": e.disabled,
+              "top-forms-focusable": !e.disabled,
+              "top-error": e.isError
             }),
             onKeydown: [
-              a[0] || (a[0] = B(T((i) => i.currentTarget.click(), ["stop", "prevent"]), ["up", "down", "enter", "space"])),
-              a[1] || (a[1] = B((i) => e.value = [], ["delete"]))
+              a[0] || (a[0] = L(M((p) => p.currentTarget.click(), ["stop", "prevent"]), ["up", "down", "enter", "space"])),
+              a[1] || (a[1] = L((p) => o.value = [], ["delete"]))
             ],
             tabindex: "0"
           }, [
-            o.multiselect ? (p(), h("div", Se, [
-              (p(!0), h(N, null, H(e.value, (i) => (p(), S(ke, {
-                id: i.id,
-                name: i.name,
-                onDelete: q
+            e.multiselect ? (u(), v("div", Se, [
+              (u(!0), v(P, null, N(o.value, (p) => (u(), T(Te, {
+                id: p.id,
+                name: p.name,
+                onDelete: O
               }, null, 8, ["id", "name"]))), 256))
-            ])) : A("", !0),
-            o.multiselect ? A("", !0) : (p(), h("span", Te, $(Array.isArray(e.value) ? "" : e.value.name), 1)),
-            o.addChanger && !o.multiselect && l.value.length > 1 && !o.disabled ? (p(), h("span", {
+            ])) : k("", !0),
+            e.multiselect ? k("", !0) : (u(), v("span", Be, w(Array.isArray(o.value) ? "" : o.value.name), 1)),
+            e.addChanger && !e.multiselect && r.value.length > 1 && !e.disabled ? (u(), v("span", {
               key: 2,
               class: "top-changer top-changer-selector",
-              onClick: T(P, ["stop"])
-            })) : A("", !0)
+              onClick: M(z, ["stop"])
+            })) : k("", !0)
           ], 34)), [
             [
-              c,
-              o.isError,
+              f,
+              e.isError,
               void 0,
               { onupdate: !0 }
             ]
           ])
         ]),
-        contentList: k(() => [
-          (p(!0), h(N, null, H(r.value, (i) => (p(), S(O(j), {
-            class: C({
-              "top-active": !Array.isArray(e.value) && !o.multiselect && e.value.name === i.name
-            }),
-            key: i.id ?? void 0,
-            onClick: T((w) => _(i), ["stop"])
-          }, {
-            default: k(() => [
-              o.$slots.item ? F(o.$slots, "item", {
-                key: 0,
-                item: i
-              }) : (p(), h(N, { key: 1 }, [
-                L($(i.name), 1)
-              ], 64))
-            ]),
-            _: 2
-          }, 1032, ["class", "onClick"]))), 128)),
-          !V.value && !r.value.length ? (p(), S(O(j), {
-            key: 0,
-            type: "regular"
-          }, {
-            default: k(() => [
-              L($(o.$i18n.Common.No_results), 1)
-            ]),
-            _: 1
-          })) : A("", !0)
-        ]),
+        contentList: A(() => {
+          var p;
+          return [
+            (u(!0), v(P, null, N(i.value, (g) => (u(), T(V(D), {
+              class: $({
+                "top-active": !Array.isArray(o.value) && !e.multiselect && o.value.name === g.name
+              }),
+              key: g.id ?? void 0,
+              closeByClick: !e.multiselect || V(j).state.isMobile,
+              onClick: (H) => S(g)
+            }, {
+              default: A(() => [
+                e.$slots.item ? U(e.$slots, "item", {
+                  key: 0,
+                  item: g
+                }) : (u(), v(P, { key: 1 }, [
+                  B(w(g.name), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["class", "closeByClick", "onClick"]))), 128)),
+            !V(b).isLoading.value && !i.value.length ? (u(), T(V(D), {
+              key: 0,
+              type: "regular"
+            }, {
+              default: A(() => [
+                B(w(e.$i18n.Common.No_results), 1)
+              ]),
+              _: 1
+            })) : k("", !0),
+            V(b).isLoading.value && (!e.showSearch || (p = e.apiRequest) != null && p.params.offset) ? (u(), T(V(D), {
+              key: 1,
+              type: "regular"
+            }, {
+              default: A(() => [
+                K(V(ie), { type: "circles" })
+              ]),
+              _: 1
+            })) : k("", !0)
+          ];
+        }),
         _: 2
       }, [
-        o.showSearch ? {
+        e.showSearch ? {
           name: "widget",
-          fn: k(() => [
-            U(O(me), {
-              title: "Поиск",
-              icon: "",
-              modelValue: t.value,
-              "onUpdate:modelValue": a[2] || (a[2] = (i) => t.value = i),
-              isLoading: V.value,
-              placeholder: !Array.isArray(e.value) && !o.multiselect && o.showSelectedInInput ? e.value.name : o.placeholder
-            }, null, 8, ["modelValue", "isLoading", "placeholder"])
-          ]),
+          fn: A(() => {
+            var p;
+            return [
+              K(V(pe), {
+                title: "Поиск",
+                icon: "",
+                modelValue: l.value,
+                "onUpdate:modelValue": a[2] || (a[2] = (g) => l.value = g),
+                isLoading: V(b).isLoading.value && !((p = e.apiRequest) != null && p.params.offset),
+                placeholder: !Array.isArray(o.value) && !e.multiselect && e.showSelectedInInput ? o.value.name : e.placeholder
+              }, null, 8, ["modelValue", "isLoading", "placeholder"])
+            ];
+          }),
           key: "0"
         } : void 0
       ]), 1536);
     };
   }
-}), Be = ["data-top-icon"], Le = { class: "top-info_text" }, Ee = {
+}), Ee = ["data-top-icon"], Le = { class: "top-info_text" }, Me = {
   key: 0,
   class: "top-info_value"
-}, Me = /* @__PURE__ */ E({
+}, _e = /* @__PURE__ */ I({
   __name: "info",
   props: {
     icon: {},
@@ -471,29 +532,30 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     size: { default: "default" }
   },
   setup(n) {
-    return (s, e) => (p(), h("div", {
-      class: C({
+    return (t, o) => (u(), v("div", {
+      class: $({
         "top-info": !0,
-        ["top-size_" + s.size]: !0,
-        ["top-info-styling_" + s.styling]: !0
+        ["top-size_" + t.size]: !0,
+        ["top-info-styling_" + t.styling]: !0
       }),
-      "data-top-icon": s.icon
+      "data-top-icon": t.icon
     }, [
-      M("div", Le, [
-        F(s.$slots, "default")
+      E("div", Le, [
+        U(t.$slots, "default")
       ]),
-      s.$slots.additional ? (p(), h("span", Ee, [
-        F(s.$slots, "additional")
-      ])) : A("", !0)
-    ], 10, Be));
+      t.$slots.additional ? (u(), v("span", Me, [
+        U(t.$slots, "additional")
+      ])) : k("", !0)
+    ], 10, Ee));
   }
-}), Ge = ye, De = ge, He = we, Fe = Ie, Re = fe, Ue = Me;
+}), He = fe, De = ye, Fe = ke, Re = $e, Ue = Ie, We = ce, Je = _e;
 export {
-  Ge as TopEditArea,
+  Re as TopCheckboxGroup,
+  He as TopEditArea,
   De as TopEditInput,
-  Ue as TopInfo,
-  Re as TopMenu,
-  He as TopRadioGroup,
-  Fe as TopSelector2
+  Je as TopInfo,
+  We as TopMenu,
+  Fe as TopRadioGroup,
+  Ue as TopSelector2
 };
 //# sourceMappingURL=formsExt.js.map