@topvisor/ui 0.0.36 → 0.0.38

package/formsExt/formsExt.js

@@ -1,9 +1,13 @@
-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 G, ref as f, watch as w, toRef as k, computed as C, openBlock as n, createElementBlock as m, normalizeClass as v, toDisplayString as y, createCommentVNode as b, createElementVNode as h, createVNode as A, withKeys as V, withModifiers as _, createBlock as E, withCtx as $, createTextVNode as T, mergeProps as g, renderSlot as I, Fragment as M, renderList as H, withDirectives as z, vModelRadio as N } from "vue";
+import { T as P, B, _ as K, I as R } from "../.chunks/forms-779fee37.es.js";
+import("../core/core.js").then((u) => {
+  const p = ["../assets/formsExt.css"].map((t) => import.meta.resolve(t));
+  u.default.Page.addCss(p);
+});
+const U = {
   key: 0,
   class: "top-editArea_title"
-}, P = { class: "top-editArea_footer" }, X = /* @__PURE__ */ T({
+}, X = { class: "top-editArea_footer" }, D = /* @__PURE__ */ G({
   __name: "editArea",
   props: {
     modelValue: {},
@@ -22,33 +26,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(u, { emit: p }) {
+    const t = u, r = p, d = f(""), l = f(t.modelValue);
+    w(k(t, "modelValue"), () => {
+      l.value = t.modelValue;
     });
-    const s = k(() => o.value !== r.modelValue), a = (e) => {
-      n("update:modelValue", e);
-    }, u = () => {
-      n("cancel"), o.value = r.modelValue;
+    const o = C(() => l.value !== t.modelValue), s = (e) => {
+      r("update:modelValue", e);
+    }, a = () => {
+      r("cancel"), l.value = t.modelValue;
     };
-    return (e, l) => (d(), i("div", {
-      class: y({
+    return (e, i) => (n(), m("div", {
+      class: v({
         "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 ? (n(), m("div", U, y(e.title), 1)) : b("", !0),
+      h("div", {
+        class: v({
           "top-editArea_form": !0,
           "top-error": e.isError,
-          "top-focus": t.value == "focus"
+          "top-focus": d.value == "focus"
         })
       }, [
-        f(M, {
-          modelValue: o.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (c) => o.value = c),
+        A(P, {
+          modelValue: l.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (c) => l.value = c),
           name: e.name,
           placeholder: e.placeholder,
           rows: e.rows,
@@ -59,33 +63,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: i[1] || (i[1] = (c) => d.value = "focus"),
+          onBlur: i[2] || (i[2] = (c) => d.value = ""),
           onKeyup: [
-            V(u, ["esc"]),
-            l[3] || (l[3] = V(h((c) => a(o.value), ["ctrl"]), ["enter"]))
+            V(a, ["esc"]),
+            i[3] || (i[3] = V(_((c) => s(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($, {
+        h("div", X, [
+          o.value && (!e.attachToKeyboard || e.modelValue) ? (n(), E(B, {
             key: 0,
             class: "top-editArea_button",
             color: "theme",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: u
+            onClick: a
           }, {
-            default: A(() => [
-              _(m(e.attachToKeyboard ? "" : e.cancelText), 1)
+            default: $(() => [
+              T(y(e.attachToKeyboard ? "" : e.cancelText), 1)
             ]),
             _: 1
-          }, 8, ["icon"])) : v("", !0),
-          f($, {
+          }, 8, ["icon"])) : b("", !0),
+          A(B, {
             class: "top-editArea_button",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: l[4] || (l[4] = (c) => a(o.value))
+            onClick: i[4] || (i[4] = (c) => s(l.value))
           }, {
-            default: A(() => [
-              _(m(e.attachToKeyboard ? "" : e.submitText), 1)
+            default: $(() => [
+              T(y(e.attachToKeyboard ? "" : e.submitText), 1)
             ]),
             _: 1
           }, 8, ["icon"])
@@ -102,9 +106,9 @@ const N = {
   "top-textarea_textarea": "top-textarea_textarea",
   "top-editArea_footer": "top-editArea_footer",
   "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
-}, R = {
+}, S = {
   $style: F
-}, Z = /* @__PURE__ */ B(X, [["__cssModules", R]]), S = { class: "top-editInput" }, U = /* @__PURE__ */ T({
+}, te = /* @__PURE__ */ K(D, [["__cssModules", S]]), L = { class: "top-editInput" }, j = /* @__PURE__ */ G({
   __name: "editInput",
   props: {
     modelValue: {},
@@ -112,42 +116,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(u, { emit: p }) {
+    const t = u, r = f(t.modelValue);
+    w(k(t.modelValue), () => {
+      r.value = t.modelValue;
     });
-    const o = () => {
-      n("update:modelValue", t.value);
+    const d = p, l = () => {
+      d("update:modelValue", r.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 (o, s) => (n(), m("div", L, [
+      A(R, g(o.input, {
+        onKeydownCapture: s[0] || (s[0] = V(_((a) => r.value = o.modelValue, ["stop"]), ["esc"])),
+        onKeydown: V(_(l, ["stop"]), ["enter"]),
+        modelValue: r.value,
+        "onUpdate:modelValue": s[1] || (s[1] = (a) => r.value = a)
       }), null, 16, ["onKeydown", "modelValue"]),
-      t.value !== s.modelValue ? (d(), C($, G({
+      r.value !== o.modelValue ? (n(), E(B, g({
         key: 0,
         icon: "",
         styling: "soft"
-      }, s.button, { onClick: o }), {
-        default: A(() => [
-          E(s.$slots, "default")
+      }, o.button, { onClick: l }), {
+        default: $(() => [
+          I(o.$slots, "default")
         ]),
         _: 3
-      }, 16)) : v("", !0)
+      }, 16)) : b("", !0)
     ]));
   }
-}), D = {
+}), q = {
   "top-editInput": "top-editInput",
   "top-input": "top-input"
-}, L = {
-  $style: D
-}, x = /* @__PURE__ */ B(U, [["__cssModules", L]]), j = ["data-top-icon", "onClick"], q = {
+}, J = {
+  $style: q
+}, ae = /* @__PURE__ */ K(j, [["__cssModules", J]]), O = ["data-top-icon", "onClick"], Q = {
   key: 0,
   class: "top-radioGroup_circle"
-}, J = /* @__PURE__ */ T({
+}, W = ["value", "disabled"], Y = /* @__PURE__ */ G({
   __name: "radioGroup",
   props: {
     modelValue: {},
@@ -157,38 +161,51 @@ const N = {
     isError: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: n }) {
-    const r = p, t = k({
+  setup(u, { emit: p }) {
+    const t = u, r = p, d = C({
       get() {
-        return r.modelValue;
+        return t.modelValue;
       },
       set(o) {
-        n("update:modelValue", o);
+        r("update:modelValue", o);
       }
-    });
-    return (o, s) => (d(), i("div", {
-      class: y({
+    }), l = "radioGroup-" + Math.random();
+    return (o, s) => (n(), m("div", {
+      class: v({
         "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,
+      (n(!0), m(M, null, H(o.radiosProps, (a) => (n(), m("label", {
+        class: v({
+          "top-radioGroup_item-selected": a.value === d.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) => d.value = a.value
       }, [
-        _(m(a.title) + " ", 1),
-        o.showIndicator ? (d(), i("span", q)) : v("", !0)
-      ], 10, j))), 256))
+        T(y(a.title) + " ", 1),
+        o.showIndicator ? (n(), m("span", Q)) : b("", !0),
+        z(h("input", {
+          "onUpdate:modelValue": s[0] || (s[0] = (e) => d.value = e),
+          name: l,
+          type: "radio",
+          class: v({
+            "top-unvisible": !0
+          }),
+          value: a.value,
+          disabled: a.disabled
+        }, null, 8, W), [
+          [N, d.value]
+        ])
+      ], 10, O))), 256))
     ], 2));
   }
-}), O = {
+}), Z = {
   "top-scrollBarXHidding": "top-scrollBarXHidding",
   "top-radioGroup": "top-radioGroup",
   "top-radioGroup_item": "top-radioGroup_item",
@@ -196,12 +213,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]]);
+}, x = {
+  $style: Z
+}, le = /* @__PURE__ */ K(Y, [["__cssModules", x]]);
 export {
-  Z as EditArea,
-  x as EditInput,
-  ee as RadioGroup
+  te as EditArea,
+  ae as EditInput,
+  le 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\">\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\nconst uid = 'radioGroup-' + Math.random();\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<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 === localValue,\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=\"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\n\t\t\t<!-- Для нативной навигации -->\n\t\t\t<input\n\t\t\t\tv-model=\"localValue\"\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 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\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-primary);\n}\n\n/* circle selected */\n.top-radioGroup_item-selected .top-radioGroup_circle {\n\tborder-color: var(--color-primary);\n\tborder-width: 5px;\n}\n\n.top-radioGroup_item-selected:hover .top-radioGroup_circle {\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 {\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 {\n\tborder-color: var(--color-negative);\n}\n</style>"],"names":["props","__props","emit","__emit","state","ref","localValue","watch","toRef","isChanged","computed","submit","value","cancel","intermediateValue","uid"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAAA,IAAAC,GAMAC,IAAAC,GAEAC,IAAAC,EAAA,EAAA,GAKAC,IAAAD,EAAAL,EAAA,UAAA;AAEA,IAAAO,EAAAC,EAAAR,GAAA,YAAA,GAAA,MAAA;AACC,MAAAM,EAAA,QAAAN,EAAA;AAAA,IAAyB,CAAA;AAG1B,UAAAS,IAAAC,EAAA,MAAAJ,EAAA,UAAAN,EAAA,UAAA,GAEAW,IAAA,CAAAC,MAAA;AACC,MAAAV,EAAA,qBAAAU,CAAA;AAAA,IAA+B,GAGhCC,IAAA,MAAA;AACC,MAAAX,EAAA,QAAA,GAGAI,EAAA,QAAAN,EAAA;AAAA,IAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/B1B,UAAAA,IAAAC,GAEAa,IAAAT,EAAAL,EAAA,UAAA;AAEA,IAAAO,EAAAC,EAAAR,EAAA,UAAA,GAAA,MAAA;AACC,MAAAc,EAAA,QAAAd,EAAA;AAAA,IAAgC,CAAA;AAGjC,UAAAE,IAAAC,GAEAQ,IAAA,MAAA;AACC,MAAAT,EAAA,qBAAAY,EAAA,KAAA;AAAA,IAAiD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACblD,UAAAd,IAAAC,GAIAC,IAAAC,GAEAG,IAAAI,EAAA;AAAA,MAA4B,MAAA;AAE1B,eAAAV,EAAA;AAAA,MAAa;AAAA,MACd,IAAAY,GAAA;AAGC,QAAAV,EAAA,qBAAAU,CAAA;AAAA,MAA+B;AAAA,IAChC,CAAA,GAGDG,IAAA,gBAAA,KAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,19 +1,19 @@
 {
-  "name": "@topvisor/ui",
-  "private": false,
-  "version": "0.0.36",
-  "type": "module",
-  "description": "Topvisor UI-kit Vue",
-  "author": "Topvisor",
-  "keywords": [
-    "topvisor",
-    "vue",
-    "ui framework",
-    "component framework",
-    "component library"
-  ],
-  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.3.4"
-  }
+	"name": "@topvisor/ui",
+	"private": false,
+	"version": "0.0.38",
+	"type": "module",
+	"description": "Topvisor UI-kit Vue",
+	"author": "Topvisor",
+	"keywords": [
+		"topvisor",
+		"vue",
+		"ui framework",
+		"component framework",
+		"component library"
+	],
+	"license": "MIT",
+	"peerDependencies": {
+		"vue": "^3.3.4"
+	}
 }

package/popup/popup.amd.js

@@ -1,3 +1,2 @@
-define(["exports","vue","./worker.amd","../.chunks/forms-2891e074.amd","../utils/dom.amd"],function(d,e,i,C,P){"use strict"; if(typeof vue === "undefined") var vue = window.Vue;var m=document.createElement("style");m.textContent=`h3[data-top-popup],div[data-top-popup],i[data-top-popup]:not(.btn):not(.g_btn),b[data-top-popup]:not(.btn):not(.g_btn){cursor:pointer;-webkit-user-select:none;user-select:none;font-style:normal;text-decoration:none;display:inline-flex;align-items:center}[data-top-popup][data-top-popup-disabled]{pointer-events:none;cursor:auto!important}i[contenteditable]{cursor:text!important}
-`,document.head.appendChild(m);const u=e.defineComponent({__name:"opener",props:{id:{},pos:{default:"3"},notch:{type:Boolean,default:!0},openByHover:{type:Boolean},posBy:{default:"fixed"}},setup(a){const t=a,n=t.id||Math.random()+"";let l;function s(p){setTimeout(()=>{l=p.nextElementSibling,l&&c(l)})}e.onUpdated(()=>{l&&c(l)});function c(p){p.dataset.topPopup="vue-"+n,p.dataset.topPopupId=n,p.dataset.topPopupP=t.pos,p.dataset.topPopupPosBy=t.posBy,p.dataset.topPopupNotch=t.notch?"true":"",p.dataset.topPopupOpenByHover=t.openByHover?"true":""}return(p,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("template",{ref:s}),e.renderSlot(p.$slots,"default")],64))}}),$="",y={key:0,class:"top-popup_header"},f={key:1,class:"top-popup_content"},B={key:2,class:"top-popup_content"},k={key:3,class:"top-popup_footer"},_=e.defineComponent({__name:"popup",props:{id:{default:""},class:{},pos:{default:"3"},notch:{type:Boolean,default:!0},openByHover:{type:Boolean},posBy:{default:"fixed"}},emits:["open","close"],setup(a,{emit:t}){const n=a,l=n.id||Math.random()+"",s=e.ref(null),r={onOpen:async o=>{o.elPopupInner.innerText="",s.value=o.elPopupInner,r.opened=!0,r.popup=o,t("open")},onClose:o=>{s.value=null,r.opened=!1,r.popup=null,t("close")},classRef:e.toRef(n,"class"),opened:!1,popup:null};return i.regVueComponent(l,r),e.onUnmounted(()=>{i.unregVueComponent(l)}),(o,g)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.$slots.opener?(e.openBlock(),e.createBlock(u,{key:0,id:e.unref(l),pos:o.pos,posBy:o.posBy,notch:o.notch,openByHover:o.openByHover},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"opener")]),_:3},8,["id","pos","posBy","notch","openByHover"])):e.createCommentVNode("",!0),s.value?(e.openBlock(),e.createBlock(e.Teleport,{key:1,to:s.value},[o.$slots.header?(e.openBlock(),e.createElementBlock("div",y,[e.renderSlot(o.$slots,"header")])):e.createCommentVNode("",!0),o.$slots.content?(e.openBlock(),e.createElementBlock("div",f,[e.renderSlot(o.$slots,"content")])):e.createCommentVNode("",!0),o.$slots.contentList?(e.openBlock(),e.createElementBlock("ul",B,[e.renderSlot(o.$slots,"contentList")])):e.createCommentVNode("",!0),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],8,["to"])):e.createCommentVNode("",!0)],64))}}),h=e.defineComponent({inheritAttrs:!1,__name:"listItem",props:{type:{default:"simple"},closeByClick:{type:Boolean,default:!0}},setup(a){const t=a;return(n,l)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass({"top-popup_listDelimiter":n.type==="delimiter","top-popup_listTitle":n.type==="title"})},[t.type==="simple"||t.type==="link"?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.type==="link"?"a":"i"),e.mergeProps({key:0,class:{"top-popup_item":!0,"top-popup_item-a":t.type==="simple",a:!0,"top-popup-noCloser":!n.closeByClick}},n.$attrs),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},16,["class"])):e.createCommentVNode("",!0),t.type==="title"||t.type==="control"?e.renderSlot(n.$slots,"default",{key:1}):e.createCommentVNode("",!0)],2))}});d.Popup=_,d.PopupListItem=h,d.PopupOpener=u,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../.chunks/forms-58420e52.amd","./worker.amd"],function(i,d,e,m,f){"use strict";i(["../core/core.amd"],l=>{const t=["../assets/popup.css"].map(n=>i.toUrl(n));l.Page.addCss(t)});const y=e.defineComponent({__name:"opener",props:{id:{},pos:{default:"3"},notch:{type:Boolean,default:!0},openByHover:{type:Boolean},posBy:{default:"fixed"}},setup(l){const t=l,n=t.id||Math.random()+"";let s;function c(p){setTimeout(()=>{s=p.nextElementSibling,s&&r(s)})}e.onUpdated(()=>{s&&r(s)});function r(p){p.dataset.topPopup="vue-"+n,p.dataset.topPopupId=n,p.dataset.topPopupP=t.pos,p.dataset.topPopupPosBy=t.posBy,p.dataset.topPopupNotch=t.notch?"true":"",p.dataset.topPopupOpenByHover=t.openByHover?"true":""}return(p,$)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("template",{ref:c}),e.renderSlot(p.$slots,"default")],64))}}),S="",u={key:0,class:"top-popup_header"},B={key:0,class:"top-as-a closer"},k={key:1,class:"top-popup_content"},C={key:2,class:"top-popup_content"},_={key:3,class:"top-popup_footer"},h=e.defineComponent({__name:"popup",props:{id:{default:""},class:{},pos:{default:"3"},notch:{type:Boolean,default:!0},openByHover:{type:Boolean},posBy:{default:"fixed"}},emits:["open","close"],setup(l,{emit:t}){const n=l,s=t,c=n.id||Math.random()+"",r=e.ref(null),a={onOpen:async o=>{o.elPopupInner.innerText="",r.value=o.elPopupInner,a.opened=!0,a.popup=o,s("open")},onClose:o=>{r.value=null,a.opened=!1,a.popup=null,s("close")},classRef:e.toRef(n,"class"),opened:!1,popup:null};return f.regVueComponent(c,a),e.onUnmounted(()=>{f.unregVueComponent(c)}),(o,b)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.$slots.opener?(e.openBlock(),e.createBlock(y,{key:0,id:e.unref(c),pos:o.pos,posBy:o.posBy,notch:o.notch,openByHover:o.openByHover},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"opener")]),_:3},8,["id","pos","posBy","notch","openByHover"])):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createBlock(e.Teleport,{key:1,to:r.value},[o.$slots.header||e.unref(m.Core).state.isMobile?(e.openBlock(),e.createElementBlock("div",u,[e.unref(m.Core).state.isMobile?(e.openBlock(),e.createElementBlock("span",B,e.toDisplayString(a.popup.options.i18n.Close),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header")])):e.createCommentVNode("",!0),o.$slots.content?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(o.$slots,"content")])):e.createCommentVNode("",!0),o.$slots.contentList?(e.openBlock(),e.createElementBlock("ul",C,[e.renderSlot(o.$slots,"contentList")])):e.createCommentVNode("",!0),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)],8,["to"])):e.createCommentVNode("",!0)],64))}}),P=e.defineComponent({inheritAttrs:!1,__name:"listItem",props:{type:{default:"button"},closeByClick:{type:Boolean,default:!0}},setup(l){const t=l;return(n,s)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass({"top-popup_liNoSelectable":t.type!=="button"&&t.type!=="link"})},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.$attrs.href?"a":"div"),e.mergeProps({class:{"top-popup_listItem":!0,"top-popup_listItem-button":t.type==="button"||t.type==="link",a:t.type==="button"||t.type==="link","top-popup_listItem-title":t.type==="title","top-popup_listItem-delimiter":t.type==="delimiter","top-popup-noCloser":!n.closeByClick}},n.$attrs),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},16,["class"]))],2))}});d.Popup=h,d.PopupListItem=P,d.PopupOpener=y,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=popup.amd.js.map

