@topvisor/ui 1.1.0 → 1.2.0

package/src/components/core/notice/notice.vue

@@ -0,0 +1,69 @@
+<!-- performance all in one file component, для Core.notice() -->
+<script lang="ts">
+export { show } from './utils';
+</script>
+
+<script setup lang="ts">
+import type { Item } from './utils';
+import { itemById } from './utils';
+
+import type { Props } from './types';
+import TopNoticeItem from './item/item.vue';
+
+defineProps<Props>();
+
+const onCloseItem = (item: Item) => {
+	item.onClose?.();
+
+	itemById.delete(item.id);
+};
+</script>
+
+<template>
+	<teleport to="body">
+		<div class="top-notice">
+			<TopNoticeItem
+				v-for="[_index, item] in itemById"
+				:key="item.id"
+				:id="item.id"
+				:title="item.title"
+				:text="item.text"
+				:style="item.style"
+				:buttonProps="item.buttonProps"
+				:metaText="item.metaText"
+				:isSafeHTML="item.isSafeHTML"
+				:forceClosed="item.forceClosed"
+				:hightlight="item.hightlight"
+				@close="onCloseItem(item)"
+			/>
+		</div>
+	</teleport>
+</template>
+
+<style>
+:root {
+	--top-notice-top: var(--top-padding-4);
+	--top-notice-right: var(--top-padding-4);
+}
+
+.top-notice {
+	width: 400px;
+	font-size: 14px;
+	position: fixed; top: var(--top-notice-top); right: var(--top-notice-right);
+	z-index: 1000010;
+	display: flex; flex-direction: column-reverse; gap: var(--top-gap-2);
+}
+
+.top-notice ul {
+	padding: 0 0 0 var(--top-padding-5);
+}
+
+@media only screen and (max-width: 600px) {
+	:root {
+		--top-notice-top: var(--top-padding-4);
+		--top-notice-right: var(--top-padding-4);
+	}
+
+	.top-notice { width: auto; left: var(--top-notice-right); }
+}
+</style>

package/src/components/core/notice/stories/README.md

@@ -0,0 +1,34 @@
+Компонент предоставляет интерфейс для вывода сообщений в стиле push уведомлений.
+
+## Подключение
+
+Подключите компонент в корне приложения: `<top-notice v-if="$core.flags.needLoadNotice"></top-notice>`
+
+Подключение через флаг `needLoadNotice` позволяет реализовть ленивую загрузку компонента.
+
+Вызовите функцию **Core.notice()**:
+
+- в js: `Core.notice()`
+- в шаблоне компонента: `$core.notice()`
+
+## CSS переменные
+
+Переменные задаются на уровне `document.body`.
+
+- `--top-notice-top`: отступ сверху
+- `--top-notice-right`: отступ справа
+
+## Контрольные точки
+
+- На размере меньше 600: отображается во всю ширину, отступы от краев экрана становятся меньше.
+- На размере меньше 900: добавляется смахивание **свайпом**.
+
+## jQuery
+
+Для **свайпа** в мобильной версии требуется **jQuery**. При отсутсвии jQuery свайп подключаться не будет.
+
+## i18n
+
+Требует подключение словарей:
+
+* i18n/Common

package/src/components/core/notice/types.ts

@@ -0,0 +1 @@
+export type Props = {};

package/src/components/core/notice/utils.ts

