@topvisor/ui 1.0.42-dev.2 → 1.0.42-dev.4

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

@@ -1,176 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any> | undefined = undefined">
-import { onUnmounted, ref, toRef, watch } from 'vue';
-import TopHint from '@/components/forms/hint/hint.vue';
-import type { TopLibPopup } from '@/components/popup/lib/popup';
-import type { Emits, Props } from './types';
-import Opener from './opener.vue';
-import Worker from '@/components/popup/lib/worker';
-
-const props = withDefaults(defineProps<Props<T>>(), {
-	id: '',
-	pos: '3',
-	notch: true,
-	posBy: 'fixed',
-});
-
-const emit = defineEmits<Emits<T>>();
-
-const id = props.id || 'top-popup-id-' + Math.random() + '';
-
-const expose = {
-	id,
-	popup: undefined as TopLibPopup<T> | undefined,
-};
-
-defineExpose(expose);
-
-const elPopupRef = ref<HTMLElement | null>(null);
-const elPopupInnerRef = ref<HTMLElement | null>(null);
-
-const data = ref<T>();
-
-// см. lib/popup
-const onOpen = async (popup: TopLibPopup<T>) => {
-	if (popup.elPopup) elPopupRef.value = popup.elPopup;
-
-	if (popup.elPopupInner) {
-		popup.elPopupInner.innerText = '';
-
-		elPopupInnerRef.value = popup.elPopupInner;
-	}
-
-	vueConnector.opened = true;
-	vueConnector.popup = popup;
-
-	expose.popup = popup;
-
-	data.value = popup.el.__TopPopupOpenerProps.data;
-
-	emit('open', { elPopup: popup.elPopup!, elPopupOpener: popup.el, data: data.value });
-};
-
-// см. lib/popup
-const onClose = (popup: TopLibPopup<T>) => {
-	elPopupInnerRef.value = null;
-
-	vueConnector.opened = false;
-	vueConnector.popup = undefined;
-
-	data.value = undefined;
-
-	emit('close', { elPopup: popup.elPopup!, elPopupOpener: popup.el, data: popup.el.__TopPopupOpenerProps.data });
-};
-
-const vueConnector = {
-	onOpen,
-	onClose,
-	classRef: toRef(props, 'class'),
-	opened: false,
-	popup: undefined as TopLibPopup<T> | undefined,
-	transitionDurationRef: toRef(props, 'transitionDuration'),
-};
-
-watch(() => props.class, (newValue, oldValue) => {
-	if (!elPopupRef.value) return;
-
-	const newClasses = newValue?.split(' ') ?? [];
-	const oldClasses = oldValue?.split(' ') ?? [];
-
-	const delClasses = oldClasses.filter((oldClass) => !newClasses.includes(oldClass));
-
-	elPopupRef.value.classList.remove(...delClasses);
-	elPopupRef.value.classList.add(...newClasses);
-});
-
-Worker.regVueComponent(id, vueConnector);
-
-onUnmounted(() => {
-	Worker.unregVueComponent(id);
-});
-</script>
-
-<template>
-	<Opener
-		v-if="$slots.opener"
-		:id="id"
-		:pos="pos"
-		:posBy="posBy"
-		:notch="notch"
-		:openByHover="($core.state.isMobile || $core.state.isMobileUA) ? false : openByHover"
-	>
-		<!-- @slot элемент для открытия Popup -->
-		<slot name="opener"></slot>
-	</Opener>
-
-	<!-- Это шаблон для компонента Popup, сам Popup генерируется в js и может находиться где угодно -->
-	<!-- elPopupInnerRef будет установлен только после открытия и будет сброшен сразу после закрытия Popup -->
-	<teleport
-		v-if="elPopupInnerRef"
-		:to="elPopupInnerRef"
-	>
-		<div
-			v-if="$slots.header || $core.state.isMobile"
-			class="top-popup_header"
-		>
-			<span
-				v-if="$core.state.isMobile"
-				class="top-as-a closer"
-			>
-				{{ $i18n.Common.Close }}
-			</span>
-
-			<!-- @slot Шапка -->
-			<slot name="header" :data="data"></slot>
-		</div>
-
-		<div
-			v-if="$slots.widget"
-			class="top-popup_widget"
-		>
-			<!-- @slot Виджет -->
-			<slot name="widget"></slot>
-		</div>
-
-		<div
-			v-if="$slots.content"
-			class="top-popup_content"
-			v-top-scroll-shadow
-		>
-			<!-- @slot Контент в свободной форме -->
-			<slot name="content" :data="data"></slot>
-		</div>
-
-		<ul
-			v-if="$slots.contentList"
-			class="top-popup_content"
-			@scroll="$emit('scrollContentList', $event)"
-			v-top-scroll-shadow
-		>
-			<!-- @slot Контент в виде списка, для вставки элементов списка используйте компонент popup/listItem -->
-			<slot name="contentList" :data="data"></slot>
-		</ul>
-
-		<div
-			v-if="$slots.footer || footerSupportLink"
-			class="top-popup_footer"
-		>
-			<a
-				v-if="footerSupportLink"
-				class="top-popup_footerSupportLink"
-				:href="footerSupportLink"
-				target="_blank"
-			>
-				<TopHint hint=""/>
-			</a>
-
-			<!-- @slot Футер -->
-			<slot name="footer" :data="data"></slot>
-		</div>
-	</teleport>
-</template>
-
-<style>
-.top-popup_footerSupportLink {
-	margin-right: auto;
-}
-</style>

