@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,34 @@
+## Почему Popup, а не DropDown и не ContextMenu?
+
+Popup реализует отображение окошка, с привязкой к кнопке, но это не обязательно меню.
+В мобильной версии отображается в виде Popup, всплывающего снизу экрана.
+
+Стандартная функциональность:
+
+- настраиваемая шапка
+- шаблон для основного содержимого
+- шаблон для списка, который поддерживает вставку **ListItem** и элементы форм, например чекбоксы и радио 
+- для списков реализуется навигация через клавиатуру
+- событие @open для отлавливания открытия Popup
+- событие @close для отлавливания закрытия Popup
+- настраиваемый футер
+
+Уникальные фичи компонента:
+
+- режим мобильной версии, активируется при размерах экрана меньше указанного, см. **Core.defineOptions()** 
+- поддерживаются **вложенные** Popup, поддерживает 4 уровня вложенности
+- позволяет открывать Popup из любых мест, используя **всего один шаблон**, сохраняя при этом реактивность
+- режим **openByHover** для имитации подсказок
+- всегда добавляется на страницу в **ленивом** режиме, меню рендерится только при открытии.
+
+## Обычный вариант использования
+
+Вставьте компонент Popup с указнием слота **opener** и слотом **content** или **contentList**
+
+## Вариант с оптмизиация путем переиспользования шаблона Popup
+
+Вставьте компонент Popup с необходимыми слотами Popup **без** слота **opener**, укажите props **id**.
+
+Вставьте кнопки для открытия Popup с помощью компонента **Opener**, укажите ему тот же props **id**.
+
+Popup c одним и тем же id может быть открыт одновременно только один раз.

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: Element = 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 type="link" 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,52 @@
+<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"
+					class="more"
+				/>
+			</template>
+
+			<template #contentList>
+				<ListItem type="control">
+					<Button
+						icon=""
+						:href="'https://telegram.me/share/url?url='"
+						target="_blank"
+						color="theme"
+					>
+						Telegram
+					</Button>
+				</ListItem>
+
+				<ListItem type="control">
+					<Button
+						icon=""
+						:href="'https://vk.com/share.php?url='"
+						target="_blank"
+						color="theme"
+					>
+						ВКонтакте
+					</Button>
+				</ListItem>
+
+				<slot></slot>
+			</template>
+		</Popup>
+	</ListItem>
+</template>

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

@@ -0,0 +1,208 @@
+<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': 'Слева',
+};
+</script>
+
+<template>
+	<h2>Простой Popup</h2>
+
+	<div style="display: flex; gap: 8px">
+		<Popup>
+			<template #opener>
+				<Button>
+					Просто текст
+				</Button>
+			</template>
+
+			<template #content>
+				Текст в слоте #content
+			</template>
+		</Popup>
+
+		<Popup>
+			<template #opener>
+				<Button>
+					Текст с кнопками
+				</Button>
+			</template>
+
+			<template #content>
+				Кнопки в слоте #content
+
+				<Button color="theme" icon="">Кнопка</Button>
+				<Button color="theme" icon="">Кнопка</Button>
+				<Button color="theme" icon="">Кнопка</Button>
+			</template>
+		</Popup>
+
+		<Popup :class="$style.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>
+			</template>
+
+			<template #footer>
+				<Button color="theme">
+					Отмена
+				</Button>
+				<Button>
+					Ок
+				</Button>
+			</template>
+		</Popup>
+
+		<Popup>
+			<template #opener>
+				<Button>
+					Список
+				</Button>
+			</template>
+
+			<template #contentList>
+				<ListItems/>
+			</template>
+		</Popup>
+
+		<Popup :class="$style.styling">
+			<template #opener>
+				<Button>
+					Все вместе
+				</Button>
+			</template>
+
+			<template #header>
+				Текст в слоте #header
+			</template>
+
+			<template #content>
+				Кнопки в слоте #content, добавлен класс .styling
+
+				<Button color="theme" icon="">Кнопка</Button>
+				<Button color="theme" icon="">Кнопка</Button>
+				<Button color="theme" icon="">Кнопка</Button>
+			</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 module>
+.styling > .top-popupPanel {
+	box-shadow: rgba(127, 28, 138, 0.3) 0 0 30px;
+}
+</style>

package/src/components/popup/popup/style/popup.css

