@topvisor/ui 1.1.0 → 1.2.0

package/src/components/popup/lib/worker.globalEvents.ts

@@ -0,0 +1,97 @@
+import Core from '@/core/core/core';
+import Events from '@/core/core/events';
+import Worker from '@/components/popup/lib/worker';
+
+/**
+ * Глобальные события, для реализации Popup
+ */
+class WorkerEvents {
+
+	private static isInited = false;
+
+	/**
+	 * Добавить глобальные обработчики
+	 *
+	 * Добавляются на страницу один раз и навсегда
+	 */
+	static init(): void {
+		if (this.isInited) return;
+
+		this.isInited = true;
+
+		// автоматическое открытие при наведении мыши, событие глобальное, так как инициализация popup отложена
+		document.addEventListener('mouseover', (e) => {
+			if (!(e.target instanceof HTMLElement) || !e.target.dataset?.topPopupOpenByHover) {
+				return;
+			}
+
+			e.target.click();
+		});
+
+		// при скролле страницы закрыть Popup
+		document.addEventListener('scroll', () => {
+			if (Core.state.isMobile || Core.state.isMobileUA) {
+				return;
+			}
+
+			Worker.getAll().forEach(elPopup => Worker.close(elPopup));
+		});
+
+		Events.addOnReize(e => {
+			// закрыть popup при повороте экрана телефона
+			// если была отображена ПК версия, она будет закрыта
+			if (Core.state.isMobile && e.topEvent.widthDiff) {
+				Worker.getAll().forEach(elPopup => Worker.close(elPopup));
+			}
+		});
+
+		document.addEventListener('click', this.onclick);
+	}
+
+	/**
+	 * Глобальный обработчик кликов
+	 *
+	 * Обрабатывает клики на открытие Popup
+	 */
+	private static async onclick(e: Event): Promise<void> {
+		if (!(e.target instanceof HTMLElement)) return;
+
+		let elOpener: HTMLElement | null | undefined;
+
+		switch (true) {
+			case !!e.target.dataset?.topPopup:
+				elOpener = e.target;
+
+				break;
+
+			case !!e.target.parentElement?.dataset.topPopup:
+				elOpener = e.target.parentElement;
+
+				break;
+
+			case !!e.target.parentElement?.parentElement?.dataset.topPopup:
+				elOpener = e.target.parentElement?.parentElement;
+
+				break;
+		}
+
+		if (!elOpener) {
+			return;
+		}
+
+		if (elOpener.dataset.topPopupDisabled) {
+			return;
+		}
+
+		// меню уже открыто
+		if (elOpener.dataset.topPopupOpened) {
+			return;
+		}
+
+		e.preventDefault();
+
+		await Worker.openByOpener(elOpener);
+	}
+}
+
+export default WorkerEvents;

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

