@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

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

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

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

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

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

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

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

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