@topvisor/ui 1.0.41 → 1.1.0-date.0

package/src/components/dialog/lib/worker.ts

@@ -0,0 +1,362 @@
+import { genHash, getHash, historySetState } from '@/core/utils/route';
+import type { ElTopDialog, ElTopDialogOpener, ElTopDialogPage, MoveDirection, TopDialogOptions } from './types';
+import { querySelectorAllArray } from '@/core/utils/dom';
+import type { $el } from '@/components/types';
+
+export abstract class TopDialogWorker {
+	static state = {
+		load: undefined as TopDialogOptions['load'] | undefined,
+		decoratorOnCreate: undefined as TopDialogOptions['decoratorOnCreate'] | undefined,
+
+		/**
+		 * Порядковый номер перехода в диалоговых окнах
+		 *
+		 * Для расчета анимации Вперед / Назад
+		 */
+		viewPageN: 0,
+	};
+
+	private static inited = false;
+
+	/**
+	 * Инициировать события слежения за парамтерами url
+	 *
+	 * Если в параметрах есть запрос на открытие диалогового окна, TopDialog будет автоматически подключен на страницу
+	 */
+	static init(options?: TopDialogOptions) {
+		if (this.inited) return;
+		this.inited = true;
+
+		this.state.load = options?.load;
+		this.state.decoratorOnCreate = options?.decoratorOnCreate;
+
+		const autoInitDelay = options?.autoInitDelay ?? 5000;
+
+		window.addEventListener('hashchange', (e) => {
+			this.opendDialogsFromChangeUrl(e.oldURL, e.newURL);
+		});
+
+		this.opendDialogsFromChangeUrl('', location.href);
+
+		/**
+		 * Сгенерировать ссылку для перехода к странице диалогового окна
+		 */
+		document.addEventListener('mousedown', async (e) => {
+			const elEventTarget = e.target as HTMLElement;
+
+			const el = elEventTarget.closest<ElTopDialogOpener<HTMLAnchorElement>>('a[data-to-view]');
+			if (!el) return;
+
+			// const toView = el.dataset.toView;
+			// const viewName = toView.split('-')[0];
+			// const $toDialog = $('#' + viewName);
+			// const $modalLayers = $('> .modal-layer', $toDialog);
+			// const $currentPage = $('> .active', $modalLayers);
+
+			let moveDirection: MoveDirection = 'next';
+
+			// /**
+			//  * Данный алгоритм определения направления работает не корректно, так как для чтения свойства order менят состояние через getDialogsUtils()
+			//  */
+			// if ($currentPage.length) {
+			// 	const pageName = toView.split('-')[1].split(':')[0];
+			//
+			// 	const TopDialogUtils = await this.getDialogsUtils();
+			//
+			// 	await TopDialogUtils.updatePageVue(viewName, undefined, pageName);
+			//
+			// 	const $nextPage = $('> [data-view-page="' + pageName + '"]', $modalLayers);
+			// 	if ($nextPage.data('order') < $currentPage.data('order')) moveDirection = 'prev';
+			// }
+
+			if (el.dataset.action === 'top-dialog-close') moveDirection = 'prev';
+
+			el.href = TopDialogWorker.genViewPageHash(el.dataset.toView, moveDirection);
+		});
+
+		/**
+		 * Осуществить переход по ссылке с учетом historyType
+		 */
+		document.addEventListener('click', async (e) => {
+			const elEventTarget = e.target as HTMLElement;
+
+			const el = elEventTarget.closest<ElTopDialogOpener>('[data-to-view]');
+			if (!el) return;
+
+			// Подождать генерацию ссылки
+			if (el instanceof HTMLAnchorElement && el.href === '.') {
+				e.preventDefault();
+
+				const mouseEvent = new MouseEvent('mousedown', {
+					bubbles: true,
+					cancelable: true,
+					view: window,
+				});
+
+				el.dispatchEvent(mouseEvent);
+
+				setTimeout(() => el.click());
+
+				return;
+			}
+
+			const TopDialogUtils = await this.getDialogsUtils();
+
+			const toView = el.dataset.toView;
+			const viewName = toView.split('-')[0];
+
+			const elDialog = TopDialogUtils.getElDialogById(viewName);
+
+			let moveDirection: MoveDirection = 'next';
+
+			if (elDialog) {
+				const elModalLayers = querySelectorAllArray(elDialog, '.modal-layer');
+				const elCurrentPages = elModalLayers.reduce<ElTopDialogPage[]>((acc, el) => {
+					const elCurrentPage = el.querySelector<ElTopDialogPage>(':scope > .active');
+
+					if (elCurrentPage) acc.push(elCurrentPage);
+
+					return acc;
+				}, []);
+
+				if (elCurrentPages.length) {
+					const pageName = toView.split('-')[1].split(':')[0];
+					const elNextPages = elModalLayers.reduce<ElTopDialogPage[]>((acc, el) => {
+						const elNextPage = el?.querySelector<ElTopDialogPage>(`:scope > [data-view-page="${pageName}"]`);
+
+						if (elNextPage) acc.push(elNextPage);
+
+						return acc;
+					}, []);
+
+					if ((elNextPages[0]?.dataset.order ?? 0) < (elCurrentPages[0]?.dataset.order ?? 0)) moveDirection = 'prev';
+				}
+			}
+
+			if (el.dataset.action === 'top-dialog-close') moveDirection = 'prev';
+
+			const hash = TopDialogWorker.genViewPageHash(toView, moveDirection);
+
+			if (el instanceof HTMLAnchorElement) {
+				// диалоговое окно еще не открыто, произвести переход по ссылке
+				if (!elDialog?.checkVisibility()) return;
+
+				// в адресе уже указана эта страница, необходимо явно запросить ее открытие
+				if (location.hash.indexOf(toView.replace('-', '=')) !== -1) {
+					await TopDialogUtils.toViewDirty(toView);
+
+					return;
+				}
+			}
+
+			const replaceHistory = !!elDialog?.dataset.toViewReplace;
+
+			if (replaceHistory) {
+				e.preventDefault();
+
+				historySetState(true, hash);
+
+				await TopDialogUtils.toViewDirty(toView);
+
+				if (moveDirection == 'next') {
+					TopDialogWorker.state.viewPageN++;
+				} else {
+					TopDialogWorker.state.viewPageN--;
+				}
+			} else {
+				if (el.tagName !== 'A') {
+					if (this.compareStates(hash, location.hash)) {
+						historySetState(false, hash);
+					} else {
+						await TopDialogUtils.toViewDirty(toView);
+					}
+				}
+			}
+		});
+
+		setTimeout(() => this.getDialogsUtils(), autoInitDelay);
+	}
+
+	private static opendDialogsFromChangeUrl(oldUrl: string, newUrl: string) {
+		const oldHash = oldUrl.replace(/.*?#/, '#');
+		const newHash = newUrl.replace(/.*?#/, '#');
+
+		const dialogsStateChanged = this.compareStates(oldHash, newHash);
+		if (dialogsStateChanged) void this.opendDialogsFromUrl();
+	}
+
+	static async getDialogsUtils() {
+		const { TopDialogUtils } = await import('./utils');
+
+		return TopDialogUtils;
+	}
+
+	static getDialog(el: HTMLElement) {
+		return el.closest<ElTopDialog>('.ui-dialog-content');
+	};
+
+	/**
+	 * todo: Переписать на сайте на this.getDialog()
+	 *
+	 * @deprecated Для обратной совместимости
+	 */
+	static get$dialog($el: $el) {
+		return $el.closest('.ui-dialog-content');
+	};
+
+	static getPage(el: HTMLElement) {
+		return el.closest<ElTopDialogPage>('[data-view-page]');
+	};
+
+	/**
+	 * todo: Переписать на сайте на this.getPage()
+	 *
+	 * @deprecated Для обратной совместимости
+	 */
+	static get$page($el: $el) {
+		return $el.closest('[data-view-page]');
+	};
+
+	/**
+	 * todo: Переписать на сайте на this.getPairPage()
+	 *
+	 * @deprecated Для обратной совместимости
+	 */
+	static get$pairPage($el: $el) {
+		const $dialog = TopDialogWorker.get$dialog($el);
+
+		const $page = TopDialogWorker.get$page($el);
+		const pageName = $page.data('view-page');
+
+		return $('[data-view-page="' + pageName + '"]', $dialog);
+	};
+
+	static getPairPage(el: HTMLElement) {
+		const elDialog = TopDialogWorker.getDialog(el);
+		if (!elDialog) return;
+
+		const elPage = TopDialogWorker.getPage(el);
+		const pageName = elPage?.dataset.viewPage;
+
+		return querySelectorAllArray(elDialog, `[data-view-page="${pageName}"]`);
+	};
+
+	/**
+	 * Закрыть диалоговое окно
+	 */
+	static close(dialogId: string) {
+		const $dialog = $('#' + dialogId);
+		if ($dialog.dialog('instance')) {
+			$dialog.dialog('close');
+
+			return;
+		}
+
+		const elDialog = document.getElementById(dialogId);
+
+		if (!(elDialog instanceof HTMLDialogElement)) return;
+
+		elDialog.close();
+	};
+
+	/**
+	 * Размонтировать $.dialog
+	 */
+	static destroy(dialogId: string) {
+		const $dialog = $('#' + dialogId);
+
+		if ($dialog.dialog('instance')) {
+			$dialog.dialog('close');
+			$dialog.dialog('destroy');
+
+			return;
+		}
+
+		const elDialog = document.getElementById(dialogId);
+		if (!(elDialog instanceof HTMLDialogElement)) return;
+
+		elDialog.close();
+	};
+
+	/**
+	 * Сгенерировать ссылку на страницу в диалоговом окне
+	 * @param toView - указатель в формате: dialog_{{ dialogId }}={{ pageName }}:{{ args }}
+	 * @param moveDirection
+	 */
+	static genViewPageHash(toView: string, moveDirection: MoveDirection = 'next') {
+		let toViewPageN = this.state.viewPageN;
+		if (moveDirection == 'prev') {
+			toViewPageN--;
+		} else {
+			toViewPageN++;
+		}
+
+		const viewNameAndPageLink = toView.split('-');
+		const viewName = viewNameAndPageLink.shift();
+		const pageLink = viewNameAndPageLink.join('-');
+
+		let hash = genHash('vpn', toViewPageN);
+		hash = genHash('view-' + viewName, pageLink, hash);
+
+		return hash;
+	};
+
+	/**
+	 * Сравнить версию открытых диалоговых окон
+	 * @returns вернет true, если состояния открытых окон изменилось
+	 */
+	static compareStates(hash: string, hash2: string) {
+		const mathes = hash.match(/[#&]view-[^&]+/g) || [];
+		const mathes2 = hash2.match(/[#&]view-[^&]+/g) || [];
+
+		if (mathes.length !== mathes2.length) return true;
+
+		const mathesChanged = mathes.filter((math, n) => {
+			const math2 = mathes2[n] || '';
+
+			return math !== math2;
+		});
+
+		if (mathesChanged.length) return true;
+
+		return false;
+	};
+
+	static opendDialogsFromUrl = async () => {
+		const toViewPageN = Number(getHash('vpn')) || 0;
+
+		// Открыть диалоговое окно
+		let view: RegExpExecArray | null;
+		// const regexp = new RegExp('view-((\\w+)=([\\w-]+)(?::([\\w.:-]+))?)' + '(' + Math.random() + ')?', 'g'); // fix babel minify regexp
+		const regexp = new RegExp('view-((\\w+)=([\\w-]+)(?::([\\w.:-]+))?)', 'g');
+
+		// TODO: Цикл делает только одну оперцию и выходит (возможно, оставлен специально с какой-то целью, если нет - заменить на if)
+		while (view = regexp.exec(location.hash)) {
+			let moveDirection: MoveDirection = 'next';
+			if (toViewPageN < this.state.viewPageN) moveDirection = 'prev';
+
+			const TopDialogUtils = await this.getDialogsUtils();
+
+			return TopDialogUtils.toViewDirty(view[1], moveDirection);
+		}
+
+		// Закрыть ненужные view
+		const elDialogs = querySelectorAllArray(document, 'dialog[page-active]') as HTMLDialogElement[];
+		elDialogs.filter((elDialog) => {
+			return elDialog.checkVisibility();
+		}).forEach((elDialog) => {
+			const viewName = elDialog.getAttribute('id');
+			if (!viewName) throw 'Диалоговое окно не содержит id';
+			const pageName = getHash('view-' + viewName);
+			if (!pageName) {
+				const $dialog = $(elDialog);
+
+				$dialog.dialog('close');
+			}
+		});
+
+		this.state.viewPageN = toViewPageN;
+
+		return true;
+	};
+}

package/src/components/extra/extra.ts

@@ -0,0 +1,5 @@
+import type { ComponentCustomProps } from 'vue';
+
+import Rive from './rive/rive.vue';
+
+export const TopRive = Rive as typeof Rive & ComponentCustomProps;

package/src/components/extra/rive/rive.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onUnmounted, ref, watch } from 'vue';
+import type { Rive, RiveParameters } from '@rive-app/canvas-lite';
+import type { Props } from './types';
+
+let rive: typeof import('@rive-app/canvas-lite');
+
+const props = withDefaults(defineProps<Props>(), {
+	autoplay: true,
+});
+
+const el = ref<HTMLCanvasElement>();
+
+const topRive = {
+	riveInstance: undefined as Rive | undefined,
+};
+
+watch([el, props], async () => {
+	if (!rive) rive = await import('@rive-app/canvas-lite');
+
+	const canvas = el.value;
+	if (!canvas) return;
+
+	topRive.riveInstance?.cleanup();
+
+	const options: RiveParameters = {
+		...props,
+		canvas,
+		onLoad: (e) => {
+			props.onLoad?.(e);
+
+			topRive.riveInstance?.resizeDrawingSurfaceToCanvas();
+		},
+	};
+
+	topRive.riveInstance = new rive.Rive(options);
+});
+
+onUnmounted(() => {
+	topRive.riveInstance?.cleanup();
+});
+
+defineExpose(topRive);
+</script>
+
+<template>
+	<canvas ref="el" class="top-rive"></canvas>
+</template>
+
+<style>
+.top-rive {
+	width: 100%;
+	height: 100%;
+	flex-grow: 1;
+}
+</style>

package/src/components/extra/rive/rives.stories.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './rive.vue';
+import { TopSelect } from '@/components/forms/forms';
+import ReadMe from './stories/README.md?raw';
+import srcNope from './stories/nope.riv?url';
+import srcSadness from './stories/sadness.riv?url';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		src: 'https://cdn.rive.app/animations/vehicles.riv',
+	},
+} satisfies Story;
+
+export const Examples = {
+	parameters: {
+		controls: {
+			include: [],
+		},
+	},
+	render: (_args: any) => ({
+		components: {
+			TopSelect,
+			TopRive: Component,
+		},
+		setup() {
+			const topRive = ref({});
+
+			const src = ref('https://cdn.rive.app/animations/vehicles.riv');
+
+			const options = new Map();
+			options.set('https://cdn.rive.app/animations/vehicles.riv', 'default');
+			options.set(srcNope, 'nope');
+			options.set(srcSadness, 'sadness');
+
+			return { topRive, src, options };
+		},
+		template: `
+			<TopSelect v-model="src" :options></TopSelect><br><br>
+
+			<TopRive ref="topRive" :src></TopRive>
+		`,
+	}),
+};
+
+export default meta;

package/src/components/extra/rive/stories/README.md

@@ -0,0 +1,40 @@
+Компонент позволяет простым и удобным способом вставлять векторную анимацию на стариницы сайта.
+
+Вставляет анимацию через библиотеку **Rive**: https://rive.app/docs/runtimes/web/web-js.
+
+Подробную инфомрацию можно найти на официальном сайте Rive.
+
+## Подклчюение
+
+Внешняя зависимость: `@rive-app/canvas-lite`
+
+Библиотека весит больше **500KB**, а это значит что она не должна грузиться вместе с приложением.
+
+Загрузка библиотеки выполняется автоматически асинхронно при первом отображении компонента.
+
+## Настройка размеров
+
+По умолчанию компонент растягивается по ширине родительского элемента.
+
+Размеры можно задать врчную следующим образом:
+
+```html
+
+<TopRive style="width: 24px; height: 24px;"></TopRive>
+```
+
+## resizeDrawingSurfaceToCanvas()
+
+Если размеры анимации были изменены после отрисовки, качество анимации может ухудшаться.  
+Это можно испрвить, вызвав метод `resizeDrawingSurfaceToCanvas()`.  
+Доступ у нему предоставляется в объекте компонента. См. пример:
+
+```html
+
+<TopRive ref="topRive"></TopRive>
+```
+
+```js
+
+topRive.value.riveInstance.resizeDrawingSurfaceToCanvas()
+```

package/src/components/extra/rive/types.ts

@@ -0,0 +1,8 @@
+import type { RiveParameters } from '@rive-app/canvas-lite';
+
+export interface Props extends Omit<RiveParameters, 'canvas' | 'file' > {
+	/**
+	 * Описание всех полей см. тут: https://rive.app/docs/runtimes/web/rive-parameters
+	 */
+	src: RiveParameters['src'];
+}

package/src/components/forms/README.mdx

@@ -0,0 +1,10 @@
+# UI/Forms
+
+Бибилотка содержит базовый функционал для работы с формами.
+
+В отличие от других библиотек все файлы js и css этой библиотеки при сборке объединяются в один файл css и один файл js.
+
+Такой алгоритм Используется для быстрого подключения необходимого функционала к странице, для ее быстрой отрисовке.
+
+Стоит следить за тем, чтобы в бибилотеке не импортировались крупные ненужные для большинства страниц сайта компоненты.
+Для таких компонентов следует использовать асинхронный импорт там, где это нужно.

package/src/components/forms/avatar/avatar.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './avatar.vue';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component);
+
+/**
+ * Компонент для аватара пользователя
+ *
+ * Рекомендуемый размер изображения: 128x128
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		image: 'https://topvisor.dev/images/avatar.jpg',
+		nickname: 'User name',
+		lastActiveTime: '2023-01-01 12:00:00',
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		image: 'https://topvisor.dev/images/avatar.jpg',
+		nickname: 'User name',
+		lastActiveTime: '2023-01-01 12:00:00',
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/forms/avatar/avatar.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { Props } from './types';
+import { dateFormat } from '@/core/utils/date';
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 64,
+	i18n: () => ({
+		Online: 'Online',
+		LastSeen: 'Last seen',
+	}),
+});
+
+const titleStatus = computed(() => {
+	if (props.isOnline) {
+		return props.i18n?.Online;
+	}
+
+	if (props.lastActiveTime) {
+		return props.i18n?.LastSeen + ': ' + dateFormat(props.lastActiveTime, 2);
+	}
+});
+
+const titleImage = computed(() => {
+	if (!props.nickname) return titleStatus.value;
+
+	return props.nickname + (titleStatus.value ? `\n${titleStatus.value}` : '');
+});
+</script>
+
+<template>
+	<div class="top-avatar">
+		<img
+			class="top-avatar_image"
+			:src="image"
+			:title="titleImage"
+			alt=""
+		>
+
+		<div
+			v-if="isOnline"
+			class="top-avatar_status"
+			:title="titleStatus"
+		>
+		</div>
+	</div>
+</template>
+
+<style>
+.top-avatar {
+	width: v-bind(size+ "px");
+	height: v-bind(size+ "px");
+	display: flex;
+	flex-grow: 0;
+	flex-shrink: 0;
+	position: relative;
+	top: 0;
+	left: 0;
+}
+
+.top-avatar_image {
+	border-radius: 50%;
+	width: 100%;
+	height: 100%;
+}
+
+.top-avatar_status {
+	border-radius: 50%;
+	border: 2px solid var(--color-layout-front-1);
+	background-color: var(--color-bg-positive-1);
+	width: 25%;
+	height: 25%;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
+</style>