@topvisor/ui 1.0.19 → 1.0.20-selector2-3

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,27 @@
+import type { Meta } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './pageComponent/pageComponent.vue';
+import * as ComponentsConst from '@/components/dialog/lib/types';
+import ReadMe from './stories/pageComponent/README.md?raw';
+import { Dialog as Dialog_Base } from './dialog.stories';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, [], 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,73 @@
+<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>
+
+					<TopTextarea
+						model-value=""
+						:expandable="false"
+						:rows="15"
+					></TopTextarea>
+				</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>

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

@@ -0,0 +1,64 @@
+<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>
+
+			Стандартная функциональность: Состояние этой страницы сохраянется при закрытии и смены страниц
+
+			<br><br>
+
+			<TopTextarea
+				model-value=""
+				:expandable="false"
+				:rows="15"
+			></TopTextarea>
+		</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,64 @@
+<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>
+
+			<br><br>
+
+			<TopTextarea
+				model-value=""
+				:expandable="false"
+				:rows="15"
+			></TopTextarea>
+		</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)