@topvisor/ui 1.0.19 → 1.0.20-selector2-3

package/src/components/dialog/dialog/composables/dialogHandle.ts

@@ -0,0 +1,176 @@
+import { type ComponentInstance, type ComponentInternalInstance, markRaw, ref } from 'vue';
+import { waitWhile } from '@/core/utils/system';
+import TopDialog from '../dialog.vue';
+import { TopDialogWorker } from '@/components/dialog/lib/worker';
+import type { MoveDirection } from '@/components/dialog/lib/types';
+import type { TopDialogComponent } from './types';
+
+/**
+ * Объект для работы с диалоговым окном
+ *
+ * Каждое окно уникально и может быть открыто одновременно только один раз
+ *
+ * Можно определить много окон, после чего с ними можно вести работу в любой части приложения
+ */
+export class TopDialogHandle<T extends TopDialogComponent> {
+
+	/**
+	 * Индентификатор, определяется на уровне компонента TopDialogComponent
+	 *
+	 * Может использоваться в навигации для открытия нужных окон с нужными настройками
+	 */
+	id: string;
+
+	/**
+	 * ID, используемый в верстке диалогового окна
+	 */
+	idAttr: string;
+
+	/**
+	 * Пользовательский компонент диалогового окна
+	 */
+	Component: T;
+
+	/**
+	 * Компонент инициирован
+	 *
+	 * Устанавливается после первого вызова useTopDialog()
+	 */
+	isMounted = ref(false);
+
+	/**
+	 * Компонент готов к использованию
+	 *
+	 * Используется для внутренних преобразований после отрисовки
+	 */
+	isReady = ref(false);
+
+	/**
+	 * Диалоговое окно открыто
+	 */
+	isOpened = ref(false);
+
+	/**
+	 * Имя активной страницы дилогового окна
+	 */
+	pageActive = ref('');
+
+	/**
+	 * Диалоговое окно находится в состоянии загрузки своей страницы
+	 */
+	isLoadingPage = ref(false);
+
+	/**
+	 * Следующая активная страница
+	 *
+	 * В один момент времени может потребоваться отобразить две страницы, чтобы воспроизвести анимацию
+	 */
+	pageActiveNext = ref('');
+
+	/**
+	 * props компонента, доступны после инициализации
+	 */
+	props?: ComponentInstance<T>['$props'];
+
+	/**
+	 * emit базового компонента `TopDialog`
+	 */
+	emit?: ComponentInstance<typeof TopDialog>['$emit'];
+
+	/**
+	 * Одноразовое событие на закрытие диалогового окна
+	 *
+	 * Используется для привязки окна к сценариям использования
+	 */
+	onCloseOnce?: (props: typeof this.props, pageName: string) => void;
+
+	constructor(TopDialogComponent: T) {
+		this.id = TopDialogComponent.id!;
+		this.idAttr = 'dialog_' + TopDialogComponent.id;
+		this.Component = markRaw(TopDialogComponent);
+	}
+
+	/**
+	 * Событие - компонент инициирован
+	 */
+	onMounted(topDialogComponent: ComponentInternalInstance, topDialogBaseComponent: ComponentInternalInstance) {
+		this.isMounted.value = true;
+		this.props = topDialogComponent.props;
+		this.emit = topDialogBaseComponent.emit;
+	}
+
+	/**
+	 * Открыть диалоговое окно
+	 *
+	 * Учтите, что props в диалоговом окне будут доступны не сразу, а только после инициализации vue компонента
+	 */
+	async open(pageName: string = 'main', props?: {}, args: [] = [], onCloseOnce?: typeof this.onCloseOnce, moveDirection?: MoveDirection) {
+		if (props) await this.setProps(props);
+		if (onCloseOnce) this.onCloseOnce = onCloseOnce;
+
+		const TopDialogUtils = await TopDialogWorker.getDialogsUtils();
+
+		await TopDialogUtils.toView(this.idAttr, pageName, args, moveDirection);
+	};
+
+	/**
+	 * Открыть диалоговое окно как ссылку, для хеш-навигации
+	 *
+	 * Диалоговые окна загружаются по имени, см. настройку плагина Core topDialogLoader
+	 */
+	async openAsLink(
+		pageName: string = 'main',
+		props?: {},
+		_args: string[] = [],
+		onCloseOnce?: typeof this.onCloseOnce,
+		moveDirection?: MoveDirection,
+	) {
+		if (props) await this.setProps(props);
+		if (onCloseOnce) this.onCloseOnce = onCloseOnce;
+
+		const viewName = this.idAttr + '-' + pageName;
+
+		location.hash = TopDialogWorker.genViewPageHash(viewName, moveDirection);
+	};
+
+	/**
+	 * Закрыть диалоговое окно
+	 *
+	 * Не меняет состояние компонента диалогового окна
+	 */
+	async close() {
+		TopDialogWorker.close(this.idAttr);
+	};
+
+	/**
+	 * Размонтировать $.dialog
+	 */
+	async destroy() {
+		TopDialogWorker.destroy(this.idAttr);
+	}
+
+	/**
+	 * Устанвоить props
+	 *
+	 * Полностью сбрасывается состояние props
+	 */
+	async setProps(props: ComponentInstance<T>['$props'] = {}) {
+		// ожидание инициализации компонента
+		if (!this.isMounted) {
+			await waitWhile(() => !this.props);
+		}
+
+		for (const name in this.props) {
+			this.props[name] = props[name];
+		}
+	}
+
+	/**
+	 * Проверить, есть ли необходимость отрисовки страницы диалогового окна
+	 */
+	needShowPage(pageName: string): boolean {
+		if (!this.isOpened.value) return false;
+
+		return this.pageActive.value === pageName || this.pageActiveNext.value === pageName;
+	}
+}

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

