@topvisor/ui 1.0.41 → 1.1.0-date.0

package/src/components/dialog/dialog/stories/dialog_example/pages/default.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>
+
+			Стандартная функциональность: Состояние этой страницы сохраянется при закрытии и смены страниц
+		</template>
+
+		<template #footer>
+			<TopButton color="theme" styling="outline" @click="dialog.open('inline')" 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('async')">Далее</TopButton>
+		</template>
+	</TopDialogPage>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+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>();
+
+const dialog = useTopDialogSelf();
+
+const print = () => {
+	window.print();
+};
+
+useLog(props);
+</script>
+
+<template>
+	<TopDialogPage :name="name" :order="order" :prevName="prevName">
+		<template #headerButtons>
+			<TopButton icon="" color="theme" @click="print()"></TopButton>
+		</template>
+
+		<template #header>
+			С кнопками: {{ name }}
+		</template>
+
+		<template #body>
+			<h4>Обратите внимание</h4>
+
+			Чтобы смена страниц в окне выглядела органично, дилоговому окну надо задать высоту, равную максимальной высоте всех ее страниц<br><br>
+
+			<h4>Ссылки на окна и хеш навигация</h4>
+
+			Иногда бывает необходимо дать ссылку на диалоговое окно, например на авториазцию. Если в адресе страницы есть ссылка на диалоговое
+			окно, но его компонент не загружен и не инициирвоан, это произойдет автоматическое и окно будет октрыто на нужное странице.<br><br>
+
+			Загрузка компонентов происходит по пути: @/dialogs/&#123;{ dialogName }}/&#123;{ dialogName }}.ts, таким образом генерировать ссылки
+			на окно, можно только для компонентов из папки @/dialogs.<br><br>
+
+			<div style="display: flex; gap: var(--top-gap-1);">
+				<TopButton href="." data-to-view="dialog_example-inline" styling="soft" target="_self">inline</TopButton>
+				<TopButton href="." data-to-view="dialog_example-default" styling="soft" target="_self">default</TopButton>
+				<TopButton href="." data-to-view="dialog_example-async" styling="soft" target="_self">async</TopButton>
+				<TopButton href="." data-to-view="dialog_example-withoutCache" styling="soft" target="_self">withoutCache</TopButton>
+				<TopButton href="." data-to-view="dialog_example-headerButtons" styling="soft" target="_self">headerButtons</TopButton>
+			</div>
+		</template>
+
+		<template #footer>
+			<TopButton color="theme" styling="outline" @click="dialog.open('withoutCache')" style="margin-right: auto">Назад</TopButton>
+
+			<TopButton @click="dialog.close()">Закрыть</TopButton>
+		</template>
+	</TopDialogPage>
+</template>

package/src/components/dialog/dialog/stories/dialog_example/pages/utils.ts

@@ -0,0 +1,26 @@
+import { onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
+import type { DefineProps } from 'vue';
+import type { TopDialogPagePropsCommon } from '@/components/dialog/dialog';
+
+/**
+ * Логирования в console.log() событий страницы диалогового окна
+ * @param props
+ */
+export const useLog = (props: DefineProps<TopDialogPagePropsCommon, never>) => {
+	onMounted(() => {
+		console.log('Страница ' + props.name + ' открыта (создана)');
+	});
+
+	onUnmounted(() => {
+		// это не произойдет, если страница в KeepAlive
+		console.log('Страница ' + props.name + ' закрыта (память очищена)');
+	});
+
+	onActivated(() => {
+		console.log('Страница ' + props.name + ' открыта (отображена)');
+	});
+
+	onDeactivated(() => {
+		console.log('Страница ' + props.name + ' закрыта (память не очищена)');
+	});
+};

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%; }
+}