@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,33 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnusedSymbol" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredUrls">
+        <list>
+          <option value="http://" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="JSUndefinedPropertyAssignment" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="JSUnresolvedReference" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="JSUnusedGlobalSymbols" enabled="false" level="INFORMATION" enabled_by_default="false" />
+    <inspection_tool class="PhpCSFixerValidationInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PhpMixedReturnTypeCanBeReducedInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PhpSwitchCanBeReplacedWithMatchExpressionInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PhpSwitchStatementWitSingleBranchInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PhpUnhandledExceptionInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PhpUnnecessaryLocalVariableInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+    <inspection_tool class="SuspiciousTypeOfGuard" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="TrivialIfJS" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="UnnecessaryLocalVariableJS" enabled="false" level="WARNING" enabled_by_default="false">
+      <option name="m_ignoreImmediatelyReturnedVariables" value="false" />
+      <option name="m_ignoreAnnotatedVariables" value="false" />
+    </inspection_tool>
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/php.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

package/.idea/ui.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CommitMessageInspectionProfile">
+    <profile version="1.0">
+      <inspection_tool class="CommitFormat" enabled="true" level="WARNING" enabled_by_default="true" />
+      <inspection_tool class="CommitNamingConvention" enabled="true" level="WARNING" enabled_by_default="true" />
+    </profile>
+  </component>
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/.storybook/TopTheme.ts

@@ -0,0 +1,115 @@
+import { global } from '@storybook/global';
+import type { Decorator } from '@storybook/vue3-vite';
+
+import lightMain from '@/resources/styles/themes/light/light.css?raw';
+import lightLayout from '@/resources/styles/themes/light/light-layout.css?raw';
+import lightPositions from '@/resources/styles/themes/light/light-positions.css?raw';
+
+import darkMain from '@/resources/styles/themes/dark/dark.css?raw';
+import darkLayout from '@/resources/styles/themes/dark/dark-layout.css?raw';
+import darkPositions from '@/resources/styles/themes/dark/dark-positions.css?raw';
+
+import darkTHMain from '@/resources/styles/themes/dark-th/dark-th.css?raw';
+import darkTHLayout from '@/resources/styles/themes/dark-th/dark-th-layout.css?raw';
+import darkTHPositions from '@/resources/styles/themes/dark-th/dark-th-positions.css?raw';
+import { getName as TopThemeManagerGetName } from './TopThemeManager';
+
+const light = lightMain + lightLayout + lightPositions;
+const dark = darkMain + darkLayout + darkPositions;
+const darkTH = darkTHMain + darkTHLayout + darkTHPositions;
+
+export const themes = {
+	light,
+	dark,
+	darkTH,
+};
+
+type ThemeName = keyof typeof themes;
+
+/**
+ * Получение имени выбранной темы
+ */
+function getName(): ThemeName {
+	const namagerTheme = TopThemeManagerGetName();
+
+	let theme: string | null | undefined = location.search.match(/topTheme:(\w+)/)?.[1];
+	if (!theme) theme = localStorage.getItem('topTheme');
+	if (!theme) theme = namagerTheme;
+
+	return theme as ThemeName;
+}
+
+/**
+ * Загрузка выбранной темы
+ * Тема, указанная в адресной строке приоритетна
+ *
+ * @returns Имя темы
+ */
+function load() {
+	let theme = getName();
+
+	setCSS(theme);
+
+	return theme;
+}
+
+/**
+ * Сохранение выбранной темы
+ */
+function save(theme: ThemeName) {
+	localStorage.setItem('topTheme', theme);
+
+	setCSS(theme);
+}
+
+/**
+ * Установить тему
+ */
+function setCSS(theme: ThemeName) {
+	// см. preview-head.html
+	if (global.topThemeStyle.dataset.theme !== theme) {
+		global.topThemeStyle.dataset.theme = theme;
+
+		global.topThemeStyle.innerHTML = themes[theme];
+	}
+}
+
+/**
+ * Получить стили текущей темы
+ * @returns css стили
+ */
+export function getCurrentCSS() {
+	return global.topThemeStyle.innerHTML;
+}
+
+export const decorator: Decorator = (story, context) => {
+	save(context.globals.topTheme);
+
+	return story(context);
+};
+
+export const type = {
+	description: 'Выбор темы',
+	defaultValue: load(),
+	toolbar: {
+		title: 'Выбор темы',
+		items: [
+			{
+				icon: 'sun',
+				title: 'light',
+				value: 'light',
+			},
+			{
+				icon: 'moon',
+				title: 'dark',
+				value: 'dark',
+			},
+			{
+				icon: 'lightning',
+				title: 'dark-th',
+				value: 'darkTH',
+			},
+		],
+		dynamicTitle: true,
+	},
+};

