@topvisor/ui 1.0.41 → 1.1.0-date.0

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

@@ -0,0 +1,61 @@
+<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>>());
+
+/**
+ * Получить компонент диалогового окна по id
+ */
+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,26 @@
+import type { Meta } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './page/page.vue';
+import ReadMe from './stories/page/README.md?raw';
+import { Dialog as Dialog_Base } from './dialog.stories';
+
+const argTypes = genArgsTypes(Component, 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;

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { type Component, onUpdated, ref, type Ref } from 'vue';
+import { useTopDialogSelf } from '@/components/dialog/dialog/composables/utils';
+import type { Props } from './types';
+
+const props = withDefaults(defineProps<Props>(), {
+	keepAlive: true,
+});
+
+const dialog = useTopDialogSelf();
+
+/**
+ * Статус загрузи асинхронного компонента страницы диалогового окна
+ */
+const updateIsLoadingAsyncPage = (component: Component, isLoaded: Ref) => {
+	if (isLoaded.value) return;
+
+	if (component.name !== 'AsyncComponentWrapper') {
+		isLoaded.value = true;
+
+		return;
+	}
+
+	if (!dialog.needShowPage(props.name as string)) return;
+
+	dialog.isLoadingPage.value = true;
+
+	// @ts-ignore
+	if (component.__asyncResolved) {
+		isLoaded.value = true;
+
+		dialog.isLoadingPage.value = false;
+	}
+};
+
+if (props.component.name === 'AsyncComponentWrapper') {
+	const isLoaded = ref(false);
+
+	onUpdated(() => {
+		updateIsLoadingAsyncPage(props.component, isLoaded);
+	});
+}
+</script>
+
+<template>
+	<!-- Teleport внутри при keepAlive размонитроваться не будет, см. TopDialogPage -->
+	<KeepAlive :include="keepAlive ? '' : 'none'">
+		<Component
+			:is="component"
+			v-if="dialog.needShowPage(name)"
+			:="props"
+			:name="name"
+			:order="order"
+			:prevName="prevName"
+		/>
+	</KeepAlive>
+</template>

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

@@ -0,0 +1,21 @@
+import type { PropsCommon } from '../page/types';
+import type { Component } from 'vue';
+
+export interface Props extends PropsCommon {
+	/**
+	 * Компонент страницы с реализицией TopDialogPage
+	 */
+	component: Component,
+
+	/**
+	 * Кешировать ли эту страницу
+	 *
+	 * По умолчанию: true
+	 */
+	keepAlive?: boolean,
+
+	/**
+	 * Произвольный набор props, который будет передан в компонент страницы
+	 */
+	props?: Record<string, any>,
+}

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

@@ -0,0 +1,26 @@
+import type { Meta } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './pageComponent/pageComponent.vue';
+import ReadMe from './stories/pageComponent/README.md?raw';
+import { Dialog as Dialog_Base } from './dialog.stories';
+
+const argTypes = genArgsTypes(Component, 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;

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

@@ -0,0 +1,117 @@
+## Описание функционала
+
+`TopDialog` - универсальный компонент для создания диалоговых окон на vue c богатым функционалом.
+
+Вот некоторые фичи TopDialog:
+
+- открытие диалогового окна из **любого** места в приложении, с возможной передачей настроек через **props**
+- **ленивая** подгрузка кода компонента
+- сохранение состояния открытых диалоговых окон в **hash-навигации** в url страницы,
+  автоматическое открытие / закрытие диалоговых окон при переходе в истории браузера с автозагрузкой диалоговых окон
+- вывод **несколько страниц** в одном диалоговом окне
+- анимация при смене страниц
+- кеширование состояния страницы
+- ленивая подгрузка страницы
+- адаптивный дизайн, мобильная версия
+
+## Термины
+
+- **ручка (worker)**: объект для управления диалоговым окном
+- **диалоговое окно**: компонент, встраиваемый в приложение и доступный через **ручку**, не имеет связи с тем, откуда вызывается (за исключением
+  события `onCloseOnce`), включает в себя страницы, отображает нужную страницу
+- **страница**: компонент для вывода страницы в диалоговом окне
+
+## Гайдлайн
+
+- Имя файла для компонента диалогового принято называть в формате: `dialog_{{ dialogId }}.{{ ext }}`
+- **ручки** принято сохранять в переменной с именем `dialog`
+
+## Подключение
+
+Общие настройки определяются при подключении [corePlugin](?path=/docs/core-plugins--docs#coreplugin):
+
+- `topDialogOptions.load`: автозагрузка диалоговых окон, для открытия нужных диалоговых окон по ссылке
+
+Подключите компонент в корне приложения, компонент будет импортирован и подключен автоматически в `corePlugin`: `<top-dialogs></top-dialogs>`.
+
+`TopDialog` должен использовать только как корневой элемент компонента.
+
+Подключение:
+
+- Создайте компонент, который будет реализовывать диалоговое окно и разместите в нем `TopDialog`
+- Укажите в объекте компонента свойсто `id`, для SFC укажите id через `defineOptions({ id })`
+- При необходимости определите в компоненте вашего диалогового окна `props` и укажите `@open` и `@close` для `TopDialog`
+- Вставьте в `TopDialog` компонент `TopDialogPage` с нужными слотами шапки и контента или `TopDialogPageComponent` с ссылкой на компонент страницы
+- Через `useAsyncTopDialog()` / `useTopDialog` определите **ручку** для работы с диалоговым окном
+- Открывайте диалоговое окно и управляйте им через **ручку**
+
+Подробнее о [TopDialogPage](?path=/docs/components-dialog-dialog-page--docs)
+
+Подробнее о [TopDialogPageComponent](?path=/docs/components-dialog-dialog-pagecomponent--docs)
+
+## Пример
+
+```js
+// создать ручку
+const dialog = useAsyncTopDialog(() => import('./myDialog.vue'));
+
+// ...
+
+// открыть диалоговое окно с нужными props на нужной старнице, можно указать onCloseOnce, для перехвата закрытия открытого окна
+await dialog.open();
+
+// открыть диалоговое окно через hash-навигацию
+await dialog.openAsLink();
+
+// закрыть диалоговое окно
+await dialog.close();
+
+// усатнвоить props диалогового окна
+await dialog.setProps();
+
+// определить, нужно ли отображать указанную страницу
+await dialog.needShowPage(pageName);
+```
+
+## Hash-навигация
+
+При **hash-навигации** в url страницы будет подставляться:
+
+- `view-dialog_{{ id }}={{ pageName }}`: ссылка на диалоговое окно, может указываться сразу несколько ссылок
+- `vpn={{ number }}`: порядковый номер открытого диалогового окна, viewPageN
+
+Для генерации ссылки на открытие диалогового окна используйте `genViewPageHash()`.
+
+В шаблонах для автоматического создания ссылки на диалоговое окно добавьте к ссылке атрибут `data-to-view` с указателем на диалоговое окно.
+При выполнении перехода по ссылке, значение `href` будет автоматически меняться на нужное.
+
+```html
+ <a href="." data-to-view="dialog_example-inline">Ссылка на диалоговое окно</a>
+```
+
+# Дополнительные компоненты
+
+- `TopDialogPage`: компонент страницы диалогового окна
+- `TopDialogPageComponent`: компонент для вывода страницы диалогового окна, определенного в другом файле
+
+# Классы
+
+При открытии добавляет элементу html класс `.with_dialog`. В основном класс нужен для блокировки основного скролла страницы. 
+
+## Утилиты
+
+- `useAsyncTopDialog()`: - создает асинхронную **ручку** для работы с указанным диалоговым окном, не загружает диалоговое окно, пока это не будет
+  необходимо
+- `useTopDialog()`: - создает **ручку** для работы с указанным диалоговым окном
+- `useTopDialogSelf()`: создает **ручку** для работы с **текущим** диалоговым окном, используется внутри компонента вашего диалогового окна или его
+  страницы
+- `genViewPageHash()`: сгенерировать **hash** с ссылкой на диалоговое окно и его страницу, может использоваться для смены `location.hash` или для
+  генерации ссылок
+
+## Зависмости
+
+Требует подключение словарей:
+
+* i18n/Common
+
+Требует подключение **jquery**, **jquery-ui dialog**

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

@@ -0,0 +1,12 @@
+import { useTopDialog } from '@/components/dialog/dialog/composables/utils';
+import type { TopDialogLoad } from '@/components/dialog/lib/types';
+import { waitWhile } from '@/core/utils/system';
+
+export const load: TopDialogLoad = async (dialogId) => {
+	const ComponentModule = await import(`./${dialogId}/${dialogId}.vue`);
+
+	const dialog = useTopDialog(ComponentModule.default);
+
+	// ожидание инициализации компонента диалогового окна
+	await waitWhile(() => !dialog.isMounted.value);
+};

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+import { TopDialog, TopDialogPage, TopDialogPageComponent, useTopDialogSelf } from '@/components/dialog/dialog';
+
+import PageDefault from './pages/default.vue';
+import PageWithoutCache from './pages/withoutCache.vue';
+import PageHeaderButtons from './pages/headerButtons.vue';
+
+/**
+ * id компонента диалогового окна
+ *
+ * Гайдлайн: название файла этого компонента должно соответствовать формату: `dialog_${ id }`
+ */
+const id = 'example';
+
+defineOptions({ id });
+
+const PageAsync = defineAsyncComponent(() => import('./pages/async.vue'));
+
+withDefaults(defineProps<{
+	a?: number
+}>(), {
+	a: 0,
+});
+
+const dialog = useTopDialogSelf();
+</script>
+
+<template>
+	<TopDialog
+		id="example"
+		pageActive="inline"
+		height="400px"
+		@open="console.log('Открыто окно Example, страница: ' + $event)"
+		@close="console.log('Закрыто окно Example, страница: ' + $event)"
+	>
+		<KeepAlive>
+			<TopDialogPage :order="0" name="inline" v-if="dialog.needShowPage('inline')">
+				<template #header>
+					Простая страница: inline
+				</template>
+
+				<template #body>
+					props диалогового окна: {{ $props }}<br><br>
+
+					Код данной страницы диалогового окна реализуется в самом компоненте диалогового окна, в остальных примерах страницы будут
+					подключаться отдельными компонентами<br><br>
+
+					Такой способ реализации предпочтителен для дилоговых окон с одной страницей.<br><br>
+
+					Список для иллюстрации длинного контента<br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+					- Элемент списка <br>
+				</template>
+
+				<template #footer>
+					<TopButton color="theme" styling="outline" @click="dialog.close()" style="margin-right: auto">Закрыть</TopButton>
+
+					<TopButton @click="dialog.open('default')">Далее</TopButton>
+				</template>
+			</TopDialogPage>
+		</KeepAlive>
+
+		<TopDialogPageComponent name="default" :order="1" prevName="inline" :component="PageDefault" :a/>
+		<TopDialogPageComponent name="async" :order="2" prevName="default" :component="PageAsync" :a/>
+		<TopDialogPageComponent name="withoutCache" :order="3" prevName="async" :component="PageWithoutCache" :keepAlive="false" :a/>
+		<TopDialogPageComponent name="headerButtons" :order="4" prevName="withoutCache" :component="PageHeaderButtons"/>
+	</TopDialog>
+</template>

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

@@ -0,0 +1,57 @@
+<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 }} {{ prevName }}
+		</template>
+
+		<template #body>
+			props: {{ $props }}<br>
+			ref b: {{ b }}<br>
+			sum: {{ sum }}<br><br>
+
+			Эта страница грузится ассинхронно<br><br>
+			Такой способ подключения предпочтителен для дилоговых окон с несколькими страницами, если их загрузку можно отложить.
+		</template>
+
+		<template #footer>
+			<TopButton color="theme" styling="outline" @click="dialog.open('default')" 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('withoutCache')">Далее</TopButton>
+		</template>
+	</TopDialogPage>
+</template>