@topvisor/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { onUnmounted, ref, toRef, watch } from 'vue';
+import TopHint from '@/components/forms/hint/hint.vue';
+import type PopupClass from '@/components/popup/lib/popup';
+import type { Emits, Props } from './popup';
+import Opener from './opener.vue';
+import Worker from '@/components/popup/lib/worker';
+
+const props = withDefaults(defineProps<Props>(), {
+	id: '',
+	pos: '3',
+	notch: true,
+	posBy: 'fixed',
+});
+
+const emit = defineEmits<Emits>();
+
+const expose = {
+	popup: undefined as PopupClass | undefined,
+};
+defineExpose(expose);
+
+const id = props.id || 'top-popup-id-' + Math.random() + '';
+
+const elPopupRef = ref<HTMLElement | null>(null);
+const elPopupInnerRef = ref<HTMLElement | null>(null);
+
+// см. lib/popup
+const onOpen = async (popup: PopupClass) => {
+	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;
+
+	emit('open', { elPopup: popup.elPopup!, elPopupOpener: popup.el });
+};
+
+// см. lib/popup
+const onClose = (popup: PopupClass) => {
+	elPopupInnerRef.value = null;
+
+	vueConnector.opened = false;
+	vueConnector.popup = undefined;
+
+	emit('close', { elPopup: popup.elPopup!, elPopupOpener: popup.el });
+};
+
+const vueConnector = {
+	onOpen,
+	onClose,
+	classRef: toRef(props, 'class'),
+	opened: false,
+	popup: undefined as PopupClass | 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="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"></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"></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"></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"></slot>
+		</div>
+	</teleport>
+</template>
+
+<style>
+.top-popup_footerSupportLink {
+	margin-right: auto;
+}
+</style>

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

@@ -0,0 +1,55 @@
+## Почему 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** c одним и тем же **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');
+```

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import ListItem from '../listItem.vue';
+import ListSubItems from './listSubItems.vue';
+
+function onClick(e: any) {
+	const el: HTMLElement = e.currentTarget;
+
+	alert(`Вы килкнули на: "${el.innerHTML}"`);
+}
+</script>
+
+<template>
+	<ListItem @click="onClick">
+		Первый элемент
+	</ListItem>
+
+	<ListItem @click="onClick">
+		Второй элемент
+	</ListItem>
+
+	<ListItem @click="onClick" :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,210 @@
+<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/popup';
+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>();
+
+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">
+		<Popup id="pVariants">
+			<template #content>
+				Это всего один компонент. Сколько бы кнопок не было, компонент всегда будет всего один.
+			</template>
+		</Popup>
+
+		<Opener
+			v-for="(label, pos) in pVariants"
+			id="pVariants"
+			:pos="pos"
+		>
+			<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>