@@ -0,0 +1,286 @@
+/**
+ * PopupWorker управлеяет работой Popup
+ *
+ * Должен грузить TopLibPopup только в отложенном режиме
+ */
+
+import Core from '@/core/core/core';
+import DOM from '@/core/utils/dom';
+import type { TopLibPopup, PopupOptions } from '@/components/popup/lib/popup';
+import type { OpenerProps } from '@/components/popup/popup/popup';
+
+export type Options = {
+	/**
+	 * Глобальное событие, которое будет вызвано перед открытием TopPopup
+	 */
+	decoratorBeforeOpen?: (popup: TopLibPopup) => void,
+
+	/**
+	 * Глобальное событие, которое будет вызвано после открытия TopPopup
+	 */
+	decoratorAfterOpen?: (popup: TopLibPopup) => void;
+
+	/**
+	 * Определитель того, что клик вне Popup нужно игнорировать
+	 * @returns {boolean} - если true, то click не приведет к закрытию Popup
+	 */
+	decoratorIsIgnoreOuterClick?: (e: MouseEvent) => boolean
+}
+
+class Worker {
+
+	/**
+	 * Глобальное выключение закрытия меню, используется при различных оверлеях
+	 */
+	static noClose = false;
+
+	/**
+	 * Для взаимодействия с vue
+	 */
+	static vueConnectors = new Map();
+
+	static options: Options = {};
+
+	/**
+	 * Вернуть объект компонента popup, привязанный к элементу
+	 */
+	static getPopup(elPopup: HTMLElement): TopLibPopup {
+		return DOM.storage(elPopup, 'TopPopup') as TopLibPopup;
+	}
+
+	/**
+	 * Вернуть все элементы с Popup
+	 */
+	static getAll(): HTMLElement[] {
+		return DOM.querySelectorAllArray(document, '.top-popup-wrapper');
+	}
+
+	/**
+	 * Вернуть все элементы с открытыми Popup
+	 */
+	static getAllVisible(): HTMLElement[] {
+		return DOM.querySelectorAllVisible(document, '.top-popup-wrapper');
+	}
+
+	/**
+	 * Открть Popup от указанного elOpener
+	 * @param {HTMLElement} elOpener - элемент, который должен вызвать открытие Popup
+	 */
+	static async openByOpener(elOpener: HTMLElement): Promise<TopLibPopup | undefined> {
+		if (!(elOpener instanceof HTMLElement)) return;
+
+		const options: PopupOptions = {};
+
+		options.popup = elOpener.dataset.topPopup;
+
+		options.id = elOpener.dataset.topPopupId;
+
+		/**
+		 * @deprecated topPopupP - добавлено для обратной совместимости
+		 */
+		if (elOpener.dataset.topPopupP) {
+			options.p = parseInt(elOpener.dataset.topPopupP);
+		}
+
+		if (elOpener.dataset.topPopupPos) {
+			options.p = parseInt(elOpener.dataset.topPopupPos);
+		}
+
+		/**
+		 * @deprecated '1' - добавлено для обратной совместимости
+		 */
+		if (elOpener.dataset.topPopupNotch) {
+			options.notch = elOpener.dataset.topPopupNotch === 'true' || elOpener.dataset.topPopupNotch === '1';
+		}
+
+		if (elOpener.dataset.topPopupClass) {
+			options.class = elOpener.dataset.topPopupClass;
+		}
+
+		if (elOpener.dataset.topPopupPosBy) {
+			options.posBy = elOpener.dataset.topPopupPosBy as PopupOptions['posBy'];
+		}
+
+		if (elOpener.dataset.topPopupFront) {
+			options.frontSelector = elOpener.dataset.topPopupFront;
+		}
+
+		/**
+		 * @deprecated '1' - добавлено для обратной совместимости
+		 */
+		if (elOpener.dataset.topPopupInvertX) {
+			options.invertX = elOpener.dataset.topPopupInvertX === 'true' || elOpener.dataset.topPopupInvertX === '1';
+		}
+
+		/**
+		 * @deprecated '1' - добавлено для обратной совместимости
+		 */
+		if (elOpener.dataset.topPopupOpenByHover) {
+			options.openByHover = elOpener.dataset.topPopupOpenByHover === 'true' || elOpener.dataset.topPopupOpenByHover === '1';
+		}
+
+		/**
+		 * @deprecated '1' - добавлено для обратной совместимости
+		 */
+		if (elOpener.dataset.topPopupUseOriginal) {
+			options.useOriginal = elOpener.dataset.topPopupUseOriginal === 'true' || elOpener.dataset.topPopupUseOriginal === '1';
+		}
+
+		return await Worker.open(elOpener, options);
+	}
+
+	/**
+	 * Создать и открыть Popup
+	 * @param elOpener - элемент, вызвавший открытие Popup
+	 * @param options - опции Popup
+	 */
+	private static async open(elOpener: HTMLElement, options: PopupOptions): Promise<TopLibPopup> {
+		if (elOpener instanceof HTMLElement) elOpener.dataset.topPopupOpened = 'opened';
+
+		const { TopLibPopup } = await import('./popup');
+
+		if (Core.$) {
+			const $elOpener = Core.$(elOpener);
+
+			// deprecated, используется aftershow.top-menu-popup
+			if ($elOpener.data('aftershow')) {
+				let afterShow = $elOpener.data('aftershow');
+				if (typeof (afterShow) == 'string') {
+					// TODO: Удалить с сайта указание кода функции в html
+					// @deprecated
+					afterShow = eval(afterShow.replace(/\W/g, ''));
+				}
+
+				$elOpener.one('aftershow.top-menu-popup', afterShow);
+			}
+
+			// deprecated, используется afterclose.top-menu-popup
+			if ($elOpener.data('afterclose')) {
+				let afterclose = $elOpener.data('afterclose');
+				if (typeof (afterclose) == 'string') {
+					// TODO: Удалить с сайта указание кода функции в html
+					// @deprecated
+					afterclose = eval(afterclose.replace(/\W/g, ''));
+				}
+
+				$elOpener.one('afterclose.top-menu-popup', afterclose);
+			}
+		}
+
+		options.isFullScreen = Core.state.isMobile;
+
+		return new TopLibPopup(elOpener, options);
+	}
+
+	static close(elPopup: HTMLElement): void {
+		const popup = Worker.getPopup(elPopup);
+		if (popup) {
+			popup.close();
+		}
+	}
+
+	static recalcPosition(elPopup: HTMLElement): void {
+		const popup = Worker.getPopup(elPopup);
+		if (popup && popup.elPopupBody instanceof HTMLElement) {
+			popup.recalcPosition();
+		}
+	}
+
+	/**
+	 * Скролл к активному элементу списка
+	 */
+	static scrollToActive(elPopup: HTMLElement): void {
+		const elItemActive = DOM.querySelectorVisible(elPopup, 'ul.top-popup_content > li > .top-active');
+		if (!elItemActive) {
+			return;
+		}
+
+		const elUl = elPopup.querySelector('ul.top-popup_content');
+		const elsLi = DOM.querySelectorAllVisible(elPopup, 'ul.top-popup_content > li');
+
+		elPopup.classList.add('top-popup-wrapper-no_animate');
+		setTimeout(() => elPopup.classList.remove('top-popup-wrapper-no_animate'), 100);
+
+		let top = 100;
+		for (const elLi of elsLi) {
+			if (elLi.querySelector(':scope > .top-active')) {
+				break;
+			}
+
+			if (elLi instanceof HTMLElement) top += elLi.offsetHeight;
+		}
+
+		if (elUl instanceof HTMLElement) {
+			const heightWrapper = elUl.offsetHeight;
+			if (top > heightWrapper) {
+				elUl.scrollTop = top - heightWrapper;
+			} else {
+				elUl.scrollTop = 0;
+			}
+		}
+	}
+
+	static decoratorBeforeOpen(popup: TopLibPopup): void {
+		if (this.options.decoratorBeforeOpen) {
+			this.options.decoratorBeforeOpen(popup);
+		}
+	};
+
+	static decoratorAfterOpen(popup: TopLibPopup): void {
+		if (this.options.decoratorAfterOpen) {
+			this.options.decoratorAfterOpen(popup);
+		}
+	};
+
+	static decoratorIsIgnoreOuterClick(e: MouseEvent): boolean {
+		if (this.options.decoratorIsIgnoreOuterClick) {
+			return this.options.decoratorIsIgnoreOuterClick(e);
+		}
+
+		return false;
+	}
+
+	/**
+	 * Зарегистрировать Vue компонент
+	 *
+	 * Каждый экземляр Popup регистрируется в словаре vueConnectors для последующего доступа из js
+	 */
+	static regVueComponent(id: string, vueConnector: any): void {
+		if (Worker.vueConnectors.get(id)) {
+			throw 'Vue component Popup use duplicated id: ' + id;
+		}
+
+		Worker.vueConnectors.set(id, vueConnector);
+	}
+
+	/**
+	 * Снять с регистрации Vue компонент
+	 */
+	static unregVueComponent(id: string): void {
+		Worker.vueConnectors.delete(id);
+	}
+
+	/**
+	 * Сгенерировтаь элемент для открытия popup
+	 */
+	static genElPopupOpener(tagName: string, props: OpenerProps, ...elsChildrens: HTMLElement[] | string[]): HTMLElement {
+		const el = DOM.genEl(tagName, {}, ...elsChildrens);
+
+		el.dataset.topPopup = '#' + props.id;
+
+		// if (props.pos === undefined) props.pos = '3';
+		// if (props.notch === undefined) props.notch = true;
+		// if (props.posBy === undefined) props.posBy = 'fixed';
+
+		for (let name in props) {
+			const attrName = 'topPopup' + name.charAt(0).toUpperCase() + name.slice(1);
+
+			el.dataset[attrName] = props[name];
+		}
+
+		return el;
+	}
+
+}
+
+export default Worker;

