@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,70 +0,0 @@
-.top-notice_item {
-	--top-notice-item-color: var(--color-text-primary);
-
-	box-shadow: var(--top-shadow);
-	border-radius: var(--top-radius-4);
-	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

@@ -1,71 +0,0 @@
-import type { Props as TopButtonProps } from '@/components/forms/button/types';
-
-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

@@ -1,105 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-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 * as ComponentsConst from './types';
-import ReadMe from './stories/README.md?raw';
-
-const TopNotice = Component;
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-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

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

@@ -1,34 +0,0 @@
-Компонент предоставляет интерфейс для вывода сообщений в стиле 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/types.ts

@@ -1 +0,0 @@
-export type Props = {};

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

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

@@ -1,61 +0,0 @@
-import { Markdown } from '@storybook/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>

package/src/components/dialog/dialog/composables/asyncDialogHandle.ts

@@ -1,99 +0,0 @@
-import type { Ref } from 'vue';
-import { ref } from 'vue';
-import { useTopDialog } from './utils';
-import { waitWhile } from '@/core/utils/system';
-import type { AsyncTopDialogComponentLoader, TopDialogComponent } from './types';
-import { TopDialogHandle } from './dialogHandle';
-
-/**
- * Объект для работы с асинхронным диалоговым окном
- *
- * Является прослойкой для доступа к TopDialogHandle
- */
-export class AsyncTopDialogHandle<T extends TopDialogComponent> {
-
-	/**
-	 * Функция, определяющая компонент TopDialogComponent
-	 */
-	readonly resolve: AsyncTopDialogComponentLoader<T>;
-
-	/**
-	 * Реактивная Сссылка на объект worker,
-	 *
-	 * Ссылка не будет указывать на объект, если диалоговое окно еще не загружено
-	 */
-	readonly worker: Ref<TopDialogHandle<T> | null> = ref(null);
-
-	constructor(resolve: AsyncTopDialogComponentLoader<T>) {
-		this.resolve = resolve;
-	}
-
-	/**
-	 * Получить доступ к TopDialogHandle
-	 */
-	async get() {
-		if (this.worker.value) return this.worker.value;
-
-		const result = await this.resolve();
-		const TopDialogComponent = result.default;
-
-		this.worker.value = useTopDialog(TopDialogComponent);
-
-		const worker = this.worker.value;
-
-		await waitWhile(() => !worker.isMounted);
-
-		return worker;
-	}
-
-	/**
-	 * Открыть диалоговое окно
-	 */
-	async open(...args: Parameters<TopDialogHandle<T>['open']>) {
-		const worker = await this.get();
-
-		await worker.open(...args);
-	}
-
-	/**
-	 * Открыть диалоговое окно как ссылку, для хеш-навигации
-	 *
-	 * Только общедоступные диалоговые окна, расположенные в @/dialogs
-	 */
-	async openAsLink(...args: Parameters<TopDialogHandle<T>['open']>) {
-		const worker = await this.get();
-
-		void worker.openAsLink(...args);
-	}
-
-	/**
-	 * Закрыть диалоговое окно
-	 *
-	 * Не меняет состояние компонента диалогового окна
-	 */
-	async close(...args: Parameters<TopDialogHandle<T>['close']>) {
-		const worker = await this.get();
-
-		worker.close(...args);
-	}
-
-	/**
-	 * Размонтировать виджет диалогового окна
-	 */
-	async destroy(...args: Parameters<TopDialogHandle<T>['close']>) {
-		const worker = await this.get();
-
-		worker.destroy(...args);
-	}
-
-	/**
-	 * Устанвоить props
-	 *
-	 * Полностью сбрасывается состояние props
-	 */
-	async setProps(...args: Parameters<TopDialogHandle<T>['setProps']>) {
-		const worker = await this.get();
-
-		await worker.setProps(...args);
-	}
-}