@topvisor/ui 1.0.42-dev.2 → 1.0.42-policy.0

package/src/components/charts/miniCharts/stories/README.md

@@ -1,18 +0,0 @@
-Компонент для постороения миниграфиков.
-
-Используется для обертки над несколькими миниграфиками TopMiniChart.
-
-## Описание функционала
-
-* Миниграфики (TopMiniChart) вставляются через **slot.default**.
-* Компонент (TopMiniCharts) растягивается на всю высоту внешнего блока. Максимальная ширина 1650px.
-* **props.hideChartInMobile** \- для скрытия графиков при ширине экрана < 900px необходимо указать этот параметр для обертки (TopMiniCharts) и для
-  всех миниграфиков (TopMiniChart) внутри обертки.
-* **modelValue** \- для вывода данных в tooltip при наведении курсора на колонку необходимо указать v-model для обертки (TopMiniCharts) и для всех
-  миниграфиков (TopMiniChart) внутри обертки.
-* **props.countCharts** \- кол-во миниграфиков (TopMiniCharts), обязательный параметр
-
-
-
-
-

package/src/components/charts/miniCharts/stories/dummy.ts

@@ -1,70 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { dateToString } from '@/core/utils/date';
-import type { Props as MiniChartProps } from '@/components/charts/miniChart/types';
-
-/**
- * Генерация списка дат всех проверок
- */
-const genDates = (count = 60) => {
-	return faker.date
-		.betweens({ from: '2020-01-01', to: '2024-01-01', count })
-		.map(date => dateToString(date, false, 0));
-};
-
-/**
- * Генерация списка значений видимости
- */
-const genValues = (count: number, fractionDigits = 0) => {
-	const values: number[] = [];
-
-	for (let i = 0; i < count; i++) {
-		values.push(faker.number.float({ min: 0, max: 100, fractionDigits }));
-	}
-
-	return values;
-};
-
-const dates = genDates();
-const activeDates = dates.slice(-10);
-const keysForDyn = {
-	start: dates.findIndex((value, index) => activeDates.includes(dates[index])),
-	end: dates.length - 1,
-};
-
-const visibilities = genValues(dates.length, 2);
-const avgs = genValues(dates.length, 2);
-const medians = genValues(dates.length);
-
-const generalProps = {
-	dates,
-	activeDates,
-	keysForDyn,
-};
-
-/**
- * Список объектов props для мини графиков
- */
-const propsForMiniCharts: MiniChartProps[] = [
-	{
-		...generalProps,
-		'color': 'pink',
-		'title': 'Видимость',
-		'values': visibilities,
-		'valueSuffix': '%',
-	},
-	{
-		...generalProps,
-		'title': 'Средняя',
-		'isInvert': true,
-		'values': avgs,
-	},
-	{
-		...generalProps,
-		'color': 'orange',
-		'title': 'Медианная',
-		'isInvert': true,
-		'values': medians,
-	},
-];
-
-export { propsForMiniCharts };

package/src/components/charts/miniCharts/stories/overview.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import TopMiniChart from '@/components/charts/miniChart/miniChart.vue';
-import TopMiniCharts from '../miniCharts.vue';
-import { propsForMiniCharts } from './dummy';
-import type { Props } from '../miniCharts';
-
-defineProps<Props>();
-
-const item1 = ref(null);
-const item2 = ref(null);
-const item3 = ref(null);
-</script>
-
-<template>
-	<div>
-		<h2>Ширина внешнего блока 200px:</h2>
-
-		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
-		<div style="width: 200px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item1"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item1"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
-		<div style="width: 200px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item1"
-				:hideChartInMobile="true"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item1"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-					:hideChartInMobile="true"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h2>Ширина внешнего блока 300px: </h2>
-
-		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
-		<div style="width: 300px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item2"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item2"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
-		<div style="width: 300px; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item2"
-				:hideChartInMobile="true"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item2"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-					:hideChartInMobile="true"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h2>Ширина внешнего блока 100%: </h2>
-
-		<h3>Выводим миниграфики на адаптиве (props.hideChartInMobile = false)</h3>
-		<div style="width: 100%; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item3"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item3"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-				/>
-			</TopMiniCharts>
-		</div>
-
-		<h3>Скрываем миниграфики на адаптиве (props.hideChartInMobile = true)</h3>
-		<div style="width: 100%; height: 88px">
-			<TopMiniCharts
-				:="$props"
-				v-model="item3"
-				:hideChartInMobile="true"
-			>
-				<TopMiniChart
-					v-for="props in propsForMiniCharts"
-					:="props"
-					v-model="item3"
-					:activeDates="props.activeDates"
-					:dates="props.dates"
-					:keysForDyn="props.keysForDyn"
-					:values="props.values"
-					:hideChartInMobile="true"
-				/>
-			</TopMiniCharts>
-		</div>
-
-	</div>
-</template>
-

package/src/components/charts/miniCharts/styles/miniCharts.css

@@ -1,32 +0,0 @@
-.top-miniCharts { position: relative; max-width: 1650px; height: 100%; overflow: hidden; row-gap: var(--top-gap-2); display: flex; flex-wrap: wrap; flex-grow: 1; }
-
-.top-miniCharts_pages {
-	height: 100%; margin-left: -6px;
-	position: sticky; top: 0; left: calc(100% - 6px); order: -1;
-	display: flex; flex-direction: column; justify-content: center;
-}
-.top-miniCharts_pages > span { cursor: pointer; border-radius: 50%; background: var(--color-layer-primary-2); width: 6px; height: 6px; margin: 8px 0 0; }
-.top-miniCharts_pages > span:first-child { margin-top: 0; }
-.top-miniCharts_pages > span.top-active,
-.top-miniCharts_pages > span:hover { background: var(--color-text-primary); }
-
-.top-miniCharts_tooltip {
-	cursor: default;
-	box-shadow: var(--top-shadow-b);
-	border-radius: var(--top-radius-2); background: var(--content-background-color); padding: var(--top-padding-2);
-	font-size: 12px; white-space: nowrap;
-	position: absolute; top: 0; left: 0; overflow: hidden; z-index: 200000;
-	display: flex; gap: 0 var(--top-gap-2); align-items: center;
-	transition: 0.2s;
-	pointer-events: none;
-}
-.top-miniCharts_tooltip > span:first-child { color: var(--color-text-3); }
-
-@media only screen and (max-width: 900px) {
-	.top-miniCharts_hideChartInMobile {
-		border: none; background: none; width: 100%; padding: 0;
-		gap: var(--top-gap-2); flex-grow: 1; flex-wrap: nowrap; overflow: hidden;
-	}
-
-	.top-miniCharts_hideChartInMobile > .top-miniCharts_pages { display: none; }
-}

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-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

@@ -1,74 +0,0 @@
-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: []
-}