@topvisor/ui 1.1.0 → 1.2.0

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

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

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

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

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

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

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

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