@topvisor/ui 0.0.35 → 0.0.36

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

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

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

@@ -1,52 +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"
-					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

@@ -1,208 +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': 'Слева',
-};
-</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

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

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

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

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

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