@topvisor/ui 1.1.0 → 1.2.0

package/src/components/layout/rows/types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+	/**
+	 * Настройка отступа между элементами списка
+	 */
+	gap?: 'none' | 'xs' | 's' | 'm' | 'l',
+}

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import OverviewComponent from './stories/overview.vue';
+
+import Component from './alert.vue';
+import * as ComponentsConst from './alert';
+
+import TopButton from '@/components/forms/button/button.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+/**
+ * Выводит popup с текстом и кнопкой подтверждения.
+ *
+ * Расширяет функционал TopPopup и поддерживает все его настройки.
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		opener: 'Alert',
+		header: 'Сообщение',
+		default: 'Всем привет!',
+	},
+	render: (args) => ({
+		components: {
+			TopPopupAlert: Component,
+			TopButton,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TopPopupAlert
+				:submit-text="args.submitText"
+				@close="() => console.log('Окно закрыто')"
+			>
+				<template #opener>
+					<TopButton>
+						{{ args.opener }}
+					</TopButton>
+				</template>
+
+				<template #header v-if="args.header">
+					{{ args.header }}
+				</template>
+
+				<template #default v-if="args.default">
+					{{ args.default }}
+				</template>
+
+				<template #footer v-if="args.footer">
+					{{ args.footer }}
+				</template>
+			</TopPopupAlert>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,11 @@
+import type { Emits as PopupEmits, Props as PopupProps } from '../popup/popup';
+
+// storybook не работает с объединением типов
+export interface Props extends PopupProps {
+	/**
+	 * Текст кнопки
+	 */
+	submitText?: string;
+}
+
+export type Emits = {} & PopupEmits;

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Emits, Props } from './alert';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopup from '@/components/popup/popup/popup.vue';
+
+const props = defineProps<Props>();
+
+defineEmits<Emits>();
+
+const $propsPopup = { ...props, submitText: undefined };
+delete $propsPopup.submitText;
+</script>
+
+<template>
+	<TopPopup
+		class="top-popupAlert"
+		:=$propsPopup
+		@open="$emit('open', $event)"
+		@close="$emit('close', $event)"
+		@scrollContentList="(...args) => $emit('scrollContentList', ...args)"
+	>
+		<template #opener>
+			<!-- @slot Элемент для открытия Popup -->
+			<slot name="opener"></slot>
+		</template>
+
+		<template #header v-if="$slots.header">
+			<!-- @slot Шапка -->
+			<slot name="header"></slot>
+		</template>
+
+		<template #content v-if="$slots.default">
+			<!-- @slot Контент в свободной форме -->
+			<slot></slot>
+		</template>
+
+		<template #footer>
+			<!-- @slot Футер -->
+			<slot name="footer"></slot>
+
+			<TopButton>
+				{{ submitText || $i18n.Common.Close }}
+			</TopButton>
+		</template>
+	</TopPopup>
+</template>

package/src/components/popup/alert/stories/overview.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import TopPopupAlert from '@/components/popup/alert/alert.vue';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopupOpener from '@/components/popup/popup/opener.vue';
+</script>
+
+<template>
+	<h2>Простой TopPopupAlert</h2>
+
+	<TopPopupAlert
+		id="popupAlert"
+		footer-support-link="https://dictionary.cambridge.org/dictionary/english/as-cool-as-a-cucumber"
+	>
+		<template #opener>
+			<TopButton>
+				Alert
+			</TopButton>
+		</template>
+
+		<template #default>
+			<q>As cool as a cucumber 🥒🧊</q>
+		</template>
+	</TopPopupAlert>
+
+	<h2>Открытие TopPopupAlert из другого компонента</h2>
+
+	<TopPopupOpener id="popupAlert" pos="1">
+		<TopButton>
+			Кнопка 1
+		</TopButton>
+	</TopPopupOpener>
+
+	&nbsp;
+
+	<TopPopupOpener id="popupAlert" pos="1">
+		<TopButton>
+			Кнопка 2
+		</TopButton>
+	</TopPopupOpener>
+</template>

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import OverviewComponent from './stories/overview.vue';
+
+import Component from './confirm.vue';
+import * as ComponentsConst from './confirm';
+
+import TopButton from '@/components/forms/button/button.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+/**
+ * Выводит popup с текстом и кнопками подтверждения и отмены.
+ *
+ * При нажатии на кнопку подтверждения, отправиться emit **sumbit**.
+ *
+ * Расширяет функционал TopPopup и поддерживает все его настройки.
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		opener: 'Confirm',
+		header: 'Подтверждение действия',
+		default: 'Вы уверены, что хотите продолджить?',
+	},
+	render: (args) => ({
+		components: {
+			TopPopupСonfirm: Component,
+			TopButton,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TopPopupСonfirm
+				:submit-text="args.submitText"
+				:cancel-text="args.cancelText"
+				@close="console.log('Окно закрыто')"
+				@submit="console.log('Подтверждено')"
+			>
+				<template #opener>
+					<TopButton>
+						{{ args.opener }}
+					</TopButton>
+				</template>
+
+				<template #header v-if="args.header">
+					{{ args.header }}
+				</template>
+
+				<template #default v-if="args.default">
+					{{ args.default }}
+				</template>
+
+				<template #footer v-if="args.footer">
+					{{ args.footer }}
+				</template>
+			</TopPopupСonfirm>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,26 @@
+import type { Emits as PopupEmits, Props as PopupProps } from '../popup/popup';
+
+// storybook не работает с объединением типов
+export interface Props extends PopupProps {
+	/**
+	 * Текст кнопки отмены
+	 */
+	cancelText?: string;
+
+	/**
+	 * Текст кнопки подтверждения
+	 */
+	submitText?: string;
+
+	/**
+	 * Если true, кнопка подтверждения будет красной
+	 */
+	isWarning?: boolean;
+}
+
+export type Emits = PopupEmits & {
+	/**
+	 * Будет вызвано при нажатии кнопок или закрытии окна
+	 */
+	submit: [];
+};

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { PopupEvent } from '@/components/popup/popup/popup';
+import type { Emits, Props } from './confirm';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopup from '@/components/popup/popup/popup.vue';
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const isSubmit = ref(false);
+
+const onSubmit = () => {
+	isSubmit.value = true;
+
+	emit('submit');
+};
+
+const onClose = (popupEvent: PopupEvent) => {
+	if (isSubmit.value) {
+		isSubmit.value = false;
+
+		return;
+	}
+
+	emit('close', popupEvent);
+};
+
+const $propsPopup = { ...props, submitText: undefined, cancelText: undefined, isWarning: undefined };
+delete $propsPopup.submitText;
+delete $propsPopup.cancelText;
+delete $propsPopup.isWarning;
+</script>
+
+<template>
+	<TopPopup
+		class="top-popupConfirm"
+		:=$propsPopup
+		@open="$emit('open', $event)"
+		@close="onClose($event)"
+		@scrollContentList="(...args) => $emit('scrollContentList', ...args)"
+	>
+		<template #opener>
+			<!-- @slot Элемент для открытия TopPopup -->
+			<slot name="opener"></slot>
+		</template>
+
+		<template #header v-if="$slots.header">
+			<!-- @slot Шапка -->
+			<slot name="header"></slot>
+		</template>
+
+		<template #content v-if="$slots.default">
+			<!-- @slot Контент в свободной форме -->
+			<slot></slot>
+		</template>
+
+		<template #footer>
+			<!-- @slot Футер -->
+			<slot name="footer"></slot>
+
+			<TopButton color="theme">
+				{{ cancelText || $i18n.Common.Cancel }}
+			</TopButton>
+
+			<TopButton
+				@click="onSubmit"
+				:color="isWarning ? 'red' : 'blue'"
+			>
+				{{ submitText || $i18n.Common.Continue }}
+			</TopButton>
+		</template>
+	</TopPopup>
+</template>

package/src/components/popup/confirm/stories/overview.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import TopPopupСonfirm from '@/components/popup/confirm/confirm.vue';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopupOpener from '@/components/popup/popup/opener.vue';
+
+const alert = (...args) => window.alert(...args);
+</script>
+
+<template>
+	<h2>Простой TopPopupСonfirm</h2>
+
+	<TopPopupСonfirm
+		id="popupСonfirm"
+		footer-support-link="https://topvisor.com/ru/support/bank/balance/"
+	>
+		<template #opener>
+			<TopButton>
+				Confirm
+			</TopButton>
+		</template>
+
+		<template #default>
+			<div>Вы уверены что хотите продолжить?</div>
+		</template>
+	</TopPopupСonfirm>
+
+	&nbsp;
+
+	<TopPopupСonfirm
+		id="popupСonfirmWarning"
+		:is-warning="true"
+		cancel-text="Отмена"
+		submit-text="Удалить"
+		@submit="() => alert('Элемент удален')"
+	>
+		<template #opener>
+			<TopButton color="theme" icon=""/>
+		</template>
+
+		<template #header>
+			Удаление элемента
+		</template>
+
+		<template #default>
+			<div>После удаления элемент нельзя будет восстановить, вы уверены?</div>
+		</template>
+	</TopPopupСonfirm>
+
+	<h2>Открытие TopPopupСonfirm из другого компонента</h2>
+
+	<TopPopupOpener id="popupСonfirm" pos="1">
+		<TopButton>
+			Запустить
+		</TopButton>
+	</TopPopupOpener>
+
+	&nbsp;
+
+	<TopPopupOpener id="popupСonfirmWarning" pos="1">
+		<TopButton color="theme" icon=""/>
+	</TopPopupOpener>
+</template>

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

@@ -0,0 +1,239 @@
+import Worker from '@/components/popup/lib/worker';
+import DOM from '@/core/utils/dom';
+
+/**
+ * Глобальные события, для реализации Popup
+ * Автоматически инициируется при первой загрузке, не является выгружаемым модулем
+ *
+ * Если в меню встречает класс .preloader, то событие нажатия на кнопку через enter будет остановлено
+ */
+class GlobalEvents {
+
+	private static isInited = false;
+
+	/**
+	 * Добавить глобальные обработчики
+	 *
+	 * Добавляются на страницу один раз и навсегда
+	 */
+	static init(): void {
+		if (this.isInited) return;
+
+		this.isInited = true;
+
+		document.addEventListener('click', this.onclick);
+		document.addEventListener('keydown', this.onkeydown);
+	}
+
+	/**
+	 * Глобальный обработчик кликов
+	 *
+	 * Обрабатывает клики внутри Popup
+	 */
+	private static onclick(e: Event): void {
+		if (!(e.target instanceof HTMLElement)) return;
+
+		// элементы меню, клик по которым должен его закрыть
+		const elCloser = e.target.closest<HTMLElement>('.closer, a, .a, .top-button');
+		if (elCloser) {
+			// меню
+			const elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');
+
+			// клик вне меню
+			if (!elPopup) {
+				return;
+			}
+
+			// элемент имеет модификатор, запрещаюущий закрытие меню по клику на него
+			if (elCloser.matches('.top-popup-noCloser')) {
+				return;
+			}
+
+			// deprecated, ссылки с href="." запрещены, они должны быть заменены на .top-popup_listItem-button
+			if (elCloser.getAttribute('href') === '.') {
+				e.preventDefault();
+			}
+
+			// клик по кнопке открытия другого меню
+			if (e.target.matches('[data-top-popup]')) {
+				// список меню, в котором был сделан клик
+				const elUl = e.target.closest<HTMLElement>('ul');
+
+				// элемент меню, по которому был сделан клик
+				const elItem = e.target.closest<HTMLElement>('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);
+		}
+	}
+
+	/**
+	 * Глобальный обработчик нажатия кнопки на клавиатуре
+	 */
+	private static onkeydown(e: KeyboardEvent): void {
+		if (!(e.target instanceof HTMLElement)) return;
+
+		const elPopup = e.target.closest<HTMLElement>('.top-popup-wrapper');
+
+		// нажатие не в меню
+		if (!elPopup) {
+			return;
+		}
+
+		const elUl = elPopup.querySelector<HTMLElement>('ul.top-popup_content');
+
+		switch (e.key) {
+			case 'Escape':
+				Worker.close(elPopup);
+
+				break;
+
+			case 'Enter':
+				// атоматическое нажатие кнопок при нажатии Enter
+				if (!elUl) {
+					if (DOM.querySelectorVisible(elPopup, '.preloader')) {
+						break;
+					}
+
+					// deprecated, старый код на сайте
+					const elBtn = DOM.querySelectorVisible(elPopup, '.top-popup_footer .go, .top-popup_footer [data-action]');
+					if (elBtn instanceof HTMLElement) {
+						elBtn.click();
+
+						break;
+					}
+
+					// Запуск клика последней кнопки, расположенной в footer'е Popup'а, нажатием клавиши Enter
+					const elFooterLastBtn = DOM.querySelectorVisibleLast(elPopup, '.top-popup_footer .top-button');
+					if (elFooterLastBtn instanceof HTMLElement) {
+						elFooterLastBtn.click();
+					}
+
+					break;
+				}
+
+				// перейти по ссылке по нажатию на Enter
+				// данный функуционал игнорирует SPA
+				const elLink = DOM.querySelectorVisible(elPopup, 'li > a.top-active');
+				if (elLink && elLink.getAttribute('href')) {
+					// фокус может находиться на другой ссылке
+					e.preventDefault();
+
+					location.href = elLink.getAttribute('href')!;
+				}
+
+				// кликнуть по элементу меню по нажатию на Enter
+				const elItem = elPopup.querySelector<HTMLElement>('li > .top-active');
+				if (elItem instanceof HTMLElement) {
+					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_liNoSelectable) > .top-active > .top-popup_listMore',
+					);
+					if (elMoreVisible) {
+						e.preventDefault();
+					}
+				} else {
+					e.preventDefault();
+				}
+
+				const elItemActive = elPopup.querySelector<HTMLElement>('ul.top-popup_content > li:not(.top-popup_liNoSelectable) > .top-active')?.parentElement;
+
+				// есть подменю
+				if (e.key === 'ArrowRight' && elItemActive) {
+					// const elItemMoreActive = elItemActive.querySelector<HTMLElement>('[data-top-popup].top-active');
+					// if (elItemMoreActive) {
+					// 	return elItemMoreActive.click();
+					// }
+
+					const elMore = elItemActive.querySelector<HTMLElement>('.top-active > .top-popup_listMore');
+					if (elMore instanceof HTMLElement) {
+						return elMore.click();
+					}
+				}
+
+				const elsLiVisible = DOM.querySelectorAllVisible(elPopup, 'ul.top-popup_content > li:not(.top-popup_liNoSelectable)');
+				const countLi = elsLiVisible.length;
+
+				if (!countLi) {
+					return;
+				}
+
+				let index = -1;
+				if (elItemActive) {
+					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;