@topvisor/ui 1.0.20-selector2-3 → 1.0.20-selector2-4

package/src/components/component.ts

@@ -1,130 +0,0 @@
-import DOM from '@/core/utils/dom';
-
-/**
- * Базовый компонент для js компонентов, не имеет отношения к Vue
- */
-class Component {
-
-	static componentName = 'Top';
-
-	componentName: string | undefined; // имя класса компонента
-	className: string | undefined; // имя css класса компонента
-	uid: string | undefined; // уникальный id компонента
-	el: HTMLElement | undefined; // элемент, связанный с компонентом
-	options = {}; // параметры компонента
-
-	unmountEls: HTMLElement[] = [];
-	unmountEvents: any[] = [];
-
-	// переопредлять нельзя
-	// если компонент инициирован, необходимо сразу его вернуть и выполнить reInit() вместо mount()
-	// используется init вместо constructor, так как super constructor выполняется до Object.defineProperty() параметров класса
-	init(componentName: string, el: HTMLElement, options: object): Component | void {
-		if (!el) {
-			throw componentName + ': el is undefined';
-		}
-
-		const component = Component.getComponent(el, componentName);
-
-		if (component) {
-			component.reInit(options);
-
-			return component;
-		}
-
-		this.componentName = componentName;
-		this.className = 'top' + componentName[0].toUpperCase() + componentName.substring(1);
-		this.uid = this.componentName + (Math.random() + '').replace('.', '');
-
-		this._setComponent(el);
-		this.el = el;
-		this.el.classList.add(this.className);
-		this.options = Object.assign(this.options, options);
-
-		this.mount();
-	}
-
-	// получить инициированный компонент
-	static getComponent(el: HTMLElement, componentName: string): any {
-		return DOM.storage(el, '#' + componentName);
-	}
-
-	// устанвоить компонент
-	_setComponent(el: HTMLElement) {
-		DOM.storage(el, '#' + this.componentName, this);
-	}
-
-	// функция подключения компонента
-	mount(): void {
-		throw 'Please, add method mount() to component: ' + this.componentName;
-	}
-
-	// функция отключения компонента
-	unmount(): void {
-		DOM.storage(this.el, '#' + this.componentName, null);
-
-		this.unmountEls.forEach((el) => {
-			el.remove();
-		});
-
-		this.unmountEls = [];
-
-		this.unmountEvents.forEach((eventData) => {
-			eventData.el.removeEventListener(eventData.type, eventData.listener, eventData.options);
-		});
-
-		this.unmountEvents = [];
-	}
-
-	// указание новые элементы, которые должны будут удалиться после unmount
-	registerElForUnmount(el: HTMLElement): void {
-		this.unmountEls.push(el);
-	}
-
-	// указание новые события, которые должны будут удалиться после unmount
-	addEventListenerWithUnmount(
-		el: HTMLElement | Document | Window,
-		type: keyof GlobalEventHandlersEventMap,
-		listener: (this: HTMLElement, e: Event) => any,
-		options?: any,
-	): void {
-		el.addEventListener(type, listener, options);
-
-		this.registerEventForUnmount(el, type, listener, options);
-	}
-
-	// указание новые события, которые должны будут удалиться после unmount
-	registerEventForUnmount(
-		el: HTMLElement | Document | Window,
-		type: keyof GlobalEventHandlersEventMap,
-		listener: (this: HTMLElement, e: Event) => any,
-		options?: any,
-	): void {
-		const eventData = {
-			el: el,
-			type: type,
-			listener: listener,
-			options: options,
-		};
-
-		this.unmountEvents.push(eventData);
-	}
-
-	// функция перенастройки уже подключенного компонента
-	reInit(_options: object): void {
-		throw 'Please, add method reInit() to component: ' + this.componentName;
-	}
-
-	// удалить элементы из DOM, но не из памяти
-	static detach(nodes: NodeList | HTMLElement): void {
-		if (nodes instanceof NodeList) {
-			nodes.forEach((node) => node.parentElement?.removeChild(node));
-		} else {
-			const el = nodes;
-			el.parentElement?.removeChild(el);
-		}
-	}
-
-}
-
-export default Component;

package/src/components/core/core.mdx

@@ -1,7 +0,0 @@
-# Компоненты ядра
-
-Компоненты ядра представляют собой компоненты, которые работают через объект `Core` или **плагины**.
-
-Такие компоненты привязываются к приложению на этапе его создания и не могут работать без такой привязки.
-
-См. документацию по объекту [Core](?path=/docs/core-core--docs).

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

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

@@ -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 = {};