package/.storybook/TopThemeManager.ts

@@ -0,0 +1,53 @@
+import { create } from 'storybook/theming/create';
+
+/**
+ * Поулчить тему storybook
+ */
+export function get() {
+	return themes[getName()];
+}
+
+/**
+ * Поулчить имя темы storybook
+ *
+ * Тема зависит от настроек браузера и текущего сайта
+ */
+export function getName(): keyof typeof themes {
+	const isThundo = location.href.includes('thundo.com');
+	if (isThundo){
+		return 'darkTH';
+	}
+
+	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		return 'dark';
+	}
+
+	return 'light';
+}
+
+// https://storybook.js.org/docs/vue/configure/theming
+const themeBase = {
+	brandTitle: 'Topvisor Princip',
+	brandUrl: 'https://topvisor.com',
+	brandTarget: '_blank',
+};
+
+export const themes = {
+	light: create({
+		...themeBase,
+		base: 'light',
+		brandImage: 'https://topvisor.com/images/sites/tv/ru/logo-text-dark.svg',
+	}),
+	dark: create({
+		...themeBase,
+		base: 'dark',
+		brandImage: 'https://topvisor.com/images/sites/tv/ru/logo-text-light.svg',
+	}),
+	darkTH: create({
+		...themeBase,
+		base: 'dark',
+		brandTitle: 'Thundo UI',
+		brandUrl: 'https://thundo.com',
+		brandImage: 'https://thundo.com/images/sites/th/en/logo-text-light.svg',
+	}),
+};

package/.storybook/argsArrayDecorator.ts