package/src/components/popup/popup/stories/README.md

@@ -1,145 +0,0 @@
-## Почему Popup, а не DropDown и не ContextMenu?
-
-**TopPopup** реализует отображение окошка, с привязкой к кнопке, но это не обязательно меню.
-
-В мобильной версии отображается в виде popup, всплывающего снизу экрана.
-
-## Стандартная функциональность
-
-Элемент **opener** перехватывает клики на элементы в глубину до 2. Если внутри **opener** вставляется кнопка, которая не должна открывать
-popup, необходимо в ее событии предусмотреть **e.stopPropagation()**;
-
-- настраиваемая **шапка**
-- шаблон с **произвольным содержимым**
-- шаблон со **списком**, который поддерживает вставку **ListItem** и элементы форм, например чекбоксы и радио
-- для списков реализуется **навигация** через клавиатуру
-- событие **@open** для отлавливания открытия popup
-- событие **@close** для отлавливания закрытия popup
-- настраиваемый **футер**
-
-## Уникальные фичи компонента
-
-- режим мобильной версии, активируется автоматически по условию **Core.state.isMobile()**
-- поддерживаются **вложенные** popup, поддерживает 4 уровня вложенности
-- позволяет открывать **TopPopup** из любых мест, используя **всего один шаблон**, сохраняя при этом реактивность
-- есть возможность генерировать кнопку открытия **TopPopup** из js без Vue
-- режим **openByHover** для имитации подсказок
-- всегда добавляется на страницу в **ленивом** режиме, popup рендерится только при открытии
-- при нажатии **Enter** выполняет **@click** на крайней правой кнопке в слоте **footer**, правая кнопка всегда считается подтверждением по UX
-
-## Обычный вариант использования
-
-Вставьте компонент **TopPopup** с указанием слота **opener** и слотом **content** или **contentList**.
-
-## Оптимизация путем переиспользования шаблона
-
-Вставьте компонент **TopPopup** с необходимыми слотами **без** слота **opener**, укажите props **id**.
-
-Вставьте кнопки для открытия **TopPopup** с помощью компонента **Opener**, укажите ему тот же props **id**.
-
-**TopPopup** с одним и тем же **id** может быть открыт одновременно только один раз.
-
-## Открытие TopPopup из js без Vue
-
-Порядок вызова TopPopup в js шаблонах без Vue:
-
-- вставьте компонент **TopPopup** на страницу во Vue с указанием **id**
-- сгенерируйте кнопку для открытия **TopPopup** через **genElPopupOpener()**
-- вставьте кнопку в нужное место на странице
-
-```js
-import { TopPopupWorker } from '@topvisor/ui/popup/worker.js';
-
-// сгенерировать элемент для открытия TopPopup
-const el = TopPopupWorker.genElPopupOpener('span', { id: 'top-popup-example', posBy: 'right' }, 'Открыть TopPopup');
-```
-
-### Передача данных через genElPopupOpener()
-
-Функция **genElPopupOpener()** также поддерживает передачу произвольных данных через свойство **data** в параметре props:
-
-```js
-import { TopPopupWorker } from '@topvisor/ui/popup/worker.js';
-
-// сгенерировать элемент для открытия TopPopup с передачей данных
-const el = TopPopupWorker.genElPopupOpener('span', { 
-  id: 'top-popup-example', 
-  posBy: 'right',
-  data: { userId: 123, userName: 'John' } // передача данных
-}, 'Открыть TopPopup с данными');
-```
-
-## Передача данных через кнопку opener
-
-Компонент **Opener** поддерживает передачу произвольных данных через свойство **data**, которые будут доступны в событиях **@open** и **@close** компонента **TopPopup**:
-
-```html
-
-<template>
-	<!-- Передача данных через opener -->
-	<Opener :id="popupId" :data="{ userId: 123, userName: 'John' }">
-		<button>Открыть с данными</button>
-	</Opener>
-
-	<!-- Получение данных в событиях -->
-	<TopPopup :id="popupId" @open="handleOpen" @close="handleClose">
-		<!-- содержимое popup -->
-	</TopPopup>
-</template>
-
-<script setup>
-	function handleOpen(event) {
-		// event.data содержит переданные данные
-		console.log(event.data.userId); // 123
-		console.log(event.data.userName); // 'John'
-	}
-
-	function handleClose(event) {
-		// те же данные доступны и при закрытии
-		console.log(event.data);
-	}
-</script>
-```
-
-Это позволяет создавать динамические popup, содержимое которых зависит от данных, переданных через кнопку открытия.
-
-## Получение данных в слотах
-
-Данные, переданные через **Opener** или **genElPopupOpener()**, доступны в слотах компонента **TopPopup** через параметр **data**:
-
-```html
-
-<template>
-	<TopPopup :id="popupId" @open="handleOpen">
-		<!-- Доступ к данным в слоте header -->
-		<template #header="{ data }">
-			<h3>Пользователь: {{ data.userName }}</h3>
-		</template>
-
-		<!-- Доступ к данным в слоте content -->
-		<template #content="{ data }">
-			<div>ID пользователя: {{ data.userId }}</div>
-			<div>Имя пользователя: {{ data.userName }}</div>
-		</template>
-
-		<!-- Доступ к данным в слоте contentList -->
-		<template #contentList="{ data }">
-			<li>ID: {{ data.userId }}</li>
-			<li>Имя: {{ data.userName }}</li>
-		</template>
-
-		<!-- Доступ к данным в слоте footer -->
-		<template #footer="{ data }">
-			<button @click="doSomething(data)">Подтвердить</button>
-		</template>
-	</TopPopup>
-</template>
-
-<script setup>
-	function doSomething(data) {
-		console.log('Действие с данными:', data);
-	}
-</script>
-```
-
-Это позволяет создавать динамическое содержимое в различных частях popup на основе переданных данных.

