@topvisor/ui 0.0.43 → 0.9.3

package/formsExt/formsExt.js

@@ -1,13 +1,12 @@
-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-727cc6aa.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 = {
+import { insertToPage as I } from "../utils/css.js";
+import { defineComponent as G, ref as f, watch as K, toRef as k, computed as C, openBlock as n, createElementBlock as p, 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 T, createTextVNode as $, mergeProps as w, renderSlot as H, Fragment as z, renderList as N, withDirectives as P, vModelRadio as S } from "vue";
+import { T as U, B, _ as g, I as R } from "../.chunks/forms-9516aa6c.es.js";
+const M = ["../assets/formsExt.css"].map((u) => import.meta.resolve(u));
+await I(M);
+const X = {
   key: 0,
   class: "top-editArea_title"
-}, X = { class: "top-editArea_footer" }, D = /* @__PURE__ */ G({
+}, D = { class: "top-editArea_footer" }, F = /* @__PURE__ */ G({
   __name: "editArea",
   props: {
     modelValue: {},
@@ -26,33 +25,33 @@ const U = {
     hint: {}
   },
   emits: ["update:modelValue", "cancel"],
-  setup(u, { emit: p }) {
-    const t = u, r = p, d = f(""), l = f(t.modelValue);
-    w(k(t, "modelValue"), () => {
-      l.value = t.modelValue;
+  setup(u, { emit: m }) {
+    const l = u, r = m, s = f(""), a = f(l.modelValue);
+    K(k(l, "modelValue"), () => {
+      a.value = l.modelValue;
     });
-    const o = C(() => l.value !== t.modelValue), s = (e) => {
+    const o = C(() => a.value !== l.modelValue), d = (e) => {
       r("update:modelValue", e);
-    }, a = () => {
-      r("cancel"), l.value = t.modelValue;
+    }, t = () => {
+      r("cancel"), a.value = l.modelValue;
     };
-    return (e, i) => (n(), m("div", {
+    return (e, i) => (n(), p("div", {
       class: v({
         "top-editArea": !0,
         "top-editArea-attachedToKeyboard": e.attachToKeyboard
       })
     }, [
-      e.title ? (n(), m("div", U, y(e.title), 1)) : b("", !0),
+      e.title ? (n(), p("div", X, y(e.title), 1)) : b("", !0),
       h("div", {
         class: v({
           "top-editArea_form": !0,
           "top-error": e.isError,
-          "top-focus": d.value == "focus"
+          "top-focus": s.value == "focus"
         })
       }, [
-        A(P, {
-          modelValue: l.value,
-          "onUpdate:modelValue": i[0] || (i[0] = (c) => l.value = c),
+        A(U, {
+          modelValue: a.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (c) => a.value = c),
           name: e.name,
           placeholder: e.placeholder,
           rows: e.rows,
@@ -63,33 +62,33 @@ const U = {
           isError: e.isError,
           hint: e.hint,
           class: "top-editArea_element",
-          onFocus: i[1] || (i[1] = (c) => d.value = "focus"),
-          onBlur: i[2] || (i[2] = (c) => d.value = ""),
+          onFocus: i[1] || (i[1] = (c) => s.value = "focus"),
+          onBlur: i[2] || (i[2] = (c) => s.value = ""),
           onKeyup: [
-            V(a, ["esc"]),
-            i[3] || (i[3] = V(_((c) => s(l.value), ["ctrl"]), ["enter"]))
+            V(t, ["esc"]),
+            i[3] || (i[3] = V(_((c) => d(a.value), ["ctrl"]), ["enter"]))
           ]
-        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint", "onKeyup"]),
-        h("div", X, [
+        }, null, 8, ["modelValue", "name", "placeholder", "rows", "minHeight", "expandable", "disabled", "readonly", "isError", "hint"]),
+        h("div", D, [
           o.value && (!e.attachToKeyboard || e.modelValue) ? (n(), E(B, {
             key: 0,
             class: "top-editArea_button",
             color: "theme",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: a
+            onClick: t
           }, {
-            default: $(() => [
-              T(y(e.attachToKeyboard ? "" : e.cancelText), 1)
+            default: T(() => [
+              $(y(e.attachToKeyboard ? "" : e.cancelText), 1)
             ]),
             _: 1
           }, 8, ["icon"])) : b("", !0),
           A(B, {
             class: "top-editArea_button",
             icon: e.attachToKeyboard ? "" : "",
-            onClick: i[4] || (i[4] = (c) => s(l.value))
+            onClick: i[4] || (i[4] = (c) => d(a.value))
           }, {
-            default: $(() => [
-              T(y(e.attachToKeyboard ? "" : e.submitText), 1)
+            default: T(() => [
+              $(y(e.attachToKeyboard ? "" : e.submitText), 1)
             ]),
             _: 1
           }, 8, ["icon"])
@@ -97,7 +96,7 @@ const U = {
       ], 2)
     ], 2));
   }
-}), F = {
+}), L = {
   "top-editArea": "top-editArea",
   "top-editArea_title": "top-editArea_title",
   "top-editArea_form": "top-editArea_form",
@@ -106,9 +105,9 @@ const U = {
   "top-textarea_textarea": "top-textarea_textarea",
   "top-editArea_footer": "top-editArea_footer",
   "top-editArea-attachedToKeyboard": "top-editArea-attachedToKeyboard"
-}, S = {
-  $style: F
-}, te = /* @__PURE__ */ K(D, [["__cssModules", S]]), L = { class: "top-editInput" }, j = /* @__PURE__ */ G({
+}, j = {
+  $style: L
+}, re = /* @__PURE__ */ g(F, [["__cssModules", j]]), q = { class: "top-editInput" }, J = /* @__PURE__ */ G({
   __name: "editInput",
   props: {
     modelValue: {},
@@ -116,42 +115,42 @@ const U = {
     button: {}
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: p }) {
-    const t = u, r = f(t.modelValue);
-    w(k(t.modelValue), () => {
-      r.value = t.modelValue;
+  setup(u, { emit: m }) {
+    const l = u, r = f(l.modelValue);
+    K(k(l.modelValue), () => {
+      r.value = l.modelValue;
     });
-    const d = p, l = () => {
-      d("update:modelValue", r.value);
+    const s = m, a = () => {
+      s("update:modelValue", r.value);
     };
-    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"]),
+    return (o, d) => (n(), p("div", q, [
+      A(R, w(o.input, {
+        onKeydownCapture: d[0] || (d[0] = V(_((t) => r.value = o.modelValue, ["stop"]), ["esc"])),
+        onKeydown: V(_(a, ["stop"]), ["enter"]),
         modelValue: r.value,
-        "onUpdate:modelValue": s[1] || (s[1] = (a) => r.value = a)
+        "onUpdate:modelValue": d[1] || (d[1] = (t) => r.value = t)
       }), null, 16, ["onKeydown", "modelValue"]),
-      r.value !== o.modelValue ? (n(), E(B, g({
+      r.value !== o.modelValue ? (n(), E(B, w({
         key: 0,
         icon: "",
         styling: "soft"
-      }, o.button, { onClick: l }), {
-        default: $(() => [
-          I(o.$slots, "default")
+      }, o.button, { onClick: a }), {
+        default: T(() => [
+          H(o.$slots, "default")
         ]),
         _: 3
       }, 16)) : b("", !0)
     ]));
   }
-}), q = {
+}), O = {
   "top-editInput": "top-editInput",
   "top-input": "top-input"
-}, J = {
-  $style: q
-}, ae = /* @__PURE__ */ K(j, [["__cssModules", J]]), O = ["data-top-icon", "onClick"], Q = {
+}, Q = {
+  $style: O
+}, se = /* @__PURE__ */ g(J, [["__cssModules", Q]]), W = ["data-top-icon", "onClick"], Y = {
   key: 0,
   class: "top-radioGroup_circle"
-}, W = ["value", "disabled"], Y = /* @__PURE__ */ G({
+}, Z = ["value", "disabled"], x = /* @__PURE__ */ G({
   __name: "radioGroup",
   props: {
     modelValue: {},
@@ -161,16 +160,16 @@ const U = {
     isError: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: p }) {
-    const t = u, r = p, d = C({
+  setup(u, { emit: m }) {
+    const l = u, r = m, s = C({
       get() {
-        return t.modelValue;
+        return l.modelValue;
       },
       set(o) {
         r("update:modelValue", o);
       }
-    }), l = "radioGroup-" + Math.random();
-    return (o, s) => (n(), m("div", {
+    }), a = "radioGroup-" + Math.random();
+    return (o, d) => (n(), p("div", {
       class: v({
         "top-radioGroup": !0,
         "top-scrollBarXHidding": !0,
@@ -178,34 +177,34 @@ const U = {
         "top-error": o.isError
       })
     }, [
-      (n(!0), m(M, null, H(o.radiosProps, (a) => (n(), m("label", {
+      (n(!0), p(z, null, N(o.radiosProps, (t) => (n(), p("label", {
         class: v({
-          "top-radioGroup_item-selected": a.value === d.value,
+          "top-radioGroup_item-selected": t.value === s.value,
           "top-radioGroup_item": !0,
           "top-forms-focusable": !0,
-          "top-disabled": a.disabled
+          "top-disabled": t.disabled
         }),
-        "data-top-icon": a.icon,
-        onClick: (e) => d.value = a.value
+        "data-top-icon": t.icon,
+        onClick: (e) => s.value = t.value
       }, [
-        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,
+        $(y(t.title) + " ", 1),
+        o.showIndicator ? (n(), p("span", Y)) : b("", !0),
+        P(h("input", {
+          "onUpdate:modelValue": d[0] || (d[0] = (e) => s.value = e),
+          name: a,
           type: "radio",
           class: v({
             "top-unvisible": !0
           }),
-          value: a.value,
-          disabled: a.disabled
-        }, null, 8, W), [
-          [N, d.value]
+          value: t.value,
+          disabled: t.disabled
+        }, null, 8, Z), [
+          [S, s.value]
         ])
-      ], 10, O))), 256))
+      ], 10, W))), 256))
     ], 2));
   }
-}), Z = {
+}), ee = {
   "top-scrollBarXHidding": "top-scrollBarXHidding",
   "top-radioGroup": "top-radioGroup",
   "top-radioGroup_item": "top-radioGroup_item",
@@ -213,12 +212,12 @@ const U = {
   "top-radioGroup_circle": "top-radioGroup_circle",
   "top-disabled": "top-disabled",
   "top-error": "top-error"
-}, x = {
-  $style: Z
-}, le = /* @__PURE__ */ K(Y, [["__cssModules", x]]);
+}, oe = {
+  $style: ee
+}, de = /* @__PURE__ */ g(x, [["__cssModules", oe]]);
 export {
-  te as EditArea,
-  ae as EditInput,
-  le as RadioGroup
+  re as EditArea,
+  se as EditInput,
+  de 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\">\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":["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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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":["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,7 +1,7 @@
 {
 	"name": "@topvisor/ui",
 	"private": false,
-	"version": "0.0.43",
+	"version": "0.9.3",
 	"type": "module",
 	"description": "Topvisor UI-kit Vue",
 	"author": "Topvisor",
@@ -15,5 +15,8 @@
 	"license": "MIT",
 	"peerDependencies": {
 		"vue": "^3.3.4"
+	},
+	"dependencies": {
+		"@topvisor/ui": "^0.9.2"
 	}
 }

package/popup/popup.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../.chunks/forms-771091d4.amd","./worker.amd"],function(i,d,e,m,u){"use strict";i(["../core/core.amd"],l=>{const t=["../assets/popup.css"].map(n=>i.toUrl(n));l.Page.addCss(t)});const f=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="",B={key:0,class:"top-popup_header"},y={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 u.PopupWorker.regVueComponent(c,a),e.onUnmounted(()=>{u.PopupWorker.unregVueComponent(c)}),(o,b)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.$slots.opener?(e.openBlock(),e.createBlock(f,{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",B,[e.unref(m.Core).state.isMobile?(e.openBlock(),e.createElementBlock("span",y,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"})},[(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",a:t.type==="button","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=f,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../.chunks/forms-9284b6d9.amd","./worker.amd","../utils/dom.amd"],function(i,d,e,m,u,S){"use strict";i(["../utils/css.amd"],({insertToPage:l})=>{const t=["../assets/popup.css"].map(n=>i.toUrl(n));l(t)});const f=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))}}),b="",B={key:0,class:"top-popup_header"},y={key:0,class:"top-as-a closer"},k={key:1,class:"top-popup_content"},_={key:2,class:"top-popup_content"},h={key:3,class:"top-popup_footer"},C=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 u.PopupWorker.regVueComponent(c,a),e.onUnmounted(()=>{u.PopupWorker.unregVueComponent(c)}),(o,N)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.$slots.opener?(e.openBlock(),e.createBlock(f,{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",B,[e.unref(m.Core).state.isMobile?(e.openBlock(),e.createElementBlock("span",y,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",_,[e.renderSlot(o.$slots,"contentList")])):e.createCommentVNode("",!0),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",h,[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"})},[(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",a:t.type==="button","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=C,d.PopupListItem=P,d.PopupOpener=f,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","../../src/components/popup/popup/listItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { onUpdated, ref } from 'vue';\r\nimport type { OpenerProps } from './popup';\r\n\r\nconst props = withDefaults(defineProps<OpenerProps>(), {\r\n\tpos: '3',\r\n\tnotch: true,\r\n\tposBy: 'fixed',\r\n});\r\n\r\nconst id = props.id || Math.random() + '';\r\n\r\nlet elOpener: Element;\r\n\r\n/**\r\n * Необычная функция для проброски props внтурь элемента слота\r\n *\r\n * @param el - вспомогательрный элемент для доступа к элементам слота\r\n */\r\nfunction render (el: any) {\r\n\tsetTimeout(() => {\r\n\t\telOpener = el.nextElementSibling;\r\n\r\n\t\tif (elOpener) {\r\n\t\t\trenderOpener(elOpener);\r\n\t\t}\r\n\t});\r\n}\r\n\r\nonUpdated(() => {\r\n\tif (elOpener) {\r\n\t\trenderOpener(elOpener);\r\n\t}\r\n});\r\n\r\nfunction renderOpener (elOpener: any) {\r\n\telOpener.dataset.topPopup = 'vue-' + id;\r\n\telOpener.dataset.topPopupId = id;\r\n\telOpener.dataset.topPopupP = props.pos;\r\n\telOpener.dataset.topPopupPosBy = props.posBy;\r\n\telOpener.dataset.topPopupNotch = props.notch ? 'true' : '';\r\n\telOpener.dataset.topPopupOpenByHover = props.openByHover ? 'true' : '';\r\n}\r\n</script>\r\n\r\n<template>\r\n\t<template :ref=\"render\"></template>\r\n\r\n\t<!-- @slot элемент для открытия Popup -->\r\n\t<slot></slot>\r\n</template>\r\n\r\n<!-- Использует общий deprecated класс .btn  -->\r\n<style>\r\nh3[data-top-popup],\r\ndiv[data-top-popup],\r\ni[data-top-popup]:not(.btn),\r\nb[data-top-popup]:not(.btn) {\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n\tfont-style: normal;\r\n\ttext-decoration: none;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n}\r\n\r\n[data-top-popup][data-top-popup-disabled] {\r\n\tpointer-events: none;\r\n\tcursor: auto !important;\r\n}\r\n\r\ni[contenteditable] {\r\n\tcursor: text !important;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, toRef, onUnmounted } from 'vue';\r\nimport type { Props, Emits } from './popup';\r\nimport Core from '@/core/core/core';\r\nimport Opener from './opener.vue';\r\nimport Worker from '@/components/popup/lib/worker';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tid: '',\r\n\tpos: '3',\r\n\tnotch: true,\r\n\tposBy: 'fixed',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst id = props.id || Math.random() + '';\r\nconst elPopupRef = ref(null);\r\n\r\n// см. lib/popup\r\nconst onOpen = async (popup: any) => {\r\n\tpopup.elPopupInner.innerText = '';\r\n\r\n\telPopupRef.value = popup.elPopupInner;\r\n\r\n\tvueConnector.opened = true;\r\n\tvueConnector.popup = popup;\r\n\r\n\temit('open');\r\n};\r\n\r\n// см. lib/popup\r\nconst onClose = (popup: any) => {\r\n\telPopupRef.value = null;\r\n\r\n\tvueConnector.opened = false;\r\n\tvueConnector.popup = null;\r\n\r\n\temit('close');\r\n};\r\n\r\nconst vueConnector = {\r\n\tonOpen,\r\n\tonClose,\r\n\tclassRef: toRef(props, 'class'),\r\n\topened: false,\r\n\tpopup: null,\r\n};\r\n\r\nWorker.regVueComponent(id, vueConnector);\r\n\r\nonUnmounted(() => {\r\n\tWorker.unregVueComponent(id);\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<Opener\r\n\t\tv-if=\"$slots.opener\"\r\n\t\t:id=\"id\"\r\n\t\t:pos=\"pos\"\r\n\t\t:posBy=\"posBy\"\r\n\t\t:notch=\"notch\"\r\n\t\t:openByHover=\"openByHover\"\r\n\t>\r\n\t\t<!-- @slot элемент для открытия Popup -->\r\n\t\t<slot name=\"opener\"></slot>\r\n\t</Opener>\r\n\r\n\t<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->\r\n\t<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\r\n\t<teleport\r\n\t\tv-if=\"elPopupRef\"\r\n\t\t:to=\"elPopupRef\"\r\n\t>\r\n\t\t<div v-if=\"$slots.header || Core.state.isMobile\" class=\"top-popup_header\">\r\n\t\t\t<span\r\n\t\t\t\tv-if=\"Core.state.isMobile\"\r\n\t\t\t\tclass=\"top-as-a closer\"\r\n\t\t\t>\r\n\t\t\t\t{{ vueConnector.popup.options.i18n.Close }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<!-- @slot Шапка -->\r\n\t\t\t<slot name=\"header\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<div v-if=\"$slots.content\" class=\"top-popup_content\">\r\n\t\t\t<!-- @slot Контент в свободной форме -->\r\n\t\t\t<slot name=\"content\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<ul v-if=\"$slots.contentList\" class=\"top-popup_content\">\r\n\t\t\t<!-- @slot Контент в виде списка, для вставки элементов списка испоьзуйте компонент popup/listItem -->\r\n\t\t\t<slot name=\"contentList\"></slot>\r\n\t\t</ul>\r\n\r\n\t\t<div v-if=\"$slots.footer\" class=\"top-popup_footer\">\r\n\t\t\t<!-- @slot Футер -->\r\n\t\t\t<slot name=\"footer\"></slot>\r\n\t\t</div>\r\n\t</teleport>\r\n</template>","<script setup lang=\"ts\">\r\nimport type { ListItemProps } from './popup';\r\n\r\ndefineOptions({\r\n\tinheritAttrs: false,\r\n});\r\n\r\nconst props = withDefaults(defineProps<ListItemProps>(), {\r\n\ttype: 'button',\r\n\tcloseByClick: true,\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<li :class=\"{\r\n\t\t'top-popup_liNoSelectable': props.type !== 'button'\r\n\t}\">\r\n\t\t<component\r\n\t\t\t:is=\"$attrs.href ? 'a' : 'div'\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-popup_listItem': true,\r\n\t\t\t\t'top-popup_listItem-button': props.type === 'button', // оформления кнопки\r\n\t\t\t\t'a': props.type === 'button',  // оформления кнопки, deprecated\r\n\t\t\t\t'top-popup_listItem-title': props.type === 'title',\r\n\t\t\t\t'top-popup_listItem-delimiter': props.type === 'delimiter',\r\n\t\t\t\t'top-popup-noCloser': !closeByClick\r\n\t\t\t}\"\r\n\t\t\t:=$attrs\r\n\t\t>\r\n\t\t\t<slot></slot>\r\n\t\t</component>\r\n\t</li>\r\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,+DAMPc,EAAA,YAAA,kBAAAZ,CAAA,CAA2B,CAAA,8vCC7C5B,MAAAF,EAAAC"}
+{"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\">\r\nimport { onUpdated, ref } from 'vue';\r\nimport type { OpenerProps } from './popup';\r\n\r\nconst props = withDefaults(defineProps<OpenerProps>(), {\r\n\tpos: '3',\r\n\tnotch: true,\r\n\tposBy: 'fixed',\r\n});\r\n\r\nconst id = props.id || Math.random() + '';\r\n\r\nlet elOpener: Element;\r\n\r\n/**\r\n * Необычная функция для проброски props внтурь элемента слота\r\n *\r\n * @param el - вспомогательрный элемент для доступа к элементам слота\r\n */\r\nfunction render (el: any) {\r\n\tsetTimeout(() => {\r\n\t\telOpener = el.nextElementSibling;\r\n\r\n\t\tif (elOpener) {\r\n\t\t\trenderOpener(elOpener);\r\n\t\t}\r\n\t});\r\n}\r\n\r\nonUpdated(() => {\r\n\tif (elOpener) {\r\n\t\trenderOpener(elOpener);\r\n\t}\r\n});\r\n\r\nfunction renderOpener (elOpener: any) {\r\n\telOpener.dataset.topPopup = 'vue-' + id;\r\n\telOpener.dataset.topPopupId = id;\r\n\telOpener.dataset.topPopupP = props.pos;\r\n\telOpener.dataset.topPopupPosBy = props.posBy;\r\n\telOpener.dataset.topPopupNotch = props.notch ? 'true' : '';\r\n\telOpener.dataset.topPopupOpenByHover = props.openByHover ? 'true' : '';\r\n}\r\n</script>\r\n\r\n<template>\r\n\t<template :ref=\"render\"></template>\r\n\r\n\t<!-- @slot элемент для открытия Popup -->\r\n\t<slot></slot>\r\n</template>\r\n\r\n<!-- Использует общий deprecated класс .btn  -->\r\n<style>\r\nh3[data-top-popup],\r\ndiv[data-top-popup],\r\ni[data-top-popup]:not(.btn),\r\nb[data-top-popup]:not(.btn) {\r\n\tcursor: pointer;\r\n\tuser-select: none;\r\n\tfont-style: normal;\r\n\ttext-decoration: none;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n}\r\n\r\n[data-top-popup][data-top-popup-disabled] {\r\n\tpointer-events: none;\r\n\tcursor: auto !important;\r\n}\r\n\r\ni[contenteditable] {\r\n\tcursor: text !important;\r\n}\r\n</style>","<script setup lang=\"ts\">\r\nimport { ref, toRef, onUnmounted } from 'vue';\r\nimport type { Props, Emits } from './popup';\r\nimport Core from '@/core/core/core';\r\nimport Opener from './opener.vue';\r\nimport Worker from '@/components/popup/lib/worker';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tid: '',\r\n\tpos: '3',\r\n\tnotch: true,\r\n\tposBy: 'fixed',\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst id = props.id || Math.random() + '';\r\nconst elPopupRef = ref(null);\r\n\r\n// см. lib/popup\r\nconst onOpen = async (popup: any) => {\r\n\tpopup.elPopupInner.innerText = '';\r\n\r\n\telPopupRef.value = popup.elPopupInner;\r\n\r\n\tvueConnector.opened = true;\r\n\tvueConnector.popup = popup;\r\n\r\n\temit('open');\r\n};\r\n\r\n// см. lib/popup\r\nconst onClose = (popup: any) => {\r\n\telPopupRef.value = null;\r\n\r\n\tvueConnector.opened = false;\r\n\tvueConnector.popup = null;\r\n\r\n\temit('close');\r\n};\r\n\r\nconst vueConnector = {\r\n\tonOpen,\r\n\tonClose,\r\n\tclassRef: toRef(props, 'class'),\r\n\topened: false,\r\n\tpopup: null,\r\n};\r\n\r\nWorker.regVueComponent(id, vueConnector);\r\n\r\nonUnmounted(() => {\r\n\tWorker.unregVueComponent(id);\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<Opener\r\n\t\tv-if=\"$slots.opener\"\r\n\t\t:id=\"id\"\r\n\t\t:pos=\"pos\"\r\n\t\t:posBy=\"posBy\"\r\n\t\t:notch=\"notch\"\r\n\t\t:openByHover=\"openByHover\"\r\n\t>\r\n\t\t<!-- @slot элемент для открытия Popup -->\r\n\t\t<slot name=\"opener\"></slot>\r\n\t</Opener>\r\n\r\n\t<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->\r\n\t<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->\r\n\t<teleport\r\n\t\tv-if=\"elPopupRef\"\r\n\t\t:to=\"elPopupRef\"\r\n\t>\r\n\t\t<div v-if=\"$slots.header || Core.state.isMobile\" class=\"top-popup_header\">\r\n\t\t\t<span\r\n\t\t\t\tv-if=\"Core.state.isMobile\"\r\n\t\t\t\tclass=\"top-as-a closer\"\r\n\t\t\t>\r\n\t\t\t\t{{ vueConnector.popup.options.i18n.Close }}\r\n\t\t\t</span>\r\n\r\n\t\t\t<!-- @slot Шапка -->\r\n\t\t\t<slot name=\"header\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<div v-if=\"$slots.content\" class=\"top-popup_content\">\r\n\t\t\t<!-- @slot Контент в свободной форме -->\r\n\t\t\t<slot name=\"content\"></slot>\r\n\t\t</div>\r\n\r\n\t\t<ul v-if=\"$slots.contentList\" class=\"top-popup_content\">\r\n\t\t\t<!-- @slot Контент в виде списка, для вставки элементов списка испоьзуйте компонент popup/listItem -->\r\n\t\t\t<slot name=\"contentList\"></slot>\r\n\t\t</ul>\r\n\r\n\t\t<div v-if=\"$slots.footer\" class=\"top-popup_footer\">\r\n\t\t\t<!-- @slot Футер -->\r\n\t\t\t<slot name=\"footer\"></slot>\r\n\t\t</div>\r\n\t</teleport>\r\n</template>","<script setup lang=\"ts\">\r\nimport type { ListItemProps } from './popup';\r\n\r\ndefineOptions({\r\n\tinheritAttrs: false,\r\n});\r\n\r\nconst props = withDefaults(defineProps<ListItemProps>(), {\r\n\ttype: 'button',\r\n\tcloseByClick: true,\r\n});\r\n</script>\r\n\r\n<template>\r\n\t<li :class=\"{\r\n\t\t'top-popup_liNoSelectable': props.type !== 'button'\r\n\t}\">\r\n\t\t<component\r\n\t\t\t:is=\"$attrs.href ? 'a' : 'div'\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t'top-popup_listItem': true,\r\n\t\t\t\t'top-popup_listItem-button': props.type === 'button', // оформления кнопки\r\n\t\t\t\t'a': props.type === 'button',  // оформления кнопки, deprecated\r\n\t\t\t\t'top-popup_listItem-title': props.type === 'title',\r\n\t\t\t\t'top-popup_listItem-delimiter': props.type === 'delimiter',\r\n\t\t\t\t'top-popup-noCloser': !closeByClick\r\n\t\t\t}\"\r\n\t\t\t:=$attrs\r\n\t\t>\r\n\t\t\t<slot></slot>\r\n\t\t</component>\r\n\t</li>\r\n</template>"],"names":["props","__props","id","render","el","elOpener","renderOpener","elOpener2","emit","__emit","elPopupRef","vue","popup","vueConnector","popup_worker"],"mappings":"qZAIA,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,+DAMPc,EAAA,YAAA,kBAAAZ,CAAA,CAA2B,CAAA,8vCC7C5B,MAAAF,EAAAC"}

package/popup/popup.js

@@ -1,11 +1,11 @@
-import { defineComponent as y, onUpdated as P, openBlock as s, createElementBlock as l, Fragment as B, createElementVNode as $, renderSlot as i, ref as k, toRef as b, onUnmounted as I, createBlock as f, unref as m, withCtx as v, createCommentVNode as u, Teleport as g, toDisplayString as H, normalizeClass as N, resolveDynamicComponent as M, mergeProps as S } from "vue";
-import { C as _ } from "../.chunks/forms-727cc6aa.es.js";
-import { PopupWorker as h } from "./worker.js";
-import("../core/core.js").then((a) => {
-  const o = ["../assets/popup.css"].map((t) => import.meta.resolve(t));
-  a.default.Page.addCss(o);
-});
-const V = /* @__PURE__ */ y({
+import { insertToPage as C } from "../utils/css.js";
+import { defineComponent as y, onUpdated as k, openBlock as p, createElementBlock as l, Fragment as h, createElementVNode as I, renderSlot as i, ref as b, toRef as g, onUnmounted as H, createBlock as f, unref as m, withCtx as v, createCommentVNode as u, Teleport as S, toDisplayString as N, normalizeClass as T, resolveDynamicComponent as M, mergeProps as V } from "vue";
+import { C as _ } from "../.chunks/forms-9516aa6c.es.js";
+import { PopupWorker as B } from "./worker.js";
+import "../utils/dom.js";
+const $ = ["../assets/popup.css"].map((r) => import.meta.resolve(r));
+await C($);
+const E = /* @__PURE__ */ y({
   __name: "opener",
   props: {
     id: {},
@@ -14,42 +14,42 @@ const V = /* @__PURE__ */ y({
     openByHover: { type: Boolean },
     posBy: { default: "fixed" }
   },
-  setup(a) {
-    const o = a, t = o.id || Math.random() + "";
+  setup(r) {
+    const o = r, s = o.id || Math.random() + "";
     let n;
-    function c(p) {
+    function c(t) {
       setTimeout(() => {
-        n = p.nextElementSibling, n && r(n);
+        n = t.nextElementSibling, n && a(n);
       });
     }
-    P(() => {
-      n && r(n);
+    k(() => {
+      n && a(n);
     });
-    function r(p) {
-      p.dataset.topPopup = "vue-" + t, p.dataset.topPopupId = t, p.dataset.topPopupP = o.pos, p.dataset.topPopupPosBy = o.posBy, p.dataset.topPopupNotch = o.notch ? "true" : "", p.dataset.topPopupOpenByHover = o.openByHover ? "true" : "";
+    function a(t) {
+      t.dataset.topPopup = "vue-" + s, t.dataset.topPopupId = s, t.dataset.topPopupP = o.pos, t.dataset.topPopupPosBy = o.posBy, t.dataset.topPopupNotch = o.notch ? "true" : "", t.dataset.topPopupOpenByHover = o.openByHover ? "true" : "";
     }
-    return (p, C) => (s(), l(B, null, [
-      $("template", { ref: c }),
-      i(p.$slots, "default")
+    return (t, P) => (p(), l(h, null, [
+      I("template", { ref: c }),
+      i(t.$slots, "default")
     ], 64));
   }
 });
-const E = {
+const L = {
   key: 0,
   class: "top-popup_header"
-}, L = {
+}, R = {
   key: 0,
   class: "top-as-a closer"
-}, R = {
+}, U = {
   key: 1,
   class: "top-popup_content"
-}, T = {
+}, w = {
   key: 2,
   class: "top-popup_content"
 }, D = {
   key: 3,
   class: "top-popup_footer"
-}, A = /* @__PURE__ */ y({
+}, q = /* @__PURE__ */ y({
   __name: "popup",
   props: {
     id: { default: "" },
@@ -60,22 +60,22 @@ const E = {
     posBy: { default: "fixed" }
   },
   emits: ["open", "close"],
-  setup(a, { emit: o }) {
-    const t = a, n = o, c = t.id || Math.random() + "", r = k(null), d = {
+  setup(r, { emit: o }) {
+    const s = r, n = o, c = s.id || Math.random() + "", a = b(null), d = {
       onOpen: async (e) => {
-        e.elPopupInner.innerText = "", r.value = e.elPopupInner, d.opened = !0, d.popup = e, n("open");
+        e.elPopupInner.innerText = "", a.value = e.elPopupInner, d.opened = !0, d.popup = e, n("open");
       },
       onClose: (e) => {
-        r.value = null, d.opened = !1, d.popup = null, n("close");
+        a.value = null, d.opened = !1, d.popup = null, n("close");
       },
-      classRef: b(t, "class"),
+      classRef: g(s, "class"),
       opened: !1,
       popup: null
     };
-    return h.regVueComponent(c, d), I(() => {
-      h.unregVueComponent(c);
-    }), (e, U) => (s(), l(B, null, [
-      e.$slots.opener ? (s(), f(V, {
+    return B.regVueComponent(c, d), H(() => {
+      B.unregVueComponent(c);
+    }), (e, W) => (p(), l(h, null, [
+      e.$slots.opener ? (p(), f(E, {
         key: 0,
         id: m(c),
         pos: e.pos,
@@ -88,41 +88,41 @@ const E = {
         ]),
         _: 3
       }, 8, ["id", "pos", "posBy", "notch", "openByHover"])) : u("", !0),
-      r.value ? (s(), f(g, {
+      a.value ? (p(), f(S, {
         key: 1,
-        to: r.value
+        to: a.value
       }, [
-        e.$slots.header || m(_).state.isMobile ? (s(), l("div", E, [
-          m(_).state.isMobile ? (s(), l("span", L, H(d.popup.options.i18n.Close), 1)) : u("", !0),
+        e.$slots.header || m(_).state.isMobile ? (p(), l("div", L, [
+          m(_).state.isMobile ? (p(), l("span", R, N(d.popup.options.i18n.Close), 1)) : u("", !0),
           i(e.$slots, "header")
         ])) : u("", !0),
-        e.$slots.content ? (s(), l("div", R, [
+        e.$slots.content ? (p(), l("div", U, [
           i(e.$slots, "content")
         ])) : u("", !0),
-        e.$slots.contentList ? (s(), l("ul", T, [
+        e.$slots.contentList ? (p(), l("ul", w, [
           i(e.$slots, "contentList")
         ])) : u("", !0),
-        e.$slots.footer ? (s(), l("div", D, [
+        e.$slots.footer ? (p(), l("div", D, [
           i(e.$slots, "footer")
         ])) : u("", !0)
       ], 8, ["to"])) : u("", !0)
     ], 64));
   }
-}), F = /* @__PURE__ */ y({
+}), G = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "listItem",
   props: {
     type: { default: "button" },
     closeByClick: { type: Boolean, default: !0 }
   },
-  setup(a) {
-    const o = a;
-    return (t, n) => (s(), l("li", {
-      class: N({
+  setup(r) {
+    const o = r;
+    return (s, n) => (p(), l("li", {
+      class: T({
         "top-popup_liNoSelectable": o.type !== "button"
       })
     }, [
-      (s(), f(M(t.$attrs.href ? "a" : "div"), S({
+      (p(), f(M(s.$attrs.href ? "a" : "div"), V({
         class: {
           "top-popup_listItem": !0,
           "top-popup_listItem-button": o.type === "button",
@@ -131,11 +131,11 @@ const E = {
           // оформления кнопки, deprecated
           "top-popup_listItem-title": o.type === "title",
           "top-popup_listItem-delimiter": o.type === "delimiter",
-          "top-popup-noCloser": !t.closeByClick
+          "top-popup-noCloser": !s.closeByClick
         }
-      }, t.$attrs), {
+      }, s.$attrs), {
         default: v(() => [
-          i(t.$slots, "default")
+          i(s.$slots, "default")
         ]),
         _: 3
       }, 16, ["class"]))
@@ -143,8 +143,8 @@ const E = {
   }
 });
 export {
-  A as Popup,
-  F as PopupListItem,
-  V as PopupOpener
+  q as Popup,
+  G as PopupListItem,
+  E as PopupOpener
 };
 //# sourceMappingURL=popup.js.map