package/popup/popup.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"popup.amd.js","sources":["../../src/components/popup/popup/opener.vue","../../src/components/popup/popup/popup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onUpdated, ref } from 'vue';\nimport type { OpenerProps } from './popup';\n\nconst props = withDefaults(defineProps<OpenerProps>(), {\n\tpos: '3',\n\tnotch: true,\n\tposBy: 'fixed',\n});\n\nconst id = props.id || Math.random() + '';\n\nlet elOpener: Element;\n\n/**\n * Необычная функция для проброски props внтурь элемента слота\n *\n * @param el - вспомогательрный элемент для доступа к элементам слота\n */\nfunction render (el: any) {\n\tsetTimeout(() => {\n\t\telOpener = el.nextElementSibling;\n\n\t\tif (elOpener) {\n\t\t\trenderOpener(elOpener);\n\t\t}\n\t});\n}\n\nonUpdated(() => {\n\tif (elOpener) {\n\t\trenderOpener(elOpener);\n\t}\n});\n\nfunction renderOpener (elOpener: any) {\n\telOpener.dataset.topPopup = 'vue-' + id;\n\telOpener.dataset.topPopupId = id;\n\telOpener.dataset.topPopupP = props.pos;\n\telOpener.dataset.topPopupPosBy = props.posBy;\n\telOpener.dataset.topPopupNotch = props.notch ? 'true' : '';\n\telOpener.dataset.topPopupOpenByHover = props.openByHover ? 'true' : '';\n}\n</script>\n\n<template>\n\t<template :ref=\"render\"></template>\n\n\t<!-- @slot элемент для открытия Popup -->\n\t<slot></slot>\n</template>\n\n<style>\nh3[data-top-popup],\ndiv[data-top-popup],\ni[data-top-popup]:not(.btn):not(.g_btn),\nb[data-top-popup]:not(.btn):not(.g_btn) {\n\tcursor: pointer;\n\tuser-select: none;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n[data-top-popup][data-top-popup-disabled] {\n\tpointer-events: none;\n\tcursor: auto !important;\n}\n\ni[contenteditable] {\n\tcursor: text !important;\n}\n</style>","<script setup lang=\"ts\">\nimport { ref, toRef, onUnmounted } from 'vue';\nimport type { Props, Emits } from './popup';\nimport Opener from './opener.vue';\nimport Worker from '@/components/popup/lib/worker';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tid: '',\n\tpos: '3',\n\tnotch: true,\n\tposBy: 'fixed',\n});\n\nconst emit = defineEmits<Emits>();\n\nconst id = props.id || Math.random() + '';\nconst elPopupRef = ref(null);\n\n// см. lib/popup\nconst onOpen = async (popup: any) => {\n\tpopup.elPopupInner.innerText = '';\n\n\telPopupRef.value = popup.elPopupInner;\n\n\tvueConnector.opened = true;\n\tvueConnector.popup = popup;\n\n\temit('open');\n};\n\n// см. lib/popup\nconst onClose = (popup: any) => {\n\telPopupRef.value = null;\n\n\tvueConnector.opened = false;\n\tvueConnector.popup = null;\n\n\temit('close');\n};\n\nconst vueConnector = {\n\tonOpen,\n\tonClose,\n\tclassRef: toRef(props, 'class'),\n\topened: false,\n\tpopup: null,\n};\n\nWorker.regVueComponent(id, vueConnector);\n\nonUnmounted(() => {\n\tWorker.unregVueComponent(id);\n});\n</script>\n\n<template>\n\t<Opener\n\t\tv-if=\"$slots.opener\"\n\t\t:id=\"id\"\n\t\t:pos=\"pos\"\n\t\t:posBy=\"posBy\"\n\t\t:notch=\"notch\"\n\t\t:openByHover=\"openByHover\"\n\t>\n\t\t<!-- @slot элемент для открытия Popup -->\n\t\t<slot name=\"opener\"></slot>\n\t</Opener>\n\n\t<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->\n\t<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\n\t<teleport\n\t\tv-if=\"elPopupRef\"\n\t\t:to=\"elPopupRef\"\n\t>\n\t\t<div v-if=\"$slots.header\" class=\"top-popup_header\">\n\t\t\t<!-- @slot Шапка -->\n\t\t\t<slot name=\"header\"></slot>\n\t\t</div>\n\n\t\t<div v-if=\"$slots.content\" class=\"top-popup_content\">\n\t\t\t<!-- @slot Контент в свободной форме -->\n\t\t\t<slot name=\"content\"></slot>\n\t\t</div>\n\n\t\t<ul v-if=\"$slots.contentList\" class=\"top-popup_content\">\n\t\t\t<!-- @slot Контент в виде списка, для вставки элементов списка испоьзуйте компонент popup/listItem -->\n\t\t\t<slot name=\"contentList\"></slot>\n\t\t</ul>\n\n\t\t<div v-if=\"$slots.footer\" class=\"top-popup_footer\">\n\t\t\t<!-- @slot Футер -->\n\t\t\t<slot name=\"footer\"></slot>\n\t\t</div>\n\t</teleport>\n</template>"],"names":["id","props","elOpener","render","el","renderOpener","onUpdated","elPopupRef","ref","vueConnector","popup","emit","toRef","Worker","onUnmounted"],"mappings":";gNAUMA,EAAKC,EAAM,IAAM,KAAK,OAAW,EAAA,GAEnC,IAAAC,EAOJ,SAASC,EAAQC,EAAS,CACzB,WAAW,IAAM,CAChBF,EAAWE,EAAG,mBAEVF,GACHG,EAAaH,CAAQ,CACtB,CACA,CACF,CAEAI,EAAAA,UAAU,IAAM,CACXJ,GACHG,EAAaH,CAAQ,CACtB,CACA,EAED,SAASG,EAAcH,EAAe,CACrCA,EAAS,QAAQ,SAAW,OAASF,EACrCE,EAAS,QAAQ,WAAaF,EAC9BE,EAAS,QAAQ,UAAYD,EAAM,IACnCC,EAAS,QAAQ,cAAgBD,EAAM,MACvCC,EAAS,QAAQ,cAAgBD,EAAM,MAAQ,OAAS,GACxDC,EAAS,QAAQ,oBAAsBD,EAAM,YAAc,OAAS,EACrE,sgBC3BMD,EAAKC,EAAM,IAAM,KAAK,OAAW,EAAA,GACjCM,EAAaC,MAAI,IAAI,EAwBrBC,EAAe,CACpB,OAtBc,MAAOC,GAAe,CACpCA,EAAM,aAAa,UAAY,GAE/BH,EAAW,MAAQG,EAAM,aAEzBD,EAAa,OAAS,GACtBA,EAAa,MAAQC,EAErBC,EAAK,MAAM,CAAA,EAeX,QAXgBD,GAAe,CAC/BH,EAAW,MAAQ,KAEnBE,EAAa,OAAS,GACtBA,EAAa,MAAQ,KAErBE,EAAK,OAAO,CAAA,EAMZ,SAAUC,EAAAA,MAAMX,EAAO,OAAO,EAC9B,OAAQ,GACR,MAAO,IAAA,EAGDY,OAAAA,EAAA,gBAAgBb,EAAIS,CAAY,EAEvCK,EAAAA,YAAY,IAAM,CACjBD,EAAO,kBAAkBb,CAAE,CAAA,CAC3B"}
+{"version":3,"file":"popup.amd.js","sources":["../../src/components/popup/popup/opener.vue","../../src/components/popup/popup/popup.vue","../../src/components/popup/popup/listItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onUpdated, ref } from 'vue';\nimport type { OpenerProps } from './popup';\n\nconst props = withDefaults(defineProps<OpenerProps>(), {\n\tpos: '3',\n\tnotch: true,\n\tposBy: 'fixed',\n});\n\nconst id = props.id || Math.random() + '';\n\nlet elOpener: Element;\n\n/**\n * Необычная функция для проброски props внтурь элемента слота\n *\n * @param el - вспомогательрный элемент для доступа к элементам слота\n */\nfunction render (el: any) {\n\tsetTimeout(() => {\n\t\telOpener = el.nextElementSibling;\n\n\t\tif (elOpener) {\n\t\t\trenderOpener(elOpener);\n\t\t}\n\t});\n}\n\nonUpdated(() => {\n\tif (elOpener) {\n\t\trenderOpener(elOpener);\n\t}\n});\n\nfunction renderOpener (elOpener: any) {\n\telOpener.dataset.topPopup = 'vue-' + id;\n\telOpener.dataset.topPopupId = id;\n\telOpener.dataset.topPopupP = props.pos;\n\telOpener.dataset.topPopupPosBy = props.posBy;\n\telOpener.dataset.topPopupNotch = props.notch ? 'true' : '';\n\telOpener.dataset.topPopupOpenByHover = props.openByHover ? 'true' : '';\n}\n</script>\n\n<template>\n\t<template :ref=\"render\"></template>\n\n\t<!-- @slot элемент для открытия Popup -->\n\t<slot></slot>\n</template>\n\n<!-- Использует общий deprecated класс .btn  -->\n<style>\nh3[data-top-popup],\ndiv[data-top-popup],\ni[data-top-popup]:not(.btn),\nb[data-top-popup]:not(.btn) {\n\tcursor: pointer;\n\tuser-select: none;\n\tfont-style: normal;\n\ttext-decoration: none;\n\tdisplay: inline-flex;\n\talign-items: center;\n}\n\n[data-top-popup][data-top-popup-disabled] {\n\tpointer-events: none;\n\tcursor: auto !important;\n}\n\ni[contenteditable] {\n\tcursor: text !important;\n}\n</style>","<script setup lang=\"ts\">\nimport { ref, toRef, onUnmounted } from 'vue';\nimport type { Props, Emits } from './popup';\nimport Core from '@/core/core/core';\nimport Opener from './opener.vue';\nimport Worker from '@/components/popup/lib/worker';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tid: '',\n\tpos: '3',\n\tnotch: true,\n\tposBy: 'fixed',\n});\n\nconst emit = defineEmits<Emits>();\n\nconst id = props.id || Math.random() + '';\nconst elPopupRef = ref(null);\n\n// см. lib/popup\nconst onOpen = async (popup: any) => {\n\tpopup.elPopupInner.innerText = '';\n\n\telPopupRef.value = popup.elPopupInner;\n\n\tvueConnector.opened = true;\n\tvueConnector.popup = popup;\n\n\temit('open');\n};\n\n// см. lib/popup\nconst onClose = (popup: any) => {\n\telPopupRef.value = null;\n\n\tvueConnector.opened = false;\n\tvueConnector.popup = null;\n\n\temit('close');\n};\n\nconst vueConnector = {\n\tonOpen,\n\tonClose,\n\tclassRef: toRef(props, 'class'),\n\topened: false,\n\tpopup: null,\n};\n\nWorker.regVueComponent(id, vueConnector);\n\nonUnmounted(() => {\n\tWorker.unregVueComponent(id);\n});\n</script>\n\n<template>\n\t<Opener\n\t\tv-if=\"$slots.opener\"\n\t\t:id=\"id\"\n\t\t:pos=\"pos\"\n\t\t:posBy=\"posBy\"\n\t\t:notch=\"notch\"\n\t\t:openByHover=\"openByHover\"\n\t>\n\t\t<!-- @slot элемент для открытия Popup -->\n\t\t<slot name=\"opener\"></slot>\n\t</Opener>\n\n\t<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->\n\t<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\n\t<teleport\n\t\tv-if=\"elPopupRef\"\n\t\t:to=\"elPopupRef\"\n\t>\n\t\t<div v-if=\"$slots.header || Core.state.isMobile\" class=\"top-popup_header\">\n\t\t\t<span\n\t\t\t\tv-if=\"Core.state.isMobile\"\n\t\t\t\tclass=\"top-as-a closer\"\n\t\t\t>\n\t\t\t\t{{ vueConnector.popup.options.i18n.Close }}\n\t\t\t</span>\n\n\t\t\t<!-- @slot Шапка -->\n\t\t\t<slot name=\"header\"></slot>\n\t\t</div>\n\n\t\t<div v-if=\"$slots.content\" class=\"top-popup_content\">\n\t\t\t<!-- @slot Контент в свободной форме -->\n\t\t\t<slot name=\"content\"></slot>\n\t\t</div>\n\n\t\t<ul v-if=\"$slots.contentList\" class=\"top-popup_content\">\n\t\t\t<!-- @slot Контент в виде списка, для вставки элементов списка испоьзуйте компонент popup/listItem -->\n\t\t\t<slot name=\"contentList\"></slot>\n\t\t</ul>\n\n\t\t<div v-if=\"$slots.footer\" class=\"top-popup_footer\">\n\t\t\t<!-- @slot Футер -->\n\t\t\t<slot name=\"footer\"></slot>\n\t\t</div>\n\t</teleport>\n</template>","<script setup lang=\"ts\">\nimport type { ListItemProps } from './popup';\n\ndefineOptions({\n\tinheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<ListItemProps>(), {\n\ttype: 'button',\n\tcloseByClick: true,\n});\n</script>\n\n<template>\n\t<li :class=\"{\n\t\t'top-popup_liNoSelectable': props.type !== 'button' && props.type !== 'link'\n\t}\">\n\t\t<component\n\t\t\t:is=\"$attrs.href ? 'a' : 'div'\"\n\t\t\t:class=\"{\n\t\t\t\t'top-popup_listItem': true,\n\t\t\t\t'top-popup_listItem-button': props.type === 'button' || props.type === 'link', // оформления кнопки\n\t\t\t\t'a': props.type === 'button' || props.type === 'link',  // оформления кнопки, deprecated\n\t\t\t\t'top-popup_listItem-title': props.type === 'title',\n\t\t\t\t'top-popup_listItem-delimiter': props.type === 'delimiter',\n\t\t\t\t'top-popup-noCloser': !closeByClick\n\t\t\t}\"\n\t\t\t:=$attrs\n\t\t>\n\t\t\t<slot></slot>\n\t\t</component>\n\t</li>\n</template>"],"names":["props","__props","id","render","el","elOpener","renderOpener","elOpener2","emit","__emit","elPopupRef","vue","popup","vueConnector","popup_worker"],"mappings":"2XAIA,MAAAA,EAAAC,EAMAC,EAAAF,EAAA,IAAA,KAAA,OAAA,EAAA,SASA,SAAAG,EAAAC,EAAA,iBAEEC,EAAAD,EAAA,sBAGCE,EAAAD,CAAA,CACD,CAAA,sBAMAC,EAAAD,CAAA,CACD,CAAA,EAGD,SAAAC,EAAAC,EAAA,6BAECA,EAAA,QAAA,WAAAL,4DAGAK,EAAA,QAAA,cAAAP,EAAA,MAAA,OAAA,GACAO,EAAA,QAAA,oBAAAP,EAAA,YAAA,OAAA,giBClCD,MAAAA,EAAAC,EAOAO,EAAAC,EAEAP,EAAAF,EAAA,IAAA,KAAA,OAAA,EAAA,GACAU,EAAAC,EAAA,IAAA,IAAA,KAwBqB,OArBrB,MAAAC,GAAA,CACCA,EAAA,aAAA,UAAA,GAEAF,EAAA,MAAAE,EAAA,aAEAC,EAAA,OAAA,GACAA,EAAA,MAAAD,EAEAJ,EAAA,MAAA,CAAW,EAcX,QAVDI,GAAA,CACCF,EAAA,MAAA,KAEAG,EAAA,OAAA,GACAA,EAAA,MAAA,KAEAL,EAAA,OAAA,CAAY,EAKZ,SAAAG,EAAA,MAAAX,EAAA,OAAA,sBAGO,mDAMPc,EAAA,kBAAAZ,CAAA,CAA2B,CAAA,8vCC7C5B,MAAAF,EAAAC"}