@topvisor/ui 0.0.36 → 0.0.37

package/formsExt/formsExt.js

@@ -1,9 +1,9 @@
-import { defineComponent as T, ref as b, watch as g, toRef as w, computed as k, openBlock as d, createElementBlock as i, normalizeClass as y, toDisplayString as m, createCommentVNode as v, createElementVNode as K, createVNode as f, withKeys as V, withModifiers as h, createBlock as C, withCtx as A, createTextVNode as _, mergeProps as G, renderSlot as E, Fragment as I, renderList as H } from "vue";
-import { T as M, B as $, _ as B, I as z } from "../.chunks/forms-db4cb24d.es.js";
-const N = {
+import { defineComponent as B, ref as V, watch as w, toRef as g, computed as k, openBlock as i, createElementBlock as n, normalizeClass as m, toDisplayString as v, createCommentVNode as y, createElementVNode as f, createVNode as h, withKeys as b, withModifiers as A, createBlock as C, withCtx as _, createTextVNode as $, mergeProps as K, renderSlot as E, Fragment as I, renderList as M, withDirectives as H, vModelRadio as z } from "vue";
+import { T as N, B as T, _ as G, I as P } from "../.chunks/forms-7be951a7.es.js";
+const R = {
   key: 0,
   class: "top-editArea_title"
-}, P = { class: "top-editArea_footer" }, X = /* @__PURE__ */ T({
+}, U = { class: "top-editArea_footer" }, X = /* @__PURE__ */ B({
   __name: "editArea",
   props: {
     modelValue: {},
@@ -22,33 +22,33 @@ const N = {
     hint: {}
   },
   emits: ["update:modelValue", "cancel"],
-  setup(p, { emit: n }) {
-    const r = p, t = b(""), o = b(r.modelValue);
-    g(w(r, "modelValue"), () => {
-      o.value = r.modelValue;
+  setup(p, { emit: u }) {
+    const r = p, o = V(""), l = V(r.modelValue);
+    w(g(r, "modelValue"), () => {
+      l.value = r.modelValue;
     });
-    const s = k(() => o.value !== r.modelValue), a = (e) => {
-      n("update:modelValue", e);
-    }, u = () => {
-      n("cancel"), o.value = r.modelValue;
+    const t = k(() => l.value !== r.modelValue), d = (e) => {
+      u("update:modelValue", e);
+    }, a = () => {
+      u("cancel"), l.value = r.modelValue;
     };
-    return (e, l) => (d(), i("div", {
-      class: y({
+    return (e, s) => (i(), n("div", {
+      class: m({
         "top-editArea": !0,
         "top-editArea-attachedToKeyboard": e.attachToKeyboard
       })
     }, [
-      e.title ? (d(), i("div", N, m(e.title), 1)) : v("", !0),
-      K("div", {
-        class: y({
+      e.title ? (i(), n("div", R, v(e.title), 1)) : y("", !0),
+      f("div", {
+        class: m({
           "top-editArea_form": !0,
           "top-error": e.isError,
-          "top-focus": t.value == "focus"
+          "top-focus": o.value == "focus"
         })
       }, [
-        f(M, {
-          modelValue: o.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (c) => o.value = c),
+        h(N, {
+          modelValue: l.value,
+          "onUpdate:modelValue": s[0] || (s[0] = (c) => l.value = c),
           name: e.name,
           placeholder: e.placeholder,
           rows: e.rows,
@@ -59,33 +59,33 @@ const N = {
           isError: e.isError,
           hint: e.hint,
           class: "top-editArea_element",
-          onFocus: l[1] || (l[1] = (c) => t.value = "focus"),
-          onBlur: l[2] || (l[2] = (c) => t.value = ""),
+          onFocus: s[1] || (s[1] = (c) => o.value = "focus"),
+          onBlur: s[2] || (s[2] = (c) => o.value = ""),
           onKeyup: [
-            V(u, ["esc"]),
-            l[3] || (l[3] = V(h((c) => a(o.value), ["ctrl"]), ["enter"]))
+            b(a, ["esc"]),
+            s[3] || (s[3] = b(A((c) => d(l.value), ["ctrl"]), ["enter"]))
           ]
         }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
-        K("div", P, [
-          s.value && (!e.attachToKeyboard || e.modelValue) ? (d(), C($, {
+        f("div", U, [
+          t.value && (!e.attachToKeyboard || e.modelValue) ? (i(), C(T, {
             key: 0,
             class: "top-editArea_button",
             color: "theme",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: u
+            onClick: a
           }, {
-            default: A(() => [
-              _(m(e.attachToKeyboard ? "" : e.cancelText), 1)
+            default: _(() => [
+              $(v(e.attachToKeyboard ? "" : e.cancelText), 1)
             ]),
             _: 1
-          }, 8, ["icon"])) : v("", !0),
-          f($, {
+          }, 8, ["icon"])) : y("", !0),
+          h(T, {
             class: "top-editArea_button",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: l[4] || (l[4] = (c) => a(o.value))
+            onClick: s[4] || (s[4] = (c) => d(l.value))
           }, {
-            default: A(() => [
-              _(m(e.attachToKeyboard ? "" : e.submitText), 1)
+            default: _(() => [
+              $(v(e.attachToKeyboard ? "" : e.submitText), 1)
             ]),
             _: 1
           }, 8, ["icon"])
@@ -93,7 +93,7 @@ const N = {
       ], 2)
     ], 2));
   }
-}), F = {
+}), D = {
   "top-editArea": "top-editArea",
   "top-editArea_title": "top-editArea_title",
   "top-editArea_form": "top-editArea_form",
@@ -102,9 +102,9 @@ const N = {
   "top-textarea_textarea": "top-textarea_textarea",
   "top-editArea_footer": "top-editArea_footer",
   "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
-}, R = {
-  $style: F
-}, Z = /* @__PURE__ */ B(X, [["__cssModules", R]]), S = { class: "top-editInput" }, U = /* @__PURE__ */ T({
+}, F = {
+  $style: D
+}, oe = /* @__PURE__ */ G(X, [["__cssModules", F]]), S = { class: "top-editInput" }, L = /* @__PURE__ */ B({
   __name: "editInput",
   props: {
     modelValue: {},
@@ -112,42 +112,42 @@ const N = {
     button: {}
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: n }) {
-    const r = p, t = b(r.modelValue);
-    g(w(r.modelValue), () => {
-      t.value = r.modelValue;
+  setup(p, { emit: u }) {
+    const r = p, o = V(r.modelValue);
+    w(g(r.modelValue), () => {
+      o.value = r.modelValue;
     });
-    const o = () => {
-      n("update:modelValue", t.value);
+    const l = () => {
+      u("update:modelValue", o.value);
     };
-    return (s, a) => (d(), i("div", S, [
-      f(z, G(s.input, {
-        onKeydownCapture: a[0] || (a[0] = V(h((u) => t.value = s.modelValue, ["stop"]), ["esc"])),
-        onKeydown: V(h(o, ["stop"]), ["enter"]),
-        modelValue: t.value,
-        "onUpdate:modelValue": a[1] || (a[1] = (u) => t.value = u)
+    return (t, d) => (i(), n("div", S, [
+      h(P, K(t.input, {
+        onKeydownCapture: d[0] || (d[0] = b(A((a) => o.value = t.modelValue, ["stop"]), ["esc"])),
+        onKeydown: b(A(l, ["stop"]), ["enter"]),
+        modelValue: o.value,
+        "onUpdate:modelValue": d[1] || (d[1] = (a) => o.value = a)
       }), null, 16, ["onKeydown", "modelValue"]),
-      t.value !== s.modelValue ? (d(), C($, G({
+      o.value !== t.modelValue ? (i(), C(T, K({
         key: 0,
         icon: "",
         styling: "soft"
-      }, s.button, { onClick: o }), {
-        default: A(() => [
-          E(s.$slots, "default")
+      }, t.button, { onClick: l }), {
+        default: _(() => [
+          E(t.$slots, "default")
         ]),
         _: 3
-      }, 16)) : v("", !0)
+      }, 16)) : y("", !0)
     ]));
   }
-}), D = {
+}), j = {
   "top-editInput": "top-editInput",
   "top-input": "top-input"
-}, L = {
-  $style: D
-}, x = /* @__PURE__ */ B(U, [["__cssModules", L]]), j = ["data-top-icon", "onClick"], q = {
+}, q = {
+  $style: j
+}, te = /* @__PURE__ */ G(L, [["__cssModules", q]]), J = ["data-top-icon", "onClick"], O = {
   key: 0,
   class: "top-radioGroup_circle"
-}, J = /* @__PURE__ */ T({
+}, Q = ["value", "disabled"], W = /* @__PURE__ */ B({
   __name: "radioGroup",
   props: {
     modelValue: {},
@@ -157,38 +157,51 @@ const N = {
     isError: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: n }) {
-    const r = p, t = k({
+  setup(p, { emit: u }) {
+    const r = p, o = k({
       get() {
         return r.modelValue;
       },
-      set(o) {
-        n("update:modelValue", o);
+      set(t) {
+        u("update:modelValue", t);
       }
-    });
-    return (o, s) => (d(), i("div", {
-      class: y({
+    }), l = "radioGroup-" + Math.random();
+    return (t, d) => (i(), n("div", {
+      class: m({
         "top-radioGroup": !0,
         "top-scrollBarXHidding": !0,
-        ["top-size_" + o.size]: !!o.size,
-        "top-error": o.isError
+        ["top-size_" + t.size]: !!t.size,
+        "top-error": t.isError
       })
     }, [
-      (d(!0), i(I, null, H(o.radiosProps, (a) => (d(), i("div", {
-        class: y({
-          "top-radioGroup_item-selected": a.value === t.value,
+      (i(!0), n(I, null, M(t.radiosProps, (a) => (i(), n("label", {
+        class: m({
+          "top-radioGroup_item-selected": a.value === o.value,
           "top-radioGroup_item": !0,
+          "top-forms-focusable": !0,
           "top-disabled": a.disabled
         }),
         "data-top-icon": a.icon,
-        onClick: (u) => t.value = a.value
+        onClick: (e) => o.value = a.value
       }, [
-        _(m(a.title) + " ", 1),
-        o.showIndicator ? (d(), i("span", q)) : v("", !0)
-      ], 10, j))), 256))
+        $(v(a.title) + " ", 1),
+        t.showIndicator ? (i(), n("span", O)) : y("", !0),
+        H(f("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (e) => o.value = e),
+          name: l,
+          type: "radio",
+          class: m({
+            "top-unvisible": !0
+          }),
+          value: a.value,
+          disabled: a.disabled
+        }, null, 8, Q), [
+          [z, o.value]
+        ])
+      ], 10, J))), 256))
     ], 2));
   }
-}), O = {
+}), Y = {
   "top-scrollBarXHidding": "top-scrollBarXHidding",
   "top-radioGroup": "top-radioGroup",
   "top-radioGroup_item": "top-radioGroup_item",
@@ -196,12 +209,12 @@ const N = {
   "top-radioGroup_circle": "top-radioGroup_circle",
   "top-disabled": "top-disabled",
   "top-error": "top-error"
-}, Q = {
-  $style: O
-}, ee = /* @__PURE__ */ B(J, [["__cssModules", Q]]);
+}, Z = {
+  $style: Y
+}, ae = /* @__PURE__ */ G(W, [["__cssModules", Z]]);
 export {
-  Z as EditArea,
-  x as EditInput,
-  ee as RadioGroup
+  oe as EditArea,
+  te as EditInput,
+  ae as RadioGroup
 };
 //# sourceMappingURL=formsExt.js.map

package/formsExt/formsExt.js.map

@@ -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"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, toRef, watch, computed } from 'vue';\nimport Button from '@/components/forms/button/button.vue';\nimport type { Props, Emits } from './editArea';\nimport Textarea from '@/components/forms/textarea/textarea.vue';\n\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcancelText: 'Отмена',\n\tsubmitText: 'Отправить',\n\texpandable: true,\n});\n\nconst emit = defineEmits<Emits>();\n\nconst state = ref('');\n\n/**\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\n */\nconst localValue = ref(props.modelValue);\n\nwatch(toRef(props, 'modelValue'), () => {\n\tlocalValue.value = props.modelValue;\n});\n\nconst isChanged = computed(() => localValue.value !== props.modelValue);\n\nconst submit = (value: string) => {\n\temit('update:modelValue', value);\n};\n\nconst cancel = () => {\n\temit('cancel');\n\n\t// сброс введенного значения\n\tlocalValue.value = props.modelValue;\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>\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': state == 'focus',\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=\"state = 'focus'\"\n\t\t\t\t@blur=\"state = ''\"\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 && (!attachToKeyboard || modelValue)\"\n\t\t\t\t\tclass=\"top-editArea_button\"\n\t\t\t\t\tcolor=\"theme\"\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"cancel\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\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\t:icon=\"attachToKeyboard ? '': ''\"\n\t\t\t\t\t@click=\"submit(localValue)\"\n\t\t\t\t>\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<style module>\n.top-editArea {\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\tbackground: var(--top-forms-background-color);\n\toutline-color: var(--color-theme-75);\n\toutline-offset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.top-editArea_form:hover {\n\tbackground: var(--top-forms-background-color-hover);\n}\n\n/* textarea в EditArea */\n.top-textarea {\n\twidth: 100%;\n}\n\n.top-editArea_element.top-textarea_textarea {\n\tborder: none;\n\toutline: none;\n\tanimation: none;\n}\n\n/* footer */\n.top-editArea_footer {\n\tpadding: var(--top-forms-padding);\n\tdisplay: flex;\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\tmargin-bottom: env(keyboard-inset-height, 0);\n\tposition: fixed;\n\tbottom: 0;\n\tright: 0;\n\tleft: 0;\n\tz-index: 2;\n\tgap: 0;\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\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</style>","<script setup lang=\"ts\">\nimport { ref, toRef, watch } from 'vue';\nimport type { Props, Emits } from './editInput';\nimport Input from '@/components/forms/input/input.vue';\nimport Button 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<Input\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<Button\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\t\t<!-- @slot Слот Button -->\n\t\t\t<slot></slot>\n\t\t</Button>\n\t</div>\n</template>\n\n<style module>\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>","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Props, Emits } from './radioGroup';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tsize: 's',\n});\n\nconst emit = defineEmits<Emits>();\n\nconst localValue = computed({\n\tget() {\n\t\treturn props.modelValue;\n\t},\n\n\tset(value) {\n\t\temit('update:modelValue', value);\n\t},\n});\n\n</script>\n\n<template>\n\t<div\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<div\n\t\t\tv-for=\"item of radiosProps\"\n\t\t\t:class=\"{\n\t\t\t\t['top-radioGroup_item-selected']: item.value === localValue,\n\t\t\t\t['top-radioGroup_item']: 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=\"localValue = 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\t\t</div>\n\t</div>\n</template>\n\n<style module>\n@import \"./styles/top-scrollBar.css\";\n\n.top-radioGroup {\n\tuser-select: none;\n\tbox-sizing: border-box;\n\tborder-radius: 8px;\n\tbackground-color: var(--color-theme-50);\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\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: 600;\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-theme-25);\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\tpointer-events: none;\n\tbackground-color: var(--color-bg-3);\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\tpadding: 3px;\n\tmargin-left: auto;\n\tdisplay: flex;\n}\n\n.top-radioGroup_circle:before {\n\tcontent: \"\";\n\tborder: 1px solid var(--color-line-3-opacity);\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\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-primary);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle:before {\n\tborder-color: var(--color-primary);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-primary-2);\n}\n\n/* top-disabled */\n.top-radioGroup_item.top-disabled {\n\t--top-icon-color: var(--color-text-3);\n\n\tcolor: var(--color-text-3);\n}\n\n.top-radioGroup_item.top-disabled .top-radioGroup_circle:before {\n\tborder-color: var(--color-theme-400);\n\tbackground-color: var(--color-theme-50);\n}\n\n/* top-error  */\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle:before {\n\tborder-color: var(--color-negative);\n}\n\n.top-radioGroup.top-error .top-radioGroup_item:hover .top-radioGroup_circle:before {\n\tborder-color: var(--color-negative-2);\n}\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel","intermediateValue"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAgBMA,IAAQC,EAAI,EAAE,GAKdC,IAAaD,EAAIE,EAAM,UAAU;AAEvC,IAAAC,EAAMC,EAAMF,GAAO,YAAY,GAAG,MAAM;AACvC,MAAAD,EAAW,QAAQC,EAAM;AAAA,IAAA,CACzB;AAED,UAAMG,IAAYC,EAAS,MAAML,EAAW,UAAUC,EAAM,UAAU,GAEhEK,IAAS,CAACC,MAAkB;AACjC,MAAAC,EAAK,qBAAqBD,CAAK;AAAA,IAAA,GAG1BE,IAAS,MAAM;AACpB,MAAAD,EAAK,QAAQ,GAGbR,EAAW,QAAQC,EAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBC7BpBS,IAAoBX,EAAIE,EAAM,UAAU;AAE9C,IAAAC,EAAMC,EAAMF,EAAM,UAAU,GAAG,MAAM;AACpC,MAAAS,EAAkB,QAAQT,EAAM;AAAA,IAAA,CAChC;AAID,UAAMK,IAAS,MAAM;AACf,MAAAE,EAAA,qBAAqBE,EAAkB,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCP5CV,IAAaK,EAAS;AAAA,MAC3B,MAAM;AACL,eAAOJ,EAAM;AAAA,MACd;AAAA,MAEA,IAAIM,GAAO;AACV,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MAChC;AAAA,IAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"formsExt.js","sources":["../../src/components/formsExt/editArea/editArea.vue","../../src/components/formsExt/editInput/editInput.vue","../../src/components/formsExt/radioGroup/radioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, toRef, watch, computed } from 'vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\nimport type { Props, Emits } from './editArea';\r\nimport Textarea from '@/components/forms/textarea/textarea.vue';\r\n\r\n// TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcancelText: 'Отмена',\r\n\tsubmitText: 'Отправить',\r\n\texpandable: true,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst state = ref('');\r\n\r\n/**\r\n * Локальное значение modelValue, будет проброшено вверх только в случае отправки формы\r\n */\r\nconst localValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props, 'modelValue'), () => {\r\n\tlocalValue.value = props.modelValue;\r\n});\r\n\r\nconst isChanged = computed(() => localValue.value !== props.modelValue);\r\n\r\nconst submit = (value: string) => {\r\n\temit('update:modelValue', value);\r\n};\r\n\r\nconst cancel = () => {\r\n\temit('cancel');\r\n\r\n\t// сброс введенного значения\r\n\tlocalValue.value = props.modelValue;\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t'top-editArea': true,\r\n\t\t\t'top-editArea-attachedToKeyboard': attachToKeyboard,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tv-if=\"title\"\r\n\t\t\tclass=\"top-editArea_title\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-editArea_form': true,\r\n\t\t\t\t'top-error': isError,\r\n\t\t\t\t'top-focus': state == 'focus',\r\n\t\t\t}\"\r\n\t\t>\r\n\t\t\t<Textarea\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"name\"\r\n\t\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t\t:rows=\"rows\"\r\n\t\t\t\t:minHeight=\"minHeight\"\r\n\t\t\t\t:expandable=\"expandable\"\r\n\t\t\t\t:disabled=\"disabled\"\r\n\t\t\t\t:readonly=\"readonly\"\r\n\t\t\t\t:isError=\"isError\"\r\n\t\t\t\t:hint=\"hint\"\r\n\t\t\t\tclass=\"top-editArea_element\"\r\n\t\t\t\t@focus=\"state = 'focus'\"\r\n\t\t\t\t@blur=\"state = ''\"\r\n\t\t\t\t@keyup.esc=\"cancel\"\r\n\t\t\t\t@keyup.ctrl.enter=\"submit(localValue)\"\r\n\t\t\t/>\r\n\r\n\t\t\t<div class=\"top-editArea_footer\">\r\n\t\t\t\t<Button\r\n\t\t\t\t\tv-if=\"isChanged && (!attachToKeyboard || modelValue)\"\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\tcolor=\"theme\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"cancel\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : cancelText }}\r\n\t\t\t\t</Button>\r\n\r\n\t\t\t\t<Button\r\n\t\t\t\t\tclass=\"top-editArea_button\"\r\n\t\t\t\t\t:icon=\"attachToKeyboard ? '': ''\"\r\n\t\t\t\t\t@click=\"submit(localValue)\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ attachToKeyboard ? '' : submitText }}\r\n\t\t\t\t</Button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editArea {\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tgap: 6px;\r\n}\r\n\r\n.top-editArea_title {\r\n\tfont-size: 12px;\r\n}\r\n\r\n.top-editArea_form {\r\n\tbackground: var(--top-forms-background-color);\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n}\r\n\r\n.top-editArea_form:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n/* textarea в EditArea */\r\n.top-textarea {\r\n\twidth: 100%;\r\n}\r\n\r\n.top-editArea_element.top-textarea_textarea {\r\n\tborder: none;\r\n\toutline: none;\r\n\tanimation: none;\r\n}\r\n\r\n/* footer */\r\n.top-editArea_footer {\r\n\tpadding: var(--top-forms-padding);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tgap: var(--top-forms-padding);\r\n}\r\n\r\n/* attachedToKeyboard */\r\n.top-editArea-attachedToKeyboard {\r\n\tbackground: var(--top-forms-background-color);\r\n\tmargin-bottom: env(keyboard-inset-height, 0);\r\n\tposition: fixed;\r\n\tbottom: 0;\r\n\tright: 0;\r\n\tleft: 0;\r\n\tz-index: 2;\r\n\tgap: 0;\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_form {\r\n\tborder-radius: 0;\r\n\tborder: none;\r\n\tborder-top: 1px solid var(--top-forms-border-color);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_title {\r\n\tborder-top: 1px solid var(--color-line-2-opacity);\r\n\tpadding: var(--top-forms-padding);\r\n}\r\n\r\n.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {\r\n\tborder-radius: 100%;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, toRef, watch } from 'vue';\r\nimport type { Props, Emits } from './editInput';\r\nimport Input from '@/components/forms/input/input.vue';\r\nimport Button from '@/components/forms/button/button.vue';\r\n\r\nconst props = defineProps<Props>();\r\n\r\nconst intermediateValue = ref(props.modelValue);\r\n\r\nwatch(toRef(props.modelValue), () => {\r\n\tintermediateValue.value = props.modelValue;\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst submit = () => {\r\n\temit('update:modelValue', intermediateValue.value);\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"top-editInput\">\r\n\t\t<Input\r\n\t\t\t:=\"input\"\r\n\t\t\t@keydown.esc.capture.stop=\"intermediateValue = modelValue\"\r\n\t\t\t@keydown.enter.stop=\"submit\"\r\n\t\t\tv-model=\"intermediateValue\"\r\n\t\t/>\r\n\r\n\t\t<Button\r\n\t\t\tv-if=\"intermediateValue !== modelValue\"\r\n\t\t\ticon=\"\"\r\n\t\t\tstyling=\"soft\"\r\n\t\t\t:=\"button\"\r\n\t\t\t@click=\"submit\"\r\n\t\t>\r\n\t\t\t<!-- @slot Слот Button -->\r\n\t\t\t<slot></slot>\r\n\t\t</Button>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n.top-editInput {\r\n\twidth: 220px;\r\n\tflex-grow: 1;\r\n\tdisplay: flex;\r\n\talign-items: flex-end;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-editInput .top-input {\r\n\twidth: unset;\r\n\tflex-grow: 1;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './radioGroup';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: 's',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst localValue = computed({\r\n\tget() {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\r\n\tset(value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\nconst uid = 'radioGroup-' + Math.random();\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t['top-radioGroup']: true,\r\n\t\t\t['top-scrollBarXHidding']: true,\r\n\t\t\t['top-size_' + size]: !!size,\r\n\t\t\t['top-error']: isError,\r\n\t\t}\"\r\n\t>\r\n\t\t<label\r\n\t\t\tv-for=\"item of radiosProps\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-radioGroup_item-selected']: item.value === localValue,\r\n\t\t\t\t['top-radioGroup_item']: true,\r\n\t\t\t\t['top-forms-focusable']: true,\r\n\t\t\t\t['top-disabled']: item.disabled,\r\n\t\t\t}\"\r\n\t\t\t:data-top-icon=\"item.icon\"\r\n\t\t\t@click=\"localValue = item.value\"\r\n\t\t>\r\n\t\t\t{{ item.title }}\r\n\r\n\t\t\t<span\r\n\t\t\t\tv-if=\"showIndicator\"\r\n\t\t\t\tclass=\"top-radioGroup_circle\"\r\n\t\t\t></span>\r\n\r\n\t\t\t<!-- Для нативной навигации -->\r\n\t\t\t<input\r\n\t\t\t\tv-model=\"localValue\"\r\n\t\t\t\t:name=\"uid\"\r\n\t\t\t\ttype=\"radio\"\r\n\t\t\t\t:class=\"{\r\n\t\t\t\t\t['top-unvisible']: true,\r\n\t\t\t\t}\"\r\n\t\t\t\t:value=\"item.value\"\r\n\t\t\t\t:disabled=\"item.disabled\"\r\n\t\t\t/>\r\n\t\t</label>\r\n\t</div>\r\n</template>\r\n\r\n<style module>\r\n@import \"./styles/top-scrollBar.css\";\r\n\r\n.top-radioGroup {\r\n\tuser-select: none;\r\n\tbox-sizing: border-box;\r\n\tborder-radius: 8px;\r\n\tbackground-color: var(--color-theme-50);\r\n\theight: var(--top-forms-base-height);\r\n\tpadding: 2px;\r\n\tgap: 2px;\r\n\tdisplay: flex;\r\n\talign-items: flex-start;\r\n}\r\n\r\n.top-radioGroup_item {\r\n\tcursor: pointer;\r\n\tbox-sizing: border-box;\r\n\tborder-radius: 6px;\r\n\theight: calc(var(--top-forms-base-height) - 4px);\r\n\tpadding: 0 16px;\r\n\tfont-weight: 600;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex-grow: 1;\r\n\tgap: 4px;\r\n}\r\n\r\n.top-radioGroup_item:hover {\r\n\tbackground-color: var(--color-theme-25);\r\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\r\n}\r\n\r\n/* selected */\r\n.top-radioGroup_item-selected {\r\n\tpointer-events: none;\r\n\tbackground-color: var(--color-bg-3);\r\n\tbox-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);\r\n}\r\n\r\n/* circle */\r\n.top-radioGroup_circle {\r\n\tcontent: \"\";\r\n\tbox-sizing: border-box;\r\n\tborder: 1px solid var(--color-line-3-opacity);\r\n\tborder-radius: 50%;\r\n\tpadding: 3px;\r\n\tmargin-left: auto;\r\n\twidth: calc(var(--top-forms-option-height) - 3px * 2);\r\n\theight: calc(var(--top-forms-option-height) - 3px * 2);\r\n}\r\n\r\n.top-radioGroup_item:hover .top-radioGroup_circle:before {\r\n\tborder-color: var(--color-primary);\r\n}\r\n\r\n/* circle selected */\r\n.top-radioGroup_item-selected .top-radioGroup_circle {\r\n\tborder-color: var(--color-primary);\r\n\tborder-width: 5px;\r\n}\r\n\r\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\r\n\tborder-color: var(--color-primary-2);\r\n}\r\n\r\n/* top-disabled */\r\n.top-radioGroup_item.top-disabled {\r\n\t--top-icon-color: var(--color-text-3);\r\n\r\n\tcolor: var(--color-text-3);\r\n}\r\n\r\n.top-radioGroup_item.top-disabled .top-radioGroup_circle {\r\n\tborder-color: var(--color-theme-400);\r\n\tbackground-color: var(--color-theme-50);\r\n}\r\n\r\n/* top-error  */\r\n.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {\r\n\tborder-color: var(--color-negative);\r\n}\r\n</style>"],"names":["state","ref","localValue","props","watch","toRef","isChanged","computed","submit","value","emit","cancel","intermediateValue","uid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;iBAgBMA,IAAQC,EAAI,EAAE,GAKdC,IAAaD,EAAIE,EAAM,UAAU;AAEvC,IAAAC,EAAMC,EAAMF,GAAO,YAAY,GAAG,MAAM;AACvC,MAAAD,EAAW,QAAQC,EAAM;AAAA,IAAA,CACzB;AAED,UAAMG,IAAYC,EAAS,MAAML,EAAW,UAAUC,EAAM,UAAU,GAEhEK,IAAS,CAACC,MAAkB;AACjC,MAAAC,EAAK,qBAAqBD,CAAK;AAAA,IAAA,GAG1BE,IAAS,MAAM;AACpB,MAAAD,EAAK,QAAQ,GAGbR,EAAW,QAAQC,EAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBC7BpBS,IAAoBX,EAAIE,EAAM,UAAU;AAE9C,IAAAC,EAAMC,EAAMF,EAAM,UAAU,GAAG,MAAM;AACpC,MAAAS,EAAkB,QAAQT,EAAM;AAAA,IAAA,CAChC;AAID,UAAMK,IAAS,MAAM;AACf,MAAAE,EAAA,qBAAqBE,EAAkB,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCP5CV,IAAaK,EAAS;AAAA,MAC3B,MAAM;AACL,eAAOJ,EAAM;AAAA,MACd;AAAA,MAEA,IAAIM,GAAO;AACV,QAAAC,EAAK,qBAAqBD,CAAK;AAAA,MAChC;AAAA,IAAA,CACA,GAEKI,IAAM,gBAAgB,KAAK,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/formsExt.css

@@ -1 +1 @@
-.top-editArea{display:flex;flex-direction:column;gap:6px}.top-editArea_title{font-size:12px}.top-editArea_form{background:var(--top-forms-background-color);outline-color:var(--color-theme-75);outline-offset:0;display:flex;flex-direction:column}.top-editArea_form:hover{background:var(--top-forms-background-color-hover)}.top-textarea{width:100%}.top-editArea_element.top-textarea_textarea{border:none;outline:none;animation:none}.top-editArea_footer{padding:var(--top-forms-padding);display:flex;justify-content:flex-end;gap:var(--top-forms-padding)}.top-editArea-attachedToKeyboard{background:var(--top-forms-background-color);margin-bottom:env(keyboard-inset-height,0);position:fixed;bottom:0;right:0;left:0;z-index:2;gap:0}.top-editArea-attachedToKeyboard .top-editArea_form{border-radius:0;border:none;border-top:1px solid var(--top-forms-border-color)}.top-editArea-attachedToKeyboard .top-editArea_title{border-top:1px solid var(--color-line-2-opacity);padding:var(--top-forms-padding)}.top-editArea-attachedToKeyboard .top-editArea_footer>[data-top-icon]{border-radius:100%}.top-editInput{width:220px;flex-grow:1;display:flex;align-items:flex-end;gap:var(--top-gap-1)}.top-editInput .top-input{width:unset;flex-grow:1}.top-scrollBarXHidding{scrollbar-width:none;overflow-x:auto;overflow-y:hidden}.top-scrollBarXHidding:hover{scrollbar-width:thin}.top-scrollBarXHidding::-webkit-scrollbar{height:6px;display:none}.top-scrollBarXHidding:hover::-webkit-scrollbar{display:block;scrollbar-width:thin}.top-scrollBarXHidding::-webkit-scrollbar-track{background-color:transparent;box-shadow:inset #0000000f 0 0 0 10px}.top-scrollBarXHidding::-webkit-scrollbar-track:hover{box-shadow:inset #00000014 0 0 0 10px}.top-scrollBarXHidding::-webkit-scrollbar-track:active{box-shadow:inset #0000001a 0 0 0 10px}.top-scrollBarXHidding::-webkit-scrollbar-thumb{background-color:var(--color-line-1-opacity)}.top-scrollBarXHidding::-webkit-scrollbar-thumb:hover{background-color:var(--color-line-2-opacity)}.top-scrollBarXHidding::-webkit-scrollbar-thumb:active{background-color:var(--color-line-3-opacity)}.top-scrollBarXHidding::-webkit-scrollbar-button{width:0;height:0}.top-radioGroup{-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:8px;background-color:var(--color-theme-50);height:var(--top-forms-base-height);padding:2px;gap:2px;display:flex;align-items:flex-start}.top-radioGroup_item{cursor:pointer;box-sizing:border-box;border-radius:6px;height:calc(var(--top-forms-base-height) - 4px);padding:0 16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-grow:1;gap:4px}.top-radioGroup_item:hover{background-color:var(--color-theme-25);box-shadow:0 4px 32px #0409541a,0 0 4px #04095414}.top-radioGroup_item-selected{pointer-events:none;background-color:var(--color-bg-3);box-shadow:0 4px 32px #0409541a,0 0 4px #04095414}.top-radioGroup_circle{padding:3px;margin-left:auto;display:flex}.top-radioGroup_circle:before{content:"";border:1px solid var(--color-line-3-opacity);border-radius:50%;box-sizing:border-box;width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radioGroup_item:hover .top-radioGroup_circle:before{border-color:var(--color-primary)}.top-radioGroup_item-selected .top-radioGroup_circle:before{border-color:var(--color-primary);border-width:5px}.top-radioGroup_item-selected:hover .top-radioGroup_circle:before{border-color:var(--color-primary-2)}.top-radioGroup_item.top-disabled{--top-icon-color: var(--color-text-3);color:var(--color-text-3)}.top-radioGroup_item.top-disabled .top-radioGroup_circle:before{border-color:var(--color-theme-400);background-color:var(--color-theme-50)}.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle:before{border-color:var(--color-negative)}.top-radioGroup.top-error .top-radioGroup_item:hover .top-radioGroup_circle:before{border-color:var(--color-negative-2)}
+.top-editArea{display:flex;flex-direction:column;gap:6px}.top-editArea_title{font-size:12px}.top-editArea_form{background:var(--top-forms-background-color);outline-color:var(--color-theme-75);outline-offset:0;display:flex;flex-direction:column}.top-editArea_form:hover{background:var(--top-forms-background-color-hover)}.top-textarea{width:100%}.top-editArea_element.top-textarea_textarea{border:none;outline:none;animation:none}.top-editArea_footer{padding:var(--top-forms-padding);display:flex;justify-content:flex-end;gap:var(--top-forms-padding)}.top-editArea-attachedToKeyboard{background:var(--top-forms-background-color);margin-bottom:env(keyboard-inset-height,0);position:fixed;bottom:0;right:0;left:0;z-index:2;gap:0}.top-editArea-attachedToKeyboard .top-editArea_form{border-radius:0;border:none;border-top:1px solid var(--top-forms-border-color)}.top-editArea-attachedToKeyboard .top-editArea_title{border-top:1px solid var(--color-line-2-opacity);padding:var(--top-forms-padding)}.top-editArea-attachedToKeyboard .top-editArea_footer>[data-top-icon]{border-radius:100%}.top-editInput{width:220px;flex-grow:1;display:flex;align-items:flex-end;gap:var(--top-gap-1)}.top-editInput .top-input{width:unset;flex-grow:1}.top-scrollBarXHidding{scrollbar-width:none;overflow-x:auto;overflow-y:hidden}.top-scrollBarXHidding:hover{scrollbar-width:thin}.top-scrollBarXHidding::-webkit-scrollbar{height:6px;display:none}.top-scrollBarXHidding:hover::-webkit-scrollbar{display:block;scrollbar-width:thin}.top-scrollBarXHidding::-webkit-scrollbar-track{background-color:transparent;box-shadow:inset #0000000f 0 0 0 10px}.top-scrollBarXHidding::-webkit-scrollbar-track:hover{box-shadow:inset #00000014 0 0 0 10px}.top-scrollBarXHidding::-webkit-scrollbar-track:active{box-shadow:inset #0000001a 0 0 0 10px}.top-scrollBarXHidding::-webkit-scrollbar-thumb{background-color:var(--color-line-1-opacity)}.top-scrollBarXHidding::-webkit-scrollbar-thumb:hover{background-color:var(--color-line-2-opacity)}.top-scrollBarXHidding::-webkit-scrollbar-thumb:active{background-color:var(--color-line-3-opacity)}.top-scrollBarXHidding::-webkit-scrollbar-button{width:0;height:0}.top-radioGroup{-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:8px;background-color:var(--color-theme-50);height:var(--top-forms-base-height);padding:2px;gap:2px;display:flex;align-items:flex-start}.top-radioGroup_item{cursor:pointer;box-sizing:border-box;border-radius:6px;height:calc(var(--top-forms-base-height) - 4px);padding:0 16px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-grow:1;gap:4px}.top-radioGroup_item:hover{background-color:var(--color-theme-25);box-shadow:0 4px 32px #0409541a,0 0 4px #04095414}.top-radioGroup_item-selected{pointer-events:none;background-color:var(--color-bg-3);box-shadow:0 4px 32px #0409541a,0 0 4px #04095414}.top-radioGroup_circle{content:"";box-sizing:border-box;border:1px solid var(--color-line-3-opacity);border-radius:50%;padding:3px;margin-left:auto;width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radioGroup_item:hover .top-radioGroup_circle:before{border-color:var(--color-primary)}.top-radioGroup_item-selected .top-radioGroup_circle{border-color:var(--color-primary);border-width:5px}.top-radioGroup_item-selected:hover .top-radioGroup_circle{border-color:var(--color-primary-2)}.top-radioGroup_item.top-disabled{--top-icon-color: var(--color-text-3);color:var(--color-text-3)}.top-radioGroup_item.top-disabled .top-radioGroup_circle{border-color:var(--color-theme-400);background-color:var(--color-theme-50)}.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle{border-color:var(--color-negative)}