package/src/components/popup/popup/stories/listItems.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { TopPopup } from '@/components/popup/popup';
-import ListItem from '../listItem.vue';
-import ListSubItems from './listSubItems.vue';
-
-function onClick(e: any) {
-	const el: HTMLElement = e.currentTarget;
-
-	alert(`Вы килкнули на: "${el.innerText || el.title}"`);
-}
-</script>
-
-<template>
-	<ListItem @click="onClick">
-		Первый элемент
-
-		<TopButton
-			icon=""
-			styling=""
-			color="theme"
-			style="margin-left: auto" title="Кнопка с @click.stop"
-			@click.stop="onClick"
-		></TopButton>
-
-		<TopPopup>
-			<template #opener>
-				<TopButton
-					icon=""
-					styling=""
-					color="theme"
-					title="Удалить с подменю TopPopup"
-					@click="onClick"
-				></TopButton>
-			</template>
-
-			<template #content>
-				Вложенный TopPopup
-			</template>
-		</TopPopup>
-	</ListItem>
-
-	<ListItem @click="onClick">
-		Второй элемент
-	</ListItem>
-
-	<ListItem @click="onClick" :closeByClick="false">
-		props.closeByClick = false
-	</ListItem>
-
-	<ListItem type="delimiter"/>
-
-	<ListItem href="/" target="_blank">
-		Ссылка
-	</ListItem>
-
-	<ListItem type="delimiter"/>
-
-	<ListItem type="title">
-		Подменю
-	</ListItem>
-
-	<ListSubItems>
-		<ListSubItems>
-			<ListSubItems>
-
-			</ListSubItems>
-		</ListSubItems>
-	</ListSubItems>
-</template>

package/src/components/popup/popup/stories/listSubItems.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/forms/button/button.vue';
-import Popup from '@/components/popup/popup/popup.vue';
-import ListItem from '../listItem.vue';
-
-function openSubItems(e: any) {
-	e.currentTarget.querySelector('.top-button').click();
-}
-</script>
-
-<template>
-	<ListItem @click="openSubItems" :closeByClick="false">
-		Подменю
-
-		<Popup pos="2">
-			<template #opener>
-				<Button
-					color="theme"
-					icon=""
-					style="margin-left: auto"
-					size="xs"
-					class="top-popup_listMore"
-				/>
-			</template>
-
-			<template #contentList>
-				<ListItem
-					data-top-icon=""
-					:href="'https://telegram.me/share/url?url='"
-					target="_blank"
-				>
-					Telegram
-				</ListItem>
-
-				<ListItem
-					data-top-icon=""
-					:href="'https://vk.com/share.php?url='"
-					target="_blank"
-				>
-					Telegram
-				</ListItem>
-
-				<slot></slot>
-			</template>
-		</Popup>
-	</ListItem>
-</template>

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