@@ -0,0 +1,115 @@
+import { reactive } from 'vue';
+import type { Props as ItemProps, Props, Style } from '@/components/core/notice/item/types';
+import Core from '@/core/core/core';
+import { genIntHash } from '@/core/utils/string';
+
+export const transitionDuration = 300;
+
+export type Item = Props & { onClose?: Function };
+
+export const itemById = reactive(new Map<string, Item>());
+
+const genItemId = (text: ItemProps['text'], style: ItemProps['style'], options?: Options) => {
+	return 'top-notice_' + genIntHash(text + style + JSON.stringify(options));
+};
+
+export type Options = {
+	title?: ItemProps['title'],
+	metaText?: ItemProps['metaText'],
+	buttonProps?: ItemProps['buttonProps'],
+	isSafeHTML?: ItemProps['isSafeHTML'],
+	selectToClose?: ItemProps['selectToClose'],
+	onClose?: Function
+}
+
+/**
+ * Показать сообщением в стиле push уведомления
+ *
+ * title будет получен из первой строки text
+ *
+ * Если в options указан title, он будет взят оттуда
+ */
+export const show = (text: string, style: Style = 'info', options?: Options) => {
+	let title = '';
+
+	text = String(text);
+
+	const id = genItemId(text, style, options);
+
+	if (options?.title) {
+		title = options.title;
+	} else {
+		const chunks = text.split('\n');
+
+		if (chunks.length) {
+			title = String(chunks.shift());
+			text = chunks.join('\n');
+		}
+	}
+
+	const itemExists = itemById.get(id);
+	if (itemExists) {
+		hightlight(itemExists);
+
+		return;
+	}
+
+	const item: Item = {
+		id,
+		title,
+		text,
+		style,
+		buttonProps: options?.buttonProps,
+		metaText: options?.metaText,
+		isSafeHTML: options?.isSafeHTML,
+		selectToClose: options?.selectToClose,
+		onClose: options?.onClose,
+	};
+
+	itemById.set(item.id, item);
+
+	if (itemById.size > 5) {
+		const [_firstId, firstItem] = [...itemById].at(0) || [];
+		if (firstItem) close(firstItem);
+	}
+
+	/**
+	 * Автозакрытие ошибок форм
+	 *
+	 * Добавляет
+	 */
+	if (Core.state.isMobile) {
+		$('input').one('click', () => close(item));
+	}
+};
+
+const hightlight = (item: Item) => {
+	item.hightlight = true;
+
+	setTimeout(() => item.hightlight = false, transitionDuration);
+};
+
+const close = (item: Item) => {
+	item.forceClosed = true;
+
+	setTimeout(() => {
+		item.onClose?.();
+
+		itemById.delete(item.id);
+	}, transitionDuration);
+};
+
+/**
+ * Убрать подозрительный html код
+ */
+export const prepareText = (text: string) => {
+	const textNoSafety = 'hacking was detected';
+
+	text = text.replace(/<script/g, textNoSafety);
+	text = text.replace(/<img/g, textNoSafety);
+	text = text.replace(/<iframe/g, textNoSafety);
+	text = text.replace(/javascript:/g, textNoSafety);
+	text = text.replace(/<[^>]+ (@|on)\w+=[^>]+>?/g, textNoSafety);
+
+	return text;
+};

package/src/components/dialog/dialog/Dialog (code).mdx

@@ -0,0 +1,61 @@
+import { Markdown } from '@storybook/blocks';
+import Dialog from './stories/dialog_example/dialog_example.vue?raw';
+import DefaultPage from './stories/dialog_example/pages/default.vue?raw';
+import HeaderButtonsPage from './stories/dialog_example/pages/headerButtons.vue?raw';
+import PageUtils from './stories/dialog_example/pages/utils.ts?raw';
+import Autoload from './stories/autoload.ts?raw';
+
+<h2>DialogExample</h2>
+
+Диалоговое окно: `dialog_example/dialog_example.vue`
+
+Инициируется через `useTopDialog()` или  `useAsyncTopDialog()`.
+
+Демонстрирует вывод страниц разными способами:
+
+- через `TopDialogPage` в том же компоненте
+- через `TopDialogPageComponent`
+- через `TopDialogPageComponent` асинхронно
+- через `TopDialogPageComponent` с отключением кеширования
+
+<Markdown>{'```html\n' + Dialog + '\n```'}</Markdown>
+
+<h2>DefaultPage</h2>
+
+Страница диалогового окна: `dialog_example/pages/default.vue`
+
+<Markdown>{'```html\n' + DefaultPage + '\n```'}</Markdown>
+
+<h2>AsyncPage, WithoutCachePage</h2>
+
+`AsyncPage` реализуется стандартным способом через `defineAsyncComponent()`
+
+`WithoutCachePage` реализуется стандартным способом c добавлением props `keepAlive`
+
+Код аналогичен `DefaultPage`.
+
+<h2>HeaderButtonsPage</h2>
+
+Страница диалогового окна: `dialog_example/pages/headerButtons.vue`
+
+Демонтстрирует вывод кнопок в шапке диалогового окна.
+
+Демонтстрирует вывод ссылок на диалоговок окно через атрибут `data-to-view`.
+
+<Markdown>{'```html\n' + HeaderButtonsPage + '\n```'}</Markdown>
+
+<h2>PageUtils</h2>
+
+Файл с утилитами страниц диалогового окна: `dialog_example/pages/utils.ts`
+
+Демонстрирует работу с хуками страницы диалогового окна
+
+<Markdown>{'```js\n' + PageUtils + '\n```'}</Markdown>
+
+<h2>Autoload</h2>
+
+Файл с функцией автозагурзки диалогового окна: `autoload.ts`
+
+Демонстрирует реализацию автозагрузки диалогового окна по его id
+
+<Markdown>{'```js\n' + Autoload + '\n```'}</Markdown>

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

