@topvisor/ui 0.0.14 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.chunks/{forms-512abfa7.amd.js → forms-2abb7eaa.amd.js} +27 -15
  2. package/.chunks/forms-2abb7eaa.amd.js.map +1 -0
  3. package/.chunks/{forms-1b3f76e9.es.js → forms-5e17154c.es.js} +26 -14
  4. package/.chunks/forms-5e17154c.es.js.map +1 -0
  5. package/core.css +218 -204
  6. package/dark.css +11 -3
  7. package/forms/forms.amd.js +1 -1
  8. package/forms/forms.js +1 -1
  9. package/forms.css +8 -1
  10. package/helpers/helpers.amd.js +1 -1
  11. package/helpers/helpers.js +1 -1
  12. package/light.css +11 -3
  13. package/package.json +2 -2
  14. package/.chunks/forms-1b3f76e9.es.js.map +0 -1
  15. package/.chunks/forms-512abfa7.amd.js.map +0 -1
package/.chunks/{forms-512abfa7.amd.js → forms-2abb7eaa.amd.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  define(["exports", "vue"], function(exports, vue) {
2
2
  "use strict";
3
3
  var __vite_style__ = document.createElement("style");
4
- __vite_style__.textContent = ".top-button {\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n box-shadow: var(--top-button-box-shadow);\r\n border-radius: var(--top-forms-radius);\r\n border: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n background-color: var(--top-button-background-color);\r\n height: var(--top-forms-base-height);\r\n padding: 0 var(--top-forms-padding);\r\n color: var(--top-button-color);\r\n line-height: 1;\r\n white-space: nowrap;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n transition: background-color 150ms, border-color 150ms, box-shadow 150ms;\n}\n.top-button:hover {\r\n box-shadow: var(--top-button-box-shadow-hover);\r\n background-color: var(--top-button-background-color-hover);\n}\n.top-button:active {\r\n box-shadow: var(--top-button-box-shadow-active);\r\n background-color: var(--top-button-background-color-active);\n}\n.top-button.top-active {\r\n box-shadow: var(--top-button-box-shadow-selected);\r\n background-color: var(--top-button-background-color-selected);\n}\n.top-button.top-button-progress {\r\n cursor: help;\r\n box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;\r\n background-image:\r\n linear-gradient(-45deg,\r\n rgba(255, 255, 255, 0.2) 25%,\r\n transparent 25%,\r\n transparent 50%,\r\n rgba(255, 255, 255, 0.2) 50%,\r\n rgba(255, 255, 255, 0.2) 75%,\r\n transparent 75%,\r\n transparent);\r\n background-size: 32px 32px;\r\n animation: _progress_1f1nw_1 1s linear infinite;\n}\n@keyframes _progress_1f1nw_1 {\n0% {\r\n background-position-x: 0px;\n}\n100% {\r\n background-position-x: 32px;\n}\n}\na.top-button,\r\nbutton.top-button {\r\n min-width: 135px;\r\n text-decoration: none;\n}\na.top-button,\r\na.top-button:hover {\r\n min-width: var(--top-forms-base-height);\r\n text-decoration: none;\n}\n.top-button[data-top-icon]:not(:empty),\r\n.top-button[data-top-icon2]:not(:empty) {\r\n justify-content: flex-start;\r\n text-align: left;\n}\n.top-button[data-top-icon] {\r\n padding-left: 0;\n}\n.top-button[data-top-icon2] {\r\n padding-right: var(--top-select_arrow-width);\n}\n.top-button[data-top-icon2]:after {\r\n margin-left: auto;\n}\n.top-button:empty {\r\n min-width: var(--top-forms-base-height);\n}\n.top-button[data-top-icon]:empty,\r\n.top-button[data-top-icon2]:empty {\r\n padding: 0;\n}\n.top-button.top-color_blue {\r\n --top-button-background-color: var(--color-blue-500);\n}\n.top-button.top-color_green {\r\n --top-button-background-color: var(--color-green-500);\n}\n.top-button.top-color_orange {\r\n --top-button-background-color: var(--color-orange-500);\n}\n.top-button.top-color_red {\r\n --top-button-background-color: var(--color-red-500);\n}\n.top-button.top-color_pink {\r\n --top-button-background-color: var(--color-pink-500);\n}\n.top-button.top-color_theme {\r\n --top-button-box-shadow-hover: none;\r\n --top-button-box-shadow-active: none;\r\n --top-button-box-shadow-selected: none;\r\n\r\n --top-icon-color: var(--color-text-2);\r\n --top-icon2-color: var(--color-text-2);\r\n\r\n --top-button-color: var(--color-text-1);\r\n --top-button-background-color: transparent;\r\n --top-button-background-color-hover: var(--color-secondary-opacity);\r\n --top-button-background-color-active: var(--color-secondary-2-opacity);\r\n --top-button-background-color-selected: var(--color-secondary-2-opacity);\n}\n.top-button.top-color_theme.top-active {\r\n --top-icon-color: var(--color-text-2);\n}\n.top-button.top-style_outline {\r\n --top-button-box-shadow: none;\r\n --top-button-box-shadow-hover: none;\r\n --top-button-box-shadow-active: none;\r\n --top-button-box-shadow-selected: none;\r\n\r\n --top-forms-border-color: var(--top-style_outline-color);\r\n\r\n --top-style_outline-color: var(--color-steel-400);\r\n\r\n --top-button-color: var(--top-style_outline-color);\r\n --top-button-background-color: var(--content-background-color);\r\n --top-button-background-color-hover: var(--color-theme-100);\r\n --top-button-background-color-active: var(--color-theme-150);\r\n --top-button-background-color-selected: var(--color-theme-125);\r\n\r\n --top-forms-border-width: 1px;\n}\n.top-button.top-style_outline.top-color_theme {\r\n --top-button-color: var(--color-text);\n}\n.top-button.top-style_outline.top-color_blue {\r\n --top-style_outline-color: var(--color-blue-500);\n}\n.top-button.top-style_outline.top-color_green {\r\n --top-style_outline-color: var(--color-green-500);\n}\n.top-button.top-style_outline.top-color_orange {\r\n --top-style_outline-color: var(--color-orange-500);\n}\n.top-button.top-style_outline.top-color_red {\r\n --top-style_outline-color: var(--color-red-500);\n}\n.top-button.top-style_outline.top-color_pink {\r\n --top-style_outline-color: var(--color-pink-500);\n}\n.top-button.top-style_soft {\r\n --top-shadow-darken: none;\r\n --top-shadow-darken-2: none;\r\n --top-shadow-darken-3: none;\r\n\r\n --top-button-color: var(--color-text);\r\n --top-button-background-color: var(--color-secondary-opacity);\r\n --top-button-background-color-hover: var(--color-secondary-2-opacity);\r\n --top-button-background-color-active: var(--color-secondary-3-opacity);\r\n --top-button-background-color-selected: var(--color-secondary-3-opacity);\n}\n.top-button.top-style_soft.top-color_blue {\r\n --top-button-color: var(--color-blue-500);\n}\n.top-button.top-style_soft.top-color_orange {\r\n --top-button-color: var(--color-orange-500);\n}\n.top-button.top-style_soft.top-color_green {\r\n --top-button-color: var(--color-green-500);\n}\n.top-button.top-style_soft.top-color_red {\r\n --top-button-color: var(--color-red-500);\n}\n.top-button.top-style_soft.top-color_pink {\r\n --top-button-color: var(--color-pink-500);\n}\n.top-button.top-style_transparent {\r\n --top-shadow-darken: none;\r\n --top-shadow-darken-2: none;\r\n --top-shadow-darken-3: none;\r\n\r\n --top-button-color: var(--color-text);\r\n --top-button-background-color: transparent;\r\n --top-button-background-color-hover: transparent;\r\n --top-button-background-color-active: transparent;\r\n --top-button-background-color-selected: var(--color-steel-200);\n}\n.top-button.top-style_transparent:hover {\r\n opacity: 0.8;\n}\n.top-button.top-style_transparent.top-color_blue {\r\n --top-button-color: var(--color-blue-450);\n}\n.top-button.top-style_transparent.top-color_green {\r\n --top-button-color: var(--color-green-450);\n}\n.top-button.top-style_transparent.top-color_orange {\r\n --top-button-color: var(--color-orange-450);\n}\n.top-button.top-style_transparent.top-color_red {\r\n --top-button-color: var(--color-red-450);\n}\n.top-button.top-style_transparent.top-color_pink {\r\n --top-button-color: var(--color-pink-450);\n}\n.top-button {\r\n --top-button-color: var(--color-white);\r\n --top-button-background-color: transparent;\r\n --top-button-background-color-hover: var(--top-button-background-color);\r\n --top-button-background-color-active: var(--top-button-background-color-hover);\r\n --top-button-background-color-selected: var(--top-button-background-color-hover);\r\n --top-button-box-shadow: none;\r\n --top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n --top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n --top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n --top-forms-border-width: 0px;\r\n --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n --top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\n}\n.top-button.top-size_l {\r\n --top-forms-padding: var(--top-forms-padding_l);\r\n --top-forms-base-height: var(--top-forms-base-height_l);\n}\n.top-button.top-size_xl {\r\n --top-forms-padding: var(--top-forms-padding_xl);\r\n --top-forms-base-height: var(--top-forms-base-height_xl);\n}\r\n\n.top-forms-optionLabel_title {\r\n min-height: var(--top-forms-option-height);\r\n display: flex; align-items: center;\n}\n.top-forms-optionLabel_description {\r\n color: var(--color-text-3);\r\n font-size: 0.85em;\r\n line-height: var(--top-forms-option-height);\n}\r\n\n.top-checkbox {\r\n cursor: pointer;\r\n display: inline-flex;\n}\n.top-checkbox_input {\r\n cursor: inherit;\r\n border-radius: 4px;\r\n background: var(--content-background-color);\r\n border: 1px solid var(--top-forms-border-color);\r\n width: calc(var(--top-forms-option-height) - 3px * 2);\r\n height: calc(var(--top-forms-option-height) - 3px * 2);\n}\n.top-checkbox_input:before {\r\n content: ' ';\r\n color: #FFF;\r\n font-family: 'Topvisor-2';\r\n font-size: 16px;\n}\n.top-checkbox_input:not(:checked):not(:indeterminate):hover {\r\n border-color: var(--top-forms-option-color);\r\n background: var(--color-theme-50)\n}\r\n\r\n/* checked / indeterminate */\n.top-checkbox_input:checked,\r\n.top-checkbox_input:indeterminate {\r\n border-color: var(--top-forms-option-color);\r\n background: var(--top-forms-option-color);\n}\n.top-checkbox_input:checked:before {\r\n content: '';\n}\n.top-checkbox_input:indeterminate:before {\r\n content: '';\n}\n.top-checkbox_input:checked:hover,\r\n.top-checkbox_input:indeterminate:hover {\r\n border-color: var(--top-forms-option-color-hover);\r\n background: var(--top-forms-option-color-hover);\n}\r\n\r\n/* disabled */\n.top-checkbox_input:checked:disabled,\r\n.top-checkbox_input:indeterminate:disabled {\r\n border-color: transparent;\r\n background: var(--color-theme-400);\n}\r\n\r\n/* isError */\n.top-checkbox_input.top-error {\r\n border-color: var(--color-negative) !important;\n}\n.top-checkbox_input:checked.top-error,\r\n.top-checkbox_input:indeterminate.top-error {\r\n background: var(--color-negative);\n}\r\n\n.top-input {\r\n width: 180px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--top-gap-1);\n}\n.top-input_input {\r\n background: var(--top-forms-background-color);\n}\n.top-input_input:hover {\r\n background: var(--top-forms-background-color-hover);\n}\n.top-input_input:focus {\r\n outline-color: var(--color-theme-75);\r\n outline-offset: 0px;\n}\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n --top-forms_clear-width: 24px;\n}\r\n\r\n/* TODO: перенести в inputsRange */\n.top-input_input {\r\n width: 50%;\r\n flex-grow: 1;\n}\n.top-input[data-top-icon]:before {\r\n --top-icon-color: var(--color-text-secondary);\n}\r\n\n:root {\r\n --top-radio-background-color: var(--content-background-color);\r\n --top-radio-background-color-hover: var(--top-radio-background-color);\r\n --top-radio-background-color-active: var(--top-radio-background-color);\n}\n.top-radio {\r\n cursor: pointer;\n}\n.top-radio_input {\r\n border-radius: 50%;\r\n background: var(--content-background-color);\r\n border: 1px solid var(--top-forms-border-color);\r\n width: calc(var(--top-forms-option-height) - 3px * 2);\r\n height: calc(var(--top-forms-option-height) - 3px * 2);\n}\n.top-radio_input:hover {\r\n border-color: var(--top-forms-option-color);\n}\n.top-radio_input:checked {\r\n border-color: var(--top-forms-option-color);\r\n border-width: 5px;\n}\n.top-radio_input:checked:hover {\r\n border-color: var(--top-forms-option-color-hover);\n}\r\n\r\n/* isError */\n.top-radio_input.top-error,\r\n.top-radio_input:checked.top-error {\r\n border-color: var(--color-negative);\n}\r\n\n.top-checkboxSwitcher {\r\n cursor: pointer;\r\n display: inline-flex;\r\n gap: 4px;\n}\n.top-checkboxSwitcher_input {\r\n border-radius: 9px;\r\n border: none;\r\n background: var(--color-theme-100);\r\n width: 36px;\r\n height: 18px;\r\n position: relative;\n}\n.top-checkboxSwitcher_input:before {\r\n content: '';\r\n border-radius: 50%;\r\n background: var(--color-white);\r\n width: 12px;\r\n height: 12px;\r\n margin: 3px;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n\r\n transition: left 0.1s;\n}\n.top-checkboxSwitcher_input:hover {\r\n background: var(--color-theme-150);\n}\r\n\r\n/* checked */\n.top-checkboxSwitcher_input:checked {\r\n background: var(--top-forms-option-color);\n}\n.top-checkboxSwitcher_input:checked:hover {\r\n background: var(--top-forms-option-color-hover);\n}\n.top-checkboxSwitcher_input:checked:before {\r\n left: 50%;\n}\r\n\r\n/* disabled */\n.top-checkboxSwitcher_input:disabled {\r\n background: var(--color-theme-400);\n}\r\n\r\n/* isError */\n.top-checkboxSwitcher_input.top-error {\r\n background: var(--color-negative) !important;\n}\r\n";
4
+ __vite_style__.textContent = ".top-button {\r\n cursor: pointer;\r\n box-sizing: border-box;\r\n box-shadow: var(--top-button-box-shadow);\r\n border-radius: var(--top-forms-radius);\r\n border: var(--top-forms-border-width) solid var(--top-forms-border-color);\r\n background-color: var(--top-button-background-color);\r\n height: var(--top-forms-base-height);\r\n padding: 0 var(--top-forms-padding);\r\n color: var(--top-button-color);\r\n line-height: 1;\r\n white-space: nowrap;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n transition: background-color 150ms, border-color 150ms, box-shadow 150ms;\n}\n.top-button:hover {\r\n box-shadow: var(--top-button-box-shadow-hover);\r\n background-color: var(--top-button-background-color-hover);\n}\n.top-button:active {\r\n box-shadow: var(--top-button-box-shadow-active);\r\n background-color: var(--top-button-background-color-active);\n}\n.top-button.top-active {\r\n box-shadow: var(--top-button-box-shadow-selected);\r\n background-color: var(--top-button-background-color-selected);\n}\n.top-button.top-button-progress {\r\n cursor: help;\r\n box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;\r\n background-image:\r\n linear-gradient(-45deg,\r\n rgba(255, 255, 255, 0.2) 25%,\r\n transparent 25%,\r\n transparent 50%,\r\n rgba(255, 255, 255, 0.2) 50%,\r\n rgba(255, 255, 255, 0.2) 75%,\r\n transparent 75%,\r\n transparent);\r\n background-size: 32px 32px;\r\n animation: _progress_1f1nw_1 1s linear infinite;\n}\n@keyframes _progress_1f1nw_1 {\n0% {\r\n background-position-x: 0px;\n}\n100% {\r\n background-position-x: 32px;\n}\n}\na.top-button,\r\nbutton.top-button {\r\n min-width: 135px;\r\n text-decoration: none;\n}\na.top-button,\r\na.top-button:hover {\r\n min-width: var(--top-forms-base-height);\r\n text-decoration: none;\n}\n.top-button[data-top-icon]:not(:empty),\r\n.top-button[data-top-icon2]:not(:empty) {\r\n justify-content: flex-start;\r\n text-align: left;\n}\n.top-button[data-top-icon] {\r\n padding-left: 0;\n}\n.top-button[data-top-icon2] {\r\n padding-right: var(--top-select_arrow-width);\n}\n.top-button[data-top-icon2]:after {\r\n margin-left: auto;\n}\n.top-button:empty {\r\n min-width: var(--top-forms-base-height);\n}\n.top-button[data-top-icon]:empty,\r\n.top-button[data-top-icon2]:empty {\r\n padding: 0;\n}\n.top-button.top-color_blue {\r\n --top-button-background-color: var(--color-blue-500);\n}\n.top-button.top-color_green {\r\n --top-button-background-color: var(--color-green-500);\n}\n.top-button.top-color_orange {\r\n --top-button-background-color: var(--color-orange-500);\n}\n.top-button.top-color_red {\r\n --top-button-background-color: var(--color-red-500);\n}\n.top-button.top-color_pink {\r\n --top-button-background-color: var(--color-pink-500);\n}\n.top-button.top-color_theme {\r\n --top-button-box-shadow-hover: none;\r\n --top-button-box-shadow-active: none;\r\n --top-button-box-shadow-selected: none;\r\n\r\n --top-icon-color: var(--color-text-2);\r\n --top-icon2-color: var(--color-text-2);\r\n\r\n --top-button-color: var(--color-text-1);\r\n --top-button-background-color: transparent;\r\n --top-button-background-color-hover: var(--color-secondary-opacity);\r\n --top-button-background-color-active: var(--color-secondary-2-opacity);\r\n --top-button-background-color-selected: var(--color-secondary-2-opacity);\n}\n.top-button.top-color_theme.top-active {\r\n --top-icon-color: var(--color-text-2);\n}\n.top-button.top-style_outline {\r\n --top-button-box-shadow: none;\r\n --top-button-box-shadow-hover: none;\r\n --top-button-box-shadow-active: none;\r\n --top-button-box-shadow-selected: none;\r\n\r\n --top-forms-border-color: var(--top-style_outline-color);\r\n\r\n --top-style_outline-color: var(--color-steel-400);\r\n\r\n --top-button-color: var(--top-style_outline-color);\r\n --top-button-background-color: var(--content-background-color);\r\n --top-button-background-color-hover: var(--color-theme-100);\r\n --top-button-background-color-active: var(--color-theme-150);\r\n --top-button-background-color-selected: var(--color-theme-125);\r\n\r\n --top-forms-border-width: 1px;\n}\n.top-button.top-style_outline.top-color_theme {\r\n --top-button-color: var(--color-text);\n}\n.top-button.top-style_outline.top-color_blue {\r\n --top-style_outline-color: var(--color-blue-500);\n}\n.top-button.top-style_outline.top-color_green {\r\n --top-style_outline-color: var(--color-green-500);\n}\n.top-button.top-style_outline.top-color_orange {\r\n --top-style_outline-color: var(--color-orange-500);\n}\n.top-button.top-style_outline.top-color_red {\r\n --top-style_outline-color: var(--color-red-500);\n}\n.top-button.top-style_outline.top-color_pink {\r\n --top-style_outline-color: var(--color-pink-500);\n}\n.top-button.top-style_soft {\r\n --top-shadow-darken: none;\r\n --top-shadow-darken-2: none;\r\n --top-shadow-darken-3: none;\r\n\r\n --top-button-color: var(--color-text);\r\n --top-button-background-color: var(--color-secondary-opacity);\r\n --top-button-background-color-hover: var(--color-secondary-2-opacity);\r\n --top-button-background-color-active: var(--color-secondary-3-opacity);\r\n --top-button-background-color-selected: var(--color-secondary-3-opacity);\n}\n.top-button.top-style_soft.top-color_blue {\r\n --top-button-color: var(--color-blue-500);\n}\n.top-button.top-style_soft.top-color_orange {\r\n --top-button-color: var(--color-orange-500);\n}\n.top-button.top-style_soft.top-color_green {\r\n --top-button-color: var(--color-green-500);\n}\n.top-button.top-style_soft.top-color_red {\r\n --top-button-color: var(--color-red-500);\n}\n.top-button.top-style_soft.top-color_pink {\r\n --top-button-color: var(--color-pink-500);\n}\n.top-button.top-style_transparent {\r\n --top-shadow-darken: none;\r\n --top-shadow-darken-2: none;\r\n --top-shadow-darken-3: none;\r\n\r\n --top-button-color: var(--color-text);\r\n --top-button-background-color: transparent;\r\n --top-button-background-color-hover: transparent;\r\n --top-button-background-color-active: transparent;\r\n --top-button-background-color-selected: var(--color-steel-200);\n}\n.top-button.top-style_transparent:hover {\r\n opacity: 0.8;\n}\n.top-button.top-style_transparent.top-color_blue {\r\n --top-button-color: var(--color-blue-450);\n}\n.top-button.top-style_transparent.top-color_green {\r\n --top-button-color: var(--color-green-450);\n}\n.top-button.top-style_transparent.top-color_orange {\r\n --top-button-color: var(--color-orange-450);\n}\n.top-button.top-style_transparent.top-color_red {\r\n --top-button-color: var(--color-red-450);\n}\n.top-button.top-style_transparent.top-color_pink {\r\n --top-button-color: var(--color-pink-450);\n}\n.top-button {\r\n --top-button-color: var(--color-white);\r\n --top-button-background-color: transparent;\r\n --top-button-background-color-hover: var(--top-button-background-color);\r\n --top-button-background-color-active: var(--top-button-background-color-hover);\r\n --top-button-background-color-selected: var(--top-button-background-color-hover);\r\n --top-button-box-shadow: none;\r\n --top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n --top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n --top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n --top-forms-border-width: 0px;\r\n --top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n --top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\n}\n.top-button.top-size_l {\r\n --top-forms-padding: var(--top-forms-padding_l);\r\n --top-forms-base-height: var(--top-forms-base-height_l);\n}\n.top-button.top-size_xl {\r\n --top-forms-padding: var(--top-forms-padding_xl);\r\n --top-forms-base-height: var(--top-forms-base-height_xl);\n}\r\n\n.top-forms-optionLabel {\r\n flex-grow: 1;\n}\n.top-forms-optionLabel_title {\r\n min-height: var(--top-forms-option-height);\r\n display: flex;\r\n align-items: center;\n}\n.top-forms-optionLabel_title-disabled {\r\n color: var(--color-text-3);\n}\n.top-forms-optionLabel_description {\r\n color: var(--color-text-3);\r\n font-size: 0.85em;\r\n line-height: var(--top-forms-option-height);\n}\r\n\n.top-checkbox {\r\n cursor: pointer;\r\n display: inline-flex;\n}\n.top-checkbox_input {\r\n cursor: inherit;\r\n border-radius: 4px;\r\n background: var(--content-background-color);\r\n border: 1px solid var(--top-forms-border-color);\r\n width: calc(var(--top-forms-option-height) - 3px * 2);\r\n height: calc(var(--top-forms-option-height) - 3px * 2);\n}\n.top-checkbox_input:before {\r\n content: ' ';\r\n color: #FFF;\r\n font-family: 'Topvisor-2';\r\n font-size: 16px;\n}\n.top-checkbox_input:not(:checked):not(:indeterminate):hover {\r\n border-color: var(--top-forms-option-color);\r\n background: var(--color-theme-50)\n}\r\n\r\n/* checked / indeterminate */\n.top-checkbox_input:checked,\r\n.top-checkbox_input:indeterminate {\r\n border-color: var(--top-forms-option-color);\r\n background: var(--top-forms-option-color);\n}\n.top-checkbox_input:checked:before {\r\n content: '';\n}\n.top-checkbox_input:indeterminate:before {\r\n content: '';\n}\n.top-checkbox_input:checked:hover,\r\n.top-checkbox_input:indeterminate:hover {\r\n border-color: var(--top-forms-option-color-hover);\r\n background: var(--top-forms-option-color-hover);\n}\r\n\r\n/* disabled */\n.top-checkbox_input:checked:disabled,\r\n.top-checkbox_input:indeterminate:disabled {\r\n border-color: transparent;\r\n background: var(--color-theme-400);\n}\r\n\r\n/* isError */\n.top-checkbox_input.top-error {\r\n border-color: var(--color-negative) !important;\n}\n.top-checkbox_input:checked.top-error,\r\n.top-checkbox_input:indeterminate.top-error {\r\n background: var(--color-negative);\n}\r\n\n.top-input {\r\n width: 180px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--top-gap-1);\n}\n.top-input_input {\r\n background: var(--top-forms-background-color);\n}\n.top-input_input:hover {\r\n background: var(--top-forms-background-color-hover);\n}\n.top-input_input:focus {\r\n outline-color: var(--color-theme-75);\r\n outline-offset: 0px;\n}\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n --top-forms_clear-width: 24px;\n}\r\n\r\n/* TODO: перенести в inputsRange */\n.top-input_input {\r\n width: 50%;\r\n flex-grow: 1;\n}\n.top-input[data-top-icon]:before {\r\n --top-icon-color: var(--color-text-secondary);\n}\r\n\n:root {\r\n --top-radio-background-color: var(--content-background-color);\r\n --top-radio-background-color-hover: var(--top-radio-background-color);\r\n --top-radio-background-color-active: var(--top-radio-background-color);\n}\n.top-radio {\r\n cursor: pointer;\n}\n.top-radio_input {\r\n border-radius: 50%;\r\n background: var(--content-background-color);\r\n border: 1px solid var(--top-forms-border-color);\r\n width: calc(var(--top-forms-option-height) - 3px * 2);\r\n height: calc(var(--top-forms-option-height) - 3px * 2);\n}\n.top-radio_input:hover {\r\n border-color: var(--top-forms-option-color);\n}\n.top-radio_input:checked {\r\n border-color: var(--top-forms-option-color);\r\n border-width: 5px;\n}\n.top-radio_input:checked:hover {\r\n border-color: var(--top-forms-option-color-hover);\n}\r\n\r\n/* isError */\n.top-radio_input.top-error,\r\n.top-radio_input:checked.top-error {\r\n border-color: var(--color-negative);\n}\r\n\n.top-checkboxSwitcher {\r\n cursor: pointer;\r\n display: inline-flex;\r\n gap: 4px;\n}\n.top-checkboxSwitcher_input {\r\n border-radius: 9px;\r\n border: none;\r\n background: var(--color-theme-100);\r\n width: 36px;\r\n height: 18px;\r\n position: relative;\n}\n.top-checkboxSwitcher_input:before {\r\n content: '';\r\n border-radius: 50%;\r\n background: var(--color-white);\r\n width: 12px;\r\n height: 12px;\r\n margin: 3px;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n\r\n transition: left 0.1s;\n}\n.top-checkboxSwitcher_input:hover {\r\n background: var(--color-theme-150);\n}\r\n\r\n/* checked */\n.top-checkboxSwitcher_input:checked {\r\n background: var(--top-forms-option-color);\n}\n.top-checkboxSwitcher_input:checked:hover {\r\n background: var(--top-forms-option-color-hover);\n}\n.top-checkboxSwitcher_input:checked:before {\r\n left: 50%;\n}\r\n\r\n/* disabled */\n.top-checkboxSwitcher_input:disabled {\r\n background: var(--color-theme-400);\n}\r\n\r\n/* isError */\n.top-checkboxSwitcher_input.top-error {\r\n background: var(--color-negative) !important;\n}\r\n";
5
5
  document.head.appendChild(__vite_style__);
6
6
  var SIZE = /* @__PURE__ */ ((SIZE2) => {
7
7
  SIZE2["S"] = "s";
@@ -106,8 +106,7 @@ define(["exports", "vue"], function(exports, vue) {
106
106
  };
107
107
  const button = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
108
108
  const _hoisted_1$4 = { class: "top-forms-optionLabel" };
109
- const _hoisted_2$1 = { class: "top-forms-optionLabel_title" };
110
- const _hoisted_3$1 = {
109
+ const _hoisted_2$1 = {
111
110
  key: 0,
112
111
  class: "top-forms-optionLabel_description"
113
112
  };
@@ -115,19 +114,27 @@ define(["exports", "vue"], function(exports, vue) {
115
114
  __name: "controlLabel",
116
115
  props: {
117
116
  title: {},
118
- description: {}
117
+ description: {},
118
+ disabled: { type: Boolean }
119
119
  },
120
120
  setup(__props) {
121
121
  return (_ctx, _cache) => {
122
122
  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
123
- vue.createElementVNode("div", _hoisted_2$1, vue.toDisplayString(_ctx.title), 1),
124
- _ctx.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, vue.toDisplayString(_ctx.description), 1)) : vue.createCommentVNode("", true)
123
+ vue.createElementVNode("div", {
124
+ class: vue.normalizeClass({
125
+ "top-forms-optionLabel_title": true,
126
+ "top-forms-optionLabel_title-disabled": _ctx.disabled
127
+ })
128
+ }, vue.toDisplayString(_ctx.title), 3),
129
+ _ctx.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, vue.toDisplayString(_ctx.description), 1)) : vue.createCommentVNode("", true)
125
130
  ]);
126
131
  };
127
132
  }
128
133
  });
129
134
  const style0$4 = {
135
+ "top-forms-optionLabel": "top-forms-optionLabel",
130
136
  "top-forms-optionLabel_title": "top-forms-optionLabel_title",
137
+ "top-forms-optionLabel_title-disabled": "top-forms-optionLabel_title-disabled",
131
138
  "top-forms-optionLabel_description": "top-forms-optionLabel_description"
132
139
  };
133
140
  const cssModules$4 = {
@@ -176,8 +183,9 @@ define(["exports", "vue"], function(exports, vue) {
176
183
  _ctx.title ? (vue.openBlock(), vue.createBlock(ControlLabel, {
177
184
  key: 0,
178
185
  title: _ctx.title,
179
- description: _ctx.description
180
- }, null, 8, ["title", "description"])) : vue.createCommentVNode("", true)
186
+ description: _ctx.description,
187
+ disabled: _ctx.disabled
188
+ }, null, 8, ["title", "description", "disabled"])) : vue.createCommentVNode("", true)
181
189
  ], 2);