@@ -0,0 +1,120 @@
+import { makeDecorator, useArgs } from 'storybook/preview-api';
+import type { Args, ArgTypes } from 'storybook/internal/types';
+import { getComponentMeta, parseComponentMetaUnionArrayType } from '@/components/helpersStories';
+
+/**
+ * Обновление аргументов из URL.
+ * Парсит строку args из URL и обновляет переданные args через updateArgs.
+ *
+ * @param args Текущие аргументы истории
+ * @param updateArgs Функция для обновления аргументов
+ */
+function updateArgsFromUrl(args: Args, updateArgs: (newArgs: ArgTypes) => void) {
+	const urlArgsIn = new URLSearchParams(window.location.search).get('args')?.split(';') ?? [];
+	const urlArgs: Args = {};
+
+	urlArgsIn.forEach((arg) => {
+		const [key, value] = arg.split(':');
+		if (!key || !value || value.startsWith('!')) return;
+
+		if (key.includes('[')) {
+			// массивы
+			const match = key.match(/(\w+)\[(\d+)\]/);
+			if (match) {
+				const [_, baseKey, index] = match;
+				urlArgs[baseKey] = urlArgs[baseKey] || [];
+				urlArgs[baseKey][index] = isNaN(+value) ? value : Number(value);
+			}
+		} else if (key.includes('.')) {
+			// объекты
+			const keys = key.split('.');
+			let current = urlArgs;
+			keys.forEach((k, i) => {
+				if (i === keys.length - 1) {
+					current[k] = isNaN(+value) ? value : Number(value);
+				} else {
+					current[k] = current[k] || {};
+					current = current[k];
+				}
+			});
+		} else {
+			urlArgs[key] = isNaN(+value) ? value : Number(value);
+		}
+	});
+
+	if (Object.keys(urlArgs).length > 0) {
+		updateArgs({ ...args, ...urlArgs });
+	}
+}
+
+/**
+ * Декоратор для загрузки сохранённых в адресной строке аргументов истории.
+ *
+ * Поддерживает формат: `?args=key:value;key[index]:value`
+ *
+ * Например: `?args=modelValue[0]:7;color:green`
+ *
+ * Такой поддержки в Storybook 8 нет, поэтому реализуем через makeDecorator.
+ */
+export const argsArrayDecorator = makeDecorator({
+	name: 'argsArrayDecorator',
+	parameterName: 'argsArray',
+	skipIfNoParametersOrOptions: false,
+	wrapper: (storyFn, context, _settings) => {
+		const [args, updateArgs] = useArgs();
+
+		const componentMeta = getComponentMeta(context.component);
+
+		// типизированный парсинг значений из url
+		for (const propName in args) {
+			const propMeta = componentMeta?.propByName[propName];
+
+			if (typeof propMeta?.schema === 'object') {
+				if (propMeta.schema.kind === 'array' && typeof propMeta.schema.type === 'string') {
+					const values = parseComponentMetaUnionArrayType(propMeta.schema['type']);
+
+					if (values) {
+						args[propName] = args[propName].map((argValue) => {
+							for (const value of values) {
+								// имя типа объекта, не проверять формат объекта
+								if (typeof value === 'string' && typeof argValue === 'object') {
+									return argValue;
+								}
+
+								if (typeof value === 'string') {
+									argValue = String(argValue);
+								}
+
+								if (value === argValue) {
+									return argValue;
+								}
+
+								if (value === String && typeof argValue === 'string') {
+									return String(argValue);
+								}
+
+								if (value === Number && typeof !isNaN(argValue)) {
+									return Number(argValue);
+								}
+
+								if (value === Boolean && (argValue === true || argValue === false)) {
+									return argValue;
+								}
+							}
+						}).filter(value => value !== undefined);
+					}
+				}
+			}
+		}
+
+		return {
+			components: {
+				Story: storyFn(context),
+			},
+			template: '<Story />',
+			mounted() {
+				updateArgsFromUrl(args, updateArgs);
+			},
+		};
+	},
+});

package/.storybook/main.ts

@@ -0,0 +1,78 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+import remarkGfm from 'remark-gfm';
+import { transliterate } from 'transliteration';
+import path from 'path';
+import type { PreRenderedChunk, PreRenderedAsset } from 'rollup';
+
+/**
+ * Генерирует безопасное имя файла (ASCII, латиница).
+ */
+const getSafeName = (raw: string | undefined, fallback: string): string => {
+	const safe = raw ?? fallback;
+	const transliterated = transliterate(safe);
+	const base = path.basename(transliterated, path.extname(transliterated)) || fallback;
+
+	return base.replace(/[^a-zA-Z0-9_-]/g, '-');
+};
+
+const config: StorybookConfig = {
+	stories: [
+		'../src/**/*.mdx',
+		'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+	],
+	addons: [
+		{
+			name: '@storybook/addon-docs',
+			options: {
+				mdxPluginOptions: {
+					mdxCompileOptions: {
+						remarkPlugins: [remarkGfm],
+					},
+				},
+			},
+		},
+		'@storybook/addon-links',
+		'@storybook/addon-a11y',
+		'@storybook/addon-designs',
+		'storybook/theming',
+		'storybook-addon-pseudo-states',
+		'@chromatic-com/storybook',
+	],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {
+			docgen: {
+				// влияет на открытие storybook больше, чем vue-docgen-api, но нужен для точного определения типов и правильной работы Control
+				plugin: 'vue-component-meta',
+				tsconfig: 'tsconfig.json',
+			},
+		},
+	},
+	viteFinal: (config) => {
+		config.build ??= {};
+		config.build.rollupOptions ??= {};
+
+		config.build.rollupOptions.output = {
+			...config.build.rollupOptions.output,
+			entryFileNames: (info: PreRenderedChunk) => {
+				const name = getSafeName(info.name, 'entry');
+				return `assets/${name}-[hash].js`;
+			},
+
+			chunkFileNames: (info: PreRenderedChunk) => {
+				const name = getSafeName(info.name, 'chunk');
+				return `assets/${name}-[hash].js`;
+			},
+
+			assetFileNames: (info: PreRenderedAsset) => {
+				const name = getSafeName(info.names?.[0], 'asset');
+				return `assets/${name}-[hash].[ext]`;
+			},
+		};
+
+		return config;
+	},
+	docs: {},
+};
+
+export default config;

