@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,273 +0,0 @@
-import { genHash, getHash, historySetState } from '@/core/utils/route';
-import type { MoveDirection, TopDialogOptions } from './types';
-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,
-		locationHashPrev: '',
-	};
-
-	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).on('hashchange.dialogs', () => {
-			const dialogsStateChanged = this.compareStates(location.hash, this.state.locationHashPrev);
-			if (dialogsStateChanged) this.opendDialogsFromUrl();
-		});
-
-		$(window).trigger('hashchange.dialogs');
-
-		/**
-		 * Сгенерировать ссылку для перехода к странице диалогового окна
-		 */
-		$(document).on('mousedown', 'a[data-to-view]', async (e) => {
-			const el = e.target.closest('[data-to-view]');
-
-			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).on('click', '[data-to-view]', async (e) => {
-			const el = e.target.closest('[data-to-view]');
-
-			// Подождать генерацию ссылки
-			if (el.href === '.') {
-				e.preventDefault();
-
-				el.mousedown();
-
-				setTimeout(() => el.click());
-
-				return;
-			}
-
-			const TopDialogUtils = await this.getDialogsUtils();
-
-			const toView = el.dataset.toView;
-			const viewName = toView.split('-')[0];
-			const $toDialog = $('#' + viewName);
-			const $modalLayers = $('> .modal-layer', $toDialog);
-			const $currentPage = $('> .active', $modalLayers);
-
-			const replaceHistory = !!$toDialog.data('data-to-view-replace');
-
-			let moveDirection: MoveDirection = 'next';
-			if ($currentPage.length) {
-				const pageName = toView.split('-')[1].split(':')[0];
-				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';
-
-			const hash = TopDialogWorker.genViewPageHash(toView, moveDirection);
-
-			if (el.tagName === 'A') {
-				// диалоговое окно еще не открыто, произвести переход по ссылке
-				if (!$toDialog.is(':visible')) return;
-
-				// в адресе уже указана эта страница, необходимсо явно запросить ее открытие
-				if (location.hash.indexOf(toView.replace('-', '=')) !== -1) {
-					await TopDialogUtils.toViewDirty(toView);
-
-					return;
-				}
-			}
-
-			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)) {
-						location.hash = hash;
-					} else {
-						await TopDialogUtils.toViewDirty(toView);
-					}
-				}
-			}
-		});
-
-		setTimeout(() => this.getDialogsUtils(), autoInitDelay);
-	}
-
-	static async getDialogsUtils() {
-		const { TopDialogUtils } = await import('./utils');
-
-		return TopDialogUtils;
-	}
-
-	static get$dialog($el: $el) {
-		return $el.closest('.ui-dialog-content');
-	};
-
-	static get$page($el: $el) {
-		return $el.closest('[data-view-page]');
-	};
-
-	/**
-	 * Получить элементы страницы в шапке и в контенте
-	 */
-	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 close(dialogId: string) {
-		const $dialog = $('#' + dialogId);
-
-		if (!$dialog.dialog('instance')) return;
-
-		$dialog.dialog('close');
-	};
-
-	/**
-	 * Размонтировать $.dialog
-	 */
-	static destroy(dialogId: string) {
-		const $dialog = $('#' + dialogId);
-
-		if (!$dialog.dialog('instance')) return;
-
-		$dialog.dialog('close');
-		$dialog.dialog('destroy');
-	};
-
-	/**
-	 * Сгенерировать ссылку на страницу в диалоговом окне
-	 * @param toView - указатель в формате: dialog_{{ dialogId }}={{ pageName }}:{{ args }}
-	 * @param moveDirection
-	 */
-	static genViewPageHash(toView: string, moveDirection: MoveDirection = 'next') {
-		var toViewPageN = this.state.viewPageN;
-		if (moveDirection == 'prev') {
-			toViewPageN--;
-		} else {
-			toViewPageN++;
-		}
-
-		var viewNameAndPageLink = toView.split('-');
-		var viewName = viewNameAndPageLink.shift();
-		var pageLink = viewNameAndPageLink.join('-');
-		var hash = genHash('vpn', toViewPageN);
-		var 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;
-
-		this.state.locationHashPrev = location.hash;
-
-		// Открыть диалоговое окно
-		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');
-		while (view = regexp.exec(location.hash)) {
-			var moveDirection: MoveDirection = 'next';
-			if (toViewPageN < this.state.viewPageN) moveDirection = 'prev';
-
-			const TopDialogUtils = await this.getDialogsUtils();
-
-			return TopDialogUtils.toViewDirty(view[1], moveDirection);
-		}
-
-		// Закрыть ненужные view
-		$('.ui-dialog-content[data-view-page-active]:visible').each((_index: number, dialog: HTMLElement) => {
-			var $dialog = $(dialog);
-
-			var viewName = $dialog.attr('id');
-			var pageName = getHash('view-' + viewName);
-			if (!pageName) $dialog.dialog('close');
-		});
-
-		this.state.viewPageN = toViewPageN;
-
-		return true;
-	};
-}

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

