@topvisor/ui 1.2.0 → 1.3.0

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

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

@@ -1,55 +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** 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

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

@@ -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,210 +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/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>