@topvisor/ui 0.0.34 → 0.0.35

package/src/components/helpersStories.ts

@@ -0,0 +1,151 @@
+import type { StoryObj } from '@storybook/vue3';
+
+/**
+ * Генерация объекта ArgsTypes для Storybook
+ */
+export function genArgsTypes(component: any, ComponentsConsts: any[string], defaultSlotAsString: boolean = false) {
+	const argTypes = {} as any;
+
+	// slot по умолчанию в виде строки
+	if (defaultSlotAsString) {
+		argTypes.default = {
+			control: 'text',
+		};
+	}
+
+	const propsNames = Object.keys(component.props ?? []);
+	propsNames.forEach(name => {
+		// union типы, определенные через константы
+		const typeName = name[0].toLowerCase() + name.substring(1);
+		const typeNamePlural = name[0].toLowerCase() + name.substring(1) + 's';
+
+		const type = ComponentsConsts[typeName] || ComponentsConsts[typeNamePlural];
+		if (type) {
+			const size = Object.keys(type).length;
+			const controlType = (size > 3) ? 'select' : 'inline-radio';
+
+			argTypes[name] = {
+				control: controlType,
+				options: type,
+			};
+		}
+
+		// для cotrols необходимо указывать конкретный тип, выбрать первый
+		if (Array.isArray(component.props[name].type)) {
+			const type = component.props[name].type[0];
+			let control = '';
+
+			switch (type) {
+				case Boolean:
+					control = 'boolean';
+
+					break;
+
+				case String:
+					control = 'string';
+
+					break;
+			}
+
+			if (control) {
+				argTypes.modelValue = {
+					control,
+				};
+			}
+		}
+	});
+
+	return argTypes;
+}
+
+/**
+ * Сгенерировать историю обзора компонента
+ *
+ * Располагайте компонент OverviewComponent в папке stories, чтобы он не мешал основному компоненту
+ * @param options - парамтеры историии
+ * @param options.args - следует указавать только необходимые для демонстрации props, которых нет в шаблоне OverviewComponent
+ * @param OverviewComponent - компонент для вывода другого компонента в разных состояниях
+ * @returns возвращает историю обзора компонента
+ */
+export function genOverviewStory<Story>(options: Story & StoryObj, OverviewComponent: any): Story {
+	if (!options.args) {
+		options.args = {};
+	}
+
+	if (!options.parameters) {
+		options.parameters = {};
+	}
+	if (!options.parameters.controls) {
+		options.parameters.controls = {};
+	}
+	if (!options.parameters.controls.include) {
+		options.parameters.controls.include = Object.keys(options.args);
+	}
+
+	if (!options.render) {
+		options.render = (args) => ({
+			components: { OverviewComponent },
+			setup() {
+				return { args };
+			},
+			template: '<OverviewComponent :="args"/>',
+		});
+	}
+
+	return options satisfies StoryObj;
+}
+
+/**
+ * Получить объект с css переменными из css стилей
+ * @param css - стили css
+ * @return - словарь с css переменными
+ */
+export function parseCSSVariables(css: string): Map<string, string> {
+	const matches = css.matchAll(/--([^:]+):([^;]+)/g);
+
+	const cssVariables = new Map();
+
+	for (const match of matches) {
+		const name = match[1].trim();
+		const value = match[2].trim();
+
+		cssVariables.set(name, value);
+	}
+
+	return cssVariables;
+}
+
+/**
+ * Сгенерировать словарь css переменных с двойной вложенностью, определяемую разделителем '-' в имени переменной
+ * @param cssVariables - словарь css переменных
+ * @param searchStrings - вернуть только подходящие по имени переменные, по условию AND
+ * @return - словарь с группами css переменных
+ */
+export function genCSSVariablesGroups(
+	cssVariables: Map<string, string>,
+	searchStrings: string[] = [],
+): Map<string, Map<string, Map<string, string>>> {
+	const cssVariablesGroups2 = new Map();
+
+	cssVariables.forEach((value, name) => {
+		const parts = name.split('-');
+		const groupName = parts[0] ?? '';
+		const subgroupName = parts[1] ?? '';
+
+		for (const searchString of searchStrings) {
+			if (searchString && name.indexOf(searchString) === -1) {
+				return;
+			}
+		}
+
+		const group: Map<string, Map<string, string>> = cssVariablesGroups2.get(groupName) || new Map();
+		const subgroup: Map<string, string> = group.get(subgroupName) || new Map();
+
+		subgroup.set(name, value);
+		group.set(subgroupName, subgroup);
+
+		cssVariablesGroups2.set(groupName, group);
+	});
+
+	return cssVariablesGroups2;
+}

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

