@topvisor/ui 1.0.12 → 1.0.13

package/assets/forms.css

@@ -1 +1 @@
-.top-avatar{width:var(--3ce69dc2);height:var(--3ce69dc2);display:flex;flex-grow:0;flex-shrink:0;position:relative;top:0;left:0}.top-avatar_image{border-radius:50%;width:100%;height:100%}.top-avatar_status{border-radius:50%;border:2px solid var(--color-layout-front-1);background-color:var(--color-bg-positive-1);width:25%;height:25%;position:absolute;right:0;bottom:0}.top-button{cursor:pointer;box-sizing:border-box;box-shadow:var(--top-button-box-shadow);border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);background-color:var(--top-button-background-color);height:var(--top-forms-base-height);padding:0 var(--top-forms-padding);color:var(--top-button-color);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s,box-shadow .15s}.top-button:hover{box-shadow:var(--top-button-box-shadow-hover);background-color:var(--top-button-background-color-hover)}.top-button:active{box-shadow:var(--top-button-box-shadow-active);background-color:var(--top-button-background-color-active)}.top-button.top-active{box-shadow:var(--top-button-box-shadow-selected);background-color:var(--top-button-background-color-selected)}.top-button.top-button-progress{cursor:help;box-shadow:inset #00000080 0 0 64px;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:32px 32px;animation:progress 1s linear infinite}@keyframes progress{0%{background-position-x:0px}to{background-position-x:32px}}a.top-button,button.top-button{min-width:100px;text-decoration:none}a.top-button,a.top-button:hover{min-width:var(--top-forms-base-height);text-decoration:none}.top-button[data-top-icon]:not(:empty):not(.top-button-withoutText),.top-button[data-top-icon2]:not(:empty):not(.top-button-withoutText){justify-content:flex-start;text-align:left}.top-button[data-top-icon]{padding-left:0}.top-button[data-top-icon2]{padding-right:var(--top-select_arrow-width)}.top-button[data-top-icon2]:after{margin-left:auto}.top-button:empty,.top-button.top-button-withoutText{min-width:var(--top-forms-base-height)}.top-button[data-top-icon]:empty,.top-button[data-top-icon2]:empty,.top-button[data-top-icon].top-button-withoutText,.top-button[data-top-icon2].top-button-withoutText{padding:0}.top-button.top-color_blue{--top-button-background-color: var(--color-bg-primary-1)}.top-button.top-color_green{--top-button-background-color: var(--color-bg-positive-1)}.top-button.top-color_orange{--top-button-background-color: var(--color-bg-warning-1)}.top-button.top-color_red{--top-button-background-color: var(--color-bg-negative-1)}.top-button.top-color_pink{--top-button-background-color: var(--color-bg-info-1)}.top-button.top-color_theme{--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-color: var(--color-text-1);--top-button-background-color: transparent;--top-button-background-color-hover: var(--color-layer-1);--top-button-background-color-active: var(--color-layer-3);--top-button-background-color-selected: var(--color-layer-2)}.top-button.top-color_theme:hover{--top-icon-color: var(--color-text-1);--top-icon2-color: var(--color-text-1)}.top-button.top-color_theme.top-active{--top-icon-color: var(--color-text-2)}.top-button.top-style_outline{--top-button-box-shadow: none;--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-button-background-color: var(--color-layout-front-1);--top-forms-border-width: 1px}.top-button.top-style_outline.top-color_theme{--top-button-color: var(--color-text-2);--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-background-color-hover: var(--color-layer-1);--top-button-background-color-active: var(--color-layer-2);--top-button-background-color-selected: var(--color-layer-3);--top-forms-border-color: var(--color-line-3)}.top-button.top-style_outline.top-color_theme:hover{--top-forms-border-color: var(--color-line-4)}.top-button.top-style_outline.top-color_blue{--top-button-color: var(--color-text-primary);--top-icon-color: var(--color-text-primary);--top-icon2-color: var(--color-text-primary);--top-button-background-color-hover: var(--color-layer-primary-1);--top-button-background-color-active: var(--color-layer-primary-2);--top-button-background-color-selected: var(--color-layer-primary-3);--top-forms-border-color: var(--color-line-primary-1)}.top-button.top-style_outline.top-color_blue:hover{--top-forms-border-color: var(--color-line-primary-2)}.top-button.top-style_outline.top-color_green{--top-button-color: var(--color-text-positive);--top-icon-color: var(--color-text-positive);--top-icon2-color: var(--color-text-positive);--top-button-background-color-hover: var(--color-layer-positive-1);--top-button-background-color-active: var(--color-layer-positive-2);--top-button-background-color-selected: var(--color-layer-positive-3);--top-forms-border-color: var(--color-line-positive-1)}.top-button.top-style_outline.top-color_green:hover{--top-forms-border-color: var(--color-line-positive-2)}.top-button.top-style_outline.top-color_orange{--top-button-color: var(--color-text-warning);--top-icon-color: var(--color-text-warning);--top-icon2-color: var(--color-text-warning);--top-button-background-color-hover: var(--color-layer-warning-1);--top-button-background-color-active: var(--color-layer-warning-2);--top-button-background-color-selected: var(--color-layer-warning-3);--top-forms-border-color: var(--color-line-warning-1)}.top-button.top-style_outline.top-color_orange:hover{--top-forms-border-color: var(--color-line-warning-2)}.top-button.top-style_outline.top-color_red{--top-button-color: var(--color-text-negative);--top-icon-color: var(--color-text-negative);--top-icon2-color: var(--color-text-negative);--top-button-background-color-hover: var(--color-layer-negative-1);--top-button-background-color-active: var(--color-layer-negative-2);--top-button-background-color-selected: var(--color-layer-negative-3);--top-forms-border-color: var(--color-line-negative-1)}.top-button.top-style_outline.top-color_red:hover{--top-forms-border-color: var(--color-line-negative-2)}.top-button.top-style_outline.top-color_pink{--top-button-color: var(--color-text-info);--top-icon-color: var(--color-text-info);--top-icon2-color: var(--color-text-info);--top-button-background-color-hover: var(--color-layer-info-1);--top-button-background-color-active: var(--color-layer-info-2);--top-button-background-color-selected: var(--color-layer-info-3);--top-forms-border-color: var(--color-line-info-1)}.top-button.top-style_outline.top-color_pink:hover{--top-forms-border-color: var(--color-line-info-2)}.top-button.top-style_soft{--top-shadow-darken-1: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none}.top-button.top-style_soft.top-color_theme{--top-button-color: var(--color-text-1);--top-icon-color: var(--color-text-1);--top-icon2-color: var(--color-text-1);--top-button-background-color: var(--color-layer-1);--top-button-background-color-hover: var(--color-layer-2);--top-button-background-color-active: var(--color-layer-3);--top-button-background-color-selected: var(--color-layer-3)}.top-button.top-style_soft.top-color_blue{--top-button-color: var(--color-text-primary);--top-icon-color: var(--color-text-primary);--top-icon2-color: var(--color-text-primary);--top-button-background-color: var(--color-layer-primary-1);--top-button-background-color-hover: var(--color-layer-primary-2);--top-button-background-color-active: var(--color-layer-primary-3);--top-button-background-color-selected: var(--color-layer-primary-3)}.top-button.top-style_soft.top-color_green{--top-button-color: var(--color-text-positive);--top-icon-color: var(--color-text-positive);--top-icon2-color: var(--color-text-positive);--top-button-background-color: var(--color-layer-positive-1);--top-button-background-color-hover: var(--color-layer-positive-2);--top-button-background-color-active: var(--color-layer-positive-3);--top-button-background-color-selected: var(--color-layer-positive-3)}.top-button.top-style_soft.top-color_orange{--top-button-color: var(--color-text-warning);--top-icon-color: var(--color-text-warning);--top-icon2-color: var(--color-text-warning);--top-button-background-color: var(--color-layer-warning-1);--top-button-background-color-hover: var(--color-layer-warning-2);--top-button-background-color-active: var(--color-layer-warning-3);--top-button-background-color-selected: var(--color-layer-warning-3)}.top-button.top-style_soft.top-color_red{--top-button-color: var(--color-text-negative);--top-icon-color: var(--color-text-negative);--top-icon2-color: var(--color-text-negative);--top-button-background-color: var(--color-layer-negative-1);--top-button-background-color-hover: var(--color-layer-negative-2);--top-button-background-color-active: var(--color-layer-negative-3);--top-button-background-color-selected: var(--color-layer-negative-3)}.top-button.top-style_soft.top-color_pink{--top-button-color: var(--color-text-info);--top-icon-color: var(--color-text-info);--top-icon2-color: var(--color-text-info);--top-button-background-color: var(--color-layer-info-1);--top-button-background-color-hover: var(--color-layer-info-2);--top-button-background-color-active: var(--color-layer-info-3);--top-button-background-color-selected: var(--color-layer-info-3)}.top-button.top-style_transparent{--top-shadow-darken-1: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: transparent;--top-button-background-color-hover: transparent;--top-button-background-color-active: transparent;--top-button-background-color-selected: var(--color-steel-200)}.top-button.top-style_transparent:hover{opacity:.8}.top-button.top-style_transparent.top-color_blue{--top-button-color: var(--color-text-primary)}.top-button.top-style_transparent.top-color_green{--top-button-color: var(--color-text-positive)}.top-button.top-style_transparent.top-color_orange{--top-button-color: var(--color-text-warning)}.top-button.top-style_transparent.top-color_red{--top-button-color: var(--color-text-negative)}.top-button.top-style_transparent.top-color_pink{--top-button-color: var(--color-text-info)}.top-button{--top-button-color: var(--color-white);--top-button-background-color: transparent;--top-button-background-color-hover: var(--top-button-background-color);--top-button-background-color-active: var(--top-button-background-color-hover);--top-button-background-color-selected: var(--top-button-background-color-hover);--top-button-box-shadow: none;--top-button-box-shadow-hover: var(--top-shadow-darken-2);--top-button-box-shadow-active: var(--top-shadow-darken-3);--top-button-box-shadow-selected: var(--top-shadow-darken-3);--top-forms-border-width: 0px;--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding))}.top-button>span{pointer-events:none}.top-button>.top-ellipsis{flex-grow:0}.top-button.top-size_xs{--top-forms-padding: var(--top-forms-padding_xs);--top-forms-base-height: var(--top-forms-base-height_xs)}.top-button.top-size_m{--top-forms-padding: var(--top-forms-padding_m);--top-forms-base-height: var(--top-forms-base-height_m)}.top-button.top-size_l{--top-forms-padding: var(--top-forms-padding_l);--top-forms-base-height: var(--top-forms-base-height_l)}.top-button_badge-afterText{order:100}.top-button:not([data-top-icon2])>.top-button_badge-afterText{margin-left:0}.top-forms-optionLabel{flex-grow:1}.top-forms-optionLabel_title{color:var(--color-text-1);min-height:var(--top-forms-option-height);display:flex;align-items:center}.top-forms-optionLabel_title-disabled{color:var(--color-text-3)}.top-forms-optionLabel_description{color:var(--color-text-2);font-size:.85em;line-height:var(--top-forms-option-height)}.top-forms-optionLabel_description-disabled{color:var(--color-text-3)}.top-checkbox{cursor:pointer;display:inline-flex}.top-checkbox_input{cursor:inherit;border-radius:4px;background:var(--color-layout-front-1);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-checkbox_input:before{content:" ";color:#fff;font-family:Topvisor-2;font-size:16px}.top-checkbox_input:hover{border-color:var(--top-forms-border-color-hover);background:var(--color-layer-primary-1)}.top-checkbox_input:checked,.top-checkbox_input:indeterminate{border-color:var(--top-forms-option-color);background:var(--top-forms-option-color)}.top-checkbox_input:checked:before{content:""}.top-checkbox_input:indeterminate:before{content:""}.top-checkbox_input:checked:hover,.top-checkbox_input:indeterminate:hover{border-color:var(--top-forms-option-color-hover);background:var(--top-forms-option-color-hover)}.top-checkbox_input.top-error{border-color:var(--color-bg-negative-1)}.top-checkbox_input.top-error:hover{border-color:var(--color-bg-negative-2)}.top-checkbox_input:checked.top-error,.top-checkbox_input:indeterminate.top-error{background:var(--color-bg-negative-1)}.top-checkbox_input:checked.top-error:hover,.top-checkbox_input:indeterminate.top-error:hover{background:var(--color-bg-negative-2)}.top-hint{--top-icon-size: 16px;--top-icon-width: var(--top-icon-size);border-radius:50%;background:var(--color-layout-front-1);padding:1px;color:var(--color-text-3);line-height:1;z-index:1;pointer-events:all}.top-hint:hover{color:var(--color-text-2)}:root{--top-loadbar-duration: 10s;--top-loadbar-color: var(--color-line-primary-1)}.top-loadbar{background:var(--top-loadbar-color);width:0;height:4px;position:absolute;top:0;left:0;animation:top-loadbar var(--top-loadbar-duration) forwards}@keyframes top-loadbar{0%{width:4px}4%{width:4%}5%{width:5%}to{width:95%}}.top-input{--top-forms_clear-width: 0px;border-radius:var(--top-forms-radius);width:180px;position:relative;display:inline-flex;align-items:center;gap:var(--top-gap-1)}.top-input_input{color:var(--color-text-2);background:var(--top-forms-background-color);height:var(--top-forms-base-height);padding:0;padding-right:max(var(--top-forms-padding),calc(var(--top-icon2-width) + var(--top-forms_clear-width)));padding-left:max(var(--top-forms-padding),var(--top-icon-width))}.top-input_input:hover{background:var(--top-forms-background-color-hover)}.top-input_input:focus{color:var(--color-text-1);border-color:var(--color-line-primary-1);outline:none}.top-input[data-top-icon]:before,.top-input[data-top-icon2]:after{--top-icon-color: var(--color-text-4);--top-icon2-color: var(--color-text-4);position:absolute;z-index:3;font-size:20px}.top-input[data-top-icon]:before{left:0}.top-input[data-top-icon2]:after{right:0}.top-input-withCleaner{--top-forms_clear-width: 24px}.top-input_cleaner[data-top-icon]{--top-icon-size: 16px;--top-icon-width: 20px;--top-icon-color: var(--color-text-3);cursor:pointer;border-radius:50%;width:20px;height:16px;position:absolute;right:calc(var(--top-forms-border-width) + max(var(--top-icon2-width),var(--top-forms-padding) / 2));z-index:1;display:flex;align-items:center;justify-content:center}.top-input_cleaner[data-top-icon]:hover{--top-icon-color: var(--color-text-2)}.top-input_input{width:50%;flex-grow:1}.top-input .top-loadbar{border-radius:var(--top-forms-radius) 0 0 0}.top-input-datepicker{width:calc(105px + var(--top-icon-width) + var(--top-icon2-width))}.top-input_input-date{opacity:0;position:absolute;inset:0;z-index:-1}.top-input_input-date::-webkit-inner-spin-button{display:none}.top-input_input-date::-webkit-calendar-picker-indicator{opacity:0}.top-inputRange{max-width:320px;vertical-align:baseline;display:inline-flex;gap:8px}.top-inputRange_dash{height:var(--top-forms-base-height);color:var(--color-text-4);align-self:flex-end;display:inline-flex;align-items:center}.top-inputRange>.top-input{flex-grow:1}:root{--top-radio-background-color: var(--color-layout-front-1);--top-radio-background-color-hover: var(--top-radio-background-color);--top-radio-background-color-active: var(--top-radio-background-color)}.top-radio{cursor:pointer}.top-radio_input{border-radius:50%;background:var(--color-layout-front-1);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radio_input:hover{border-color:var(--top-forms-border-color-hover);background:var(--color-layer-primary-1)}.top-radio_input:checked{border-color:var(--top-forms-option-color);border-width:5px}.top-radio_input:checked:hover{border-color:var(--color-bg-primary-2)}.top-radio_input.top-error,.top-radio_input.top-error:hover{border-color:var(--color-bg-negative-1)}.top-checkboxSwitcher{cursor:pointer;display:inline-flex;gap:4px}.top-checkboxSwitcher_input{border-radius:9px;border:none;background:var(--color-layer-3);width:36px;height:18px;position:relative}.top-checkboxSwitcher_input:before{content:"";border-radius:50%;background:var(--color-white);width:12px;height:12px;margin:3px;position:absolute;top:0;left:0;transition:left .1s}.top-checkboxSwitcher_input:hover{background:var(--color-layer-4)}.top-checkboxSwitcher_input:checked{background:var(--top-forms-option-color)}.top-checkboxSwitcher_input:checked:hover{background:var(--top-forms-option-color-hover)}.top-checkboxSwitcher_input:checked:before{left:50%}.top-checkboxSwitcher_input.top-error{background:var(--color-layer-negative-3)}.top-checkboxSwitcher_input.top-error:hover{background:var(--color-layer-negative-4)}.top-checkboxSwitcher_input.top-error:checked{background:var(--color-bg-negative-2)}.top-checkboxSwitcher_input.top-error:checked:hover{background:var(--color-bg-negative-1)}.top-textarea{width:180px;display:inline-flex;align-items:center;position:relative}.top-textarea_textarea{color:var(--color-text-1);background:var(--top-forms-background-color);width:100%;padding:var(--top-forms-padding);resize:none}.top-textarea_textarea:hover{background:var(--top-forms-background-color-hover)}.top-textarea_textarea:focus{border-color:var(--color-line-primary-1);outline:none}html .top-textarea_textarea.top-textarea_textarea-expandable{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.top-textarea_pseudoContent{box-sizing:border-box;min-height:var(--13a3474e);padding:var(--top-forms-padding);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;opacity:0;z-index:-1}.top-textarea_hint{position:absolute;top:2px;right:2px}.top-select{color:var(--color-text-1);--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);align-items:center;width:180px;max-width:100%;display:inline-flex}.top-select-error{--top-icon-color: var(--color-text-negative);--top-icon2-color: var(--color-text-negative)}.top-select_select{background-color:var(--top-forms-background-color);padding-left:var(--top-forms-padding);text-indent:clamp(0px,calc(var(--top-icon-both-width) - var(--top-forms-padding)),calc(var(--top-icon-both-width) - var(--top-forms-padding)));width:100%;height:var(--top-forms-base-height);text-overflow:ellipsis;white-space:nowrap;flex-grow:1;overflow:hidden}.top-select optgroup{color:var(--color-text-1);font-style:normal}.top-select option:not(:disabled){background:var(--color-layout-front-1);color:var(--color-text-1)}.top-select option:disabled{background:unset;color:unset}@-moz-document url-prefix(){.top-select_select{text-indent:calc(clamp(0px,calc(var(--top-icon-both-width) - var(--top-forms-padding)),calc(var(--top-icon-both-width) - var(--top-forms-padding)))/2)}}@media only screen and (min-width: 900px){.top-changer{cursor:pointer;border-radius:100%;width:0;transform:translate(-44px);color:var(--color-text-2);font-size:16px;line-height:1;display:none;z-index:2;order:4}.top-changer:hover{color:var(--color-text-primary)}.top-changer:after{content:"";background-color:var(--top-forms-background-color);font-family:Topvisor-2}*:hover>.top-changer{display:block}}
+.top-avatar{width:var(--62448408);height:var(--62448408);display:flex;flex-grow:0;flex-shrink:0;position:relative;top:0;left:0}.top-avatar_image{border-radius:50%;width:100%;height:100%}.top-avatar_status{border-radius:50%;border:2px solid var(--color-layout-front-1);background-color:var(--color-bg-positive-1);width:25%;height:25%;position:absolute;right:0;bottom:0}.top-button{cursor:pointer;box-sizing:border-box;box-shadow:var(--top-button-box-shadow);border-radius:var(--top-forms-radius);border:var(--top-forms-border-width) solid var(--top-forms-border-color);background-color:var(--top-button-background-color);height:var(--top-forms-base-height);padding:0 var(--top-forms-padding);color:var(--top-button-color);line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,border-color .15s,box-shadow .15s}.top-button:hover{box-shadow:var(--top-button-box-shadow-hover);background-color:var(--top-button-background-color-hover)}.top-button:active{box-shadow:var(--top-button-box-shadow-active);background-color:var(--top-button-background-color-active)}.top-button.top-active{box-shadow:var(--top-button-box-shadow-selected);background-color:var(--top-button-background-color-selected)}.top-button.top-button-progress{cursor:help;box-shadow:inset #00000080 0 0 64px;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:32px 32px;animation:progress 1s linear infinite}@keyframes progress{0%{background-position-x:0px}to{background-position-x:32px}}a.top-button,button.top-button{min-width:100px;text-decoration:none}a.top-button,a.top-button:hover{min-width:var(--top-forms-base-height);text-decoration:none}.top-button[data-top-icon]:not(:empty):not(.top-button-withoutText),.top-button[data-top-icon2]:not(:empty):not(.top-button-withoutText){justify-content:flex-start;text-align:left}.top-button[data-top-icon]{padding-left:0}.top-button[data-top-icon2]{padding-right:var(--top-select_arrow-width)}.top-button[data-top-icon2]:after{margin-left:auto}.top-button:empty,.top-button.top-button-withoutText{min-width:var(--top-forms-base-height)}.top-button[data-top-icon]:empty,.top-button[data-top-icon2]:empty,.top-button[data-top-icon].top-button-withoutText,.top-button[data-top-icon2].top-button-withoutText{padding:0}.top-button.top-color_blue{--top-button-background-color: var(--color-bg-primary-1)}.top-button.top-color_green{--top-button-background-color: var(--color-bg-positive-1)}.top-button.top-color_orange{--top-button-background-color: var(--color-bg-warning-1)}.top-button.top-color_red{--top-button-background-color: var(--color-bg-negative-1)}.top-button.top-color_pink{--top-button-background-color: var(--color-bg-info-1)}.top-button.top-color_theme{--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-color: var(--color-text-1);--top-button-background-color: transparent;--top-button-background-color-hover: var(--color-layer-1);--top-button-background-color-active: var(--color-layer-3);--top-button-background-color-selected: var(--color-layer-2)}.top-button.top-color_theme:hover{--top-icon-color: var(--color-text-1);--top-icon2-color: var(--color-text-1)}.top-button.top-color_theme.top-active{--top-icon-color: var(--color-text-2)}.top-button.top-style_outline{--top-button-box-shadow: none;--top-button-box-shadow-hover: none;--top-button-box-shadow-active: none;--top-button-box-shadow-selected: none;--top-button-background-color: var(--color-layout-front-1);--top-forms-border-width: 1px}.top-button.top-style_outline.top-color_theme{--top-button-color: var(--color-text-2);--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);--top-button-background-color-hover: var(--color-layer-1);--top-button-background-color-active: var(--color-layer-2);--top-button-background-color-selected: var(--color-layer-3);--top-forms-border-color: var(--color-line-3)}.top-button.top-style_outline.top-color_theme:hover{--top-forms-border-color: var(--color-line-4)}.top-button.top-style_outline.top-color_blue{--top-button-color: var(--color-text-primary);--top-icon-color: var(--color-text-primary);--top-icon2-color: var(--color-text-primary);--top-button-background-color-hover: var(--color-layer-primary-1);--top-button-background-color-active: var(--color-layer-primary-2);--top-button-background-color-selected: var(--color-layer-primary-3);--top-forms-border-color: var(--color-line-primary-1)}.top-button.top-style_outline.top-color_blue:hover{--top-forms-border-color: var(--color-line-primary-2)}.top-button.top-style_outline.top-color_green{--top-button-color: var(--color-text-positive);--top-icon-color: var(--color-text-positive);--top-icon2-color: var(--color-text-positive);--top-button-background-color-hover: var(--color-layer-positive-1);--top-button-background-color-active: var(--color-layer-positive-2);--top-button-background-color-selected: var(--color-layer-positive-3);--top-forms-border-color: var(--color-line-positive-1)}.top-button.top-style_outline.top-color_green:hover{--top-forms-border-color: var(--color-line-positive-2)}.top-button.top-style_outline.top-color_orange{--top-button-color: var(--color-text-warning);--top-icon-color: var(--color-text-warning);--top-icon2-color: var(--color-text-warning);--top-button-background-color-hover: var(--color-layer-warning-1);--top-button-background-color-active: var(--color-layer-warning-2);--top-button-background-color-selected: var(--color-layer-warning-3);--top-forms-border-color: var(--color-line-warning-1)}.top-button.top-style_outline.top-color_orange:hover{--top-forms-border-color: var(--color-line-warning-2)}.top-button.top-style_outline.top-color_red{--top-button-color: var(--color-text-negative);--top-icon-color: var(--color-text-negative);--top-icon2-color: var(--color-text-negative);--top-button-background-color-hover: var(--color-layer-negative-1);--top-button-background-color-active: var(--color-layer-negative-2);--top-button-background-color-selected: var(--color-layer-negative-3);--top-forms-border-color: var(--color-line-negative-1)}.top-button.top-style_outline.top-color_red:hover{--top-forms-border-color: var(--color-line-negative-2)}.top-button.top-style_outline.top-color_pink{--top-button-color: var(--color-text-info);--top-icon-color: var(--color-text-info);--top-icon2-color: var(--color-text-info);--top-button-background-color-hover: var(--color-layer-info-1);--top-button-background-color-active: var(--color-layer-info-2);--top-button-background-color-selected: var(--color-layer-info-3);--top-forms-border-color: var(--color-line-info-1)}.top-button.top-style_outline.top-color_pink:hover{--top-forms-border-color: var(--color-line-info-2)}.top-button.top-style_soft{--top-shadow-darken-1: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none}.top-button.top-style_soft.top-color_theme{--top-button-color: var(--color-text-1);--top-icon-color: var(--color-text-1);--top-icon2-color: var(--color-text-1);--top-button-background-color: var(--color-layer-1);--top-button-background-color-hover: var(--color-layer-2);--top-button-background-color-active: var(--color-layer-3);--top-button-background-color-selected: var(--color-layer-3)}.top-button.top-style_soft.top-color_blue{--top-button-color: var(--color-text-primary);--top-icon-color: var(--color-text-primary);--top-icon2-color: var(--color-text-primary);--top-button-background-color: var(--color-layer-primary-1);--top-button-background-color-hover: var(--color-layer-primary-2);--top-button-background-color-active: var(--color-layer-primary-3);--top-button-background-color-selected: var(--color-layer-primary-3)}.top-button.top-style_soft.top-color_green{--top-button-color: var(--color-text-positive);--top-icon-color: var(--color-text-positive);--top-icon2-color: var(--color-text-positive);--top-button-background-color: var(--color-layer-positive-1);--top-button-background-color-hover: var(--color-layer-positive-2);--top-button-background-color-active: var(--color-layer-positive-3);--top-button-background-color-selected: var(--color-layer-positive-3)}.top-button.top-style_soft.top-color_orange{--top-button-color: var(--color-text-warning);--top-icon-color: var(--color-text-warning);--top-icon2-color: var(--color-text-warning);--top-button-background-color: var(--color-layer-warning-1);--top-button-background-color-hover: var(--color-layer-warning-2);--top-button-background-color-active: var(--color-layer-warning-3);--top-button-background-color-selected: var(--color-layer-warning-3)}.top-button.top-style_soft.top-color_red{--top-button-color: var(--color-text-negative);--top-icon-color: var(--color-text-negative);--top-icon2-color: var(--color-text-negative);--top-button-background-color: var(--color-layer-negative-1);--top-button-background-color-hover: var(--color-layer-negative-2);--top-button-background-color-active: var(--color-layer-negative-3);--top-button-background-color-selected: var(--color-layer-negative-3)}.top-button.top-style_soft.top-color_pink{--top-button-color: var(--color-text-info);--top-icon-color: var(--color-text-info);--top-icon2-color: var(--color-text-info);--top-button-background-color: var(--color-layer-info-1);--top-button-background-color-hover: var(--color-layer-info-2);--top-button-background-color-active: var(--color-layer-info-3);--top-button-background-color-selected: var(--color-layer-info-3)}.top-button.top-style_transparent{--top-shadow-darken-1: none;--top-shadow-darken-2: none;--top-shadow-darken-3: none;--top-button-color: var(--color-text);--top-button-background-color: transparent;--top-button-background-color-hover: transparent;--top-button-background-color-active: transparent;--top-button-background-color-selected: var(--color-steel-200)}.top-button.top-style_transparent:hover{opacity:.8}.top-button.top-style_transparent.top-color_blue{--top-button-color: var(--color-text-primary)}.top-button.top-style_transparent.top-color_green{--top-button-color: var(--color-text-positive)}.top-button.top-style_transparent.top-color_orange{--top-button-color: var(--color-text-warning)}.top-button.top-style_transparent.top-color_red{--top-button-color: var(--color-text-negative)}.top-button.top-style_transparent.top-color_pink{--top-button-color: var(--color-text-info)}.top-button{--top-button-color: var(--color-white);--top-button-background-color: transparent;--top-button-background-color-hover: var(--top-button-background-color);--top-button-background-color-active: var(--top-button-background-color-hover);--top-button-background-color-selected: var(--top-button-background-color-hover);--top-button-box-shadow: none;--top-button-box-shadow-hover: var(--top-shadow-darken-2);--top-button-box-shadow-active: var(--top-shadow-darken-3);--top-button-box-shadow-selected: var(--top-shadow-darken-3);--top-forms-border-width: 0px;--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding))}.top-button>span{pointer-events:none}.top-button>.top-ellipsis{flex-grow:0}.top-button.top-size_xs{--top-forms-padding: var(--top-forms-padding_xs);--top-forms-base-height: var(--top-forms-base-height_xs)}.top-button.top-size_m{--top-forms-padding: var(--top-forms-padding_m);--top-forms-base-height: var(--top-forms-base-height_m)}.top-button.top-size_l{--top-forms-padding: var(--top-forms-padding_l);--top-forms-base-height: var(--top-forms-base-height_l)}.top-button_badge-afterText{order:100}.top-button:not([data-top-icon2])>.top-button_badge-afterText{margin-left:0}.top-forms-optionLabel{flex-grow:1}.top-forms-optionLabel_title{color:var(--color-text-1);min-height:var(--top-forms-option-height);display:flex;align-items:center}.top-forms-optionLabel_title-disabled{color:var(--color-text-3)}.top-forms-optionLabel_description{color:var(--color-text-2);font-size:.85em;line-height:var(--top-forms-option-height)}.top-forms-optionLabel_description-disabled{color:var(--color-text-3)}.top-checkbox{cursor:pointer;display:inline-flex}.top-checkbox_input{cursor:inherit;border-radius:4px;background:var(--color-layout-front-1);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-checkbox_input:before{content:" ";color:#fff;font-family:Topvisor-2;font-size:16px}.top-checkbox_input:hover{border-color:var(--top-forms-border-color-hover);background:var(--color-layer-primary-1)}.top-checkbox_input:checked,.top-checkbox_input:indeterminate{border-color:var(--top-forms-option-color);background:var(--top-forms-option-color)}.top-checkbox_input:checked:before{content:""}.top-checkbox_input:indeterminate:before{content:""}.top-checkbox_input:checked:hover,.top-checkbox_input:indeterminate:hover{border-color:var(--top-forms-option-color-hover);background:var(--top-forms-option-color-hover)}.top-checkbox_input.top-error{border-color:var(--color-bg-negative-1)}.top-checkbox_input.top-error:hover{border-color:var(--color-bg-negative-2)}.top-checkbox_input:checked.top-error,.top-checkbox_input:indeterminate.top-error{background:var(--color-bg-negative-1)}.top-checkbox_input:checked.top-error:hover,.top-checkbox_input:indeterminate.top-error:hover{background:var(--color-bg-negative-2)}.top-hint{--top-icon-size: 16px;--top-icon-width: var(--top-icon-size);border-radius:50%;background:var(--color-layout-front-1);padding:1px;color:var(--color-text-3);line-height:1;z-index:1;pointer-events:all}.top-hint:hover{color:var(--color-text-2)}:root{--top-loadbar-duration: 10s;--top-loadbar-color: var(--color-line-primary-1)}.top-loadbar{background:var(--top-loadbar-color);width:0;height:4px;position:absolute;top:0;left:0;animation:top-loadbar var(--top-loadbar-duration) forwards}@keyframes top-loadbar{0%{width:4px}4%{width:4%}5%{width:5%}to{width:95%}}.top-input{--top-forms_clear-width: 0px;border-radius:var(--top-forms-radius);width:180px;position:relative;display:inline-flex;align-items:center;gap:var(--top-gap-1)}.top-input_input{color:var(--color-text-2);background:var(--top-forms-background-color);height:var(--top-forms-base-height);padding:0;padding-right:max(var(--top-forms-padding),calc(var(--top-icon2-width) + var(--top-forms_clear-width)));padding-left:max(var(--top-forms-padding),var(--top-icon-width))}.top-input_input:hover{background:var(--top-forms-background-color-hover)}.top-input_input:focus{color:var(--color-text-1);border-color:var(--color-line-primary-1);outline:none}.top-input[data-top-icon]:before,.top-input[data-top-icon2]:after{--top-icon-color: var(--color-text-4);--top-icon2-color: var(--color-text-4);position:absolute;z-index:3;font-size:20px}.top-input[data-top-icon]:before{left:0}.top-input[data-top-icon2]:after{right:0}.top-input-withCleaner{--top-forms_clear-width: 24px}.top-input_cleaner[data-top-icon]{--top-icon-size: 16px;--top-icon-width: 20px;--top-icon-color: var(--color-text-3);cursor:pointer;border-radius:50%;width:20px;height:16px;position:absolute;right:calc(var(--top-forms-border-width) + max(var(--top-icon2-width),var(--top-forms-padding) / 2));z-index:1;display:flex;align-items:center;justify-content:center}.top-input_cleaner[data-top-icon]:hover{--top-icon-color: var(--color-text-2)}.top-input_input{width:50%;flex-grow:1}.top-input .top-loadbar{border-radius:var(--top-forms-radius) 0 0 0}.top-input-datepicker{width:calc(105px + var(--top-icon-width) + var(--top-icon2-width))}.top-input_input-date{opacity:0;position:absolute;inset:0;z-index:-1}.top-input_input-date::-webkit-inner-spin-button{display:none}.top-input_input-date::-webkit-calendar-picker-indicator{opacity:0}.top-inputRange{max-width:320px;vertical-align:baseline;display:inline-flex;gap:8px}.top-inputRange_dash{height:var(--top-forms-base-height);color:var(--color-text-4);align-self:flex-end;display:inline-flex;align-items:center}.top-inputRange>.top-input{flex-grow:1}:root{--top-radio-background-color: var(--color-layout-front-1);--top-radio-background-color-hover: var(--top-radio-background-color);--top-radio-background-color-active: var(--top-radio-background-color)}.top-radio{cursor:pointer}.top-radio_input{border-radius:50%;background:var(--color-layout-front-1);border:1px solid var(--top-forms-border-color);width:calc(var(--top-forms-option-height) - 3px * 2);height:calc(var(--top-forms-option-height) - 3px * 2)}.top-radio_input:hover{border-color:var(--top-forms-border-color-hover);background:var(--color-layer-primary-1)}.top-radio_input:checked{border-color:var(--top-forms-option-color);border-width:5px}.top-radio_input:checked:hover{border-color:var(--color-bg-primary-2)}.top-radio_input.top-error,.top-radio_input.top-error:hover{border-color:var(--color-bg-negative-1)}.top-checkboxSwitcher{cursor:pointer;display:inline-flex;gap:4px}.top-checkboxSwitcher_input{border-radius:9px;border:none;background:var(--color-layer-3);width:36px;height:18px;position:relative}.top-checkboxSwitcher_input:before{content:"";border-radius:50%;background:var(--color-white);width:12px;height:12px;margin:3px;position:absolute;top:0;left:0;transition:left .1s}.top-checkboxSwitcher_input:hover{background:var(--color-layer-4)}.top-checkboxSwitcher_input:checked{background:var(--top-forms-option-color)}.top-checkboxSwitcher_input:checked:hover{background:var(--top-forms-option-color-hover)}.top-checkboxSwitcher_input:checked:before{left:50%}.top-checkboxSwitcher_input.top-error{background:var(--color-layer-negative-3)}.top-checkboxSwitcher_input.top-error:hover{background:var(--color-layer-negative-4)}.top-checkboxSwitcher_input.top-error:checked{background:var(--color-bg-negative-2)}.top-checkboxSwitcher_input.top-error:checked:hover{background:var(--color-bg-negative-1)}.top-textarea{width:180px;display:inline-flex;align-items:center;position:relative}.top-textarea_textarea{color:var(--color-text-1);background:var(--top-forms-background-color);width:100%;padding:var(--top-forms-padding);resize:none}.top-textarea_textarea:hover{background:var(--top-forms-background-color-hover)}.top-textarea_textarea:focus{border-color:var(--color-line-primary-1);outline:none}html .top-textarea_textarea.top-textarea_textarea-expandable{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}.top-textarea_pseudoContent{box-sizing:border-box;min-height:var(--445cd2c3);padding:var(--top-forms-padding);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;opacity:0;z-index:-1}.top-textarea_hint{position:absolute;top:2px;right:2px}.top-select{color:var(--color-text-1);--top-icon-color: var(--color-text-2);--top-icon2-color: var(--color-text-2);align-items:center;width:180px;max-width:100%;display:inline-flex}.top-select-error{--top-icon-color: var(--color-text-negative);--top-icon2-color: var(--color-text-negative)}.top-select_select{background-color:var(--top-forms-background-color);padding-left:var(--top-forms-padding);text-indent:clamp(0px,calc(var(--top-icon-both-width) - var(--top-forms-padding)),calc(var(--top-icon-both-width) - var(--top-forms-padding)));width:100%;height:var(--top-forms-base-height);text-overflow:ellipsis;white-space:nowrap;flex-grow:1;overflow:hidden}.top-select optgroup{color:var(--color-text-1);font-style:normal}.top-select option:not(:disabled){background:var(--color-layout-front-1);color:var(--color-text-1)}.top-select option:disabled{background:unset;color:unset}@-moz-document url-prefix(){.top-select_select{text-indent:calc(clamp(0px,calc(var(--top-icon-both-width) - var(--top-forms-padding)),calc(var(--top-icon-both-width) - var(--top-forms-padding)))/2)}}@media only screen and (min-width: 900px){.top-changer{cursor:pointer;border-radius:100%;width:0;transform:translate(-44px);color:var(--color-text-2);font-size:16px;line-height:1;display:none;z-index:2;order:4}.top-changer:hover{color:var(--color-text-primary)}.top-changer:after{content:"";background-color:var(--top-forms-background-color);font-family:Topvisor-2}*:hover>.top-changer{display:block}}

package/charts/charts.amd.js

@@ -1,2 +1,2 @@
-define(["require","exports","vue","../.chunks/forms-JhDIERVr.amd","../utils/number.amd","../require/css.amd!../assets/charts.css"],function(H,l,e,s,c){"use strict";if(typeof e>"u")var e=window.Vue;const h=90,d=10,C=["data-top-icon"],v={class:"top-miniChart_chart"},_=["onMouseenter"],y={class:"top-miniChart_data"},f={class:"top-miniChart_dataValue"},g=["innerHTML"],M=e.defineComponent({__name:"miniChart",props:e.mergeModels({title:{},gIcon:{},color:{default:"blue"},dates:{},values:{},activeDates:{},keysForDyn:{},isInvert:{type:Boolean},numberCols:{default:h},additionalHTML:{},modelValue:{},valueSuffix:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(u){const o=u,m=e.useModel(u,"modelValue"),k=t=>{let n=B.value;o.isInvert&&(t-=1,n-=1);let a=n>0?Math.round(t/n*(100-d)):0;return o.isInvert?100-a:a+d},E=t=>o.activeDates.includes(t),B=e.computed(()=>Math.max(...o.values)),b=e.computed(()=>o.dates.slice().reverse()),N=e.computed(()=>o.dates.length?o.numberCols-o.dates.length:0),p=()=>{m.value=null},G=(t,n,a)=>{m.value={elCol:t.target,date:s.dateFormat(n),value:a===null?"--":a+(o.valueSuffix??"")}},i=e.computed(()=>{const t=o.values[o.keysForDyn.start],a=o.values[o.keysForDyn.end]-t;return(a<0?-1:1)*c.percentOfNumber(Math.abs(a))}),S=e.computed(()=>{let t="stay";return o.isInvert?(i.value>0&&(t="down"),i.value<0&&(t="up")):(i.value>0&&(t="up"),i.value<0&&(t="down")),t});return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass({"top-miniChart":!0,[`top-color_${t.color}`]:!0})},[e.createElementVNode("div",{class:"top-miniChart_title","data-top-icon":t.gIcon},e.toDisplayString(t.title),9,C),e.createElementVNode("div",v,[e.createElementVNode("div",{class:"top-miniChart_chartGrid",onMouseleave:n[1]||(n[1]=a=>p())},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(a,r)=>(e.openBlock(),e.createElementBlock("div",{key:r,class:e.normalizeClass({"top-miniChart_chartGridCol":!0,"top-active":E(a)}),onMouseenter:T=>G(T,a,t.values[t.values.length-r-1])},[e.createElementVNode("div",{style:e.normalizeStyle("height:"+k(t.values[t.values.length-r-1])+"%")},null,4)],42,_))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,()=>(e.openBlock(),e.createElementBlock("div",{class:"top-miniChart_chartGridCol top-miniChart_chartGridCol-none",onMouseenter:n[0]||(n[0]=a=>p())},n[2]||(n[2]=[e.createElementVNode("div",null,null,-1)]),32))),256))],32)]),e.createElementVNode("div",y,[e.createElementVNode("span",{class:e.normalizeClass({"top-miniChart_dataDynamic":!0,[`top-miniChart_dataDynamic-direction_${S.value}`]:!0})},e.toDisplayString(Math.abs(i.value)||""),3),e.createElementVNode("span",f,e.toDisplayString(e.unref(c.percentOfNumber)(t.values[t.values.length-1])||0),1)]),t.additionalHTML?(e.openBlock(),e.createElementBlock("div",{key:0,innerHTML:t.additionalHTML},null,8,g)):e.createCommentVNode("",!0)],2))}}),D={$style:{"top-miniChart":"top-miniChart","top-miniChart_title":"top-miniChart_title","top-color_orange":"top-color_orange","top-color_pink":"top-color_pink","top-color_blue":"top-color_blue","top-miniChart_data":"top-miniChart_data","top-miniChart_dataDynamic":"top-miniChart_dataDynamic","top-miniChart_dataDynamic-direction_up":"top-miniChart_dataDynamic-direction_up","top-miniChart_dataDynamic-direction_stay":"top-miniChart_dataDynamic-direction_stay","top-miniChart_dataDynamic-direction_down":"top-miniChart_dataDynamic-direction_down","top-miniChart_chartGrid":"top-miniChart_chartGrid","top-miniChart_chartGridCol":"top-miniChart_chartGridCol","top-active":"top-active","top-miniChart_chartGridCol-none":"top-miniChart_chartGridCol-none","top-miniChart_chart":"top-miniChart_chart"}},V=s._export_sfc(M,[["__cssModules",D]]);l.TopMiniChart=V,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+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"})});
 //# 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/charts.ts"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { Props } from './miniChart';\r\nimport { computed } from 'vue';\r\nimport { dateFormat } from '@/core/utils/date';\r\nimport { percentOfNumber } from '@/core/utils/number';\r\nimport { defaultNumberCols, minHeight } from './utils/consts';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: 'blue',\r\n\tnumberCols: defaultNumberCols,\r\n});\r\nconst model = defineModel<Props['modelValue']>();\r\n\r\n/**\r\n * Расчет высоты колонки (в процентах)\r\n */\r\nconst genColHeight = (value: number): number => {\r\n\tlet maximumValue = maxValue.value;\r\n\r\n\t// для графиков средней и медианной делаем максимум 1\r\n\tif (props.isInvert) {\r\n\t\tvalue -= 1;\r\n\t\tmaximumValue -= 1;\r\n\t}\r\n\r\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\r\n\tif (props.isInvert) return 100 - height;\r\n\r\n\treturn height + minHeight;\r\n};\r\n\r\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\r\n\r\nconst maxValue = computed(() => Math.max(...props.values));\r\n\r\n/**\r\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\r\n */\r\nconst reversedDates = computed(() => props.dates.slice().reverse());\r\n\r\n/**\r\n * Кол-во пустых колонок\r\n */\r\nconst numOfEmptyCols = computed(() => {\r\n\tif (!props.dates.length) return 0;\r\n\r\n\treturn props.numberCols - props.dates.length;\r\n});\r\n\r\nconst resetModel = () => {\r\n\tmodel.value = null;\r\n};\r\n\r\nconst setModel = (e: Event, date: string, value: number | null) => {\r\n\tmodel.value = {\r\n\t\telCol: e.target,\r\n\t\tdate: dateFormat(date),\r\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\r\n\t};\r\n};\r\n\r\n/**\r\n * Возвращает численный показатель динамики графика\r\n */\r\nconst dynamic = computed(() => {\r\n\tconst prevPeriodValue = props.values[props.keysForDyn.start];\r\n\tconst currentValue = props.values[props.keysForDyn.end];\r\n\tconst dynValue = currentValue - prevPeriodValue;\r\n\tconst sign = dynValue < 0 ? -1 : 1;\r\n\r\n\treturn sign * (percentOfNumber(Math.abs(dynValue)) as number);\r\n});\r\n\r\nconst dynamicDirection = computed(() => {\r\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\r\n\r\n\tif (!props.isInvert) {\r\n\t\tif (dynamic.value > 0) direction = 'up';\r\n\t\tif (dynamic.value < 0) direction = 'down';\r\n\t} else {\r\n\t\tif (dynamic.value > 0) direction = 'down';\r\n\t\tif (dynamic.value < 0) direction = 'up';\r\n\t}\r\n\r\n\treturn direction;\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t['top-miniChart']: true,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tclass=\"top-miniChart_title\"\r\n\t\t\t:data-top-icon=\"gIcon\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div class=\"top-miniChart_chart\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\r\n\t\t\t\t@mouseleave=\"resetModel()\"\r\n\t\t\t>\r\n\t\t\t\t<div\r\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\r\n\t\t\t\t\t:key=\"i\"\r\n\t\t\t\t\t:class=\"{\r\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\r\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\r\n\t\t\t\t\t}\"\r\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\r\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\r\n\t\t\t\t\t@mouseenter=\"resetModel()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div></div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"top-miniChart_data\">\r\n\t\t\t<span :class=\"{\r\n\t\t\t\t['top-miniChart_dataDynamic']: true,\r\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\r\n\t\t\t}\">\r\n\t\t\t\t{{ Math.abs(dynamic) || '' }}\r\n\t\t\t</span>\r\n\t\t\t<span class=\"top-miniChart_dataValue\">\r\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\r\n\t\t\t</span>\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"additionalHTML\"\r\n\t\t\tv-html=\"additionalHTML\"\r\n\t\t/>\r\n\t</div>\r\n\r\n</template>\r\n<style module src=\"./styles/miniChart.css\"></style>\r\n","import type { ComponentCustomProps } from 'vue';\r\n\r\nimport MiniChart from './miniChart/miniChart.vue';\r\n\r\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps"],"names":["props","__props","genColHeight","value","maximumValue","maxValue","height","minHeight","isActiveDate","date","vue","reversedDates","numOfEmptyCols","model","e","forms","dynamic","prevPeriodValue","dynValue","utils_number","dynamicDirection","direction","TopMiniChart"],"mappings":"4qBAOA,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,uBAIA,MAAAC,EAAA,OACJ,KAAAC,EAAA,WAAAN,CAAA,EACY,MAAAN,IAAA,KAAA,KAAAA,GAAAH,EAAA,aAAA,GACwC,CAC9D,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,8wEChFDsB"}
