@topvisor/ui 0.0.10 → 0.0.12

package/core.css

@@ -201,108 +201,253 @@
 	--color-top-50: #A6E0A3;
 	--color-top-100: #C7D7D7;
 	--color-top-10000: #FCC94A;
-}/* элемент в виде ссылки */
-.g-link{ cursor: pointer; color: var(--color-text-link); }
-.g-link:hover{ text-decoration: underline; }
+}.top-comment {
+    color: var(--color-gray-350);
+    font-size: 12px;
+}
 
-/* блок с информацией */
-.g-comment{ color: var(--color-gray-350); font-size: 12px; }
+.top-title {
+    margin: 1em 0;
+    font-weight: 600;
+}:root {
+	--top-font-size: 14px;
+	
+	--top-forms-radius: 8px;
+	--top-forms-border-width: 1px;
+	--top-style_outline-color: transparent;
 
-.g-title{ margin: 1em 0; font-weight: 600; }:root{
-	--g-forms-radius: 8px;
-	--g-forms-border-width: 1px;
-	--g-style_outline-color: transparent;
+	--top-forms-base-height: 32px;
+	/* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
+	--top-forms-base-height_l: 36px;
+	--top-forms-base-height_xl: 40px;
 
-	--g-forms-base-height: 32px; /* базовая высота поля, должна быть одинаковой у всех форм в одном контексте */
-	--g-forms-base-height_l: 36px;
-	--g-forms-base-height_xl: 40px;
+	--top-forms-padding: 8px;
+	--top-forms-padding_l: 12px;
+	--top-forms-padding_xl: 16px;
 
-	--g-forms-padding: 8px;
-	--g-forms-padding_l: 12px;
-	--g-forms-padding_xl: 16px;
-	
-	/* g-radio */
-	--g-radio-color: var(--color-primary);
-	--g-radio-color-hover: var(--color-primary-2);
+	--top-forms-padding_xl: 16px;
+
+	/* top-radio */
+	--top-radio-color: var(--color-primary);
+	--top-radio-color-hover: var(--color-primary-2);
+}
+
+/* common wrappers */
+.top-input,
+.top-radio.top-radio-system,
+.top-radio.top-radio-is_sign,
+.top-select,
+.top-selectorGroup{
+	height: auto; min-height: var(--top-forms-base-height); max-width: 100%;
+	vertical-align: middle;
+	display: inline-flex; align-items: center;
+}
+
+button,
+input,
+textarea,
+select{
+	border: 1px solid var(--top-forms-border-color);
+	color: var(--top-forms-color);
+	font-size: var(--top-font-size);
+	font-family: inherit;
+}
+
+.top-button,
+.top-input_input,
+.top-checkbox_input,
+.top-radio_input,
+textarea.top-el,
+.top-select_select {
+	display: inline-block;
+	vertical-align: middle;
+	appearance: none;
+	-webkit-appearance: none;
+}
+
+.top-input_input,
+textarea.top-el,
+.top-select_select {
+	border: 1px solid var(--top-forms-border-color);
+	color: var(--top-forms-color);
 }
 
 /* placeholder для textarea */
-[contenteditable][placeholder]:empty:before{
-    content: attr(placeholder);
-    color: var(--color-text-secondary);
-}
-
-[type="text"].g,
-[type="number"].g,
-[type="date"].g,
-[type="email"].g,
-[type="password"].g,
-textarea.g,
-select.g,
-.top-button{
+[contenteditable][placeholder]:empty:before {
+	content: attr(placeholder);
+	color: var(--color-text-secondary);
+}
+
+[type="text"].top-el,
+[type="number"].top-el,
+[type="date"].top-el,
+[type="email"].top-el,
+[type="password"].top-el,
+textarea.top-el,
+select.top-el,
+.top-button {
 	box-sizing: border-box;
-	border-radius: var(--g-forms-radius); border: var(--g-forms-border-width) solid var(--g-forms-border-color); height: var(--g-forms-base-height);
+	border-radius: var(--top-forms-radius);
+	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
+	height: var(--top-forms-base-height);
 	padding: 0;
-	padding-right: calc(var(--g-forms-padding) + var(--g-forms_clear-width) + var(--g_select_arrow-width));
-	padding-left: calc(max(var(--g-forms-padding), var(--g-icon-both-width)));
+	padding-right: calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width));
+	padding-left: calc(max(var(--top-forms-padding), var(--top-icon-both-width)));
 
 	transition: border-color 150ms;
 }
 
