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

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

@@ -0,0 +1,355 @@
+:root {
+	--top-popup-z-index: 200000;
+	--top-popup-transition-delay: 100ms;
+	--top-popup-offset: var(--top-padding-2);
+
+	--top-popup-background-color: var(--color-layout-front-1);
+	--top-popup-background-color-hover: var(--color-layout-front-3);
+	--top-popup-background-color-active: var(--color-layout-front-4);
+
+	--top-popup-border-color: var(--color-line-2-opacity);
+	--top-popup-title-background-color: var(--color-layer-1);
+
+	/* суммарный отсуп от каря popup до элемента */
+	--top-popup-content-padding: calc(var(--top-popup-list-padding) + var(--top-popup-listItem-padding));
+
+	/* списки */
+	--top-popup-list-padding: var(--top-padding-2);
+
+	--top-popup-listItem-radius: var(--top-radius-2);
+	--top-popup-listItem-padding: var(--top-padding-2);
+}
+
+.top-popup-front { position: relative; }
+
+.top-popup-wrapper {
+	/* см. 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;
+	--top-popup-margin: -10px;
+
+	text-align: initial; white-space: normal; word-break: normal;
+	position: absolute; z-index: 200000;
+	outline: none;
+}
+
+.top-popup-wrapper:not(.top-popup-wrapper-shown) { overflow: hidden; }
+
+/* top-popupPanel */
+.top-popupPanel {
+	cursor: default;
+	box-shadow: var(--top-shadow-b);
+	border-radius: 14px;
+	background: var(--top-popup-background-color);
+	position: absolute; overflow: hidden;
+	display: flex; flex-direction: column;
+}
+
+/* position */
+.top-popup-wrapper > * {
+	opacity: 0;
+	transition: opacity var(--top-popup-transition-delay) linear, transform var(--top-popup-transition-delay) 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 - 8px); }
+
+.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: var(--top-popup-margin);
+}
+
+.top-popup-wrapper.p2.invert-y > .top-popup,
+.top-popup-wrapper.p4.invert-y > .top-popup {
+	margin-bottom: var(--top-popup-margin);
+}
+
+.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(--color-layout-front-1); 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(--color-layout-front-1); 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(--color-layout-front-1); 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(--color-layout-front-1); 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 { font-size: 14px; }
+
+.top-popup_header,
+.top-popup_footer { display: flex; align-items: center; justify-content: space-between; }
+
+/* header */
+.top-popup_header {
+	color: var(--color-text-1);
+	border-bottom: 1px solid var(--top-popup-border-color);
+	padding: var(--top-padding-3);
+	font-weight: 600;
+}
+
+.top-popup_header > * { font-weight: 400; }
+
+.top-popup_header > .a { cursor: pointer;}
+
+.top-popup_header > .a:hover { color: var(--color-text-primary); }
+
+.top-popup_headerButton { width: 60px; }
+
+/* widget */
+.top-popup_widget {
+	padding: var(--top-padding-2);
+}
+
+/* content */
+.top-popup_content {
+	margin: 0;
+	flex-grow: 1;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: var(--top-gap-4);
+
+	-webkit-overflow-scrolling: touch;
+}
+
+div.top-popup_content {
+	color: var(--color-text-1);
+	padding: var(--top-popup-content-padding);
+}
+
+div.top-popup_content > * { flex-shrink: 0; }
+
+div.top-popup_content > .top-button { margin: 0; }
+
+div.top-popup_content .top-unwrap {
+	--top-unwrap-x: var(--top-popup-content-padding);
+}
+
+ul.top-popup_content {
+	color: var(--color-text-1);
+	padding: var(--top-popup-list-padding);
+	gap: 2px;
+}
+
+ul.top-popup_content .top-unwrap {
+	--top-unwrap-x: var(--top-popup-list-padding);
+}
+
+.top-popup_listItem {
+	border-radius: var(--top-popup-listItem-radius);
+	padding: var(--top-popup-listItem-padding);
+	line-height: 1 !important;
+}
+
+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 > .a {
+	cursor: pointer;
+	box-sizing: border-box;
+	border-radius: var(--top-popup-listItem-radius);
+	background: var(--top-popup-background-color);
+	padding: var(--top-popup-listItem-padding);
+	color: var(--color-text-1) !important; font-size: 14px; font-weight: normal !important; text-decoration: none !important; font-style: normal;
+	line-height: 1 !important;
+	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 > .a { transition: none; }
+
+ul.top-popup_content li > a:not(.top-button):hover,
+ul.top-popup_content li > .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 > .a.top-active {
+	--top-icon-color: var(--color-text-primary) !important;
+
+	background: var(--top-popup-background-color-active);
+}
+
+.top-popup_content + .top-popup_content { padding-top: 0; }
+
+/* listTitle */
+.top-popup_listItem-title {
+	background: var(--color-layer-1);
+	color: var(--color-text-1); font-size: 12px;
+}
+
+/* listDelimiter */
+.top-popup_listItem-delimiter {
+	border-radius: 3px;
+	background: var(--top-popup-border-color);
+	height: 1px;
+	padding: 0;
+	margin: 4px;
+}
+
+/* listMore */
+.top-popup_listMore {
+	font-size: 20px;
+	margin: calc(0px - var(--top-popup-listItem-padding)) calc(0px - var(--top-popup-listItem-padding) / 2) calc(0px - var(--top-popup-listItem-padding)) 0;
+}
+
+.top-popup_listMore.top-button { margin: 0; }
+
+ul.top-popup_content li > .a.top-popup_listMore {
+	text-align: center;
+	flex-basis: 10px;
+}
+
+ul.top-popup_content li > .a.top-popup_listMore:before { color: var(--color-text-2); }
+
+ul.top-popup_content li > * > .top-popup_listMore {
+	margin-left: auto;
+	color: var(--color-layer-4);
+	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-text-primary); }
+
+ul.top-popup_content li > * > i.top-popup_listMore:before {
+	transform: rotate(90deg);
+	display: block;
+}
+
+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) {
+	--top-icon-color: var(--color-text-3);
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+}
+
+ul.top-popup_content li > [data-top-icon]:not(.top-button):before {
+	height: 1rem; margin-right: 8px; transition: color 0.1s;
+}
+
+ul.top-popup_content li:hover > [data-top-icon]:not(.top-button) {
+	--top-icon-color: var(--color-text-2);
+}
+
+/* footer */
+.top-popup_footer {
+	/*padding: var(--top-popup-list-padding);*/
+	padding: var(--top-padding-3);
+	border-top: 1px solid var(--top-popup-border-color);
+	display: flex;
+	gap: var(--top-gap-2);
+	justify-content: flex-end;
+}
+
+/* footerSupportLink */
+.top-popup_footerSupportLink {
+	margin-right: auto;
+}
+
+/* Виджеты */
+.top-popup > [data-widget] { padding: 0 var(--top-popup-list-padding); }
+
+.top-popup > [data-widget] + hr { margin: 0 var(--top-popup-list-padding); }
+
+.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; }
+
+html .top-popup .top-popup_content li > .top-button {
+	margin: calc(var(--top-popup-listItem-padding) / 2) var(--top-popup-listItem-padding);
+}
+
+.top-popup li .check_all,
+.top-popup li .clear_all { cursor: pointer; color: var(--color-text-primary); 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-listItem-padding) 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] {
+	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,70 @@
+:root {
+	--top-popup-list-padding: 0px;
+
+	--top-popup-listItem-radius: 0px;
+	--top-popup-listItem-padding: var(--top-padding-4);
+}
+
+.top-popup-wrapper {
+	--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, 0px) - var(--toolbar-height, 0px) - 12px); margin: 0 !important;
+	top: auto !important; right: 0 !important; bottom: var(--toolbar-height, 0px) !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, 0px) !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));
+}
+
+/* widget */
+.top-popup_widget:not(.p-from-top) { order: 10; }
+
+/* content */
+ul.top-popup_content {
+	gap: 0;
+}
+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-direction: column-reverse;
+}
+.top-popup_footer > .top-button {
+	--top-forms-base-height: var(--top-forms-base-height_l);
+
+	width: 100%;
+}
+
+/* listTitle */
+ul.top-popup_content .top-popup_listItem-title {
+	--top-popup-padding-v: 12px;
+}
+
+/* listDelimiter */
+ul.top-popup_content .top-popup_listItem-delimiter { background: var(--color-line-1-opacity); height: 4px; margin: 0; }
+ul.top-popup_content li:first-child > .top-popup_listItem-delimiter { border-top: 1px solid var(--top-popup-border-color); }

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

