@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

package/src/components/dialog/dialog/stories/dialog_example/pages/withoutCache.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TopButton } from '@/components/forms/forms';
+import { TopDialogPage, useTopDialogSelf } from '@/components/dialog/dialog';
+import type { TopDialogPagePropsCommon } from '@/components/dialog/dialog';
+import { useLog } from './utils';
+
+const props = defineProps<TopDialogPagePropsCommon & {
+	a: number
+}>();
+
+const dialog = useTopDialogSelf();
+
+const b = ref(0);
+
+const sum = computed(() => {
+	let res = 0;
+	if (props.a) res += props.a;
+
+	res += b.value;
+
+	return res;
+});
+
+const reset = () => {
+	b.value = 0;
+};
+
+useLog(props);
+</script>
+
+<template>
+	<TopDialogPage :name="name" :order="order" :prevName="prevName">
+		<template #headerButtons></template>
+
+		<template #header>
+			Страница без кеширования: {{ name }}
+		</template>
+
+		<template #body>
+			props: {{ $props }}<br>
+			ref b: {{ b }}<br>
+			sum: {{ sum }}<br><br>
+
+			Состояние этой страницы сбрасывается при закрытии и смены страниц, установлена настройка <b>keepAlive = false</b>
+		</template>
+
+		<template #footer>
+			<TopButton color="theme" styling="outline" @click="dialog.open('async')" style="margin-right: auto">Назад</TopButton>
+
+			<TopButton color="theme" styling="soft" @click="b++">Прибавить 1</TopButton>
+			<TopButton color="theme" styling="soft" @click="reset()">Сбросить</TopButton>
+			<TopButton @click="dialog.open('headerButtons')">Далее</TopButton>
+		</template>
+	</TopDialogPage>
+</template>

package/src/components/dialog/dialog/stories/page/README.md

@@ -0,0 +1,24 @@
+## Описание компонента
+
+Каждое диалоговое окно обязано иметь хотя бы одну страницу. Этот компонент используется для определения страницы диалоговоого окна.
+
+Страница **не является** самостоятельным компонентом, ее набор **props** напрямую связан с диалоговым окном и не может управляться извне.
+Старайтесь не использовать **store** в компонентах страницы.
+
+Страница может быть определена двумя способами:
+
+- **inline**: шаблон страницы пишется прямо в шаблоне диалогового окна, рекомендуется использовать:
+    - для диалоговых окон с одной страницей
+    - для диалоговых окон с несколькими страницами, но с очень простой версткой, когда вынесение страницы в отдельные файлы делать не хочется
+    - для диалоговых окон с несколькими страницами, с общим **state**, разделять который на несколько файлов не удобно
+- **component**: страница определяется как отельный компонент и подключается
+  через [TopDialogPageComponent](?path=/docs/components-dialog-dialog-pagecomponent--docs), рекомендуется использовать:
+    - для диалоговых окон с несколькими страницами
+    - для страниц, которые планируется переиспользовать в разных диалоговых окнах
+
+## Подклчючение
+
+`TopDialogPage` должен использоваться либо только внутри слота `TopDialog` (inline) либо только как корневой элемент компонента (component).
+
+При определении страницы в режиме **component** этот компонент должен реализовывать набор `props`, определенный в типе `TopDialogPagePropsCommon`.
+При указании `props` в объектном стиле используйте зарнее подготовленный набор `propsPageCommon`.

package/src/components/dialog/dialog/stories/pageComponent/README.md

@@ -0,0 +1,12 @@
+## Описание компонента
+
+Этот компонент используется для определения компонента страницы диалоговоого окна, который можно подключать в других диалоговых окнах.
+
+## Подклчючение
+
+`TopDialogPageComponent` должен использовать только внутри слота `TopDialog`.
+
+- Создайте компонент, который будет реализовывать страницу и разместите в нем `TopDialogPage`.
+- Подключите его через `TopDialogPageComponent` в нужное диалоговое окно 
+
+Подробнее о [TopDialogPage](?path=/docs/components-dialog-dialog-page--docs)

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

@@ -0,0 +1,319 @@
+: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-body:has(> .topTable:first-child) {
+	padding-top: calc(var(--padding-default) / 4);
+}
+
+/* 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: var(--top-padding-2);
+}
+.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-2);
+
+	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) - 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);
+	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; gap: var(--top-padding-1); }
+.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 { transform: 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(--top-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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,73 @@
+/* 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

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,42 @@
+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';
+
+export type ElTopDialogOpener<El extends HTMLElement = HTMLElement> = El & { dataset: { toView: string } };
+
+export type ElTopDialogWrapper = HTMLElement & { querySelector: (selectors: '.ui-dialog-content') => ElTopDialog };
+
+export type ElTopDialog = HTMLElement & {
+	getAttribute: (qualifiedName: 'id') => string,
+	closest: (el: '.ui-dialog') => ElTopDialogWrapper,
+	dataset: { viewPageActive: string },
+};
+
+export type ElTopDialogBody = HTMLElement;
+
+export type ElTopDialogPage = HTMLElement & { dataset: { 'view-page': string, order?: string } };
+
+export type ElTopDialogModalLayer = HTMLElement;