@topvisor/ui 1.0.42-dev.2 → 1.0.42-dev.4

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

@@ -1,362 +0,0 @@
-import { genHash, getHash, historySetState } from '@/core/utils/route';
-import type { ElTopDialog, ElTopDialogOpener, ElTopDialogPage, MoveDirection, TopDialogOptions } from './types';
-import { isVisible, 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 || !isVisible(elDialog)) 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, '.ui-dialog-content[data-view-page-active]') as HTMLDialogElement[];
-		elDialogs.filter((elDialog) => {
-			return isVisible(elDialog);
-		}).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

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

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

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

@@ -1,40 +0,0 @@
-Компонент позволяет простым и удобным способом вставлять векторную анимацию на стариницы сайта.
-
-Вставляет анимацию через библиотеку **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

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

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

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

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

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