@topvisor/ui 1.0.22-test-ci-cd-10 → 1.2.0

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

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

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

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

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

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

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

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

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

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