@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,78 @@
+import Core from '@/core/core/core';
+import Events from '@/core/core/events';
+import Worker from '@/components/popup/lib/worker';
+
+/**
+ * Глобальные события, для реализации Popup
+ */
+class WorkerEvents {
+	static init () {
+		// автоматическое открытие при наведении мыши, событие глобальное, так как инициализация popup отложена
+		document.addEventListener('mouseover', (e) => {
+			if (!e.target.dataset?.topPopupOpenByHover) {
+				return;
+			}
+
+			e.target.click();
+		});
+
+		// при скролле страницы убирать закрыть Popup
+		document.addEventListener('scroll', () => {
+			if (Core.isMobile) {
+				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
+	 * @param {Event} e
+	 */
+	static async onclick (e) {
+		let elOpener;
+
+		switch (true) {
+			case !!e.target.dataset?.topPopup:
+				elOpener = e.target;
+
+				break;
+
+			case !!e.target.parentElement?.dataset.topPopup:
+				elOpener = e.target.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.js

@@ -0,0 +1,232 @@
+import Core from '@/core/core/core';
+import DOM from '@/core/utils/dom';
+import GlobalEvents from '@/components/popup/lib/worker.globalEvents';
+
+let decoratorBeforeOpen;
+let decoratorAfterOpen;
+let decoratorIsIgnoreOuterClick;
+let i18n = {
+	Close: 'Close',
+};
+
+class Worker {
+
+	// глобальное выключение закрытия меню, используется при различных оверлеях
+	static noClose = false;
+
+	static vueConnectors = new Map();
+
+	/**
+	 * Вызывается при инициализаци приложения
+	 * устанавливает глобальные статические декортаоры для компонента Popup
+	 * @param {{
+	 * 	decoratorBeforeOpen: (object) => void
+	 * 	decoratorAfterOpen: (object) => void,
+	 * 	decoratorIsIgnoreOuterClick: (e) => void,
+	 * 	i18n: {Close: string}
+	 * }} options
+	 */
+	static onInitApp (options) {
+		decoratorBeforeOpen = options?.decoratorBeforeOpen;
+		decoratorAfterOpen = options?.decoratorAfterOpen;
+		decoratorIsIgnoreOuterClick = options?.decoratorIsIgnoreOuterClick;
+		i18n = options?.i18n;
+	}
+
+	// вернуть объект компонента popup, привязанный к элементу
+	static getPopup (elPopup) {
+		return DOM.storage(elPopup, 'Popup');
+	}
+
+	static getAll () {
+		return DOM.querySelectorAllArray(document, '.top-popup-wrapper');
+	}
+
+	static getAllVisible () {
+		return DOM.querySelectorAllVisible(document, '.top-popup-wrapper');
+	}
+
+	/**
+	 * Открть Popup от указанного elOpener
+	 * @param {Element} elOpener - элемент, который должен вызвать открытие Popup
+	 */
+	static async openByOpener (elOpener) {
+		const options = {};
+
+		options.popup = elOpener.dataset.topPopup;
+
+		if (elOpener.dataset.topPopupP) {
+			options.p = parseInt(elOpener.dataset.topPopupP);
+		}
+
+		if (elOpener.dataset.topPopupNotch) {
+			options.notch = elOpener.dataset.topPopupNotch;
+		}
+
+		if (elOpener.dataset.topPopupClass) {
+			options.class = elOpener.dataset.topPopupClass;
+		}
+
+		if (elOpener.dataset.topPopupPosBy) {
+			options.posBy = elOpener.dataset.topPopupPosBy;
+		}
+
+		if (elOpener.dataset.topPopupFront) {
+			options.frontSelector = elOpener.dataset.topPopupFront;
+		}
+
+		if (elOpener.dataset.topPopupInvertX) {
+			options.invertX = elOpener.dataset.topPopupInvertX;
+		}
+
+		if (elOpener.dataset.topPopupOpenByHover) {
+			options.openByHover = elOpener.dataset.topPopupOpenByHover;
+		}
+
+		if (elOpener.dataset.topPopupUseOriginal) {
+			options.useOriginal = elOpener.dataset.topPopupUseOriginal;
+		}
+
+		return await Worker.open(elOpener, options);
+	}
+
+	/**
+	 * Создать и открыть Popup
+	 * @param {Element} elOpener - элемент, вызвавший открытие Popup
+	 * @param {object} options - опции Popup
+	 */
+	static async open (elOpener, options) {
+		elOpener.dataset.topPopupOpened = 'opened';
+
+		const { default: Popup } = await import('./popup');
+
+		if (typeof (jQuery) === 'function') {
+			const $elOpener = jQuery(elOpener);
+
+			// deprecated, используется aftershow.top-menu-popup
+			if ($elOpener.data('aftershow')) {
+				let afterShow = $elOpener.data('aftershow');
+				if (typeof (afterShow) == 'string') {
+					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') {
+					afterclose = eval(afterclose.replace(/\W/g, ''));
+				}
+
+				$elOpener.one('afterclose.top-menu-popup', afterclose);
+			}
+		}
+
+		options.isFullScreen = Core.state.isMobile;
+		options.i18n = i18n;
+
+		return await new Popup(elOpener, options);
+	}
+
+	static close (elPopup) {
+		const popup = Worker.getPopup(elPopup);
+		if (popup) {
+			popup.close();
+		}
+	}
+
+	static recalcPosition (elPopup) {
+		const popup = Worker.getPopup(elPopup);
+		if (popup) {
+			popup.recalcPosition();
+
+			// контроль за состоянием тени скролла
+			// вызывать после имзенения высоты скролла popup.elPopupBody
+			HelperCommon.genHasScroll($(popup.elPopupBody));
+		}
+	}
+
+	// скролл к активному элементу списка
+	static scrollToActive (elPopup) {
+		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;
+			}
+
+			top += elLi.offsetHeight;
+		}
+
+		const heightWrapper = elUl.offsetHeight;
+		if (top > heightWrapper) {
+			elUl.scrollTop = top - heightWrapper;
+		} else {
+			elUl.scrollTop = 0;
+		}
+	}
+
+	static decoratorBeforeOpen (popup) {
+		if (decoratorBeforeOpen) {
+			decoratorBeforeOpen(popup);
+		}
+	};
+
+	static decoratorAfterOpen (popup) {
+		if (decoratorAfterOpen) {
+			decoratorAfterOpen(popup);
+		}
+	};
+
+	/**
+	 * Определитель того, что клик вне Popup нужно игнорировать
+	 * @returns {boolean} - игнорировать клик, то есть не закрывать Popup
+	 */
+	static decoratorIsIgnoreOuterClick (e) {
+		if (decoratorIsIgnoreOuterClick) {
+			return decoratorIsIgnoreOuterClick(e);
+		}
+
+		return false;
+	}
+
+	/**
+	 * Зарегистрировать Vue компонент
+	 *
+	 * Каждый экземляр Popup регистрируется в словаре vueConnectors для последующего доступа из js
+	 * @param {string} id
+	 * @param {any} vueConnector
+	 */
+	static regVueComponent (id, vueConnector) {
+		if (Worker.vueConnectors.get(id)) {
+			throw 'Vue component Popup use duplicated id: ' + id;
+		}
+
+		Worker.vueConnectors.set(id, vueConnector);
+	}
+
+	/**
+	 * Снять с регистрации Vue компонент
+	 * @param {string} id
+	 */
+	static unregVueComponent (id) {
+		Worker.vueConnectors.delete(id);
+	}
+
+}
+
+GlobalEvents.init(Worker, Core);
+
+export default Worker;

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ListItemProps } from './popup';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<ListItemProps>(), {
+	type: 'simple',
+	closeByClick: true,
+});
+</script>
+
+<template>
+	<li :class="{
+		'top-popup_listDelimiter': type === 'delimiter',
+		'top-popup_listTitle': type === 'title'
+	}">
+		<!--Выбираемый элемент -->
+		<component
+			v-if="props.type === 'simple' || props.type === 'link'"
+			:is="props.type === 'link' ? 'a' : 'i'"
+			:class="{
+				'top-popup_item': true,
+				'top-popup_item-a': props.type === 'simple', // имитация оформления ссылки
+				'a': true, // deprecated
+				'top-popup-noCloser': !closeByClick
+			}"
+			:=$attrs
+		>
+			<slot></slot>
+		</component>
+
+		<!--Заголовок или элемент формы -->
+		<template
+			v-if="props.type === 'title' || props.type === 'control'"
+			class="top-popup_listTitle"
+		>
+			<slot></slot>
+		</template>
+	</li>
+</template>

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { onUpdated, ref } 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) {
+	elOpener.dataset.topPopup = 'vue-' + id;
+	elOpener.dataset.topPopupId = id;
+	elOpener.dataset.topPopupP = 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>
+
+<style>
+h3[data-top-popup],
+div[data-top-popup],
+i[data-top-popup]:not(.btn):not(.g_btn),
+b[data-top-popup]:not(.btn):not(.g_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,68 @@
+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 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,
+			Button,
+		},
+		setup () {
+			return { args };
+		},
+		template: `
+			<Popup :="args">
+				<template #opener>
+					<Button>
+						Просто текст
+					</Button>
+				</template>
+
+				<template #header>
+					Текст в слоте #header
+				</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,93 @@
+export interface Props extends OpenerProps {
+	/**
+	 * Уникальный id компонента, используется только в setup, т.е. изменение id будет проигнорировано
+	 *
+	 * Генерируется автоматически при создании кнопки Popup
+	 *
+	 * Можно задать вручную, если необходимо создать Popup без кнопки для последюущего использования,
+	 * особенно важно при создании большого числа кнопок, например в списках и таблицах
+	 */
+	id?: string;
+
+	/**
+	 * Класс, который нужно добавить к Popup, устанавилвается в момент открытия
+	 */
+	class?: string;
+}
+
+export interface Emits {
+	/**
+	 * Будет вызвано при открытии Popup
+	 */
+	(e: 'open'): void;
+
+	/**
+	 * Будет вызвано после закрытия Popup
+	 */
+	(e: 'close'): void;
+}
+
+export interface OpenerProps {
+	/**
+	 * id компонента Popup, который необходимо открыть
+	 */
+	id?: string;
+
+	/**
+	 * Положение Popup по часовой стрелке
+	 */
+	pos?: Pos;
+
+	/**
+	 * Добавить клювик
+	 */
+	notch?: boolean;
+
+	/**
+	 * Открывать / закрывать при наведении / отведении мыши
+	 */
+	openByHover?: boolean;
+
+	/**
+	 * Способ привязки позиционирования меню
+	 *
+	 * left/right - левый/правый край родителя
+	 *
+	 * fixed - по окну
+	 */
+	posBy?: PosBy;
+}
+
+export interface ListItemProps {
+	/**
+	 * Тип элемента списка
+	 * * simple - обычный кликабельный (выбираемый) элемент
+	 * * link - ссылка
+	 * * control - элемент формы, например чекбокс
+	 * * delimiter - разделитель
+	 */
+	type?: 'simple' | 'link' | 'control' | 'title' | 'delimiter';
+
+	/**
+	 * Следует ли закрывать меню по клику на элемент типа simple и link
+	 */
+	closeByClick?: boolean;
+}
+
+export const pos = {
+	over: '0',
+	top: '1',
+	right: '2',
+	bottom: '3',
+	left: '4',
+} as const;
+
+export type Pos = typeof pos[keyof typeof pos];
+
+export const posBy = {
+	fixed: 'fixed',
+	left: 'left',
+	right: 'right',
+} as const;
+
+export type PosBy = typeof posBy[keyof typeof posBy];

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref, toRef, onUnmounted } from 'vue';
+import type { Props, Emits } from './popup';
+import Opener from './opener.vue';
+import Worker from '@/components/popup/lib/worker';
+
+const props = withDefaults(defineProps<Props>(), {
+	id: '',
+	pos: '3',
+	notch: true,
+	posBy: 'fixed',
+});
+
+const emit = defineEmits<Emits>();
+
+const id = props.id || Math.random() + '';
+const elPopupRef = ref(null);
+
+// см. lib/popup
+const onOpen = async (popup: any) => {
+	popup.elPopupInner.innerText = '';
+
+	elPopupRef.value = popup.elPopupInner;
+
+	vueConnector.opened = true;
+	vueConnector.popup = popup;
+
+	emit('open');
+};
+
+// см. lib/popup
+const onClose = (popup: any) => {
+	elPopupRef.value = null;
+
+	vueConnector.opened = false;
+	vueConnector.popup = null;
+
+	emit('close');
+};
+
+const vueConnector = {
+	onOpen,
+	onClose,
+	classRef: toRef(props, 'class'),
+	opened: false,
+	popup: null,
+};
+
+Worker.regVueComponent(id, vueConnector);
+
+onUnmounted(() => {
+	Worker.unregVueComponent(id);
+});
+</script>
+
+<template>
+	<Opener
+		v-if="$slots.opener"
+		:id="id"
+		:pos="pos"
+		:posBy="posBy"
+		:notch="notch"
+		:openByHover="openByHover"
+	>
+		<!-- @slot элемент для открытия Popup -->
+		<slot name="opener"></slot>
+	</Opener>
+
+	<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->
+	<!-- elPopupRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->
+	<teleport
+		v-if="elPopupRef"
+		:to="elPopupRef"
+	>
+		<div v-if="$slots.header" class="top-popup_header">
+			<!-- @slot Шапка -->
+			<slot name="header"></slot>
+		</div>
+
+		<div v-if="$slots.content" class="top-popup_content">
+			<!-- @slot Контент в свободной форме -->
+			<slot name="content"></slot>
+		</div>
+
+		<ul v-if="$slots.contentList" class="top-popup_content">
+			<!-- @slot Контент в виде списка, для вставки элементов списка испоьзуйте компонент popup/listItem -->
+			<slot name="contentList"></slot>
+		</ul>
+
+		<div v-if="$slots.footer" class="top-popup_footer">
+			<!-- @slot Футер -->
+			<slot name="footer"></slot>
+		</div>
+	</teleport>
+</template>