@topvisor/ui 1.0.31 → 1.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -39,7 +39,7 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
39
39
  return;
40
40
  }
41
41
  d.value = o.defaultValue;
42
- }, b = () => {
42
+ }, g = () => {
43
43
  o.attachToKeyboard && l("clickOnTitle");
44
44
  };
45
45
  return (r, h) => (u(), v("div", {
@@ -51,7 +51,7 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
51
51
  r.title ? (u(), v("div", {
52
52
  key: 0,
53
53
  class: "top-editArea_title",
54
- onClick: h[0] || (h[0] = (i) => b())
54
+ onClick: h[0] || (h[0] = (i) => g())
55
55
  }, w(r.title), 1)) : k("", !0),
56
56
  E("div", {
57
57
  class: $({
@@ -166,8 +166,8 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
166
166
  setup(n) {
167
167
  const t = X(n, "modelValue"), o = n, l = C(null);
168
168
  _(t, () => {
169
- var s, m, c, y, b;
170
- (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();
169
+ var s, m, c, y, g;
170
+ (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) ?? ""), (g = (y = l.value) == null ? void 0 : y.querySelector(".radioGroup_item-selected")) == null || g.scrollIntoView();
171
171
  }, { immediate: !0 });
172
172
  const d = "radioGroup-" + Math.random();
173
173
  return (s, m) => (u(), v("div", {
@@ -283,7 +283,7 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
283
283
  n.params.offset = 0, n.params.search = s;
284
284
  const i = await c();
285
285
  i && (m = i.nextOffset, l.value = i.result);
286
- }, b = async () => {
286
+ }, g = async () => {
287
287
  if (!n || !m || d.value) return;
288
288
  n.params.offset = m, n.params.search = s;
289
289
  const i = await c();
@@ -292,7 +292,7 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
292
292
  return {
293
293
  items: l,
294
294
  isLoading: d,
295
- loadAppend: b,
295
+ loadAppend: g,
296
296
  setSearchTextAndLoad: (i, S = !0) => {
297
297
  n && (i.length < t || i === s && l.value.length || (s = i, S ? r() : y()));
298
298
  }
@@ -347,7 +347,7 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
347
347
  emits: ["update:modelValue"],
348
348
  setup(n) {
349
349
  const t = n, o = X(n, "modelValue"), l = C(""), d = () => {
350
- l.value = "", b.items.value = [];
350
+ l.value = "", g.items.value = [];
351
351
  }, s = {
352
352
  id: 0,
353
353
  name: re().Common.All
@@ -362,16 +362,16 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
362
362
  },
363
363
  { immediate: !0 }
364
364
  );
365
- const b = we(t.apiRequest, t.minLength, t.useCache), r = F(() => {
365
+ const g = we(t.apiRequest, t.minLength, t.useCache), r = F(() => {
366
366
  const e = [];
367
367
  return !t.multiselect && t.appendAllValue && e.push(s), t.items.forEach((a) => e.push({ ...a })), e;
368
368
  }), 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(() => {
369
369
  const e = l.value.toLowerCase(), a = ue(e);
370
370
  let f = [];
371
371
  return r.value.forEach((p) => {
372
- const g = p.name.toLowerCase();
373
- (p.id === Number(e) || g.includes(e) || g.includes(a)) && (g === e || g === a ? f.unshift(p) : f.push(p));
374
- }), f.push(...b.items.value), t.appendSearchToResult && l.value && (!f.length || f[0].name.toLowerCase() !== e) && f.push({
372
+ const b = p.name.toLowerCase();
373
+ (p.id === Number(e) || b.includes(e) || b.includes(a)) && (b === e || b === a ? f.unshift(p) : f.push(p));
374
+ }), f.push(...g.items.value), t.appendSearchToResult && l.value && (!f.length || f[0].name.toLowerCase() !== e) && f.push({
375
375
  id: null,
376
376
  name: l.value
377
377
  }), t.multiselect && (f = f.filter((p) => !h(p))), f;
@@ -381,8 +381,8 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
381
381
  return;
382
382
  const a = [...o.value];
383
383
  a.push({ ...e }), o.value = a, j.state.isMobile || setTimeout(() => {
384
- var f, p, g, H;
385
- (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();
384
+ var f, p, b, H;
385
+ (f = y()) == null || f.recalcPosition(), (H = (b = (p = y()) == null ? void 0 : p.elPopupWidget) == null ? void 0 : b.querySelector("input")) == null || H.focus(), l.value && d();
386
386
  });
387
387
  } else
388
388
  JSON.stringify(e) !== JSON.stringify(o.value) && (o.value = { ...e });
@@ -398,11 +398,11 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
398
398
  }));
399
399
  }, G = C(!1);
400
400
  t.apiRequest && (_(G, () => {
401
- G.value && b.setSearchTextAndLoad(l.value, !1);
402
- }), _(l, () => b.setSearchTextAndLoad(l.value)));
401
+ G.value && g.setSearchTextAndLoad(l.value, !1);
402
+ }), _(l, () => g.setSearchTextAndLoad(l.value)));
403
403
  const Z = (e) => {
404
404
  const a = e.target;
405
- a.scrollTop / (a.scrollHeight - a.offsetHeight) > 0.8 && b.loadAppend();
405
+ a.scrollTop / (a.scrollHeight - a.offsetHeight) > 0.8 && g.loadAppend();
406
406
  }, q = () => {
407
407
  var e;
408
408
  G.value = !1, (e = c.value) == null || e.focus(), l.value && d();
@@ -461,25 +461,25 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
461
461
  contentList: A(() => {
462
462
  var p;
463
463
  return [
464
- (u(!0), v(P, null, N(i.value, (g) => (u(), T(V(D), {
464
+ (u(!0), v(P, null, N(i.value, (b) => (u(), T(V(D), {
465
465
  class: $({
466
- "top-active": !Array.isArray(o.value) && !e.multiselect && o.value.name === g.name
466
+ "top-active": !Array.isArray(o.value) && !e.multiselect && o.value.id === b.id && o.value.name === b.name
467
467
  }),
468
- key: g.id ?? void 0,
468
+ key: b.id ?? void 0,
469
469
  closeByClick: !e.multiselect || V(j).state.isMobile,
470
- onClick: (H) => S(g)
470
+ onClick: (H) => S(b)
471
471
  }, {
472
472
  default: A(() => [
473
473
  e.$slots.item ? U(e.$slots, "item", {
474
474
  key: 0,
475
- item: g
475
+ item: b
476
476
  }) : (u(), v(P, { key: 1 }, [
477
- B(w(g.name), 1)
477
+ B(w(b.name), 1)
478
478
  ], 64))
479
479
  ]),
480
480
  _: 2
481
481
  }, 1032, ["class", "closeByClick", "onClick"]))), 128)),
482
- !V(b).isLoading.value && !i.value.length ? (u(), T(V(D), {
482
+ !V(g).isLoading.value && !i.value.length ? (u(), T(V(D), {
483
483
  key: 0,
484
484
  type: "regular"
485
485
  }, {
@@ -488,7 +488,7 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
488
488
  ]),
489
489
  _: 1
490
490
  })) : k("", !0),
491
- V(b).isLoading.value && (!e.showSearch || (p = e.apiRequest) != null && p.params.offset) ? (u(), T(V(D), {
491
+ V(g).isLoading.value && (!e.showSearch || (p = e.apiRequest) != null && p.params.offset) ? (u(), T(V(D), {
492
492
  key: 1,
493
493
  type: "regular"
494
494
  }, {
@@ -510,8 +510,8 @@ const me = { class: "top-editArea_footer" }, fe = /* @__PURE__ */ I({
510
510
  title: "Поиск",
511
511
  icon: "",
512
512
  modelValue: l.value,
513
- "onUpdate:modelValue": a[2] || (a[2] = (g) => l.value = g),
514
- isLoading: V(b).isLoading.value && !((p = e.apiRequest) != null && p.params.offset),
513
+ "onUpdate:modelValue": a[2] || (a[2] = (b) => l.value = b),
514
+ isLoading: V(g).isLoading.value && !((p = e.apiRequest) != null && p.params.offset),
515
515
  placeholder: !Array.isArray(o.value) && !e.multiselect && e.showSelectedInInput ? o.value.name : e.placeholder
516
516
  }, null, 8, ["modelValue", "isLoading", "placeholder"])
517
517
  ];
@@ -1 +1 @@
1
- {"version":3,"file":"formsExt.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/checkboxGroup/checkboxGroup.vue","../../src/components/formsExt/selector2/api.ts","../../src/components/formsExt/selector2/selector2.vue","../../src/components/formsExt/formsExt.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Emits, Props } from './editArea';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tdefaultValue: '',\n\tcancelText: 'Cancel',\n\tsubmitText: 'Send',\n\tcloseText: 'Close',\n\texpandable: true,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst localValue = ref(props.defaultValue);\n\nconst isFocused = ref(props.isFocused);\n\nconst isChanged = computed(() => localValue.value !== props.defaultValue);\n\nconst submit = (value: string) => {\n\temit('submit', value);\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst cancel = () => {\n\tif (props.forceShowCloseBtn && !isChanged.value) {\n\t\temit('close');\n\n\t\treturn;\n\t}\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst clickOnTitle = () => {\n\tif (props.attachToKeyboard) emit('clickOnTitle');\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title\"\n\t\t\tclass=\"top-editArea_title\"\n\t\t\t@click=\"clickOnTitle()\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-focus': isFocused,\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"() => isFocused = true\"\n\t\t\t\t@blur=\"() => isFocused = false\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged || forceShowCloseBtn\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\tstyling=\"soft\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cancelText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tv-if=\"isChanged\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ submitText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style>\n.top-editArea {\n\t--top-editArea-bottom: env(keyboard-inset-height, 0px);\n\t--top-editArea-offset-bottom: 0px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_title {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tflex-direction: column;\n\toutline: none;\n}\n\n.top-editArea_form:not(.top-error):hover,\n.top-editArea_form:not(.top-error).top-focus {\n\tborder-color: var(--top-forms-border-color-hover);\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\t--top-forms-border-width: 0px;\n\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tmin-height: 32px;\n\talign-self: flex-end;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tposition: fixed;\n\tbottom: calc(var(--top-editArea-offset-bottom) + var(--top-editArea-bottom));\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n\ttransition: bottom var(--transition-fast);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tcursor: pointer;\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n\n@media screen and (max-width: 900px) {\n\t.top-editArea_form{\n\t\tflex-direction: row;\n\t}\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, toRef, watch } from 'vue';\nimport type { Emits, Props } from './editInput';\nimport TopInput from '@/components/forms/input/input.vue';\nimport TopButton from '@/components/forms/button/button.vue';\n\nconst props = defineProps<Props>();\n\nconst intermediateValue = ref(props.modelValue);\n\nwatch(toRef(props.modelValue), () => {\n\tintermediateValue.value = props.modelValue;\n});\n\nconst emit = defineEmits<Emits>();\n\nconst submit = () => {\n\temit('update:modelValue', intermediateValue.value);\n};\n</script>\n\n<template>\n\t<div class=\"top-editInput\">\n\t\t<TopInput\n\t\t\t:=\"input\"\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\n\t\t\t@keydown.enter.stop=\"submit\"\n\t\t\tv-model=\"intermediateValue\"\n\t\t/>\n\n\t\t<TopButton\n\t\t\tv-if=\"intermediateValue !== modelValue\"\n\t\t\ticon=\"\"\n\t\t\tstyling=\"soft\"\n\t\t\t:=\"button\"\n\t\t\t@click=\"submit\"\n\t\t/>\n\t</div>\n</template>\n\n<style>\n.top-editInput {\n\twidth: 220px;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: var(--top-gap-1);\n}\n\n.top-editInput .top-input {\n\twidth: unset;\n\tflex-grow: 1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Ref } from '@vue/reactivity';\nimport { ref, watch } from 'vue';\nimport type { Props } from './radioGroup';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst elRef: Ref<HTMLElement | null> = ref(null);\n\nwatch(model, () => {\n\tif (!props.radiosProps?.some(item => item.value === model.value)) {\n\t\tmodel.value = props.radiosProps?.[0]?.value ?? '';\n\t}\n\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\n}, { immediate: true });\n\nconst uid = 'radioGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t['top-radioGroup']: true,\n\t\t\t['top-scrollBarXHidding']: true,\n\t\t\t['top-size_' + size]: !!size,\n\t\t\t['top-error']: isError,\n\t\t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item of radiosProps\"\n\t\t\t:class=\"{\n\t\t\t\t['top-radioGroup_item-selected']: item.value === model,\n\t\t\t\t['top-radioGroup_item']: true,\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t@click=\"model = item.value\"\n\t\t>\n\t\t\t{{ item.title }}\n\n\t\t\t<span\n\t\t\t\tv-if=\"showIndicator\"\n\t\t\t\tclass=\"top-radioGroup_circle\"\n\t\t\t></span>\n\n\t\t\t<!-- Для нативной навигации -->\n\t\t\t<input\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:name=\"uid\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-unvisible']: true,\n\t\t\t\t}\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t/>\n\t\t</label>\n\t</div>\n</template>\n\n<style>\n.top-radioGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-layout-middle);\n\theight: var(--top-forms-base-height);\n\tpadding: 2px;\n\tgap: 2px;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n.top-radioGroup_item {\n\tcolor: var(--color-text-2);\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 0 16px;\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-grow: 1;\n\tgap: 4px;\n}\n\n.top-radioGroup_item:hover {\n\tbackground-color: var(--color-layout-front-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* selected */\n.top-radioGroup_item-selected {\n\tcolor: var(--color-text-1);\n\tpointer-events: none;\n\tbackground-color: var(--color-bg-lightning-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* circle */\n.top-radioGroup_circle {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-line-3-opacity);\n\tborder-radius: 50%;\n\tpadding: 3px;\n\tmargin-left: auto;\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-line-primary-1);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle {\n\tborder-color: var(--color-line-primary-1);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\n\tborder-color: var(--color-line-primary-1);\n}\n\n/* top-error */\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\n\tborder-color: var(--color-line-negative-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nwithDefaults(defineProps<Props>(), {\n\tsize: 's',\n\tstyling: 'outline',\n});\n\nconst onChange = (id: Props['modelValue'][number]) => {\n\tconst newModel = [...model.value];\n\tconst index = newModel.indexOf(id);\n\n\tif (index === -1) {\n\t\tnewModel.push(id);\n\t} else {\n\t\tnewModel.splice(index, 1);\n\t}\n\n\tmodel.value = newModel;\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n \t\t['top-checkboxGroup']: true,\n \t\t['top-checkboxGroup-' + styling]: true,\n \t\t['top-scrollBarXHidding']: true,\n \t\t['top-size_' + size]: !!size,\n \t\t['top-error']: isError,\n \t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item in items\"\n\t\t\t:key=\"item.id\"\n\t\t\t:class=\"{\n\t\t\t\t['top-checkboxGroup_item']: true,\n\t\t\t\t['top-checkboxGroup_item-selected']: model.includes(item.id),\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"top-unvisible\"\n\t\t\t\t:value=\"item.id\"\n\t\t\t\t:checked=\"model.includes(item.id)\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t@change=\"onChange(item.id)\"\n\t\t\t/>\n\n\t\t\t{{ item.title }}\n\t\t</label>\n\t</div>\n</template>\n\n<style>\n.top-checkboxGroup {\n\tuser-select: none;\n\tborder-radius: 8px;\n\theight: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tdisplay: flex;\n}\n\n.top-checkboxGroup_item {\n\tbox-sizing: border-box;\n\tpadding: 1px var(--top-padding-4);\n\tcursor: pointer;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\tflex-grow: 1;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: var(--top-gap-1);\n}\n\n/* outline */\n.top-checkboxGroup-outline {\n\tborder: 1px solid var(--color-line-1);\n\tbackground: var(--color-layout-front-1);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item {\n\theight: calc(var(--top-forms-base-height) - 2px);\n\tmin-height: 100%;\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item:hover {\n\tbackground: var(--color-layer-primary-1);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-primary-1);\n\tcolor: var(--color-text-white);\n\t--top-icon-color: var(--color-text-white);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-primary-2);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item:hover {\n\tbackground: var(--color-layer-negative-1);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-negative-1);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-negative-2);\n}\n\n/* borderless */\n.top-checkboxGroup-borderless {\n\tpadding: 2px;\n\tbackground: var(--color-bg-shading-2);\n\tgap: 2px;\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item {\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item:hover {\n\tbox-shadow: var(--top-shadow-s);\n\tbackground: var(--color-bg-lightning-1);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-primary-1);\n\tcolor: var(--color-text-white);\n\t--top-icon-color: var(--color-text-white);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-primary-2);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item:hover {\n\tbackground: var(--color-bg-lightning-1);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-negative-1);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-negative-2);\n}\n</style>\n","import type { Ref } from 'vue';\nimport { ref } from 'vue';\nimport { debounce } from '@/core/utils/lodash';\nimport type { Item, Props } from './selector2';\n\nexport const useAPI = (apiRequest: Props['apiRequest'], minLength: number, useCache: Props['useCache']) => {\n\t/**\n\t * Список, полученный через API\n\t */\n\tconst items: Ref<Array<Item>> = ref([]);\n\n\t/**\n\t * Флаг - идет загрузка\n\t */\n\tconst isLoading = ref(false);\n\n\tlet _searchText = '';\n\tlet _nextOffset: number | undefined;\n\n\tif (apiRequest && !apiRequest.params.limit) {\n\t\tapiRequest.params.limit = 100;\n\t}\n\n\t/**\n\t * Выполнить обращение к API\n\t *\n\t * При ошибке вернет undefined\n\t */\n\tconst callAPIRequest = async (): Promise<{ nextOffset?: number, result: Array<Item> } | undefined> => {\n\t\tif (!apiRequest) return;\n\n\t\tlet res;\n\t\tlet cacheKey;\n\n\t\tif (useCache) {\n\t\t\t// кэш для полученных ответов через apiRequest\n\t\t\t// общий для всех компонентов, использующих apiRequest\n\t\t\tapiRequest.cache ??= new Map();\n\n\t\t\tcacheKey = JSON.stringify(apiRequest.params);\n\t\t\tres = apiRequest.cache.get(cacheKey);\n\n\t\t\tif (res) {\n\t\t\t\treturn res;\n\t\t\t}\n\t\t}\n\n\t\tisLoading.value = true;\n\t\tres = await apiRequest.call();\n\t\tisLoading.value = false;\n\n\t\tif (res.errors) return;\n\n\t\tif (!Array.isArray(res.result)) {\n\t\t\tconsole.warn(`В result ожидался массив`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);\n\t\tif (indexWithError !== -1) {\n\t\t\tconsole.warn(`В result[${indexWithError}] нет id или name`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (useCache) {\n\t\t\tapiRequest.cache.set(cacheKey as string, res);\n\t\t}\n\n\t\treturn res;\n\t};\n\n\t/**\n\t * Загрузить items\n\t */\n\tconst load = async () => {\n\t\tif (!apiRequest) return;\n\n\t\tapiRequest.params.offset = 0;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = res.result;\n\t};\n\n\t/**\n\t * Загрузить следующую страницу items\n\t */\n\tconst loadAppend = async () => {\n\t\tif (!apiRequest) return;\n\n\t\t// данных о следующих страницах не обнаружено\n\t\tif (!_nextOffset) return;\n\n\t\t// дозагружать нельзя, если не завершена предыдущшая загрузка\n\t\tif (isLoading.value) return;\n\n\t\tapiRequest.params.offset = _nextOffset;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = items.value.concat(res.result);\n\t};\n\n\tconst loadDebounce = debounce(() => load(), 200);\n\n\t/**\n\t * Выполнить поиск по указанному тексту\n\t *\n\t * Если длина текста меньше minLength, поиск не будет проивзеден\n\t *\n\t * Если текст не изменился, поиск не будет проивзеден\n\t * @param searchText - текст поиска\n\t * @param useDebounce - отложенное выполнение поиска\n\t */\n\tconst setSearchTextAndLoad = (searchText: string, useDebounce = true) => {\n\t\tif (!apiRequest) return;\n\n\t\tif (searchText.length < minLength) return;\n\n\t\t// условия поиска не поменялись, данные загружены\n\t\tif (searchText === _searchText && items.value.length) return;\n\n\t\t_searchText = searchText;\n\n\t\tif (useDebounce) {\n\t\t\tvoid loadDebounce();\n\t\t} else {\n\t\t\tvoid load();\n\t\t}\n\t};\n\n\treturn {\n\t\titems,\n\t\tisLoading,\n\t\tloadAppend,\n\t\tsetSearchTextAndLoad,\n\t};\n};\n","<script setup lang=\"ts\">\nimport type { ComputedRef, ModelRef, ComponentInstance } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport Core from '@/core/core/core';\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\nimport { useI18n } from '@/core/plugins/i18n';\nimport { TopPopup, TopPopupListItem, TopPopupWidgetInput } from '@/components/popup/popup';\nimport { TopPreloader } from '@/components/forms/forms';\nimport type { TopLibPopup } from '@/components/popup/lib/popup';\nimport type { Item, Props, Slots } from './selector2';\nimport { useAPI } from './api';\nimport Selector2ItemMulti from './itemMulti.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\titems: () => [] as Array<Item>,\n\tsize: 's',\n\tminLength: 0,\n\tshowSelectedInInput: true,\n\tshowSearch: true,\n});\n\nconst model = defineModel<Props['modelValue']>() as ModelRef<Props['modelValue']>;\n\ndefineSlots<Slots>();\n\n/**\n * Текст поиска по результатам\n */\nconst searchText = ref('');\n\n/**\n * Сброс поиска\n */\nconst resetSearch = () => {\n\tsearchText.value = '';\n\tAPI.items.value = [];\n};\n\nconst itemAll = {\n\tid: 0,\n\tname: useI18n().Common.All!,\n};\n\n/**\n * Экземпляр компонента Popup\n */\nconst popupRef = ref<ComponentInstance<typeof TopPopup> | null>(null);\n\n/**\n * Основной элемент селектора\n */\nconst elRef = ref<HTMLElement | null>(null);\n\n/**\n * Получить доступ к объекту popup\n */\nconst getPopup = (): TopLibPopup | undefined => {\n\treturn popupRef.value?.popup;\n};\n\n// для storybook\nif ((window as any).__STORYBOOK_PREVIEW__ && !props.modelValue) {\n\twatch(\n\t\t() => props.multiselect,\n\t\t() => {\n\t\t\tmodel.value = props.multiselect ? [] : { id: null, name: '' };\n\t\t},\n\t\t{ immediate: true },\n\t);\n}\n\nconst API = useAPI(props.apiRequest, props.minLength, props.useCache);\n\n/**\n * Варианты выбора: props.items + \"Выбрать все\"\n */\nconst localItems: ComputedRef<Array<Item>> = computed(() => {\n\tconst items: Array<Item> = [];\n\n\tif (!props.multiselect && props.appendAllValue) {\n\t\titems.push(itemAll);\n\t}\n\n\tprops.items.forEach(item => items.push({ ...item }));\n\n\treturn items;\n});\n\n/**\n * Проверить, что элемент выбран\n */\nconst isSelected = (item: Item, checkNameForNullId = true) => {\n\tif (checkNameForNullId && item.id === null) {\n\t\tif (Array.isArray(model.value)) {\n\t\t\treturn model.value.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);\n\t\t} else {\n\t\t\treturn item.name === model.value.name;\n\t\t}\n\t}\n\n\tif (Array.isArray(model.value)) {\n\t\treturn model.value.some(itemSelected => itemSelected.id === item.id);\n\t} else {\n\t\treturn item.id === model.value.id;\n\t}\n};\n\n/**\n * Варианты выбора, которые выводятся\n */\nconst itemsForShow = computed(() => {\n\tconst searchString = searchText.value.toLowerCase();\n\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\n\n\tlet items: typeof localItems.value = [];\n\n\tlocalItems.value.forEach((item) => {\n\t\tconst itemName = item.name.toLowerCase();\n\n\t\tif (\n\t\t\titem.id === Number(searchString) ||\n\t\t\titemName.includes(searchString) ||\n\t\t\titemName.includes(searchStringInvertKeyboard)\n\t\t) {\n\t\t\tif (itemName === searchString || itemName === searchStringInvertKeyboard) {\n\t\t\t\titems.unshift(item);\n\t\t\t} else {\n\t\t\t\titems.push(item);\n\t\t\t}\n\t\t}\n\t});\n\n\titems.push(...API.items.value);\n\n\tif (\n\t\tprops.appendSearchToResult &&\n\t\t!!searchText.value &&\n\t\t(!items.length || items[0].name.toLowerCase() !== searchString)\n\t) {\n\t\titems.push({\n\t\t\tid: null,\n\t\t\tname: searchText.value,\n\t\t});\n\t}\n\n\tif (props.multiselect) {\n\t\titems = items.filter(item => !isSelected(item));\n\t}\n\n\treturn items;\n});\n\n/**\n * Выбрать значение\n *\n * Управляет закрытием окна\n */\nconst selectItem = async (item: Item) => {\n\tif (props.multiselect) {\n\t\tif (!Array.isArray(model.value)) return;\n\n\t\tif (isSelected(item)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newModel = [...model.value];\n\t\tnewModel.push({ ...item });\n\t\tmodel.value = newModel;\n\n\t\tif (!Core.state.isMobile) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tgetPopup()?.recalcPosition();\n\t\t\t\tgetPopup()?.elPopupWidget?.querySelector('input')?.focus();\n\n\t\t\t\tif (searchText.value) resetSearch();\n\t\t\t});\n\t\t}\n\t} else {\n\t\tif (JSON.stringify(item) !== JSON.stringify(model.value)) {\n\t\t\tmodel.value = { ...item };\n\t\t}\n\t}\n};\n\n/**\n * Выбрать следующее значение\n */\nconst selectNextItem = () => {\n\tif (!Array.isArray(model.value)) {\n\t\tconst currentIndex = localItems.value.findIndex(item => item.id === (model.value as Item).id);\n\t\tconst nextIndex = (currentIndex + 1) % localItems.value.length;\n\t\tmodel.value = { ...localItems.value[nextIndex] };\n\t}\n};\n\n/**\n * Удалить выбранное значение по id\n * @param id\n */\nconst deleteItemById = async (id: Item['id']) => {\n\tif (Array.isArray(model.value)) {\n\t\tmodel.value = model.value.filter(item => item.id !== id);\n\n\t\tsetTimeout(() => {\n\t\t\tgetPopup()?.recalcPosition();\n\t\t});\n\t}\n};\n\nconst isOpened = ref(false); // флаг попап открыт\n\nif (props.apiRequest) {\n\twatch(isOpened, () => {\n\t\tif (isOpened.value) {\n\t\t\t// при открытии сразу выполнить поиск\n\t\t\tAPI.setSearchTextAndLoad(searchText.value, false);\n\t\t}\n\t});\n\n\t// отложенный поиск при вводе текста\n\twatch(searchText, () => API.setSearchTextAndLoad(searchText.value));\n}\n\nconst onScrollContentList = (e: Event) => {\n\tconst el = e.target as HTMLElement;\n\n\tif (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {\n\t\tAPI.loadAppend();\n\t}\n};\n\nconst onClose = () => {\n\tisOpened.value = false;\n\n\telRef.value?.focus();\n\n\tif (searchText.value) resetSearch();\n};\n</script>\n\n<template>\n\t<TopPopup\n\t\tref=\"popupRef\"\n\t\t@open=\"isOpened = true\"\n\t\t@close=\"onClose()\"\n\t\t@scrollContentList=\"apiRequest ? onScrollContentList($event) : undefined\"\n\t\t:notch=\"false\"\n\t\t:transitionDuration=\"0\"\n\t>\n\t\t<template #opener>\n\t\t\t<div\n\t\t\t\tref=\"elRef\"\n\t\t\t\tv-top-focus.onupdate=\"isError\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-selector2' : true,\n\t\t\t\t\t'top-selector2-multiselect': multiselect,\n\t\t\t\t\t['top-size_' + size]: true,\n\t\t\t\t\t['top-disabled']: disabled,\n\t\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t\t['top-error']: isError,\n\t\t\t\t}\"\n\t\t\t\t@keydown.up.down.enter.space.stop.prevent=\"($event.currentTarget as HTMLElement).click()\"\n\t\t\t\t@keydown.delete=\"model = []\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t>\n\t\t\t\t<template v-if=\"multiselect\">\n\t\t\t\t\t<div class=\"top-selector2_activeItems\">\n\t\t\t\t\t\t<Selector2ItemMulti\n\t\t\t\t\t\t\tv-for=\"item of model as Array<Item>\"\n\t\t\t\t\t\t\t:id=\"item.id\"\n\t\t\t\t\t\t\t:name=\"item.name\"\n\t\t\t\t\t\t\t@delete=\"deleteItemById\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\n\t\t\t\t<span v-if=\"!multiselect\" class=\"top-selector2_activeName top-ellipsis\">\n\t\t\t\t\t{{ !Array.isArray(model) ? model.name : '' }}\n\t\t\t\t</span>\n\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"addChanger && !multiselect && localItems.length > 1 && !disabled\"\n\t\t\t\t\tclass=\"top-changer top-changer-selector\"\n\t\t\t\t\t@click.stop=\"selectNextItem\"\n\t\t\t\t></span>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #widget v-if=\"showSearch\">\n\t\t\t<TopPopupWidgetInput\n\t\t\t\ttitle=\"Поиск\"\n\t\t\t\ticon=\"\"\n\t\t\t\tv-model=\"searchText\"\n\t\t\t\t:isLoading=\"API.isLoading.value && !apiRequest?.params.offset\"\n\t\t\t\t:placeholder=\"!Array.isArray(model) && !multiselect && showSelectedInInput ? model.name : placeholder\"\n\t\t\t/>\n\t\t</template>\n\n\t\t<template #contentList>\n\t\t\t<TopPopupListItem\n\t\t\t\tv-for=\"item of itemsForShow\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-active': !Array.isArray(model) && !multiselect && model.name === item.name,\n\t\t\t\t}\"\n\t\t\t\t:key=\"item.id ?? undefined\"\n\t\t\t\t:closeByClick=\"!multiselect || Core.state.isMobile\"\n\t\t\t\t@click=\"selectItem(item)\"\n\t\t\t>\n\t\t\t\t<slot\n\t\t\t\t\tv-if=\"$slots.item\"\n\t\t\t\t\tname=\"item\"\n\t\t\t\t\t:item=\"item\"\n\t\t\t\t></slot>\n\n\t\t\t\t<template\n\t\t\t\t\tv-else\n\t\t\t\t>\n\t\t\t\t\t{{ item.name }}\n\t\t\t\t</template>\n\t\t\t</TopPopupListItem>\n\n\t\t\t<TopPopupListItem\n\t\t\t\tv-if=\"!API.isLoading.value && !itemsForShow.length\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\t{{ $i18n.Common.No_results }}\n\t\t\t</TopPopupListItem>\n\n\t\t\t<!-- Индикатор загрузки, первичная дозагрузка отображается в поле поиска, если оно отображено -->\n\t\t\t<TopPopupListItem\n\t\t\t\tv-if=\"API.isLoading.value && (!showSearch || apiRequest?.params.offset)\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\t<TopPreloader type=\"circles\"/>\n\t\t\t</TopPopupListItem>\n\t\t</template>\n\t</TopPopup>\n</template>\n\n<style>\n.top-selector2 {\n\twidth: 180px;\n\tmin-height: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tposition: relative;\n\tdisplay: flex;\n\toverflow: hidden;\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\n\tcolor: var(--top-forms-placeholder-color);\n\n\tborder-radius: var(--top-radius-2);\n\tborder: 1px solid var(--top-forms-border-color);\n\tbackground: var(--top-forms-background-color);\n}\n\n.top-selector2-multiselect {\n\twidth: unset;\n\tmin-width: 180px;\n\tpadding: var(--top-padding-1);\n}\n\n.top-selector2.top-active {\n\t--top-forms-border-color: var(--top-forms-border-color-hover);\n}\n\n.top-selector2_activeItems {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--top-padding-1);\n\tmax-width: 100%;\n}\n\n.top-selector2_activeName {\n\twhite-space: nowrap;\n}\n\n.top-changer-selector {\n\ttransform: translateX(-16px);\n}\n</style>\n","import type { ComponentCustomProps } from 'vue';\n\nimport EditArea from './editArea/editArea.vue';\nimport EditInput from './editInput/editInput.vue';\nimport RadioGroup from './radioGroup/radioGroup.vue';\nimport CheckboxGroup from './checkboxGroup/checkboxGroup.vue';\nimport Selector2 from './selector2/selector2.vue';\nimport Menu from './menu/menu.vue';\nimport Info from './info/info.vue';\n\nexport const TopEditArea = EditArea as typeof EditArea & ComponentCustomProps;\nexport const TopEditInput = EditInput as typeof EditInput & ComponentCustomProps;\nexport const TopRadioGroup = RadioGroup as typeof RadioGroup & ComponentCustomProps;\nexport const TopCheckboxGroup = CheckboxGroup as typeof CheckboxGroup & ComponentCustomProps;\nexport const TopSelector2 = Selector2 as typeof Selector2 & ComponentCustomProps;\nexport const TopMenu = Menu as typeof Menu & ComponentCustomProps;\nexport const TopInfo = Info as typeof Info & ComponentCustomProps;\n"],"names":["props","__props","emit","__emit","localValue","ref","isFocused","isChanged","computed","submit","value","cancel","clickOnTitle","intermediateValue","watch","toRef","model","useModel","elRef","_a","item","_c","_b","_e","_d","uid","onChange","id","newModel","index","useAPI","apiRequest","minLength","useCache","items","isLoading","_searchText","_nextOffset","callAPIRequest","res","cacheKey","indexWithError","load","loadAppend","loadDebounce","debounce","searchText","useDebounce","resetSearch","API","itemAll","useI18n","popupRef","getPopup","localItems","isSelected","checkNameForNullId","itemSelected","itemsForShow","searchString","searchStringInvertKeyboard","invertKeyboardLayout","itemName","selectItem","Core","selectNextItem","nextIndex","deleteItemById","isOpened","onScrollContentList","el","onClose","TopEditArea","_sfc_main$6","TopEditInput","_sfc_main$5","TopRadioGroup","_sfc_main$4","TopCheckboxGroup","_sfc_main$3","TopSelector2","_sfc_main$1","TopMenu","_sfc_main$a","TopInfo","_sfc_main"],"mappings":"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"}
1
+ {"version":3,"file":"formsExt.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue","../../src/components/formsExt/checkboxGroup/checkboxGroup.vue","../../src/components/formsExt/selector2/api.ts","../../src/components/formsExt/selector2/selector2.vue","../../src/components/formsExt/formsExt.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Emits, Props } from './editArea';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tdefaultValue: '',\n\tcancelText: 'Cancel',\n\tsubmitText: 'Send',\n\tcloseText: 'Close',\n\texpandable: true,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst localValue = ref(props.defaultValue);\n\nconst isFocused = ref(props.isFocused);\n\nconst isChanged = computed(() => localValue.value !== props.defaultValue);\n\nconst submit = (value: string) => {\n\temit('submit', value);\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst cancel = () => {\n\tif (props.forceShowCloseBtn && !isChanged.value) {\n\t\temit('close');\n\n\t\treturn;\n\t}\n\n\tlocalValue.value = props.defaultValue;\n};\n\nconst clickOnTitle = () => {\n\tif (props.attachToKeyboard) emit('clickOnTitle');\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t'top-editArea': true,\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tv-if=\"title\"\n\t\t\tclass=\"top-editArea_title\"\n\t\t\t@click=\"clickOnTitle()\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div\n\t\t\t:class=\"{\n\t\t\t\t'top-editArea_form': true,\n\t\t\t\t'top-error': isError,\n\t\t\t\t'top-focus': isFocused,\n\t\t\t}\"\n\t\t>\n\t\t\t<Textarea\n\t\t\t\tv-model=\"localValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:placeholder=\"placeholder\"\n\t\t\t\t:rows=\"rows\"\n\t\t\t\t:minHeight=\"minHeight\"\n\t\t\t\t:expandable=\"expandable\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:readonly=\"readonly\"\n\t\t\t\t:isError=\"isError\"\n\t\t\t\t:hint=\"hint\"\n\t\t\t\tclass=\"top-editArea_element\"\n\t\t\t\t@focus=\"() => isFocused = true\"\n\t\t\t\t@blur=\"() => isFocused = false\"\n\t\t\t\t@keyup.esc=\"cancel\"\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\n\t\t\t/>\n\n\t\t\t<div class=\"top-editArea_footer\">\n\t\t\t\t<Button\n\t\t\t\t\tv-if=\"isChanged || forceShowCloseBtn\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\tstyling=\"soft\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ cancelText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tv-if=\"isChanged\"\n\t\t\t\t\t:icon=\"$core.state.isMobile ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t<template\n\t\t\t\t\t\t#default\n\t\t\t\t\t\tv-if=\"!$core.state.isMobile\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ submitText }}\n\t\t\t\t\t</template>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style>\n.top-editArea {\n\t--top-editArea-bottom: env(keyboard-inset-height, 0px);\n\t--top-editArea-offset-bottom: 0px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.top-editArea_title {\n\tfont-size: 12px;\n}\n\n.top-editArea_form {\n\tflex-direction: column;\n\toutline: none;\n}\n\n.top-editArea_form:not(.top-error):hover,\n.top-editArea_form:not(.top-error).top-focus {\n\tborder-color: var(--top-forms-border-color-hover);\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\t--top-forms-border-width: 0px;\n\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\n\tmin-height: 32px;\n\talign-self: flex-end;\n\tjustify-content: flex-end;\n\tgap: var(--top-forms-padding);\n}\n\n/* attachedToKeyboard */\n.top-editArea-attachedToKeyboard {\n\tbackground: var(--top-forms-background-color);\n\tposition: fixed;\n\tbottom: calc(var(--top-editArea-offset-bottom) + var(--top-editArea-bottom));\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\n\ttransition: bottom var(--transition-fast);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_form {\n\tborder-radius: 0;\n\tborder: none;\n\tborder-top: 1px solid var(--top-forms-border-color);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_title {\n\tcursor: pointer;\n\tborder-top: 1px solid var(--color-line-2-opacity);\n\tpadding: var(--top-forms-padding);\n}\n\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\n\tborder-radius: 100%;\n}\n\n@media screen and (max-width: 900px) {\n\t.top-editArea_form{\n\t\tflex-direction: row;\n\t}\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ref, toRef, watch } from 'vue';\nimport type { Emits, Props } from './editInput';\nimport TopInput from '@/components/forms/input/input.vue';\nimport TopButton from '@/components/forms/button/button.vue';\n\nconst props = defineProps<Props>();\n\nconst intermediateValue = ref(props.modelValue);\n\nwatch(toRef(props.modelValue), () => {\n\tintermediateValue.value = props.modelValue;\n});\n\nconst emit = defineEmits<Emits>();\n\nconst submit = () => {\n\temit('update:modelValue', intermediateValue.value);\n};\n</script>\n\n<template>\n\t<div class=\"top-editInput\">\n\t\t<TopInput\n\t\t\t:=\"input\"\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\n\t\t\t@keydown.enter.stop=\"submit\"\n\t\t\tv-model=\"intermediateValue\"\n\t\t/>\n\n\t\t<TopButton\n\t\t\tv-if=\"intermediateValue !== modelValue\"\n\t\t\ticon=\"\"\n\t\t\tstyling=\"soft\"\n\t\t\t:=\"button\"\n\t\t\t@click=\"submit\"\n\t\t/>\n\t</div>\n</template>\n\n<style>\n.top-editInput {\n\twidth: 220px;\n\tflex-grow: 1;\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: var(--top-gap-1);\n}\n\n.top-editInput .top-input {\n\twidth: unset;\n\tflex-grow: 1;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Ref } from '@vue/reactivity';\nimport { ref, watch } from 'vue';\nimport type { Props } from './radioGroup';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst elRef: Ref<HTMLElement | null> = ref(null);\n\nwatch(model, () => {\n\tif (!props.radiosProps?.some(item => item.value === model.value)) {\n\t\tmodel.value = props.radiosProps?.[0]?.value ?? '';\n\t}\n\n\telRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();\n}, { immediate: true });\n\nconst uid = 'radioGroup-' + Math.random();\n</script>\n\n<template>\n\t<div\n\t\tref=\"elRef\"\n\t\t:class=\"{\n\t\t\t['top-radioGroup']: true,\n\t\t\t['top-scrollBarXHidding']: true,\n\t\t\t['top-size_' + size]: !!size,\n\t\t\t['top-error']: isError,\n\t\t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item of radiosProps\"\n\t\t\t:class=\"{\n\t\t\t\t['top-radioGroup_item-selected']: item.value === model,\n\t\t\t\t['top-radioGroup_item']: true,\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t\t@click=\"model = item.value\"\n\t\t>\n\t\t\t{{ item.title }}\n\n\t\t\t<span\n\t\t\t\tv-if=\"showIndicator\"\n\t\t\t\tclass=\"top-radioGroup_circle\"\n\t\t\t></span>\n\n\t\t\t<!-- Для нативной навигации -->\n\t\t\t<input\n\t\t\t\tv-model=\"model\"\n\t\t\t\t:name=\"uid\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t['top-unvisible']: true,\n\t\t\t\t}\"\n\t\t\t\t:value=\"item.value\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t/>\n\t\t</label>\n\t</div>\n</template>\n\n<style>\n.top-radioGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-layout-middle);\n\theight: var(--top-forms-base-height);\n\tpadding: 2px;\n\tgap: 2px;\n\tdisplay: flex;\n\talign-items: flex-start;\n}\n\n.top-radioGroup_item {\n\tcolor: var(--color-text-2);\n\tcursor: pointer;\n\tbox-sizing: border-box;\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n\tpadding: 0 16px;\n\tfont-weight: 400;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex-grow: 1;\n\tgap: 4px;\n}\n\n.top-radioGroup_item:hover {\n\tbackground-color: var(--color-layout-front-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* selected */\n.top-radioGroup_item-selected {\n\tcolor: var(--color-text-1);\n\tpointer-events: none;\n\tbackground-color: var(--color-bg-lightning-1);\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\n}\n\n/* circle */\n.top-radioGroup_circle {\n\tcontent: \"\";\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--color-line-3-opacity);\n\tborder-radius: 50%;\n\tpadding: 3px;\n\tmargin-left: auto;\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\n}\n\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-line-primary-1);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle {\n\tborder-color: var(--color-line-primary-1);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\n\tborder-color: var(--color-line-primary-1);\n}\n\n/* top-error */\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\n\tborder-color: var(--color-line-negative-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Props } from './types';\n\nconst model = defineModel<Props['modelValue']>({\n\trequired: true,\n});\n\nwithDefaults(defineProps<Props>(), {\n\tsize: 's',\n\tstyling: 'outline',\n});\n\nconst onChange = (id: Props['modelValue'][number]) => {\n\tconst newModel = [...model.value];\n\tconst index = newModel.indexOf(id);\n\n\tif (index === -1) {\n\t\tnewModel.push(id);\n\t} else {\n\t\tnewModel.splice(index, 1);\n\t}\n\n\tmodel.value = newModel;\n};\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n \t\t['top-checkboxGroup']: true,\n \t\t['top-checkboxGroup-' + styling]: true,\n \t\t['top-scrollBarXHidding']: true,\n \t\t['top-size_' + size]: !!size,\n \t\t['top-error']: isError,\n \t}\"\n\t>\n\t\t<label\n\t\t\tv-for=\"item in items\"\n\t\t\t:key=\"item.id\"\n\t\t\t:class=\"{\n\t\t\t\t['top-checkboxGroup_item']: true,\n\t\t\t\t['top-checkboxGroup_item-selected']: model.includes(item.id),\n\t\t\t\t['top-forms-focusable']: true,\n\t\t\t\t['top-disabled']: item.disabled,\n\t\t\t}\"\n\t\t\t:data-top-icon=\"item.icon\"\n\t\t>\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"top-unvisible\"\n\t\t\t\t:value=\"item.id\"\n\t\t\t\t:checked=\"model.includes(item.id)\"\n\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t@change=\"onChange(item.id)\"\n\t\t\t/>\n\n\t\t\t{{ item.title }}\n\t\t</label>\n\t</div>\n</template>\n\n<style>\n.top-checkboxGroup {\n\tuser-select: none;\n\tborder-radius: 8px;\n\theight: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tdisplay: flex;\n}\n\n.top-checkboxGroup_item {\n\tbox-sizing: border-box;\n\tpadding: 1px var(--top-padding-4);\n\tcursor: pointer;\n\tfont-weight: 600;\n\twhite-space: nowrap;\n\tdisplay: flex;\n\tflex-grow: 1;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: var(--top-gap-1);\n}\n\n/* outline */\n.top-checkboxGroup-outline {\n\tborder: 1px solid var(--color-line-1);\n\tbackground: var(--color-layout-front-1);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item {\n\theight: calc(var(--top-forms-base-height) - 2px);\n\tmin-height: 100%;\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item:hover {\n\tbackground: var(--color-layer-primary-1);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-primary-1);\n\tcolor: var(--color-text-white);\n\t--top-icon-color: var(--color-text-white);\n}\n\n.top-checkboxGroup-outline .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-primary-2);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item:hover {\n\tbackground: var(--color-layer-negative-1);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-negative-1);\n}\n\n.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-negative-2);\n}\n\n/* borderless */\n.top-checkboxGroup-borderless {\n\tpadding: 2px;\n\tbackground: var(--color-bg-shading-2);\n\tgap: 2px;\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item {\n\tborder-radius: 6px;\n\theight: calc(var(--top-forms-base-height) - 4px);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item:hover {\n\tbox-shadow: var(--top-shadow-s);\n\tbackground: var(--color-bg-lightning-1);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-primary-1);\n\tcolor: var(--color-text-white);\n\t--top-icon-color: var(--color-text-white);\n}\n\n.top-checkboxGroup-borderless .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-primary-2);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item:hover {\n\tbackground: var(--color-bg-lightning-1);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected {\n\tbackground: var(--color-bg-negative-1);\n}\n\n.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected:hover {\n\tbackground: var(--color-bg-negative-2);\n}\n</style>\n","import { ref } from 'vue';\nimport { debounce } from '@/core/utils/lodash';\nimport type { Item, Props } from './selector2';\n\nexport const useAPI = (apiRequest: Props['apiRequest'], minLength: number, useCache: Props['useCache']) => {\n\t/**\n\t * Список, полученный через API\n\t */\n\tconst items = ref<Item[]>([]);\n\n\t/**\n\t * Флаг - идет загрузка\n\t */\n\tconst isLoading = ref(false);\n\n\tlet _searchText = '';\n\tlet _nextOffset: number | undefined;\n\n\tif (apiRequest && !apiRequest.params.limit) {\n\t\tapiRequest.params.limit = 100;\n\t}\n\n\t/**\n\t * Выполнить обращение к API\n\t *\n\t * При ошибке вернет undefined\n\t */\n\tconst callAPIRequest = async (): Promise<{ nextOffset?: number, result: Item[] } | undefined> => {\n\t\tif (!apiRequest) return;\n\n\t\tlet res;\n\t\tlet cacheKey;\n\n\t\tif (useCache) {\n\t\t\t// кэш для полученных ответов через apiRequest\n\t\t\t// общий для всех компонентов, использующих apiRequest\n\t\t\tapiRequest.cache ??= new Map();\n\n\t\t\tcacheKey = JSON.stringify(apiRequest.params);\n\t\t\tres = apiRequest.cache.get(cacheKey);\n\n\t\t\tif (res) {\n\t\t\t\treturn res;\n\t\t\t}\n\t\t}\n\n\t\tisLoading.value = true;\n\t\tres = await apiRequest.call();\n\t\tisLoading.value = false;\n\n\t\tif (res.errors) return;\n\n\t\tif (!Array.isArray(res.result)) {\n\t\t\tconsole.warn(`В result ожидался массив`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);\n\t\tif (indexWithError !== -1) {\n\t\t\tconsole.warn(`В result[${indexWithError}] нет id или name`);\n\n\t\t\treturn;\n\t\t}\n\n\t\tif (useCache) {\n\t\t\tapiRequest.cache.set(cacheKey as string, res);\n\t\t}\n\n\t\treturn res;\n\t};\n\n\t/**\n\t * Загрузить items\n\t */\n\tconst load = async () => {\n\t\tif (!apiRequest) return;\n\n\t\tapiRequest.params.offset = 0;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = res.result;\n\t};\n\n\t/**\n\t * Загрузить следующую страницу items\n\t */\n\tconst loadAppend = async () => {\n\t\tif (!apiRequest) return;\n\n\t\t// данных о следующих страницах не обнаружено\n\t\tif (!_nextOffset) return;\n\n\t\t// дозагружать нельзя, если не завершена предыдущшая загрузка\n\t\tif (isLoading.value) return;\n\n\t\tapiRequest.params.offset = _nextOffset;\n\t\tapiRequest.params.search = _searchText;\n\n\t\tconst res = await callAPIRequest();\n\t\tif (!res) return;\n\n\t\t_nextOffset = res.nextOffset;\n\n\t\titems.value = items.value.concat(res.result);\n\t};\n\n\tconst loadDebounce = debounce(() => load(), 200);\n\n\t/**\n\t * Выполнить поиск по указанному тексту\n\t *\n\t * Если длина текста меньше minLength, поиск не будет проивзеден\n\t *\n\t * Если текст не изменился, поиск не будет проивзеден\n\t * @param searchText - текст поиска\n\t * @param useDebounce - отложенное выполнение поиска\n\t */\n\tconst setSearchTextAndLoad = (searchText: string, useDebounce = true) => {\n\t\tif (!apiRequest) return;\n\n\t\tif (searchText.length < minLength) return;\n\n\t\t// условия поиска не поменялись, данные загружены\n\t\tif (searchText === _searchText && items.value.length) return;\n\n\t\t_searchText = searchText;\n\n\t\tif (useDebounce) {\n\t\t\tvoid loadDebounce();\n\t\t} else {\n\t\t\tvoid load();\n\t\t}\n\t};\n\n\treturn {\n\t\titems,\n\t\tisLoading,\n\t\tloadAppend,\n\t\tsetSearchTextAndLoad,\n\t};\n};\n","<script setup lang=\"ts\">\nimport type { ComputedRef, ModelRef, ComponentInstance } from 'vue';\nimport { computed, ref, watch } from 'vue';\nimport Core from '@/core/core/core';\nimport { invertKeyboardLayout } from '@/core/utils/keyboard';\nimport { useI18n } from '@/core/plugins/i18n';\nimport { TopPopup, TopPopupListItem, TopPopupWidgetInput } from '@/components/popup/popup';\nimport { TopPreloader } from '@/components/forms/forms';\nimport type { TopLibPopup } from '@/components/popup/lib/popup';\nimport type { Item, Props, Slots } from './selector2';\nimport { useAPI } from './api';\nimport Selector2ItemMulti from './itemMulti.vue';\n\nconst props = withDefaults(defineProps<Props>(), {\n\titems: () => [] as Array<Item>,\n\tsize: 's',\n\tminLength: 0,\n\tshowSelectedInInput: true,\n\tshowSearch: true,\n});\n\nconst model = defineModel<Props['modelValue']>() as ModelRef<Props['modelValue']>;\n\ndefineSlots<Slots>();\n\n/**\n * Текст поиска по результатам\n */\nconst searchText = ref('');\n\n/**\n * Сброс поиска\n */\nconst resetSearch = () => {\n\tsearchText.value = '';\n\tAPI.items.value = [];\n};\n\nconst itemAll = {\n\tid: 0,\n\tname: useI18n().Common.All!,\n};\n\n/**\n * Экземпляр компонента Popup\n */\nconst popupRef = ref<ComponentInstance<typeof TopPopup> | null>(null);\n\n/**\n * Основной элемент селектора\n */\nconst elRef = ref<HTMLElement | null>(null);\n\n/**\n * Получить доступ к объекту popup\n */\nconst getPopup = (): TopLibPopup | undefined => {\n\treturn popupRef.value?.popup;\n};\n\n// для storybook\nif ((window as any).__STORYBOOK_PREVIEW__ && !props.modelValue) {\n\twatch(\n\t\t() => props.multiselect,\n\t\t() => {\n\t\t\tmodel.value = props.multiselect ? [] : { id: null, name: '' };\n\t\t},\n\t\t{ immediate: true },\n\t);\n}\n\nconst API = useAPI(props.apiRequest, props.minLength, props.useCache);\n\n/**\n * Варианты выбора: props.items + \"Выбрать все\"\n */\nconst localItems: ComputedRef<Array<Item>> = computed(() => {\n\tconst items: Array<Item> = [];\n\n\tif (!props.multiselect && props.appendAllValue) {\n\t\titems.push(itemAll);\n\t}\n\n\tprops.items.forEach(item => items.push({ ...item }));\n\n\treturn items;\n});\n\n/**\n * Проверить, что элемент выбран\n */\nconst isSelected = (item: Item, checkNameForNullId = true) => {\n\tif (checkNameForNullId && item.id === null) {\n\t\tif (Array.isArray(model.value)) {\n\t\t\treturn model.value.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);\n\t\t} else {\n\t\t\treturn item.name === model.value.name;\n\t\t}\n\t}\n\n\tif (Array.isArray(model.value)) {\n\t\treturn model.value.some(itemSelected => itemSelected.id === item.id);\n\t} else {\n\t\treturn item.id === model.value.id;\n\t}\n};\n\n/**\n * Варианты выбора, которые выводятся\n */\nconst itemsForShow = computed(() => {\n\tconst searchString = searchText.value.toLowerCase();\n\tconst searchStringInvertKeyboard = invertKeyboardLayout(searchString);\n\n\tlet items: typeof localItems.value = [];\n\n\tlocalItems.value.forEach((item) => {\n\t\tconst itemName = item.name.toLowerCase();\n\n\t\tif (\n\t\t\titem.id === Number(searchString) ||\n\t\t\titemName.includes(searchString) ||\n\t\t\titemName.includes(searchStringInvertKeyboard)\n\t\t) {\n\t\t\tif (itemName === searchString || itemName === searchStringInvertKeyboard) {\n\t\t\t\titems.unshift(item);\n\t\t\t} else {\n\t\t\t\titems.push(item);\n\t\t\t}\n\t\t}\n\t});\n\n\titems.push(...API.items.value);\n\n\tif (\n\t\tprops.appendSearchToResult &&\n\t\t!!searchText.value &&\n\t\t(!items.length || items[0].name.toLowerCase() !== searchString)\n\t) {\n\t\titems.push({\n\t\t\tid: null,\n\t\t\tname: searchText.value,\n\t\t});\n\t}\n\n\tif (props.multiselect) {\n\t\titems = items.filter(item => !isSelected(item));\n\t}\n\n\treturn items;\n});\n\n/**\n * Выбрать значение\n *\n * Управляет закрытием окна\n */\nconst selectItem = async (item: Item) => {\n\tif (props.multiselect) {\n\t\tif (!Array.isArray(model.value)) return;\n\n\t\tif (isSelected(item)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newModel = [...model.value];\n\t\tnewModel.push({ ...item });\n\t\tmodel.value = newModel;\n\n\t\tif (!Core.state.isMobile) {\n\t\t\tsetTimeout(() => {\n\t\t\t\tgetPopup()?.recalcPosition();\n\t\t\t\tgetPopup()?.elPopupWidget?.querySelector('input')?.focus();\n\n\t\t\t\tif (searchText.value) resetSearch();\n\t\t\t});\n\t\t}\n\t} else {\n\t\tif (JSON.stringify(item) !== JSON.stringify(model.value)) {\n\t\t\tmodel.value = { ...item };\n\t\t}\n\t}\n};\n\n/**\n * Выбрать следующее значение\n */\nconst selectNextItem = () => {\n\tif (!Array.isArray(model.value)) {\n\t\tconst currentIndex = localItems.value.findIndex(item => item.id === (model.value as Item).id);\n\t\tconst nextIndex = (currentIndex + 1) % localItems.value.length;\n\t\tmodel.value = { ...localItems.value[nextIndex] };\n\t}\n};\n\n/**\n * Удалить выбранное значение по id\n * @param id\n */\nconst deleteItemById = async (id: Item['id']) => {\n\tif (Array.isArray(model.value)) {\n\t\tmodel.value = model.value.filter(item => item.id !== id);\n\n\t\tsetTimeout(() => {\n\t\t\tgetPopup()?.recalcPosition();\n\t\t});\n\t}\n};\n\nconst isOpened = ref(false); // флаг попап открыт\n\nif (props.apiRequest) {\n\twatch(isOpened, () => {\n\t\tif (isOpened.value) {\n\t\t\t// при открытии сразу выполнить поиск\n\t\t\tAPI.setSearchTextAndLoad(searchText.value, false);\n\t\t}\n\t});\n\n\t// отложенный поиск при вводе текста\n\twatch(searchText, () => API.setSearchTextAndLoad(searchText.value));\n}\n\nconst onScrollContentList = (e: Event) => {\n\tconst el = e.target as HTMLElement;\n\n\tif (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {\n\t\tAPI.loadAppend();\n\t}\n};\n\nconst onClose = () => {\n\tisOpened.value = false;\n\n\telRef.value?.focus();\n\n\tif (searchText.value) resetSearch();\n};\n</script>\n\n<template>\n\t<TopPopup\n\t\tref=\"popupRef\"\n\t\t@open=\"isOpened = true\"\n\t\t@close=\"onClose()\"\n\t\t@scrollContentList=\"apiRequest ? onScrollContentList($event) : undefined\"\n\t\t:notch=\"false\"\n\t\t:transitionDuration=\"0\"\n\t>\n\t\t<template #opener>\n\t\t\t<div\n\t\t\t\tref=\"elRef\"\n\t\t\t\tv-top-focus.onupdate=\"isError\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-selector2' : true,\n\t\t\t\t\t'top-selector2-multiselect': multiselect,\n\t\t\t\t\t['top-size_' + size]: true,\n\t\t\t\t\t['top-disabled']: disabled,\n\t\t\t\t\t['top-forms-focusable']: !disabled,\n\t\t\t\t\t['top-error']: isError,\n\t\t\t\t}\"\n\t\t\t\t@keydown.up.down.enter.space.stop.prevent=\"($event.currentTarget as HTMLElement).click()\"\n\t\t\t\t@keydown.delete=\"model = []\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t>\n\t\t\t\t<template v-if=\"multiselect\">\n\t\t\t\t\t<div class=\"top-selector2_activeItems\">\n\t\t\t\t\t\t<Selector2ItemMulti\n\t\t\t\t\t\t\tv-for=\"item of model as Array<Item>\"\n\t\t\t\t\t\t\t:id=\"item.id\"\n\t\t\t\t\t\t\t:name=\"item.name\"\n\t\t\t\t\t\t\t@delete=\"deleteItemById\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\n\t\t\t\t<span v-if=\"!multiselect\" class=\"top-selector2_activeName top-ellipsis\">\n\t\t\t\t\t{{ !Array.isArray(model) ? model.name : '' }}\n\t\t\t\t</span>\n\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"addChanger && !multiselect && localItems.length > 1 && !disabled\"\n\t\t\t\t\tclass=\"top-changer top-changer-selector\"\n\t\t\t\t\t@click.stop=\"selectNextItem\"\n\t\t\t\t></span>\n\t\t\t</div>\n\t\t</template>\n\n\t\t<template #widget v-if=\"showSearch\">\n\t\t\t<TopPopupWidgetInput\n\t\t\t\ttitle=\"Поиск\"\n\t\t\t\ticon=\"\"\n\t\t\t\tv-model=\"searchText\"\n\t\t\t\t:isLoading=\"API.isLoading.value && !apiRequest?.params.offset\"\n\t\t\t\t:placeholder=\"!Array.isArray(model) && !multiselect && showSelectedInInput ? model.name : placeholder\"\n\t\t\t/>\n\t\t</template>\n\n\t\t<template #contentList>\n\t\t\t<TopPopupListItem\n\t\t\t\tv-for=\"item of itemsForShow\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'top-active': !Array.isArray(model) && !multiselect && model.id === item.id && model.name === item.name,\n\t\t\t\t}\"\n\t\t\t\t:key=\"item.id ?? undefined\"\n\t\t\t\t:closeByClick=\"!multiselect || Core.state.isMobile\"\n\t\t\t\t@click=\"selectItem(item)\"\n\t\t\t>\n\t\t\t\t<slot\n\t\t\t\t\tv-if=\"$slots.item\"\n\t\t\t\t\tname=\"item\"\n\t\t\t\t\t:item=\"item\"\n\t\t\t\t></slot>\n\n\t\t\t\t<template\n\t\t\t\t\tv-else\n\t\t\t\t>\n\t\t\t\t\t{{ item.name }}\n\t\t\t\t</template>\n\t\t\t</TopPopupListItem>\n\n\t\t\t<TopPopupListItem\n\t\t\t\tv-if=\"!API.isLoading.value && !itemsForShow.length\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\t{{ $i18n.Common.No_results }}\n\t\t\t</TopPopupListItem>\n\n\t\t\t<!-- Индикатор загрузки, первичная дозагрузка отображается в поле поиска, если оно отображено -->\n\t\t\t<TopPopupListItem\n\t\t\t\tv-if=\"API.isLoading.value && (!showSearch || apiRequest?.params.offset)\"\n\t\t\t\ttype=\"regular\"\n\t\t\t>\n\t\t\t\t<TopPreloader type=\"circles\"/>\n\t\t\t</TopPopupListItem>\n\t\t</template>\n\t</TopPopup>\n</template>\n\n<style>\n.top-selector2 {\n\twidth: 180px;\n\tmin-height: var(--top-forms-base-height);\n\tbox-sizing: border-box;\n\tposition: relative;\n\tdisplay: flex;\n\toverflow: hidden;\n\tpadding: var(--top-padding-1) var(--top-forms-padding);\n\tcolor: var(--top-forms-placeholder-color);\n\n\tborder-radius: var(--top-radius-2);\n\tborder: 1px solid var(--top-forms-border-color);\n\tbackground: var(--top-forms-background-color);\n}\n\n.top-selector2-multiselect {\n\twidth: unset;\n\tmin-width: 180px;\n\tpadding: var(--top-padding-1);\n}\n\n.top-selector2.top-active {\n\t--top-forms-border-color: var(--top-forms-border-color-hover);\n}\n\n.top-selector2_activeItems {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: var(--top-padding-1);\n\tmax-width: 100%;\n}\n\n.top-selector2_activeName {\n\twhite-space: nowrap;\n}\n\n.top-changer-selector {\n\ttransform: translateX(-16px);\n}\n</style>\n","import type { ComponentCustomProps } from 'vue';\n\nimport EditArea from './editArea/editArea.vue';\nimport EditInput from './editInput/editInput.vue';\nimport RadioGroup from './radioGroup/radioGroup.vue';\nimport CheckboxGroup from './checkboxGroup/checkboxGroup.vue';\nimport Selector2 from './selector2/selector2.vue';\nimport Menu from './menu/menu.vue';\nimport Info from './info/info.vue';\n\nexport const TopEditArea = EditArea as typeof EditArea & ComponentCustomProps;\nexport const TopEditInput = EditInput as typeof EditInput & ComponentCustomProps;\nexport const TopRadioGroup = RadioGroup as typeof RadioGroup & ComponentCustomProps;\nexport const TopCheckboxGroup = CheckboxGroup as typeof CheckboxGroup & ComponentCustomProps;\nexport const TopSelector2 = Selector2 as typeof Selector2 & ComponentCustomProps;\nexport const TopMenu = Menu as typeof Menu & ComponentCustomProps;\nexport const TopInfo = Info as typeof Info & ComponentCustomProps;\n"],"names":["props","__props","emit","__emit","localValue","ref","isFocused","isChanged","computed","submit","value","cancel","clickOnTitle","intermediateValue","watch","toRef","model","useModel","elRef","_a","item","_c","_b","_e","_d","uid","onChange","id","newModel","index","useAPI","apiRequest","minLength","useCache","items","isLoading","_searchText","_nextOffset","callAPIRequest","res","cacheKey","indexWithError","load","loadAppend","loadDebounce","debounce","searchText","useDebounce","resetSearch","API","itemAll","useI18n","popupRef","getPopup","localItems","isSelected","checkNameForNullId","itemSelected","itemsForShow","searchString","searchStringInvertKeyboard","invertKeyboardLayout","itemName","selectItem","Core","selectNextItem","nextIndex","deleteItemById","isOpened","onScrollContentList","el","onClose","TopEditArea","_sfc_main$6","TopEditInput","_sfc_main$5","TopRadioGroup","_sfc_main$4","TopCheckboxGroup","_sfc_main$3","TopSelector2","_sfc_main$1","TopMenu","_sfc_main$a","TopInfo","_sfc_main"],"mappings":"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"}