182
190
  };
183
191
  }
@@ -229,10 +237,12 @@ define(["exports", "vue"], function(exports, vue) {
229
237
  }
230
238
  });
231
239
  const placeholder = vue.computed(() => {
232
- if (props.addCleaner && !props.title)
240
+ if (props.addCleaner && !props.title) {
233
241
  return "";
234
- if (props.captionType !== CAPTION_TYPE.NONE)
242
+ }
243
+ if (props.captionType !== CAPTION_TYPE.NONE) {
235
244
  return "";
245
+ }
236
246
  return props.title;
237
247
  });
238
248
  const clean = () => {
@@ -332,8 +342,9 @@ define(["exports", "vue"], function(exports, vue) {
332
342
  _ctx.title ? (vue.openBlock(), vue.createBlock(ControlLabel, {
333
343
  key: 0,
334
344
  title: _ctx.title,
335
- description: _ctx.description
336
- }, null, 8, ["title", "description"])) : vue.createCommentVNode("", true)
345
+ description: _ctx.description,
346
+ disabled: _ctx.disabled
347
+ }, null, 8, ["title", "description", "disabled"])) : vue.createCommentVNode("", true)
337
348
  ], 2);
338
349
  };
339
350
  }
@@ -387,8 +398,9 @@ define(["exports", "vue"], function(exports, vue) {
387
398
  _ctx.title ? (vue.openBlock(), vue.createBlock(ControlLabel, {
388
399
  key: 0,
389
400
  title: _ctx.title,
390
- description: _ctx.description
391
- }, null, 8, ["title", "description"])) : vue.createCommentVNode("", true)
401
+ description: _ctx.description,
402
+ disabled: _ctx.disabled
403
+ }, null, 8, ["title", "description", "disabled"])) : vue.createCommentVNode("", true)
392
404
  ], 2);