@@ -0,0 +1,26 @@
+.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, 0px) - 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/types.ts

@@ -0,0 +1,131 @@
+// @ts-ignore - Partial<OpenerProps> приводит к неверным типам полей в storybook
+export interface Props<T extends Record<string, any> | undefined = undefined> extends OpenerProps<T> {
+	/**
+	 * Уникальный id компонента
+	 *
+	 * Используется только в setup, т.е. изменение `id` будет проигнорировано
+	 *
+	 * Генерируется автоматически при создании кнопки Popup
+	 *
+	 * Можно задать вручную, если необходимо создать Popup без кнопки для последюущего использования,
+	 * особенно важно при создании большого числа кнопок, например в списках и таблицах
+	 */
+	id?: string;
+
+	/**
+	 * Класс, который нужно добавить к Popup, устанавилвается в момент открытия
+	 */
+	class?: string;
+
+	/**
+	 * Длительность анимации в мс
+	 */
+	transitionDuration?: number;
+
+	/**
+	 * Ссылка на справку.
+	 *
+	 * Если указана, кнопка справки будет добавлена в футере popup
+	 */
+	footerSupportLink?: string;
+}
+
+export type PopupEvent<T extends Record<string, any> | undefined = undefined> = {
+	elPopup: HTMLElement,
+	elPopupOpener: HTMLElement,
+
+	/**
+	 * Данные, с которым был открыт Popup
+	 *
+	 * @see {OpenerProps['data']}
+	 */
+	data: OpenerProps<T>['data'],
+}
+
+export type Emits<T extends Record<string, any> | undefined = undefined> = {
+	/**
+	 * Будет вызвано при открытии Popup
+	 */
+	open: [popupEvent: PopupEvent<T>];
+
+	/**
+	 * Будет вызвано после закрытия Popup перед его удалением
+	 */
+	close: [popupEvent: PopupEvent<T>];
+
+	/**
+	 * Будет вызвано при скролле списка в Popup
+	 */
+	scrollContentList: [e: Event];
+}
+
+export interface OpenerProps<T extends Record<string, any> | undefined = undefined> {
+	/**
+	 * id компонента Popup, который необходимо открыть
+	 */
+	id: string;
+
+	/**
+	 * Положение Popup относительно кнопки, которая его открывает
+	 *
+	 * - 0 - по коориднатам кнопки
+	 * - 1 - top
+	 * - 2 - right
+	 * - 3 - botton
+	 * - 4 - left
+	 */
+	pos?: '0' | '1' | '2' | '3' | '4';
+
+	/**
+	 * Добавить клювик
+	 */
+	notch?: boolean;
+
+	/**
+	 * Открывать / закрывать при наведении / отведении мыши
+	 */
+	openByHover?: boolean;
+
+	/**
+	 * Способ привязки позиционирования меню
+	 *
+	 * left/right - левый/правый край родителя
+	 *
+	 * fixed - по документу
+	 */
+	posBy?: 'fixed' | 'left' | 'right';
+
+	data?: T;
+}
+
+export interface ListItemProps {
+	/**
+	 * Тип элемента списка
+	 * - button: обычный кликабельный (выбираемый) элемент, поддерживает вставку ссылок через атрибут href
+	 * - regular: произвольное содержимое
+	 * - title: заголовок
+	 * - delimiter: разделитель
+	 */
+	type?: 'button' | 'regular' | 'title' | 'delimiter';
+
+	/**
+	 * Следует ли закрывать меню по клику на элемент типа button и link
+	 */
+	closeByClick?: boolean;
+}
+
+// для storybook
+export const pos = {
+	0: '0',
+	1: '1',
+	2: '2',
+	3: '3',
+	4: '4',
+} as const;
+
+// для storybook
+export const posBy = {
+	fixed: 'fixed',
+	left: 'left',
+	right: 'right',
+} as const;

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ModelRef } from 'vue';
+import type { Props } from '@/components/forms/input/types';
+import TopInput from '@/components/forms/input/input.vue';
+
+withDefaults(defineProps<Props>(), {
+	addCleaner: true,
+});
+
+const model: ModelRef<string> = defineModel({
+	default: '',
+});
+</script>
+
+<template>
+	<TopInput
+		:="$props"
+		modificator="popupWidgetInput"
+		v-model="model"
+	/>
+</template>
+
+<style>
+.top-input-popupWidgetInput {
+	--top-loadbar-color: var(--color-line-2);
+
+	width: 100%;
+}
+
+.top-input_input-popupWidgetInput {
+	border: none;
+	background: var(--color-layer-1);
+}
+
+.top-input_input-popupWidgetInput:hover {
+	background: var(--color-layer-2);
+}
+
+.top-input_input-popupWidgetInput:focus {
+	background: var(--color-layer-1);
+	outline: unset;
+}
+</style>

package/src/components/popup/popup.ts

@@ -0,0 +1,17 @@
+import type { ComponentCustomProps } from 'vue';
+
+import Popup from './popup/popup.vue';
+import PopupOpener from './popup/opener.vue';
+import PopupListItem from './popup/listItem.vue';
+import PopupWidgetInput from './popup/widgetInput.vue';
+import PopupAlert from './alert/alert.vue';
+import PopupConfirm from './confirm/confirm.vue';
+import PopupPrompt from './prompt/prompt.vue';
+
+export const TopPopup = Popup as typeof Popup & ComponentCustomProps;
+export const TopPopupOpener = PopupOpener as typeof PopupOpener & ComponentCustomProps;
+export const TopPopupListItem = PopupListItem as typeof PopupListItem & ComponentCustomProps;
+export const TopPopupWidgetInput = PopupWidgetInput as typeof PopupWidgetInput & ComponentCustomProps;
+export const TopPopupAlert = PopupAlert as typeof PopupAlert & ComponentCustomProps;
+export const TopPopupConfirm = PopupConfirm as typeof PopupConfirm & ComponentCustomProps;
+export const TopPopupPrompt = PopupPrompt as typeof PopupPrompt & ComponentCustomProps;