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

package/src/components/core/notice/item/item.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, ref, withDefaults } from 'vue';
+
+import Core from '@/core/core/core';
+import { nl2br } from '@/core/utils/string';
+
+import type { Emits, Props } from './types';
+import { prepareText, transitionDuration } from '@/components/core/notice/utils';
+
+const props = withDefaults(defineProps<Props>(), {
+	selectToClose: true,
+});
+
+const emit = defineEmits<Emits>();
+
+// анимация появления
+const showed = ref(false);
+setTimeout(() => showed.value = true, 10);
+
+// анимация закрытия
+const closed = ref(false);
+const closedDirection = ref<'top' | 'right' | 'bottom' | 'left'>('right');
+
+const title = computed(() => {
+	let res = props.title.replace(/ {2}/g, '&nbsp;');
+
+	if (!props.isSafeHTML) res = prepareText(res);
+
+	return res;
+});
+
+const text = computed(() => {
+	let res = nl2br(props.text);
+
+	res = res.replace(/ {2}/g, '&nbsp;');
+
+	if (!props.isSafeHTML) res = prepareText(res);
+
+	return res;
+});
+
+const close = (direction?: typeof closedDirection.value) => {
+	closed.value = true;
+
+	if (direction) {
+		closedDirection.value = direction;
+	}
+
+	setTimeout(() => emit('close'), transitionDuration);
+};
+
+const onClick = (e: MouseEvent) => {
+	if (!props.selectToClose) return;
+
+	const { tagName } = e.target as HTMLElement;
+
+	if (tagName === 'A') close();
+	if (tagName === 'BUTTON') close();
+};
+
+const vSwipe = {
+	mounted: (el: HTMLElement) => {
+		if (!Core.state.isMobile) return;
+
+		if (!Core.$ || !Core.$.ui['draggable']) return;
+
+		let direction: typeof closedDirection.value = 'right';
+
+		let axis = 'x';
+		// if (getOS() === 'iOS') axis = 'y';
+
+		Core.$(el).draggable({
+			revert: false,
+			axis,
+			drag: (_e, ui) => {
+				if (axis == 'x') {
+					direction = ui.position.left > 0 ? 'right' : 'left';
+				} else {
+					direction = ui.position.top > 0 ? 'bottom' : 'top';
+				}
+			},
+			stop: (_e, _ui) => {
+				close(direction);
+			},
+		});
+	},
+};
+
+// const vSwipe = {
+// 	mounted: (el: HTMLElement) => {
+// 		const { distanceX, direction } = usePointerSwipe(el, {
+// 			disableTextSelect: true,
+// 			onSwipe(e: PointerEvent) {
+// 				left.value = -distanceX.value + 'px';
+// 			},
+// 			onSwipeEnd: (_e, direction) => {
+// 				close(direction);
+// 			},
+// 		});
+// 	},
+// };
+</script>
+
+<template>
+	<div
+		class="top-notice_item"
+		:class="{
+			['top-notice_item-' + style]: true,
+			'top-notice_item-hightlight': hightlight,
+			'top-notice_item-showed': showed,
+			'top-notice_item-closed': closed || forceClosed,
+			['top-notice_item-closed_' + closedDirection]: closed,
+		}"
+		@click="onClick"
+		v-swipe
+	>
+		<div class="top-notice_itemTextWrapper">
+			<div v-if="title" class="top-notice_itemTitle" v-html="title"></div>
+			<div v-if="text" class="top-notice_itemText" v-html="text"></div>
+		</div>
+
+		<TopButton
+			v-if="buttonProps"
+			class="top-notice_itemButton"
+			size="s"
+			:="buttonProps"
+			:title="buttonProps.title"
+			v-html="buttonProps.default"
+			@click="close()"
+		/>
+
+		<div v-if="metaText" class="top-notice_itemMetaText" v-html="metaText"></div>
+
+		<div
+			class="top-notice_itemClose"
+			data-top-icon=""
+			:title="$i18n.Common.Close"
+			@click="() => close()"
+		></div>
+	</div>
+</template>
+
+<style>
+@import "style.css";
+</style>

