@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

@@ -1,286 +0,0 @@
-/**
- * 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

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

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

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

@@ -1,120 +0,0 @@
-// @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;