package/src/components/popup/popup/listItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ListItemProps } from './popup';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ListItemProps>(), {
+	type: 'button',
+	closeByClick: true,
+});
+</script>
+
+<template>
+	<li
+		:class="{
+		'top-popup_liNoSelectable': props.type !== 'button'
+	}"
+	>
+		<component
+			:is="$attrs.href ? 'a' : 'div'"
+			:class="{
+				'top-popup_listItem': true,
+				'top-popup_listItem-button': props.type === 'button', // оформления кнопки
+				'a': props.type === 'button',  // оформления кнопки, deprecated
+				'top-popup_listItem-title': props.type === 'title',
+				'top-popup_listItem-delimiter': props.type === 'delimiter',
+				'top-popup-noCloser': !closeByClick
+			}"
+			:=$attrs
+		>
+			<slot></slot>
+		</component>
+	</li>
+</template>

package/src/components/popup/popup/opener.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { onUpdated } from 'vue';
+import type { OpenerProps } from './popup';
+
+const props = withDefaults(defineProps<OpenerProps>(), {
+	pos: '3',
+	notch: true,
+	posBy: 'fixed',
+});
+
+const id = props.id || Math.random() + '';
+
+let elOpener: Element;
+
+/**
+ * Необычная функция для проброски props внтурь элемента слота
+ *
+ * @param el - вспомогательрный элемент для доступа к элементам слота
+ */
+function render(el: any) {
+	setTimeout(() => {
+		elOpener = el.nextElementSibling;
+
+		if (elOpener) {
+			renderOpener(elOpener);
+		}
+	});
+}
+
+onUpdated(() => {
+	if (elOpener) {
+		renderOpener(elOpener);
+	}
+});
+
+function renderOpener(elOpener: any) {
+	/**
+	 * topPopup - необходимый атрибут для всез Popup
+	 *
+	 * Для Vue вместо него используется атрибут topPopupId
+	 */
+	elOpener.dataset.topPopup = '#' + id;
+
+	elOpener.dataset.topPopupId = id;
+	elOpener.dataset.topPopupPos = props.pos;
+	elOpener.dataset.topPopupPosBy = props.posBy;
+	elOpener.dataset.topPopupNotch = props.notch ? 'true' : '';
+	elOpener.dataset.topPopupOpenByHover = props.openByHover ? 'true' : '';
+}
+</script>
+
+<template>
+	<template :ref="render"></template>
+
+	<!-- @slot элемент для открытия Popup -->
+	<slot></slot>
+</template>
+
+<!-- Использует общий deprecated класс .btn  -->
+<style>
+h3[data-top-popup],
+div[data-top-popup],
+i[data-top-popup]:not(.btn),
+b[data-top-popup]:not(.btn) {
+	cursor: pointer;
+	user-select: none;
+	font-style: normal;
+	text-decoration: none;
+	display: inline-flex;
+	align-items: center;
+}
+
+[data-top-popup][data-top-popup-disabled] {
+	pointer-events: none;
+	cursor: auto !important;
+}
+
+i[contenteditable] {
+	cursor: text !important;
+}
+</style>

