@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

@@ -1,117 +0,0 @@
-## Описание функционала
-
-`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

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-## Описание компонента
-
-Каждое диалоговое окно обязано иметь хотя бы одну страницу. Этот компонент используется для определения страницы диалоговоого окна.
-
-Страница **не является** самостоятельным компонентом, ее набор **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

@@ -1,12 +0,0 @@
-## Описание компонента
-
-Этот компонент используется для определения компонента страницы диалоговоого окна, который можно подключать в других диалоговых окнах.
-
-## Подклчючение
-
-`TopDialogPageComponent` должен использовать только внутри слота `TopDialog`.
-
-- Создайте компонент, который будет реализовывать страницу и разместите в нем `TopDialogPage`.
-- Подключите его через `TopDialogPageComponent` в нужное диалоговое окно 
-
-Подробнее о [TopDialogPage](?path=/docs/components-dialog-dialog-page--docs)