@topvisor/ui 0.0.34 → 0.0.36

package/formsExt/formsExt.js

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

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-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)}

package/icomoon/demo-files/demo.css

@@ -1,161 +1,161 @@
-body {
-  padding: 0;
-  margin: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  line-height: 1.5;
-  color: #555;
-  background: #fff;
-}
-h1 {
-  font-size: 1.5em;
-  font-weight: normal;
-}
-small {
-  font-size: .66666667em;
-}
-a {
-  color: #e74c3c;
-  text-decoration: none;
-}
-a:hover, a:focus {
-  box-shadow: 0 1px #e74c3c;
-}
-.bshadow0, input {
-  box-shadow: inset 0 -2px #e7e7e7;
-}
-input:hover {
-  box-shadow: inset 0 -2px #ccc;
-}
-input, fieldset {
-  font-family: sans-serif;
-  font-size: 1em;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-input {
-  color: inherit;
-  line-height: 1.5;
-  height: 1.5em;
-  padding: .25em 0;
-}
-input:focus {
-  outline: none;
-  box-shadow: inset 0 -2px #449fdb;
-}
-.glyph {
-  font-size: 16px;
-  width: 15em;
-  padding-bottom: 1em;
-  margin-right: 4em;
-  margin-bottom: 1em;
-  float: left;
-  overflow: hidden;
-}
-.liga {
-  width: 80%;
-  width: calc(100% - 2.5em);
-}
-.talign-right {
-  text-align: right;
-}
-.talign-center {
-  text-align: center;
-}
-.bgc1 {
-  background: #f1f1f1;
-}
-.fgc1 {
-  color: #999;
-}
-.fgc0 {
-  color: #000;
-}
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-.mvm {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-.mtn {
-  margin-top: 0;
-}
-.mtl, .mal {
-  margin-top: 1.5em;
-}
-.mbl, .mal {
-  margin-bottom: 1.5em;
-}
-.mal, .mhl {
-  margin-left: 1.5em;
-  margin-right: 1.5em;
-}
-.mhmm {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.mls {
-  margin-left: .25em;
-}
-.ptl {
-  padding-top: 1.5em;
-}
-.pbs, .pvs {
-  padding-bottom: .25em;
-}
-.pvs, .pts {
-  padding-top: .25em;
-}
-.unit {
-  float: left;
-}
-.unitRight {
-  float: right;
-}
-.size1of2 {
-  width: 50%;
-}
-.size1of1 {
-  width: 100%;
-}
-.clearfix:before, .clearfix:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after {
-  clear: both;
-}
-.hidden-true {
-  display: none;
-}
-.textbox0 {
-  width: 3em;
-  background: #f1f1f1;
-  padding: .25em .5em;
-  line-height: 1.5;
-  height: 1.5em;
-}
-#testDrive {
-  display: block;
-  padding-top: 24px;
-  line-height: 1.5;
-}
-.fs0 {
-  font-size: 16px;
-}
-.fs1 {
-  font-size: 32px;
-}
-.fs2 {
-  font-size: 14px;
-}
-.fs3 {
-  font-size: 14px;
-}
-.fs4 {
-  font-size: 8px;
-}
-
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+.fs2 {
+  font-size: 14px;
+}
+.fs3 {
+  font-size: 14px;
+}
+.fs4 {
+  font-size: 8px;
+}
+