package/.storybook/manager.ts

@@ -0,0 +1,25 @@
+import { addons } from 'storybook/manager-api';
+import * as TopThemeManager from './TopThemeManager';
+
+addons.setConfig({
+	isFullscreen2: false,
+	showNav: true,
+	showPanel: true,
+	panelPosition: 'right',
+	enableShortcuts: true,
+	showToolbar: true,
+	theme: TopThemeManager.get(),
+	selectedPanel: undefined,
+	initialActive: 'sidebar',
+	sidebar: {
+		showRoots: true,
+		collapsedRoots: [],
+	},
+	toolbar: {
+		title: { hidden: false },
+		zoom: { hidden: false },
+		eject: { hidden: false },
+		copy: { hidden: false },
+		fullscreen: { hidden: false },
+	},
+});

package/.storybook/preview-head.html

@@ -0,0 +1,21 @@
+<link
+	href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap"
+	rel="stylesheet"
+	crossorigin="anonymous"
+>
+
+<link
+	href="/jquery-ui.min.css"
+	rel="stylesheet"
+	crossorigin="anonymous"
+>
+<link
+	href="/icomoon/style.css"
+	rel="stylesheet"
+	crossorigin="anonymous"
+>
+
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
+
+<style id="topThemeStyle"></style>

package/.storybook/preview.ts

@@ -0,0 +1,50 @@
+import type { Preview } from '@storybook/vue3-vite';
+import * as TopTheme from './TopTheme';
+import * as TopThemeManager from './TopThemeManager';
+import vModelDecorator from './vue/vModelDecorator';
+import coreDecorator from './vue/coreDecorator';
+import '@/resources/styles/storybook.css';
+import '@/resources/styles/core/core';
+import { argsArrayDecorator } from './argsArrayDecorator';
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+		docs: {
+			theme: TopThemeManager.get(),
+			toc: {
+				headingSelector: 'h2',
+				title: 'Оглавление',
+			},
+		},
+		options: {
+			storySort: {
+				order: [
+					'Информация о сборке',
+					'components',
+				],
+			},
+		},
+	},
+
+	decorators: [
+		// если декораторы меняют args, то show code перестает работать и выводит {} satisfies Story
+		TopTheme.decorator,
+		coreDecorator,
+		argsArrayDecorator,
+		vModelDecorator,
+	],
+
+	globalTypes: {
+		topTheme: TopTheme.type,
+	},
+
+	tags: ['autodocs'],
+};
+
+export default preview;

package/.storybook/vue/coreDecorator.ts

