@topvisor/ui 1.0.22-test-ci-cd-10 → 1.2.0

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,26 @@
+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';

package/src/components/dialog/lib/utils.globalEvents.ts

@@ -0,0 +1,175 @@
+import { TopDialogUtils } from './utils';
+import { TopDialogWorker } from './worker';
+import { querySelectorVisible } from '@/core/utils/dom';
+import type { $el } from '@/components/types';
+
+let inited = false;
+
+/**
+ * Инициализация глобальных событий для диалоговых окон
+ *
+ * Проивзодится один раз при подклчюении диалогового окна
+ *
+ * События не размонитруются
+ */
+export const initDialogGlobalEvents = () => {
+	if (inited) return;
+	inited = true;
+
+	/**
+	 * Закрытие диалога по Esc
+	 */
+	document.addEventListener('keydown', (e) => {
+		if (e.key !== 'Escape') return;
+		if (!e.target) return;
+
+		const el = e.target as HTMLElement;
+
+		// событие произошло вне диалогового окна
+		if (!el.closest('.ui-dialog')) return;
+
+		if (el.contentEditable === 'true' || el.contentEditable === 'plaintext-only') return;
+
+		// не закрывать окно при открытом TopPopup
+		if (querySelectorVisible(document.documentElement, '.top-popup-wrapper')) return;
+
+		// не закрывать окно при работе с jquery autocomplete
+		if (el.classList.contains('autocomplete')) return;
+
+		// не закрывать окно при открытом fancybox
+		if (querySelectorVisible(document.documentElement, '.fancybox-container')) return;
+
+		$('.ui-dialog-content:visible:last').dialog('close');
+	});
+
+	/**
+	 * Закрытие диалога по кнопке закрыть
+	 */
+	$(document).on('click', '[data-action="top-dialog-close"]', (e) => {
+		e.preventDefault();
+
+		// // навигация без истории
+		// var $dialog = $(this).closest('.ui-dialog-content');
+		// var viewName = $dialog.attr('id');
+		// var pageName = getHash('view-' + viewName);
+		// if (!pageName) {
+		// 	toPrevPage($dialog);
+		//
+		// 	return;
+		// }
+		//
+		// // навигация по истории
+		// if (Core.state.isMobile && history.length > 1 && $(this).closest('.modal-layer').length) {
+		// 	var href = location.href;
+		//
+		// 	history.go(-1);
+		//
+		// 	setTimeout(() => {
+		// 		// это первая страница в истории вкладки браузера
+		// 		if (href === location.href) $(e.target).closest('.ui-dialog-content').dialog('close');
+		// 	});
+		// } else {
+		// 	$(this).closest('.ui-dialog-content').dialog('close');
+		// }
+
+		const el = e.target.closest('[data-action="top-dialog-close"]');
+
+		const elDialog = el.closest('.ui-dialog-content');
+		if (!elDialog) return;
+
+		const $dialog = $(elDialog);
+
+		// если к кнопке привязана ссылка, диалоговое окно не нужно закрывать
+		const toView = el.dataset.toView;
+
+		if (toView == 'toPrevPage()') {
+			TopDialogUtils.toPrevPage($dialog);
+
+			return;
+		}
+
+		if (toView) {
+			var viewNameAndPageLink = toView.split('-');
+			var viewName = viewNameAndPageLink.shift();
+			var pageLink = viewNameAndPageLink.join('-');
+
+			var $toDialog = $('#' + viewName);
+			var $toPage = $('[data-view-page="' + pageLink + '"]', $toDialog);
+			if (!$toPage.is(':visible')) {
+				const hash = TopDialogWorker.genViewPageHash(toView, 'prev');
+
+				// добавляет текущую страницу в историю браузера
+				location.hash = hash;
+
+				// // не убирает кнопку "Вперед" в браузере
+				// history.replaceState(null, '', hash);
+				// toViewDirty(toView, 'prev');
+
+				return;
+			}
+		}
+
+		$dialog.dialog('close');
+	});
+
+	/**
+	 * Все submit должны обрабатываться через js
+	 */
+	$(document).on('submit', '.modal-body > form, .modal-layer-body > form', function (e) {
+		e.preventDefault();
+	});
+
+	/**
+	 * Выполнение действия по нажатию Enter
+	 *
+	 * @todo Убрать `.searcher`
+	 */
+	$(document).on('keypress', '.ui-dialog .modal-body :input:not(.searcher), .ui-dialog .modal-body [contenteditable]', function (e) {
+		// if (e.keyCode !== 10 && e.key !== 'ENTER') return;
+		if (e.key !== 'ENTER') return;
+
+		// не выполнять submit действий при работе с jquery autocomplete
+		if (e.target.classList.contains('autocomplete')) {
+			e.preventDefault();
+
+			return;
+		}
+
+		// реализация submit по ctrl + Enter
+		if (e.target.tagName === 'TEXTAREA') {
+			if (!e.ctrlKey && !e.metaKey) return;
+
+			const elForm = e.target.closest('form');
+
+			if (elForm) {
+				let elSubmit = $(':submit:visible', elForm)[0];
+				if (!elSubmit) elSubmit = $(':submit:visible', elForm)[0];
+
+				elSubmit?.click();
+			}
+		}
+	});
+
+	/**
+	 * Закрытие диалога по клику вне окна
+	 */
+	$(document).on('click', '.ui-widget-overlay', function () {
+		let $dialogWrapper: $el | undefined = undefined;
+		let topZIndex = 0;
+
+		$('.ui-dialog:visible').each((_index, el) => {
+			const zIndex = Number($(el).css('z-index'));
+			if (zIndex < topZIndex) return;
+
+			$dialogWrapper = $(el);
+			topZIndex = zIndex;
+		});
+
+		if ($dialogWrapper) {
+			$('.ui-dialog-content', $dialogWrapper).dialog('close');
+		}
+	});
+
+	$(window).on('resize', TopDialogUtils.recalcPositions);
+	TopDialogUtils.recalcPositions();
+};