+{"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"}

package/charts/charts.js

@@ -1,12 +1,12 @@
-import { Core as S } from "../core/app.js";
-import { defineComponent as L, mergeModels as T, useModel as I, computed as l, openBlock as n, createElementBlock as r, normalizeClass as m, createElementVNode as i, toDisplayString as c, Fragment as C, renderList as v, normalizeStyle as F, unref as N, createCommentVNode as $ } from "vue";
-import { d as w, b as B } from "../.chunks/forms-Dm3JmuO3.es.js";
-import { percentOfNumber as _ } from "../utils/number.js";
-const H = ["../assets/charts.css"].map((d) => import.meta.resolve(d));
-S.insertCSSLinkToPage(H, !0);
-const E = 90, y = 10, z = ["data-top-icon"], O = { class: "top-miniChart_chart" }, P = ["onMouseenter"], A = { class: "top-miniChart_data" }, j = { class: "top-miniChart_dataValue" }, q = ["innerHTML"], J = /* @__PURE__ */ L({
+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 { 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({
   __name: "miniChart",
-  props: /* @__PURE__ */ T({
+  props: /* @__PURE__ */ S({
     title: {},
     gIcon: {},
     color: { default: "blue" },
@@ -15,106 +15,159 @@ const E = 90, y = 10, z = ["data-top-icon"], O = { class: "top-miniChart_chart"
     activeDates: {},
     keysForDyn: {},
     isInvert: { type: Boolean },
-    numberCols: { default: E },
+    numberCols: { default: A },
     additionalHTML: {},
     modelValue: {},
-    valueSuffix: {}
+    valueSuffix: {},
+    hideChartInMobile: { type: Boolean }
   }, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(d) {
-    const e = d, p = I(d, "modelValue"), f = (t) => {
-      let a = g.value;
-      e.isInvert && (t -= 1, a -= 1);
-      let o = a > 0 ? Math.round(t / a * (100 - y)) : 0;
-      return e.isInvert ? 100 - o : o + y;
-    }, M = (t) => e.activeDates.includes(t), g = l(() => Math.max(...e.values)), D = l(() => e.dates.slice().reverse()), V = l(() => e.dates.length ? e.numberCols - e.dates.length : 0), h = () => {
-      p.value = null;
-    }, b = (t, a, o) => {
-      p.value = {
-        elCol: t.target,
-        date: w(a),
-        value: o === null ? "--" : o + (e.valueSuffix ?? "")
-      };
-    }, s = l(() => {
-      const t = e.values[e.keysForDyn.start], o = e.values[e.keysForDyn.end] - t;
-      return (o < 0 ? -1 : 1) * _(Math.abs(o));
-    }), k = l(() => {
-      let t = "stay";
-      return e.isInvert ? (s.value > 0 && (t = "down"), s.value < 0 && (t = "up")) : (s.value > 0 && (t = "up"), s.value < 0 && (t = "down")), t;
+  setup(v) {
+    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 = () => {
+      d.value = null;
+    }, i = (e, o, l) => {
+      e.target instanceof HTMLElement && (d.value = {
+        elCol: e.target,
+        date: X(o),
+        value: l === null ? "--" : l + (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(() => {
+      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, a) => (n(), r("div", {
-      class: m({
+    return (e, o) => (a(), s("div", {
+      class: f({
         "top-miniChart": !0,
-        [`top-color_${t.color}`]: !0
+        "top-miniChart_hideChartInMobile": e.hideChartInMobile,
+        [`top-color_${e.color}`]: !0
       })
     }, [
-      i("div", {
-        class: "top-miniChart_title",
-        "data-top-icon": t.gIcon
-      }, c(t.title), 9, z),
-      i("div", O, [
-        i("div", {
+      r("div", {
+        class: "top-miniChart_title top-ellipsis",
+        "data-top-icon": e.gIcon
+      }, g(e.title), 9, U),
+      r("div", W, [
+        r("div", {
           class: "top-miniChart_chartGrid",
-          onMouseleave: a[1] || (a[1] = (o) => h())
+          onMouseleave: o[1] || (o[1] = (l) => y())
         }, [
-          (n(!0), r(C, null, v(D.value, (o, u) => (n(), r("div", {
-            key: u,
-            class: m({
+          (a(!0), s(k, null, w(m.value, (l, _) => (a(), s("div", {
+            class: f({
               "top-miniChart_chartGridCol": !0,
-              "top-active": M(o)
+              "top-active": C(l)
             }),
-            onMouseenter: (G) => b(G, o, t.values[t.values.length - u - 1])
+            onMouseenter: (B) => i(B, l, e.values[e.values.length - _ - 1])
           }, [
-            i("div", {
-              style: F("height:" + f(t.values[t.values.length - u - 1]) + "%")
+            r("div", {
+              style: L("height:" + u(e.values[e.values.length - _ - 1]) + "%")
             }, null, 4)
-          ], 42, P))), 128)),
-          (n(!0), r(C, null, v(V.value, () => (n(), r("div", {
+          ], 42, Y))), 256)),
+          (a(!0), s(k, null, w(M.value, () => (a(), s("div", {
             class: "top-miniChart_chartGridCol top-miniChart_chartGridCol-none",
-            onMouseenter: a[0] || (a[0] = (o) => h())
-          }, a[2] || (a[2] = [
-            i("div", null, null, -1)
+            onMouseenter: o[0] || (o[0] = (l) => y())
+          }, o[2] || (o[2] = [
+            r("div", null, null, -1)
           ]), 32))), 256))
         ], 32)
       ]),
-      i("div", A, [
-        i("span", {
-          class: m({
+      r("div", j, [
+        r("span", {
+          class: f({
             "top-miniChart_dataDynamic": !0,
-            [`top-miniChart_dataDynamic-direction_${k.value}`]: !0
+            [`top-miniChart_dataDynamic-direction_${h.value}`]: !0
           })
-        }, c(Math.abs(s.value) || ""), 3),
-        i("span", j, c(N(_)(t.values[t.values.length - 1]) || 0), 1)
+        }, g(Math.abs(n.value) || ""), 3),
+        r("span", q, g(F(I)(e.values[e.values.length - 1]) || 0), 1)
       ]),
-      t.additionalHTML ? (n(), r("div", {
+      e.additionalHTML ? (a(), s("div", {
         key: 0,
-        innerHTML: t.additionalHTML
-      }, null, 8, q)) : $("", !0)
+        innerHTML: e.additionalHTML
+      }, null, 8, J)) : H("", !0)
+    ], 2));
+  }
+}), Q = {
+  key: 0,
+  class: "top-miniCharts_pages"
+}, Z = ["onClick"], x = /* @__PURE__ */ D({
+  __name: "miniCharts",
+  props: /* @__PURE__ */ S({
+    modelValue: {},
+    countCharts: {},
+    hideChartInMobile: { type: Boolean }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(v) {
+    const t = v, d = $(v, "modelValue"), u = b(null);
+    let C;
+    const c = b(1), m = b(1), M = () => {
+      c.value = Math.round(u.value.scrollHeight / u.value.clientHeight);
+    };
+    V(c, () => {
+      c.value < m.value && (m.value = 1);
+    }), V(
+      () => t.countCharts,
+      () => M(),
+      { flush: "post" }
+    );
+    const y = p(() => {
+      if (!d.value) return {};
+      const i = d.value.elCol.getBoundingClientRect(), n = {
+        top: i.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 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" });
+      });
+    }), R(() => {
+      C.disconnect();
+    }), (i, n) => (a(), s("div", {
+      class: f(["top-miniCharts", {
+        "top-miniCharts": !0,
+        scrollable: c.value > 1,
+        "top-miniCharts_hideChartInMobile": i.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
+        }, null, 10, Z))), 256))
+      ])) : H("", !0),
+      (a(), G(O, { to: "body" }, [
+        d.value ? (a(), s("div", {
+          key: 0,
+          class: "top-miniCharts_tooltip",
+          style: L(y.value)
+        }, [
+          r("span", null, g(d.value.date), 1),
+          r("span", null, g(d.value.value), 1)
+        ], 4)) : H("", !0)
+      ]))
     ], 2));
   }
-}), K = {
-  "top-miniChart": "top-miniChart",
-  "top-miniChart_title": "top-miniChart_title",
-  "top-color_orange": "top-color_orange",
-  "top-color_pink": "top-color_pink",
-  "top-color_blue": "top-color_blue",
-  "top-miniChart_data": "top-miniChart_data",
-  "top-miniChart_dataDynamic": "top-miniChart_dataDynamic",
-  "top-miniChart_dataDynamic-direction_up": "top-miniChart_dataDynamic-direction_up",
-  "top-miniChart_dataDynamic-direction_stay": "top-miniChart_dataDynamic-direction_stay",
-  "top-miniChart_dataDynamic-direction_down": "top-miniChart_dataDynamic-direction_down",
-  "top-miniChart_chartGrid": "top-miniChart_chartGrid",
-  "top-miniChart_chartGridCol": "top-miniChart_chartGridCol",
-  "top-active": "top-active",
-  "top-miniChart_chartGridCol-none": "top-miniChart_chartGridCol-none",
-  "top-miniChart_chart": "top-miniChart_chart"
-}, Q = {
-  $style: K
-}, R = /* @__PURE__ */ B(J, [["__cssModules", Q]]), Z = R;
+}), ne = K, ae = x;
 export {
-  Z as TopMiniChart
+  ne as TopMiniChart,
+  ae as TopMiniCharts
 };
 //# sourceMappingURL=charts.js.map

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/charts.ts"],"sourcesContent":["/**\r\n * Кол-во столбцов по умолчанию\r\n */\r\nexport const defaultNumberCols = 90;\r\n\r\n/**\r\n * Минимальная высота колонки (в процентах)\r\n */\r\nexport const minHeight = 10; // %","<script setup lang=\"ts\">\r\nimport type { Props } from './miniChart';\r\nimport { computed } from 'vue';\r\nimport { dateFormat } from '@/core/utils/date';\r\nimport { percentOfNumber } from '@/core/utils/number';\r\nimport { defaultNumberCols, minHeight } from './utils/consts';\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n\tcolor: 'blue',\r\n\tnumberCols: defaultNumberCols,\r\n});\r\nconst model = defineModel<Props['modelValue']>();\r\n\r\n/**\r\n * Расчет высоты колонки (в процентах)\r\n */\r\nconst genColHeight = (value: number): number => {\r\n\tlet maximumValue = maxValue.value;\r\n\r\n\t// для графиков средней и медианной делаем максимум 1\r\n\tif (props.isInvert) {\r\n\t\tvalue -= 1;\r\n\t\tmaximumValue -= 1;\r\n\t}\r\n\r\n\tlet height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;\r\n\tif (props.isInvert) return 100 - height;\r\n\r\n\treturn height + minHeight;\r\n};\r\n\r\nconst isActiveDate = (date: string) => props.activeDates.includes(date);\r\n\r\nconst maxValue = computed(() => Math.max(...props.values));\r\n\r\n/**\r\n * Из-за стиля .top-miniChart_chartGrid - direction: rtl\r\n */\r\nconst reversedDates = computed(() => props.dates.slice().reverse());\r\n\r\n/**\r\n * Кол-во пустых колонок\r\n */\r\nconst numOfEmptyCols = computed(() => {\r\n\tif (!props.dates.length) return 0;\r\n\r\n\treturn props.numberCols - props.dates.length;\r\n});\r\n\r\nconst resetModel = () => {\r\n\tmodel.value = null;\r\n};\r\n\r\nconst setModel = (e: Event, date: string, value: number | null) => {\r\n\tmodel.value = {\r\n\t\telCol: e.target,\r\n\t\tdate: dateFormat(date),\r\n\t\tvalue: value === null ? '--' : value + (props.valueSuffix ?? ''),\r\n\t};\r\n};\r\n\r\n/**\r\n * Возвращает численный показатель динамики графика\r\n */\r\nconst dynamic = computed(() => {\r\n\tconst prevPeriodValue = props.values[props.keysForDyn.start];\r\n\tconst currentValue = props.values[props.keysForDyn.end];\r\n\tconst dynValue = currentValue - prevPeriodValue;\r\n\tconst sign = dynValue < 0 ? -1 : 1;\r\n\r\n\treturn sign * (percentOfNumber(Math.abs(dynValue)) as number);\r\n});\r\n\r\nconst dynamicDirection = computed(() => {\r\n\tlet direction: 'up' | 'stay' | 'down' = 'stay';\r\n\r\n\tif (!props.isInvert) {\r\n\t\tif (dynamic.value > 0) direction = 'up';\r\n\t\tif (dynamic.value < 0) direction = 'down';\r\n\t} else {\r\n\t\tif (dynamic.value > 0) direction = 'down';\r\n\t\tif (dynamic.value < 0) direction = 'up';\r\n\t}\r\n\r\n\treturn direction;\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\t:class=\"{\r\n\t\t\t['top-miniChart']: true,\r\n\t\t\t[`top-color_${color}`]: true,\r\n\t\t}\"\r\n\t>\r\n\t\t<div\r\n\t\t\tclass=\"top-miniChart_title\"\r\n\t\t\t:data-top-icon=\"gIcon\"\r\n\t\t>\r\n\t\t\t{{ title }}\r\n\t\t</div>\r\n\r\n\t\t<div class=\"top-miniChart_chart\">\r\n\t\t\t<div\r\n\t\t\t\tclass=\"top-miniChart_chartGrid\"\r\n\t\t\t\t@mouseleave=\"resetModel()\"\r\n\t\t\t>\r\n\t\t\t\t<div\r\n\t\t\t\t\tv-for=\"(date, i) in reversedDates\"\r\n\t\t\t\t\t:key=\"i\"\r\n\t\t\t\t\t:class=\"{\r\n\t\t\t\t\t\t['top-miniChart_chartGridCol']: true,\r\n\t\t\t\t\t\t['top-active']: isActiveDate(date)\r\n\t\t\t\t\t}\"\r\n\t\t\t\t\t@mouseenter=\"setModel($event, date, values[values.length - i - 1])\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div :style=\"'height:' + genColHeight(values[values.length - i - 1]) + '%'\"/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tv-for=\"() in numOfEmptyCols\"\r\n\t\t\t\t\tclass=\"top-miniChart_chartGridCol top-miniChart_chartGridCol-none\"\r\n\t\t\t\t\t@mouseenter=\"resetModel()\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div></div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"top-miniChart_data\">\r\n\t\t\t<span :class=\"{\r\n\t\t\t\t['top-miniChart_dataDynamic']: true,\r\n\t\t\t\t[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,\r\n\t\t\t}\">\r\n\t\t\t\t{{ Math.abs(dynamic) || '' }}\r\n\t\t\t</span>\r\n\t\t\t<span class=\"top-miniChart_dataValue\">\r\n\t\t\t\t{{ percentOfNumber(values[values.length - 1]) || 0 }}\r\n\t\t\t</span>\r\n\t\t</div>\r\n\r\n\t\t<div\r\n\t\t\tv-if=\"additionalHTML\"\r\n\t\t\tv-html=\"additionalHTML\"\r\n\t\t/>\r\n\t</div>\r\n\r\n</template>\r\n<style module src=\"./styles/miniChart.css\"></style>\r\n","import type { ComponentCustomProps } from 'vue';\r\n\r\nimport MiniChart from './miniChart/miniChart.vue';\r\n\r\nexport const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps"],"names":["defaultNumberCols","minHeight","props","__props","model","useModel","genColHeight","value","maximumValue","maxValue","height","isActiveDate","date","computed","reversedDates","numOfEmptyCols","resetModel","setModel","e","dateFormat","dynamic","prevPeriodValue","dynValue","percentOfNumber","dynamicDirection","direction","TopMiniChart","MiniChart"],"mappings":";;;;;;AAGO,MAAAA,IAAA,IAKAC,IAAA;;;;;;;;;;;;;;;;;;;;;ACDP,UAAAC,IAAAC,GAIAC,IAAAC,EAAAF,GAAA,YAAA,GAKAG,IAAA,CAAAC,MAAA;AACC,UAAAC,IAAAC,EAAA;AAGA,MAAAP,EAAA,aACCK,KAAA,GACAC,KAAA;AAGD,UAAAE,IAAAF,IAAA,IAAA,KAAA,MAAAD,IAAAC,KAAA,MAAAP,EAAA,IAAA;AACA,aAAAC,EAAA,WAAA,MAAAQ,IAEAA,IAAAT;AAAA,IAAgB,GAGjBU,IAAA,CAAAC,MAAAV,EAAA,YAAA,SAAAU,CAAA,GAEAH,IAAAI,EAAA,MAAA,KAAA,IAAA,GAAAX,EAAA,MAAA,CAAA,GAKAY,IAAAD,EAAA,MAAAX,EAAA,MAAA,MAAA,EAAA,QAAA,CAAA,GAKAa,IAAAF,EAAA,MACCX,EAAA,MAAA,SAEAA,EAAA,aAAAA,EAAA,MAAA,SAFA,CAEsC,GAGvCc,IAAA,MAAA;AACC,MAAAZ,EAAA,QAAA;AAAA,IAAc,GAGfa,IAAA,CAAAC,GAAAN,GAAAL,MAAA;AACC,MAAAH,EAAA,QAAA;AAAA,QAAc,OAAAc,EAAA;AAAA,QACJ,MAAAC,EAAAP,CAAA;AAAA,QACY,OAAAL,MAAA,OAAA,OAAAA,KAAAL,EAAA,eAAA;AAAA,MACwC;AAAA,IAC9D,GAMDkB,IAAAP,EAAA,MAAA;AACC,YAAAQ,IAAAnB,EAAA,OAAAA,EAAA,WAAA,KAAA,GAEAoB,IADApB,EAAA,OAAAA,EAAA,WAAA,GAAA,IACAmB;AAGA,cAFAC,IAAA,IAAA,KAAA,KAEAC,EAAA,KAAA,IAAAD,CAAA,CAAA;AAAA,IAAiD,CAAA,GAGlDE,IAAAX,EAAA,MAAA;AACC,UAAAY,IAAA;AAEA,aAAAvB,EAAA,YAICkB,EAAA,QAAA,MAAAK,IAAA,SACAL,EAAA,QAAA,MAAAK,IAAA,UAJAL,EAAA,QAAA,MAAAK,IAAA,OACAL,EAAA,QAAA,MAAAK,IAAA,UAMDA;AAAA,IAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDChFDC,IAAAC;"}
+{"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":";;;;;;AAGO,MAAAA,IAAA,IAKAC,IAAA;;;;;;;;;;;;;;;;;;;;;;ACDP,UAAAC,IAAAC,GAIAC,IAAAC,EAAAF,GAAA,YAAA,GAKAG,IAAA,CAAAC,MAAA;AACC,UAAAC,IAAAC,EAAA;AAGA,MAAAP,EAAA,aACCK,KAAA,GACAC,KAAA;AAGD,UAAAE,IAAAF,IAAA,IAAA,KAAA,MAAAD,IAAAC,KAAA,MAAAP,EAAA,IAAA;AACA,aAAAC,EAAA,WAAA,MAAAQ,IAEAA,IAAAT;AAAA,IAAgB,GAGjBU,IAAA,CAAAC,MAAAV,EAAA,YAAA,SAAAU,CAAA,GAEAH,IAAAI,EAAA,MAAA,KAAA,IAAA,GAAAX,EAAA,MAAA,CAAA,GAKAY,IAAAD,EAAA,MAAAX,EAAA,MAAA,MAAA,EAAA,QAAA,CAAA,GAKAa,IAAAF,EAAA,MACCX,EAAA,MAAA,SAEAA,EAAA,aAAAA,EAAA,MAAA,SAFA,CAEsC,GAGvCc,IAAA,MAAA;AACC,MAAAZ,EAAA,QAAA;AAAA,IAAc,GAGfa,IAAA,CAAA,GAAAL,GAAAL,MAAA;AACC,MAAA,EAAA,kBAAA,gBAEAH,EAAA,QAAA;AAAA,QAAc,OAAA,EAAA;AAAA,QACJ,MAAAc,EAAAN,CAAA;AAAA,QACY,OAAAL,MAAA,OAAA,OAAAA,KAAAL,EAAA,eAAA;AAAA,MACwC;AAAA,IAC9D,GAMDiB,IAAAN,EAAA,MAAA;AACC,YAAAO,IAAAlB,EAAA,OAAAA,EAAA,WAAA,KAAA,GAEAmB,IADAnB,EAAA,OAAAA,EAAA,WAAA,GAAA,IACAkB;AAGA,cAFAC,IAAA,IAAA,KAAA,KAEAC,EAAA,KAAA,IAAAD,CAAA,CAAA;AAAA,IAAiD,CAAA,GAGlDE,IAAAV,EAAA,MAAA;AACC,UAAAW,IAAA;AAEA,aAAAtB,EAAA,YAICiB,EAAA,QAAA,MAAAK,IAAA,SACAL,EAAA,QAAA,MAAAK,IAAA,UAJAL,EAAA,QAAA,MAAAK,IAAA,OACAL,EAAA,QAAA,MAAAK,IAAA,UAMDA;AAAA,IAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClFR,UAAAtB,IAAAC,GACAC,IAAAC,EAAAF,GAAA,YAAA,GAEAsB,IAAAC,EAAA,IAAA;AAEA,QAAAC;AAKA,UAAAC,IAAAF,EAAA,CAAA,GAKAG,IAAAH,EAAA,CAAA,GAKAI,IAAA,MAAA;AACC,MAAAF,EAAA,QAAA,KAAA,MAAAH,EAAA,MAAA,eAAAA,EAAA,MAAA,YAAA;AAAA,IAAmF;AAGpF,IAAAM,EAAAH,GAAA,MAAA;AACC,MAAAA,EAAA,QAAAC,EAAA,UACCA,EAAA,QAAA;AAAA,IACD,CAAA,GAGDE;AAAA,MAAA,MAAA7B,EAAA;AAAA,MACa,MAAA4B,EAAA;AAAA,MACQ,EAAA,OAAA,OAAA;AAAA,IACJ;AAMjB,UAAAE,IAAAnB,EAAA,MAAA;AACC,UAAA,CAAAT,EAAA,MAAA,QAAA,CAAA;AAEA,YAAA6B,IAAA7B,EAAA,MAAA,MAAA,sBAAA,GAEA8B,IAAA;AAAA,QAAqB,KAAAD,EAAA,SAAA,OAAA,UAAA;AAAA,MACe;AAGpC,aAAA,SAAA,gBAAA,cAAA,IAAAA,EAAA,QACCC,EAAA,OAAAD,EAAA,QAAA,OAAA,UAAA,KAAA,QAEAC,EAAA,OAAAD,EAAA,OAAA,OAAA,UAAA,KAAA,MACAC,EAAA,YAAA,wBAGDA;AAAA,IAAO,CAAA;AAGR,WAAAC,EAAA,MAAA;AAIC,MAAAR,IAAA,IAAA,eAAA,MAAAG,EAAA,CAAA,GACAH,EAAA,QAAAF,EAAA,KAAA,GAEAM,EAAAF,GAAA,MAAA;AAGC,cAAAO,KAFAX,EAAA,MAAA,SAAA,CAAA,EACA,eAAA,SAAA,OAAA,iBAAAA,EAAA,KAAA,EAAA,iBAAA,SAAA,CAAA,MACAI,EAAA,QAAA;AAEA,QAAAJ,EAAA,MAAA,SAAA,EAAA,KAAAW,GAAA,UAAA,SAAA,CAAA;AAAA,MAA4D,CAAA;AAAA,IAC5D,CAAA,GAGFC,EAAA,MAAA;AACC,MAAAV,EAAA,WAAA;AAAA,IAA+B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IC1EzBW,KAAAC,GAEAC,KAAAC;"}

package/components/charts/charts.d.ts

@@ -1,3 +1,5 @@
 import { ComponentCustomProps } from 'vue';
 import { default as MiniChart } from './miniChart/miniChart.vue';
+import { default as MiniCharts } from './miniCharts/miniCharts.vue';
 export declare const TopMiniChart: typeof MiniChart & ComponentCustomProps;
+export declare const TopMiniCharts: typeof MiniCharts & ComponentCustomProps;

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

@@ -54,6 +54,13 @@ export interface Props {
      * Суффикс для значения
      */
     valueSuffix?: string;
+    /**
+     * Скрыть график на адаптиве
+     *
+     * - true - скрыть
+     * - false - показать
+     */
+    hideChartInMobile?: boolean;
 }
 /**
  * Интерфейс проверки (используется для передачи данных о выбранной проверке через v-model)
@@ -62,7 +69,7 @@ export interface Item {
     /**
      * Эл-т колонки выбранной проверки
      */
-    elCol: EventTarget | null;
+    elCol: HTMLElement;
     /**
      * Дата/время проверки
      */

package/components/charts/miniCharts/miniCharts.d.ts

@@ -0,0 +1,20 @@
+import { Item } from '../miniChart/miniChart';
+export interface Props {
+    modelValue?: Item | null;
+    /**
+     * Кол-во миниграфиков (TopMiniChart)
+     */
+    countCharts: number;
+    /**
+     * Скрывать графики на адаптиве
+     *
+     * - true - скрыть
+     * - false - показать
+     */
+    hideChartInMobile?: boolean;
+}
+export interface Style {
+    top: string;
+    left?: string;
+    transform?: string;
+}

package/components/charts/miniCharts/miniCharts.vue.d.ts

@@ -0,0 +1,29 @@
+import { Props } from './miniCharts';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { Item } from '../miniChart/miniChart';
+declare let __VLS_typeProps: Props;
+type __VLS_PublicProps = {
+    modelValue?: Props['modelValue'];
+} & typeof __VLS_typeProps;
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        elRef: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (modelValue: Item | null | undefined) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((modelValue: Item | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, 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/charts/miniCharts/stories/dummy.d.ts

@@ -0,0 +1,6 @@
+import { Props as MiniChartProps } from '../../miniChart/miniChart';
+/**
+ * Список объектов props для мини графиков
+ */
+declare const propsForMiniCharts: MiniChartProps[];
+export { propsForMiniCharts };