@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,128 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import type { Style, Props } from './miniCharts';
-
-const props = defineProps<Props>();
-const model = defineModel<Props['modelValue']>();
-
-const elRef = ref<HTMLElement | null>(null);
-
-let pagesResizeObserver: ResizeObserver;
-
-/**
- * Количество страниц
- */
-const countPages = ref(1);
-
-/**
- * Активная страница
- */
-const activePage = ref(1);
-
-/**
- * Установка количества страниц в блоке
- */
-const setCountPages = () => {
-	countPages.value = Math.round(elRef.value!.scrollHeight / elRef.value!.clientHeight);
-};
-
-watch(countPages, () => {
-	if (countPages.value < activePage.value) {
-		activePage.value = 1;
-	}
-});
-
-watch(
-	() => props.countCharts,
-	() => setCountPages(),
-	{ flush: 'post' }
-);
-
-/**
- * Расчет положения для подсказки
- */
-const tooltipStyle = computed(() => {
-	if (!model.value) return {};
-
-	const box = model.value.elCol.getBoundingClientRect();
-
-	const style: Style = {
-		top: box.bottom + window.scrollY + 'px',
-	};
-
-	if (document.documentElement.clientWidth / 2 > box.right) {
-		style.left = box.right + window.scrollX + 10 + 'px';
-	} else {
-		style.left = box.left + window.scrollX - 10 + 'px';
-		style.transform = 'translate(-100%, 0)';
-	}
-
-	return style;
-});
-
-onMounted(() => {
-	/**
-	 * Функционал переключения экранов графиков
-	 */
-	pagesResizeObserver = new ResizeObserver(() => setCountPages());
-	pagesResizeObserver.observe(elRef.value!);
-
-	watch(activePage, () => {
-		const elMiniChart = elRef.value!.children[0];
-		const pageHeight = elMiniChart.clientHeight + parseInt(window.getComputedStyle(elRef.value!).getPropertyValue('row-gap'));
-		const scrollTop = pageHeight * (activePage.value - 1);
-
-		elRef.value!.scrollTo({ top: scrollTop, behavior: 'smooth' });
-	});
-});
-
-onUnmounted(() => {
-	pagesResizeObserver.disconnect();
-});
-</script>
-
-<template>
-	<div
-		class="top-miniCharts"
-		:class="{
-			['top-miniCharts']: true,
-			['scrollable']: countPages > 1,
-			['top-miniCharts_hideChartInMobile']: hideChartInMobile,
-		}"
-		ref="elRef"
-	>
-
-		<slot></slot>
-
-		<div
-			v-if="countPages > 1"
-			class="top-miniCharts_pages"
-		>
-			<span
-				v-for="n in countPages"
-				:class="{['top-active']: n === activePage}"
-				@click="activePage = n"
-			></span>
-		</div>
-
-		<Teleport to="body">
-			<div
-				v-if="model"
-				class="top-miniCharts_tooltip"
-				:style="tooltipStyle"
-			>
-				<span>{{ model.date }}</span>
-				<span>{{ model.value }}</span>
-			</div>
-		</Teleport>
-	</div>
-
-</template>
-
-<style>
-@import "./styles/miniCharts.css";
-</style>
-
-
-
-

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/miniChart';
-
-/**
- * Генерация списка дат всех проверок
- */
-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>