393
405
  };
394
406
  }
@@ -410,4 +422,4 @@ define(["exports", "vue"], function(exports, vue) {
410
422
  exports.radio = radio;
411
423
  exports.switcher = switcher;
412
424
  });
413
- //# sourceMappingURL=forms-512abfa7.amd.js.map
425
+ //# sourceMappingURL=forms-2abb7eaa.amd.js.map
package/.chunks/forms-2abb7eaa.amd.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"forms-2abb7eaa.amd.js","sources":["../../src/components/forms/helpers.ts","../../src/components/forms/button/button.ts","../../src/components/forms/button/button.vue","../../src/components/forms/input/input.ts","../../src/components/forms/input/input.vue"],"sourcesContent":["/**\r\n * Размеры\r\n */\r\nexport enum SIZE {\r\n\tS = 's',\r\n\tL = 'l',\r\n\tXL = 'xl',\r\n}","import type { VNode } from 'vue';\r\nimport { SIZE } from '@/components/forms/helpers';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tcolor?: COLOR\r\n\tstyling?: STYLING // bug: name = style init with object type\r\n\tsize?: SIZE\r\n\r\n\tname?: string\r\n\ttitle?: string\r\n\ticon?: string\r\n\ticon2?: string\r\n\r\n\thref?: string // если установлена ссылка, isSubmit не может быть true\r\n\t// value?: string\r\n\r\n\tdisabled?: boolean\r\n\tisSubmit?: boolean\r\n\tisActive?: boolean\r\n\tisProgress?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits { }\r\n\r\n/**\r\n * Цвета\r\n */\r\nexport enum COLOR {\r\n\tTheme = 'theme',\r\n\tBlue = 'blue',\r\n\tGreen = 'green',\r\n\tOrange = 'orange',\r\n\tRed = 'red',\r\n\tPink = 'pink',\r\n}\r\n\r\n/**\r\n * Стили\r\n */\r\nexport enum STYLING {\r\n\tRegular = '',\r\n\tOutline = 'outline',\r\n\tSoft = 'soft',\r\n\tTransparent = 'transparent',\r\n}\r\n\r\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props } from './button';\r\nimport { COLOR, STYLING, SIZE } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: COLOR.Blue,\r\n\tstyling: STYLING.Regular,\r\n\tsize: SIZE.S,\r\n});\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: isActive,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t['top-button']: true,\r\n\t\t\t['top-button-progress']: isProgress,\r\n\t\t\t[`top-size_${size}`]: !!size,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t\t[`top-style_${styling}`]: !!styling,\r\n\t\t}\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:data-top-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<slot>{{ !icon ? 'Button' : '' }}</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n</style>","import type { VNode } from 'vue';\r\nimport { SIZE } from '@/components/forms/helpers';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tmodelValue?: string\r\n\r\n\tname?: string\r\n\tdisabled?: boolean\r\n\treadonly?: boolean\r\n\r\n\ttitle?: string\r\n\tcaptionType?: CAPTION_TYPE\r\n\r\n\tsize?: SIZE\r\n\ticon?: string\r\n\taddCleaner?: boolean\r\n\tisError?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n\tbtn(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits {\r\n\t(e: 'update:modelValue', value?: string): void\r\n}\r\n\r\n/**\r\n * Типы заголовка\r\n */\r\nexport enum CAPTION_TYPE {\r\n\tNONE = '',\r\n\tSLIDE = 'slide',\r\n\tTOP = 'top',\r\n}\r\n\r\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './input';\r\nimport { SIZE, CAPTION_TYPE } from './input';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: SIZE.S,\r\n\tcaptionType: CAPTION_TYPE.NONE,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst value = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\nconst placeholder = computed(() => {\r\n\tif (props.addCleaner && !props.title) {\r\n\t\treturn '';\r\n\t}\r\n\tif (props.captionType !== CAPTION_TYPE.NONE) {\r\n\t\treturn '';\r\n\t}\r\n\r\n\treturn props.title;\r\n});\r\n\r\nconst clean = () => {\r\n\temit('update:modelValue', '');\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-input']: true,\r\n\t\t\t['top-input-' + name]: name,\r\n\t\t\t['top-size_' + size]: true,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-input-withCleaner']: addCleaner,\r\n\t\t\t['top-formsCaptionWrapper']: captionType !== CAPTION_TYPE.NONE,\r\n\t\t\t['top-formsCaptionWrapper-always']: captionType === CAPTION_TYPE.TOP,\r\n\t\t\t['top-input-withButton']: !!$slots.btn,\r\n\t\t}\"\r\n\t\t:data-top-icon=\"icon\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-input_input']: true,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"value\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\r\n\t\t>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"addCleaner && value\"\r\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t@click=\"clean\"\r\n\t\t></span>\r\n\r\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\r\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\r\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\r\n\t\t<slot\r\n\t\t\tv-if=\"value\"\r\n\t\t\tname=\"btn\"\r\n\t\t/>\r\n\r\n\t\t<slot></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"captionType !== CAPTION_TYPE.NONE\"\r\n\t\t\tclass=\"top-formsCaption\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</span>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-input {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-input_input {\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-input_input:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-input_input:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n\t--top-forms_clear-width: 24px;\r\n}\r\n\r\n/* TODO: перенести в inputsRange */\r\n.top-input_input {\r\n\twidth: 50%;\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-input[data-top-icon]:before {\r\n\t--top-icon-color: var(--color-text-secondary);\r\n}\r\n</style>"],"names":["SIZE","COLOR","STYLING","computed","CAPTION_TYPE","value"],"mappings":";;;;;AAGY,MAAA,yBAAAA,UAAL;AACNA,UAAA,GAAI,IAAA;AACJA,UAAA,GAAI,IAAA;AACJA,UAAA,IAAK,IAAA;AAHMA,WAAAA;AAAAA,EAAA,GAAA,QAAA,CAAA,CAAA;ACwCA,MAAA,0BAAAC,WAAL;AACNA,WAAA,OAAQ,IAAA;AACRA,WAAA,MAAO,IAAA;AACPA,WAAA,OAAQ,IAAA;AACRA,WAAA,QAAS,IAAA;AACTA,WAAA,KAAM,IAAA;AACNA,WAAA,MAAO,IAAA;AANIA,WAAAA;AAAAA,EAAA,GAAA,SAAA,CAAA,CAAA;AAYA,MAAA,4BAAAC,aAAL;AACNA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,MAAO,IAAA;AACPA,aAAA,aAAc,IAAA;AAJHA,WAAAA;AAAAA,EAAA,GAAA,WAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AC5CZ,YAAM,UAAUC,IAAAA,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,YAAM,OAAOA,IAAAA,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8BrD,MAAA,iCAAAC,kBAAL;AACNA,kBAAA,MAAO,IAAA;AACPA,kBAAA,OAAQ,IAAA;AACRA,kBAAA,KAAM,IAAA;AAHKA,WAAAA;AAAAA,EAAA,GAAA,gBAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AC/BZ,YAAM,QAAQD,IAAAA,SAAS;AAAA,QACtB,MAAO;AACN,iBAAO,MAAM;AAAA,QACd;AAAA,QACA,IAAKE,QAAO;AACX,eAAK,qBAAqBA,MAAK;AAAA,QAChC;AAAA,MAAA,CACA;AAEK,YAAA,cAAcF,IAAAA,SAAS,MAAM;AAClC,YAAI,MAAM,cAAc,CAAC,MAAM,OAAO;AAC9B,iBAAA;AAAA,QACR;AACI,YAAA,MAAM,gBAAgB,aAAa,MAAM;AACrC,iBAAA;AAAA,QACR;AAEA,eAAO,MAAM;AAAA,MAAA,CACb;AAED,YAAM,QAAQ,MAAM;AACnB,aAAK,qBAAqB,EAAE;AAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/.chunks/{forms-1b3f76e9.es.js → forms-5e17154c.es.js} RENAMED
@@ -102,8 +102,7 @@ const cssModules$5 = {
102
102
  };