@@ -0,0 +1,205 @@
+import Worker from '@/components/popup/lib/worker';
+import DOM from '@/core/utils/dom';
+
+/**
+ * Глобальные события, для реализации Popup
+ * Автоматически инициируется при первой загрузке, не является выгружаемым модулем
+ *
+ * Если в меню встречает класс .preloader, то событие нажатия на кнопку через enter будет остановлено
+ */
+class GlobalEvents {
+	static init () {
+		document.addEventListener('click', this.onclick);
+		document.addEventListener('keydown', this.onkeydown);
+	}
+
+	/**
+	 * Глобальный обработчик кликов
+	 * обрабатывает клики внутри Popup
+	 * @param {Event} e
+	 */
+	static onclick (e) {
+		// элементы меню, клик по которым должен его закрыть
+		const elCloser = e.target.closest('.closer, a, .a, .top-button');
+		if (elCloser) {
+			// меню
+			const elPopup = e.target.closest('.top-popup-wrapper');
+
+			// клик вне меню
+			if (!elPopup) {
+				return;
+			}
+
+			// элемент имеет модификатор, запрещаюущий закрытие меню по клику на него
+			if (elCloser.matches('.top-popup-noCloser')) {
+				return;
+			}
+
+			// deprecated, ссылки с href="." запрещены, они должны быть заменены на .top-popup_item
+			if (elCloser.getAttribute('href') === '.') {
+				e.preventDefault();
+			}
+
+			// клик по кнопке открытия другого меню
+			if (e.target.matches('[data-top-popup]')) {
+				// список меню, в котором был сделан клик
+				const elUl = e.target.closest('ul');
+
+				// элемент меню, по которому был сделан клик
+				const elItem = e.target.closest('a, .a');
+
+				// сделать элемент меню, по которому сделан клик активным
+				if (elUl) {
+					elUl.querySelector('a.top-active, .a.top-active')?.classList.remove('top-active');
+				}
+
+				if (elItem) {
+					elItem.classList.add('top-active');
+				}
+
+				return;
+			}
+
+			// закрыть меню
+			Worker.close(elPopup);
+		}
+
+		// клик по фону меню
+		if (e.target.matches('.top-popup-wrapper')) {
+			const elPopup = e.target;
+
+			Worker.close(elPopup);
+		}
+	}
+
+	/**
+	 * Глобальный обработчик нажатия кнопки на клавиатуре
+	 * @param {Event} e
+	 */
+	static onkeydown (e) {
+		const elPopup = e.target.closest('.top-popup-wrapper');
+
+		// нажатие не в меню
+		if (!elPopup) {
+			return;
+		}
+
+		const elUl = elPopup.querySelector('ul.top-popup_content');
+
+		switch (e.key) {
+			case 'Escape':
+				// PopupWorker.close(elPopup);
+
+				break;
+
+			case 'Enter':
+				// атоматическое нажатие кнопок при нажатии Enter
+				if (!elUl) {
+					if (DOM.querySelectorVisible(elPopup, '.preloader')) {
+						break;
+					}
+
+					const elBtn = elPopup.querySelector('.top-popup_footer .go, .top-popup_footer [data-action]');
+					if (elBtn) {
+						elBtn.click();
+					}
+
+					break;
+				}
+
+				// перейти по ссылке по нажатию на Enter
+				// данный функуционал игнорирует SPA
+				const elLink = DOM.querySelectorVisible(elPopup, 'li > a.top-active');
+				if (elLink) {
+					// фокус может находиться на другой ссылке
+					e.preventDefault();
+
+					location.href = elLink.getAttribute('href');
+				}
+
+				// кликнуть по элементу меню по нажатию на Enter
+				const elItem = elPopup.querySelector('li > .top-active');
+				if (elItem) {
+					elItem.click();
+				}
+
+				break;
+
+			// управление стрелками
+			case 'ArrowUp':
+			case 'ArrowRight':
+			case 'ArrowDown':
+			case 'ArrowLeft':
+				if (!elUl) {
+					break;
+				}
+
+				if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+					const elMoreVisible = DOM.querySelectorVisible(elPopup, 'ul.top-popup_content > li:not(.top-popup_listTitle):not(.top-popup_listDelimiter) > .top-active > .top-popup_listMore');
+					if (elMoreVisible) {
+						e.preventDefault();
+					}
+				} else {
+					e.preventDefault();
+				}
+
+				const elItemActive = elPopup.querySelector('ul.top-popup_content > li:not(.top-popup_listTitle):not(.top-popup_listDelimiter) > .top-active')?.parentElement;
+
+				// есть подменю
+				if (e.key === 'ArrowRight' && elItemActive) {
+					// const elItemMoreActive = elItemActive.querySelector('[data-top-popup].top-active');
+					// if (elItemMoreActive) {
+					// 	return elItemMoreActive.click();
+					// }
+
+					const elMore = elItemActive.querySelector('.top-active > .top-popup_listMore');
+					if (elMore) {
+						return elMore.click();
+					}
+				}
+
+				const elsLiVisible = DOM.querySelectorAllVisible(elPopup, 'ul.top-popup_content > li:not(.top-popup_listTitle):not(.top-popup_listDelimiter)');
+				const countLi = elsLiVisible.length;
+
+				let index = elsLiVisible.indexOf(elItemActive);
+
+				if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+					index--;
+				} else {
+					index++;
+				}
+
+				// это первый элемен, "Назад" должен закрывать окно
+				if (e.key === 'ArrowLeft' && index === -1) {
+					if (e.target.matches('input')) {
+						return;
+					}
+
+					return Worker.close(elPopup);
+				}
+
+				// это последний элемен, "Вперед" не должен ни чего делать
+				if (e.key === 'ArrowRight' && index === countLi) {
+					return;
+				}
+
+				if (index < 0) {
+					index = countLi - 1;
+				}
+
+				if (index > countLi - 1) {
+					index = 0;
+				}
+
+				elPopup.querySelectorAll('ul.top-popup_content > li > .top-active').forEach(el => el.classList.remove('top-active'));
+				elsLiVisible[index].querySelector(':scope > a, :scope > .a').classList.add('top-active');
+
+				Worker.scrollToActive(elPopup);
+
+				break;
+		}
+	}
+
+}
+
+export default GlobalEvents;