package/src/components/popup/popup/popup.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import OverviewComponent from './stories/overview.vue';
+
+import Component from './popup.vue';
+import * as ComponentsConst from './popup';
+import ReadMe from './stories/README.md?raw';
+
+import WidgetInput from '@/components/popup/popup/widgetInput.vue';
+import Button from '@/components/forms/button/button.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	render: (args) => ({
+		components: {
+			Popup: Component,
+			WidgetInput,
+			Button,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<Popup :="args">
+				<template #opener>
+					<Button>
+						Просто текст
+					</Button>
+				</template>
+
+				<template #header>
+					Текст в слоте #header
+				</template>
+
+				<template #widget>
+					<WidgetInput title="Поле в слоте #widget"/>
+				</template>
+
+				<template #content>
+					Текст в слоте #content
+				</template>
+
+				<template #footer>
+					<Button>
+						Закрыть
+					</Button>
+				</template>
+			</Popup>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {},
+}, OverviewComponent);
+
+export default meta;

package/src/components/popup/popup/popup.ts

@@ -0,0 +1,120 @@
+// @ts-ignore - Partial<OpenerProps> приводит к неверным типам полей в storybook
+export interface Props extends OpenerProps {
+	/**
+	 * Уникальный id компонента, используется только в setup, т.е. изменение id будет проигнорировано
+	 *
+	 * Генерируется автоматически при создании кнопки Popup
+	 *
+	 * Можно задать вручную, если необходимо создать Popup без кнопки для последюущего использования,
+	 * особенно важно при создании большого числа кнопок, например в списках и таблицах
+	 */
+	id?: string;
+
+	/**
+	 * Класс, который нужно добавить к Popup, устанавилвается в момент открытия
+	 */
+	class?: string;
+
+	/**
+	 * Длительность анимации в мс
+	 */
+	transitionDuration?: number;
+
+	/**
+	 * Ссылка на справку.
+	 *
+	 * Если указана, кнопка справки будет добавлена в футере popup
+	 */
+	footerSupportLink?: string;
+}
+
+export type PopupEvent = {
+	elPopup: HTMLElement,
+	elPopupOpener: HTMLElement,
+}
+
+export type Emits = {
+	/**
+	 * Будет вызвано при открытии Popup
+	 */
+	open: [popupEvent: PopupEvent];
+
+	/**
+	 * Будет вызвано после закрытия Popup перед его удалением
+	 */
+	close: [popupEvent: PopupEvent];
+
+	/**
+	 * Будет вызвано при скролле списка в Popup
+	 */
+	scrollContentList: [e: Event];
+}
+
+export interface OpenerProps {
+	/**
+	 * id компонента Popup, который необходимо открыть
+	 */
+	id: string;
+
+	/**
+	 * Положение Popup относительно кнопки, которая его открывает
+	 *
+	 * - 0 - по коориднатам кнопки
+	 * - 1 - top
+	 * - 2 - right
+	 * - 3 - botton
+	 * - 4 - left
+	 */
+	pos?: '0' | '1' | '2' | '3' | '4';
+
+	/**
+	 * Добавить клювик
+	 */
+	notch?: boolean;
+
+	/**
+	 * Открывать / закрывать при наведении / отведении мыши
+	 */
+	openByHover?: boolean;
+
+	/**
+	 * Способ привязки позиционирования меню
+	 *
+	 * left/right - левый/правый край родителя
+	 *
+	 * fixed - по документу
+	 */
+	posBy?: 'fixed' | 'left' | 'right';
+}
+
+export interface ListItemProps {
+	/**
+	 * Тип элемента списка
+	 * * button - обычный кликабельный (выбираемый) элемент, поддерижвает вставку ссылок через атрибут href
+	 * * regular - произвольное содержимое
+	 * * title - заголовок
+	 * * delimiter - разделитель
+	 */
+	type?: 'button' | 'regular' | 'title' | 'delimiter';
+
+	/**
+	 * Следует ли закрывать меню по клику на элемент типа button и link
+	 */
+	closeByClick?: boolean;
+}
+
+// для storybook
+export const pos = {
+	0: '0',
+	1: '1',
+	2: '2',
+	3: '3',
+	4: '4',
+} as const;
+
+// для storybook
+export const posBy = {
+	fixed: 'fixed',
+	left: 'left',
+	right: 'right',
+} as const;