@topvisor/ui 0.0.10 → 0.0.12

package/c/{Icon/Icon.js → icon/icon.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock } from "vue";
-const _hoisted_1 = ["data-g-icon", "data-g-icon2"];
+const _hoisted_1 = ["data-top-icon", "data-top-icon2"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "icon",
   props: {
@@ -9,8 +9,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        "data-g-icon": _ctx.icon,
-        "data-g-icon2": _ctx.icon2
+        "data-top-icon": _ctx.icon,
+        "data-top-icon2": _ctx.icon2
       }, null, 8, _hoisted_1);
     };
   }
@@ -19,4 +19,4 @@ const icon_vue_vue_type_style_index_0_lang = "";
 export {
   _sfc_main as default
 };
-//# sourceMappingURL=Icon.js.map
+//# sourceMappingURL=icon.js.map

package/c/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/c/radio/radio.amd.js

@@ -0,0 +1,49 @@
+define(["vue", "../_plugin-vue_export-helper-cb5c78ba"], function(vue, _pluginVue_exportHelper) {
+  "use strict"; vue = vue ?? Vue;
+  const _hoisted_1 = ["name", "value", "checked", "disabled"];
+  const _hoisted_2 = {
+    key: 0,
+    class: "top-radio_caption"
+  };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "radio",
+    props: {
+      name: {},
+      value: {},
+      title: {},
+      checked: { type: Boolean },
+      disabled: { type: Boolean }
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("label", {
+          class: vue.normalizeClass(["top-el top-radio", {
+            ["top-radio_" + _ctx.name]: _ctx.name !== "",
+            ["top-active"]: _ctx.checked,
+            ["top-disabled"]: _ctx.disabled
+          }])
+        }, [
+          vue.createElementVNode("input", {
+            type: "radio",
+            class: "top-el top-radio_input",
+            name: _ctx.name,
+            value: _ctx.value,
+            checked: _ctx.checked,
+            disabled: _ctx.disabled
+          }, null, 8, _hoisted_1),
+          _ctx.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(_ctx.title), 1)) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+  const style0 = {
+    "top-radio": "top-radio",
+    "top-el": "top-el"
+  };
+  const cssModules = {
+    "$style": style0
+  };
+  const radio = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+  return radio;
+});
+//# sourceMappingURL=radio.amd.js.map

package/c/radio/radio.amd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.amd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/c/radio/radio.js

@@ -0,0 +1,50 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.js";
+const _hoisted_1 = ["name", "value", "checked", "disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "top-radio_caption"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "radio",
+  props: {
+    name: {},
+    value: {},
+    title: {},
+    checked: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        class: normalizeClass(["top-el top-radio", {
+          ["top-radio_" + _ctx.name]: _ctx.name !== "",
+          ["top-active"]: _ctx.checked,
+          ["top-disabled"]: _ctx.disabled
+        }])
+      }, [
+        createElementVNode("input", {
+          type: "radio",
+          class: "top-el top-radio_input",
+          name: _ctx.name,
+          value: _ctx.value,
+          checked: _ctx.checked,
+          disabled: _ctx.disabled
+        }, null, 8, _hoisted_1),
+        _ctx.title ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const style0 = {
+  "top-radio": "top-radio",
+  "top-el": "top-el"
+};
+const cssModules = {
+  "$style": style0
+};
+const radio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  radio as default
+};
+//# sourceMappingURL=radio.js.map

package/c/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/c/style.css

@@ -1,11 +1,18 @@
 
 /* стили этого компонента грузятся всегда: resources/styles/core/icon.css */
+
+._example_1exbj_2 {
+	background: var(--6eb2e862);
+}
+._example_1exbj_2.top-active {
+	background: green;
+}
 .top-button {
 	cursor: pointer;
 	box-shadow: var(--top-button-box-shadow);
 	background-color: var(--top-button-background-color);
-	height: var(--g-forms-base-height);
-	padding: 0 var(--g-forms-padding);
+	height: var(--top-forms-base-height);
+	padding: 0 var(--top-forms-padding);
 	color: var(--top-button-color);
 	line-height: 1;
 	white-space: nowrap;
@@ -23,7 +30,7 @@
 	box-shadow: var(--top-button-box-shadow-active);
 	background-color: var(--top-button-background-color-active);
 }
-.top-button.g-active {
+.top-button.top-active {
 	box-shadow: var(--top-button-box-shadow-selected);
 	background-color: var(--top-button-background-color-selected);
 }
@@ -40,9 +47,9 @@
 			transparent 75%,
 			transparent);
 	background-size: 32px 32px;
-	animation: _progress_1k69v_1 1s linear infinite;
+	animation: _progress_fevtt_1 1s linear infinite;
 }
-@keyframes _progress_1k69v_1 {
+@keyframes _progress_fevtt_1 {
 0% {
 		background-position-x: 0px;
 }
@@ -57,52 +64,52 @@ button.top-button {
 }
 a.top-button,
 a.top-button:hover {
-	min-width: var(--g-forms-base-height);
+	min-width: var(--top-forms-base-height);
 	text-decoration: none;
 }
-.top-button[data-g-icon]:not(:empty),
-.top-button[data-g-icon2]:not(:empty) {
+.top-button[data-top-icon]:not(:empty),
+.top-button[data-top-icon2]:not(:empty) {
 	justify-content: flex-start;
 	text-align: left;
 }
-.top-button[data-g-icon] {
+.top-button[data-top-icon] {
 	padding-left: 0;
 }
-.top-button[data-g-icon2] {
-	padding-right: var(--g_select_arrow-width);
+.top-button[data-top-icon2] {
+	padding-right: var(--top-select_arrow-width);
 }
-.top-button[data-g-icon2]:after {
+.top-button[data-top-icon2]:after {
 	margin-left: auto;
 }
 .top-button:empty {
-	min-width: var(--g-forms-base-height);
+	min-width: var(--top-forms-base-height);
 }
-.top-button[data-g-icon]:empty,
-.top-button[data-g-icon2]:empty {
+.top-button[data-top-icon]:empty,
+.top-button[data-top-icon2]:empty {
 	padding: 0;
 }
-.top-button.g-color_blue {
+.top-button.top-color_blue {
 	--top-button-background-color: var(--color-blue-500);
 }
-.top-button.g-color_green {
+.top-button.top-color_green {
 	--top-button-background-color: var(--color-green-500);
 }
-.top-button.g-color_orange {
+.top-button.top-color_orange {
 	--top-button-background-color: var(--color-orange-500);
 }
-.top-button.g-color_red {
+.top-button.top-color_red {
 	--top-button-background-color: var(--color-red-500);
 }
-.top-button.g-color_pink {
+.top-button.top-color_pink {
 	--top-button-background-color: var(--color-pink-500);
 }
-.top-button.g-color_theme {
+.top-button.top-color_theme {
 	--top-button-box-shadow-hover: none;
 	--top-button-box-shadow-active: none;
 	--top-button-box-shadow-selected: none;
 
-	--g-icon-color: var(--color-text-2);
-	--g-icon2-color: var(--color-text-2);
+	--top-icon-color: var(--color-text-2);
+	--top-icon2-color: var(--color-text-2);
 
 	--top-button-color: var(--color-text-1);
 	--top-button-background-color: transparent;
@@ -110,49 +117,49 @@ a.top-button:hover {
 	--top-button-background-color-active: var(--color-secondary-2-opacity);
 	--top-button-background-color-selected: var(--color-secondary-2-opacity);
 }
-.top-button.g-color_theme.g-active {
-	--g-icon-color: var(--color-text-2);
+.top-button.top-color_theme.top-active {
+	--top-icon-color: var(--color-text-2);
 }
-.top-button.g-style_outline {
+.top-button.top-style_outline {
 	--top-button-box-shadow: none;
 	--top-button-box-shadow-hover: none;
 	--top-button-box-shadow-active: none;
 	--top-button-box-shadow-selected: none;
 
-	--g-forms-border-color: var(--g-style_outline-color);
+	--top-forms-border-color: var(--top-style_outline-color);
 
-	--g-style_outline-color: var(--color-steel-400);
+	--top-style_outline-color: var(--color-steel-400);
 
-	--top-button-color: var(--g-style_outline-color);
+	--top-button-color: var(--top-style_outline-color);
 	--top-button-background-color: var(--content-background-color);
 	--top-button-background-color-hover: var(--color-theme-100);
 	--top-button-background-color-active: var(--color-theme-150);
 	--top-button-background-color-selected: var(--color-theme-125);
 
-	--g-forms-border-width: 1px;
+	--top-forms-border-width: 1px;
 }
-.top-button.g-style_outline.g-color_theme {
+.top-button.top-style_outline.top-color_theme {
 	--top-button-color: var(--color-text);
 }
-.top-button.g-style_outline.g-color_blue {
-	--g-style_outline-color: var(--color-blue-500);
+.top-button.top-style_outline.top-color_blue {
+	--top-style_outline-color: var(--color-blue-500);
 }
-.top-button.g-style_outline.g-color_green {
-	--g-style_outline-color: var(--color-green-500);
+.top-button.top-style_outline.top-color_green {
+	--top-style_outline-color: var(--color-green-500);
 }
-.top-button.g-style_outline.g-color_orange {
-	--g-style_outline-color: var(--color-orange-500);
+.top-button.top-style_outline.top-color_orange {
+	--top-style_outline-color: var(--color-orange-500);
 }
-.top-button.g-style_outline.g-color_red {
-	--g-style_outline-color: var(--color-red-500);
+.top-button.top-style_outline.top-color_red {
+	--top-style_outline-color: var(--color-red-500);
 }
-.top-button.g-style_outline.g-color_pink {
-	--g-style_outline-color: var(--color-pink-500);
+.top-button.top-style_outline.top-color_pink {
+	--top-style_outline-color: var(--color-pink-500);
 }
-.top-button.g-style_soft {
-	--g-shadow-darken: none;
-	--g-shadow-darken-2: none;
-	--g-shadow-darken-3: none;
+.top-button.top-style_soft {
+	--top-shadow-darken: none;
+	--top-shadow-darken-2: none;
+	--top-shadow-darken-3: none;
 
 	--top-button-color: var(--color-text);
 	--top-button-background-color: var(--color-secondary-opacity);
@@ -160,25 +167,25 @@ a.top-button:hover {
 	--top-button-background-color-active: var(--color-secondary-3-opacity);
 	--top-button-background-color-selected: var(--color-secondary-3-opacity);
 }
-.top-button.g-style_soft.g-color_blue {
+.top-button.top-style_soft.top-color_blue {
 	--top-button-color: var(--color-blue-500);
 }
-.top-button.g-style_soft.g-color_orange {
+.top-button.top-style_soft.top-color_orange {
 	--top-button-color: var(--color-orange-500);
 }
-.top-button.g-style_soft.g-color_green {
+.top-button.top-style_soft.top-color_green {
 	--top-button-color: var(--color-green-500);
 }
-.top-button.g-style_soft.g-color_red {
+.top-button.top-style_soft.top-color_red {
 	--top-button-color: var(--color-red-500);
 }
-.top-button.g-style_soft.g-color_pink {
+.top-button.top-style_soft.top-color_pink {
 	--top-button-color: var(--color-pink-500);
 }
-.top-button.g-style_transparent {
-	--g-shadow-darken: none;
-	--g-shadow-darken-2: none;
-	--g-shadow-darken-3: none;
+.top-button.top-style_transparent {
+	--top-shadow-darken: none;
+	--top-shadow-darken-2: none;
+	--top-shadow-darken-3: none;
 
 	--top-button-color: var(--color-text);
 	--top-button-background-color: transparent;
@@ -186,22 +193,22 @@ a.top-button:hover {
 	--top-button-background-color-active: transparent;
 	--top-button-background-color-selected: var(--color-steel-200);
 }
-.top-button.g-style_transparent:hover {
+.top-button.top-style_transparent:hover {
 	opacity: 0.8;
 }
-.top-button.g-style_transparent.g-color_blue {
+.top-button.top-style_transparent.top-color_blue {
 	--top-button-color: var(--color-blue-450);
 }
-.top-button.g-style_transparent.g-color_green {
+.top-button.top-style_transparent.top-color_green {
 	--top-button-color: var(--color-green-450);
 }
-.top-button.g-style_transparent.g-color_orange {
+.top-button.top-style_transparent.top-color_orange {
 	--top-button-color: var(--color-orange-450);
 }
-.top-button.g-style_transparent.g-color_red {
+.top-button.top-style_transparent.top-color_red {
 	--top-button-color: var(--color-red-450);
 }
-.top-button.g-style_transparent.g-color_pink {
+.top-button.top-style_transparent.top-color_pink {
 	--top-button-color: var(--color-pink-450);
 }
 .top-button {
@@ -211,26 +218,142 @@ a.top-button:hover {
 	--top-button-background-color-active: var(--top-button-background-color-hover);
 	--top-button-background-color-selected: var(--top-button-background-color-hover);
 	--top-button-box-shadow: none;
-	--top-button-box-shadow-hover: var(--g-shadow-darken-2);
-	--top-button-box-shadow-active: var(--g-shadow-darken-3);
-	--top-button-box-shadow-selected: var(--g-shadow-darken-3);
-	--g-forms-border-width: 0px;
-	--g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));
-	--g-icon2-width: calc(var(--g-icon2-size) + var(--g-forms-padding));
+	--top-button-box-shadow-hover: var(--top-shadow-darken-2);
+	--top-button-box-shadow-active: var(--top-shadow-darken-3);
+	--top-button-box-shadow-selected: var(--top-shadow-darken-3);
+	--top-forms-border-width: 0px;
+	--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+	--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
 }
-.top-button.g-size_l {
-	--g-forms-padding: var(--g-forms-padding_l);
-	--g-forms-base-height: var(--g-forms-base-height_l);
+.top-button.top-size_l {
+	--top-forms-padding: var(--top-forms-padding_l);
+	--top-forms-base-height: var(--top-forms-base-height_l);
 }
-.top-button.g-size_xl {
-	--g-forms-padding: var(--g-forms-padding_xl);
-	--g-forms-base-height: var(--g-forms-base-height_xl);
+.top-button.top-size_xl {
+	--top-forms-padding: var(--top-forms-padding_xl);
+	--top-forms-base-height: var(--top-forms-base-height_xl);
 }
 .top-button-progress {}
 
-._example_18dgo_2 {
-	background: var(--811e7836);
+[type="checkbox"].top-el:before {
+	--top-checkbox-color: var(--top-radio-color);
+	--top-checkbox-color-hover: var(--top-radio-color-hover);
+
+	--top-checkbox-symbol: '';
+
+	font-family: "Topvisor-2";
+}
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher):before {
+	content: ' ';
+	text-align: center;
+	line-height: 16px;
+	font-size: 16px;
+	border-radius: 4px;
+	background: var(--content-background-color);
+	border: 1px solid var(--color-gray-200);
+	width: 16px;
+	height: 16px;
+	color: #FFF;
+	text-indent: 0px;
+	font-family: 'Topvisor-2';
+}
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher)[title]:after {
+	margin: 0 0 0 8px;
+}
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher):not(:checked):not(:disabled):not(:indeterminate):hover:before {
+	border-color: var(--color-gray-400);
+	background: var(--color-steel-150)
+}
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher):checked:before,
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher):indeterminate:before {
+	content: var(--top-checkbox-symbol);
+	border-color: var(--top-checkbox-color);
+	background: var(--top-checkbox-color);
+}
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher):checked:not(:disabled):hover:before,
+[type="checkbox"].top-el:not(.top-checkbox_input-switcher):indeterminate:not(:disabled):hover:before {
+	border-color: var(--top-checkbox-color-hover);
+	background: var(--top-checkbox-color-hover);
+}
+[type="checkbox"].top-el:indeterminate:before {
+	--top-checkbox-symbol: '';
+}
+
+/*  top-checkbox_input-switcher */
+[type="checkbox"].top-checkbox_input-switcher {
+	line-height: 1;
 }
-._example_18dgo_2.g-active {
-	background: green;
+[type="checkbox"].top-checkbox_input-switcher:before {
+	--top-checkbox-background-color: var(--color-theme-200);
+	--top-checkbox-background-color-hover: var(--color-theme-300);
+	--top-checkbox-background-color-checked: var(--top-radio-color);
+	--top-checkbox-background-color-checked-hover: var(--top-radio-color-hover);
+
+	--top-checkbox_input-switcher-color: #FFF;
+	--top-checkbox_input-switcher-color-hover: #FFF;
+	--top-checkbox_input-switcher-color-checked: #FFF;
+	--top-checkbox_input-switcher-color-checked-hover: #FFF;
+
+	--top-checkbox-symbol: '';
+
+	transition: text-indent 50ms;
+	content: var(--top-checkbox-symbol);
+	border-radius: 9px;
+	background: var(--top-checkbox-background-color);
+	width: 30px;
+	padding: 0 1px;
+	color: var(--top-checkbox_input-switcher-color);
+	font-family: Topvisor-2;
+	font-size: 16px;
+	line-height: 16px;
+	text-indent: -1px;
+	display: inline-block;
+}
+[type="checkbox"].top-checkbox_input-switcher:not(:disabled):hover:before {
+	background: var(--top-checkbox-background-color-hover);
+	color: var(--top-checkbox_input-switcher-color-hover);
+}
+[type="checkbox"].top-checkbox_input-switcher:after {
+	white-space: nowrap;
+}
+[type="checkbox"].top-checkbox_input-switcher:checked:before {
+	background: var(--top-checkbox-background-color-checked);
+	color: var(--top-checkbox_input-switcher-color-checked);
+	text-indent: 15px;
+}
+[type="checkbox"].top-checkbox_input-switcher:not(:disabled):checked:hover:before {
+	background: var(--top-checkbox-background-color-checked-hover);
+	color: var(--top-checkbox_input-switcher-color-checked-hover);
+}
+
+:root {
+	--top-radio-background-color: var(--content-background-color);
+	--top-radio-background-color-hover: var(--top-radio-background-color);
+	--top-radio-background-color-active: var(--top-radio-background-color);
+}
+.top-radio {
+	cursor: pointer;
+}
+[type="radio"].top-el:before {
+	content: ' ';
+	border-radius: 100%;
+	border: 1px solid var(--color-gray-200);
+	width: 16px;
+	height: 16px;
+}
+[type="radio"].top-el:hover:before,
+.top-radio:hover > [type="radio"].top-el:before {
+	border-color: var(--top-radio-color-hover);
+}
+[type="radio"].top-el:checked:before {
+	box-shadow:
+		var(--top-radio-background-color) 1px 1px 0 inset,
+		var(--top-radio-background-color) -1px -1px 0 inset,
+		var(--top-radio-background-color) 1px -1px 0 inset,
+		var(--top-radio-background-color) -1px 1px 0 inset;
+	background: var(--top-radio-color);
+	border-color: var(--top-radio-color);
+}
+[type="radio"].top-el[title]:after {
+	margin: 0 0 0 8px;
 }