@topvisor/ui 1.0.13 → 1.0.14-pinia-prepare-2

package/README.md

@@ -1,11 +1,5 @@
 # UI kit Topvisor Vue
 
-## Зависимости
-
-- Vue 3
-- lodash 4:
-  - debounce
-
 ## Vue компоненты
 
 Компоненты поставляются в двух форматах:
@@ -21,13 +15,12 @@
 В этой же папке располагаются стили для асинхронно загружаемых компонентов.
 Все стили грузятся автоматически вместе с загрузкой компонента.
 
-Список доступных библиотек компонентов см. на [npmjs](https://www.npmjs.com/package/@topvisor/ui?activeTab=code).
+Документация и описание всех компонентов: https://ui.topvisor.com/
 
 ## Общие стили UI
 
 - /assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
-- /assets/light.css - светлая тема
-- /assets/dark.css - темная тема
+- /assets/themes/* - стили тем оформления
 
 ## Подключение стилей
 
@@ -50,11 +43,12 @@ import '@topvisor/ui/assets/core.css';
 Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.
 
 ```js
-import '@topvisor/ui/assets/light.css';
+import '@topvisor/ui/assets/themes/light.css';
 ```
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/light.css" rel="stylesheet">
+
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">
 ```
 
 ## Внешние зависимсоти
@@ -66,6 +60,7 @@ import '@topvisor/ui/icomoon/style.css';
 ```
 
 ```html
+
 <link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">
 ```
 
@@ -84,4 +79,4 @@ require(['@topvisor/ui/forms/forms.amd'], Forms => {
 	console.log(Forms);
 	console.log(Button);
 });
-```
+```

package/assets/core.css

@@ -1 +1 @@
-button,input,textarea,select{border:1px solid var(--top-forms-border-color);background:var(--top-forms-background-color);color:var(--color-text-1);font-size:var(--top-font-size);font-family:inherit}::placeholder{color:var(--top-forms-placeholder-color)}[contenteditable][placeholder]:empty:before{content:attr(placeholder);color:var(--color-text-2)}.top-forms-optionWrapper{cursor:pointer;padding:8px 0;color:var(--color-text-1);line-height:1.3;display:inline-flex;align-items:flex-start;gap:4px}.top-forms-option{cursor:pointer;padding:0;margin:3px;display:inline-flex;flex-shrink:0;appearance:none;-webkit-appearance:none}.top-forms-focusable:focus-visible,.top-focus{outline:2px solid var(--color-line-primary-1);outline-offset:2px;position:relative;z-index:1;transition:border-color .15s}.top-forms-focusable:hover,.top-forms-focusable:focus,.top-focus:hover,.top-focus:focus,.top-input:hover>.top-input_input,.top-select:hover>.top-select_select{--top-forms-border-color: var(--top-forms-border-color-hover);--top-forms-background-color: var(--top-forms-background-color-hover)}[contenteditable]:focus-visible,.top-selector-multiselect:focus-within{outline:2px solid var(--color-line-primary-1)}:root{--top-font-size: 14px;--top-forms-radius: 8px;--top-forms-border-width: 1px;--top-style_outline-color: transparent;--top-forms-base-height_xs: 24px;--top-forms-base-height_s: 32px;--top-forms-base-height_m: 36px;--top-forms-base-height_l: 40px;--top-forms-base-height: var(--top-forms-base-height_s);--top-forms-padding_xs: 6px;--top-forms-padding_s: 8px;--top-forms-padding_m: 10px;--top-forms-padding_l: 12px;--top-forms-padding: var(--top-forms-padding_s);--top-forms-option-height: 24px;--top-select_arrow-width: 0px;--top-forms_clear-width: 0px;--top-forms-border-color: var(--color-line-1);--top-forms-border-color-hover: var(--color-line-primary-1);--top-forms-placeholder-color: var(--color-text-3);--top-forms-placeholder-color-active: var(--color-text-2);--top-forms-background-color: var(--color-layout-front-1);--top-forms-background-color-hover: var(--color-layout-front-1)}.top-size_xs{--top-forms-base-height: var(--top-forms-base-height_xs)}.top-size_s{--top-forms-base-height: var(--top-forms-base-height_s)}.top-size_m{--top-forms-base-height: var(--top-forms-base-height_m)}.top-size_l{--top-forms-base-height: var(--top-forms-base-height_l)}.top-input_input,.top-textarea_textarea,.top-editArea_form,.top-select_select{box-sizing:border-box;border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);display:inline-flex;appearance:none;-webkit-appearance:none}.top-select_select{padding-right:calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width))}.top-select{position:relative}.top-select[data-top-icon]:before,.top-select[data-top-icon2]:after{position:absolute;z-index:3}.top-select[data-top-icon][data-top-icon2]:after{left:calc(var(--top-icon-width))}.top-cleaner[data-top-icon]{--top-icon-size: 20px;--top-icon-width: 20px;--top-icon-color: var(--color-text-secondary);cursor:pointer;border-radius:50%;width:30px;height:24px;margin-left:-34px;transform:translate(calc(0px - var(--top-forms-border-width) - var(--top-select_arrow-width)));display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.top-cleaner[data-top-icon]:hover{--top-icon-color: var(--color-text-secondary-2)}.top-as-a{cursor:pointer;color:var(--color-text-primary)}.top-as-a:hover{text-decoration:underline}.top-ellipsis,.top-ellipsis1{max-height:100%;line-height:1.23;text-overflow:ellipsis;overflow:hidden;flex-grow:1}.top-ellipsis1{white-space:nowrap}.top-ellipsis2,.top-ellipsis3{max-width:fit-content;line-height:1.23;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.top-ellipsis3{-webkit-line-clamp:3}.top-hidden{display:none!important}.top-unvisible{width:0;height:0;overflow:hidden;position:absolute;-webkit-appearance:none;appearance:none;border:none}.top-unvisible:focus-visible{outline:none}.top-disabled{pointer-events:none;-webkit-user-select:none;user-select:none}:disabled:not(option):not(optgroup),:disabled~.top-formsCaption,.top-disabled{opacity:.4;filter:grayscale(100%)}.top-input.top-disabled,.top-select.top-disabled{filter:unset}.top-input_input:disabled,.top-textarea_textarea:disabled,.top-select_select:disabled{opacity:1;background-color:var(--color-bg-shading-3);filter:unset}.top-checkbox_input:not(:checked):not(:indeterminate):disabled,.top-radio_input:not(:checked):disabled,.top-checkboxSwitcher_input:disabled{opacity:1;background-color:var(--color-layer-1)}.top-checkboxSwitcher_input:disabled{background-color:var(--color-layer-4)}.top-error,.top-error::placeholder,.top-error:before{--top-forms-border-color: var(--color-line-negative-1);border-color:var(--color-line-negative-1)}.top-error{--top-icon-color: var(--color-text-negative);color:var(--color-text-negative)}.top-error~.top-formsCaption{color:var(--color-text-negative)}.top-warning{--top-icon-color: var(--color-text-warning);color:var(--color-text-warning)}input.top-error,textarea.top-error,select.top-error,.top-editArea_form.top-error{animation:top-error .8s}@keyframes top-error{0%{outline-offset:10px;outline:3px solid transparent}50%{outline:3px solid var(--color-line-negative-1);outline-offset:2px}to{outline:3px solid transparent;outline-offset:2px}}@media only screen and (min-width: 900px){.top-only-mobile{display:none!important}}@media only screen and (max-width: 900px){.top-only-pc{display:none!important}}html:not([lang=ru]) .top-only-ru,html:not([lang=en]) .top-only-en{display:none!important}html[data-is_admin="0"] .top-only-admin{display:none!important}.has_scroll_container{transform:translate(0)}.has_scroll{--scroll-offset-top: 0px;--scroll-padding-top: 0px;--scroll-padding-bottom: 0px;--scroll-height: 0px;--scroll-shadow-height: 15px;--scroll-shadow-color: rgba(0, 0, 0, .1)}.has_scroll:before{pointer-events:none;content:"";background:linear-gradient(180deg,transparent calc(100% - var(--scroll-shadow-height)),var(--scroll-shadow-color));height:calc(var(--scroll-height) - var(--scroll-padding-top) - var(--scroll-padding-bottom));position:fixed;top:calc(var(--scroll-offset-top) + var(--scroll-padding-top));right:0;left:0;z-index:1;display:block}.has_scroll-started:before{background:linear-gradient(180deg,var(--scroll-shadow-color),transparent var(--scroll-shadow-height),transparent calc(100% - var(--scroll-shadow-height)),var(--scroll-shadow-color))}.has_scroll-finished:before{background:linear-gradient(180deg,var(--scroll-shadow-color),transparent var(--scroll-shadow-height))}:root{--color-tag-1: #bdc3c7;--color-tag-2: #FD6052;--color-tag-3: #F48D09;--color-tag-4: #F4D30C;--color-tag-5: #5AACFD;--color-tag-6: #C98AE4;--color-tag-7: #A7DE59;--color-tag-8: #e44097;--color-tag-9: #0354a5;--color-tag-10: #33b8a5;--color-tag-all: #d8dbdd}.top-comment{color:var(--color-text-3);font-size:12px}[data-top-badge]{position:relative;width:0;margin:-3px 16px 0 -16px;display:flex;align-self:flex-start}[data-top-badge]:after{content:attr(data-top-badge);border-radius:4px;padding:2px 3px;background:var(--color-bg-negative-1);color:var(--color-text-white);font-size:12px}:root{--top-formsCaption-offset: 16px}.top-formsCaptionWrapper{padding-top:20px}.top-formsCaption{pointer-events:none;width:calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));padding:0 var(--top-forms-padding);color:var(--top-forms-placeholder-color);white-space:nowrap;text-overflow:ellipsis;transform:translate(var(--top-icon-both-width));position:absolute;overflow:hidden;transition:.1s}.top-error~.top-formsCaption{transition:.1s .1s}.top-formsCaption *{pointer-events:auto}.top-formsCaptionWrapper>input:not([readonly]):focus~.top-formsCaption,.top-formsCaptionWrapper>input:not(:placeholder-shown)~.top-formsCaption,.top-formsCaptionWrapper>textarea:not(:placeholder-shown)~.top-formsCaption,.top-formsCaptionWrapper.top-select>.top-formsCaption,.top-formsCaptionWrapper.top-inputRange>.top-formsCaption,.top-formsCaptionWrapper-always>.top-formsCaption{width:100%;padding:0;color:var(--top-forms-placeholder-color-active);font-size:11px;transform:translateY(calc(-1em - var(--top-formsCaption-offset)));transition:.1s}.ui-tooltip{pointer-events:none;box-shadow:0 6px 18px #0e152f21,0 -2px 6px #0e152f08;border-radius:8px;border:none;background:var(--color-layout-front-1);width:max-content;padding:16px;margin:0 18px;font-size:13px}.ui-tooltip img{margin:12px 0 0}.ui-tooltip ul{margin-left:24px}:root{--top-icon-size: 24px;--top-icon-width: 0px;--top-icon2-size: 24px;--top-icon2-width: 0px;--top-icon-both-width: 0px}[data-top-icon]{--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon-color: inherit}[data-top-icon2]{--top-icon2-width: calc(var(--top-icon2-size) + 8px);--top-icon2-color: inherit}[data-top-icon=""]{--top-icon-width: 0px}[data-top-icon2=""]{--top-icon2-width: 0px}[data-top-icon]:before,[data-top-icon2]:after{pointer-events:none;content:attr(data-top-icon);border-radius:var(--top-forms-radius);width:var(--top-icon-width);color:var(--top-icon-color);font-family:Topvisor-2;font-size:var(--top-icon-size);font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}[data-top-icon2]:after{content:attr(data-top-icon2);width:var(--top-icon2-width);color:var(--top-icon2-color);font-size:var(--top-icon2-size)}[data-top-icon],[data-top-icon2]{--top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width))}[data-top-icon=]:before{font-family:Topvisor}:root{--top-line-heihgt: 1.36;--top-page-width: 1180px;--transition: .2s ease-in-out;--transition-fast: .1s;--transition-normal: .3s;--transition-slow: .5s;--top-padding-1: 4px;--top-padding-2: 8px;--top-padding-3: 12px;--top-padding-4: 16px;--top-padding-5: 20px;--top-padding-6: 24px;--top-padding-7: 28px;--top-padding-8: 32px;--top-padding-9: 36px;--top-padding-10: 40px;--top-padding-11: 44px;--top-padding-12: 48px;--top-gap-1: 4px;--top-gap-2: 8px;--top-gap-3: 12px;--top-gap-4: 16px;--top-gap-5: 20px;--top-gap-6: 24px;--top-gap-7: 28px;--top-gap-8: 32px;--top-gap-9: 36px;--top-gap-10: 40px;--top-gap-11: 44px;--top-gap-12: 48px;--top-radius-1: 4px;--top-radius-2: 8px;--top-radius-3: 12px;--top-radius-4: 16px;--top-radius-5: 20px;--top-radius-6: 24px;--top-radius-7: 28px;--top-radius-8: 32px;--top-radius-9: 36px;--top-radius-10: 40px;--top-radius-11: 44px;--top-radius-12: 48px;--padding-default: var(--top-padding-4)}@media only screen and (max-width: 900px){:root{--padding-default: var(--top-padding-3)}}.ui-widget-content{background:var(--color-layout-front-1);color:var(--color-text-1)}.top-select_arrow{--top-select_arrow-size: 12px;--top-select_arrow-width: 24px;background-image:url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");background-size:14px;background-position:calc(100% - var(--top-forms-padding)) 50%;background-repeat:no-repeat;padding-right:32px}.top-select_arrow~.top-cleaner{--top-select_arrow-width: 24px}
+button,input,textarea,select{border:1px solid var(--top-forms-border-color);background:var(--top-forms-background-color);color:var(--color-text-1);font-size:var(--top-font-size);font-family:inherit}::placeholder{color:var(--top-forms-placeholder-color)}[contenteditable][placeholder]:empty:before{content:attr(placeholder);color:var(--color-text-2)}.top-forms-optionWrapper{cursor:pointer;padding:8px 0;color:var(--color-text-1);line-height:1.3;display:inline-flex;align-items:flex-start;gap:4px}.top-forms-option{cursor:pointer;padding:0;margin:3px;display:inline-flex;flex-shrink:0;appearance:none;-webkit-appearance:none}.top-forms-focusable:focus-visible,.top-focus{outline:2px solid var(--color-line-primary-1);outline-offset:2px;position:relative;z-index:1;transition:border-color .15s}.top-forms-focusable:hover,.top-forms-focusable:focus,.top-focus:hover,.top-focus:focus,.top-input:hover>.top-input_input,.top-select:hover>.top-select_select{--top-forms-border-color: var(--top-forms-border-color-hover);--top-forms-background-color: var(--top-forms-background-color-hover)}[contenteditable]:focus-visible,.top-selector-multiselect:focus-within{outline:2px solid var(--color-line-primary-1)}:root{--top-font-size: 14px;--top-forms-radius: 8px;--top-forms-border-width: 1px;--top-style_outline-color: transparent;--top-forms-base-height_xs: 24px;--top-forms-base-height_s: 32px;--top-forms-base-height_m: 36px;--top-forms-base-height_l: 40px;--top-forms-base-height: var(--top-forms-base-height_s);--top-forms-padding_xs: 6px;--top-forms-padding_s: 8px;--top-forms-padding_m: 10px;--top-forms-padding_l: 12px;--top-forms-padding: var(--top-forms-padding_s);--top-forms-option-height: 24px;--top-select_arrow-width: 0px;--top-forms_clear-width: 0px;--top-forms-border-color: var(--color-line-1);--top-forms-border-color-hover: var(--color-line-primary-1);--top-forms-placeholder-color: var(--color-text-3);--top-forms-placeholder-color-active: var(--color-text-2);--top-forms-background-color: var(--color-layout-front-1);--top-forms-background-color-hover: var(--color-layout-front-1)}.top-size_xs{--top-forms-base-height: var(--top-forms-base-height_xs)}.top-size_s{--top-forms-base-height: var(--top-forms-base-height_s)}.top-size_m{--top-forms-base-height: var(--top-forms-base-height_m)}.top-size_l{--top-forms-base-height: var(--top-forms-base-height_l)}.top-input_input,.top-textarea_textarea,.top-editArea_form,.top-select_select{box-sizing:border-box;border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);display:inline-flex;appearance:none;-webkit-appearance:none}.top-select_select{padding-right:calc(var(--top-forms-padding) + var(--top-forms_clear-width) + var(--top-select_arrow-width))}.top-select{position:relative}.top-select[data-top-icon]:before,.top-select[data-top-icon2]:after{position:absolute;z-index:3}.top-select[data-top-icon][data-top-icon2]:after{left:calc(var(--top-icon-width))}.top-cleaner[data-top-icon]{--top-icon-size: 20px;--top-icon-width: 20px;--top-icon-color: var(--color-text-secondary);cursor:pointer;border-radius:50%;width:30px;height:24px;margin-left:-34px;transform:translate(calc(0px - var(--top-forms-border-width) - var(--top-select_arrow-width)));display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.top-cleaner[data-top-icon]:hover{--top-icon-color: var(--color-text-secondary-2)}.top-as-a{cursor:pointer;color:var(--color-text-primary)}.top-as-a:hover{text-decoration:underline}.top-ellipsis,.top-ellipsis1{max-height:100%;line-height:1.23;text-overflow:ellipsis;overflow:hidden;flex-grow:1}.top-ellipsis1{white-space:nowrap}.top-ellipsis2,.top-ellipsis3{max-width:fit-content;line-height:1.23;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.top-ellipsis3{-webkit-line-clamp:3}.top-hidden{display:none!important}.top-unvisible{width:0;height:0;overflow:hidden;position:absolute;-webkit-appearance:none;appearance:none;border:none}.top-unvisible:focus-visible{outline:none}.top-disabled{pointer-events:none;-webkit-user-select:none;user-select:none}:disabled:not(option):not(optgroup),:disabled~.top-formsCaption,.top-disabled{opacity:.4;filter:grayscale(100%)}.top-input.top-disabled,.top-select.top-disabled{filter:unset}.top-input_input:disabled,.top-textarea_textarea:disabled,.top-select_select:disabled{opacity:1;background-color:var(--color-bg-shading-3);filter:unset}.top-checkbox_input:not(:checked):not(:indeterminate):disabled,.top-radio_input:not(:checked):disabled,.top-checkboxSwitcher_input:disabled{opacity:1;background-color:var(--color-layer-1)}.top-checkboxSwitcher_input:disabled{background-color:var(--color-layer-4)}.top-error,.top-error::placeholder,.top-error:before{--top-forms-border-color: var(--color-line-negative-1);border-color:var(--color-line-negative-1)}.top-error{--top-icon-color: var(--color-text-negative);color:var(--color-text-negative)}input.top-error:focus,select.top-error:focus{outline-color:var(--color-line-negative-1);border-color:var(--color-line-negative-1)}.top-error~.top-formsCaption{color:var(--color-text-negative)}.top-warning{--top-icon-color: var(--color-text-warning);color:var(--color-text-warning)}input.top-error,textarea.top-error,select.top-error,.top-editArea_form.top-error{animation:top-error .8s}@keyframes top-error{0%{outline-offset:10px;outline:3px solid transparent}50%{outline:3px solid var(--color-line-negative-1);outline-offset:2px}to{outline:3px solid transparent;outline-offset:2px}}@media only screen and (min-width: 900px){.top-only-mobile{display:none!important}}@media only screen and (max-width: 900px){.top-only-pc{display:none!important}}html:not([lang=ru]) .top-only-ru,html:not([lang=en]) .top-only-en{display:none!important}html[data-is_admin="0"] .top-only-admin{display:none!important}.has_scroll_container{transform:translate(0)}.has_scroll{--scroll-offset-top: 0px;--scroll-padding-top: 0px;--scroll-padding-bottom: 0px;--scroll-height: 0px;--scroll-shadow-height: 15px;--scroll-shadow-color: rgba(0, 0, 0, .1)}.has_scroll:before{pointer-events:none;content:"";background:linear-gradient(180deg,transparent calc(100% - var(--scroll-shadow-height)),var(--scroll-shadow-color));height:calc(var(--scroll-height) - var(--scroll-padding-top) - var(--scroll-padding-bottom));position:fixed;top:calc(var(--scroll-offset-top) + var(--scroll-padding-top));right:0;left:0;z-index:1;display:block}.has_scroll-started:before{background:linear-gradient(180deg,var(--scroll-shadow-color),transparent var(--scroll-shadow-height),transparent calc(100% - var(--scroll-shadow-height)),var(--scroll-shadow-color))}.has_scroll-finished:before{background:linear-gradient(180deg,var(--scroll-shadow-color),transparent var(--scroll-shadow-height))}:root{--color-tag-1: #bdc3c7;--color-tag-2: #FD6052;--color-tag-3: #F48D09;--color-tag-4: #F4D30C;--color-tag-5: #5AACFD;--color-tag-6: #C98AE4;--color-tag-7: #A7DE59;--color-tag-8: #e44097;--color-tag-9: #0354a5;--color-tag-10: #33b8a5;--color-tag-all: #d8dbdd}.top-comment{color:var(--color-text-3);font-size:12px}[data-top-badge]{position:relative;width:0;margin:-3px 16px 0 -16px;display:flex;align-self:flex-start}[data-top-badge]:after{content:attr(data-top-badge);border-radius:4px;padding:2px 3px;background:var(--color-bg-negative-1);color:var(--color-text-white);font-size:12px}:root{--top-formsCaption-offset: 16px}.top-formsCaptionWrapper{padding-top:20px}.top-formsCaption{pointer-events:none;width:calc(100% - var(--top-forms-padding) - var(--top-icon-both-width) - var(--top-forms_clear-width) - var(--top-select_arrow-width));padding:0 var(--top-forms-padding);color:var(--top-forms-placeholder-color);white-space:nowrap;text-overflow:ellipsis;transform:translate(var(--top-icon-both-width));position:absolute;overflow:hidden;transition:.1s}.top-error~.top-formsCaption{transition:.1s .1s}.top-formsCaption *{pointer-events:auto}.top-formsCaptionWrapper>input:not([readonly]):focus~.top-formsCaption,.top-formsCaptionWrapper>input:not(:placeholder-shown)~.top-formsCaption,.top-formsCaptionWrapper>textarea:not(:placeholder-shown)~.top-formsCaption,.top-formsCaptionWrapper.top-select>.top-formsCaption,.top-formsCaptionWrapper.top-inputRange>.top-formsCaption,.top-formsCaptionWrapper-always>.top-formsCaption{width:100%;padding:0;color:var(--top-forms-placeholder-color-active);font-size:11px;transform:translateY(calc(-1em - var(--top-formsCaption-offset)));transition:.1s}.ui-tooltip{pointer-events:none;box-shadow:0 6px 18px #0e152f21,0 -2px 6px #0e152f08;border-radius:8px;border:none;background:var(--color-layout-front-1);width:max-content;padding:16px;margin:0 18px;font-size:13px}.ui-tooltip img{margin:12px 0 0}.ui-tooltip ul{margin-left:24px}:root{--top-icon-size: 24px;--top-icon-width: 0px;--top-icon2-size: 24px;--top-icon2-width: 0px;--top-icon-both-width: 0px}[data-top-icon]{--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon-color: inherit}[data-top-icon2]{--top-icon2-width: calc(var(--top-icon2-size) + 8px);--top-icon2-color: inherit}[data-top-icon=""]{--top-icon-width: 0px}[data-top-icon2=""]{--top-icon2-width: 0px}[data-top-icon]:before,[data-top-icon2]:after{pointer-events:none;content:attr(data-top-icon);border-radius:var(--top-forms-radius);width:var(--top-icon-width);color:var(--top-icon-color);font-family:Topvisor-2;font-size:var(--top-icon-size);font-weight:400;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}[data-top-icon2]:after{content:attr(data-top-icon2);width:var(--top-icon2-width);color:var(--top-icon2-color);font-size:var(--top-icon2-size)}[data-top-icon],[data-top-icon2]{--top-icon-both-width: calc(var(--top-icon-width) + var(--top-icon2-width))}[data-top-icon=]:before{font-family:Topvisor}:root{--top-line-heihgt: 1.36;--top-page-width: 1180px;--transition: .2s ease-in-out;--transition-fast: .1s;--transition-normal: .3s;--transition-slow: .5s;--top-padding-1: 4px;--top-padding-2: 8px;--top-padding-3: 12px;--top-padding-4: 16px;--top-padding-5: 20px;--top-padding-6: 24px;--top-padding-7: 28px;--top-padding-8: 32px;--top-padding-9: 36px;--top-padding-10: 40px;--top-padding-11: 44px;--top-padding-12: 48px;--top-gap-1: 4px;--top-gap-2: 8px;--top-gap-3: 12px;--top-gap-4: 16px;--top-gap-5: 20px;--top-gap-6: 24px;--top-gap-7: 28px;--top-gap-8: 32px;--top-gap-9: 36px;--top-gap-10: 40px;--top-gap-11: 44px;--top-gap-12: 48px;--top-radius-1: 4px;--top-radius-2: 8px;--top-radius-3: 12px;--top-radius-4: 16px;--top-radius-5: 20px;--top-radius-6: 24px;--top-radius-7: 28px;--top-radius-8: 32px;--top-radius-9: 36px;--top-radius-10: 40px;--top-radius-11: 44px;--top-radius-12: 48px;--padding-default: var(--top-padding-4)}@media only screen and (max-width: 900px){:root{--padding-default: var(--top-padding-3)}}.ui-widget-content{background:var(--color-layout-front-1);color:var(--color-text-1)}.top-select_arrow{--top-select_arrow-size: 12px;--top-select_arrow-width: 24px;background-image:url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");background-size:14px;background-position:calc(100% - var(--top-forms-padding)) 50%;background-repeat:no-repeat;padding-right:32px}.top-select_arrow~.top-cleaner{--top-select_arrow-width: 24px}

package/assets/layout.css

@@ -0,0 +1 @@
+.top-rows{width:100%;display:flex;flex-direction:column}.top-rows-gap_none{gap:0x}.top-rows-gap_xs{gap:var(--top-gap-1)}.top-rows-gap_s{gap:var(--top-gap-2)}.top-rows-gap_m{gap:var(--top-gap-3)}.top-rows-gap_l{gap:var(--top-gap-4)}.top-islandRows_title{padding:6px 0;font-size:20px;font-weight:700}.top-islandRows_rows{border-radius:var(--top-radius-3);background:var(--color-bg-shading-2);padding:var(--top-padding-3)}.top-islandRows_rows .top-rows>.top-input .top-input_input,.top-islandRows_rows .top-rows>.top-textarea .top-textarea_textarea,.top-islandRows_rows .top-rows>.top-select .top-select_select{border:none}.top-islandRows_rows .top-button,.top-islandRows_rows .top-input,.top-islandRows_rows .top-textarea,.top-islandRows_rows .top-select{width:auto;flex-grow:1;display:flex}.top-islandRows_rows .top-forms-optionWrapper{padding:0;flex-grow:1}.top-islandRows_row{border-radius:8px;background:var(--color-layout-front-1);padding:var(--top-padding-3);display:flex;gap:var(--top-gap-2)}.top-islandRows_row:has(>.top-forms-optionWrapper .top-forms-focusable:focus-visible){outline:2px solid var(--color-line-primary-1);outline-offset:2px}.top-islandRows_row>.top-forms-optionWrapper .top-forms-focusable{outline:none}

package/charts/charts.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../.chunks/forms-Dg1N8Jv3.amd","../utils/number.amd","../require/css.amd!../assets/charts.css"],function(L,C,e,M,g){"use strict";if(typeof e>"u")var e=window.Vue;const k=90,y=10,V=["data-top-icon"],B={class:"top-miniChart_chart"},b=["onMouseenter"],E={class:"top-miniChart_data"},_={class:"top-miniChart_dataValue"},w=["innerHTML"],N=e.defineComponent({__name:"miniChart",props:e.mergeModels({title:{},gIcon:{},color:{default:"blue"},dates:{},values:{},activeDates:{},keysForDyn:{},isInvert:{type:Boolean},numberCols:{default:k},additionalHTML:{},modelValue:{},valueSuffix:{},hideChartInMobile:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(m){const o=m,s=e.useModel(m,"modelValue"),i=t=>{let l=u.value;o.isInvert&&(t-=1,l-=1);let n=l>0?Math.round(t/l*(100-y)):0;return o.isInvert?100-n:n+y},p=t=>o.activeDates.includes(t),u=e.computed(()=>Math.max(...o.values)),c=e.computed(()=>o.dates.slice().reverse()),v=e.computed(()=>o.dates.length?o.numberCols-o.dates.length:0),h=()=>{s.value=null},r=(t,l,n)=>{t.target instanceof HTMLElement&&(s.value={elCol:t.target,date:M.dateFormat(l),value:n===null?"--":n+(o.valueSuffix??"")})},a=e.computed(()=>{const t=o.values[o.keysForDyn.start],n=o.values[o.keysForDyn.end]-t;return(n<0?-1:1)*g.percentOfNumber(Math.abs(n))}),d=e.computed(()=>{let t="stay";return o.isInvert?(a.value>0&&(t="down"),a.value<0&&(t="up")):(a.value>0&&(t="up"),a.value<0&&(t="down")),t});return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-miniChart":!0,"top-miniChart_hideChartInMobile":t.hideChartInMobile,[`top-color_${t.color}`]:!0})},[e.createElementVNode("div",{class:"top-miniChart_title top-ellipsis","data-top-icon":t.gIcon},e.toDisplayString(t.title),9,V),e.createElementVNode("div",B,[e.createElementVNode("div",{class:"top-miniChart_chartGrid",onMouseleave:l[1]||(l[1]=n=>h())},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(n,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-miniChart_chartGridCol":!0,"top-active":p(n)}),onMouseenter:z=>r(z,n,t.values[t.values.length-f-1])},[e.createElementVNode("div",{style:e.normalizeStyle("height:"+i(t.values[t.values.length-f-1])+"%")},null,4)],42,b))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,()=>(e.openBlock(),e.createElementBlock("div",{class:"top-miniChart_chartGridCol top-miniChart_chartGridCol-none",onMouseenter:l[0]||(l[0]=n=>h())},l[2]||(l[2]=[e.createElementVNode("div",null,null,-1)]),32))),256))],32)]),e.createElementVNode("div",E,[e.createElementVNode("span",{class:e.normalizeClass({"top-miniChart_dataDynamic":!0,[`top-miniChart_dataDynamic-direction_${d.value}`]:!0})},e.toDisplayString(Math.abs(a.value)||""),3),e.createElementVNode("span",_,e.toDisplayString(e.unref(g.percentOfNumber)(t.values[t.values.length-1])||0),1)]),t.additionalHTML?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:t.additionalHTML},null,8,w)):e.createCommentVNode("",!0)],2))}}),D={key:0,class:"top-miniCharts_pages"},S=["onClick"],T=e.defineComponent({__name:"miniCharts",props:e.mergeModels({modelValue:{},countCharts:{},hideChartInMobile:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(m){const o=m,s=e.useModel(m,"modelValue"),i=e.ref(null);let p;const u=e.ref(1),c=e.ref(1),v=()=>{u.value=Math.round(i.value.scrollHeight/i.value.clientHeight)};e.watch(u,()=>{u.value<c.value&&(c.value=1)}),e.watch(()=>o.countCharts,()=>v(),{flush:"post"});const h=e.computed(()=>{if(!s.value)return{};const r=s.value.elCol.getBoundingClientRect(),a={top:r.bottom+window.scrollY+"px"};return document.documentElement.clientWidth/2>r.right?a.left=r.right+window.scrollX+10+"px":(a.left=r.left+window.scrollX-10+"px",a.transform="translate(-100%, 0)"),a});return e.onMounted(()=>{p=new ResizeObserver(()=>v()),p.observe(i.value),e.watch(c,()=>{const d=(i.value.children[0].clientHeight+parseInt(window.getComputedStyle(i.value).getPropertyValue("row-gap")))*(c.value-1);i.value.scrollTo({top:d,behavior:"smooth"})})}),e.onUnmounted(()=>{p.disconnect()}),(r,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["top-miniCharts",{"top-miniCharts":!0,scrollable:u.value>1,"top-miniCharts_hideChartInMobile":r.hideChartInMobile}]),ref_key:"elRef",ref:i},[e.renderSlot(r.$slots,"default"),u.value>1?(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,d=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass({"top-active":d===c.value}),onClick:t=>c.value=d},null,10,S))),256))])):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-miniCharts_tooltip",style:e.normalizeStyle(h.value)},[e.createElementVNode("span",null,e.toDisplayString(s.value.date),1),e.createElementVNode("span",null,e.toDisplayString(s.value.value),1)],4)):e.createCommentVNode("",!0)]))],2))}}),H=N,I=T;C.TopMiniChart=H,C.TopMiniCharts=I,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
+define(["require","exports","vue","../.chunks/forms-BLpuaGu3.amd","../utils/number.amd","../require/css.amd!../assets/charts.css"],function(L,C,e,M,g){"use strict";if(typeof e>"u")var e=window.Vue;const k=90,y=10,V=["data-top-icon"],B={class:"top-miniChart_chart"},b=["onMouseenter"],E={class:"top-miniChart_data"},_={class:"top-miniChart_dataValue"},w=["innerHTML"],D=e.defineComponent({__name:"miniChart",props:e.mergeModels({title:{},gIcon:{},color:{default:"blue"},dates:{},values:{},activeDates:{},keysForDyn:{},dynamic:{},isInvert:{type:Boolean},numberCols:{default:k},additionalHTML:{},modelValue:{},valueSuffix:{},hideChartInMobile:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(m){const o=m,s=e.useModel(m,"modelValue"),i=t=>{let l=u.value;o.isInvert&&(t-=1,l-=1);let a=l>0?Math.round(t/l*(100-y)):0;return o.isInvert?100-a:a+y},p=t=>o.activeDates.includes(t),u=e.computed(()=>Math.max(...o.values)),c=e.computed(()=>o.dates.slice().reverse()),v=e.computed(()=>o.dates.length?o.numberCols-o.dates.length:0),h=()=>{s.value=null},r=(t,l,a)=>{t.target instanceof HTMLElement&&(s.value={elCol:t.target,date:M.dateFormat(l),value:a===null?"--":a+(o.valueSuffix??"")})},n=e.computed(()=>{let t=o.dynamic;if(typeof t>"u"){const a=o.values[o.keysForDyn.start];t=o.values[o.keysForDyn.end]-a}return(t<0?-1:1)*g.percentOfNumber(Math.abs(t))}),d=e.computed(()=>{let t="stay";return o.isInvert?(n.value>0&&(t="down"),n.value<0&&(t="up")):(n.value>0&&(t="up"),n.value<0&&(t="down")),t});return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-miniChart":!0,"top-miniChart_hideChartInMobile":t.hideChartInMobile,[`top-color_${t.color}`]:!0})},[e.createElementVNode("div",{class:"top-miniChart_title top-ellipsis","data-top-icon":t.gIcon},e.toDisplayString(t.title),9,V),e.createElementVNode("div",B,[e.createElementVNode("div",{class:"top-miniChart_chartGrid",onMouseleave:l[1]||(l[1]=a=>h())},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,(a,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-miniChart_chartGridCol":!0,"top-active":p(a)}),onMouseenter:z=>r(z,a,t.values[t.values.length-f-1])},[e.createElementVNode("div",{style:e.normalizeStyle("height:"+i(t.values[t.values.length-f-1])+"%")},null,4)],42,b))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,()=>(e.openBlock(),e.createElementBlock("div",{class:"top-miniChart_chartGridCol top-miniChart_chartGridCol-none",onMouseenter:l[0]||(l[0]=a=>h())},l[2]||(l[2]=[e.createElementVNode("div",null,null,-1)]),32))),256))],32)]),e.createElementVNode("div",E,[e.createElementVNode("span",{class:e.normalizeClass({"top-miniChart_dataDynamic":!0,[`top-miniChart_dataDynamic-direction_${d.value}`]:!0})},e.toDisplayString(Math.abs(n.value)||""),3),e.createElementVNode("span",_,e.toDisplayString(e.unref(g.percentOfNumber)(t.values[t.values.length-1])||0),1)]),t.additionalHTML?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:t.additionalHTML},null,8,w)):e.createCommentVNode("",!0)],2))}}),N={key:0,class:"top-miniCharts_pages"},S=["onClick"],T=e.defineComponent({__name:"miniCharts",props:e.mergeModels({modelValue:{},countCharts:{},hideChartInMobile:{type:Boolean}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(m){const o=m,s=e.useModel(m,"modelValue"),i=e.ref(null);let p;const u=e.ref(1),c=e.ref(1),v=()=>{u.value=Math.round(i.value.scrollHeight/i.value.clientHeight)};e.watch(u,()=>{u.value<c.value&&(c.value=1)}),e.watch(()=>o.countCharts,()=>v(),{flush:"post"});const h=e.computed(()=>{if(!s.value)return{};const r=s.value.elCol.getBoundingClientRect(),n={top:r.bottom+window.scrollY+"px"};return document.documentElement.clientWidth/2>r.right?n.left=r.right+window.scrollX+10+"px":(n.left=r.left+window.scrollX-10+"px",n.transform="translate(-100%, 0)"),n});return e.onMounted(()=>{p=new ResizeObserver(()=>v()),p.observe(i.value),e.watch(c,()=>{const d=(i.value.children[0].clientHeight+parseInt(window.getComputedStyle(i.value).getPropertyValue("row-gap")))*(c.value-1);i.value.scrollTo({top:d,behavior:"smooth"})})}),e.onUnmounted(()=>{p.disconnect()}),(r,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["top-miniCharts",{"top-miniCharts":!0,scrollable:u.value>1,"top-miniCharts_hideChartInMobile":r.hideChartInMobile}]),ref_key:"elRef",ref:i},[e.renderSlot(r.$slots,"default"),u.value>1?(e.openBlock(),e.createElementBlock("div",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,d=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass({"top-active":d===c.value}),onClick:t=>c.value=d},null,10,S))),256))])):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[s.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"top-miniCharts_tooltip",style:e.normalizeStyle(h.value)},[e.createElementVNode("span",null,e.toDisplayString(s.value.date),1),e.createElementVNode("span",null,e.toDisplayString(s.value.value),1)],4)):e.createCommentVNode("",!0)]))],2))}}),H=D,I=T;C.TopMiniChart=H,C.TopMiniCharts=I,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=charts.amd.js.map

package/charts/charts.amd.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.amd.js","sources":["../../src/components/charts/miniChart/miniChart.vue","../../src/components/charts/miniCharts/miniCharts.vue","../../src/components/charts/charts.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Props } from './miniChart';\nimport { computed } from 'vue';\nimport { dateFormat } from '@/core/utils/date';\nimport { percentOfNumber } from '@/core/utils/number';\nimport { defaultNumberCols, minHeight } from './utils/consts';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: 'blue',\n\tnumberCols: defaultNumberCols,\n});\nconst model = defineModel<Props['modelValue']>();\n\n/**\n * Расчет высоты колонки (в процентах)\n */\nconst genColHeight = (value: number): number => {\n\tlet maximumValue = maxValue.value;\n\n\t// для графиков средней и медианной делаем максимум 1\n\tif (props.isInvert) {\n\t\tvalue -= 1;\n\t\tmaximumValue -= 1;\n\t}\n\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\n\tif (props.isInvert) return 100 - height;\n\n\treturn height + minHeight;\n};\n\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\n\nconst maxValue = computed(() => Math.max(...props.values));\n\n/**\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\n */\nconst reversedDates = computed(() => props.dates.slice().reverse());\n\n/**\n * Кол-во пустых колонок\n */\nconst numOfEmptyCols = computed(() => {\n\tif (!props.dates.length) return 0;\n\n\treturn props.numberCols - props.dates.length;\n});\n\nconst resetModel = () => {\n\tmodel.value = null;\n};\n\nconst setModel = (e: Event, date: string, value: number | null) => {\n\tif (!(e.target instanceof HTMLElement)) return;\n\n\tmodel.value = {\n\t\telCol: e.target,\n\t\tdate: dateFormat(date),\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\n\t};\n};\n\n/**\n * Возвращает численный показатель динамики графика\n */\nconst dynamic = computed(() => {\n\tconst prevPeriodValue = props.values[props.keysForDyn.start];\n\tconst currentValue = props.values[props.keysForDyn.end];\n\tconst dynValue = currentValue - prevPeriodValue;\n\tconst sign = dynValue < 0 ? -1 : 1;\n\n\treturn sign * (percentOfNumber(Math.abs(dynValue)) as number);\n});\n\nconst dynamicDirection = computed(() => {\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\n\n\tif (!props.isInvert) {\n\t\tif (dynamic.value > 0) direction = 'up';\n\t\tif (dynamic.value < 0) direction = 'down';\n\t} else {\n\t\tif (dynamic.value > 0) direction = 'down';\n\t\tif (dynamic.value < 0) direction = 'up';\n\t}\n\n\treturn direction;\n});\n\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-miniChart']: true,\n\t\t\t['top-miniChart_hideChartInMobile']: hideChartInMobile,\n\t\t\t[`top-color_${color}`]: true,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tclass=\"top-miniChart_title top-ellipsis\"\n\t\t\t:data-top-icon=\"gIcon\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_chart\">\n\t\t\t<div\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\n\t\t\t\t@mouseleave=\"resetModel()\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\n\t\t\t\t\t}\"\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\n\t\t\t\t>\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\n\t\t\t\t\t@mouseenter=\"resetModel()\"\n\t\t\t\t>\n\t\t\t\t\t<div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_data\">\n\t\t\t<span :class=\"{\n\t\t\t\t['top-miniChart_dataDynamic']: true,\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\n\t\t\t}\">\n\t\t\t\t{{ Math.abs(dynamic) || '' }}\n\t\t\t</span>\n\t\t\t<span class=\"top-miniChart_dataValue\">\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div\n\t\t\tv-if=\"additionalHTML\"\n\t\t\tv-html=\"additionalHTML\"\n\t\t/>\n\t</div>\n\n</template>\n<style>\n@import \"./styles/miniChart.css\";\n</style>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted } from 'vue';\nimport type { Style, Props } from './miniCharts';\n\nconst props = defineProps<Props>();\nconst model = defineModel<Props['modelValue']>();\n\nconst elRef = ref<HTMLElement | null>(null);\n\nlet pagesResizeObserver: ResizeObserver;\n\n/**\n * Количество страниц\n */\nconst countPages = ref(1);\n\n/**\n * Активная страница\n */\nconst activePage = ref(1);\n\n/**\n * Установка количества страниц в блоке\n */\nconst setCountPages = () => {\n\tcountPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);\n};\n\nwatch(countPages, () => {\n\tif (countPages.value < activePage.value) {\n\t\tactivePage.value = 1;\n\t}\n});\n\nwatch(\n\t() => props.countCharts,\n\t() => setCountPages(),\n\t{ flush: 'post' }\n);\n\n/**\n * Расчет положения для подсказки\n */\nconst tooltipStyle = computed(() => {\n\tif (!model.value) return {};\n\n\tconst box = model.value.elCol.getBoundingClientRect();\n\n\tconst style: Style = {\n\t\ttop: box.bottom + window.scrollY + 'px',\n\t};\n\n\tif (document.documentElement.clientWidth / 2 > box.right) {\n\t\tstyle.left = box.right + window.scrollX + 10 + 'px';\n\t} else {\n\t\tstyle.left = box.left + window.scrollX - 10 + 'px';\n\t\tstyle.transform = 'translate(-100%, 0)';\n\t}\n\n\treturn style;\n});\n\nonMounted(() => {\n\t/**\n\t * Функционал переключения экранов графиков\n\t */\n\tpagesResizeObserver = new ResizeObserver(() => setCountPages());\n\tpagesResizeObserver.observe(elRef.value!);\n\n\twatch(activePage, () => {\n\t\tconst elMiniChart = elRef.value!.children[0];\n\t\tconst pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));\n\t\tconst scrollTop = pageHeight * (activePage.value - 1);\n\n\t\telRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });\n\t});\n});\n\nonUnmounted(() => {\n\tpagesResizeObserver.disconnect();\n});\n</script>\n\n<template>\n\t<div\n\t\tclass=\"top-miniCharts\"\n\t\t:class=\"{\n\t\t\t['top-miniCharts']: true,\n\t\t\t['scrollable']: countPages > 1,\n\t\t\t['top-miniCharts_hideChartInMobile']: hideChartInMobile,\n\t\t}\"\n\t\tref=\"elRef\"\n\t>\n\n\t\t<slot></slot>\n\n\t\t<div\n\t\t\tv-if=\"countPages > 1\"\n\t\t\tclass=\"top-miniCharts_pages\"\n\t\t>\n\t\t\t<span\n\t\t\t\tv-for=\"n in countPages\"\n\t\t\t\t:class=\"{['top-active']: n === activePage}\"\n\t\t\t\t@click=\"activePage = n\"\n\t\t\t></span>\n\t\t</div>\n\n\t\t<Teleport to=\"body\">\n\t\t\t<div\n\t\t\t\tv-if=\"model\"\n\t\t\t\tclass=\"top-miniCharts_tooltip\"\n\t\t\t\t:style=\"tooltipStyle\"\n\t\t\t>\n\t\t\t\t<span>{{ model.date }}</span>\n\t\t\t\t<span>{{ model.value }}</span>\n\t\t\t</div>\n\t\t</Teleport>\n\t</div>\n\n</template>\n\n<style>\n@import \"./styles/miniCharts.css\";\n</style>\n\n\n\n\n","import type { ComponentCustomProps } from 'vue';\n\nimport MiniChart from './miniChart/miniChart.vue';\nimport MiniCharts from './miniCharts/miniCharts.vue';\n\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;\n\nexport const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;\n"],"names":["props","__props","genColHeight","value","maximumValue","maxValue","height","minHeight","isActiveDate","date","vue","reversedDates","numOfEmptyCols","model","e","forms","dynamic","prevPeriodValue","dynValue","utils_number","dynamicDirection","direction","elRef","countPages","activePage","tooltipStyle","box","style","scrollTop","pagesResizeObserver","TopMiniChart","_sfc_main$1","TopMiniCharts","_sfc_main"],"mappings":"6sBAOA,MAAAA,EAAAC,+BASAC,EAAAC,GAAA,CACC,IAAAC,EAAAC,EAAA,MAGAL,EAAA,kFAQAM,EAAAC,CAAgB,EAGjBC,EAAAC,GAAAT,EAAA,YAAA,SAAAS,CAAA,EAEAJ,EAAAK,EAAA,SAAA,IAAA,KAAA,IAAA,GAAAV,EAAA,MAAA,CAAA,EAKAW,EAAAD,EAAA,SAAA,IAAAV,EAAA,MAAA,MAAA,EAAA,QAAA,CAAA,EAKAY,EAAAF,EAAA,SAAA,gDAGuC,SAItCG,EAAA,MAAA,IAAc,yDAMA,MAAAC,EAAA,OACJ,KAAAC,EAAA,WAAAN,CAAA,EACY,MAAAN,IAAA,KAAA,KAAAA,GAAAH,EAAA,aAAA,GACwC,EAC9D,EAMDgB,EAAAN,EAAA,SAAA,IAAA,CACC,MAAAO,EAAAjB,EAAA,OAAAA,EAAA,WAAA,KAAA,EAEAkB,EADAlB,EAAA,OAAAA,EAAA,WAAA,GAAA,EACAiB,EAGA,iBAAAE,EAAA,gBAAA,KAAA,IAAAD,CAAA,CAAA,CAAiD,CAAA,EAGlDE,EAAAV,EAAA,SAAA,IAAA,CACC,IAAAW,EAAA,OAEA,OAAArB,EAAA,kGAQO,CAAA,0yDClFR,MAAAA,EAAAC,+BAGAqB,EAAAZ,EAAA,IAAA,IAAA,QAOA,MAAAa,EAAAb,EAAA,IAAA,CAAA,EAKAc,EAAAd,EAAA,IAAA,CAAA,sEAMoF,EAGpFA,EAAA,MAAAa,EAAA,IAAA,mBAEEC,EAAA,MAAA,EACD,CAAA,EAGDd,EAAA,gCAEqB,CAAA,MAAA,MAAA,CACJ,EAMjB,MAAAe,EAAAf,EAAA,SAAA,IAAA,uGAMqC,EAGpC,OAAA,SAAA,gBAAA,YAAA,EAAAgB,EAAA,MACCC,EAAA,KAAAD,EAAA,MAAA,OAAA,QAAA,GAAA,MAEAC,EAAA,KAAAD,EAAA,KAAA,OAAA,QAAA,GAAA,KACAC,EAAA,UAAA,wBAGM,CAAA,2EAUPjB,EAAA,MAAAc,EAAA,IAAA,+HAKCF,EAAA,MAAA,SAAA,CAAA,IAAAM,EAAA,SAAA,QAAA,CAAA,CAA4D,CAAA,CAC5D,CAAA,qBAIDC,EAAA,WAAA,CAA+B,CAAA,04BC1EzBC,EAAAC,EAEAC,EAAAC"}
+{"version":3,"file":"charts.amd.js","sources":["../../src/components/charts/miniChart/miniChart.vue","../../src/components/charts/miniCharts/miniCharts.vue","../../src/components/charts/charts.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Props } from './miniChart';\nimport { computed } from 'vue';\nimport { dateFormat } from '@/core/utils/date';\nimport { percentOfNumber } from '@/core/utils/number';\nimport { defaultNumberCols, minHeight } from './utils/consts';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: 'blue',\n\tnumberCols: defaultNumberCols,\n});\nconst model = defineModel<Props['modelValue']>();\n\n/**\n * Расчет высоты колонки (в процентах)\n */\nconst genColHeight = (value: number): number => {\n\tlet maximumValue = maxValue.value;\n\n\t// для графиков средней и медианной делаем максимум 1\n\tif (props.isInvert) {\n\t\tvalue -= 1;\n\t\tmaximumValue -= 1;\n\t}\n\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\n\tif (props.isInvert) return 100 - height;\n\n\treturn height + minHeight;\n};\n\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\n\nconst maxValue = computed(() => Math.max(...props.values));\n\n/**\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\n */\nconst reversedDates = computed(() => props.dates.slice().reverse());\n\n/**\n * Кол-во пустых колонок\n */\nconst numOfEmptyCols = computed(() => {\n\tif (!props.dates.length) return 0;\n\n\treturn props.numberCols - props.dates.length;\n});\n\nconst resetModel = () => {\n\tmodel.value = null;\n};\n\nconst setModel = (e: Event, date: string, value: number | null) => {\n\tif (!(e.target instanceof HTMLElement)) return;\n\n\tmodel.value = {\n\t\telCol: e.target,\n\t\tdate: dateFormat(date),\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\n\t};\n};\n\n/**\n * Возвращает численный показатель динамики графика\n */\nconst localDynamic = computed(() => {\n\tlet dynamic = props.dynamic;\n\n\tif (typeof dynamic === 'undefined') {\n\t\tconst prevPeriodValue = props.values[props.keysForDyn.start];\n\t\tconst currentValue = props.values[props.keysForDyn.end];\n\t\tdynamic = currentValue - prevPeriodValue;\n\t}\n\n\tconst sign = dynamic < 0 ? -1 : 1;\n\n\treturn sign * (percentOfNumber(Math.abs(dynamic)) as number);\n});\n\nconst dynamicDirection = computed(() => {\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\n\n\tif (!props.isInvert) {\n\t\tif (localDynamic.value > 0) direction = 'up';\n\t\tif (localDynamic.value < 0) direction = 'down';\n\t} else {\n\t\tif (localDynamic.value > 0) direction = 'down';\n\t\tif (localDynamic.value < 0) direction = 'up';\n\t}\n\n\treturn direction;\n});\n\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-miniChart']: true,\n\t\t\t['top-miniChart_hideChartInMobile']: hideChartInMobile,\n\t\t\t[`top-color_${color}`]: true\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tclass=\"top-miniChart_title top-ellipsis\"\n\t\t\t:data-top-icon=\"gIcon\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_chart\">\n\t\t\t<div\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\n\t\t\t\t@mouseleave=\"resetModel()\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\n\t\t\t\t\t}\"\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\n\t\t\t\t>\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\n\t\t\t\t\t@mouseenter=\"resetModel()\"\n\t\t\t\t>\n\t\t\t\t\t<div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_data\">\n\t\t\t<span :class=\"{\n\t\t\t\t['top-miniChart_dataDynamic']: true,\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\n\t\t\t}\">\n\t\t\t\t{{ Math.abs(localDynamic) || '' }}\n\t\t\t</span>\n\t\t\t<span class=\"top-miniChart_dataValue\">\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div\n\t\t\tv-if=\"additionalHTML\"\n\t\t\tv-html=\"additionalHTML\"\n\t\t/>\n\t</div>\n\n</template>\n<style>\n@import \"./styles/miniChart.css\";\n</style>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted } from 'vue';\nimport type { Style, Props } from './miniCharts';\n\nconst props = defineProps<Props>();\nconst model = defineModel<Props['modelValue']>();\n\nconst elRef = ref<HTMLElement | null>(null);\n\nlet pagesResizeObserver: ResizeObserver;\n\n/**\n * Количество страниц\n */\nconst countPages = ref(1);\n\n/**\n * Активная страница\n */\nconst activePage = ref(1);\n\n/**\n * Установка количества страниц в блоке\n */\nconst setCountPages = () => {\n\tcountPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);\n};\n\nwatch(countPages, () => {\n\tif (countPages.value < activePage.value) {\n\t\tactivePage.value = 1;\n\t}\n});\n\nwatch(\n\t() => props.countCharts,\n\t() => setCountPages(),\n\t{ flush: 'post' }\n);\n\n/**\n * Расчет положения для подсказки\n */\nconst tooltipStyle = computed(() => {\n\tif (!model.value) return {};\n\n\tconst box = model.value.elCol.getBoundingClientRect();\n\n\tconst style: Style = {\n\t\ttop: box.bottom + window.scrollY + 'px',\n\t};\n\n\tif (document.documentElement.clientWidth / 2 > box.right) {\n\t\tstyle.left = box.right + window.scrollX + 10 + 'px';\n\t} else {\n\t\tstyle.left = box.left + window.scrollX - 10 + 'px';\n\t\tstyle.transform = 'translate(-100%, 0)';\n\t}\n\n\treturn style;\n});\n\nonMounted(() => {\n\t/**\n\t * Функционал переключения экранов графиков\n\t */\n\tpagesResizeObserver = new ResizeObserver(() => setCountPages());\n\tpagesResizeObserver.observe(elRef.value!);\n\n\twatch(activePage, () => {\n\t\tconst elMiniChart = elRef.value!.children[0];\n\t\tconst pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));\n\t\tconst scrollTop = pageHeight * (activePage.value - 1);\n\n\t\telRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });\n\t});\n});\n\nonUnmounted(() => {\n\tpagesResizeObserver.disconnect();\n});\n</script>\n\n<template>\n\t<div\n\t\tclass=\"top-miniCharts\"\n\t\t:class=\"{\n\t\t\t['top-miniCharts']: true,\n\t\t\t['scrollable']: countPages > 1,\n\t\t\t['top-miniCharts_hideChartInMobile']: hideChartInMobile,\n\t\t}\"\n\t\tref=\"elRef\"\n\t>\n\n\t\t<slot></slot>\n\n\t\t<div\n\t\t\tv-if=\"countPages > 1\"\n\t\t\tclass=\"top-miniCharts_pages\"\n\t\t>\n\t\t\t<span\n\t\t\t\tv-for=\"n in countPages\"\n\t\t\t\t:class=\"{['top-active']: n === activePage}\"\n\t\t\t\t@click=\"activePage = n\"\n\t\t\t></span>\n\t\t</div>\n\n\t\t<Teleport to=\"body\">\n\t\t\t<div\n\t\t\t\tv-if=\"model\"\n\t\t\t\tclass=\"top-miniCharts_tooltip\"\n\t\t\t\t:style=\"tooltipStyle\"\n\t\t\t>\n\t\t\t\t<span>{{ model.date }}</span>\n\t\t\t\t<span>{{ model.value }}</span>\n\t\t\t</div>\n\t\t</Teleport>\n\t</div>\n\n</template>\n\n<style>\n@import \"./styles/miniCharts.css\";\n</style>\n\n\n\n\n","import type { ComponentCustomProps } from 'vue';\n\nimport MiniChart from './miniChart/miniChart.vue';\nimport MiniCharts from './miniCharts/miniCharts.vue';\n\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;\n\nexport const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;\n"],"names":["props","__props","genColHeight","value","maximumValue","maxValue","height","minHeight","isActiveDate","date","vue","reversedDates","numOfEmptyCols","model","e","forms","localDynamic","dynamic","prevPeriodValue","utils_number","dynamicDirection","direction","elRef","countPages","activePage","tooltipStyle","box","style","scrollTop","pagesResizeObserver","TopMiniChart","_sfc_main$1","TopMiniCharts","_sfc_main"],"mappings":"wtBAOA,MAAAA,EAAAC,+BASAC,EAAAC,GAAA,CACC,IAAAC,EAAAC,EAAA,MAGAL,EAAA,kFAQAM,EAAAC,CAAgB,EAGjBC,EAAAC,GAAAT,EAAA,YAAA,SAAAS,CAAA,EAEAJ,EAAAK,EAAA,SAAA,IAAA,KAAA,IAAA,GAAAV,EAAA,MAAA,CAAA,EAKAW,EAAAD,EAAA,SAAA,IAAAV,EAAA,MAAA,MAAA,EAAA,QAAA,CAAA,EAKAY,EAAAF,EAAA,SAAA,gDAGuC,SAItCG,EAAA,MAAA,IAAc,yDAMA,MAAAC,EAAA,OACJ,KAAAC,EAAA,WAAAN,CAAA,EACY,MAAAN,IAAA,KAAA,KAAAA,GAAAH,EAAA,aAAA,GACwC,EAC9D,EAMDgB,EAAAN,EAAA,SAAA,IAAA,CACC,IAAAO,EAAAjB,EAAA,QAEA,GAAA,OAAAiB,EAAA,IAAA,CACC,MAAAC,EAAAlB,EAAA,OAAAA,EAAA,WAAA,KAAA,EAEAiB,EADAjB,EAAA,OAAAA,EAAA,WAAA,GAAA,EACAkB,EAKD,iBAAAC,EAAA,gBAAA,KAAA,IAAAF,CAAA,CAAA,CAAgD,CAAA,EAGjDG,EAAAV,EAAA,SAAA,IAAA,CACC,IAAAW,EAAA,OAEA,OAAArB,EAAA,kGAQO,CAAA,0yDCvFR,MAAAA,EAAAC,+BAGAqB,EAAAZ,EAAA,IAAA,IAAA,QAOA,MAAAa,EAAAb,EAAA,IAAA,CAAA,EAKAc,EAAAd,EAAA,IAAA,CAAA,sEAMoF,EAGpFA,EAAA,MAAAa,EAAA,IAAA,mBAEEC,EAAA,MAAA,EACD,CAAA,EAGDd,EAAA,gCAEqB,CAAA,MAAA,MAAA,CACJ,EAMjB,MAAAe,EAAAf,EAAA,SAAA,IAAA,uGAMqC,EAGpC,OAAA,SAAA,gBAAA,YAAA,EAAAgB,EAAA,MACCC,EAAA,KAAAD,EAAA,MAAA,OAAA,QAAA,GAAA,MAEAC,EAAA,KAAAD,EAAA,KAAA,OAAA,QAAA,GAAA,KACAC,EAAA,UAAA,wBAGM,CAAA,2EAUPjB,EAAA,MAAAc,EAAA,IAAA,+HAKCF,EAAA,MAAA,SAAA,CAAA,IAAAM,EAAA,SAAA,QAAA,CAAA,CAA4D,CAAA,CAC5D,CAAA,qBAIDC,EAAA,WAAA,CAA+B,CAAA,04BC1EzBC,EAAAC,EAEAC,EAAAC"}

package/charts/charts.js

@@ -1,10 +1,10 @@
 import { Core as P } from "../core/app.js";
-import { defineComponent as D, mergeModels as S, useModel as $, computed as p, openBlock as a, createElementBlock as s, normalizeClass as f, createElementVNode as r, toDisplayString as g, Fragment as k, renderList as w, normalizeStyle as L, unref as F, createCommentVNode as H, ref as b, watch as V, onMounted as N, onUnmounted as R, renderSlot as z, createBlock as G, Teleport as O } from "vue";
-import { d as X } from "../.chunks/forms-FHMqYVvM.es.js";
+import { defineComponent as T, mergeModels as S, useModel as $, computed as h, openBlock as a, createElementBlock as i, normalizeClass as f, createElementVNode as r, toDisplayString as g, Fragment as k, renderList as w, normalizeStyle as L, unref as F, createCommentVNode as H, ref as b, watch as V, onMounted as N, onUnmounted as R, renderSlot as z, createBlock as G, Teleport as O } from "vue";
+import { d as X } from "../.chunks/forms-CO7gZ-Jf.es.js";
 import { percentOfNumber as I } from "../utils/number.js";
 const E = ["../assets/charts.css"].map((v) => import.meta.resolve(v));
 P.insertCSSLinkToPage(E, !0);
-const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart" }, Y = ["onMouseenter"], j = { class: "top-miniChart_data" }, q = { class: "top-miniChart_dataValue" }, J = ["innerHTML"], K = /* @__PURE__ */ D({
+const A = 90, D = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart" }, Y = ["onMouseenter"], j = { class: "top-miniChart_data" }, q = { class: "top-miniChart_dataValue" }, J = ["innerHTML"], K = /* @__PURE__ */ T({
   __name: "miniChart",
   props: /* @__PURE__ */ S({
     title: {},
@@ -14,6 +14,7 @@ const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart"
     values: {},
     activeDates: {},
     keysForDyn: {},
+    dynamic: {},
     isInvert: { type: Boolean },
     numberCols: { default: A },
     additionalHTML: {},
@@ -29,24 +30,28 @@ const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart"
     const t = v, d = $(v, "modelValue"), u = (e) => {
       let o = c.value;
       t.isInvert && (e -= 1, o -= 1);
-      let l = o > 0 ? Math.round(e / o * (100 - T)) : 0;
-      return t.isInvert ? 100 - l : l + T;
-    }, C = (e) => t.activeDates.includes(e), c = p(() => Math.max(...t.values)), m = p(() => t.dates.slice().reverse()), M = p(() => t.dates.length ? t.numberCols - t.dates.length : 0), y = () => {
+      let n = o > 0 ? Math.round(e / o * (100 - D)) : 0;
+      return t.isInvert ? 100 - n : n + D;
+    }, C = (e) => t.activeDates.includes(e), c = h(() => Math.max(...t.values)), m = h(() => t.dates.slice().reverse()), y = h(() => t.dates.length ? t.numberCols - t.dates.length : 0), M = () => {
       d.value = null;
-    }, i = (e, o, l) => {
+    }, s = (e, o, n) => {
       e.target instanceof HTMLElement && (d.value = {
         elCol: e.target,
         date: X(o),
-        value: l === null ? "--" : l + (t.valueSuffix ?? "")
+        value: n === null ? "--" : n + (t.valueSuffix ?? "")
       });
-    }, n = p(() => {
-      const e = t.values[t.keysForDyn.start], l = t.values[t.keysForDyn.end] - e;
-      return (l < 0 ? -1 : 1) * I(Math.abs(l));
-    }), h = p(() => {
+    }, l = h(() => {
+      let e = t.dynamic;
+      if (typeof e > "u") {
+        const n = t.values[t.keysForDyn.start];
+        e = t.values[t.keysForDyn.end] - n;
+      }
+      return (e < 0 ? -1 : 1) * I(Math.abs(e));
+    }), p = h(() => {
       let e = "stay";
-      return t.isInvert ? (n.value > 0 && (e = "down"), n.value < 0 && (e = "up")) : (n.value > 0 && (e = "up"), n.value < 0 && (e = "down")), e;
+      return t.isInvert ? (l.value > 0 && (e = "down"), l.value < 0 && (e = "up")) : (l.value > 0 && (e = "up"), l.value < 0 && (e = "down")), e;
     });
-    return (e, o) => (a(), s("div", {
+    return (e, o) => (a(), i("div", {
       class: f({
         "top-miniChart": !0,
         "top-miniChart_hideChartInMobile": e.hideChartInMobile,
@@ -60,22 +65,22 @@ const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart"
       r("div", W, [
         r("div", {
           class: "top-miniChart_chartGrid",
-          onMouseleave: o[1] || (o[1] = (l) => y())
+          onMouseleave: o[1] || (o[1] = (n) => M())
         }, [
-          (a(!0), s(k, null, w(m.value, (l, _) => (a(), s("div", {
+          (a(!0), i(k, null, w(m.value, (n, _) => (a(), i("div", {
             class: f({
               "top-miniChart_chartGridCol": !0,
-              "top-active": C(l)
+              "top-active": C(n)
             }),
-            onMouseenter: (B) => i(B, l, e.values[e.values.length - _ - 1])
+            onMouseenter: (B) => s(B, n, e.values[e.values.length - _ - 1])
           }, [
             r("div", {
               style: L("height:" + u(e.values[e.values.length - _ - 1]) + "%")
             }, null, 4)
           ], 42, Y))), 256)),
-          (a(!0), s(k, null, w(M.value, () => (a(), s("div", {
+          (a(!0), i(k, null, w(y.value, () => (a(), i("div", {
             class: "top-miniChart_chartGridCol top-miniChart_chartGridCol-none",
-            onMouseenter: o[0] || (o[0] = (l) => y())
+            onMouseenter: o[0] || (o[0] = (n) => M())
           }, o[2] || (o[2] = [
             r("div", null, null, -1)
           ]), 32))), 256))
@@ -85,12 +90,12 @@ const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart"
         r("span", {
           class: f({
             "top-miniChart_dataDynamic": !0,
-            [`top-miniChart_dataDynamic-direction_${h.value}`]: !0
+            [`top-miniChart_dataDynamic-direction_${p.value}`]: !0
           })
-        }, g(Math.abs(n.value) || ""), 3),
+        }, g(Math.abs(l.value) || ""), 3),
         r("span", q, g(F(I)(e.values[e.values.length - 1]) || 0), 1)
       ]),
-      e.additionalHTML ? (a(), s("div", {
+      e.additionalHTML ? (a(), i("div", {
         key: 0,
         innerHTML: e.additionalHTML
       }, null, 8, J)) : H("", !0)
@@ -99,7 +104,7 @@ const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart"
 }), Q = {
   key: 0,
   class: "top-miniCharts_pages"
-}, Z = ["onClick"], x = /* @__PURE__ */ D({
+}, Z = ["onClick"], x = /* @__PURE__ */ T({
   __name: "miniCharts",
   props: /* @__PURE__ */ S({
     modelValue: {},
@@ -113,51 +118,51 @@ const A = 90, T = 10, U = ["data-top-icon"], W = { class: "top-miniChart_chart"
   setup(v) {
     const t = v, d = $(v, "modelValue"), u = b(null);
     let C;
-    const c = b(1), m = b(1), M = () => {
+    const c = b(1), m = b(1), y = () => {
       c.value = Math.round(u.value.scrollHeight / u.value.clientHeight);
     };
     V(c, () => {
       c.value < m.value && (m.value = 1);
     }), V(
       () => t.countCharts,
-      () => M(),
+      () => y(),
       { flush: "post" }
     );
-    const y = p(() => {
+    const M = h(() => {
       if (!d.value) return {};
-      const i = d.value.elCol.getBoundingClientRect(), n = {
-        top: i.bottom + window.scrollY + "px"
+      const s = d.value.elCol.getBoundingClientRect(), l = {
+        top: s.bottom + window.scrollY + "px"
       };
-      return document.documentElement.clientWidth / 2 > i.right ? n.left = i.right + window.scrollX + 10 + "px" : (n.left = i.left + window.scrollX - 10 + "px", n.transform = "translate(-100%, 0)"), n;
+      return document.documentElement.clientWidth / 2 > s.right ? l.left = s.right + window.scrollX + 10 + "px" : (l.left = s.left + window.scrollX - 10 + "px", l.transform = "translate(-100%, 0)"), l;
     });
     return N(() => {
-      C = new ResizeObserver(() => M()), C.observe(u.value), V(m, () => {
-        const h = (u.value.children[0].clientHeight + parseInt(window.getComputedStyle(u.value).getPropertyValue("row-gap"))) * (m.value - 1);
-        u.value.scrollTo({ top: h, behavior: "smooth" });
+      C = new ResizeObserver(() => y()), C.observe(u.value), V(m, () => {
+        const p = (u.value.children[0].clientHeight + parseInt(window.getComputedStyle(u.value).getPropertyValue("row-gap"))) * (m.value - 1);
+        u.value.scrollTo({ top: p, behavior: "smooth" });
       });
     }), R(() => {
       C.disconnect();
-    }), (i, n) => (a(), s("div", {
+    }), (s, l) => (a(), i("div", {
       class: f(["top-miniCharts", {
         "top-miniCharts": !0,
         scrollable: c.value > 1,
-        "top-miniCharts_hideChartInMobile": i.hideChartInMobile
+        "top-miniCharts_hideChartInMobile": s.hideChartInMobile
       }]),
       ref_key: "elRef",
       ref: u
     }, [
-      z(i.$slots, "default"),
-      c.value > 1 ? (a(), s("div", Q, [
-        (a(!0), s(k, null, w(c.value, (h) => (a(), s("span", {
-          class: f({ "top-active": h === m.value }),
-          onClick: (e) => m.value = h
+      z(s.$slots, "default"),
+      c.value > 1 ? (a(), i("div", Q, [
+        (a(!0), i(k, null, w(c.value, (p) => (a(), i("span", {
+          class: f({ "top-active": p === m.value }),
+          onClick: (e) => m.value = p
         }, null, 10, Z))), 256))
       ])) : H("", !0),
       (a(), G(O, { to: "body" }, [
-        d.value ? (a(), s("div", {
+        d.value ? (a(), i("div", {
           key: 0,
           class: "top-miniCharts_tooltip",
-          style: L(y.value)
+          style: L(M.value)
         }, [
           r("span", null, g(d.value.date), 1),
           r("span", null, g(d.value.value), 1)

package/charts/charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.js","sources":["../../src/components/charts/miniChart/utils/consts.ts","../../src/components/charts/miniChart/miniChart.vue","../../src/components/charts/miniCharts/miniCharts.vue","../../src/components/charts/charts.ts"],"sourcesContent":["/**\n * Кол-во столбцов по умолчанию\n */\nexport const defaultNumberCols = 90;\n\n/**\n * Минимальная высота колонки (в процентах)\n */\nexport const minHeight = 10; // %","<script setup lang=\"ts\">\nimport type { Props } from './miniChart';\nimport { computed } from 'vue';\nimport { dateFormat } from '@/core/utils/date';\nimport { percentOfNumber } from '@/core/utils/number';\nimport { defaultNumberCols, minHeight } from './utils/consts';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: 'blue',\n\tnumberCols: defaultNumberCols,\n});\nconst model = defineModel<Props['modelValue']>();\n\n/**\n * Расчет высоты колонки (в процентах)\n */\nconst genColHeight = (value: number): number => {\n\tlet maximumValue = maxValue.value;\n\n\t// для графиков средней и медианной делаем максимум 1\n\tif (props.isInvert) {\n\t\tvalue -= 1;\n\t\tmaximumValue -= 1;\n\t}\n\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\n\tif (props.isInvert) return 100 - height;\n\n\treturn height + minHeight;\n};\n\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\n\nconst maxValue = computed(() => Math.max(...props.values));\n\n/**\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\n */\nconst reversedDates = computed(() => props.dates.slice().reverse());\n\n/**\n * Кол-во пустых колонок\n */\nconst numOfEmptyCols = computed(() => {\n\tif (!props.dates.length) return 0;\n\n\treturn props.numberCols - props.dates.length;\n});\n\nconst resetModel = () => {\n\tmodel.value = null;\n};\n\nconst setModel = (e: Event, date: string, value: number | null) => {\n\tif (!(e.target instanceof HTMLElement)) return;\n\n\tmodel.value = {\n\t\telCol: e.target,\n\t\tdate: dateFormat(date),\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\n\t};\n};\n\n/**\n * Возвращает численный показатель динамики графика\n */\nconst dynamic = computed(() => {\n\tconst prevPeriodValue = props.values[props.keysForDyn.start];\n\tconst currentValue = props.values[props.keysForDyn.end];\n\tconst dynValue = currentValue - prevPeriodValue;\n\tconst sign = dynValue < 0 ? -1 : 1;\n\n\treturn sign * (percentOfNumber(Math.abs(dynValue)) as number);\n});\n\nconst dynamicDirection = computed(() => {\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\n\n\tif (!props.isInvert) {\n\t\tif (dynamic.value > 0) direction = 'up';\n\t\tif (dynamic.value < 0) direction = 'down';\n\t} else {\n\t\tif (dynamic.value > 0) direction = 'down';\n\t\tif (dynamic.value < 0) direction = 'up';\n\t}\n\n\treturn direction;\n});\n\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-miniChart']: true,\n\t\t\t['top-miniChart_hideChartInMobile']: hideChartInMobile,\n\t\t\t[`top-color_${color}`]: true,\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tclass=\"top-miniChart_title top-ellipsis\"\n\t\t\t:data-top-icon=\"gIcon\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_chart\">\n\t\t\t<div\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\n\t\t\t\t@mouseleave=\"resetModel()\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\n\t\t\t\t\t}\"\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\n\t\t\t\t>\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\n\t\t\t\t\t@mouseenter=\"resetModel()\"\n\t\t\t\t>\n\t\t\t\t\t<div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_data\">\n\t\t\t<span :class=\"{\n\t\t\t\t['top-miniChart_dataDynamic']: true,\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\n\t\t\t}\">\n\t\t\t\t{{ Math.abs(dynamic) || '' }}\n\t\t\t</span>\n\t\t\t<span class=\"top-miniChart_dataValue\">\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div\n\t\t\tv-if=\"additionalHTML\"\n\t\t\tv-html=\"additionalHTML\"\n\t\t/>\n\t</div>\n\n</template>\n<style>\n@import \"./styles/miniChart.css\";\n</style>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted } from 'vue';\nimport type { Style, Props } from './miniCharts';\n\nconst props = defineProps<Props>();\nconst model = defineModel<Props['modelValue']>();\n\nconst elRef = ref<HTMLElement | null>(null);\n\nlet pagesResizeObserver: ResizeObserver;\n\n/**\n * Количество страниц\n */\nconst countPages = ref(1);\n\n/**\n * Активная страница\n */\nconst activePage = ref(1);\n\n/**\n * Установка количества страниц в блоке\n */\nconst setCountPages = () => {\n\tcountPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);\n};\n\nwatch(countPages, () => {\n\tif (countPages.value < activePage.value) {\n\t\tactivePage.value = 1;\n\t}\n});\n\nwatch(\n\t() => props.countCharts,\n\t() => setCountPages(),\n\t{ flush: 'post' }\n);\n\n/**\n * Расчет положения для подсказки\n */\nconst tooltipStyle = computed(() => {\n\tif (!model.value) return {};\n\n\tconst box = model.value.elCol.getBoundingClientRect();\n\n\tconst style: Style = {\n\t\ttop: box.bottom + window.scrollY + 'px',\n\t};\n\n\tif (document.documentElement.clientWidth / 2 > box.right) {\n\t\tstyle.left = box.right + window.scrollX + 10 + 'px';\n\t} else {\n\t\tstyle.left = box.left + window.scrollX - 10 + 'px';\n\t\tstyle.transform = 'translate(-100%, 0)';\n\t}\n\n\treturn style;\n});\n\nonMounted(() => {\n\t/**\n\t * Функционал переключения экранов графиков\n\t */\n\tpagesResizeObserver = new ResizeObserver(() => setCountPages());\n\tpagesResizeObserver.observe(elRef.value!);\n\n\twatch(activePage, () => {\n\t\tconst elMiniChart = elRef.value!.children[0];\n\t\tconst pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));\n\t\tconst scrollTop = pageHeight * (activePage.value - 1);\n\n\t\telRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });\n\t});\n});\n\nonUnmounted(() => {\n\tpagesResizeObserver.disconnect();\n});\n</script>\n\n<template>\n\t<div\n\t\tclass=\"top-miniCharts\"\n\t\t:class=\"{\n\t\t\t['top-miniCharts']: true,\n\t\t\t['scrollable']: countPages > 1,\n\t\t\t['top-miniCharts_hideChartInMobile']: hideChartInMobile,\n\t\t}\"\n\t\tref=\"elRef\"\n\t>\n\n\t\t<slot></slot>\n\n\t\t<div\n\t\t\tv-if=\"countPages > 1\"\n\t\t\tclass=\"top-miniCharts_pages\"\n\t\t>\n\t\t\t<span\n\t\t\t\tv-for=\"n in countPages\"\n\t\t\t\t:class=\"{['top-active']: n === activePage}\"\n\t\t\t\t@click=\"activePage = n\"\n\t\t\t></span>\n\t\t</div>\n\n\t\t<Teleport to=\"body\">\n\t\t\t<div\n\t\t\t\tv-if=\"model\"\n\t\t\t\tclass=\"top-miniCharts_tooltip\"\n\t\t\t\t:style=\"tooltipStyle\"\n\t\t\t>\n\t\t\t\t<span>{{ model.date }}</span>\n\t\t\t\t<span>{{ model.value }}</span>\n\t\t\t</div>\n\t\t</Teleport>\n\t</div>\n\n</template>\n\n<style>\n@import \"./styles/miniCharts.css\";\n</style>\n\n\n\n\n","import type { ComponentCustomProps } from 'vue';\n\nimport MiniChart from './miniChart/miniChart.vue';\nimport MiniCharts from './miniCharts/miniCharts.vue';\n\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;\n\nexport const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;\n"],"names":["defaultNumberCols","minHeight","props","__props","model","useModel","genColHeight","value","maximumValue","maxValue","height","isActiveDate","date","computed","reversedDates","numOfEmptyCols","resetModel","setModel","dateFormat","dynamic","prevPeriodValue","dynValue","percentOfNumber","dynamicDirection","direction","elRef","ref","pagesResizeObserver","countPages","activePage","setCountPages","watch","tooltipStyle","box","style","onMounted","scrollTop","onUnmounted","TopMiniChart","_sfc_main$1","TopMiniCharts","_sfc_main"],"mappings":"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"}
+{"version":3,"file":"charts.js","sources":["../../src/components/charts/miniChart/utils/consts.ts","../../src/components/charts/miniChart/miniChart.vue","../../src/components/charts/miniCharts/miniCharts.vue","../../src/components/charts/charts.ts"],"sourcesContent":["/**\n * Кол-во столбцов по умолчанию\n */\nexport const defaultNumberCols = 90;\n\n/**\n * Минимальная высота колонки (в процентах)\n */\nexport const minHeight = 10; // %","<script setup lang=\"ts\">\nimport type { Props } from './miniChart';\nimport { computed } from 'vue';\nimport { dateFormat } from '@/core/utils/date';\nimport { percentOfNumber } from '@/core/utils/number';\nimport { defaultNumberCols, minHeight } from './utils/consts';\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcolor: 'blue',\n\tnumberCols: defaultNumberCols,\n});\nconst model = defineModel<Props['modelValue']>();\n\n/**\n * Расчет высоты колонки (в процентах)\n */\nconst genColHeight = (value: number): number => {\n\tlet maximumValue = maxValue.value;\n\n\t// для графиков средней и медианной делаем максимум 1\n\tif (props.isInvert) {\n\t\tvalue -= 1;\n\t\tmaximumValue -= 1;\n\t}\n\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\n\tif (props.isInvert) return 100 - height;\n\n\treturn height + minHeight;\n};\n\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\n\nconst maxValue = computed(() => Math.max(...props.values));\n\n/**\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\n */\nconst reversedDates = computed(() => props.dates.slice().reverse());\n\n/**\n * Кол-во пустых колонок\n */\nconst numOfEmptyCols = computed(() => {\n\tif (!props.dates.length) return 0;\n\n\treturn props.numberCols - props.dates.length;\n});\n\nconst resetModel = () => {\n\tmodel.value = null;\n};\n\nconst setModel = (e: Event, date: string, value: number | null) => {\n\tif (!(e.target instanceof HTMLElement)) return;\n\n\tmodel.value = {\n\t\telCol: e.target,\n\t\tdate: dateFormat(date),\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\n\t};\n};\n\n/**\n * Возвращает численный показатель динамики графика\n */\nconst localDynamic = computed(() => {\n\tlet dynamic = props.dynamic;\n\n\tif (typeof dynamic === 'undefined') {\n\t\tconst prevPeriodValue = props.values[props.keysForDyn.start];\n\t\tconst currentValue = props.values[props.keysForDyn.end];\n\t\tdynamic = currentValue - prevPeriodValue;\n\t}\n\n\tconst sign = dynamic < 0 ? -1 : 1;\n\n\treturn sign * (percentOfNumber(Math.abs(dynamic)) as number);\n});\n\nconst dynamicDirection = computed(() => {\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\n\n\tif (!props.isInvert) {\n\t\tif (localDynamic.value > 0) direction = 'up';\n\t\tif (localDynamic.value < 0) direction = 'down';\n\t} else {\n\t\tif (localDynamic.value > 0) direction = 'down';\n\t\tif (localDynamic.value < 0) direction = 'up';\n\t}\n\n\treturn direction;\n});\n\n</script>\n\n<template>\n\t<div\n\t\t:class=\"{\n\t\t\t['top-miniChart']: true,\n\t\t\t['top-miniChart_hideChartInMobile']: hideChartInMobile,\n\t\t\t[`top-color_${color}`]: true\n\t\t}\"\n\t>\n\t\t<div\n\t\t\tclass=\"top-miniChart_title top-ellipsis\"\n\t\t\t:data-top-icon=\"gIcon\"\n\t\t>\n\t\t\t{{ title }}\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_chart\">\n\t\t\t<div\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\n\t\t\t\t@mouseleave=\"resetModel()\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\n\t\t\t\t\t}\"\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\n\t\t\t\t>\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\n\t\t\t\t\t@mouseenter=\"resetModel()\"\n\t\t\t\t>\n\t\t\t\t\t<div></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"top-miniChart_data\">\n\t\t\t<span :class=\"{\n\t\t\t\t['top-miniChart_dataDynamic']: true,\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\n\t\t\t}\">\n\t\t\t\t{{ Math.abs(localDynamic) || '' }}\n\t\t\t</span>\n\t\t\t<span class=\"top-miniChart_dataValue\">\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<div\n\t\t\tv-if=\"additionalHTML\"\n\t\t\tv-html=\"additionalHTML\"\n\t\t/>\n\t</div>\n\n</template>\n<style>\n@import \"./styles/miniChart.css\";\n</style>\n","<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted } from 'vue';\nimport type { Style, Props } from './miniCharts';\n\nconst props = defineProps<Props>();\nconst model = defineModel<Props['modelValue']>();\n\nconst elRef = ref<HTMLElement | null>(null);\n\nlet pagesResizeObserver: ResizeObserver;\n\n/**\n * Количество страниц\n */\nconst countPages = ref(1);\n\n/**\n * Активная страница\n */\nconst activePage = ref(1);\n\n/**\n * Установка количества страниц в блоке\n */\nconst setCountPages = () => {\n\tcountPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);\n};\n\nwatch(countPages, () => {\n\tif (countPages.value < activePage.value) {\n\t\tactivePage.value = 1;\n\t}\n});\n\nwatch(\n\t() => props.countCharts,\n\t() => setCountPages(),\n\t{ flush: 'post' }\n);\n\n/**\n * Расчет положения для подсказки\n */\nconst tooltipStyle = computed(() => {\n\tif (!model.value) return {};\n\n\tconst box = model.value.elCol.getBoundingClientRect();\n\n\tconst style: Style = {\n\t\ttop: box.bottom + window.scrollY + 'px',\n\t};\n\n\tif (document.documentElement.clientWidth / 2 > box.right) {\n\t\tstyle.left = box.right + window.scrollX + 10 + 'px';\n\t} else {\n\t\tstyle.left = box.left + window.scrollX - 10 + 'px';\n\t\tstyle.transform = 'translate(-100%, 0)';\n\t}\n\n\treturn style;\n});\n\nonMounted(() => {\n\t/**\n\t * Функционал переключения экранов графиков\n\t */\n\tpagesResizeObserver = new ResizeObserver(() => setCountPages());\n\tpagesResizeObserver.observe(elRef.value!);\n\n\twatch(activePage, () => {\n\t\tconst elMiniChart = elRef.value!.children[0];\n\t\tconst pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));\n\t\tconst scrollTop = pageHeight * (activePage.value - 1);\n\n\t\telRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });\n\t});\n});\n\nonUnmounted(() => {\n\tpagesResizeObserver.disconnect();\n});\n</script>\n\n<template>\n\t<div\n\t\tclass=\"top-miniCharts\"\n\t\t:class=\"{\n\t\t\t['top-miniCharts']: true,\n\t\t\t['scrollable']: countPages > 1,\n\t\t\t['top-miniCharts_hideChartInMobile']: hideChartInMobile,\n\t\t}\"\n\t\tref=\"elRef\"\n\t>\n\n\t\t<slot></slot>\n\n\t\t<div\n\t\t\tv-if=\"countPages > 1\"\n\t\t\tclass=\"top-miniCharts_pages\"\n\t\t>\n\t\t\t<span\n\t\t\t\tv-for=\"n in countPages\"\n\t\t\t\t:class=\"{['top-active']: n === activePage}\"\n\t\t\t\t@click=\"activePage = n\"\n\t\t\t></span>\n\t\t</div>\n\n\t\t<Teleport to=\"body\">\n\t\t\t<div\n\t\t\t\tv-if=\"model\"\n\t\t\t\tclass=\"top-miniCharts_tooltip\"\n\t\t\t\t:style=\"tooltipStyle\"\n\t\t\t>\n\t\t\t\t<span>{{ model.date }}</span>\n\t\t\t\t<span>{{ model.value }}</span>\n\t\t\t</div>\n\t\t</Teleport>\n\t</div>\n\n</template>\n\n<style>\n@import \"./styles/miniCharts.css\";\n</style>\n\n\n\n\n","import type { ComponentCustomProps } from 'vue';\n\nimport MiniChart from './miniChart/miniChart.vue';\nimport MiniCharts from './miniCharts/miniCharts.vue';\n\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;\n\nexport const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;\n"],"names":["defaultNumberCols","minHeight","props","__props","model","useModel","genColHeight","value","maximumValue","maxValue","height","isActiveDate","date","computed","reversedDates","numOfEmptyCols","resetModel","setModel","dateFormat","localDynamic","dynamic","prevPeriodValue","percentOfNumber","dynamicDirection","direction","elRef","ref","pagesResizeObserver","countPages","activePage","setCountPages","watch","tooltipStyle","box","style","onMounted","scrollTop","onUnmounted","TopMiniChart","_sfc_main$1","TopMiniCharts","_sfc_main"],"mappings":"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"}

package/components/charts/miniChart/miniChart.d.ts

@@ -26,6 +26,7 @@ export interface Props {
     /**
      * Индексы для получения значений из props.values.
      * Полученные значения используются для рассчета динамики изменения.
+     * Если указан props.dynamic, то props.keysForDyn не используется в расчетах динамики.
      *
      * - start - индекс для получения значения в начале периода
      * - end - индекс для полученя значения в конце периода
@@ -34,6 +35,10 @@ export interface Props {
         start: number;
         end: number;
     };
+    /**
+     * Динамика
+     */
+    dynamic?: number;
     /**
      * Необходимо ли инвертировать значения ячеек графика
      */

package/components/core/notice/item/item.vue.d.ts

@@ -4,5 +4,7 @@ declare const _default: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsM
     close: () => any;
 }, string, PublicProps, Readonly<Props> & Readonly<{
     onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}>, {
+    selectToClose: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/core/notice/item/types.d.ts

@@ -42,6 +42,10 @@ export type Props = {
      * Установить стиль выделения сообщения
      */
     hightlight?: boolean;
+    /**
+     * Закрывать сообщение при клике по его кнопке или ссылке
+     */
+    selectToClose?: boolean;
     /**
      * Установить стиль закрытия сообщения
      *

package/components/core/notice/utils.d.ts

@@ -10,6 +10,7 @@ export type Options = {
     metaText?: ItemProps['metaText'];
     buttonProps?: ItemProps['buttonProps'];
     isSafeHTML?: ItemProps['isSafeHTML'];
+    selectToClose?: ItemProps['selectToClose'];
     onClose?: Function;
 };
 /**

package/components/dialog/dialog/composables/{asyncDialogWorker.d.ts → asyncDialogHandle.d.ts}

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
-import { TopDialogHandle } from './dialogWorker';
+import { TopDialogHandle } from './dialogHandle';
 /**
  * Объект для работы с асинхронным диалоговым окном
  *

package/components/dialog/dialog/composables/utils.d.ts

@@ -1,5 +1,5 @@
-import { TopDialogHandle } from './dialogWorker';
-import { AsyncTopDialogHandle } from './asyncDialogWorker';
+import { TopDialogHandle } from './dialogHandle';
+import { AsyncTopDialogHandle } from './asyncDialogHandle';
 import { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
 /**
  * Получить объект управленя текущим диалоговым окном

package/components/dialog/dialog/dialogs/dialogs.vue.d.ts

@@ -1,4 +1,4 @@
-import { TopDialogHandle } from '../composables/dialogWorker';
+import { TopDialogHandle } from '../composables/dialogHandle';
 import { TopDialogComponent } from '../composables/types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 export declare const getDialogWorker: (id: string) => TopDialogHandle<TopDialogComponent> | undefined;

package/components/dialog/lib/types.d.ts

@@ -3,6 +3,10 @@ export type TopDialogOptions = {
      * Загрузчик для компонентов диалоговых окон по их id
      */
     load?: TopDialogLoad;
+    /**
+     * Глобальный декоратор на событие инициализации диалогового окна
+     */
+    decoratorOnCreate?: DecoratorOnCreate;
     /**
      * Пауза перед загрузкой утилиты диалоговых окон в ms
      *
@@ -12,5 +16,6 @@ export type TopDialogOptions = {
      */
     autoInitDelay?: number;
 };
-export type TopDialogLoad = (dialogId: string, callback?: () => void) => Promise<void>;
+export type TopDialogLoad = (dialogId: string) => Promise<void>;
+export type DecoratorOnCreate = (elDialog: HTMLElement) => Promise<void>;
 export type MoveDirection = 'next' | 'prev' | 'none';

package/components/dialog/lib/worker.d.ts

@@ -3,6 +3,7 @@ import { $el } from '../../types';
 export declare abstract class TopDialogWorker {
     static state: {
         load: TopDialogOptions["load"] | undefined;
+        decoratorOnCreate: TopDialogOptions["decoratorOnCreate"] | undefined;
         /**
          * Порядковай номер перехода в диалоговых окнах
          *
@@ -32,6 +33,10 @@ export declare abstract class TopDialogWorker {
     }>;
     static get$dialog($el: $el): JQuery<HTMLElement>;
     static get$page($el: $el): JQuery<HTMLElement>;
+    /**
+     * Получить элементы страницы в шапке и в контенте
+     */
+    static get$pairPage($el: $el): JQuery<HTMLElement>;
     /**
      * Закрыть диалоговое окно
      */

package/components/layout/islandRows/islandRows.vue.d.ts

@@ -0,0 +1,16 @@
+import { Slots } from './types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    slots: Readonly<Slots> & Slots;
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/layout/islandRows/islandRowsRow/islandRowsRow.vue.d.ts

@@ -0,0 +1,17 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/layout/islandRows/islandRowsRow/types.d.ts

@@ -0,0 +1,2 @@
+export interface Props {
+}