+[type="text"].top-el,
+[type="number"].top-el,
+[type="date"].top-el,
+[type="email"].top-el,
+[type="password"].top-el,
+[type="checkbox"].top-el,
+[type="radio"].top-el,
+textarea.top-el,
+.top-input,
+select.top-el,
+i.top-el,
+span.top-el {
+	color: var(--top-forms-color);
+	white-space: nowrap;
+	display: inline-flex;
+}
+
+[type="checkbox"][class*="top"],
+[type="radio"][class*="top"] {
+	padding: 8px 0;
+	line-height: 1.3;
+}
+
 .top-button:not(:disabled):focus-visible,
 [type="checkbox"]:focus-visible,
-[type="radio"]:focus-visible{ outline: 2px solid var(--g-radio-color); z-index: 1; position: relative; }
-.top-button:not(:disabled):focus-visible{ outline-offset: 2px; }
+[type="radio"]:focus-visible {
+	outline: 2px solid var(--top-radio-color);
+	outline-offset: 2px;
+	position: relative;
+	z-index: 1;
+}
+
+[type="checkbox"]:before,
+[type="checkbox"]:after,
+[type="radio"]:before,
+[type="radio"]:after,
+.top-select:before {
+	vertical-align: middle;
+	display: inline-block;
+}
+
+/* [type="checkbox"].top-el,
+[type="radio"].top-el{
+	background: none; width: auto; height: auto; min-height: var(--top-forms-base-height);
+	text-indent: 0;
+} */
+
+/* label checkbox, label radio */
+label.top-checkbox,
+label.top-radio {
+	cursor: pointer;
+	padding: 8px 0;
+	color: var(--top-forms-color);
+	line-height: 1.3;
+	display: inline-flex;
+	align-items: flex-start;
+	gap: 8px;
+}
+
+label.top-checkbox > [type="checkbox"][class*="top"],
+label.top-radio > [type="radio"][class*="top"] {
+	min-height: unset !important;
+	padding: 0;
+	margin: 0;
+}
+
+.top-checkbox_caption[data-top-icon]:before,
+.top-radio_caption[data-top-icon]:before {
+	height: 16px;
+}
+
+/* checkbox, radio */
+[type="checkbox"].top-el,
+[type="radio"].top-el {
+	cursor: pointer;
+	border: none;
+	white-space: normal;
+}
+[type="checkbox"].top-el:before,
+[type="radio"].top-el:before {
+	flex-shrink: 0;
+}
+[type="checkbox"][title].top-el:after,
+[type="checkbox"][title].top-checkbox_input-switcher:after,
+[type="radio"][title].top-el:after {
+	content: attr(title);
+	margin-left: 8px;
+}
+
+[type="checkbox"][data-top-icon]:not(.top-checkbox_input-switcher),
+[type="radio"][data-top-icon]:not(.top-radioGroup_item) {
+	--top-icon-size: 24px;
+}
+[type="checkbox"][data-top-icon]:not(.top-checkbox_input-switcher):before,
+[type="radio"][data-top-icon]:not(.top-radioGroup_item):before {
+	text-indent: calc(18px + 4px);
+}
+[type="checkbox"][data-top-icon].top-el:not(.top-checkbox_input-switcher):after,
+[type="radio"][data-top-icon].top-el:not(.top-radioGroup_item):after {
+	text-indent: var(--top-icon-both-width);
+}
 
 /* убрать ширину добавляемых элементов */