@@ -0,0 +1,99 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { useTopDialog } from './utils';
+import { waitWhile } from '@/core/utils/system';
+import type { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
+import { TopDialogHandle } from './dialogHandle';
+
+/**
+ * Объект для работы с асинхронным диалоговым окном
+ *
+ * Является прослойкой для доступа к TopDialogHandle
+ */
+export class AsyncTopDialogHandle<T extends TopDialogComponent> {
+
+	/**
+	 * Функция, определяющая компонент TopDialogComponent
+	 */
+	readonly resolve: AsyncTopDialogComponentLoader<T>;
+
+	/**
+	 * Реактивная Сссылка на объект worker,
+	 *
+	 * Ссылка не будет указывать на объект, если диалоговое окно еще не загружено
+	 */
+	readonly worker: Ref<TopDialogHandle<T> | null> = ref(null);
+
+	constructor(resolve: AsyncTopDialogComponentLoader<T>) {
+		this.resolve = resolve;
+	}
+
+	/**
+	 * Получить доступ к TopDialogHandle
+	 */
+	async get() {
+		if (this.worker.value) return this.worker.value;
+
+		const result = await this.resolve();
+		const TopDialogComponent = result.default;
+
+		this.worker.value = useTopDialog(TopDialogComponent);
+
+		const worker = this.worker.value;
+
+		await waitWhile(() => !worker.isMounted);
+
+		return worker;
+	}
+
+	/**
+	 * Открыть диалоговое окно
+	 */
+	async open(...args: Parameters<TopDialogHandle<T>['open']>) {
+		const worker = await this.get();
+
+		await worker.open(...args);
+	}
+
+	/**
+	 * Открыть диалоговое окно как ссылку, для хеш-навигации
+	 *
+	 * Только общедоступные диалоговые окна, расположенные в @/dialogs
+	 */
+	async openAsLink(...args: Parameters<TopDialogHandle<T>['open']>) {
+		const worker = await this.get();
+
+		void worker.openAsLink(...args);
+	}
+
+	/**
+	 * Закрыть диалоговое окно
+	 *
+	 * Не меняет состояние компонента диалогового окна
+	 */
+	async close(...args: Parameters<TopDialogHandle<T>['close']>) {
+		const worker = await this.get();
+
+		worker.close(...args);
+	}
+
+	/**
+	 * Размонтировать виджет диалогового окна
+	 */
+	async destroy(...args: Parameters<TopDialogHandle<T>['close']>) {
+		const worker = await this.get();
+
+		worker.destroy(...args);
+	}
+
+	/**
+	 * Устанвоить props
+	 *
+	 * Полностью сбрасывается состояние props
+	 */
+	async setProps(...args: Parameters<TopDialogHandle<T>['setProps']>) {
+		const worker = await this.get();
+
+		await worker.setProps(...args);
+	}
+}

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;