@@ -0,0 +1,86 @@
+import { makeDecorator } from 'storybook/preview-api';
+import { getCurrentInstance } from 'vue';
+import CorePlugin from '@/core/plugins/core';
+import i18nPlugin from '@/core/plugins/i18n';
+import { load } from '@/components/dialog/dialog/stories/autoload';
+// import piniaTPAPlugin from '@/core/plugins/piniaTPA';
+
+/**
+ * Подключение Core UI
+ */
+export default makeDecorator({
+	name: 'coreDecorator',
+	parameterName: 'coreDecorator',
+	skipIfNoParametersOrOptions: false,
+	wrapper: (getStory, context, _settings) => {
+		const app = getCurrentInstance()?.appContext.app;
+
+		app?.use(CorePlugin, {
+			themeName: 'light',
+			widthForMobile: 900,
+			dateFormat: 'd.m.Y',
+			currency: 'RUB',
+			topDialogOptions: {
+				load,
+			},
+		});
+
+		app?.use(i18nPlugin, {
+			i18n: {
+				Common: {
+					Cancel: 'Отмена',
+					Continue: 'Продолжить',
+					Apply: 'Применить',
+					Close: 'Закрыть',
+					Back: 'Назад',
+					Copy: 'Копировать',
+					Copied_to_clipboard: 'Скопировано в буфер обмена',
+					Guest_link_copied_to_clipboard: 'Гостевая ссылка скопирована в буфер обмена',
+					Guest_link_created: 'Гостевая ссылка создана',
+					Cannot_copied_to_clipboard: 'Не удалось скопировать ссылку в буфер обмена',
+					Copy_guest_link_manually: 'Скопируйте гостевую ссылку вручную',
+					OK: 'Ок',
+					Select_all: 'Выбрать все',
+					Not_date: 'Нет даты',
+					No_results: 'Нет результатов',
+					Device_0: 'ПК',
+					Device_1: 'Планшет',
+					Device_2: 'Смартфон',
+					Compare: 'Сравнить',
+					Selected_regions: 'Выбранные регионы',
+					Autoselect: 'Автовыбор',
+					All_tags: 'Все теги',
+					Tags: 'Теги',
+					Add: 'Добавить',
+					Replace: 'Заменить',
+					Delete: 'Удалить',
+					All: 'Все',
+					All_folders: 'Все папки',
+					All_groups: 'Все группы',
+					Agree: 'Согласен',
+				},
+				Calendar: {
+					Dw_1: 'Пн',
+					Dw_2: 'Вт',
+					Dw_3: 'Ср',
+					Dw_4: 'Чт',
+					Dw_5: 'Пт',
+					Dw_6: 'Сб',
+					Dw_7: 'Вс',
+				},
+				Keywords: {
+					Without_region: 'Без региона',
+					New_group: 'Новая группа',
+				},
+				Projects: {
+					Sort_by_search_engine: 'По поисковой системе',
+					Sort_by_yande_region_code: 'По коду региона в Яндексе (lr)',
+					Sort_by_lphabetically: 'По алфавиту',
+				},
+			} as any,
+			lang: 'ru',
+		});
+
+		return getStory(context);
+	},
+});

package/.storybook/vue/vModelDecorator.ts

@@ -0,0 +1,46 @@
+import { makeDecorator, useArgs } from 'storybook/preview-api';
+
+/**
+ * Двусторонняя привязка v-model vue и args storybook
+ *
+ * @github Обход лишней перерисовки: https://github.com/storybookjs/storybook/issues/17089
+ */
+const vModelDecorator = makeDecorator({
+	name: 'vModelDecorator',
+	parameterName: 'vModelDecorator',
+	skipIfNoParametersOrOptions: false,
+	wrapper: (storyFn, context, _settings) => {
+		const [args, updateArgs] = useArgs();
+
+		context.component.emits?.forEach((emit: string) => {
+			if (emit.startsWith('update:')) {
+				const propName = emit.replace('update:', '');
+
+				// в storybook этот параметр не указан
+				if (args[propName] === undefined) return;
+
+				const onUpdateOriginal = args['onUpdate:' + propName];
+
+				if (!onUpdateOriginal?.__vModelDecoratorConnected) {
+					args['onUpdate:' + propName] = (...params: any) => {
+						onUpdateOriginal?.(...params);
+
+						const propValue = params[0] === undefined ? null : params[0];
+
+						const newArgs = {};
+						newArgs[propName] = propValue;
+
+						// замедляет работу storybook, но нужно для defineModel()
+						updateArgs(newArgs);
+					};
+
+					args['onUpdate:' + propName].__vModelDecoratorConnected = true;
+				}
+			}
+		});
+
+		return storyFn(context);
+	},
+});
+
+export default vModelDecorator;