@@ -1,40 +0,0 @@
-export interface Props {
-	size?: Size;
-	/**
-	 * Изображение для аватара пользователя
-	 */
-	image: string;
-	/**
-	 * Имя пользователя
-	 */
-	nickname?: string;
-	/**
-	 * Флаг того, что пользователь online
-	 */
-	isOnline?: boolean;
-	/**
-	 * Время в формате Y-m-d H:i:s, когда пользователь был онлайн
-	 */
-	lastActiveTime?: string;
-	/**
-	 * Объект со списком перевода Online и LastSeen
-	 */
-	i18n?: I18n;
-}
-
-/**
- * Размеры аватара
- */
-export const sizes = {
-	24: 24,
-	28: 28,
-	40: 40,
-	64: 64,
-} as const;
-
-export type Size = typeof sizes[keyof typeof sizes];
-
-type I18n = {
-	Online: string;
-	LastSeen: string;
-}

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

@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import type { Props } from './avatar';
-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>

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

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import type { Props } from '../avatar';
-import { sizes } from '../avatar';
-import Avatar from '../avatar.vue';
-
-defineProps<Props>();
-</script>
-
-<template>
-	<div>
-		<template v-for="size in sizes">
-			<h2>Размер: {{ size }}</h2>
-
-			<div style="display: flex; gap: var(--top-gap-4)">
-				<Avatar
-					:="$props"
-					:size="size"
-				/>
-
-				<Avatar
-					:="$props"
-					:size="size"
-					isOnline
-				/>
-			</div>
-		</template>
-	</div>
-</template>

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

@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './button.vue';
-import * as ComponentsConst from './types';
-import ReadMe from './stories/README.md?raw';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/M7y5HgfqK3JK3Nyy7XnCJx/Princip-Design-components?type=design&node-id=2505%3A69049&mode=design&t=J7nDcOXsvdJ3b4wE-1',
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		default: 'Кнопка',
-	},
-} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: {
-		disabled: false,
-		isSubmit: false,
-		isActive: false,
-		isProgress: false,
-		href: '',
-		icon: '',
-		icon2: '',
-		badgeNumber: 0,
-		badgePosAfterText: false,
-	},
-}, OverviewComponent);
-
-export const Regular = {
-	args: {
-		default: 'Первостепенная цветная',
-		title: 'Стандартня кнопка первостепенного значения, цвет настраивается через props color',
-		color: 'blue',
-	},
-} satisfies Story;
-
-export const RegularTheme = {
-	args: {
-		default: 'Второстепенная Theme',
-		title: 'Стандартня кнопка второстепенного значения, цвет Theme',
-		color: 'theme',
-	},
-} satisfies Story;
-
-export const Soft = {
-	args: {
-		default: 'Мягкая цветная',
-		title: 'Для выраженных второстепенных кнопок',
-		color: 'blue',
-		styling: 'soft',
-	},
-} satisfies Story;
-
-export const SoftTheme = {
-	args: {
-		default: 'Мягкая Theme',
-		title: 'Для выраженных второстепенных кнопок',
-		color: 'theme',
-		styling: 'soft',
-	},
-} satisfies Story;
-
-export const Outline = {
-	args: {
-		default: 'Без фона цветная',
-		title: 'Для кнопок дополнительного функционала',
-		color: 'blue',
-		styling: 'outline',
-	},
-} satisfies Story;
-
-export const OutlineTheme = {
-	args: {
-		default: 'Без фона Theme',
-		title: 'Для кнопок дополнительного функционала',
-		color: 'theme',
-		styling: 'outline',
-	},
-} satisfies Story;
-
-export const Icons = {
-	args: {
-		default: 'Кнопка с иконками',
-		title: 'В качестве иконок можно вставлять emoji или символы шрифта с иконками. Меняйте props icon и icon2',
-		icon: '',
-		icon2: '',
-	},
-} satisfies Story;
-
-export const OnlyOneIcons = {
-	args: {
-		title: 'Кнопка с иконкой без текста',
-		icon: '',
-	},
-} satisfies Story;
-
-export default meta;

