@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/src/components/dialog/dialog/style/dialog.css

@@ -1,316 +0,0 @@
-:root {
-	--dialog-border-color: var(--color-line-1);
-	--dialog-loading-duration: 10s;
-
-	--top-dialog-footer-height: var(--top-forms-base-height_s);
-}
-
-html.with_dialog { overflow: hidden !important; }
-
-a[data-to-view] { cursor: pointer; }
-
-/* common */
-.ui-widget-overlay { background: #040404; opacity: 0.50; filter: Alpha(Opacity=50); }
-.ui-dialog { border-radius: 8px; border: none; padding: 0; }
-.ui-dialog.ui-widget { border: none; }
-.ui-dialog-titlebar { display: none; }
-.ui-dialog .ui-dialog-content { padding: 0; overflow: visible; }
-.ui-dialog .project_name { word-break: break-all; }
-
-.ui-dialog-content {
-	--dialog-header-height: 50px;
-	--dialog-layer-pageSelector: 0px;
-}
-.ui-dialog-content-withPageSelector {
-	--dialog-layer-pageSelector: 42px;
-}
-
-.modal-header,
-.modal-body,
-.modal-footer { font-size: 14px; position: relative; }
-.modal-body { padding: var(--padding-default); }
-
-/* modal-header */
-.modal-header {
-	border-bottom: 1px solid var(--dialog-border-color); height: var(--dialog-header-height); padding: 0 var(--padding-default);
-	display: flex; justify-content: space-between; align-items: center; gap: 16px;
-}
-.modal-header > * { padding: 10px 0; font-size: 16px; }
-.modal-header > .top-title {
-	margin: 0;
-	font-weight: normal;
-	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-	flex-grow: 1; order: 50; display: flex; align-items: center;
-}
-.modal-header > .top-title > div[class*=icon] { display: none; }
-.modal-header > div:not(.top-title) { order: 60; }
-.modal-header > div.close {
-	--top-icon-color: var(--color-text-3);
-
-	cursor: pointer;
-	background: var(--color-layout-front-1); font-size: 16px;
-	order: 100;
-	animation-name: none !important;
-}
-.modal-header > div.close:hover {
-	--top-icon-color: var(--color-text-1);
-}
-
-.modal-header .links_icons { position: absolute; right: 50px; }
-.modal-header .links_icons [class*="icon-"] { width: auto; height: auto; padding: 0 5px; color: #D6DEE0; }
-.modal-header .links_icons [class*="icon-"].active { color: var(--color-bg-warning-1); }
-
-.modal-layer-pageSelector { padding: 0 10px !important; }
-
-/* modal-body */
-.modal-body {
-	max-height: calc(var(--100vh) - var(--dialog-header-height) - 1px - var(--dialog-layer-pageSelector) - var(--top-dialog-footer-height, var(--dialog-footer-height)) - 1px);
-	overflow-y: auto; overflow-x: hidden; box-sizing: border-box; flex-grow: 1;
-}
-.modal-body hr { margin: 16px -15px; }
-.modal-body h4 { padding: 0; margin: 0 0 10px 0; line-height: normal; }
-.modal-body .inner { padding: var(--padding-default); margin: 0 calc(0px - var(--padding-default)); position: relative; }
-.modal-body .inner .bt { border-top: 1px dashed var(--color-layout-front-primary-3); position: absolute; top: 0; right: 0; left: 0; }
-.modal-body .inner .bb { border-bottom: 1px dashed var(--color-layout-front-primary-3); position: absolute; right: 0; bottom: 0; left: 0; }
-.modal-body .inner.color-1 { background: var(--color-layout-front-primary-3); color: var(--color-text-1); }
-.modal-body .inner strong { color: var(--color-text-1); }
-.modal-body .comment { line-height: 18px; }
-
-/* modal-footer */
-.modal-footer {
-	min-height: var(--top-dialog-footer-height, var(--dialog-footer-height));
-	padding: var(--top-gap-2);
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--top-gap-2);
-}
-
-.modal-footer .modal-footer-btn-left { margin-right: auto; }
-
-.modal-footer > .btn.full_width,
-.modal-footer > .top-button.full_width { flex-grow: 1; align-self: flex-end; }
-
-.modal-footer-fullWith {
-	flex-wrap: wrap;
-}
-.modal-footer-fullWith > * {
-	flex-grow: 1;
-}
-.modal-footer-fullWith > .top-info {
-	flex-grow: 5;
-}
-.modal-footer-fullWith > *:empty {
-	flex-grow: 0;
-}
-
-/* modal form */
-.ui-dialog-content > .modal-layer > [data-view-page] > input[type="submit"] { position: absolute; visibility: hidden; }
-
-/* modal help_popup */
-.help_popup .modal-header { display: none; }
-.help_popup .modal-header a { top: 2px; z-index: 10; }
-.help_popup .modal-header .top-title { display: none; }
-
-/* view */
-.modal-layer { overflow: hidden; }
-.modal-layer a[data-top-icon]:empty { color: var(--color-text-4); text-decoration: none; }
-
-.modal-layer > [data-view-page] > div > div.buttons { display: flex; white-space: nowrap; }
-.modal-layer > [data-view-page] > div > div.buttons:empty { display: none; }
-.modal-layer > [data-view-page] > div > div.buttons > div,
-.modal-layer > [data-view-page] > div > div.buttons > a {
-	cursor: pointer;
-	width: auto; height: auto; min-width: auto; min-height: auto; padding: 10px 9px;
-	color: var(--color-text-4);
-}
-.modal-layer > [data-view-page] > div > div.buttons > div:hover { color: var(--color-text-2); }
-.modal-layer > [data-view-page] > div > div.buttons > div.hidden { display: none !important; }
-
-.ui-dialog-content[data-view-page-active] { display: flex !important; flex-direction: column; justify-items: stretch; }
-.ui-dialog-content > .modal-layer { display: flex !important; align-items: stretch; position: relative; }
-.ui-dialog-content.i-change-page > .modal-layer { overflow: hidden; }
-.ui-dialog-content > .modal-layer > [data-view-page] {
-	width: 100%;
-	position: relative; display: none;
-	flex-direction: column; justify-content: space-between;
-	animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-.ui-dialog-content > .modal-layer > [data-view-page].active { display: flex; }
-.ui-dialog-content > .modal-layer > [data-view-page].reverse { animation-direction: reverse; }
-.ui-dialog-content > .modal-layer > [data-view-page].center-to-left,
-.ui-dialog-content > .modal-layer > [data-view-page].right-to-center { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
-.ui-dialog-content > .modal-layer > [data-view-page].center-to-left > div,
-.ui-dialog-content > .modal-layer > [data-view-page].right-to-center > div { overflow: hidden; }
-
-.ui-dialog-content > .modal-layer-header { border-bottom: 1px solid var(--dialog-border-color); min-height: var(--dialog-header-height); }
-.ui-dialog-content > .modal-layer-header > [data-view-page] > .modal-header { border: none; background: none; }
-.ui-dialog-content > .modal-layer-header > [data-view-page] > .modal-header > * { animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].reverse > .modal-header > * { animation-direction: reverse; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].center-to-left > .modal-header > .top-title { animation-name: dialog-center-to-left-header-title; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].right-to-center > .modal-header > .top-title { animation-name: dialog-right-to-center-header-title; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].center-to-left > .modal-header > [class*="widget-"] { animation-name: dialog-center-to-left-header-title; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].right-to-center > .modal-header > [class*="widget-"] { animation-name: dialog-right-to-center-header-title; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].center-to-left > .modal-header > div { animation-name: dialog-center-to-left-header-icons; }
-.ui-dialog-content > .modal-layer-header > [data-view-page].right-to-center > .modal-header > div { animation-name: dialog-right-to-center-header-icons; }
-
-.ui-dialog-content > .modal-layer-body { border-radius: 0 0 8px 8px; max-height: calc(var(--100vh) - var(--dialog-header-height) - var(--dialog-layer-pageSelector) - var(--toolbar-height)); flex-grow: 2; }
-.ui-dialog-content.i-change-page > .modal-layer-body > [data-view-page] { background: var(--color-layout-front-1); }
-.ui-dialog-content > .modal-layer-body > [data-view-page].center-to-left { animation-name: dialog-center-to-left; }
-.ui-dialog-content > .modal-layer-body > [data-view-page].right-to-center { animation-name: dialog-right-to-center; }
-
-.ui-dialog-content .modal-footer .second_level {
-	box-sizing: border-box;
-	background: var(--color-layout-front-1); width: 100%; min-height: 25px;
-	display: flex; align-items: center; justify-content: center;
-}
-.ui-dialog-content .modal-footer .second_level input {
-	border-radius: 8px;
-	width: 100%; height: var(--top-forms-base-height);
-	padding: var(--top-padding-1) var(--top-padding-3);
-	box-sizing: border-box;
-}
-
-.ui-dialog-content > .modal-layer-body > [data-view-page].i-load-data {
-	pointer-events: none;
-}
-.ui-dialog-content > .modal-layer-body > [data-view-page].i-load-data:before {
-	content: " ";
-	background: #378DC6; width: 0; height: 4px;
-	position: absolute; top: 0; left: 0; z-index: 100;
-	animation: top-loadbar var(--dialog-loading-duration) forwards;
-}
-
-.ui-dialog-content.modal-expanded { width: 100vw !important; height: calc(var(--100vh) + 10px) !important; }
-
-/* widgets */
-.modal-header > [data-widget] {
-	padding: 0 8px;
-	position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; overflow: hidden;
-	align-items: center;
-	visibility: hidden;
-	transition: opacity 0.3s; z-index: 1;
-}
-
-.modal-header > [data-widget="search"] div.cancel {
-	opacity: 0;
-	transform: translateX(100%);
-	transition: transform, opacity; transition-duration: 0.3s;
-}
-
-[data-view-page].i-show-search { }
-[data-view-page].i-show-search .modal-header > :not([data-widget="search"]) { visibility: hidden; }
-[data-view-page].i-show-search [data-widget="search"] { visibility: visible; opacity: 1; }
-[data-view-page].i-show-search [data-widget="search"] .cancel { transform: translateX(0); opacity: 1; }
-
-[data-view-page] > .modal-header > * { transition: opacity 0.3s; }
-[data-view-page].i-show-search > .modal-header > div.buttons { opacity: 0; }
-
-/* top-popup */
-.modal-layer .top-popup-wrapper { height: 100% !important; }
-
-/* animation */
-@keyframes dialog-center-to-left-header-title {
-	from { transform: translateX(0); opacity: 1; }
-	75% { opacity: 0; }
-	to { transform: translateX(-30%); opacity: 0; }
-}
-
-@keyframes dialog-right-to-center-header-title {
-	from { transform: translateX(100%); opacity: 0; }
-	25% { opacity: 0; }
-	to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes dialog-center-to-left-header-icons {
-	from { transform: translateX(0); opacity: 1; }
-	35% { transform: translateX(-20%); opacity: 0; }
-	to { trantransform: translateX(-20%); opacity: 0; }
-}
-
-@keyframes dialog-right-to-center-header-icons {
-	from { transform: translateX(20%); opacity: 0; }
-	65% { transform: translateX(20%); opacity: 0; }
-	to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes dialog-center-to-left {
-	from { transform: translateX(0); filter: brightness(1); }
-	to { transform: translateX(-30%); filter: brightness(0.9); }
-}
-
-@keyframes dialog-right-to-center {
-	from { transform: translateX(100%); box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px; }
-	to { transform: translateX(0); box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px; }
-}
-
-/* вид с дополнительной секцией TopPopup сбоку от окна */
-@media only screen and (max-width: 1480px) {
-	.win_side_panel_opener { display: none; }
-}
-
-@media only screen and (min-width: 1480px) {
-	.ui-dialog-content.with_side_panel { box-shadow: rgb(0 0 0 / 20%) 0 0 6px; }
-
-	.ui-dialog-content.with_side_panel .modal-layer-body { background: var(--color-layout-front-1); }
-
-	[data-widget="side_panel"] {
-		--side_panel_width: calc((100vw - 900px) / 2 - 28px);
-
-		box-sizing: border-box;
-		background: var(--color-layout-front-1); max-width: var(--side_panel_width); padding: 18px;
-		position: absolute; top: calc(var(--dialog-header-height) + 1px + var(--dialog-layer-pageSelector)); bottom: calc(var(--dialog-footer-height) + 1px);
-		z-index: -1; display: block;
-		transition: 0.2s;
-	}
-
-	.win_side_panel_left { border-radius: 8px 0 0 8px; right: 100%; }
-
-	.win_side_panel_right { border-radius: 0 8px 8px 0; left: 100%; }
-
-	.win_side_panel_closed.win_side_panel_left { right: calc(100% - var(--side_panel_width)); }
-
-	.win_side_panel_closed.win_side_panel_right { left: calc(100% - var(--side_panel_width)); }
-
-	[data-widget="side_panel"] .template { display: block; }
-
-	[data-widget="side_panel"] .template > .header,
-	[data-widget="side_panel"] .template > .footer { display: flex; }
-
-	.win_side_panel_opener { cursor: pointer; background: var(--color-cyan); color: #FFF; padding: 4px; position: absolute; top: 20px; }
-
-	.win_side_panel_closed .win_side_panel_opener:not(:hover) { opacity: 0.3; }
-
-	.win_side_panel_left .win_side_panel_opener { border-radius: 4px 0 0 4px; right: 100%; }
-
-	.win_side_panel_right .win_side_panel_opener { border-radius: 0 6px 6px 0; left: 100%; }
-}
-
-@media only screen and (max-height: 900px) {
-	html.with_dialog { background: #F1F1F1; overflow: hidden; }
-
-	.ui-widget-overlay { }
-
-	.ui-dialog.me-tightly {
-		border-radius: 0;
-		height: auto !important;
-		position: fixed; top: 0 !important; bottom: 0 !important;
-	}
-
-	.ui-dialog.me-tightly .ui-dialog-content { min-height: 100% !important; }
-
-	/* для не view */
-	.ui-dialog.me-tightly > div > .modal-body { position: absolute; top: var(--dialog-header-height); right: 0; left: 0; bottom: var(--dialog-header-height); }
-
-	.ui-dialog.me-tightly > div > .modal-body:last-child { bottom: 0; }
-
-	.ui-dialog.me-tightly > div > .modal-footer { position: absolute; right: 0; bottom: 0; left: 0; }
-
-	/* view */
-	.modal-layer { }
-
-	.ui-dialog.me-tightly .modal-layer-body { border-radius: 0; min-height: 0 !important; }
-
-	.ui-dialog.me-tightly .modal-layer-body .modal-footer { min-height: unset; }
-}

package/src/components/dialog/dialog/style/dialog.m.css

@@ -1,40 +0,0 @@
-html.with_dialog body { height: var(--100vh); overflow: hidden; }
-
-.ui-widget-overlay { height: calc(100% - var(--toolbar-height)); }
-
-.ui-dialog {
-	border-radius: 0;
-	width: auto !important; height: auto !important;
-	position: fixed; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
-}
-
-.ui-dialog-content {
-	width: 100% !important;
-	height: 100% !important;
-	min-width: 0 !important;
-	max-width: 100% !important;
-}
-
-/* modal-header */
-.modal-header > .top-title { text-align: center; font-size: 14px; }
-.modal-header > div.close { font-size: 14px; order: 1; }
-.modal-header > div.close:before { content: ""; }
-
-/* modal-body */
-.modal-body { }
-.modal-body:last-child { bottom: 0; }
-.modal-footer { bottom: 0; }
-
-/* modal-footer */
-.modal-footer .second_level { padding: 10px 8px; }
-
-/* view */
-.modal-layer-body { min-height: 0 !important; }
-.ui-dialog-content > .modal-layer-body { border-radius: 0; }
-/*.ui-dialog-content > .modal-layer-body > [data-view-page] .modal-body{ margin: auto 0; }*/
-
-.modal-body,
-.modal-footer { padding-right: 12px; padding-left: 12px; }
-.modal-footer .btn:last-child { margin-right: 12px; }
-
-.modal-body .inner { padding: 12px; margin: 0 -12px; position: relative; }

package/src/components/dialog/dialog/style/dialog.pc.css

@@ -1,73 +0,0 @@
-/* menu */
-.modal-menu-opener { order: 1 !important; }
-.modal-menu-opener:before {
-	--top-icon-size: 20px;
-	--top-icon-color: #FFF;
-	--top-icon-width: var(--top-icon-size);
-
-	border-radius: 50%; background: var(--color-bg-primary-1); padding: 3px;
-	transition: transform 0.1s;
-}
-.modal-menu-opener:hover:before { background: var(--color-bg-primary-2); }
-.modal-menu-opener.top-active:before { background: var(--color-bg-primary-2); transform: scale(0.8); }
-
-/* top-popup */
-.modal-layer .top-popup-wrapper {
-	background: transparent;
-	width: auto !important; padding: 0 !important; margin: 0 !important;
-	top: 0 !important; right: 0 !important; left: 0 !important;
-	transition: background 0.3s;
-}
-
-.modal-layer .top-popup-wrapper > .top-popup[class],
-.modal-layer .top-popup-wrapper.with_notch > .top-popup[class] {
-	border-radius: 8px; border: none; margin: 12px !important; max-width: 100%; max-height: calc(100% - 24px);
-	top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; overflow: auto; display: flex; flex-direction: column;
-	opacity: 1;
-	transform: translateY(calc(-100% - 24px));
-	transition: transform 0.3s;
-}
-
-.modal-layer .top-popup > .top-popup_header { background: var(--color-theme-50); }
-
-.modal-layer .top-theme-lite .top-popup > .top-popup_header .select { border: none; }
-.modal-layer .top-theme-lite .top-popup > .top-popup_header .select .text { color: #FFF; }
-.modal-layer .top-theme-lite .top-popup > .top-popup_header .select .arrow { background: none; }
-
-.modal-layer .top-popup-wrapper-shown:not(.top-popup-wrapper-closed) { background: rgba(52, 73, 94, 0.25); }
-
-@media only screen and (min-width: 1480px) {
-	.ui-dialog-content.with_side_panel { box-shadow: rgb(0 0 0 / 20%) 0 0 6px; }
-
-	.ui-dialog-content.with_side_panel .modal-layer-body { background: var(--color-layout-front-1); }
-
-	[data-widget="side_panel"] {
-		--side_panel_width: calc((100vw - 900px) / 2 - 28px);
-
-		box-sizing: border-box;
-		background: var(--color-layout-front-1); max-width: var(--side_panel_width); padding: 18px;
-		display: block; position: absolute; top: 51px; bottom: 51px; z-index: -1;
-		transition: 0.2s;
-	}
-
-	.win_side_panel_left { border-radius: 8px 0 0 8px; right: 100%; }
-
-	.win_side_panel_right { border-radius: 0 8px 8px 0; left: 100%; }
-
-	.win_side_panel_closed.win_side_panel_left { right: calc(100% - var(--side_panel_width)); }
-
-	.win_side_panel_closed.win_side_panel_right { left: calc(100% - var(--side_panel_width)); }
-
-	[data-widget="side_panel"] .template { display: block; }
-
-	[data-widget="side_panel"] .template > .header,
-	[data-widget="side_panel"] .template > .footer { display: flex; }
-
-	.win_side_panel_opener { cursor: pointer; background: var(--color-cyan); color: #FFF; padding: 4px; position: absolute; top: 20px; }
-
-	.win_side_panel_closed .win_side_panel_opener:not(:hover) { opacity: 0.3; }
-
-	.win_side_panel_left .win_side_panel_opener { border-radius: 4px 0 0 4px; right: 100%; }
-
-	.win_side_panel_right .win_side_panel_opener { border-radius: 0 6px 6px 0; left: 100%; }
-}

package/src/components/dialog/dialog/style/modern/dialog.css

@@ -1,12 +0,0 @@
-html {
-	--top-dialog-width: auto;
-	--top-dialog-height: auto;
-}
-
-.top-dialog {
-	max-width: 100vw;
-}
-
-.top-dialog .modal-layer-body {
-	height: var(--top-dialog-height);
-}

package/src/components/dialog/dialog/style/modern/dialog.pc.css

@@ -1,3 +0,0 @@
-.top-dialog {
-	width: var(--top-dialog-width) !important;
-}

package/src/components/dialog/dialog/types.ts

@@ -1,69 +0,0 @@
-export interface Props {
-
-	id: string,
-
-	/**
-	 * Имя активной страницы
-	 */
-	pageActive: string,
-
-	/**
-	 * Базовая ширина окна
-	 */
-	width?: string,
-
-	/**
-	 * Базовая высота окна
-	 *
-	 * Установите auto, если окно должно подстраиваться под размеры содержимого
-	 *
-	 * Установите значение, если окно должно подстраиваться под размеры содержимого
-	 *
-	 * @example 'auto'
-	 * @example '200px'
-	 */
-	height?: string,
-
-	/**
-	 * Является ли окно модальным
-	 *
-	 * @see https://api.jqueryui.com/dialog/#option-modal
-	 */
-	modal?: boolean,
-
-	/**
-	 * Позиция окна
-	 *
-	 * @see https://api.jqueryui.com/dialog/#option-position
-	 */
-	position?: string,
-
-	/**
-	 * Для хеш-навигации
-	 */
-	historyType?: 'push' | 'replace',
-
-	/**
-	 * Список css классов для диалогового окна
-	 */
-	classes?: string[],
-}
-
-export type Emits = {
-	/**
-	 * Диалоговое окно было открыто
-	 */
-	open: [pageName: string];
-
-	/**
-	 * Диалоговое окно было закрыто
-	 */
-	close: [pageName: string];
-}
-
-export interface Slots {
-	/**
-	 * Слот с компонентами `TopDialogPage` и / или `TopDialogPageComponent`
-	 */
-	default(props: {}): any;
-}

package/src/components/dialog/dialog.ts

@@ -1,7 +0,0 @@
-export { default as TopDialog } from '@/components/dialog/dialog/dialog.vue';
-export { default as TopDialogPage } from '@/components/dialog/dialog/page/page.vue';
-export type{ PropsCommon as TopDialogPagePropsCommon } from '@/components/dialog/dialog/page/types';
-export { propsPageCommon } from '@/components/dialog/dialog/page/types';
-export { default as TopDialogPageComponent } from '@/components/dialog/dialog/pageComponent/pageComponent.vue';
-
-export { useTopDialogSelf } from '@/components/dialog/dialog/composables/utils';

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

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