@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

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

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

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

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

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

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