package/src/components/core/notice/item/style.css

@@ -0,0 +1,70 @@
+.top-notice_item {
+	--top-notice-item-color: var(--color-text-primary);
+
+	box-shadow: var(--top-shadow);
+	border-radius: var(--top-radius-3);
+	backdrop-filter: blur(15px);
+	padding: var(--top-padding-4); padding-right: calc(var(--top-padding-4) + 20px + var(--top-padding-1));
+	overflow: hidden;
+	display: flex; flex-direction: column; gap: var(--top-gap-3); align-items: flex-start;
+	position: relative;
+	transform: translateY(-100px);
+	transition: margin 0.3s, transform 0.3s, filter 0.3s, opacity 0.3s;
+}
+
+.top-notice_item:before {
+	content: "";
+	background: var(--color-bg-lightning-1);
+	position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
+	opacity: 0.9;
+}
+
+.top-notice_item-showed { transform: none; }
+
+.top-notice_item-hightlight { filter: brightness(110%); transform: translateX(-20px); }
+
+.top-notice_item-closed { margin-bottom: -55px; transform: translateX(500px); opacity: 0; }
+.top-notice_item-closed_top { transform: translateY(-100px); }
+.top-notice_item-closed_right { transform: translateX(500px); }
+.top-notice_item-closed_bottom { transform: translateY(-200px); }
+.top-notice_item-closed_left { transform: translateX(-500px); }
+
+.top-notice_item-info { --top-notice-item-color: var(--color-text-primary); }
+.top-notice_item-success { --top-notice-item-color: var(--color-text-positive); }
+.top-notice_item-warning { --top-notice-item-color: var(--color-text-warning); }
+.top-notice_item-error { --top-notice-item-color: var(--color-text-negative); }
+.top-notice_item-alt { --top-notice-item-color: var(--color-text-info); }
+
+.top-notice_itemTextWrapper { width: 100%; display: flex; gap: var(--top-gap-1); flex-direction: column; }
+
+.top-notice_itemTitle { color: var(--top-notice-item-color); font-weight: 600; }
+.top-notice_itemTitle a { color: inherit; text-decoration: underline; }
+.top-notice_itemTitle a:hover { text-decoration: none; }
+
+.top-notice_itemText {
+	max-height: 80vh;
+	overflow: auto;
+}
+
+.top-notice_itemButton { }
+
+.top-notice_itemMetaText { border-top: 1px dashed var(--color-line-3); width: 100%; padding: var(--top-padding-2) 0 0 0; }
+
+.top-notice_itemClose {
+	--top-icon-color: var(--color-text-3);
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+
+	cursor: pointer;
+	position: absolute; top: var(--top-padding-4); right: var(--top-padding-4);
+}
+
+.top-notice_itemClose:hover {
+	--top-icon-color: var(--color-text-2);
+}
+
+@media only screen and (max-width: 600px) {
+	.top-notice { width: auto; }
+
+	.top-notice_item-hightlight { transform: translateY(-10px); }
+}

package/src/components/core/notice/item/types.ts

@@ -0,0 +1,74 @@
+import type { Props as TopButtonProps } from '@/components/forms/button/types';
+import type { BaseHTMLAttributes } from 'vue';
+
+export type Style = 'info' | 'success' | 'warning' | 'error' | 'alt';
+
+export type Props = {
+	/**
+	 * Уникальное id сообщения
+	 *
+	 * Для дедупликации вывода одного и того же сообщения
+	 *
+	 * Генерируется автоматически по входных данным
+	 */
+	id: string,
+
+	/**
+	 * Заголовок сообщения
+	 *
+	 * Можно передать html
+	 */
+	title: string,
+
+	/**
+	 * Текст сообщения
+	 *
+	 * Можно передать html
+	 */
+	text: string,
+
+	/**
+	 * Стиль отображения сообщения
+	 */
+	style: Style,
+
+	/**
+	 * Дополнительная информация, выводимая под сообщением
+	 *
+	 * Например, информация для админов
+	 */
+	metaText?: string,
+
+	/**
+	 * Произвольные props для вывода кнопки
+	 */
+	buttonProps?: TopButtonProps & { default: string },
+
+	isSafeHTML?: boolean
+
+	/**
+	 * Установить стиль выделения сообщения
+	 *
+	 * Используется для анимации появления
+	 */
+	hightlight?: boolean
+
+	/**
+	 * Закрывать сообщение при клике по его кнопке или ссылке
+	 */
+	selectToClose?: boolean,
+
+	/**
+	 * Установить стиль закрытия сообщения
+	 *
+	 * Для удаления сообщения снаружи
+	 */
+	forceClosed?: boolean
+};
+
+export type Emits = {
+	/**
+	 * Сообщение было закрыто
+	 */
+	close: []
+}