-label.g[data-g-icon],
-label.g[data-g-icon2] {
-    position: relative;
+label.top-el[data-top-icon],
+label.top-el[data-top-icon2] {
+	position: relative;
 }
-label.g[data-g-icon]:before,
-label.g[data-g-icon2]:after {
-    position: absolute;
-    z-index: 3;
+label.top-el[data-top-icon]:before,
+label.top-el[data-top-icon2]:after {
+	position: absolute;
+	z-index: 3;
 }
-label.g[data-g-icon][data-g-icon2]:after {
-    left: calc(var(--g-icon-width));
+label.top-el[data-top-icon][data-top-icon2]:after {
+	left: calc(var(--top-icon-width));
 }:root {
-    --g-icon-size: 0px;
-    --g-icon-width: 0px;
+    --top-icon-size: 0px;
+    --top-icon-width: 0px;
 
-    --g-icon2-size: 0px;
-    --g-icon2-width: 0px;
+    --top-icon2-size: 0px;
+    --top-icon2-width: 0px;
 
-    --g-icon-both-width: 0px;
+    --top-icon-both-width: 0px;
 }
 
-/* data-g-icon */
-[data-g-icon] {
-    --g-icon-size: 24px;
-    --g-icon-width: calc(var(--g-icon-size) + var(--g-forms-padding));
-    --g-icon-color: inherit;
+/* data-top-icon */
+[data-top-icon] {
+    --top-icon-size: 24px;
+    --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+    --top-icon-color: inherit;
 }
-[data-g-icon2] {
-    --g-icon2-size: 24px;
-    --g-icon2-width: calc(var(--g-icon2-size) + 8px);
-    --g-icon2-color: inherit;
+[data-top-icon2] {
+    --top-icon2-size: 24px;
+    --top-icon2-width: calc(var(--top-icon2-size) + 8px);
+    --top-icon2-color: inherit;
 }
-[data-g-icon=""] {
-    --g-icon-width: 0px;
+[data-top-icon=""] {
+    --top-icon-width: 0px;
 }
-[data-g-icon2=""] {
-    --g-icon2-width: 0px;
+[data-top-icon2=""] {
+    --top-icon2-width: 0px;
 }
 
-[data-g-icon]:before,
-[data-g-icon2]:after {
+[data-top-icon]:before,
+[data-top-icon2]:after {
     pointer-events: none;
-    content: attr(data-g-icon);
-    border-radius: var(--g-forms-radius);
-    width: var(--g-icon-width);
-    color: var(--g-icon-color);
+    content: attr(data-top-icon);
+    border-radius: var(--top-forms-radius);
+    width: var(--top-icon-width);
+    color: var(--top-icon-color);
     font-family: Topvisor-2;
-    font-size: var(--g-icon-size);
+    font-size: var(--top-icon-size);
     font-weight: 400;
     line-height: 1;
     display: inline-flex;
@@ -310,90 +455,120 @@ label.g[data-g-icon][data-g-icon2]:after {
     justify-content: center;
     flex-shrink: 0;
 }
-[data-g-icon2]:after {
-    content: attr(data-g-icon2);
-    width: var(--g-icon2-width);
-    color: var(--g-icon2-color);
-    font-size: var(--g-icon2-size);
+[data-top-icon2]:after {
+    content: attr(data-top-icon2);
+    width: var(--top-icon2-width);
+    color: var(--top-icon2-color);
+    font-size: var(--top-icon2-size);
 }
 
 /* ширина добавляемых элементов */
-[data-g-icon],
-[data-g-icon2] {
-    --g-icon-both-width: calc(var(--g-icon-width) + var(--g-icon2-width));
+[data-top-icon],
+[data-top-icon2] {
+    --top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width));
 }
 
-[data-g-icon=""]:before {
+[data-top-icon=""]:before {
     font-family: Topvisor;
-}.g-ellipsis {
+}.top-ellipsis {
 	max-height: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	line-height: 1.23;
 	flex-grow: 1;
 }
-.g-ellipsis2,
-.g-ellipsis3 {
+.top-ellipsis2,
+.top-ellipsis3 {
 	max-width: fit-content;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 }
-.g-ellipsis3 {
+.top-ellipsis3 {
 	-webkit-line-clamp: 3;
-}/* g-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
-.g-inited{ }
+}/* top-inited используется для блокировки элементов, js к которым еще не привязан, настраивается в каждом модуле отдельно */
+.top-inited {}
 
-.g-hidden{ display: none !important; }
+.top-hidden {
+	display: none !important;
+}
+
+/* top-unvisible используется для скрытия элементов, без изменения видимости */
+.top-unvisible {
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+}
 
-/* g-unvisible используется для скрытия элементов, без изменения видимости */
-.g-unvisible{ width: 0; height: 0; overflow: hidden; position: absolute; }
+.top-loading {}
 
-.g-loading{ }
+.top-disabled {
+	pointer-events: none;
+}
 
-.g-error,
-.g-error::placeholder,
-.g-error:before{
-	--g-forms-border-color: var(--color-negative);
+.top-error,
+.top-error::placeholder,
+.top-error:before {
+	--top-forms-border-color: var(--color-negative);
 
 	border-color: var(--color-negative);
 }
-.g-error{
-	--g-icon-color: var(--color-negative);
+.top-error {
+	--top-icon-color: var(--color-negative);
 
 	color: var(--color-negative);
 }
-.g-error ~ .g-caption{ color: var(--color-negative); }
+.top-error ~ .top-forms-caption {
+	color: var(--color-negative);
+}
 
-.g-warning{
-	--g-icon-color: var(--color-orange-500);
+.top-warning {
+	--top-icon-color: var(--color-orange-500);
 
 	color: var(--color-orange-500);
 }
 
-input.g-error{ animation: g-error 0.3s; }
+input.top-error {
+	animation: top-error 0.3s;
+}
 
-@keyframes g-error{
-	0%{ }
-	30%{ box-shadow: inset var(--color-red-200) 0 0 20px; }
-	100%{ }
+@keyframes top-error {
+	0% {}
+	30% {
+		box-shadow: inset var(--color-red-200) 0 0 20px;
+	}
+	100% {}
 }@media only screen and (min-width: 900px) {
-	.g-only-mobile {
+	.top-only-mobile {
 		display: none !important;
 	}
 }
 @media only screen and (max-width: 900px) {
-	.g-only-pc {
+	.top-only-pc {
 		display: none !important;
 	}
 }
 
-html:not([lang="ru"]) .g-only-ru,
-html:not([lang="en"]) .g-only-en {
+html:not([lang="ru"]) .top-only-ru,
+html:not([lang="en"]) .top-only-en {
 	display: none !important;
 }
 
-html[data-is_admin="0"] .g-only-admin {
+html[data-is_admin="0"] .top-only-admin {
 	display: none !important;
-}
+}/* TODO: перенести в компонент */
+.top-select_arrow{
+	--top-select_arrow-color: var(--color-gray-600);
+	--top-select_arrow-size: 12px;
+	--top-select_arrow-width: 24px;
+
+	background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");
+	background-size: 14px;
+	background-position: calc(100% - var(--top-forms-padding)) 50%;
+	background-repeat: no-repeat;
+	padding-right: 32px;
+}
+
+.top-select_arrow ~ [data-action="top-input_clear"]{ --top-select_arrow-width: 24px; }

package/dark.css

@@ -88,29 +88,29 @@
 	--color-theme-975: rgba(250, 251, 252, 1);
 	--color-theme-1000: rgba(255, 255, 255, 1);
 
-	/* g-shadow */
-	--g-shadow-s:
+	/* top-shadow */
+	--top-shadow-s:
 		0px 0px 3px rgba(0, 0, 0, 0.07),
 		0px 5px 25px rgba(0, 0, 0, 0.12);
-	--g-shadow:
+	--top-shadow:
 		0px 0px 3px rgba(0, 0, 0, 0.07),
 		0px 5px 25px rgba(0, 0, 0, 0.3);
-	--g-shadow-b:
+	--top-shadow-b:
 		0px 0px 4px rgba(0, 0, 0, 0.08),
 		0px 18px 32px rgba(0, 0, 0, 0.18);
 
-	--g-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
-	--g-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.07);
-	--g-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.14);
+	--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 {
-	--g-forms-color: var(--color-text);
+	--top-forms-color: var(--color-text);
 
-	--g-forms-border-color: var(--color-line-1-opacity);
-	--g-forms-border-color-hover: var(--color-line-2-opacity);
+	--top-forms-border-color: var(--color-line-1-opacity);
+	--top-forms-border-color-hover: var(--color-line-2-opacity);
 
-	--g-forms-background-color: var(--color-bg-3);
-	--g-forms-background-color-hover: var(--color-bg-3);
+	--top-forms-background-color: var(--color-bg-3);
+	--top-forms-background-color-hover: var(--color-bg-3);
 }

package/l/common/common.amd.js

@@ -1,6 +1,6 @@
-define(["vue"], function(vue) {
+define(["exports", "vue"], function(exports, vue) {
   "use strict"; vue = vue ?? Vue;
-  const _hoisted_1 = ["data-g-icon", "data-g-icon2"];
+  const _hoisted_1 = ["data-top-icon", "data-top-icon2"];
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     __name: "icon",
     props: {
@@ -10,13 +10,14 @@ define(["vue"], function(vue) {
     setup(__props) {
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.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);
       };
     }
   });
   const icon_vue_vue_type_style_index_0_lang = "";
-  return _sfc_main;
+  exports.Icon = _sfc_main;
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=common.amd.js.map

package/l/common/common.amd.js.map

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

package/l/common/common.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,14 +9,14 @@ 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);
     };
   }
 });
 const icon_vue_vue_type_style_index_0_lang = "";
 export {
-  _sfc_main as default
+  _sfc_main as Icon
 };
 //# sourceMappingURL=common.js.map