@@ -0,0 +1,12 @@
+import type { Component } from 'vue';
+
+/**
+ * Компонент с определением конкретного диалогового окна с использованием компонента `TopDialog`
+ */
+export type TopDialogComponent = Component & { id?: string };
+
+export type AsyncDialogComponentResolveResult<T extends TopDialogComponent> = {
+	default: T;
+};
+
+export type AsyncTopDialogComponentLoader<T extends TopDialogComponent> = () => Promise<AsyncDialogComponentResolveResult<T>>;

package/src/components/dialog/dialog/composables/utils.ts

@@ -0,0 +1,39 @@
+import { getCurrentInstance, inject } from 'vue';
+import { TopDialogHandle } from './dialogHandle';
+import { AsyncTopDialogHandle } from './asyncDialogHandle';
+import type { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
+import { addDialogWorker, getDialogWorker } from '../dialogs/dialogs.vue';
+
+/**
+ * Получить объект управленя текущим диалоговым окном
+ */
+export const useTopDialogSelf = () => {
+	// вызов из пользовтаельского компонента диалога
+	const topDialogComponent = getCurrentInstance() as any;
+	if (topDialogComponent?.type?.id) {
+		const dialogWorker = getDialogWorker(topDialogComponent.type.id);
+		if (dialogWorker) return dialogWorker;
+	}
+
+	return inject('dialogWorker') as TopDialogHandle<TopDialogComponent>;
+};
+
+/**
+ * Получить объект управленя диалоговым окном
+ *
+ * При первом вызове компонент диалогового окна будет внедрен в компонент DialogWrapper
+ */
+export const useTopDialog = <T extends TopDialogComponent>(DialogComponent: T): TopDialogHandle<T> => {
+	return addDialogWorker(DialogComponent);
+};
+
+/**
+ * Получить объект управленя асинхронным диалоговым окном
+ *
+ * Компонент диалогового окна будет загружен и инициирован при первом взаимодействии с объектом
+ *
+ * Использует useTopDialog()
+ */
+export const useAsyncTopDialog = <T extends TopDialogComponent>(resolve: AsyncTopDialogComponentLoader<T>): AsyncTopDialogHandle<T> => {
+	return new AsyncTopDialogHandle(resolve);
+};

package/src/components/dialog/dialog/dialog.stories.ts

@@ -0,0 +1,83 @@
+import { ref } from 'vue';
+
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import { useAsyncTopDialog } from '@/core/app';
+import Component from './dialog.vue';
+import * as ComponentsConst from '@/components/dialog/lib/types';
+import TopDialogs from './dialogs/dialogs.vue';
+import TopDialogPage from './page/page.vue';
+import TopDialogPageComponent from './pageComponent/pageComponent.vue';
+import ReadMe from './stories/README.md?raw';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, ['default'], true);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dialog = {
+	args: {
+		id: 'dialog_example',
+		pageActive: 'inline',
+	},
+	render: (_args) => ({
+		components: {
+			TopDialogs,
+			TopDialog: Component,
+			TopDialogPage,
+			TopDialogPageComponent,
+		},
+		setup() {
+			const dialogExample = useAsyncTopDialog(() => import('./stories/dialog_example/dialog_example.vue'));
+
+			const a = ref('100');
+			const pageName = ref('inline');
+
+			const pagesNames = new Map();
+			pagesNames.set('inline', 'inline');
+			pagesNames.set('default', 'default');
+			pagesNames.set('async', 'async');
+			pagesNames.set('withoutCache', 'withoutCache');
+			pagesNames.set('headerButtons', 'headerButtons');
+
+			const onCloseOnce = (props, pageName) => {
+				console.log('Вызвано событие onCloseOnce()', props, pageName);
+			};
+
+			return {
+				a,
+				pageName,
+				pagesNames,
+				dialogExample,
+				onCloseOnce,
+			};
+		},
+		template: `
+			<!-- Подключить один раз в приложение -->
+			<TopDialogs></TopDialogs>
+
+			<TopInput v-model="a"/><br><br>
+			<TopSelect :options="pagesNames" v-model="pageName"/><br><br>
+
+			<TopButton @click="dialogExample.open(pageName, { a: Number(a) }, undefined, onCloseOnce);">Открыть</TopButton><br><br>
+
+			<a href="." :data-to-view="'dialog_example-' + pageName" target="_self">Открыть по ссылке с hash-навигацией</a><br>
+			<a href="." :data-to-view="'dialog_example-' + pageName" target="_blank">Открыть по ссылке с hash-навигацией в новом окне</a>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/dialog/dialog/dialog.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { ComponentInternalInstance } from 'vue';
+import { getCurrentInstance, onMounted, provide, watch } from 'vue';
+import { getDialogWorker } from './dialogs/dialogs.vue';
+import type { Emits, Props, Slots } from './types';
+
+const props = withDefaults(defineProps<Props>(), {
+	width: '600px',
+	height: 'auto',
+	modal: true,
+	historyType: 'push',
+});
+
+defineEmits<Emits>();
+
+defineSlots<Slots>();
+
+const dialog = getDialogWorker(props.id);
+if (!dialog) {
+	throw new Error('TopDialog cannot be used in a template, use useTopDialog() / useAsyncTopDialog()');
+}
+
+/**
+ * Для useTopDialogSelf()
+ */
+provide('dialogWorker', dialog);
+
+/**
+ * Инициализация начального состояния TopDialogHandle
+ */
+onMounted(() => {
+	const topDialogBaseComponent = getCurrentInstance() as ComponentInternalInstance;
+	const topDialogComponent = topDialogBaseComponent.parent;
+
+	if (topDialogComponent?.parent?.type.name !== 'DialogWrapper') {
+		throw new Error('TopDialog cannot be used in a template, use useTopDialog()');
+	}
+
+	if (Array.isArray(topDialogComponent.subTree.children) && topDialogComponent.subTree.children.length !== 1) {
+		throw new Error('TopDialog can has only one root element');
+	}
+
+	dialog.onMounted(topDialogComponent, topDialogBaseComponent);
+});
+
+watch(dialog.isOpened, () => {
+	dialog.isReady.value = true;
+}, {
+	flush: 'post',
+	once: true,
+});
+</script>
+
+<template>
+	<div
+		:id="dialog.idAttr"
+		class="top-dialog"
+		:class="classes"
+		:style="{
+				'--top-dialog-width': width,
+				'--top-dialog-height': height,
+			}"
+		tabindex="-1"
+		:data-view-page-active="dialog.pageActive.value"
+		:data-modal="modal"
+		:data-position="position"
+	>
+		<div class="modal-layer modal-layer-header"></div>
+
+		<div class="modal-layer modal-layer-body" :style="{'min-height': height + 'px'}"></div>
+
+		<slot name="default"></slot>
+	</div>
+</template>

package/src/components/dialog/dialog/dialogs/dialogs.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { shallowReactive } from 'vue';
+import { TopDialogHandle } from '@/components/dialog/dialog/composables/dialogHandle';
+import type { TopDialogComponent } from '@/components/dialog/dialog/composables/types';
+
+/**
+ * Словарь всех используемых диалоговых окон
+ *
+ * В других компонентах не использовать
+ */
+const dialogsWorkers = shallowReactive(new Map<string, TopDialogHandle<TopDialogComponent>>());
+
+export const getDialogWorker = (id: string) => {
+	id = id.replace(/^dialog_/, '');
+
+	return dialogsWorkers.get(id);
+};
+
+/**
+ * Добавить компонент диалогового окна для использования
+ */
+export const addDialogWorker = <T extends TopDialogComponent>(TopDialogComponent: T): TopDialogHandle<T> => {
+	if (!TopDialogComponent?.id) {
+		console.log({ TopDialogComponent: TopDialogComponent });
+
+		throw new Error('Expected TopDialogComponent');
+	}
+
+	if (!dialogsWorkers.has(TopDialogComponent.id)) {
+		dialogsWorkers.set(TopDialogComponent.id, new TopDialogHandle(TopDialogComponent));
+	}
+
+	return dialogsWorkers.get(TopDialogComponent.id) as TopDialogHandle<T>;
+};
+</script>
+
+<script setup lang="ts">
+import { onUnmounted } from 'vue';
+
+defineOptions({
+	name: 'DialogWrapper',
+});
+
+onUnmounted(() => {
+	dialogsWorkers.forEach(dialog => dialog.destroy());
+	dialogsWorkers.clear();
+});
+</script>
+
+<template>
+	<div class="top-dialogs" style="display: none;">
+		<component
+			v-for="[dialogId, dialog] in dialogsWorkers"
+			:is="dialog.Component"
+			:key="dialogId"
+		/>
+	</div>
+</template>

package/src/components/dialog/dialog/page/page.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Core from '@/core/core/core';
+import { useTopDialogSelf } from '@/components/dialog/dialog/composables/utils';
+import type { Props, Slots } from './types';
+
+const props = withDefaults(defineProps<Props>(), {
+	order: 0,
+});
+
+defineSlots<Slots>();
+
+const dialog = useTopDialogSelf();
+
+const classes = computed(() => {
+	return {
+		active: dialog.pageActive?.value === props.name,
+		'i-load-data': props.isLoading || dialog.isLoadingPage.value,
+	};
+});
+</script>
+
+<template>
+	<div
+		style="display: none"
+		v-if="dialog.isReady.value"
+	>
+		<Teleport :to="'#' + dialog.idAttr + ' .modal-layer-header'" :disabled="!dialog.needShowPage(name)">
+			<div
+				:data-order="order"
+				:data-view-page="name"
+				:class="classes"
+			>
+				<div class="modal-header">
+					<div class="top-title">
+						<slot name="header"></slot>
+					</div>
+
+					<div class="buttons">
+						<slot name="headerButtons"></slot>
+					</div>
+
+					<div
+						v-if="Core.state.isMobile && prevName"
+						class="close"
+						:title="$i18n.Common.Back"
+						data-top-icon=""
+						@click="dialog.open(prevName)"
+					></div>
+
+					<div
+						v-else
+						class="close"
+						:title="$i18n.Common.Close"
+						data-top-icon=""
+						data-action="top-dialog-close"
+					></div>
+				</div>
+			</div>
+		</Teleport>
+
+		<Teleport :to="'#' + dialog.idAttr + ' .modal-layer-body'" :disabled="!dialog.needShowPage(name)">
+			<div
+				:data-order="order"
+				:data-view-page="name"
+				class="has_scroll_container"
+				:class="classes"
+				:style="{'--top-dialog-footer-height': $slots.footer ? undefined : '0px'}"
+			>
+				<div class="modal-body" v-top-scroll-shadow>
+					<slot name="body"></slot>
+				</div>
+
+				<div
+					class="modal-footer"
+					:class="{
+						'modal-footer-fullWith': footerFullWith
+					}"
+					v-if="$slots.footer"
+				>
+					<slot name="footer"></slot>
+				</div>
+			</div>
+		</Teleport>
+	</div>
+</template>

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

@@ -0,0 +1,84 @@
+export interface Props extends PropsCommon {
+	/**
+	 * Статус загрузки страницы диалогового окна
+	 *
+	 * При включении взаимодействие со страницей блокируется, отображается анимация загрузки
+	 */
+	isLoading?: boolean;
+}
+
+/**
+ * Общие props для компонентов реализуюущих TopDialogPage
+ */
+export interface PropsCommon {
+	/**
+	 * Имя страницы для диалогового окна
+	 *
+	 * Имя страницы нужно для навигации между страницами в одном диалоговом окне
+	 */
+	name: string,
+
+	/**
+	 * Порядкой номер страницы в диалоговом окне
+	 *
+	 * Одна и та же страница может быть подключена в разные диалоговые окна и иметь разный порядковый номер
+	 */
+	order: number,
+
+	/**
+	 * Имя предыдущей страницы
+	 *
+	 * Для кнопки Назад / Закрыть в мобильной версии
+	 */
+	prevName?: string,
+
+	/**
+	 * Стиль отображения футера, при котороым элементы растягиваются на всю ширину
+	 *
+	 * Разрешены переносы
+	 */
+	footerFullWith?: boolean,
+}
+
+/**
+ * Общие props для компонентов реализуюущих TopDialogPage
+ *
+ * Для не SFC компонентов
+ */
+export const propsPageCommon = {
+	name: {
+		type: String,
+		required: true,
+	},
+
+	order: {
+		type: Number,
+		required: true,
+	},
+
+	prevName: String,
+
+	footerFullWith: Boolean,
+};
+
+export interface Slots {
+	/**
+	 * Шапка страницы
+	 */
+	header(props: {}): any;
+
+	/**
+	 * Кнопки для шапки страницы
+	 */
+	headerButtons(props: {}): any;
+
+	/**
+	 * Контент страницы
+	 */
+	body(props: {}): any;
+
+	/**
+	 * Футер страницы
+	 */
+	footer(props: {}): any;
+}

package/src/components/dialog/dialog/page.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './page/page.vue';
+import * as ComponentsConst from '@/components/dialog/lib/types';
+import ReadMe from './stories/page/README.md?raw';
+import { Dialog as Dialog_Base } from './dialog.stories';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, ['header', 'headerButtons', 'body', 'footer'], true);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+export const Dialog = { ...Dialog_Base } as unknown as Meta<typeof Component>;
+Dialog.args = {};
+
+export default meta;