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

package/build/plugin/autoloadCSS.ts

@@ -1,155 +0,0 @@
-import path from 'path';
-import color from 'picocolors';
-import MagicString from 'magic-string';
-import type { BuildOptions, LibraryOptions, Plugin, ResolvedConfig } from 'vite';
-import type { RenderedChunk } from 'rollup';
-
-export interface LibOptions extends LibraryOptions {
-	build?: BuildOptions;
-	rollupOptions?: BuildOptions['rollupOptions'];
-}
-
-// ассоциативный список ссылок на css по имени модуля
-const cssFileNamesByModuleName = new Map();
-
-/**
- * Генерация js кода, который должен инициировать загрузку css при исполнении в js модуле
- * @param fileName - относительный путь к файлу стилей от js модуля
- */
-const addImportCSSCode = (ms: MagicString, moduleName: string, fileNames: Array<string>): MagicString => {
-	if (cssFileNamesByModuleName.has(moduleName)) {
-		throw new Error('Имя модуля уже испоьзуется, неохбодимо изменить алогортим сохранения css ссылок');
-	}
-
-	/**
-	 * forms является базовой бибилиотекой UI
-	 *
-	 * Стили forms не должны блокировать загрузку js
-	 *
-	 * Стили form должны грузиться в html страницы
-	 */
-	fileNames = fileNames.filter(fileName => fileName !== '../assets/forms.css');
-
-	cssFileNamesByModuleName.set(moduleName, fileNames);
-
-	console.log(`autoloadCSS: ${color.yellow(moduleName)} ${color.cyan(fileNames.join())}`);
-
-	if (!fileNames.length) {
-		console.log(`- no exists required css`);
-
-		return ms;
-	}
-
-	const importCSSCode = `
-		import { Core as _autoloadCSSCore } from '../core/app.js';
-		const fileNames = ['${fileNames.join(`', '`)}'].map(fileName => import.meta.resolve(fileName));
-		_autoloadCSSCore.insertCSSLinkToPage(fileNames, true);
-	`;
-
-	ms.prepend(importCSSCode + `\n`);
-
-	return ms;
-};
-
-/**
- * Генерация js кода, который должен инициировать загрузку css при исполнении в js модуле
- *
- * Для amd модуля
- */
-export const addImportCSSCodeAMD = (ms: MagicString, moduleName: string): MagicString => {
-	if (!cssFileNamesByModuleName.has(moduleName)) {
-		return ms;
-	}
-
-	// работа без define с зависимостями не поддерживается
-	if (!ms.toString().match(/define\(\[/)) {
-		return ms;
-	}
-
-	const fileNames = cssFileNamesByModuleName.get(moduleName);
-
-	if (!fileNames.length) {
-		return ms;
-	}
-
-	const dependenciesString = '\'../require/css.amd!' + fileNames.join('\', \'../require/css.amd!') + '\'';
-
-	// полагаемся, что "]" это то, что нам нужно в define()
-	ms.replace(/\]/, ', ' + dependenciesString + ']');
-
-	return ms;
-};
-
-/**
- * Загрузить css через Page.addCss()
- *
- * Для ES
- */
-export default (libOptions?: LibOptions): Plugin => {
-	let skipLoad = false;
-
-	return {
-		name: 'vite:tv-autoload-css',
-		apply: 'build',
-		enforce: 'post',
-
-		load(id: string) {
-			cssFileNamesByModuleName.clear();
-		},
-
-		configResolved({ build }: ResolvedConfig) {
-			const messages: string[] = [];
-
-			if (!build.lib) {
-				skipLoad = true;
-				messages.push('Current build is not in library mode, skip code injection.');
-			}
-
-			if (build.lib && !build.cssCodeSplit) {
-				messages.push(
-					'`config.build.cssCodeSplit` is set to `true` by the plugin internally in library mode, ' +
-					'but it seems to be `false` now. This may cause style code injection to fail, ' +
-					'please check the configuration to prevent this option from being modified.',
-				);
-			}
-
-			if (build.ssr && !build.ssrEmitAssets) {
-				messages.push(
-					'`config.build.ssrEmitAssets` is set to `true` by the plugin internally in library mode, ' +
-					'but it seems to be `false` now. This may cause style code injection to fail on SSR, ' +
-					'please check the configuration to prevent this option from being modified.',
-				);
-			}
-
-			messages.forEach(msg => console.log(`\n${color.cyan('[vite:lib-inject-css]:')} ${color.yellow(msg)}\n`));
-		},
-
-		renderChunk(code: string, chunk: RenderedChunk) {
-			if (skipLoad || !chunk.viteMetadata) {
-				return;
-			}
-
-			const { importedCss } = chunk.viteMetadata;
-
-			if (!importedCss.size) {
-				return;
-			}
-
-			const ms = new MagicString(code);
-			const cssFilePathes: string[] = [];
-			for (const cssFileName of importedCss) {
-				let cssFilePath = path.relative(path.dirname(chunk.fileName), cssFileName).replaceAll(/[\\/]+/g, '/'); // Replace all backslash or multiple slashes, fixed #9
-				cssFilePath = cssFilePath.startsWith('.') ? cssFilePath : `./${cssFilePath}`;
-
-				cssFilePathes.push(cssFilePath);
-			}
-
-			addImportCSSCode(ms, chunk.name, cssFilePathes);
-
-			return {
-				code: ms.toString(),
-				map: ms.generateMap(),
-			};
-		},
-	};
-}

package/build/rollup.config.ts

@@ -1,37 +0,0 @@
-import type { PreRenderedAsset, RollupOptions } from 'rollup';
-
-export default {
-	external: [
-		'vue',
-		'require',
-	],
-	output: {
-		globals: {
-			vue: 'Vue',
-			pinia: 'Pinia',
-		},
-
-		exports: 'named',
-
-		manualChunks: {
-			/**
-			 * forms это базовая бибилиотека, которая должна грузиться максмально быстро
-			 *
-			 * Объединить все js и css forms в один файл, необходимо для предзагрузки основных стилей UI на страницу
-			 *
-			 * При такой настройке в forms.js будут добавлены все ее зависимости
-			 */
-			forms: [
-				'./src/components/forms/forms.ts',
-			],
-		},
-		chunkFileNames: '.chunks/[name]-[hash].[format].js',
-		assetFileNames: (_chunkInfo: PreRenderedAsset) => {
-			if (_chunkInfo.originalFileName?.startsWith('src/resources/styles/themes/')) {
-				return `assets/themes/[name][extname]`;
-			}
-
-			return `assets/[name][extname]`;
-		},
-	},
-} satisfies RollupOptions;

package/public/README.md

@@ -1,82 +0,0 @@
-# UI kit Topvisor Vue
-
-## Vue компоненты
-
-Компоненты поставляются в двух форматах:
-
-- amd (requirejs)
-- es
-
-Компоненты делятся на разные библиотеки и доступны через импорт этих библиотек.
-
-Каждая библиотека находится в отдельной папке, соответствующей имени библиотеки.
-
-Все стили модулей находятся в папке /assets/ в файлах соответствующих имени библиотеки.
-В этой же папке располагаются стили для асинхронно загружаемых компонентов.
-Все стили грузятся автоматически вместе с загрузкой компонента.
-
-Документация и описание всех компонентов: https://ui.topvisor.com/
-
-## Общие стили UI
-
-- /assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
-- /assets/themes/* - стили тем оформления
-
-## Подключение стилей
-
-Стили компонентов подгружаются автоматически.
-
-Стили UI core.css необходимо подгрузить на страницу вручную.
-
-```js
-import '@topvisor/ui/assets/core.css';
-```
-
-```html
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/core.css" rel="stylesheet">
-```
-
-## Подключение стилей темы
-
-Стили темы необходимо подгрузить на страницу вручную.
-
-Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.
-
-```js
-import '@topvisor/ui/assets/themes/light.css';
-```
-
-```html
-
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">
-```
-
-## Внешние зависимсоти
-
-Стили icomoon добавлены в пакет и их необходимо подгрузить на страницу вручную.
-
-```js
-import '@topvisor/ui/icomoon/style.css';
-```
-
-```html
-
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">
-```
-
-## Подключение компонентов
-
-Пример подключения библиотеки Forms и компонента Button:
-
-```javascript
-require(['@topvisor/ui/forms/forms.amd'], ({ Button }) => {
-	console.log(Button);
-});
-
-require(['@topvisor/ui/forms/forms.amd'], Forms => {
-	const { Button } = Forms;
-
-	console.log(Forms);
-	console.log(Button);
-});
-```

package/src/components/charts/charts.ts

@@ -1,8 +0,0 @@
-import type { ComponentCustomProps } from 'vue';
-
-import MiniChart from './miniChart/miniChart.vue';
-import MiniCharts from './miniCharts/miniCharts.vue';
-
-export const TopMiniChart = MiniChart as typeof MiniChart & ComponentCustomProps;
-
-export const TopMiniCharts = MiniCharts as typeof MiniCharts & ComponentCustomProps;

package/src/components/charts/miniChart/miniChart.stories.ts

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { ref, watch } from 'vue';
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './miniChart.vue';
-import * as ComponentsConst from './miniChart';
-import ReadMe from './stories/README.md?raw';
-import { dates, activeDates, visibilities } from './stories/dummy';
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-	},
-	argTypes,
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		title: 'Видимость',
-		keysForDyn: {
-			start: 50,
-			end: 59,
-		},
-		valueSuffix: '%',
-		values: visibilities,
-		activeDates,
-		dates,
-	},
-	render: (args) => ({
-		components: {
-			TopMiniChart: Component,
-		},
-		setup() {
-			const item = ref(null);
-
-			watch(item, () => {
-				console.log(item.value);
-			});
-
-			return { args, item };
-		},
-		template: `
-			<div style="width: 400px; height: 100px; max-width: 100%;">
-				<TopMiniChart
-					:="args"
-					v-model="item"
-					:activeDates="args.activeDates"
-					:dates="args.dates"
-					:values="args.values"
-					:keysForDyn="args.keysForDyn"
-				/>
-			</div>
-		`,
-	}),
-} satisfies Story;
-
-export default meta;

package/src/components/charts/miniChart/miniChart.ts

@@ -1,110 +0,0 @@
-export interface Props {
-	/**
-	 * Имя графика
-	 */
-	title?: string;
-
-	/**
-	 * Иконка графика
-	 */
-	gIcon?: string;
-
-	/**
-	 * Цвет графика и иконки
-	 */
-	color?: Color;
-
-	/**
-	 * Список дат всех проверок (пример даты: 2020-01-01)
-	 */
-	dates: string[];
-
-	/**
-	 * Список значений параметра для каждой проверки (порядок соответсвует списку дат)
-	 */
-	values: number[];
-
-	/**
-	 * Список активных дат (пример даты: 2020-01-01)
-	 */
-	activeDates: string[];
-
-	/**
-	 * Индексы для получения значений из props.values.
-	 * Полученные значения используются для рассчета динамики изменения.
-	 * Если указан props.dynamic, то props.keysForDyn не используется в расчетах динамики.
-	 *
-	 * - start - индекс для получения значения в начале периода
-	 * - end - индекс для полученя значения в конце периода
-	 */
-	keysForDyn: {
-		start: number;
-		end: number;
-	};
-
-	/**
-	 * Динамика
-	 */
-	dynamic?: number;
-
-	/**
-	 * Необходимо ли инвертировать значения ячеек графика
-	 */
-	isInvert?: boolean;
-
-	/**
-	 * Кол-во столбцов всего
-	 */
-	numberCols?: number;
-
-	/**
-	 * Html для футера
-	 */
-	additionalHTML?: string;
-
-	/**
-	 * Выбранная проверка (колонка)
-	 */
-	modelValue?: Item | null;
-
-	/**
-	 * Суффикс для значения
-	 */
-	valueSuffix?: string;
-
-	/**
-	 * Скрыть график на адаптиве
-	 *
-	 * - true - скрыть
-	 * - false - показать
-	 */
-	hideChartInMobile?: boolean;
-}
-
-/**
- * Интерфейс проверки (используется для передачи данных о выбранной проверке через v-model)
- */
-export interface Item {
-	/**
-	 * Эл-т колонки выбранной проверки
-	 */
-	elCol: HTMLElement;
-
-	/**
-	 * Дата/время проверки
-	 */
-	date?: string;
-
-	/**
-	 * Значение параметра проверки
-	 */
-	value?: string;
-}
-
-export const colors = {
-	blue: 'blue',
-	orange: 'orange',
-	pink: 'pink',
-} as const;
-
-export type Color = typeof colors[keyof typeof colors];