package/src/components/forms/button/button.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Props } from './types';
-
-const props = withDefaults(defineProps<Props>(), {
-	color: 'blue',
-	styling: '',
-	size: 's',
-});
-
-const tagName = computed(() => props.href ? 'a' : 'button');
-
-const type = computed(() => props.isSubmit ? 'submit' : undefined);
-</script>
-
-<template>
-	<component
-		:is="tagName"
-		:class="{
-			['top-active']: isActive,
-			['top-disabled']: disabled,
-			['top-forms-focusable']: !disabled,
-			['top-button']: true,
-			['top-button-progress']: isProgress,
-			[`top-size_${size}`]: !!size,
-			[`top-color_${color}`]: true,
-			[`top-style_${styling}`]: !!styling,
-			['top-button-withoutText']: !$slots.default,
-		}"
-		:name="name"
-		:title="title"
-		:href="href"
-		:type="type"
-		:data-top-icon="icon || undefined"
-		:data-top-icon2="icon2 || undefined"
-		:disabled="disabled || undefined"
-		:inProgress="isProgress"
-	>
-		<span
-			v-if="badgeNumber"
-			:data-top-badge="badgeNumber"
-			class="top-button_badge"
-			:class="{
-				['top-button_badge-afterText']: badgePosAfterText,
-			}"
-		></span>
-
-		<span
-			v-if="$slots.default"
-			class="top-ellipsis"
-		>
-			<!-- @slot Текст в кнопке -->
-			<slot>
-				{{ !icon ? 'Button' : '' }}
-			</slot>
-		</span>
-
-		<!-- @slot HTML в кнопке -->
-		<slot name="html"></slot>
-	</component>
-</template>
-
-<style>
-@import "./style/button.css";
-@import "./style/style-outline.css";
-@import "./style/style-soft.css";
-@import "./style/style-transparent.css";
-
-.top-button {
-	--top-button-color: var(--color-white);
-	--top-button-background-color: transparent;
-	--top-button-background-color-hover: var(--top-button-background-color);
-	--top-button-background-color-active: var(--top-button-background-color-hover);
-	--top-button-background-color-selected: var(--top-button-background-color-hover);
-	--top-button-box-shadow: none;
-	--top-button-box-shadow-hover: var(--top-shadow-darken-2);
-	--top-button-box-shadow-active: var(--top-shadow-darken-3);
-	--top-button-box-shadow-selected: var(--top-shadow-darken-3);
-	--top-forms-border-width: 0px;
-	--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
-	--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
-}
-
-/* Для упрощения работы с event target */
-.top-button > span { pointer-events: none; }
-
-.top-button > .top-ellipsis { flex-grow: 0; }
-
-.top-button.top-size_xs {
-	--top-forms-padding: var(--top-forms-padding_xs);
-	--top-forms-base-height: var(--top-forms-base-height_xs);
-}
-
-.top-button.top-size_m {
-	--top-forms-padding: var(--top-forms-padding_m);
-	--top-forms-base-height: var(--top-forms-base-height_m);
-}
-
-.top-button.top-size_l {
-	--top-forms-padding: var(--top-forms-padding_l);
-	--top-forms-base-height: var(--top-forms-base-height_l);
-}
-
-.top-button_badge-afterText {
-	order: 100;
-}
-
-.top-button:not([data-top-icon2]) > .top-button_badge-afterText {
-	margin-left: 0;
-}
-</style>