package/src/components/core/notice/notice.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref } from 'vue';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import TopInput from '@/components/forms/input/input.vue';
+import TopTextarea from '@/components/forms/textarea/textarea.vue';
+import TopSelect from '@/components/forms/select/select.vue';
+import TopButton from '@/components/forms/button/button.vue';
+
+import Component from './notice.vue';
+import type { Props as TopNoticeItemProps } from './item/types';
+import ReadMe from './stories/README.md?raw';
+
+const TopNotice = Component;
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {},
+	render: () => ({
+		components: {
+			TopNotice,
+			TopInput,
+			TopTextarea,
+			TopSelect,
+			TopButton,
+		},
+		setup() {
+			const title = ref('Заголовок сообщения');
+			const text = ref(`Текст сообщения\nМожно использовать <b>html</b>\n<a href="." target="_blank">Storybook UI</a>`);
+			const style = ref('info');
+
+			const options = new Map();
+			options.set('info', 'info');
+			options.set('success', 'success');
+			options.set('warning', 'warning');
+			options.set('error', 'error');
+			options.set('alt', 'alt');
+
+			const nl = '\n';
+
+			const buttonProps: TopNoticeItemProps['buttonProps'] & { onclick: string } = {
+				onclick: 'location.reload()',
+				default: 'Перезагрузить страинцу',
+			};
+
+			return {
+				title,
+				text,
+				style,
+				options,
+				nl,
+				buttonProps,
+			};
+		},
+		template: `
+			<!-- Подключить один раз в приложение -->
+			<TopNotice v-if="$core.flags.needLoadNotice"></TopNotice>
+
+			<TopInput v-model="title"></TopInput>
+
+			<br><br>
+
+			<TopTextarea v-model="text"></TopTextarea>
+
+			<br><br>
+
+			<TopSelect
+				v-model="style"
+				:options
+			></TopSelect>
+
+			<br><br>
+
+			<TopButton @click="$core.notice(title + nl + text, style)">
+				Показать сообщение
+			</TopButton>
+
+			<br><br>
+
+			<TopButton @click="$core.notice(title + nl + text, style, { buttonProps })">
+				Показать сообщение с кнопкой
+			</TopButton>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/core/notice/notice.vue

@@ -0,0 +1,69 @@
+<!-- performance all in one file component, для Core.notice() -->
+<script lang="ts">
+export { show } from './utils';
+</script>
+
+<script setup lang="ts">
+import type { Item } from './utils';
+import { itemById } from './utils';
+
+import type { Props } from './types';
+import TopNoticeItem from './item/item.vue';
+
+defineProps<Props>();
+
+const onCloseItem = (item: Item) => {
+	item.onClose?.();
+
+	itemById.delete(item.id);
+};
+</script>
+
+<template>
+	<teleport to="body">
+		<div class="top-notice">
+			<TopNoticeItem
+				v-for="[_index, item] in itemById"
+				:key="item.id"
+				:id="item.id"
+				:title="item.title"
+				:text="item.text"
+				:style="item.style"
+				:buttonProps="item.buttonProps"
+				:metaText="item.metaText"
+				:isSafeHTML="item.isSafeHTML"
+				:forceClosed="item.forceClosed"
+				:hightlight="item.hightlight"
+				@close="onCloseItem(item)"
+			/>
+		</div>
+	</teleport>
+</template>
+
+<style>
+:root {
+	--top-notice-top: var(--top-padding-4);
+	--top-notice-right: var(--top-padding-4);
+}
+
+.top-notice {
+	width: 400px;
+	font-size: 14px;
+	position: fixed; top: var(--top-notice-top); right: var(--top-notice-right);
+	z-index: 1000010;
+	display: flex; flex-direction: column-reverse; gap: var(--top-gap-2);
+}
+
+.top-notice ul {
+	padding: 0 0 0 var(--top-padding-5);
+}
+
+@media only screen and (max-width: 600px) {
+	:root {
+		--top-notice-top: var(--top-padding-4);
+		--top-notice-right: var(--top-padding-4);
+	}
+
+	.top-notice { width: auto; left: var(--top-notice-right); }
+}
+</style>

package/src/components/core/notice/stories/README.md

@@ -0,0 +1,34 @@
+Компонент предоставляет интерфейс для вывода сообщений в стиле push уведомлений.
+
+## Подключение
+
+Подключите компонент в корне приложения: `<top-notice v-if="$core.flags.needLoadNotice"></top-notice>`
+
+Подключение через флаг `needLoadNotice` позволяет реализовть ленивую загрузку компонента.
+
+Вызовите функцию **Core.notice()**:
+
+- в js: `Core.notice()`
+- в шаблоне компонента: `$core.notice()`
+
+## CSS переменные
+
+Переменные задаются на уровне `document.body`.
+
+- `--top-notice-top`: отступ сверху
+- `--top-notice-right`: отступ справа
+
+## Контрольные точки
+
+- На размере меньше 600: отображается во всю ширину, отступы от краев экрана становятся меньше.
+- На размере меньше 900: добавляется смахивание **свайпом**.
+
+## jQuery
+
+Для **свайпа** в мобильной версии требуется **jQuery**. При отсутсвии jQuery свайп подключаться не будет.
+
+## i18n
+
+Требует подключение словарей:
+
+* i18n/Common

package/src/components/core/notice/utils.ts

@@ -0,0 +1,115 @@
+import { reactive } from 'vue';
+import type { Props as ItemProps, Props, Style } from '@/components/core/notice/item/types';
+import Core from '@/core/core/core';
+import { genIntHash } from '@/core/utils/string';
+
+export const transitionDuration = 300;
+
+export type Item = Props & { onClose?: Function };
+
+export const itemById = reactive(new Map<string, Item>());
+
+const genItemId = (text: ItemProps['text'], style: ItemProps['style'], options?: Options) => {
+	return 'top-notice_' + genIntHash(text + style + JSON.stringify(options));
+};
+
+export type Options = {
+	title?: ItemProps['title'],
+	metaText?: ItemProps['metaText'],
+	buttonProps?: ItemProps['buttonProps'],
+	isSafeHTML?: ItemProps['isSafeHTML'],
+	selectToClose?: ItemProps['selectToClose'],
+	onClose?: Function
+}
+
+/**
+ * Показать сообщением в стиле push уведомления
+ *
+ * title будет получен из первой строки text
+ *
+ * Если в options указан title, он будет взят оттуда
+ */
+export const show = (text: string, style: Style = 'info', options?: Options) => {
+	let title = '';
+
+	text = String(text);
+
+	const id = genItemId(text, style, options);
+
+	if (options?.title) {
+		title = options.title;
+	} else {
+		const chunks = text.split('\n');
+
+		if (chunks.length) {
+			title = String(chunks.shift());
+			text = chunks.join('\n');
+		}
+	}
+
+	const itemExists = itemById.get(id);
+	if (itemExists) {
+		hightlight(itemExists);
+
+		return;
+	}
+
+	const item: Item = {
+		id,
+		title,
+		text,
+		style,
+		buttonProps: options?.buttonProps,
+		metaText: options?.metaText,
+		isSafeHTML: options?.isSafeHTML,
+		selectToClose: options?.selectToClose,
+		onClose: options?.onClose,
+	};
+
+	itemById.set(item.id, item);
+
+	if (itemById.size > 5) {
+		const [_firstId, firstItem] = [...itemById].at(0) || [];
+		if (firstItem) close(firstItem);
+	}
+
+	/**
+	 * Автозакрытие ошибок форм
+	 *
+	 * Добавляет
+	 */
+	if (Core.state.isMobile) {
+		$('input').one('click', () => close(item));
+	}
+};
+
+const hightlight = (item: Item) => {
+	item.hightlight = true;
+
+	setTimeout(() => item.hightlight = false, transitionDuration);
+};
+
+const close = (item: Item) => {
+	item.forceClosed = true;
+
+	setTimeout(() => {
+		item.onClose?.();
+
+		itemById.delete(item.id);
+	}, transitionDuration);
+};
+
+/**
+ * Убрать подозрительный html код
+ */
+export const prepareText = (text: string) => {
+	const textNoSafety = 'hacking was detected';
+
+	text = text.replace(/<script/g, textNoSafety);
+	text = text.replace(/<img/g, textNoSafety);
+	text = text.replace(/<iframe/g, textNoSafety);
+	text = text.replace(/javascript:/g, textNoSafety);
+	text = text.replace(/<[^>]+ (@|on)\w+=[^>]+>?/g, textNoSafety);
+
+	return text;
+};

package/src/components/dialog/dialog/Dialog (code).mdx

@@ -0,0 +1,61 @@
+import { Markdown } from '@storybook/addon-docs/blocks';
+import Dialog from './stories/dialog_example/dialog_example.vue?raw';
+import DefaultPage from './stories/dialog_example/pages/default.vue?raw';
+import HeaderButtonsPage from './stories/dialog_example/pages/headerButtons.vue?raw';
+import PageUtils from './stories/dialog_example/pages/utils.ts?raw';
+import Autoload from './stories/autoload.ts?raw';
+
+<h2>DialogExample</h2>
+
+Диалоговое окно: `dialog_example/dialog_example.vue`
+
+Инициируется через `useTopDialog()` или  `useAsyncTopDialog()`.
+
+Демонстрирует вывод страниц разными способами:
+
+- через `TopDialogPage` в том же компоненте
+- через `TopDialogPageComponent`
+- через `TopDialogPageComponent` асинхронно
+- через `TopDialogPageComponent` с отключением кеширования
+
+<Markdown>{'```html\n' + Dialog + '\n```'}</Markdown>
+
+<h2>DefaultPage</h2>
+
+Страница диалогового окна: `dialog_example/pages/default.vue`
+
+<Markdown>{'```html\n' + DefaultPage + '\n```'}</Markdown>
+
+<h2>AsyncPage, WithoutCachePage</h2>
+
+`AsyncPage` реализуется стандартным способом через `defineAsyncComponent()`
+
+`WithoutCachePage` реализуется стандартным способом c добавлением props `keepAlive`
+
+Код аналогичен `DefaultPage`.
+
+<h2>HeaderButtonsPage</h2>
+
+Страница диалогового окна: `dialog_example/pages/headerButtons.vue`
+
+Демонтстрирует вывод кнопок в шапке диалогового окна.
+
+Демонтстрирует вывод ссылок на диалоговок окно через атрибут `data-to-view`.
+
+<Markdown>{'```html\n' + HeaderButtonsPage + '\n```'}</Markdown>
+
+<h2>PageUtils</h2>
+
+Файл с утилитами страниц диалогового окна: `dialog_example/pages/utils.ts`
+
+Демонстрирует работу с хуками страницы диалогового окна
+
+<Markdown>{'```js\n' + PageUtils + '\n```'}</Markdown>
+
+<h2>Autoload</h2>
+
+Файл с функцией автозагурзки диалогового окна: `autoload.ts`
+
+Демонстрирует реализацию автозагрузки диалогового окна по его id
+
+<Markdown>{'```js\n' + Autoload + '\n```'}</Markdown>