package/src/components/charts/miniChart/miniChart.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './miniChart';
-import { computed } from 'vue';
-import { dateFormat } from '@/core/utils/date';
-import { percentOfNumber } from '@/core/utils/number';
-import { defaultNumberCols, minHeight } from './utils/consts';
-
-const props = withDefaults(defineProps<Props>(), {
-	color: 'blue',
-	numberCols: defaultNumberCols,
-});
-const model = defineModel<Props['modelValue']>();
-
-/**
- * Расчет высоты колонки (в процентах)
- */
-const genColHeight = (value: number): number => {
-	let maximumValue = maxValue.value;
-
-	// для графиков средней и медианной делаем максимум 1
-	if (props.isInvert) {
-		value -= 1;
-		maximumValue -= 1;
-	}
-
-	let height = maximumValue > 0 ? Math.round((value / maximumValue) * (100 - minHeight)) : 0;
-	if (props.isInvert) return 100 - height;
-
-	return height + minHeight;
-};
-
-const isActiveDate = (date: string) => props.activeDates.includes(date);
-
-const maxValue = computed(() => Math.max(...props.values));
-
-/**
- * Из-за стиля .top-miniChart_chartGrid - direction: rtl
- */
-const reversedDates = computed(() => props.dates.slice().reverse());
-
-/**
- * Кол-во пустых колонок
- */
-const numOfEmptyCols = computed(() => {
-	if (!props.dates.length) return 0;
-
-	return props.numberCols - props.dates.length;
-});
-
-const resetModel = () => {
-	model.value = null;
-};
-
-const setModel = (e: Event, date: string, value: number | null) => {
-	if (!(e.target instanceof HTMLElement)) return;
-
-	model.value = {
-		elCol: e.target,
-		date: dateFormat(date),
-		value: value === null ? '--' : value + (props.valueSuffix ?? ''),
-	};
-};
-
-/**
- * Возвращает численный показатель динамики графика
- */
-const localDynamic = computed(() => {
-	let dynamic = props.dynamic;
-
-	if (typeof dynamic === 'undefined') {
-		const prevPeriodValue = props.values[props.keysForDyn.start];
-		const currentValue = props.values[props.keysForDyn.end];
-		dynamic = currentValue - prevPeriodValue;
-	}
-
-	const sign = dynamic < 0 ? -1 : 1;
-
-	return sign * (percentOfNumber(Math.abs(dynamic)) as number);
-});
-
-const dynamicDirection = computed(() => {
-	let direction: 'up' | 'stay' | 'down' = 'stay';
-
-	if (!props.isInvert) {
-		if (localDynamic.value > 0) direction = 'up';
-		if (localDynamic.value < 0) direction = 'down';
-	} else {
-		if (localDynamic.value > 0) direction = 'down';
-		if (localDynamic.value < 0) direction = 'up';
-	}
-
-	return direction;
-});
-
-</script>
-
-<template>
-	<div
-		:class="{
-			['top-miniChart']: true,
-			['top-miniChart_hideChartInMobile']: hideChartInMobile,
-			[`top-color_${color}`]: true
-		}"
-	>
-		<div
-			class="top-miniChart_title top-ellipsis"
-			:data-top-icon="gIcon"
-		>
-			{{ title }}
-		</div>
-
-		<div class="top-miniChart_chart">
-			<div
-				class="top-miniChart_chartGrid"
-				@mouseleave="resetModel()"
-			>
-				<div
-					v-for="(date, i) in reversedDates"
-					:class="{
-						['top-miniChart_chartGridCol']: true,
-						['top-active']: isActiveDate(date)
-					}"
-					@mouseenter="setModel($event, date, values[values.length - i - 1])"
-				>
-					<div :style="'height:' + genColHeight(values[values.length - i - 1]) + '%'"/>
-				</div>
-				<div
-					v-for="() in numOfEmptyCols"
-					class="top-miniChart_chartGridCol top-miniChart_chartGridCol-none"
-					@mouseenter="resetModel()"
-				>
-					<div></div>
-				</div>
-			</div>
-		</div>
-
-		<div class="top-miniChart_data">
-			<span :class="{
-				['top-miniChart_dataDynamic']: true,
-				[`top-miniChart_dataDynamic-direction_${dynamicDirection}`]: true,
-			}">
-				{{ Math.abs(localDynamic) || '' }}
-			</span>
-			<span class="top-miniChart_dataValue">
-				{{ percentOfNumber(values[values.length - 1]) || 0 }}
-			</span>
-		</div>
-
-		<div
-			v-if="additionalHTML"
-			v-html="additionalHTML"
-		/>
-	</div>
-
-</template>
-<style>
-@import "./styles/miniChart.css";
-</style>

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

@@ -1,9 +0,0 @@
-Компонент для постороения миниграфика.
-
-Используется для вывода статистики изменений параметра.
-
-## Описание функционала
-
-- Есть возможность выбора цвета иконки и колонок графика (props.color)
-- Есть возможность получения данных о колонке, на которой расположен курсор. Данные возвращаются через modelValue (возможно получить эл-т выбранной
-  колонки, дату и значение)

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

@@ -1,25 +0,0 @@
-import { faker } from '@faker-js/faker';
-import { dateToString } from '@/core/utils/date';
-
-/**
- * Список дат всех проверок
- */
-export const dates = faker.date
-	.betweens({ from: '2020-01-01', to: Date.now(), count: 60 })
-	.map(date => dateToString(date, false, 0));
-
-/**
- * Список активных дат
- */
-export const activeDates = dates.slice(-10);
-
-/**
- * Список значений видимости
- */
-const visibilities: number[] = [];
-
-for (let i = 0; i < dates.length; i++) {
-	visibilities.push(faker.number.float({ min: 0, max: 100, fractionDigits: 2 }));
-}
-
-export { visibilities };