@@ -1,224 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/forms/button/button.vue';
-
-import Worker from '@/components/popup/lib/worker';
-import type { Props } from '@/components/popup/popup/types';
-import Popup from '@/components/popup/popup/popup.vue';
-import Opener from '@/components/popup/popup/opener.vue';
-import ListItem from '@/components/popup/popup/listItem.vue';
-import ListItems from './listItems.vue';
-
-defineProps<Props>();
-
-type VariantsData = {
-	pos: string,
-	label: string,
-};
-
-const pVariants = {
-	'0': 'На кнопке',
-	'1': 'Сверху',
-	'2': 'Справа',
-	'3': 'Снизу',
-	'4': 'Слева',
-};
-
-function onClick(e: any) {
-	const el: HTMLElement = e.currentTarget;
-
-	alert(`Вы кликнули на: "${el.innerText}"`);
-}
-</script>
-
-<template>
-	<h2>Простой Popup</h2>
-
-	<div style="display: flex; gap: 8px">
-		<Popup>
-			<template #opener>
-				<Button>
-					Просто текст
-				</Button>
-			</template>
-
-			<template #content>
-				<div>
-					Просто текст в slot content
-				</div>
-				<div>
-					Еще немного текста
-				</div>
-				<div>
-					Для вставки кнопок используйте slot footer
-				</div>
-			</template>
-		</Popup>
-
-		<Popup class="top-popup-styling">
-			<template #opener>
-				<Button>
-					Со стилизацией
-				</Button>
-			</template>
-
-			<template #content>
-				Текст в слоте #content, добавлен класс .styling
-			</template>
-		</Popup>
-
-		<Popup>
-			<template #opener>
-				<Button>
-					С шапкой
-				</Button>
-			</template>
-
-			<template #header>
-				Текст в слоте #header
-			</template>
-
-			<template #content>
-				Текст в слоте #content
-			</template>
-		</Popup>
-
-		<Popup>
-			<template #opener>
-				<Button>
-					Вопрос с кнопками
-				</Button>
-			</template>
-
-			<template #content>
-				<div>
-					Если вы уверены, нажимете <b>Ок</b>
-				</div>
-				<div>
-					А если не уверены, то нажимайте <b>Отмена</b>
-				</div>
-				<div>
-					Обратите внимание, что тут вы можете использовать Клавиши <b>Enter</b> и <b>Esc</b>.
-				</div>
-			</template>
-
-			<template #footer>
-				<Button color="theme">
-					Отмена
-				</Button>
-				<Button @click="onClick">
-					Ок
-				</Button>
-			</template>
-		</Popup>
-
-		<Popup>
-			<template #opener>
-				<Button>
-					Меню и подменю
-				</Button>
-			</template>
-
-			<template #contentList>
-				<ListItems/>
-			</template>
-		</Popup>
-
-		<Popup class="top-popup-styling">
-			<template #opener>
-				<Button>
-					Все вместе
-				</Button>
-			</template>
-
-			<template #header>
-				Текст в слоте #header
-			</template>
-
-			<template #content>
-				<div>
-					Обычный текст в слоте #content
-				</div>
-				<div>
-					Добавлен класс .styling
-				</div>
-			</template>
-
-			<template #contentList>
-				<ListItem type="delimiter"/>
-				<ListItems/>
-			</template>
-
-			<template #footer>
-				<Button color="theme">
-					Отмена
-				</Button>
-				<Button>
-					Ок
-				</Button>
-			</template>
-		</Popup>
-	</div>
-
-	<h2>Варианты расположения с 1 шаблоном и несколькими кнопками</h2>
-
-	<div style="display: flex; gap: 8px">
-		<!-- @vue-generic {VariantsData} -->
-		<Popup id="pVariants">
-			<template #content="{ data }">
-				Это всего один компонент. Сколько бы кнопок не было, компонент всегда будет всего один.<br><br>
-
-				Данные, проброшенные кнопкой:
-				<pre>{{ data }}</pre>
-			</template>
-		</Popup>
-
-		<!-- @vue-generic {VariantsData} -->
-		<Opener
-			v-for="(label, pos) in pVariants"
-			id="pVariants"
-			:pos="pos"
-			:data="{
-				pos,
-				label,
-			}"
-		>
-			<Button>
-				{{ label }}
-			</Button>
-		</Opener>
-	</div>
-
-	<h2>При наведении</h2>
-
-	<Popup :openByHover="true">
-		<template #opener>
-			<Button>
-				Просто текст
-			</Button>
-		</template>
-
-		<template #content>
-			Текст в слоте #content
-		</template>
-	</Popup>
-
-	<h2>Без кнопки</h2>
-
-	<Popup>
-		<template #opener>
-			<div class="top-as-a">
-				Посмотреть число компонентов Popup на старнице
-			</div>
-		</template>
-
-		<template #content>
-			{{ Worker.vueConnectors.size }}
-		</template>
-	</Popup>
-</template>
-
-<style>
-.top-popup-styling > .top-popupPanel {
-	box-shadow: rgba(127, 28, 138, 0.3) 0 0 30px;
-}
-</style>