@@ -0,0 +1,243 @@
+:root{
+	--top-popup-background-color: var(--color-bg-3);
+	--top-popup-background-color-hover: var(--color-steel-150);
+	--top-popup-background-color-active: var(--color-steel-200);
+	--top-popup-border-color: var(--color-theme-100);
+	--top-popup-title-background-color: var(--color-steel-100);
+}
+
+.top-theme-dark{
+	--top-popup-background-color-hover: var(--color-gray-800);
+	--top-popup-background-color-active: var(--color-gray-750);
+	--top-popup-title-background-color: var(--color-gray-900);
+}
+
+.top-popup-front{ position: relative; }
+
+.top-popup-wrapper{
+	--top-popup-padding-h: 8px;
+	--top-popup-padding-v: 8px;
+
+	/* см. recalcPosition() */
+	--top-popup-height: 0px;
+	--top-popup-right-bounding: 0px;
+	--top-popup-bottom-bounding: 0px;
+	--top-popup-top: 0px;
+	--top-popup-right: calc(100vw - var(--top-popup-right-bounding));
+	--top-popup-bottom: calc(var(--100vh) - var(--top-popup-bottom-bounding));
+	--top-popup-left: 0px;
+
+	text-align: initial; white-space: normal; word-break: normal;
+	position: absolute; z-index: 200000;
+}
+.top-popup-wrapper:not(.top-popup-wrapper-shown){ overflow: hidden; }
+
+/* top-popupPanel */
+.top-popupPanel {
+	cursor: default;
+	box-shadow: var(--top-shadow-b);
+	border-radius: 8px;
+	background: var(--top-popup-background-color);
+	position: absolute; overflow: hidden;
+	display: flex; flex-direction: column;
+}
+
+/* position */
+.top-popup-wrapper > *{ opacity: 0; transition: opacity 100ms linear, transform 100ms linear; }
+.top-popup-wrapper.p0 > *{ transform: translateY(-8px); }
+.top-popup-wrapper.p1 > *{ transform: translateY(8px); }
+.top-popup-wrapper.p2 > *{ transform: translateX(8px); }
+.top-popup-wrapper.p3 > *{ transform: translateY(8px); }
+.top-popup-wrapper.p4 > *{ transform: translateX(-8px); }
+.top-popup-wrapper-shown:not(.top-popup-wrapper-closed) > *{opacity: 1;transform: translate(0, 0) !important;}
+
+.top-popup-wrapper.p0 > .top-popup{ top: calc(-16px); left: calc(0px - var(--top-popup-padding-h)); }
+.top-popup-wrapper.p1 > .top-popup{ bottom: calc(100% + 8px); }
+.top-popup-wrapper.p2 > .top-popup{ left: calc(100% + 8px); }
+.top-popup-wrapper.p3 > .top-popup{ top: calc(100% + 8px); }
+.top-popup-wrapper.p4 > .top-popup{ right: calc(100% + 8px); }
+.top-popup-wrapper.p2 > .top-popup,
+.top-popup-wrapper.p4 > .top-popup{ margin-top: -10px; }
+
+.top-popup-wrapper.p1.with_notch > .top-popup{ margin-bottom: 5px; }
+.top-popup-wrapper.p2.with_notch > .top-popup{ margin-left: 5px; }
+.top-popup-wrapper.p3.with_notch > .top-popup{ margin-top: 5px; }
+.top-popup-wrapper.p4.with_notch > .top-popup{ margin-right: 5px; }
+
+.top-popup-wrapper.invert-x > .top-popup{ right: 0; }
+.top-popup-wrapper.invert-y > .top-popup{ bottom: 0; }
+
+/* notch */
+.top-popup-wrapper > .notch{ border: 7.4px solid transparent; position: absolute; display: block; }
+
+.top-popup-wrapper.p1 > .notch{ border-bottom: 0; border-top: 7.4px solid var(--content-background-color); margin: 0 0 7.4px -7.4px; bottom: 100%; left: 50% }
+.top-popup-wrapper.p2 > .notch{ border-left: 0; border-right: 7.4px solid var(--content-background-color); margin: 0 0 -7.4px 7.4px; bottom: 50%; left: 100%; }
+.top-popup-wrapper.p3 > .notch{ border-top: 0; border-bottom: 7.4px solid var(--content-background-color); margin: 7.4px 0 0 -7.4px; top: 100%; left: 50%; }
+.top-popup-wrapper.p4 > .notch{ border-right: 0; border-left: 7.4px solid var(--content-background-color); margin: 0 7.4px -7.4px 0; bottom: 50%; right: 100%; }
+
+.top-popup-wrapper.p1 > .notch-border{ border-top-color: rgba(0,0,0,0.05); margin-bottom: 6px; }
+.top-popup-wrapper.p2 > .notch-border{ border-right-color: rgba(0,0,0,0.05); margin-left: 6px; }
+.top-popup-wrapper.p3 > .notch-border{ border-bottom-color: rgba(0,0,0,0.05); margin-top: 6px; }
+.top-popup-wrapper.p4 > .notch-border{ border-left-color: rgba(0,0,0,0.05); margin-right: 6px; }
+
+/* common */
+.top-popup_header,
+.top-popup_content,
+.top-popup_footer{ padding: var(--top-popup-padding-h) var(--top-popup-padding-h); font-size: 14px; }
+.top-popup_header,
+.top-popup_footer{ display: flex; align-items: center; justify-content: space-between; }
+
+/* header */
+.top-popup_header{ border-bottom: 1px solid var(--top-popup-border-color); font-weight: 600; }
+.top-popup_header > *{ font-weight: 400; }
+.top-popup_header > .a{ cursor: pointer; color: var(--color-blue-450); }
+.top-popup_header > .a:hover{ color: var(--color-blue-350); }
+
+.top-popup_headerButton{ width: 60px; }
+
+/* content */
+.top-popup .top-popup_content{
+	/* has_scroll */
+	--scroll-padding-top: var(--top-popup-padding-v);
+	--scroll-padding-bottom: var(--top-popup-padding-v);
+
+	padding-top: var(--top-popup-padding-v); padding-bottom: var(--top-popup-padding-v); margin: 0; line-height:1.3 !important;
+	flex-grow: 1; overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+.top-popup .top-popup_content .top-unwrap{
+	--top-unwrap-x: var(--top-popup-padding-h);
+}
+
+.top-popup div.top-popup_content{ display: flex; flex-direction: column; gap: 4px; }
+.top-popup div.top-popup_content > *{ flex-shrink: 0; }
+.top-popup div.top-popup_content > .top-button{ margin: 0; }
+
+.top-popup ul.top-popup_content{
+	--scroll-padding-top: 4px;
+	--scroll-padding-bottom: var(--scroll-padding-top);
+
+	padding: var(--scroll-padding-top) 0;
+}
+
+ul.top-popup_content li{ margin: 0; list-style:none; display: flex; position: relative }
+ul.top-popup_content li > *{ flex-grow: 1; }
+ul.top-popup_content li > a:not(.top-button),
+ul.top-popup_content li > i.a{
+	cursor: pointer;
+	box-sizing: border-box;
+	background: var(--top-popup-background-color); padding:var(--top-popup-padding-v) var(--top-popup-padding-h);
+	color:var(--color-text) !important; font-size: 14px; font-weight: normal !important; text-decoration:none !important; font-style: normal;
+	display:flex; flex: 1 1 100%; align-items: center;
+	transition: background-color 0.1s ease-in-out;
+}
+.top-popup-wrapper-no_animate ul.top-popup_content li > a:not(.top-button),
+.top-popup-wrapper-no_animate ul.top-popup_content li > i.a{ transition: none; }
+
+ul.top-popup_content li > a:not(.top-button):hover,
+ul.top-popup_content li > i.a:hover{ background: var(--top-popup-background-color-hover); }
+ul.top-popup_content li > a:not(.top-button).top-active,
+ul.top-popup_content li > i.a.top-active{ background: var(--top-popup-background-color-active); }
+
+/* listTitle */
+li.top-popup_listTitle{
+	background: var(--top-popup-title-background-color); padding: var(--top-popup-padding-v) var(--top-popup-padding-h);
+	color: var(--color-text-3); font-size: 12px; font-weight: 400;
+}
+li.top-popup_listTitle:first-child{
+	padding-top: calc(var(--top-popup-padding-v) + var(--scroll-padding-top));
+	margin-top: calc(0px - var(--scroll-padding-top));
+}
+
+/* listDelimiter */
+ul.top-popup_content li.top-popup_listDelimiter{
+	border-radius: 3px;
+	background: var(--top-popup-border-color);
+	height: 2px;
+	margin: calc(var(--top-popup-padding-h) / 2) var(--top-popup-padding-h);
+}
+
+/* listMore */
+ul.top-popup_content li > i.a.top-popup_listMore{
+	height: auto; padding-right: 4px; padding-left: 4px;
+	font-size: 24px; line-height: 17px; text-align: center;
+	flex-basis: 10px;
+}
+ul.top-popup_content li > i.a.top-popup_listMore:before{ color: var(--color-gray-500); }
+ul.top-popup_content li > * > i.top-popup_listMore{
+	padding: 0 var(--top-popup-padding-h); margin: 0 0 0 auto;
+	color: var(--color-gray-500);
+	font-size: 14px;
+}
+ul.top-popup_content li > * > i.top-popup_listMore:hover,
+ul.top-popup_content li > * > i.top-popup_listMore.top-active{ color: var(--color-blue-500); }
+ul.top-popup_content li > * > i.top-popup_listMore:before{ transform: rotate(90deg); }
+
+ul.top-popup_content li a.close{ background: none !important; }
+
+/* data-top-icon */
+.top-popup_content > [data-top-icon]:before{ --top-icon-size: 20px; }
+
+ul.top-popup_content li > [data-top-icon]:not(.top-button):before{
+	--top-icon-color:	var(--color-text-3);
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+
+	height: 1rem; margin-right: 8px; transition: color 0.1s;
+}
+ul.top-popup_content li:hover > [data-top-icon]:not(.top-button):before,
+ul.top-popup_content li > [data-top-icon]:not(.top-button).top-active:before{
+	--top-icon-color: #378DC6;
+}
+
+/* footer */
+.top-popup_footer{
+	padding: var(--top-popup-padding-h) var(--top-popup-padding-h); display: flex; gap:8px; justify-content: flex-end;
+}
+.top-popup_footer > .top-button{ margin: 0; }
+
+/* Виджеты */
+.top-popup > [data-widget]{ padding: 0 var(--top-popup-padding-h); }
+.top-popup > [data-widget] + hr{ margin: 0 var(--top-popup-padding-h); }
+
+.top-popup .placeholder{
+	border:1px solid #E0D9D9 !important; border-right: none !important; border-left: none !important; background:#F9F9F9 !important; margin: -1px 0; z-index: 1;
+	position: relative;
+}
+
+/* компоненты  */
+.top-popup-wrapper.simple_list > .top-popup{ min-width: 0; white-space: nowrap; }
+
+.top-popup_content .top-column{ display: flex; flex-direction: column; gap: 4px; }
+.top-popup_content li > :not(a):not(.a){ margin:0 var(--top-popup-padding-h); }
+html .top-popup .top-popup_content li > .top-button{ margin:calc(var(--top-popup-padding-v) / 2) var(--top-popup-padding-h); }
+
+.top-popup li .check_all,
+.top-popup li .clear_all{ cursor: pointer; color: var(--color-cyan); padding: 8px; display: inline-block; }
+.top-popup li .check_all:hover,
+.top-popup li .clear_all:hover{ text-decoration: underline; }
+.top-popup li .clear_all{ display: none; }
+
+/* table */
+.top-popup_content table{ margin: -9px 0; }
+.top-popup_content table td,
+.top-popup_content table th{ padding: 9px var(--top-popup-padding-h) 9px 0; vertical-align: top; }
+.top-popup_content table th{ width: 40%; font-weight: 600; white-space: nowrap; }
+
+/* формы */
+ul.top-popup_content .a > [type="checkbox"],
+ul.top-popup_content .a > [type="radio"]{ margin: -8px 0 -8px auto; }
+
+/* deprecated */
+ul.top-popup_content a > [class*=icon],
+ul.top-popup_content i.a > [class*=icon]{
+	margin-right: 14px; text-align: center;
+	width: auto; height: 16px; font-size: 16px; vertical-align: top;
+	transition: 0.1s;
+}
+
+.top-popup .buttons{ border-radius:0 0 4px 4px; border-top:1px solid #BDC3C7; background:#ECF0F1; padding:10px 15px; margin:10px -15px -10px -15px; white-space: nowrap; }
+.top-popup_footer [class*=btn]:not(.btn-transparent){ min-width: 100px; padding: 5px 14px; margin-left: 10px; }
+.top-popup_footer [class*=btn]:first-child{ margin-left: 0; }
+.top-popup_footer .btn.full_width{ margin: 0; flex-grow: 1; }

package/src/components/popup/popup/style/popup.m.css

@@ -0,0 +1,71 @@
+html.with_popup{ background: #808080; }
+
+.top-popup-wrapper{
+	--top-popup-padding-h: 19px;
+	--top-popup-padding-v: 16px;
+	--top-popup-footer-offset: 25px;
+
+	width: auto !important; height: auto !important;
+	position: fixed; top: 0 !important; right: 0 !important; left: 0 !important; overflow: hidden;
+	transition: background 0.3s;
+}
+
+.top-popup-wrapper-shown:not(.top-popup-wrapper-closed){ background: rgba(0,0,0,0.5); backdrop-filter: blur(1px); }
+.top-popup-wrapper-shown:not(.top-popup-wrapper-closed) > .top-popup{ opacity: 1 !important; }
+
+.top-popup{
+	border-radius: 8px 8px 0 0; width: auto !important; max-height: calc(100% - var(--header-height) - 12px);
+	top: auto !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
+	display: flex; flex-direction: column;
+
+	/* невозможно опустить элемент вниз за экран на 100%, fix: opacity и translateY(80%) */
+	transform: translateY(80%);
+
+	transition: opacity 0.3s, transform 0.3s;
+}
+
+/* from top */
+.top-popup-wrapper.p-from-top{
+	--top-popup-footer-offset: 0px;
+
+	top: var(--header-height) !important;
+}
+.with_dialog .top-popup-wrapper.p-from-top{ top: 50px !important; }
+.top-popup-wrapper.p-from-top > .top-popup{
+	border-radius: 0 0 8px 8px; max-height: calc(100% - 24px); top: 0 !important; bottom: auto !important;
+	transform: translateY(calc(-100% - 24px));
+}
+
+.top-popup_content:last-child,
+.top-popup_footer{
+	--scroll-padding-bottom: calc(var(--top-popup-padding-v) + var(--top-popup-footer-offset));
+
+	padding-bottom: var(--scroll-padding-bottom);
+}
+
+/* content */
+ul.top-popup_content{
+	--scroll-padding-top: 0px;
+	--scroll-padding-bottom: var(--scroll-padding-top);
+
+	display: flex; flex-direction: column;
+}
+ul.top-popup_content li:not(:last-child){ border-bottom: 1px solid var(--top-popup-border-color); }
+
+.top-popup-wrapper.top-style_alt > .top-popup > ul > li{ border-bottom: none; }
+
+/* footer */
+.top-popup_footer{ flex-wrap: wrap; }
+.top-popup_footer > .top-button{
+	--top-forms-base-height: var(--top-forms-base-height_xl);
+
+	flex-grow: 1;
+}
+
+/* listTitle */
+ul.top-popup_content li.top-popup_listTitle{
+	--top-popup-padding-v: 12px;
+}
+
+/* listDelimiter */
+ul.top-popup_content li.top-popup_listDelimiter{ border-radius: 0; border-bottom: none; height: 2px; margin: 0; }

package/src/components/popup/popup/style/popup.pc.css

@@ -0,0 +1,28 @@
+html:not(.with_dialog){ margin-right: 0 !important; }
+
+.top-popup{ min-width: 250px; max-width: calc(100vw - var(--top-popup-left) - 16px); max-height: calc(var(--top-popup-bottom) + var(--top-popup-height)); }
+.top-popup-wrapper.invert-x > .top-popup{ max-width: calc(100vw - var(--top-popup-right) - 16px); }
+.top-popup-wrapper.invert-y > .top-popup{ max-height: calc(100vh - var(--top-popup-bottom) - 16px); }
+
+/* position */
+.top-popup-wrapper.p1 > .top-popup{ max-height: calc(var(--top-popup-top) - var(--header-height) - 16px); }
+.top-popup-wrapper.p3 > .top-popup{ max-height: calc(var(--top-popup-bottom) - 16px); }
+.top-popup-wrapper.p2 > .top-popup{ max-width: calc(var(--top-popup-right) - 16px); }
+.top-popup-wrapper.p4 > .top-popup{ max-width: calc(var(--top-popup-left) - 16px); }
+
+/* notch */
+.top-popup-wrapper.p1.with_notch > .top-popup,
+.top-popup-wrapper.p3.with_notch > .top-popup{ margin-left: -16px !important; }
+.top-popup-wrapper.p1.with_notch > .notch,
+.top-popup-wrapper.p3.with_notch > .notch{ margin-left: -8px !important; }
+
+.top-popup-wrapper.p1.with_notch.invert-x,
+.top-popup-wrapper.p3.with_notch.invert-x{ margin-left: 3px !important; }
+.top-popup-wrapper.p1.with_notch.invert-x > .notch,
+.top-popup-wrapper.p3.with_notch.invert-x > .notch{ margin-left: -9px !important; }
+
+/* listMore */
+ul.top-popup_content li > * > i.top-popup_listMore{ visibility: hidden; transition: none; }
+ul.top-popup_content li:hover > * > i.top-popup_listMore,
+ul.top-popup_content li > *.top-active > i.top-popup_listMore,
+ul.top-popup_content li > * > i.top-popup_listMore.top-active{ visibility: visible; }

package/src/components/popup/popup.ts

@@ -0,0 +1,3 @@
+export { default as Popup } from './popup/popup.vue';
+export { default as PopupOpener } from './popup/opener.vue';
+export { default as PopupListItem } from './popup/listItem.vue';

package/src/components/popup/worker.ts

@@ -0,0 +1 @@
+export { default } from './lib/worker.js';