103
103
  const button = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$5]]);
104
104
  const _hoisted_1$4 = { class: "top-forms-optionLabel" };
105
- const _hoisted_2$1 = { class: "top-forms-optionLabel_title" };
106
- const _hoisted_3$1 = {
105
+ const _hoisted_2$1 = {
107
106
  key: 0,
108
107
  class: "top-forms-optionLabel_description"
109
108
  };
@@ -111,19 +110,27 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
111
110
  __name: "controlLabel",
112
111
  props: {
113
112
  title: {},
114
- description: {}
113
+ description: {},
114
+ disabled: { type: Boolean }
115
115
  },
116
116
  setup(__props) {
117
117
  return (_ctx, _cache) => {
118
118
  return openBlock(), createElementBlock("div", _hoisted_1$4, [
119
- createElementVNode("div", _hoisted_2$1, toDisplayString(_ctx.title), 1),
120
- _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_3$1, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
119
+ createElementVNode("div", {
120
+ class: normalizeClass({
121
+ "top-forms-optionLabel_title": true,
122
+ "top-forms-optionLabel_title-disabled": _ctx.disabled
123
+ })
124
+ }, toDisplayString(_ctx.title), 3),
125
+ _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_2$1, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
121
126
  ]);
122
127
  };
123
128
  }
124
129
  });
125
130
  const style0$4 = {
131
+ "top-forms-optionLabel": "top-forms-optionLabel",
126
132
  "top-forms-optionLabel_title": "top-forms-optionLabel_title",
133
+ "top-forms-optionLabel_title-disabled": "top-forms-optionLabel_title-disabled",
127
134
  "top-forms-optionLabel_description": "top-forms-optionLabel_description"
128
135
  };
129
136
  const cssModules$4 = {
@@ -172,8 +179,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
172
179
  _ctx.title ? (openBlock(), createBlock(ControlLabel, {
173
180
  key: 0,
174
181
  title: _ctx.title,
175
- description: _ctx.description
176
- }, null, 8, ["title", "description"])) : createCommentVNode("", true)
182
+ description: _ctx.description,
183
+ disabled: _ctx.disabled
184
+ }, null, 8, ["title", "description", "disabled"])) : createCommentVNode("", true)
177
185
  ], 2);
178
186
  };
179
187
  }
@@ -225,10 +233,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
225
233
  }
226
234
  });
227
235
  const placeholder = computed(() => {
228
- if (props.addCleaner && !props.title)
236
+ if (props.addCleaner && !props.title) {
229
237
  return "";
230
- if (props.captionType !== CAPTION_TYPE.NONE)
238
+ }
239
+ if (props.captionType !== CAPTION_TYPE.NONE) {
231
240
  return "";
241
+ }
232
242
  return props.title;
233
243
  });
234
244
  const clean = () => {
@@ -328,8 +338,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
328
338
  _ctx.title ? (openBlock(), createBlock(ControlLabel, {
329
339
  key: 0,
330
340
  title: _ctx.title,
331
- description: _ctx.description
332
- }, null, 8, ["title", "description"])) : createCommentVNode("", true)
341
+ description: _ctx.description,
342
+ disabled: _ctx.disabled
343
+ }, null, 8, ["title", "description", "disabled"])) : createCommentVNode("", true)
333
344
  ], 2);
334
345
  };
335
346
  }
@@ -383,8 +394,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
383
394
  _ctx.title ? (openBlock(), createBlock(ControlLabel, {
384
395
  key: 0,
385
396
  title: _ctx.title,
386
- description: _ctx.description
387
- }, null, 8, ["title", "description"])) : createCommentVNode("", true)
397
+ description: _ctx.description,
398
+ disabled: _ctx.disabled
399
+ }, null, 8, ["title", "description", "disabled"])) : createCommentVNode("", true)
388
400
  ], 2);
389
401
  };
390
402
  }
@@ -407,4 +419,4 @@ export {
407
419
  radio as r,
408
420
  switcher as s
409
421
  };
