@topvisor/ui 0.0.15 → 0.0.17

package/light.css

@@ -1,136 +1,136 @@
-:root {
-	/* Main */
-	--color-primary: var(--color-blue-500);
-	--color-primary-light: var(--color-blue-100);
-	--color-primary-light-opacity: rgba(25, 117, 255, 0.11);
-	--color-primary-2: var(--color-blue-550);
-	--color-primary-2-light: var(--color-blue-150);
-	--color-primary-2-light-opacity: rgba(25, 117, 255, 0.22);
-
-	--color-secondary-opacity: rgba(14, 65, 142, 0.06);
-	--color-secondary-2-opacity: rgba(14, 65, 142, 0.08);
-	--color-secondary-3-opacity: rgba(14, 65, 142, 0.12);
-	
-	--color-positive: var(--color-green-500);
-	--color-positive-opacity: rgba(22, 196, 96, 0.3);
-	--color-positive-light: var(--color-green-100);
-	--color-positive-light-opacity: rgba(22, 196, 96, 0.11);
-	--color-positive-2: var(--color-green-500);
-	--color-positive-2-light: var(--color-green-150);
-	--color-positive-2-light-opacity: rgba(22, 196, 96, 0.22);
-
-	--color-warning: var(--color-orange-500);
-	--color-warning-opacity: rgba(255, 170, 51, 0.3);
-	--color-warning-light: var(--color-orange-100);
-	--color-warning-light-opacity: rgba(255, 170, 51, 0.12);
-	--color-warning-2: var(--color-orange-550);
-	--color-warning-2-light: var(--color-orange-150);
-	--color-warning-2-light-opacity: rgba(255, 159, 25, 0.22);
-
-	--color-negative: var(--color-red-500);
-	--color-negative-opacity: rgba(234, 65, 50, 0.3);
-	--color-negative-light: var(--color-red-100);
-	--color-negative-light-opacity: rgba(234, 65, 50, 0.11);
-	--color-negative-2: var(--color-red-550);
-	--color-negative-2-light: var(--color-red-150);
-	--color-negative-2-light-opacity: rgba(234, 65, 50, 0.22);
-
-	/* Text */
-	--color-text-1: var(--color-theme-975);
-	--color-text-2: var(--color-theme-750);
-	--color-text-3: var(--color-theme-550);
-	--color-text-4: var(--color-theme-450);
-	--color-text: var(--color-text-1);
-
-	--color-text-secondary: var(--color-gray-250); 
-	--color-text-secondary-2: var(--color-gray-350);
-
-	--color-text-link: var(--color-blue-550);
-	--color-text-link-hover: var(--color-blue-600);
-
-	--color-overlay: rgba(0, 0, 0, 0.5);
-
-	--color-placeholder: var(--color-gray-500);
-	--color-placeholder-active: var(--color-gray-300);
-
-	/* Background colors */
-	--color-bg-1: var(--color-steel-300);
-	--color-bg-2: var(--color-steel-150);
-	--color-bg-3: var(--color-white);
-
-	/* Line colors */
-	--color-line-1-opacity: rgba(14, 65, 142, 0.1);
-	--color-line-2-opacity: rgba(191, 203, 218, 0.67);
-	--color-line-3-opacity: rgba(143, 158, 178, 0.74);
-
-	/* Scroll */
-	--scroll-thumb-color: var(--color-theme-250);
-	--scroll-thumb-color-hover: var(--color-theme-350);
-	--scroll-thumb-color-active: var(--color-theme-500);
-
-	/* Page */
-	--body-background-color: var(--content-background-color);
-	--content-background-color: var(--color-bg-3);
-
-	/* Theme */
-	--color-theme-0: var(--color-bg-3);
-	--color-theme-25: rgba(251, 252, 253, 1);
-	--color-theme-50: rgba(248, 250, 252, 1);
-	--color-theme-75: rgba(241, 243, 247, 1);
-	--color-theme-100: rgba(233, 238, 243, 1);
-	--color-theme-125: rgba(226, 232, 238, 1);
-	--color-theme-150: rgba(220, 226, 234, 1);
-	--color-theme-200: rgba(213, 220, 230, 1);
-	--color-theme-250: rgba(206, 215, 226, 1);
-	--color-theme-300: rgba(199, 209, 222, 1);
-	--color-theme-350: rgba(191, 203, 218, 1);
-	--color-theme-400: rgba(181, 193, 208, 1);
-	--color-theme-450: rgba(172, 183, 198, 1);
-	--color-theme-500: rgba(161, 173, 188, 1);
-	--color-theme-525: rgba(151, 162, 178, 1);
-	--color-theme-550: rgba(141, 152, 167, 1);
-	--color-theme-600: rgba(129, 142, 161, 1);
-	--color-theme-650: rgba(117, 131, 150, 1);
-	--color-theme-700: rgba(105, 118, 135, 1);
-	--color-theme-750: rgba(94, 105, 120, 1);
-	--color-theme-800: rgba(82, 92, 105, 1);
-	--color-theme-850: rgba(70, 79, 90, 1);
-	--color-theme-875: rgba(59, 66, 75, 1);
-	--color-theme-900: rgba(47, 52, 60, 1);
-	--color-theme-925: rgba(35, 39, 45, 1);
-	--color-theme-950: rgba(23, 26, 30, 1);
-	--color-theme-975: rgba(12, 13, 15, 1);
-	--color-theme-1000: rgba(0, 0, 0, 1);
-
-	/* top-shadow */
-	--top-shadow-s:
-		0px 0px 3px rgba(112, 144, 176, 0.07),
-		0px 5px 25px rgba(112, 144, 176, 0.12);
-	--top-shadow:
-		0px 0px 4px rgba(4, 9, 84, 0.08),
-		0px 4px 32px rgba(4, 9, 84, 0.1);
-	--top-shadow-b:
-		0px 0px 4px rgba(4, 36, 84, 0.08),
-		0px 18px 32px rgba(4, 25, 84, 0.18);
-
-	--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
-	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
-	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
-}
-
-/* forms */
-:root {
-	/* for text */
-	--top-forms-color: var(--color-text-1);
-	--top-forms-color-disabled: var(--color-text-3);
-	/* for border */
-	--top-forms-border-color: var(--color-line-3-opacity);
-	--top-forms-border-color-hover: var(--color-primary);
-	--top-forms-border-color-disabled: var(--color-line-1-opacity);
-	/* for placeholder */
-	--top-forms-placeholder-color: var(--color-text-3);
-	--top-forms-placeholder-color-disabled: var(--color-text-4);
-	/* for background */
-	--top-forms-background-color: var(--color-bg-3);
-	--top-forms-background-color-hover: var(--color-bg-3);
+:root {
+	/* Main */
+	--color-primary: var(--color-blue-500);
+	--color-primary-light: var(--color-blue-100);
+	--color-primary-light-opacity: rgba(25, 117, 255, 0.11);
+	--color-primary-2: var(--color-blue-550);
+	--color-primary-2-light: var(--color-blue-150);
+	--color-primary-2-light-opacity: rgba(25, 117, 255, 0.22);
+
+	--color-secondary-opacity: rgba(14, 65, 142, 0.06);
+	--color-secondary-2-opacity: rgba(14, 65, 142, 0.08);
+	--color-secondary-3-opacity: rgba(14, 65, 142, 0.12);
+	
+	--color-positive: var(--color-green-500);
+	--color-positive-opacity: rgba(22, 196, 96, 0.3);
+	--color-positive-light: var(--color-green-100);
+	--color-positive-light-opacity: rgba(22, 196, 96, 0.11);
+	--color-positive-2: var(--color-green-500);
+	--color-positive-2-light: var(--color-green-150);
+	--color-positive-2-light-opacity: rgba(22, 196, 96, 0.22);
+
+	--color-warning: var(--color-orange-500);
+	--color-warning-opacity: rgba(255, 170, 51, 0.3);
+	--color-warning-light: var(--color-orange-100);
+	--color-warning-light-opacity: rgba(255, 170, 51, 0.12);
+	--color-warning-2: var(--color-orange-550);
+	--color-warning-2-light: var(--color-orange-150);
+	--color-warning-2-light-opacity: rgba(255, 159, 25, 0.22);
+
+	--color-negative: var(--color-red-500);
+	--color-negative-opacity: rgba(234, 65, 50, 0.3);
+	--color-negative-light: var(--color-red-100);
+	--color-negative-light-opacity: rgba(234, 65, 50, 0.11);
+	--color-negative-2: var(--color-red-550);
+	--color-negative-2-light: var(--color-red-150);
+	--color-negative-2-light-opacity: rgba(234, 65, 50, 0.22);
+
+	/* Text */
+	--color-text-1: var(--color-theme-975);
+	--color-text-2: var(--color-theme-750);
+	--color-text-3: var(--color-theme-550);
+	--color-text-4: var(--color-theme-450);
+	--color-text: var(--color-text-1);
+
+	--color-text-secondary: var(--color-gray-250); 
+	--color-text-secondary-2: var(--color-gray-350);
+
+	--color-text-link: var(--color-blue-550);
+	--color-text-link-hover: var(--color-blue-600);
+
+	--color-overlay: rgba(0, 0, 0, 0.5);
+
+	--color-placeholder: var(--color-gray-500);
+	--color-placeholder-active: var(--color-gray-300);
+
+	/* Background colors */
+	--color-bg-1: var(--color-steel-300);
+	--color-bg-2: var(--color-steel-150);
+	--color-bg-3: var(--color-white);
+
+	/* Line colors */
+	--color-line-1-opacity: rgba(14, 65, 142, 0.1);
+	--color-line-2-opacity: rgba(191, 203, 218, 0.67);
+	--color-line-3-opacity: rgba(143, 158, 178, 0.74);
+
+	/* Scroll */
+	--scroll-thumb-color: var(--color-theme-250);
+	--scroll-thumb-color-hover: var(--color-theme-350);
+	--scroll-thumb-color-active: var(--color-theme-500);
+
+	/* Page */
+	--body-background-color: var(--content-background-color);
+	--content-background-color: var(--color-bg-3);
+
+	/* Theme */
+	--color-theme-0: var(--color-bg-3);
+	--color-theme-25: rgba(251, 252, 253, 1);
+	--color-theme-50: rgba(248, 250, 252, 1);
+	--color-theme-75: rgba(241, 243, 247, 1);
+	--color-theme-100: rgba(233, 238, 243, 1);
+	--color-theme-125: rgba(226, 232, 238, 1);
+	--color-theme-150: rgba(220, 226, 234, 1);
+	--color-theme-200: rgba(213, 220, 230, 1);
+	--color-theme-250: rgba(206, 215, 226, 1);
+	--color-theme-300: rgba(199, 209, 222, 1);
+	--color-theme-350: rgba(191, 203, 218, 1);
+	--color-theme-400: rgba(181, 193, 208, 1);
+	--color-theme-450: rgba(172, 183, 198, 1);
+	--color-theme-500: rgba(161, 173, 188, 1);
+	--color-theme-525: rgba(151, 162, 178, 1);
+	--color-theme-550: rgba(141, 152, 167, 1);
+	--color-theme-600: rgba(129, 142, 161, 1);
+	--color-theme-650: rgba(117, 131, 150, 1);
+	--color-theme-700: rgba(105, 118, 135, 1);
+	--color-theme-750: rgba(94, 105, 120, 1);
+	--color-theme-800: rgba(82, 92, 105, 1);
+	--color-theme-850: rgba(70, 79, 90, 1);
+	--color-theme-875: rgba(59, 66, 75, 1);
+	--color-theme-900: rgba(47, 52, 60, 1);
+	--color-theme-925: rgba(35, 39, 45, 1);
+	--color-theme-950: rgba(23, 26, 30, 1);
+	--color-theme-975: rgba(12, 13, 15, 1);
+	--color-theme-1000: rgba(0, 0, 0, 1);
+
+	/* top-shadow */
+	--top-shadow-s:
+		0px 0px 3px rgba(112, 144, 176, 0.07),
+		0px 5px 25px rgba(112, 144, 176, 0.12);
+	--top-shadow:
+		0px 0px 4px rgba(4, 9, 84, 0.08),
+		0px 4px 32px rgba(4, 9, 84, 0.1);
+	--top-shadow-b:
+		0px 0px 4px rgba(4, 36, 84, 0.08),
+		0px 18px 32px rgba(4, 25, 84, 0.18);
+
+	--top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
+	--top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
+	--top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
+}
+
+/* forms */
+:root {
+	/* for text */
+	--top-forms-color: var(--color-text-1);
+	--top-forms-color-disabled: var(--color-text-3);
+	/* for border */
+	--top-forms-border-color: var(--color-line-2-opacity);
+	--top-forms-border-color-hover: var(--color-primary);
+	--top-forms-border-color-disabled: var(--color-line-1-opacity);
+	/* for placeholder */
+	--top-forms-placeholder-color: var(--color-text-3);
+	--top-forms-placeholder-color-disabled: var(--color-text-4);
+	/* for background */
+	--top-forms-background-color: var(--color-bg-3);
+	--top-forms-background-color-hover: var(--color-bg-3);
 }

package/package.json

@@ -1,19 +1,19 @@
-{
-  "name": "@topvisor/ui",
-  "private": false,
-  "version": "0.0.15",
-  "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.17",
+  "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

@@ -0,0 +1,198 @@
+define(["exports", "vue", "./worker.amd", "../.chunks/core-51f7b679.amd", "../utils/device.amd", "../utils/dom.amd"], function(exports, vue, popup_worker, core_core, utils_device, utils_dom) {
+  "use strict"; if(typeof vue === "undefined") var vue = window.Vue;
+  var __vite_style__ = document.createElement("style");
+  __vite_style__.textContent = "\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	cursor: pointer;\n	user-select: none;\n	font-style: normal;\n	text-decoration: none;\n	display: inline-flex;\n	align-items: center;\n}\n[data-top-popup][data-top-popup-disabled] {\n	pointer-events: none;\n	cursor: auto !important;\n}\ni[contenteditable] {\n	cursor: text !important;\n}\n";
+  document.head.appendChild(__vite_style__);
+  var POS = /* @__PURE__ */ ((POS2) => {
+    POS2["over"] = "0";
+    POS2["top"] = "1";
+    POS2["right"] = "2";
+    POS2["bottom"] = "3";
+    POS2["left"] = "4";
+    return POS2;
+  })(POS || {});
+  var POS_BY = /* @__PURE__ */ ((POS_BY2) => {
+    POS_BY2["fixed"] = "fixed";
+    POS_BY2["left"] = "left";
+    POS_BY2["right"] = "right";
+    return POS_BY2;
+  })(POS_BY || {});
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "opener",
+    props: {
+      id: {},
+      pos: { default: POS.bottom },
+      notch: { type: Boolean, default: true },
+      openByHover: { type: Boolean },
+      posBy: { default: POS_BY.fixed }
+    },
+    setup(__props) {
+      const props = __props;
+      const id = props.id || Math.random() + "";
+      let elOpener;
+      function render(el) {
+        setTimeout(() => {
+          elOpener = el.nextElementSibling;
+          if (elOpener) {
+            renderOpener(elOpener);
+          }
+        });
+      }
+      vue.onUpdated(() => {
+        if (elOpener) {
+          renderOpener(elOpener);
+        }
+      });
+      function renderOpener(elOpener2) {
+        elOpener2.dataset.topPopup = "vue-" + id;
+        elOpener2.dataset.topPopupId = id;
+        elOpener2.dataset.topPopupP = props.pos;
+        elOpener2.dataset.topPopupPosBy = props.posBy;
+        elOpener2.dataset.topPopupNotch = props.notch ? "true" : "";
+        elOpener2.dataset.topPopupOpenByHover = props.openByHover ? "true" : "";
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createElementVNode("template", { ref: render }),
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 64);
+      };
+    }
+  });
+  const opener_vue_vue_type_style_index_0_lang = "";
+  const _hoisted_1 = {
+    key: 0,
+    class: "top-popup_header"
+  };
+  const _hoisted_2 = {
+    key: 1,
+    class: "top-popup_content"
+  };
+  const _hoisted_3 = {
+    key: 2,
+    class: "top-popup_content"
+  };
+  const _hoisted_4 = {
+    key: 3,
+    class: "top-popup_footer"
+  };
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "popup",
+    props: {
+      id: { default: "" },
+      class: {},
+      pos: { default: POS.bottom },
+      notch: { type: Boolean, default: true },
+      openByHover: { type: Boolean },
+      posBy: { default: POS_BY.fixed }
+    },
+    emits: ["open", "close"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const id = props.id || Math.random() + "";
+      const elPopupRef = vue.ref(null);
+      const onOpen = async (popup) => {
+        popup.elPopupInner.innerText = "";
+        elPopupRef.value = popup.elPopupInner;
+        vueConnector.opened = true;
+        vueConnector.popup = popup;
+        emit("open");
+      };
+      const onClose = (popup) => {
+        elPopupRef.value = null;
+        vueConnector.opened = false;
+        vueConnector.popup = null;
+        emit("close");
+      };
+      const vueConnector = {
+        onOpen,
+        onClose,
+        classRef: vue.toRef(props, "class"),
+        opened: false,
+        popup: null
+      };
+      popup_worker.regVueComponent(id, vueConnector);
+      vue.onUnmounted(() => {
+        popup_worker.unregVueComponent(id);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          _ctx.$slots.opener ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            key: 0,
+            id: vue.unref(id),
+            pos: _ctx.pos,
+            posBy: _ctx.posBy,
+            notch: _ctx.notch,
+            openByHover: _ctx.openByHover
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "opener")
+            ]),
+            _: 3
+          }, 8, ["id", "pos", "posBy", "notch", "openByHover"])) : vue.createCommentVNode("", true),
+          elPopupRef.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            key: 1,
+            to: elPopupRef.value
+          }, [
+            _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+              vue.renderSlot(_ctx.$slots, "header")
+            ])) : vue.createCommentVNode("", true),
+            _ctx.$slots.content ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "content")
+            ])) : vue.createCommentVNode("", true),
+            _ctx.$slots.contentList ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_3, [
+              vue.renderSlot(_ctx.$slots, "contentList")
+            ])) : vue.createCommentVNode("", true),
+            _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              vue.renderSlot(_ctx.$slots, "footer")
+            ])) : vue.createCommentVNode("", true)
+          ], 8, ["to"])) : vue.createCommentVNode("", true)
+        ], 64);
+      };
+    }
+  });
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      inheritAttrs: false
+    },
+    __name: "listItem",
+    props: {
+      type: { default: "simple" },
+      closeByClick: { type: Boolean, default: true }
+    },
+    setup(__props) {
+      const props = __props;
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("li", {
+          class: vue.normalizeClass({
+            "top-popup_listDelimiter": _ctx.type === "delimiter",
+            "top-popup_listTitle": _ctx.type === "title"
+          })
+        }, [
+          props.type === "simple" || props.type === "link" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.type === "link" ? "a" : "i"), vue.mergeProps({
+            key: 0,
+            class: {
+              "top-popup_item": true,
+              "top-popup_item-a": props.type === "simple",
+              // имитация оформления ссылки
+              "a": true,
+              // deprecated
+              "top-popup-noCloser": !_ctx.closeByClick
+            }
+          }, _ctx.$attrs), {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["class"])) : vue.createCommentVNode("", true),
+          props.type === "title" || props.type === "control" ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+  exports.Popup = _sfc_main$1;
+  exports.PopupListItem = _sfc_main;
+  exports.PopupOpener = _sfc_main$2;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=popup.amd.js.map

package/popup/popup.amd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.amd.js","sources":["../../src/components/popup/popup/popup.ts","../../src/components/popup/popup/opener.vue","../../src/components/popup/popup/popup.vue"],"sourcesContent":["export interface Props extends OpenerProps {\n\t/**\n\t * Уникальный id компонента, используется только в setup, т.е. изменение id будет проигнорировано\n\t *\n\t * Генерируется автоматически при создании кнопки Popup\n\t *\n\t * Можно задать вручную, если необходимо создать Popup без кнопки для последюущего использования,\n\t * особенно важно при создании большого числа кнопок, например в списках и таблицах\n\t */\n\tid?: string;\n\n\t/**\n\t * Класс, который нужно добавить к Popup, устанавилвается в момент открытия\n\t */\n\tclass?: string;\n}\n\nexport interface Emits {\n\t/**\n\t * Будет вызвано при открытии Popup\n\t */\n\t(e: 'open'): void;\n\n\t/**\n\t * Будет вызвано после закрытия Popup\n\t */\n\t(e: 'close'): void;\n}\n\nexport interface OpenerProps {\n\t/**\n\t * id компонента Popup, который необходимо открыть\n\t */\n\tid?: string;\n\n\t/**\n\t * Положение Popup по часовой стрелке\n\t */\n\tpos?: POS;\n\n\t/**\n\t * Добавить клювик\n\t */\n\tnotch?: boolean;\n\n\t/**\n\t * Открывать / закрывать при наведении / отведении мыши\n\t */\n\topenByHover?: boolean;\n\n\t/**\n\t * Способ привязки позиционирования меню\n\t *\n\t * left/right - левый/правый край родителя\n\t *\n\t * fixed - по окну\n\t */\n\tposBy?: POS_BY;\n}\n\nexport interface ListItemProps {\n\t/**\n\t * Тип элемента списка\n\t * * simple - обычный кликабельный (выбираемый) элемент\n\t * * link - ссылка\n\t * * control - элемент формы, например чекбокс\n\t * * delimiter - разделитель\n\t */\n\ttype?: 'simple' | 'link' | 'control' | 'title' | 'delimiter';\n\n\t/**\n\t * Следует ли закрывать меню по клику на элемент типа simple и link\n\t */\n\tcloseByClick?: boolean;\n}\n\nexport enum POS {\n\tover = '0',\n\ttop = '1',\n\tright = '2',\n\tbottom = '3',\n\tleft = '4'\n}\n\nexport enum POS_BY {\n\tfixed = 'fixed',\n\tleft = 'left',\n\tright = 'right',\n}","<script setup lang=\"ts\">\nimport { onUpdated, ref } from 'vue';\nimport type { OpenerProps } from './popup';\nimport { POS, POS_BY } from './popup';\n\nconst props = withDefaults(defineProps<OpenerProps>(), {\n\tpos: POS.bottom,\n\tnotch: true,\n\tposBy: POS_BY.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 { POS, POS_BY } from './popup';\nimport Opener from './opener.vue';\nimport Worker from '@/components/popup/lib/worker';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tid: '',\n\tpos: POS.bottom,\n\tnotch: true,\n\tposBy: POS_BY.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":["POS","POS_BY","onUpdated","elOpener","ref","toRef","Worker","onUnmounted"],"mappings":";;;;;AA4EY,MAAA,wBAAAA,SAAL;AACNA,SAAA,MAAO,IAAA;AACPA,SAAA,KAAM,IAAA;AACNA,SAAA,OAAQ,IAAA;AACRA,SAAA,QAAS,IAAA;AACTA,SAAA,MAAO,IAAA;AALIA,WAAAA;AAAAA,EAAA,GAAA,OAAA,CAAA,CAAA;AAQA,MAAA,2BAAAC,YAAL;AACNA,YAAA,OAAQ,IAAA;AACRA,YAAA,MAAO,IAAA;AACPA,YAAA,OAAQ,IAAA;AAHGA,WAAAA;AAAAA,EAAA,GAAA,UAAA,CAAA,CAAA;;;;;;;;;;;;ACzEZ,YAAM,KAAK,MAAM,MAAM,KAAK,OAAW,IAAA;AAEnC,UAAA;AAOJ,eAAS,OAAQ,IAAS;AACzB,mBAAW,MAAM;AAChB,qBAAW,GAAG;AAEd,cAAI,UAAU;AACb,yBAAa,QAAQ;AAAA,UACtB;AAAA,QAAA,CACA;AAAA,MACF;AAEAC,UAAAA,UAAU,MAAM;AACf,YAAI,UAAU;AACb,uBAAa,QAAQ;AAAA,QACtB;AAAA,MAAA,CACA;AAED,eAAS,aAAcC,WAAe;AACrCA,kBAAS,QAAQ,WAAW,SAAS;AACrCA,kBAAS,QAAQ,aAAa;AAC9BA,kBAAS,QAAQ,YAAY,MAAM;AACnCA,kBAAS,QAAQ,gBAAgB,MAAM;AACvCA,kBAAS,QAAQ,gBAAgB,MAAM,QAAQ,SAAS;AACxDA,kBAAS,QAAQ,sBAAsB,MAAM,cAAc,SAAS;AAAA,MACrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3BA,YAAM,KAAK,MAAM,MAAM,KAAK,OAAW,IAAA;AACjC,YAAA,aAAaC,QAAI,IAAI;AAGrB,YAAA,SAAS,OAAO,UAAe;AACpC,cAAM,aAAa,YAAY;AAE/B,mBAAW,QAAQ,MAAM;AAEzB,qBAAa,SAAS;AACtB,qBAAa,QAAQ;AAErB,aAAK,MAAM;AAAA,MAAA;AAIN,YAAA,UAAU,CAAC,UAAe;AAC/B,mBAAW,QAAQ;AAEnB,qBAAa,SAAS;AACtB,qBAAa,QAAQ;AAErB,aAAK,OAAO;AAAA,MAAA;AAGb,YAAM,eAAe;AAAA,QACpB;AAAA,QACA;AAAA,QACA,UAAUC,IAAAA,MAAM,OAAO,OAAO;AAAA,QAC9B,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAGDC,mBAAA,gBAAgB,IAAI,YAAY;AAEvCC,UAAAA,YAAY,MAAM;AACjBD,qBAAO,kBAAkB,EAAE;AAAA,MAAA,CAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}