@topvisor/ui 1.1.0 → 1.3.0

package/formsExt/formsExt.js

@@ -1,12 +1,14 @@
-import { Core as te } from "../core/app.js";
-import { defineComponent as E, ref as b, computed as z, createElementBlock as h, openBlock as p, normalizeClass as $, createCommentVNode as A, createElementVNode as M, toDisplayString as w, createVNode as R, withKeys as B, withModifiers as S, createBlock as T, createSlots as X, withCtx as k, createTextVNode as L, watch as I, toRef as le, mergeProps as Y, mergeModels as G, useModel as Q, Fragment as N, renderList as D, withDirectives as Z, vModelRadio as ae, resolveDirective as se, unref as O, renderSlot as H } from "vue";
-import { w as ne, _ as F, f as re, d as ie, u as ue, C as de } from "../.chunks/forms-BsuCen2-.es.js";
+import { Core as x } from "../core/app.js";
+import { defineComponent as M, ref as B, computed as R, createElementBlock as v, openBlock as d, normalizeClass as I, createCommentVNode as $, createElementVNode as L, toDisplayString as _, createVNode as D, withKeys as G, withModifiers as N, createBlock as w, createSlots as U, withCtx as V, createTextVNode as E, watch as P, toRef as O, mergeProps as W, mergeModels as J, useModel as Y, Fragment as z, renderList as q, withDirectives as Z, vModelRadio as te, resolveDirective as oe, unref as f, renderSlot as X, resolveDynamicComponent as le } from "vue";
+import { q as se, c as F, _ as ae, d as re, u as ne, C as j, r as ie } from "../.chunks/forms-DarRVke_.es.js";
+import { _ as ue, b as H } from "../.chunks/listItem.vue_vue_type_script_setup_true_lang-DzJ_pc-d.es.js";
+import { _ as de } from "../.chunks/widgetInput.vue_vue_type_script_setup_true_lang-xwjgBq1L.es.js";
+/* empty css                                                                 */
 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-DmY5w4yr.es.js";