410
- //# sourceMappingURL=forms-1b3f76e9.es.js.map
422
+ //# sourceMappingURL=forms-5e17154c.es.js.map
package/.chunks/forms-5e17154c.es.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"forms-5e17154c.es.js","sources":["../../src/components/forms/helpers.ts","../../src/components/forms/button/button.ts","../../src/components/forms/button/button.vue","../../src/components/forms/input/input.ts","../../src/components/forms/input/input.vue"],"sourcesContent":["/**\r\n * Размеры\r\n */\r\nexport enum SIZE {\r\n\tS = 's',\r\n\tL = 'l',\r\n\tXL = 'xl',\r\n}","import type { VNode } from 'vue';\r\nimport { SIZE } from '@/components/forms/helpers';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tcolor?: COLOR\r\n\tstyling?: STYLING // bug: name = style init with object type\r\n\tsize?: SIZE\r\n\r\n\tname?: string\r\n\ttitle?: string\r\n\ticon?: string\r\n\ticon2?: string\r\n\r\n\thref?: string // если установлена ссылка, isSubmit не может быть true\r\n\t// value?: string\r\n\r\n\tdisabled?: boolean\r\n\tisSubmit?: boolean\r\n\tisActive?: boolean\r\n\tisProgress?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits { }\r\n\r\n/**\r\n * Цвета\r\n */\r\nexport enum COLOR {\r\n\tTheme = 'theme',\r\n\tBlue = 'blue',\r\n\tGreen = 'green',\r\n\tOrange = 'orange',\r\n\tRed = 'red',\r\n\tPink = 'pink',\r\n}\r\n\r\n/**\r\n * Стили\r\n */\r\nexport enum STYLING {\r\n\tRegular = '',\r\n\tOutline = 'outline',\r\n\tSoft = 'soft',\r\n\tTransparent = 'transparent',\r\n}\r\n\r\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props } from './button';\r\nimport { COLOR, STYLING, SIZE } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: COLOR.Blue,\r\n\tstyling: STYLING.Regular,\r\n\tsize: SIZE.S,\r\n});\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: isActive,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t['top-button']: true,\r\n\t\t\t['top-button-progress']: isProgress,\r\n\t\t\t[`top-size_${size}`]: !!size,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t\t[`top-style_${styling}`]: !!styling,\r\n\t\t}\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:data-top-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<slot>{{ !icon ? 'Button' : '' }}</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n</style>","import type { VNode } from 'vue';\r\nimport { SIZE } from '@/components/forms/helpers';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tmodelValue?: string\r\n\r\n\tname?: string\r\n\tdisabled?: boolean\r\n\treadonly?: boolean\r\n\r\n\ttitle?: string\r\n\tcaptionType?: CAPTION_TYPE\r\n\r\n\tsize?: SIZE\r\n\ticon?: string\r\n\taddCleaner?: boolean\r\n\tisError?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n\tbtn(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits {\r\n\t(e: 'update:modelValue', value?: string): void\r\n}\r\n\r\n/**\r\n * Типы заголовка\r\n */\r\nexport enum CAPTION_TYPE {\r\n\tNONE = '',\r\n\tSLIDE = 'slide',\r\n\tTOP = 'top',\r\n}\r\n\r\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './input';\r\nimport { SIZE, CAPTION_TYPE } from './input';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: SIZE.S,\r\n\tcaptionType: CAPTION_TYPE.NONE,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst value = computed({\r\n\tget () {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset (value) {\r\n\t\temit('update:modelValue', value);\r\n\t},\r\n});\r\n\r\nconst placeholder = computed(() => {\r\n\tif (props.addCleaner && !props.title) {\r\n\t\treturn '';\r\n\t}\r\n\tif (props.captionType !== CAPTION_TYPE.NONE) {\r\n\t\treturn '';\r\n\t}\r\n\r\n\treturn props.title;\r\n});\r\n\r\nconst clean = () => {\r\n\temit('update:modelValue', '');\r\n};\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-input']: true,\r\n\t\t\t['top-input-' + name]: name,\r\n\t\t\t['top-size_' + size]: true,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-input-withCleaner']: addCleaner,\r\n\t\t\t['top-formsCaptionWrapper']: captionType !== CAPTION_TYPE.NONE,\r\n\t\t\t['top-formsCaptionWrapper-always']: captionType === CAPTION_TYPE.TOP,\r\n\t\t\t['top-input-withButton']: !!$slots.btn,\r\n\t\t}\"\r\n\t\t:data-top-icon=\"icon\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-input_input']: true,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"value\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\r\n\t\t>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"addCleaner && value\"\r\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t@click=\"clean\"\r\n\t\t></span>\r\n\r\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\r\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\r\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\r\n\t\t<slot\r\n\t\t\tv-if=\"value\"\r\n\t\t\tname=\"btn\"\r\n\t\t/>\r\n\r\n\t\t<slot></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"captionType !== CAPTION_TYPE.NONE\"\r\n\t\t\tclass=\"top-formsCaption\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</span>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-input {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-input_input {\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-input_input:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-input_input:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n\t--top-forms_clear-width: 24px;\r\n}\r\n\r\n/* TODO: перенести в inputsRange */\r\n.top-input_input {\r\n\twidth: 50%;\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-input[data-top-icon]:before {\r\n\t--top-icon-color: var(--color-text-secondary);\r\n}\r\n</style>"],"names":["SIZE","COLOR","STYLING","CAPTION_TYPE","value"],"mappings":";AAGY,IAAA,yBAAAA,UAAL;AACNA,QAAA,GAAI,IAAA;AACJA,QAAA,GAAI,IAAA;AACJA,QAAA,IAAK,IAAA;AAHMA,SAAAA;AAAA,GAAA,QAAA,CAAA,CAAA;ACwCA,IAAA,0BAAAC,WAAL;AACNA,SAAA,OAAQ,IAAA;AACRA,SAAA,MAAO,IAAA;AACPA,SAAA,OAAQ,IAAA;AACRA,SAAA,QAAS,IAAA;AACTA,SAAA,KAAM,IAAA;AACNA,SAAA,MAAO,IAAA;AANIA,SAAAA;AAAA,GAAA,SAAA,CAAA,CAAA;AAYA,IAAA,4BAAAC,aAAL;AACNA,WAAA,SAAU,IAAA;AACVA,WAAA,SAAU,IAAA;AACVA,WAAA,MAAO,IAAA;AACPA,WAAA,aAAc,IAAA;AAJHA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AC5CZ,UAAM,UAAU,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,UAAM,OAAO,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8BrD,IAAA,iCAAAC,kBAAL;AACNA,gBAAA,MAAO,IAAA;AACPA,gBAAA,OAAQ,IAAA;AACRA,gBAAA,KAAM,IAAA;AAHKA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AC/BZ,UAAM,QAAQ,SAAS;AAAA,MACtB,MAAO;AACN,eAAO,MAAM;AAAA,MACd;AAAA,MACA,IAAKC,QAAO;AACX,aAAK,qBAAqBA,MAAK;AAAA,MAChC;AAAA,IAAA,CACA;AAEK,UAAA,cAAc,SAAS,MAAM;AAClC,UAAI,MAAM,cAAc,CAAC,MAAM,OAAO;AAC9B,eAAA;AAAA,MACR;AACI,UAAA,MAAM,gBAAgB,aAAa,MAAM;AACrC,eAAA;AAAA,MACR;AAEA,aAAO,MAAM;AAAA,IAAA,CACb;AAED,UAAM,QAAQ,MAAM;AACnB,WAAK,qBAAqB,EAAE;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/core.css CHANGED
@@ -1,206 +1,206 @@
1
- :root{
2
- --color-white: rgba(255, 255, 255, 1);
3
- --color-black: rgba(0, 0, 0, 1);
4
- --color-black-transparent-40: rgba(0, 0, 0, 0.4);
5
- --color-black-transparent-50: rgba(0, 0, 0, 0.5);
6
- --color-steel-50: rgba(251, 252, 253, 1);
7
- --color-steel-100: rgba(248, 250, 252, 1);
8
- --color-steel-150: rgba(241, 244, 249, 1);
9
- --color-steel-200: rgba(234, 239, 245, 1);
10
- --color-steel-250: rgba(228, 234, 241, 1);
11
- --color-steel-300: rgba(221, 228, 238, 1);
12
- --color-steel-350: rgba(215, 223, 233, 1);
13
- --color-steel-400: rgba(209, 218, 229, 1);
14
- --color-steel-450: rgba(204, 213, 225, 1);
15
- --color-steel-500: rgba(198, 208, 220, 1);
16
- --color-steel-550: rgba(193, 203, 215, 1);
17
- --color-gray-50: rgba(225, 229, 234, 1);
18
- --color-gray-100: rgba(210, 216, 223, 1);
19
- --color-gray-150: rgba(196, 203, 212, 1);
20
- --color-gray-200: rgba(182, 190, 201, 1);
21
- --color-gray-250: rgba(168, 177, 189, 1);
22
- --color-gray-300: rgba(154, 164, 177, 1);
23
- --color-gray-350: rgba(141, 151, 165, 1);
24
- --color-gray-400: rgba(128, 138, 153, 1);
25
- --color-gray-450: rgba(115, 125, 140, 1);
26
- --color-gray-500: rgba(104, 113, 125, 1);
27
- --color-gray-550: rgba(94, 101, 110, 1);
28
- --color-gray-600: rgba(83, 88, 95, 1);
29
- --color-gray-650: rgba(72, 76, 81, 1);
30
- --color-gray-700: rgba(61, 63, 67, 1);
31
- --color-gray-750: rgba(49, 51, 53, 1);
32
- --color-gray-800: rgba(37, 38, 39, 1);
33
- --color-gray-850: rgba(25, 25, 26, 1);
34
- --color-gray-900: rgba(13, 13, 13, 1);
35
- --color-blue-50: rgba(250, 252, 255, 1);
36
- --color-blue-100: rgba(230, 240, 255, 1);
37
- --color-blue-150: rgba(204, 224, 255, 1);
38
- --color-blue-200: rgba(179, 210, 255, 1);
39
- --color-blue-250: rgba(153, 194, 255, 1);
40
- --color-blue-300: rgba(128, 179, 255, 1);
41
- --color-blue-350: rgba(102, 163, 255, 1);
42
- --color-blue-400: rgba(77, 148, 255, 1);
43
- --color-blue-450: rgba(51, 132, 255, 1);
44
- --color-blue-500: rgba(25, 117, 255, 1);
45
- --color-blue-550: rgba(23, 105, 227, 1);
46
- --color-blue-600: rgba(20, 91, 198, 1);
47
- --color-blue-650: rgba(17, 78, 170, 1);
48
- --color-blue-700: rgba(14, 65, 142, 1);
49
- --color-blue-750: rgba(12, 52, 113, 1);
50
- --color-blue-800: rgba(9, 40, 85, 1);
51
- --color-blue-850: rgba(6, 26, 57, 1);
52
- --color-blue-900: rgba(3, 13, 28, 1);
53
- --color-orange-50: rgba(255, 253, 250, 1);
54
- --color-orange-100: rgba(255, 244, 230, 1);
55
- --color-orange-150: rgba(255, 234, 204, 1);
56
- --color-orange-200: rgba(255, 223, 178, 1);
57
- --color-orange-250: rgba(255, 212, 153, 1);
58
- --color-orange-300: rgba(255, 202, 128, 1);
59
- --color-orange-350: rgba(255, 191, 102, 1);
60
- --color-orange-400: rgba(255, 180, 77, 1);
61
- --color-orange-450: rgba(255, 170, 51, 1);
62
- --color-orange-500: rgba(255, 159, 25, 1);
63
- --color-orange-550: rgba(227, 141, 23, 1);
64
- --color-orange-600: rgba(198, 124, 20, 1);
65
- --color-orange-650: rgba(170, 106, 17, 1);
66
- --color-orange-700: rgba(142, 88, 14, 1);
67
- --color-orange-750: rgba(113, 71, 12, 1);
68
- --color-orange-800: rgba(85, 53, 9, 1);
69
- --color-orange-850: rgba(57, 35, 6, 1);
70
- --color-orange-900: rgba(28, 18, 3, 1);
71
- --color-mint-50: rgba(251, 254, 253, 1);
72
- --color-mint-100: rgba(228, 251, 245, 1);
73
- --color-mint-150: rgba(200, 246, 235, 1);
74
- --color-mint-200: rgba(173, 242, 226, 1);
75
- --color-mint-250: rgba(146, 237, 216, 1);
76
- --color-mint-300: rgba(118, 233, 206, 1);
77
- --color-mint-350: rgba(91, 228, 196, 1);
78
- --color-mint-400: rgba(64, 224, 187, 1);
79
- --color-mint-450: rgba(36, 219, 177, 1);
80
- --color-mint-500: rgba(9, 215, 167, 1);
81
- --color-mint-550: rgba(8, 191, 148, 1);
82
- --color-mint-600: rgba(7, 167, 130, 1);
83
- --color-mint-650: rgba(6, 143, 111, 1);
84
- --color-mint-700: rgba(5, 119, 93, 1);
85
- --color-mint-750: rgba(4, 96, 74, 1);
86
- --color-mint-800: rgba(3, 72, 56, 1);
87
- --color-mint-850: rgba(2, 48, 37, 1);
88
- --color-mint-900: rgba(1, 24, 19, 1);
89
- --color-green-50: rgba(251, 254, 252, 1);
90
- --color-green-100: rgba(229, 248, 237, 1);
91
- --color-green-150: rgba(203, 242, 220, 1);
92
- --color-green-200: rgba(177, 235, 202, 1);
93
- --color-green-250: rgba(151, 229, 184, 1);
94
- --color-green-300: rgba(126, 222, 167, 1);
95
- --color-green-350: rgba(100, 216, 149, 1);
96
- --color-green-400: rgba(74, 209, 131, 1);
97
- --color-green-450: rgba(48, 203, 114, 1);
98
- --color-green-500: rgba(22, 196, 96, 1);
99
- --color-green-550: rgba(20, 174, 85, 1);
100
- --color-green-600: rgba(17, 152, 75, 1);
101
- --color-green-650: rgba(15, 131, 64, 1);
102
- --color-green-700: rgba(12, 109, 53, 1);
103
- --color-green-750: rgba(10, 87, 43, 1);
104
- --color-green-800: rgba(7, 65, 32, 1);
105
- --color-green-850: rgba(5, 44, 21, 1);
106
- --color-green-900: rgba(2, 22, 11, 1);
107
- --color-salad-50: rgba(252, 254, 250, 1);
108
- --color-salad-100: rgba(242, 252, 232, 1);
109
- --color-salad-150: rgba(228, 248, 208, 1);
110
- --color-salad-200: rgba(215, 245, 185, 1);
111
- --color-salad-250: rgba(202, 242, 162, 1);
112
- --color-salad-300: rgba(188, 238, 138, 1);
113
- --color-salad-350: rgba(175, 235, 115, 1);
114
- --color-salad-400: rgba(162, 232, 92, 1);
115
- --color-salad-450: rgba(148, 228, 68, 1);
116
- --color-salad-500: rgba(135, 225, 45, 1);
117
- --color-salad-550: rgba(120, 200, 40, 1);
118
- --color-salad-600: rgba(105, 175, 35, 1);
119
- --color-salad-650: rgba(90, 150, 30, 1);
120
- --color-salad-700: rgba(75, 125, 25, 1);
121
- --color-salad-750: rgba(60, 100, 20, 1);
122
- --color-salad-800: rgba(45, 75, 15, 1);
123
- --color-salad-850: rgba(30, 50, 10, 1);
124
- --color-salad-900: rgba(15, 25, 5, 1);
125
- --color-red-50: rgba(255, 251, 250, 1);
126
- --color-red-100: rgba(253, 234, 232, 1);
127
- --color-red-150: rgba(250, 213, 209, 1);
128
- --color-red-200: rgba(248, 192, 187, 1);
129
- --color-red-250: rgba(246, 171, 164, 1);
130
- --color-red-300: rgba(243, 149, 141, 1);
131
- --color-red-350: rgba(241, 128, 118, 1);
132
- --color-red-400: rgba(239, 107, 96, 1);
133
- --color-red-450: rgba(236, 86, 73, 1);
134
- --color-red-500: rgba(234, 65, 50, 1);
135
- --color-red-550: rgba(208, 58, 44, 1);
136
- --color-red-600: rgba(182, 51, 39, 1);
137
- --color-red-650: rgba(156, 43, 33, 1);
138
- --color-red-700: rgba(130, 36, 28, 1);
139
- --color-red-750: rgba(104, 29, 22, 1);
140
- --color-red-800: rgba(78, 22, 17, 1);
141
- --color-red-850: rgba(52, 14, 11, 1);
142
- --color-red-900: rgba(26, 7, 6, 1);
143
- --color-violet-50: rgba(251, 250, 255, 1);
144
- --color-violet-100: rgba(240, 235, 255, 1);
145
- --color-violet-150: rgba(225, 215, 255, 1);
146
- --color-violet-200: rgba(210, 195, 255, 1);
147
- --color-violet-250: rgba(195, 175, 255, 1);
148
- --color-violet-300: rgba(181, 156, 255, 1);
149
- --color-violet-350: rgba(166, 136, 255, 1);
150
- --color-violet-400: rgba(151, 116, 255, 1);
151
- --color-violet-450: rgba(136, 96, 255, 1);
152
- --color-violet-500: rgba(121, 76, 255, 1);
153
- --color-violet-550: rgba(108, 68, 227, 1);
154
- --color-violet-600: rgba(94, 59, 198, 1);
155
- --color-violet-650: rgba(81, 51, 170, 1);
156
- --color-violet-700: rgba(67, 42, 142, 1);
157
- --color-violet-750: rgba(54, 34, 113, 1);
158
- --color-violet-800: rgba(40, 25, 85, 1);
159
- --color-violet-850: rgba(27, 17, 57, 1);
160
- --color-violet-900: rgba(13, 8, 28, 1);
161
- --color-pink-50: rgba(254, 250, 254, 1);
162
- --color-pink-100: rgba(252, 231, 251, 1);
163
- --color-pink-150: rgba(250, 207, 246, 1);
164
- --color-pink-200: rgba(247, 183, 242, 1);
165
- --color-pink-250: rgba(244, 159, 237, 1);
166
- --color-pink-300: rgba(242, 135, 233, 1);
167
- --color-pink-350: rgba(239, 111, 228, 1);
168
- --color-pink-400: rgba(236, 87, 224, 1);
169
- --color-pink-450: rgba(234, 63, 219, 1);
170
- --color-pink-500: rgba(231, 39, 215, 1);
171
- --color-pink-550: rgba(205, 35, 191, 1);
172
- --color-pink-600: rgba(180, 30, 167, 1);
173
- --color-pink-650: rgba(154, 26, 143, 1);
174
- --color-pink-700: rgba(128, 22, 119, 1);
175
- --color-pink-750: rgba(103, 17, 96, 1);
176
- --color-pink-800: rgba(77, 13, 72, 1);
177
- --color-pink-850: rgba(51, 9, 48, 1);
178
- --color-pink-900: rgba(26, 4, 24, 1);
179
- --color-yellow-50: rgba(255, 254, 250, 1);
180
- --color-yellow-100: rgba(253, 252, 231, 1);
181
- --color-yellow-150: rgba(251, 248, 208, 1);
182
- --color-yellow-200: rgba(248, 245, 184, 1);
183
- --color-yellow-250: rgba(246, 242, 160, 1);
184
- --color-yellow-300: rgba(244, 238, 137, 1);
185
- --color-yellow-350: rgba(242, 235, 113, 1);
186
- --color-yellow-400: rgba(239, 232, 89, 1);
187
- --color-yellow-450: rgba(237, 228, 66, 1);
188
- --color-yellow-500: rgba(235, 225, 42, 1);
189
- --color-yellow-550: rgba(209, 200, 37, 1);
190
- --color-yellow-600: rgba(183, 175, 33, 1);
191
- --color-yellow-650: rgba(157, 150, 28, 1);
192
- --color-yellow-700: rgba(131, 125, 23, 1);
193
- --color-yellow-750: rgba(104, 100, 19, 1);
194
- --color-yellow-800: rgba(78, 75, 14, 1);
195
- --color-yellow-850: rgba(52, 50, 9, 1);
196
- --color-yellow-900: rgba(26, 25, 5, 1);
197
-
198
- --color-top-3: #3198DD;
199
- --color-top-10: #21936C;
200
- --color-top-30: #1ABC9C;
201
- --color-top-50: #A6E0A3;
202
- --color-top-100: #C7D7D7;
203
- --color-top-10000: #FCC94A;
1
+ :root{
2
+ --color-white: rgba(255, 255, 255, 1);
3
+ --color-black: rgba(0, 0, 0, 1);
4
+ --color-black-transparent-40: rgba(0, 0, 0, 0.4);
5
+ --color-black-transparent-50: rgba(0, 0, 0, 0.5);
6
+ --color-steel-50: rgba(251, 252, 253, 1);
7
+ --color-steel-100: rgba(248, 250, 252, 1);
8
+ --color-steel-150: rgba(241, 244, 249, 1);
9
+ --color-steel-200: rgba(234, 239, 245, 1);
10
+ --color-steel-250: rgba(228, 234, 241, 1);
11
+ --color-steel-300: rgba(221, 228, 238, 1);
12
+ --color-steel-350: rgba(215, 223, 233, 1);
13
+ --color-steel-400: rgba(209, 218, 229, 1);
14
+ --color-steel-450: rgba(204, 213, 225, 1);
15
+ --color-steel-500: rgba(198, 208, 220, 1);
16
+ --color-steel-550: rgba(193, 203, 215, 1);
17
+ --color-gray-50: rgba(225, 229, 234, 1);
18
+ --color-gray-100: rgba(210, 216, 223, 1);
19
+ --color-gray-150: rgba(196, 203, 212, 1);
20
+ --color-gray-200: rgba(182, 190, 201, 1);
21
+ --color-gray-250: rgba(168, 177, 189, 1);
22
+ --color-gray-300: rgba(154, 164, 177, 1);
23
+ --color-gray-350: rgba(141, 151, 165, 1);
24
+ --color-gray-400: rgba(128, 138, 153, 1);
25
+ --color-gray-450: rgba(115, 125, 140, 1);
26
+ --color-gray-500: rgba(104, 113, 125, 1);
27
+ --color-gray-550: rgba(94, 101, 110, 1);
28
+ --color-gray-600: rgba(83, 88, 95, 1);
29
+ --color-gray-650: rgba(72, 76, 81, 1);
30
+ --color-gray-700: rgba(61, 63, 67, 1);
31
+ --color-gray-750: rgba(49, 51, 53, 1);
32
+ --color-gray-800: rgba(37, 38, 39, 1);
33
+ --color-gray-850: rgba(25, 25, 26, 1);
34
+ --color-gray-900: rgba(13, 13, 13, 1);
35
+ --color-blue-50: rgba(250, 252, 255, 1);
36
+ --color-blue-100: rgba(230, 240, 255, 1);
37
+ --color-blue-150: rgba(204, 224, 255, 1);
38
+ --color-blue-200: rgba(179, 210, 255, 1);
39
+ --color-blue-250: rgba(153, 194, 255, 1);
40
+ --color-blue-300: rgba(128, 179, 255, 1);
41
+ --color-blue-350: rgba(102, 163, 255, 1);
42
+ --color-blue-400: rgba(77, 148, 255, 1);
43
+ --color-blue-450: rgba(51, 132, 255, 1);
44
+ --color-blue-500: rgba(25, 117, 255, 1);
45
+ --color-blue-550: rgba(23, 105, 227, 1);
46
+ --color-blue-600: rgba(20, 91, 198, 1);
47
+ --color-blue-650: rgba(17, 78, 170, 1);
48
+ --color-blue-700: rgba(14, 65, 142, 1);
49
+ --color-blue-750: rgba(12, 52, 113, 1);
50
+ --color-blue-800: rgba(9, 40, 85, 1);
51
+ --color-blue-850: rgba(6, 26, 57, 1);
52
+ --color-blue-900: rgba(3, 13, 28, 1);
53
+ --color-orange-50: rgba(255, 253, 250, 1);
54
+ --color-orange-100: rgba(255, 244, 230, 1);
55
+ --color-orange-150: rgba(255, 234, 204, 1);
56
+ --color-orange-200: rgba(255, 223, 178, 1);
57
+ --color-orange-250: rgba(255, 212, 153, 1);
58
+ --color-orange-300: rgba(255, 202, 128, 1);
59
+ --color-orange-350: rgba(255, 191, 102, 1);
60
+ --color-orange-400: rgba(255, 180, 77, 1);
61
+ --color-orange-450: rgba(255, 170, 51, 1);
62
+ --color-orange-500: rgba(255, 159, 25, 1);
63
+ --color-orange-550: rgba(227, 141, 23, 1);
64
+ --color-orange-600: rgba(198, 124, 20, 1);
65
+ --color-orange-650: rgba(170, 106, 17, 1);
66
+ --color-orange-700: rgba(142, 88, 14, 1);
67
+ --color-orange-750: rgba(113, 71, 12, 1);
68
+ --color-orange-800: rgba(85, 53, 9, 1);
69
+ --color-orange-850: rgba(57, 35, 6, 1);
70
+ --color-orange-900: rgba(28, 18, 3, 1);
71
+ --color-mint-50: rgba(251, 254, 253, 1);
72
+ --color-mint-100: rgba(228, 251, 245, 1);
73
+ --color-mint-150: rgba(200, 246, 235, 1);
74
+ --color-mint-200: rgba(173, 242, 226, 1);
75
+ --color-mint-250: rgba(146, 237, 216, 1);
76
+ --color-mint-300: rgba(118, 233, 206, 1);
77
+ --color-mint-350: rgba(91, 228, 196, 1);
78
+ --color-mint-400: rgba(64, 224, 187, 1);
79
+ --color-mint-450: rgba(36, 219, 177, 1);
80
+ --color-mint-500: rgba(9, 215, 167, 1);
81
+ --color-mint-550: rgba(8, 191, 148, 1);
82
+ --color-mint-600: rgba(7, 167, 130, 1);
83
+ --color-mint-650: rgba(6, 143, 111, 1);
84
+ --color-mint-700: rgba(5, 119, 93, 1);
85
+ --color-mint-750: rgba(4, 96, 74, 1);
86
+ --color-mint-800: rgba(3, 72, 56, 1);
87
+ --color-mint-850: rgba(2, 48, 37, 1);
88
+ --color-mint-900: rgba(1, 24, 19, 1);
89
+ --color-green-50: rgba(251, 254, 252, 1);
90
+ --color-green-100: rgba(229, 248, 237, 1);
91
+ --color-green-150: rgba(203, 242, 220, 1);
92
+ --color-green-200: rgba(177, 235, 202, 1);
93
+ --color-green-250: rgba(151, 229, 184, 1);
94
+ --color-green-300: rgba(126, 222, 167, 1);
95
+ --color-green-350: rgba(100, 216, 149, 1);
96
+ --color-green-400: rgba(74, 209, 131, 1);
97
+ --color-green-450: rgba(48, 203, 114, 1);
98
+ --color-green-500: rgba(22, 196, 96, 1);
99
+ --color-green-550: rgba(20, 174, 85, 1);
100
+ --color-green-600: rgba(17, 152, 75, 1);
101
+ --color-green-650: rgba(15, 131, 64, 1);
102
+ --color-green-700: rgba(12, 109, 53, 1);
103
+ --color-green-750: rgba(10, 87, 43, 1);
104
+ --color-green-800: rgba(7, 65, 32, 1);
105
+ --color-green-850: rgba(5, 44, 21, 1);
106
+ --color-green-900: rgba(2, 22, 11, 1);
107
+ --color-salad-50: rgba(252, 254, 250, 1);
108
+ --color-salad-100: rgba(242, 252, 232, 1);
109
+ --color-salad-150: rgba(228, 248, 208, 1);
110
+ --color-salad-200: rgba(215, 245, 185, 1);
111
+ --color-salad-250: rgba(202, 242, 162, 1);
112
+ --color-salad-300: rgba(188, 238, 138, 1);
113
+ --color-salad-350: rgba(175, 235, 115, 1);
114
+ --color-salad-400: rgba(162, 232, 92, 1);
115
+ --color-salad-450: rgba(148, 228, 68, 1);
116
+ --color-salad-500: rgba(135, 225, 45, 1);
117
+ --color-salad-550: rgba(120, 200, 40, 1);
118
+ --color-salad-600: rgba(105, 175, 35, 1);
119
+ --color-salad-650: rgba(90, 150, 30, 1);
120
+ --color-salad-700: rgba(75, 125, 25, 1);
121
+ --color-salad-750: rgba(60, 100, 20, 1);
122
+ --color-salad-800: rgba(45, 75, 15, 1);
123
+ --color-salad-850: rgba(30, 50, 10, 1);
124
+ --color-salad-900: rgba(15, 25, 5, 1);
125
+ --color-red-50: rgba(255, 251, 250, 1);
126
+ --color-red-100: rgba(253, 234, 232, 1);
127
+ --color-red-150: rgba(250, 213, 209, 1);
128
+ --color-red-200: rgba(248, 192, 187, 1);
129
+ --color-red-250: rgba(246, 171, 164, 1);
130
+ --color-red-300: rgba(243, 149, 141, 1);
131
+ --color-red-350: rgba(241, 128, 118, 1);
132
+ --color-red-400: rgba(239, 107, 96, 1);
133
+ --color-red-450: rgba(236, 86, 73, 1);
134
+ --color-red-500: rgba(234, 65, 50, 1);
135
+ --color-red-550: rgba(208, 58, 44, 1);
136
+ --color-red-600: rgba(182, 51, 39, 1);
137
+ --color-red-650: rgba(156, 43, 33, 1);
138
+ --color-red-700: rgba(130, 36, 28, 1);
139
+ --color-red-750: rgba(104, 29, 22, 1);
140
+ --color-red-800: rgba(78, 22, 17, 1);
141
+ --color-red-850: rgba(52, 14, 11, 1);
142
+ --color-red-900: rgba(26, 7, 6, 1);
143
+ --color-violet-50: rgba(251, 250, 255, 1);
144
+ --color-violet-100: rgba(240, 235, 255, 1);
145
+ --color-violet-150: rgba(225, 215, 255, 1);
146
+ --color-violet-200: rgba(210, 195, 255, 1);
147
+ --color-violet-250: rgba(195, 175, 255, 1);
148
+ --color-violet-300: rgba(181, 156, 255, 1);
149
+ --color-violet-350: rgba(166, 136, 255, 1);
150
+ --color-violet-400: rgba(151, 116, 255, 1);
151
+ --color-violet-450: rgba(136, 96, 255, 1);
152
+ --color-violet-500: rgba(121, 76, 255, 1);
153
+ --color-violet-550: rgba(108, 68, 227, 1);
154
+ --color-violet-600: rgba(94, 59, 198, 1);
155
+ --color-violet-650: rgba(81, 51, 170, 1);
156
+ --color-violet-700: rgba(67, 42, 142, 1);
157
+ --color-violet-750: rgba(54, 34, 113, 1);
158
+ --color-violet-800: rgba(40, 25, 85, 1);
159
+ --color-violet-850: rgba(27, 17, 57, 1);
160
+ --color-violet-900: rgba(13, 8, 28, 1);
161
+ --color-pink-50: rgba(254, 250, 254, 1);
162
+ --color-pink-100: rgba(252, 231, 251, 1);
163
+ --color-pink-150: rgba(250, 207, 246, 1);
164
+ --color-pink-200: rgba(247, 183, 242, 1);
165
+ --color-pink-250: rgba(244, 159, 237, 1);
166
+ --color-pink-300: rgba(242, 135, 233, 1);
167
+ --color-pink-350: rgba(239, 111, 228, 1);
168
+ --color-pink-400: rgba(236, 87, 224, 1);
169
+ --color-pink-450: rgba(234, 63, 219, 1);
170
+ --color-pink-500: rgba(231, 39, 215, 1);
171
+ --color-pink-550: rgba(205, 35, 191, 1);
172
+ --color-pink-600: rgba(180, 30, 167, 1);
173
+ --color-pink-650: rgba(154, 26, 143, 1);
174
+ --color-pink-700: rgba(128, 22, 119, 1);
175
+ --color-pink-750: rgba(103, 17, 96, 1);
176
+ --color-pink-800: rgba(77, 13, 72, 1);
177
+ --color-pink-850: rgba(51, 9, 48, 1);
178
+ --color-pink-900: rgba(26, 4, 24, 1);
179
+ --color-yellow-50: rgba(255, 254, 250, 1);
180
+ --color-yellow-100: rgba(253, 252, 231, 1);
181
+ --color-yellow-150: rgba(251, 248, 208, 1);
182
+ --color-yellow-200: rgba(248, 245, 184, 1);
183
+ --color-yellow-250: rgba(246, 242, 160, 1);
184
+ --color-yellow-300: rgba(244, 238, 137, 1);
185
+ --color-yellow-350: rgba(242, 235, 113, 1);
186
+ --color-yellow-400: rgba(239, 232, 89, 1);
187
+ --color-yellow-450: rgba(237, 228, 66, 1);
188
+ --color-yellow-500: rgba(235, 225, 42, 1);
189
+ --color-yellow-550: rgba(209, 200, 37, 1);
190
+ --color-yellow-600: rgba(183, 175, 33, 1);
191
+ --color-yellow-650: rgba(157, 150, 28, 1);
192
+ --color-yellow-700: rgba(131, 125, 23, 1);
193
+ --color-yellow-750: rgba(104, 100, 19, 1);
194
+ --color-yellow-800: rgba(78, 75, 14, 1);
195
+ --color-yellow-850: rgba(52, 50, 9, 1);
196
+ --color-yellow-900: rgba(26, 25, 5, 1);
197
+
198
+ --color-top-3: #3198DD;
199
+ --color-top-10: #21936C;
200
+ --color-top-30: #1ABC9C;
201
+ --color-top-50: #A6E0A3;
202
+ --color-top-100: #C7D7D7;
203
+ --color-top-10000: #FCC94A;
204
204
  }:root {
205
205
  --top-padding-1: 4px;
206
206
  --top-padding-2: 8px;
@@ -341,7 +341,7 @@ select {
341
341
  font-family: inherit;
342
342
  }
343
343
 
344
- :placeholder {
344
+ ::placeholder {
345
345
  color: var(--color-placeholder);
346
346
  }
347
347
 
@@ -392,6 +392,12 @@ select.top-el:not(:disabled):focus {
392
392
  -webkit-appearance: none;
393
393
  }
394
394
 
395
+ .top-forms-option:disabled{
396
+ background: var(--color-theme-50);
397
+ border-color: var(--color-line-1-opacity);
398
+ opacity: 1;
399
+ }
400
+
395
401
  /* input, textarea, select */
396
402
  .top-input_input,
397
403
  textarea.top-el,
@@ -532,6 +538,14 @@ label[data-top-icon][data-top-icon2]:after {
532
538
 
533
539
  [data-top-icon=""]:before {
534
540
  font-family: Topvisor;
541
+ }/* элемент в виде ссылки */
542
+ .top-as-a {
543
+ cursor: pointer;
544
+ color: var(--color-text-link);
545
+ }
546
+
547
+ .top-as-a:hover {
548
+ text-decoration: underline;
535
549
  }.top-ellipsis {
536
550
  max-height: 100%;
537
551
  text-overflow: ellipsis;
package/dark.css CHANGED
@@ -120,9 +120,17 @@
120
120
 
121
121
  /* forms */
122
122
  :root {
123
- --top-forms-border-color: var(--color-line-1-opacity);
124
- --top-forms-border-color-hover: var(--color-line-2-opacity);
125
-
123
+ /* for text */
124
+ --top-forms-color: var(--color-text-1);
125
+ --top-forms-color-disabled: var(--color-text-3);
126
+ /* for border */
127
+ --top-forms-border-color: var(--color-line-3-opacity);
128
+ --top-forms-border-color-hover: var(--color-primary);
129
+ --top-forms-border-color-disabled: var(--color-line-1-opacity);
130
+ /* for placeholder */
131
+ --top-forms-placeholder-color: var(--color-text-3);
132
+ --top-forms-placeholder-color-disabled: var(--color-text-4);
133
+ /* for background */
126
134
  --top-forms-background-color: var(--color-bg-3);
127
135
  --top-forms-background-color-hover: var(--color-bg-3);
128
136
  }
package/forms/forms.amd.js CHANGED
@@ -1,4 +1,4 @@
1
- define(["exports", "../.chunks/forms-512abfa7.amd", "vue"], function(exports, forms, vue) {
1
+ define(["exports", "../.chunks/forms-2abb7eaa.amd", "vue"], function(exports, forms, vue) {
2
2
  "use strict"; vue = vue ?? Vue;
3
3
  exports.Button = forms.button;
4
4
  exports.Checkbox = forms.checkbox;
package/forms/forms.js CHANGED
@@ -1,4 +1,4 @@
1
- import { b, c, C, i, r, s } from "../.chunks/forms-1b3f76e9.es.js";
1
+ import { b, c, C, i, r, s } from "../.chunks/forms-5e17154c.es.js";
2
2
  import "vue";
3
3
  export {
4
4
  b as Button,
package/forms.css CHANGED
@@ -228,9 +228,16 @@ a.top-button:hover {
228
228
  --top-forms-base-height: var(--top-forms-base-height_xl);
229
229
  }
230
230
 
231
+ .top-forms-optionLabel {
232
+ flex-grow: 1;
233
+ }
231
234
  .top-forms-optionLabel_title {
232
235
  min-height: var(--top-forms-option-height);
233
- display: flex; align-items: center;
236
+ display: flex;
237
+ align-items: center;
238
+ }
239
+ .top-forms-optionLabel_title-disabled {
240
+ color: var(--color-text-3);
234
241
  }
235
242
  .top-forms-optionLabel_description {
236
243
  color: var(--color-text-3);
package/helpers/helpers.amd.js CHANGED
@@ -1,4 +1,4 @@
1
- define(["exports", "../.chunks/forms-512abfa7.amd", "vue"], function(exports, forms, vue) {
1
+ define(["exports", "../.chunks/forms-2abb7eaa.amd", "vue"], function(exports, forms, vue) {
2
2
  "use strict"; vue = vue ?? Vue;
3
3
  exports.SIZE = forms.SIZE;
4
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
package/helpers/helpers.js CHANGED
@@ -1,4 +1,4 @@
1
- import { S } from "../.chunks/forms-1b3f76e9.es.js";
1
+ import { S } from "../.chunks/forms-5e17154c.es.js";
2
2
  import "vue";
3
3
  export {
4
4
  S as SIZE
package/light.css CHANGED
@@ -120,9 +120,17 @@
120
120
 
121
121
  /* forms */
122
122
  :root {
123
- --top-forms-border-color: var(--color-line-1-opacity);
124
- --top-forms-border-color-hover: var(--color-line-2-opacity);
125
-
123
+ /* for text */
124
+ --top-forms-color: var(--color-text-1);
125
+ --top-forms-color-disabled: var(--color-text-3);
126
+ /* for border */
127
+ --top-forms-border-color: var(--color-line-3-opacity);
128
+ --top-forms-border-color-hover: var(--color-primary);
129
+ --top-forms-border-color-disabled: var(--color-line-1-opacity);
130
+ /* for placeholder */
131
+ --top-forms-placeholder-color: var(--color-text-3);
132
+ --top-forms-placeholder-color-disabled: var(--color-text-4);
133
+ /* for background */
126
134
  --top-forms-background-color: var(--color-bg-3);
127
135
  --top-forms-background-color-hover: var(--color-bg-3);
128
136
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@topvisor/ui",
3
3
  "private": false,
4
- "version": "0.0.14",
4
+ "version": "0.0.15",
5
5
  "type": "module",
6
6
  "description": "Topvisor UI-kit Vue",
7
7
  "author": "Topvisor",
@@ -14,6 +14,6 @@
14
14
  ],
15
15
  "license": "MIT",
16
16
  "peerDependencies": {
17
- "vue": "^3.0.0"
17
+ "vue": "^3.3.4"
18
18
  }
19
19
  }
package/.chunks/forms-1b3f76e9.es.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"forms-1b3f76e9.es.js","sources":["../../src/components/forms/helpers.ts","../../src/components/forms/button/button.ts","../../src/components/forms/button/button.vue","../../src/components/forms/input/input.ts","../../src/components/forms/input/input.vue"],"sourcesContent":["/**\r\n * Размеры\r\n */\r\nexport enum SIZE {\r\n\tS = 's',\r\n\tL = 'l',\r\n\tXL = 'xl',\r\n}","import type { VNode } from 'vue';\nimport { SIZE } from '@/components/forms/helpers';\n\n/**\n * Определение параметров\n */\nexport interface Props {\n\tcolor?: COLOR\n\tstyling?: STYLING // bug: name = style init with object type\n\tsize?: SIZE\n\n\tname?: string\n\ttitle?: string\n\ticon?: string\n\ticon2?: string\n\n\thref?: string // если установлена ссылка, isSubmit не может быть true\n\t// value?: string\n\n\tdisabled?: boolean\n\tisSubmit?: boolean\n\tisActive?: boolean\n\tisProgress?: boolean\n}\n\n/**\n * Определение слотов\n */\nexport interface Slots {\n\t/**\n\t * Cлот с проивзольным содержимым\n\t */\n\tdefault(): VNode[];\n}\n\n/**\n * Определение событий\n */\nexport interface Emits { }\n\n/**\n * Цвета\n */\nexport enum COLOR {\n\tTheme = 'theme',\n\tBlue = 'blue',\n\tGreen = 'green',\n\tOrange = 'orange',\n\tRed = 'red',\n\tPink = 'pink',\n}\n\n/**\n * Стили\n */\nexport enum STYLING {\n\tRegular = '',\n\tOutline = 'outline',\n\tSoft = 'soft',\n\tTransparent = 'transparent',\n}\n\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props } from './button';\r\nimport { COLOR, STYLING, SIZE } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: COLOR.Blue,\r\n\tstyling: STYLING.Regular,\r\n\tsize: SIZE.S,\r\n});\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: isActive,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t['top-button']: true,\r\n\t\t\t['top-button-progress']: isProgress,\r\n\t\t\t[`top-size_${size}`]: !!size,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t\t[`top-style_${styling}`]: !!styling,\r\n\t\t}\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:data-top-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<slot>{{ !icon ? \"Button\" : \"\" }}</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n</style>","import type { VNode } from 'vue';\r\nimport { SIZE } from '@/components/forms/helpers';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tmodelValue?: string\r\n\r\n\tname?: string\r\n\tdisabled?: boolean\r\n\treadonly?: boolean\r\n\r\n\ttitle?: string\r\n\tcaptionType?: CAPTION_TYPE\r\n\r\n\tsize?: SIZE\r\n\ticon?: string\r\n\taddCleaner?: boolean\r\n\tisError?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n\tbtn(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits {\r\n\t(e: 'update:modelValue', value?: string): void\r\n}\r\n\r\n/**\r\n * Типы заголовка\r\n */\r\nexport enum CAPTION_TYPE {\r\n\tNONE = '',\r\n\tSLIDE = 'slide',\r\n\tTOP = 'top',\r\n}\r\n\r\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './input';\r\nimport { SIZE, CAPTION_TYPE } from './input';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: SIZE.S,\r\n\tcaptionType: CAPTION_TYPE.NONE,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst value = computed({\r\n\tget() {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset(value) {\r\n\t\temit('update:modelValue', value);\r\n\t}\r\n});\r\n\r\nconst placeholder = computed(() => {\r\n\tif (props.addCleaner && !props.title) return '';\r\n\tif (props.captionType !== CAPTION_TYPE.NONE) return '';\r\n\r\n\treturn props.title;\r\n});\r\n\r\nconst clean = () => {\r\n\temit('update:modelValue', '');\r\n}\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-input']: true,\r\n\t\t\t['top-input-' + name]: name,\r\n\t\t\t['top-size_' + size]: true,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-input-withCleaner']: addCleaner,\r\n\t\t\t['top-formsCaptionWrapper']: captionType !== CAPTION_TYPE.NONE,\r\n\t\t\t['top-formsCaptionWrapper-always']: captionType === CAPTION_TYPE.TOP,\r\n\t\t\t['top-input-withButton']: !!$slots.btn,\r\n\t\t}\"\r\n\t\t:data-top-icon=\"icon\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-input_input']: true,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"value\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\r\n\t\t>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"addCleaner && value\"\r\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t@click=\"clean\"\r\n\t\t></span>\r\n\r\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\r\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\r\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\r\n\t\t<slot\r\n\t\t\tv-if=\"value\"\r\n\t\t\tname=\"btn\"\r\n\t\t/>\r\n\r\n\t\t<slot></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"captionType !== CAPTION_TYPE.NONE\"\r\n\t\t\tclass=\"top-formsCaption\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</span>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-input {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-input_input {\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-input_input:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-input_input:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n\t--top-forms_clear-width: 24px;\r\n}\r\n\r\n/* TODO: перенести в inputsRange */\r\n.top-input_input {\r\n\twidth: 50%;\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-input[data-top-icon]:before {\r\n\t--top-icon-color: var(--color-text-secondary);\r\n}\r\n</style>"],"names":["SIZE","COLOR","STYLING","CAPTION_TYPE","value"],"mappings":";AAGY,IAAA,yBAAAA,UAAL;AACNA,QAAA,GAAI,IAAA;AACJA,QAAA,GAAI,IAAA;AACJA,QAAA,IAAK,IAAA;AAHMA,SAAAA;AAAA,GAAA,QAAA,CAAA,CAAA;ACwCA,IAAA,0BAAAC,WAAL;AACNA,SAAA,OAAQ,IAAA;AACRA,SAAA,MAAO,IAAA;AACPA,SAAA,OAAQ,IAAA;AACRA,SAAA,QAAS,IAAA;AACTA,SAAA,KAAM,IAAA;AACNA,SAAA,MAAO,IAAA;AANIA,SAAAA;AAAA,GAAA,SAAA,CAAA,CAAA;AAYA,IAAA,4BAAAC,aAAL;AACNA,WAAA,SAAU,IAAA;AACVA,WAAA,SAAU,IAAA;AACVA,WAAA,MAAO,IAAA;AACPA,WAAA,aAAc,IAAA;AAJHA,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AC5CZ,UAAM,UAAU,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,UAAM,OAAO,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8BrD,IAAA,iCAAAC,kBAAL;AACNA,gBAAA,MAAO,IAAA;AACPA,gBAAA,OAAQ,IAAA;AACRA,gBAAA,KAAM,IAAA;AAHKA,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AC/BZ,UAAM,QAAQ,SAAS;AAAA,MACtB,MAAM;AACL,eAAO,MAAM;AAAA,MACd;AAAA,MACA,IAAIC,QAAO;AACV,aAAK,qBAAqBA,MAAK;AAAA,MAChC;AAAA,IAAA,CACA;AAEK,UAAA,cAAc,SAAS,MAAM;AAC9B,UAAA,MAAM,cAAc,CAAC,MAAM;AAAc,eAAA;AACzC,UAAA,MAAM,gBAAgB,aAAa;AAAa,eAAA;AAEpD,aAAO,MAAM;AAAA,IAAA,CACb;AAED,UAAM,QAAQ,MAAM;AACnB,WAAK,qBAAqB,EAAE;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/.chunks/forms-512abfa7.amd.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"forms-512abfa7.amd.js","sources":["../../src/components/forms/helpers.ts","../../src/components/forms/button/button.ts","../../src/components/forms/button/button.vue","../../src/components/forms/input/input.ts","../../src/components/forms/input/input.vue"],"sourcesContent":["/**\r\n * Размеры\r\n */\r\nexport enum SIZE {\r\n\tS = 's',\r\n\tL = 'l',\r\n\tXL = 'xl',\r\n}","import type { VNode } from 'vue';\nimport { SIZE } from '@/components/forms/helpers';\n\n/**\n * Определение параметров\n */\nexport interface Props {\n\tcolor?: COLOR\n\tstyling?: STYLING // bug: name = style init with object type\n\tsize?: SIZE\n\n\tname?: string\n\ttitle?: string\n\ticon?: string\n\ticon2?: string\n\n\thref?: string // если установлена ссылка, isSubmit не может быть true\n\t// value?: string\n\n\tdisabled?: boolean\n\tisSubmit?: boolean\n\tisActive?: boolean\n\tisProgress?: boolean\n}\n\n/**\n * Определение слотов\n */\nexport interface Slots {\n\t/**\n\t * Cлот с проивзольным содержимым\n\t */\n\tdefault(): VNode[];\n}\n\n/**\n * Определение событий\n */\nexport interface Emits { }\n\n/**\n * Цвета\n */\nexport enum COLOR {\n\tTheme = 'theme',\n\tBlue = 'blue',\n\tGreen = 'green',\n\tOrange = 'orange',\n\tRed = 'red',\n\tPink = 'pink',\n}\n\n/**\n * Стили\n */\nexport enum STYLING {\n\tRegular = '',\n\tOutline = 'outline',\n\tSoft = 'soft',\n\tTransparent = 'transparent',\n}\n\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props } from './button';\r\nimport { COLOR, STYLING, SIZE } from './button';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: COLOR.Blue,\r\n\tstyling: STYLING.Regular,\r\n\tsize: SIZE.S,\r\n});\r\n\r\nconst tagName = computed(() => props.href ? 'a' : 'button');\r\n\r\nconst type = computed(() => props.isSubmit ? 'submit' : undefined);\r\n</script>\r\n\r\n<template>\r\n\t<component\r\n\t\t:is=\"tagName\"\r\n\t\t:class=\"{\r\n\t\t\t['top-active']: isActive,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t['top-button']: true,\r\n\t\t\t['top-button-progress']: isProgress,\r\n\t\t\t[`top-size_${size}`]: !!size,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t\t[`top-style_${styling}`]: !!styling,\r\n\t\t}\"\r\n\t\t:name=\"name\"\r\n\t\t:title=\"title\"\r\n\t\t:href=\"href\"\r\n\t\t:type=\"type\"\r\n\t\t:data-top-icon=\"icon || undefined\"\r\n\t\t:data-top-icon2=\"icon2 || undefined\"\r\n\t\t:disabled=\"disabled || undefined\"\r\n\t\t:inProgress=\"isProgress\"\r\n\t>\r\n\t\t<slot>{{ !icon ? \"Button\" : \"\" }}</slot>\r\n\t</component>\r\n</template>\r\n\r\n<style module>\r\n@import \"./style/button.css\";\r\n@import \"./style/style-outline.css\";\r\n@import \"./style/style-soft.css\";\r\n@import \"./style/style-transparent.css\";\r\n\r\n.top-button {\r\n\t--top-button-color: var(--color-white);\r\n\t--top-button-background-color: transparent;\r\n\t--top-button-background-color-hover: var(--top-button-background-color);\r\n\t--top-button-background-color-active: var(--top-button-background-color-hover);\r\n\t--top-button-background-color-selected: var(--top-button-background-color-hover);\r\n\t--top-button-box-shadow: none;\r\n\t--top-button-box-shadow-hover: var(--top-shadow-darken-2);\r\n\t--top-button-box-shadow-active: var(--top-shadow-darken-3);\r\n\t--top-button-box-shadow-selected: var(--top-shadow-darken-3);\r\n\t--top-forms-border-width: 0px;\r\n\t--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));\r\n\t--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));\r\n}\r\n\r\n.top-button.top-size_l {\r\n\t--top-forms-padding: var(--top-forms-padding_l);\r\n\t--top-forms-base-height: var(--top-forms-base-height_l);\r\n}\r\n\r\n.top-button.top-size_xl {\r\n\t--top-forms-padding: var(--top-forms-padding_xl);\r\n\t--top-forms-base-height: var(--top-forms-base-height_xl);\r\n}\r\n</style>","import type { VNode } from 'vue';\r\nimport { SIZE } from '@/components/forms/helpers';\r\n\r\n/**\r\n * Определение параметров\r\n */\r\nexport interface Props {\r\n\tmodelValue?: string\r\n\r\n\tname?: string\r\n\tdisabled?: boolean\r\n\treadonly?: boolean\r\n\r\n\ttitle?: string\r\n\tcaptionType?: CAPTION_TYPE\r\n\r\n\tsize?: SIZE\r\n\ticon?: string\r\n\taddCleaner?: boolean\r\n\tisError?: boolean\r\n}\r\n\r\n/**\r\n * Определение слотов\r\n */\r\nexport interface Slots {\r\n\t/**\r\n\t * Cлот с проивзольным содержимым\r\n\t */\r\n\tdefault(): VNode[];\r\n\tbtn(): VNode[];\r\n}\r\n\r\n/**\r\n * Определение событий\r\n */\r\nexport interface Emits {\r\n\t(e: 'update:modelValue', value?: string): void\r\n}\r\n\r\n/**\r\n * Типы заголовка\r\n */\r\nexport enum CAPTION_TYPE {\r\n\tNONE = '',\r\n\tSLIDE = 'slide',\r\n\tTOP = 'top',\r\n}\r\n\r\nexport { SIZE };","<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport type { Props, Emits } from './input';\r\nimport { SIZE, CAPTION_TYPE } from './input';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tsize: SIZE.S,\r\n\tcaptionType: CAPTION_TYPE.NONE,\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst value = computed({\r\n\tget() {\r\n\t\treturn props.modelValue;\r\n\t},\r\n\tset(value) {\r\n\t\temit('update:modelValue', value);\r\n\t}\r\n});\r\n\r\nconst placeholder = computed(() => {\r\n\tif (props.addCleaner && !props.title) return '';\r\n\tif (props.captionType !== CAPTION_TYPE.NONE) return '';\r\n\r\n\treturn props.title;\r\n});\r\n\r\nconst clean = () => {\r\n\temit('update:modelValue', '');\r\n}\r\n</script>\r\n\r\n<template>\r\n\t<label\r\n\t\t:class=\"{\r\n\t\t\t['top-input']: true,\r\n\t\t\t['top-input-' + name]: name,\r\n\t\t\t['top-size_' + size]: true,\r\n\t\t\t['top-disabled']: disabled,\r\n\t\t\t['top-input-withCleaner']: addCleaner,\r\n\t\t\t['top-formsCaptionWrapper']: captionType !== CAPTION_TYPE.NONE,\r\n\t\t\t['top-formsCaptionWrapper-always']: captionType === CAPTION_TYPE.TOP,\r\n\t\t\t['top-input-withButton']: !!$slots.btn,\r\n\t\t}\"\r\n\t\t:data-top-icon=\"icon\"\r\n\t>\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\t:class=\"{\r\n\t\t\t\t['top-forms-focusable']: !disabled,\r\n\t\t\t\t['top-input_input']: true,\r\n\t\t\t\t['top-error']: isError,\r\n\t\t\t}\"\r\n\t\t\tautocomplete=\"off_always\"\r\n\t\t\t:name=\"name\"\r\n\t\t\tv-model=\"value\"\r\n\t\t\t:title=\"title\"\r\n\t\t\t:placeholder=\"placeholder\"\r\n\t\t\t:disabled=\"disabled\"\r\n\t\t\t:readonly=\"readonly\"\r\n\t\t\t@keydown.esc=\"() => (addCleaner || !!$slots.btn) && clean()\"\r\n\t\t>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"addCleaner && value\"\r\n\t\t\tclass=\"top-input_cleaner top-cleaner\"\r\n\t\t\tdata-top-icon=\"\"\r\n\t\t\t@click=\"clean\"\r\n\t\t></span>\r\n\r\n\t\t<!-- TODO: кнопка должна отоборажаться только при изменении value -->\r\n\t\t<!-- TODO: до нажатия на кнопку, изменеине не должно применяться -->\r\n\t\t<!-- TODO: при отмене состояние должно возвращаться к первоначальному -->\r\n\t\t<slot\r\n\t\t\tv-if=\"value\"\r\n\t\t\tname=\"btn\"\r\n\t\t/>\r\n\r\n\t\t<slot></slot>\r\n\r\n\t\t<span\r\n\t\t\tv-if=\"captionType !== CAPTION_TYPE.NONE\"\r\n\t\t\tclass=\"top-formsCaption\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</span>\r\n\t</label>\r\n</template>\r\n\r\n<style module>\r\n.top-input {\r\n\twidth: 180px;\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\tgap: var(--top-gap-1);\r\n}\r\n\r\n.top-input_input {\r\n\tbackground: var(--top-forms-background-color);\r\n}\r\n\r\n.top-input_input:hover {\r\n\tbackground: var(--top-forms-background-color-hover);\r\n}\r\n\r\n.top-input_input:focus {\r\n\toutline-color: var(--color-theme-75);\r\n\toutline-offset: 0px;\r\n}\r\n\r\n.top-input-withCleaner .top-input_input:not(:placeholder-shown) {\r\n\t--top-forms_clear-width: 24px;\r\n}\r\n\r\n/* TODO: перенести в inputsRange */\r\n.top-input_input {\r\n\twidth: 50%;\r\n\tflex-grow: 1;\r\n}\r\n\r\n.top-input[data-top-icon]:before {\r\n\t--top-icon-color: var(--color-text-secondary);\r\n}\r\n</style>"],"names":["SIZE","COLOR","STYLING","computed","CAPTION_TYPE","value"],"mappings":";;;;;AAGY,MAAA,yBAAAA,UAAL;AACNA,UAAA,GAAI,IAAA;AACJA,UAAA,GAAI,IAAA;AACJA,UAAA,IAAK,IAAA;AAHMA,WAAAA;AAAAA,EAAA,GAAA,QAAA,CAAA,CAAA;ACwCA,MAAA,0BAAAC,WAAL;AACNA,WAAA,OAAQ,IAAA;AACRA,WAAA,MAAO,IAAA;AACPA,WAAA,OAAQ,IAAA;AACRA,WAAA,QAAS,IAAA;AACTA,WAAA,KAAM,IAAA;AACNA,WAAA,MAAO,IAAA;AANIA,WAAAA;AAAAA,EAAA,GAAA,SAAA,CAAA,CAAA;AAYA,MAAA,4BAAAC,aAAL;AACNA,aAAA,SAAU,IAAA;AACVA,aAAA,SAAU,IAAA;AACVA,aAAA,MAAO,IAAA;AACPA,aAAA,aAAc,IAAA;AAJHA,WAAAA;AAAAA,EAAA,GAAA,WAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;AC5CZ,YAAM,UAAUC,IAAAA,SAAS,MAAM,MAAM,OAAO,MAAM,QAAQ;AAE1D,YAAM,OAAOA,IAAAA,SAAS,MAAM,MAAM,WAAW,WAAW,MAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC8BrD,MAAA,iCAAAC,kBAAL;AACNA,kBAAA,MAAO,IAAA;AACPA,kBAAA,OAAQ,IAAA;AACRA,kBAAA,KAAM,IAAA;AAHKA,WAAAA;AAAAA,EAAA,GAAA,gBAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;AC/BZ,YAAM,QAAQD,IAAAA,SAAS;AAAA,QACtB,MAAM;AACL,iBAAO,MAAM;AAAA,QACd;AAAA,QACA,IAAIE,QAAO;AACV,eAAK,qBAAqBA,MAAK;AAAA,QAChC;AAAA,MAAA,CACA;AAEK,YAAA,cAAcF,IAAAA,SAAS,MAAM;AAC9B,YAAA,MAAM,cAAc,CAAC,MAAM;AAAc,iBAAA;AACzC,YAAA,MAAM,gBAAgB,aAAa;AAAa,iBAAA;AAEpD,eAAO,MAAM;AAAA,MAAA,CACb;AAED,YAAM,QAAQ,MAAM;AACnB,aAAK,qBAAqB,EAAE;AAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}