@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

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

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

@@ -0,0 +1,145 @@
+## Почему 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

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

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

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