-const oe = ["../assets/formsExt.css"].map((n) => import.meta.resolve(n));
-te.insertCSSLinkToPage(oe, !0);
-const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
+import { _ as je } from "../.chunks/menu.vue_vue_type_style_index_0_lang-COD_4iTy.es.js";
+const ee = ["../assets/formsExt.css"].map((a) => import.meta.resolve(a));
+x.insertCSSLinkToPage(ee, !0);
+const ce = { class: "top-editArea_footer" }, Ne = /* @__PURE__ */ M({
   __name: "editArea",
   props: {
     defaultValue: { default: "" },
@@ -27,95 +29,98 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     isError: { type: Boolean },
-    hint: {}
+    hint: {},
+    maxLength: {}
   },
   emits: ["submit", "close", "clickOnTitle"],
-  setup(n, { emit: s }) {
-    const e = n, o = s, m = b(e.defaultValue), g = b(e.isFocused), u = z(() => m.value !== e.defaultValue), f = (l) => {
-      o("submit", l), m.value = e.defaultValue;
-    }, d = () => {
-      if (e.forceShowCloseBtn && !u.value) {
+  setup(a, { emit: e }) {
+    const l = a, o = e, u = B(l.defaultValue), s = B(l.isFocused), r = R(() => u.value !== l.defaultValue), p = (i) => {
+      o("submit", i), u.value = l.defaultValue;
+    }, c = () => {
+      if (l.forceShowCloseBtn && !r.value) {
         o("close");
         return;
       }
-      m.value = e.defaultValue;
-    }, v = () => {
-      e.attachToKeyboard && o("clickOnTitle");
+      u.value = l.defaultValue;
+    }, C = () => {
+      l.attachToKeyboard && o("clickOnTitle");
     };
-    return (l, y) => (p(), h("div", {
-      class: $({
+    return (i, y) => (d(), v("div", {
+      class: I({
         "top-editArea": !0,
-        "top-editArea-attachedToKeyboard": l.attachToKeyboard
+        "top-editArea-attachedToKeyboard": i.attachToKeyboard
       })
     }, [
-      l.title ? (p(), h("div", {
+      i.title ? (d(), v("div", {
         key: 0,
         class: "top-editArea_title",
-        onClick: y[0] || (y[0] = (r) => v())
-      }, w(l.title), 1)) : A("", !0),
-      M("div", {
-        class: $({
+        onClick: y[0] || (y[0] = (k) => C())
+      }, _(i.title), 1)) : $("", !0),
+      L("div", {
+        class: I({
           "top-editArea_form": !0,
-          "top-error": l.isError,
-          "top-focus": g.value
+          "top-forms-focusable": !0,
+          "top-as-input": !0,
+          "top-error": i.isError,
+          "top-focus": s.value
         })
       }, [
-        R(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,
+        D(se, {
+          modelValue: u.value,
+          "onUpdate:modelValue": y[1] || (y[1] = (k) => u.value = k),
+          name: i.name,
+          placeholder: i.placeholder,
+          rows: i.rows,
+          minHeight: i.minHeight,
+          expandable: i.expandable,
+          disabled: i.disabled,
+          readonly: i.readonly,
+          isError: i.isError,
+          hint: i.hint,
           class: "top-editArea_element",
-          onFocus: y[2] || (y[2] = () => g.value = !0),
-          onBlur: y[3] || (y[3] = () => g.value = !1),
+          onFocus: y[2] || (y[2] = () => s.value = !0),
+          onBlur: y[3] || (y[3] = () => s.value = !1),
           onKeyup: [
-            B(d, ["esc"]),
-            y[4] || (y[4] = B(S((r) => f(m.value), ["ctrl"]), ["enter"]))
+            G(c, ["esc"]),
+            y[4] || (y[4] = G(N((k) => p(u.value), ["ctrl"]), ["enter"]))
           ]
         }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint"]),
-        M("div", ve, [
-          u.value || l.forceShowCloseBtn ? (p(), T(F, {
+        L("div", ce, [
+          r.value || i.forceShowCloseBtn ? (d(), w(F, {
             key: 0,
-            icon: l.$core.state.isMobile ? "" : "",
+            icon: i.$core.state.isMobile ? "" : "",
             class: "top-editArea_button",
             color: "theme",
             styling: "soft",
-            onClick: d
-          }, X({ _: 2 }, [
-            l.$core.state.isMobile ? void 0 : {
+            onClick: c
+          }, U({ _: 2 }, [
+            i.$core.state.isMobile ? void 0 : {
               name: "default",
-              fn: k(() => [
-                L(w(l.cancelText), 1)
+              fn: V(() => [
+                E(_(i.cancelText), 1)
               ]),
               key: "0"
             }
-          ]), 1032, ["icon"])) : A("", !0),
-          u.value ? (p(), T(F, {
+          ]), 1032, ["icon"])) : $("", !0),
+          r.value ? (d(), w(F, {
             key: 1,
             class: "top-editArea_button",
-            icon: l.$core.state.isMobile ? "" : "",
-            onClick: y[5] || (y[5] = (r) => f(m.value))
-          }, X({ _: 2 }, [
-            l.$core.state.isMobile ? void 0 : {
+            icon: i.$core.state.isMobile ? "" : "",
+            onClick: y[5] || (y[5] = (k) => p(u.value))
+          }, U({ _: 2 }, [
+            i.$core.state.isMobile ? void 0 : {
               name: "default",
-              fn: k(() => [
-                L(w(l.submitText), 1)
+              fn: V(() => [
+                E(_(i.submitText), 1)
               ]),
               key: "0"
             }
-          ]), 1032, ["icon"])) : A("", !0)
+          ]), 1032, ["icon"])) : $("", !0)
         ])
       ], 2)
     ], 2));
   }
-}), he = { class: "top-editInput" }, ge = /* @__PURE__ */ E({
+}), fe = { class: "top-editInput" }, qe = /* @__PURE__ */ M({
   __name: "editInput",
   props: {
     modelValue: {},
@@ -123,34 +128,34 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     button: {}
   },
   emits: ["update:modelValue"],
-  setup(n, { emit: s }) {
-    const e = n, o = b(e.modelValue);
-    I(le(e.modelValue), () => {
-      o.value = e.modelValue;
+  setup(a, { emit: e }) {
+    const l = a, o = B(l.modelValue);
+    P(O(l.modelValue), () => {
+      o.value = l.modelValue;
     });
-    const m = s, g = () => {
-      m("update:modelValue", o.value);
+    const u = e, s = () => {
+      u("update:modelValue", o.value);
     };
-    return (u, f) => (p(), h("div", he, [
-      R(re, Y(u.input, {
-        onKeydownCapture: f[0] || (f[0] = B(S((d) => o.value = u.modelValue, ["stop"]), ["esc"])),
-        onKeydown: B(S(g, ["stop"]), ["enter"]),
+    return (r, p) => (d(), v("div", fe, [
+      D(ae, W(r.input, {
+        onKeydownCapture: p[0] || (p[0] = G(N((c) => o.value = r.modelValue, ["stop"]), ["esc"])),
+        onKeydown: G(N(s, ["stop"]), ["enter"]),
         modelValue: o.value,
-        "onUpdate:modelValue": f[1] || (f[1] = (d) => o.value = d)
+        "onUpdate:modelValue": p[1] || (p[1] = (c) => o.value = c)
       }), null, 16, ["onKeydown", "modelValue"]),
-      o.value !== u.modelValue ? (p(), T(F, Y({
+      o.value !== r.modelValue ? (d(), w(F, W({
         key: 0,
         icon: "",
         styling: "soft"
-      }, u.button, { onClick: g }), null, 16)) : A("", !0)
+      }, r.button, { onClick: s }), null, 16)) : $("", !0)
     ]));
   }
-}), be = ["data-top-icon", "onClick"], Ve = {
+}), me = ["data-top-icon", "onClick"], ve = {
   key: 0,
   class: "top-radioGroup_circle"
-}, Ae = ["value", "disabled"], Ce = /* @__PURE__ */ E({
+}, ye = ["value", "disabled"], Fe = /* @__PURE__ */ M({
   __name: "radioGroup",
-  props: /* @__PURE__ */ G({
+  props: /* @__PURE__ */ J({
     modelValue: {},
     radiosProps: {},
     showIndicator: { type: Boolean },
@@ -162,332 +167,531 @@ const ve = { class: "top-editArea_footer" }, ye = /* @__PURE__ */ E({
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ G(["update:modelValue"], ["update:modelValue"]),
-  setup(n, { emit: s }) {
-    const e = Q(n, "modelValue"), o = n, m = b(null);
-    I(e, () => {
-      var u, f, d, v, l;
-      (u = o.radiosProps) != null && u.some((y) => y.value === e.value) || (e.value = ((d = (f = o.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(a) {
+    const e = Y(a, "modelValue"), l = a, o = B(null);
+    P(e, () => {
+      var s, r, p, c, C;
+      (s = l.radiosProps) != null && s.some((i) => i.value === e.value) || (e.value = ((p = (r = l.radiosProps) == null ? void 0 : r[0]) == null ? void 0 : p.value) ?? ""), (C = (c = o.value) == null ? void 0 : c.querySelector(".radioGroup_item-selected")) == null || C.scrollIntoView();
     }, { immediate: !0 });
-    const g = "radioGroup-" + Math.random();
-    return (u, f) => (p(), h("div", {
+    const u = "radioGroup-" + Math.random();
+    return (s, r) => (d(), v("div", {
       ref_key: "elRef",
-      ref: m,
-      class: $({
+      ref: o,
+      class: I({
         "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, D(u.radiosProps, (d) => (p(), h("label", {
-        class: $({
-          "top-radioGroup_item-selected": d.value === e.value,
+      (d(!0), v(z, null, q(s.radiosProps, (p) => (d(), v("label", {
+        class: I({
+          "top-radioGroup_item-selected": p.value === e.value,
           "top-radioGroup_item": !0,
           "top-forms-focusable": !0,
-          "top-disabled": d.disabled
+          "top-disabled": p.disabled
         }),
-        "data-top-icon": d.icon,
-        onClick: (v) => e.value = d.value
+        "data-top-icon": p.icon,
+        onClick: (c) => e.value = p.value
       }, [
-        L(w(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,
+        E(_(p.title) + " ", 1),
+        s.showIndicator ? (d(), v("span", ve)) : $("", !0),
+        Z(L("input", {
+          "onUpdate:modelValue": r[0] || (r[0] = (c) => e.value = c),
+          name: u,
           type: "radio",
-          class: $({
+          class: I({
             "top-unvisible": !0
           }),
-          value: d.value,
-          disabled: d.disabled
-        }, null, 8, Ae), [
-          [ae, e.value]
+          value: p.value,
+          disabled: p.disabled
+        }, null, 8, ye), [
+          [te, e.value]
         ])
-      ], 10, be))), 256))
+      ], 10, me))), 256))
     ], 2));
   }
-}), $e = (n, s, e) => {
-  const o = b([]), m = b(!1);
-  let g = "", u;
-  n && !n.params.limit && (n.params.limit = 100);
-  const f = 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)) {
-      console.warn("В result ожидался массив");
-      return;
-    }
-    const _ = r.result.findIndex((P) => P.id === void 0 || P.name === void 0);
-    if (_ !== -1) {
-      console.warn(`В result[${_}] нет id или name`);
-      return;
-    }
-    return e && n.cache.set(V, r), r;
-  }, d = async () => {
-    if (!n) return;
-    n.params.offset = 0, n.params.search = g;
-    const r = await f();
-    r && (u = r.nextOffset, o.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, o.value = o.value.concat(r.result));
-  }, l = ie(() => d(), 200);
-  return {
-    items: o,
-    isLoading: m,
-    loadAppend: v,
-    setSearchTextAndLoad: (r, V = !0) => {
-      n && (r.length < s || r === g && o.value.length || (g = r, V ? l() : d()));
-    }
-  };
-}, we = { class: "top-selector2_itemMulti top-ellipsis" }, ke = /* @__PURE__ */ E({
+}), he = ["data-top-icon"], be = ["value", "checked", "disabled", "onChange"], He = /* @__PURE__ */ M({
+  __name: "checkboxGroup",
+  props: /* @__PURE__ */ J({
+    modelValue: {},
+    items: {},
+    size: { default: "s" },
+    styling: { default: "outline" },
+    isError: { type: Boolean }
+  }, {
+    modelValue: {
+      required: !0
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(a) {
+    const e = Y(a, "modelValue"), l = (o) => {
+      const u = [...e.value], s = u.indexOf(o);
+      s === -1 ? u.push(o) : u.splice(s, 1), e.value = u;
+    };
+    return (o, u) => (d(), v("div", {
+      class: I({
+        "top-checkboxGroup": !0,
+        ["top-checkboxGroup-" + o.styling]: !0,
+        "top-scrollBarXHidding": !0,
+        ["top-size_" + o.size]: !!o.size,
+        "top-error": o.isError
+      })
+    }, [
+      (d(!0), v(z, null, q(o.items, (s) => (d(), v("label", {
+        key: s.id,
+        class: I({
+          "top-checkboxGroup_item": !0,
+          "top-checkboxGroup_item-selected": e.value.includes(s.id),
+          "top-forms-focusable": !0,
+          "top-disabled": s.disabled
+        }),
+        "data-top-icon": s.icon
+      }, [
+        L("input", {
+          type: "checkbox",
+          class: "top-unvisible",
+          value: s.id,
+          checked: e.value.includes(s.id),
+          disabled: s.disabled,
+          onChange: (r) => l(s.id)
+        }, null, 40, be),
+        E(" " + _(s.title), 1)
+      ], 10, he))), 128))
+    ], 2));
+  }
+}), ge = { class: "top-selector2_itemMulti top-ellipsis" }, ke = /* @__PURE__ */ M({
   __name: "itemMulti",
   props: {
     id: {},
     name: {}
   },
   emits: ["delete"],
-  setup(n) {
-    return (s, e) => (p(), h("div", we, [
-      L(w(s.name) + " ", 1),
-      M("span", {
+  setup(a) {
+    return (e, l) => (d(), v("div", ge, [
+      E(_(e.name) + " ", 1),
+      L("span", {
         class: "top-selector2_itemMultiDelete",
         "data-top-icon": "",
-        onClick: e[0] || (e[0] = (o) => s.$emit("delete", s.id)),
-        onMousedown: e[1] || (e[1] = S(() => {
+        onClick: l[0] || (l[0] = (o) => e.$emit("delete", e.id)),
+        onMousedown: l[1] || (l[1] = N(() => {
         }, ["stop"]))
       }, null, 32)
     ]));
   }
-}), Te = {
+}), Te = (a, e, l, o) => {
+  const u = B([]), s = /* @__PURE__ */ new Map(), r = B(!1);
+  let p = "", c;
+  a && !a.params.limit && (a.params.limit = 100);
+  const C = async () => {
+    if (!a) return;
+    let h;
+    if (o) {
+      h = JSON.stringify(a.params);
+      const S = s.get(h);
+      if (S)
+        return S;
+    }
+    r.value = !0;
+    const g = await a.call();
+    if (r.value = !1, g.errors) return;
+    if (!Array.isArray(g.result)) {
+      console.warn("Array expected in `res.result`");
+      return;
+    }
+    const K = g.result.findIndex((S) => S.id === void 0 || S.name === void 0);
+    if (K !== -1) {
+      console.warn(`В result[${K}] нет id или name`);
+      return;
+    }
+    return h && s.set(h, g), g;
+  }, i = async (h) => {
+    if (!a) return;
+    if (h) {
+      if (!c || r.value) return;
+      a.params.offset = c;
+    } else
+      a.params.offset = 0;
+    e == null || e(p);
+    const g = await C();
+    g && (c = g.nextOffset, h ? u.value = u.value.concat(g.result) : u.value = g.result);
+  }, y = re(() => i(!1), 200);
+  return {
+    apiRequest: a,
+    items: u,
+    isLoading: r,
+    load: i,
+    setSearchTextAndLoad: (h, g = !0) => {
+      a && (h.length < l || h === p && u.value.length || (p = h, g ? y() : i(!1)));
+    }
+  };
+}, Ae = 0, Q = (a, e, l = !0) => l && e.id === null ? Array.isArray(a) ? a.some((o) => o.id === e.id && o.name === e.name) : e.name === a.name : Array.isArray(a) ? a.some((o) => o.id === e.id) : e.id === a.id, Ce = (a, e, l, o, u, s, r, p) => {
+  const c = B(""), C = {
+    id: Ae,
+    name: ne().Common.All
+  }, i = () => {
+    c.value = "", p.items.value = [];
+  }, y = () => !(!p.apiRequest || s.value !== "inline" || c.value.length >= r), k = R(() => {
+    var t;
+    const b = [];
+    return !l && o.value && b.push(C), (t = e.value) == null || t.forEach((n) => b.push({ ...n })), b;
+  }), h = R(() => {
+    const b = c.value.toLowerCase(), t = pe(b);
+    let n = [];
+    return k.value.forEach((T) => {
+      const m = T.name.toLowerCase();
+      (T.id === Number(b) || m.includes(b) || m.includes(t)) && (m === b || m === t ? n.unshift(T) : n.push(T));
+    }), n.push(...p.items.value), u.value && c.value && (!n.length || n[0].name.toLowerCase() !== b) && n.push({
+      id: null,
+      name: c.value
+    }), l && (n = n.filter((T) => !Q(a.value, T))), n;
+  });
+  return {
+    searchText: c,
+    resetSearch: i,
+    genIsShort: y,
+    items: k,
+    itemsForShow: h,
+    selectItem: (b) => {
+      l && Array.isArray(a.value) ? Q(a.value, b) || (a.value = [...a.value, b]) : a.value = b;
+    },
+    selectNextItem: () => {
+      if (!Array.isArray(a.value)) {
+        const t = (h.value.findIndex((n) => n.id === a.value.id) + 1) % h.value.length;
+        a.value = { ...h.value[t] };
+      }
+    },
+    deleteItemById: async (b) => {
+      Array.isArray(a.value) && (a.value = a.value.filter((t) => t.id !== b));
+    }
+  };
+}, $e = {
   key: 0,
   class: "top-selector2_activeItems"
-}, Se = {
+}, _e = {
   key: 1,
   class: "top-selector2_activeName top-ellipsis"
-}, Ie = /* @__PURE__ */ E({
+}, Ve = {
+  key: 2,
+  class: "top-selector2_placeholder top-ellipsis"
+}, Ue = /* @__PURE__ */ M({
   __name: "selector2",
-  props: /* @__PURE__ */ G({
+  props: /* @__PURE__ */ J({
     modelValue: {},
     items: { default: () => [] },
-    multiselect: { type: Boolean },
+    title: {},
     disabled: { type: Boolean },
+    modificator: {},
     size: { default: "s" },
     isError: { type: Boolean },
-    apiRequest: {},
+    searchType: { default: "popup" },
+    placeholder: {},
+    api: {},
+    apiSetSearchParams: {},
     minLength: { default: 0 },
     useCache: { type: Boolean },
     appendSearchToResult: { type: Boolean },
+    multiselect: { type: Boolean },
     appendAllValue: { type: Boolean },
     addChanger: { type: Boolean },
-    placeholder: {},
-    showSelectedInInput: { type: Boolean, default: !0 }
+    buttonProps: {},
+    selectedAsPlaceholder: { type: Boolean }
   }, {
-    modelValue: {},
+    modelValue: { required: !0 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(n) {
-    const s = n, e = Q(n, "modelValue"), o = b(""), m = () => {
-      o.value = "", v.items.value = [];
-    }, g = {
-      id: 0,
-      name: ue().Common.All
-    }, u = b(null), f = b(null), d = () => {
+  setup(a) {
+    const e = a, l = Y(a, "modelValue"), o = R(() => e.searchType === "inline" && e.multiselect || e.searchType === "inline" && j.state.isMobile ? "popup" : e.searchType);
+    let u = 0;
+    o.value === "inline" && e.minLength && (u = e.minLength);
+    const s = Te(e.api, e.apiSetSearchParams, u, e.useCache), r = Ce(
+      l,
+      O(e, "items"),
+      e.multiselect,
+      O(e, "appendAllValue"),
+      O(e, "appendSearchToResult"),
+      o,
+      u,
+      s
+    ), p = R(() => e.buttonProps ? "TopButton" : o.value === "inline" ? "TopInput" : "div"), c = B(null), C = () => {
       var t;
-      return (t = u.value) == null ? void 0 : t.popup;
+      return (t = c.value) == null ? void 0 : t.popup;
     };
-    window.__STORYBOOK_PREVIEW__ && !s.modelValue && I(
-      () => s.multiselect,
-      () => {
-        e.value = s.multiselect ? [] : { id: null, name: "" };
-      },
-      { immediate: !0 }
-    );
-    const v = $e(s.apiRequest, s.minLength, s.useCache), l = z(() => {
-      const t = [];
-      return !s.multiselect && s.appendAllValue && t.push(g), s.items.forEach((a) => t.push({ ...a })), t;
-    }), y = (t, a = !0) => a && t.id === null ? Array.isArray(e.value) ? e.value.some((c) => c.id === t.id && c.name === t.name) : t.name === e.value.name : Array.isArray(e.value) ? e.value.some((c) => c.id === t.id) : t.id === e.value.id, r = z(() => {
-      const t = o.value.toLowerCase(), a = pe(t);
-      let c = [];
-      return l.value.forEach((i) => {
-        const C = i.name.toLowerCase();
-        (i.id === Number(t) || C.includes(t) || C.includes(a)) && (C === t || C === a ? c.unshift(i) : c.push(i));
-      }), c.push(...v.items.value), s.appendSearchToResult && o.value && (!c.length || c[0].name.toLowerCase() !== t) && c.push({
-        id: null,
-        name: o.value
-      }), s.multiselect && (c = c.filter((i) => !y(i))), c;
-    }), V = b(v.isLoading.value);
-    I(v.isLoading, () => {
-      V.value = v.isLoading.value;
+    s.apiRequest && P(r.searchText, () => {
+      var t;
+      s.setSearchTextAndLoad(r.searchText.value), o.value === "inline" && r.genIsShort() && ((t = C()) == null || t.close());
+    }), P(l, () => {
+      o.value === "inline" && r.resetSearch();
     });
-    const _ = async (t) => {
-      var a, c;
-      if (s.multiselect) {
-        if (!Array.isArray(e.value) || y(t))
-          return;
-        s.apiRequest && o.value && (V.value = !0);
-        const i = [...e.value];
-        i.push({ ...t }), e.value = i, de.state.isMobile ? (a = d()) == null || a.close() : setTimeout(() => {
-          var C, U, W, J;
-          (C = d()) == null || C.recalcPosition(), (J = (W = (U = d()) == null ? void 0 : U.elPopupWidget) == null ? void 0 : W.querySelector("input")) == null || J.focus(), o.value && m();
-        });
-      } else
-        JSON.stringify(t) !== JSON.stringify(e.value) && (e.value = { ...t }), (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] };
+    const i = R(() => {
+      var t;
+      return Array.isArray(l.value) || e.multiselect || !e.selectedAsPlaceholder && o.value !== "inline" ? e.placeholder : ((t = l.value) == null ? void 0 : t.name) || e.placeholder;
+    }), y = (t) => {
+      var m, A;
+      let n = !1;
+      switch (t.key) {
+        case "Delete":
+        case "Backspace":
+          Array.isArray(l.value) && (t.preventDefault(), t.stopPropagation(), l.value.pop());
+          break;
+        case "ArrowUp":
+        case "ArrowRight":
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "Enter":
+        case " ":
+          n = !0;
+          break;
+        case "Escape":
+          o.value === "inline" && r.resetSearch();
+          break;
       }
-    }, q = async (t) => {
-      Array.isArray(e.value) && (e.value = e.value.filter((a) => a.id !== t), setTimeout(() => {
-        var a;
-        (a = d()) == null || a.recalcPosition();
-      }));
-    }, K = b(!1);
-    s.apiRequest && (I(K, () => {
-      K.value && v.setSearchTextAndLoad(o.value, !1);
-    }), I(o, () => v.setSearchTextAndLoad(o.value)));
-    const x = (t) => {
-      const a = t.target;
-      a.scrollTop / (a.scrollHeight - a.offsetHeight) > 0.8 && v.loadAppend();
-    }, ee = () => {
+      const T = t.key.length === 1 && !t.ctrlKey && !t.metaKey;
+      (o.value === "popup" || o.value === "inline") && T && (n = !0), (m = C()) != null && m.elPopup && (n = !1), n && (o.value === "popup" && (t.preventDefault(), t.stopPropagation(), T && (r.searchText.value || (r.searchText.value = t.key))), (A = t.currentTarget) == null || A.click());
+    };
+    let k = !1;
+    const h = (t) => {
+      var n;
+      k || o.value === "inline" && ((n = t.currentTarget) == null || n.click());
+    }, g = (t) => {
+      var n, T;
+      t.preventDefault(), k = !0, (T = (n = t.currentTarget) == null ? void 0 : n.parentElement) == null || T.focus(), k = !1, r.selectNextItem();
+    }, K = () => {
       var t;
-      K.value = !1, (t = f.value) == null || t.focus(), o.value && m();
+      if (k = !0, s.apiRequest) {
+        if (r.genIsShort()) {
+          (t = C()) == null || t.close();
+          return;
+        }
+        s.setSearchTextAndLoad(r.searchText.value, !1);
+      }
+    }, S = () => {
+      setTimeout(() => {
+        k = !1;
+      }, 100), o.value === "popup" && r.searchText.value && r.resetSearch();
+    }, b = (t) => {
+      const n = t.target;
+      n.scrollTop / (n.scrollHeight - n.offsetHeight) > 0.8 && s.load(!0);
     };
-    return (t, a) => {
-      const c = se("top-focus");
-      return p(), T(O(ce), {
+    return window.__STORYBOOK_PREVIEW__ && (P(
+      () => e.multiselect,
+      () => {
+        e.multiselect ? Array.isArray(l.value) || (l.value = [
+          {
+            id: 1,
+            name: "Выбери меня"
+          }
+        ]) : Array.isArray(l.value) && (l.value = {
+          id: null,
+          name: ""
+        });
+      },
+      { immediate: !0 }
+    ), P(
+      () => e.searchType,
+      () => {
+        setTimeout(() => {
+          location.reload();
+        }, 500);
+      }
+    )), (t, n) => {
+      const T = oe("top-focus");
+      return d(), w(f(ue), {
         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) => t.apiRequest ? x(i) : void 0),
-        notch: !1,
+        ref: c,
+        onOpen: n[3] || (n[3] = (m) => K()),
+        onClose: n[4] || (n[4] = (m) => S()),
+        onScrollContentList: n[5] || (n[5] = (m) => f(s) ? b(m) : void 0),
+        notch: o.value !== "inline",
         transitionDuration: 0
-      }, {
-        opener: k(() => [
-          Z((p(), h("div", {
-            ref_key: "elRef",
-            ref: f,
-            class: $({
+      }, U({
+        opener: V(() => [
+          Z((d(), w(le(p.value), W(t.buttonProps, {
+            ref: "subcomponentSelector",
+            class: {
               "top-selector2": !0,
               "top-selector2-multiselect": t.multiselect,
+              ["top-selector2-" + t.modificator]: !!t.modificator,
+              "top-as-input": !t.buttonProps,
+              "top-as-selector": !0,
               ["top-size_" + t.size]: !0,
               "top-disabled": t.disabled,
               "top-forms-focusable": !t.disabled,
               "top-error": t.isError
-            }),
-            onKeydown: [
-              a[0] || (a[0] = B(S((i) => i.currentTarget.click(), ["stop", "prevent"]), ["up", "down", "enter", "space"])),
-              a[1] || (a[1] = B((i) => e.value = [], ["delete"]))
-            ],
-            tabindex: "0"
-          }, [
-            t.multiselect ? (p(), h("div", Te, [
-              (p(!0), h(N, null, D(e.value, (i) => (p(), T(ke, {
-                id: i.id,
-                name: i.name,
-                onDelete: q
-              }, null, 8, ["id", "name"]))), 256))
-            ])) : A("", !0),
-            t.multiselect ? A("", !0) : (p(), h("span", Se, w(Array.isArray(e.value) ? "" : e.value.name), 1)),
-            t.addChanger && !t.multiselect && l.value.length > 1 && !t.disabled ? (p(), h("span", {
-              key: 2,
-              class: "top-changer top-changer-selector",
-              onClick: S(P, ["stop"])
-            })) : A("", !0)
-          ], 34)), [
+            },
+            tabindex: "0",
+            onKeydown: y,
+            placeholder: i.value,
+            modelValue: f(r).searchText.value,
+            "onUpdate:modelValue": n[0] || (n[0] = (m) => f(r).searchText.value = m),
+            onFocus: h,
+            onBlur: n[1] || (n[1] = (m) => {
+              var A;
+              return (A = C()) != null && A.isClosed ? f(r).resetSearch() : "";
+            })
+          }), {
+            default: V(() => [
+              t.multiselect ? (d(), v("div", $e, [
+                (d(!0), v(z, null, q(l.value, (m) => (d(), w(ke, {
+                  id: m.id,
+                  name: m.name,
+                  onDelete: f(r).deleteItemById
+                }, null, 8, ["id", "name", "onDelete"]))), 256))
+              ])) : $("", !0),
+              o.value !== "inline" && !t.multiselect ? (d(), v("span", _e, _(Array.isArray(l.value) ? "" : l.value.name), 1)) : $("", !0),
+              t.multiselect && !l.value.length ? (d(), v("span", Ve, _(i.value), 1)) : $("", !0),
+              t.addChanger && !t.buttonProps && !t.multiselect && f(r).items.value.length > 1 && !t.disabled ? (d(), v("span", {
+                key: 3,
+                class: "top-changer top-changer-selector top-popup_widget",
+                "data-top-popup-disabled": "true",
+                onClick: g
+              })) : $("", !0)
+            ]),
+            _: 1
+          }, 16, ["class", "placeholder", "modelValue"])), [
             [
-              c,
+              T,
               t.isError,
               void 0,
               { onupdate: !0 }
             ]
           ])
         ]),
-        widget: k(() => [
-          R(O(me), {
-            title: "Поиск",
-            icon: "",
-            modelValue: o.value,
-            "onUpdate:modelValue": a[2] || (a[2] = (i) => o.value = i),
-            isLoading: V.value,
-            placeholder: !Array.isArray(e.value) && !t.multiselect && t.showSelectedInInput ? e.value.name : t.placeholder
-          }, null, 8, ["modelValue", "isLoading", "placeholder"])
-        ]),
-        contentList: k(() => [
-          (p(!0), h(N, null, D(r.value, (i) => (p(), T(O(j), {
-            class: $({
-              "top-active": !Array.isArray(e.value) && !t.multiselect && e.value.name === i.name
-            }),
-            key: i.id ?? void 0,
-            onClick: S((C) => _(i), ["stop"])
-          }, {
-            default: k(() => [
-              t.$slots.item ? H(t.$slots, "item", {
-                key: 0,
-                item: i
-              }) : (p(), h(N, { key: 1 }, [
-                L(w(i.name), 1)
-              ], 64))
-            ]),
-            _: 2
-          }, 1032, ["class", "onClick"]))), 128)),
-          !V.value && !r.value.length ? (p(), T(O(j), {
-            key: 0,
-            type: "regular"
-          }, {
-            default: k(() => [
-              L(w(t.$i18n.Common.No_results), 1)
-            ]),
-            _: 1
-          })) : A("", !0)
-        ]),
-        _: 3
-      }, 512);
+        contentList: V(() => {
+          var m;
+          return [
+            (d(!0), v(z, null, q(f(r).itemsForShow.value, (A) => (d(), w(f(H), {
+              class: I({
+                "top-active": !Array.isArray(l.value) && !t.multiselect && l.value.id === A.id && l.value.name === A.name
+              }),
+              key: A.id ?? void 0,
+              closeByClick: !t.multiselect || f(j).state.isMobile,
+              onClick: (Me) => f(r).selectItem(A)
+            }, {
+              default: V(() => [
+                t.$slots.item ? X(t.$slots, "item", {
+                  key: 0,
+                  item: A
+                }) : (d(), v(z, { key: 1 }, [
+                  E(_(A.name), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["class", "closeByClick", "onClick"]))), 128)),
+            !f(s).isLoading.value && !f(r).itemsForShow.value.length ? (d(), w(f(H), {
+              key: 0,
+              type: "regular"
+            }, {
+              default: V(() => [
+                E(_(t.$i18n.Common.No_results), 1)
+              ]),
+              _: 1
+            })) : $("", !0),
+            f(s).isLoading.value && (t.searchType !== "popup" || (m = f(s).apiRequest) != null && m.params.offset) ? (d(), w(f(H), {
+              key: 1,
+              type: "regular"
+            }, {
+              default: V(() => [
+                D(f(ie), { type: "circles" })
+              ]),
+              _: 1
+            })) : $("", !0)
+          ];
+        }),
+        _: 2
+      }, [
+        o.value === "popup" ? {
+          name: "widget",
+          fn: V(() => {
+            var m;
+            return [
+              D(f(de), {
+                title: "Поиск",
+                icon: "",
+                modelValue: f(r).searchText.value,
+                "onUpdate:modelValue": n[2] || (n[2] = (A) => f(r).searchText.value = A),
+                isLoading: f(s).isLoading.value && !((m = f(s).apiRequest) != null && m.params.offset),
+                placeholder: i.value
+              }, null, 8, ["modelValue", "isLoading", "placeholder"])
+            ];
+          }),
+          key: "0"
+        } : void 0
+      ]), 1032, ["notch"]);
     };
   }
-}), Be = ["data-top-icon"], Le = { class: "top-info_text" }, Ee = {
+}), we = ["data-top-icon"], Ie = { class: "top-info_text" }, Be = {
   key: 0,
   class: "top-info_value"
-}, Me = /* @__PURE__ */ E({
+}, We = /* @__PURE__ */ M({
   __name: "info",
   props: {
     icon: {},
     styling: { default: "default" },
     size: { default: "default" }
   },
-  setup(n) {
-    return (s, e) => (p(), h("div", {
-      class: $({
+  setup(a) {
+    return (e, l) => (d(), v("div", {
+      class: I({
         "top-info": !0,
-        ["top-size_" + s.size]: !0,
-        ["top-info-styling_" + s.styling]: !0
+        ["top-size_" + e.size]: !0,
+        ["top-info-styling_" + e.styling]: !0
       }),
-      "data-top-icon": s.icon
+      "data-top-icon": e.icon
     }, [
-      M("div", Le, [
-        H(s.$slots, "default")
+      L("div", Ie, [
+        X(e.$slots, "default")
       ]),
-      s.$slots.additional ? (p(), h("span", Ee, [
-        H(s.$slots, "additional")
-      ])) : A("", !0)
-    ], 10, Be));
+      e.$slots.additional ? (d(), v("span", Be, [
+        X(e.$slots, "additional")
+      ])) : $("", !0)
+    ], 10, we));
+  }
+}), Se = {
+  key: 0,
+  class: "top-policy"
+}, Le = { class: "top-policy_title" }, Ee = ["innerHTML"], Xe = /* @__PURE__ */ M({
+  __name: "policy",
+  props: {
+    title: {},
+    description: {},
+    acceptText: {}
+  },
+  emits: ["accept"],
+  setup(a, { emit: e }) {
+    const l = e, o = B(!0), u = () => {
+      o.value = !1, l("accept");
+    };
+    return (s, r) => o.value ? (d(), v("div", Se, [
+      L("div", Le, _(s.title), 1),
+      L("div", {
+        class: "top-policy_description",
+        innerHTML: s.description
+      }, null, 8, Ee),
+      D(f(F), {
+        size: "m",
+        onClick: u
+      }, {
+        default: V(() => [
+          E(_(s.acceptText), 1)
+        ]),
+        _: 1
+      })
+    ])) : $("", !0);
   }
-}), Ge = ye, De = ge, He = Ce, Fe = Ie, Re = fe, Ue = Me;
+});
 export {
-  Ge as TopEditArea,
-  De as TopEditInput,
-  Ue as TopInfo,
-  Re as TopMenu,
-  He as TopRadioGroup,
-  Fe as TopSelector2
+  He as TopCheckboxGroup,
+  Ne as TopEditArea,
+  qe as TopEditInput,
+  We as TopInfo,
+  je as TopMenu,
+  Xe as TopPolicy,
+  Fe as TopRadioGroup,
+  Ue as TopSelector2
 };
 //# sourceMappingURL=formsExt.js.map