@topvisor/ui 1.0.42-dev.2 → 1.0.42-dev.4

package/src/components/project/selectorRegion/selectorRegion.stories.ts

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './selectorRegion.vue';
-import ReadMe from './stories/README.md?raw';
-import searchers from './stories/searchers';
-import TopDialogs from '@/components/dialog/dialog/dialogs/dialogs.vue';
-
-const argTypes = genArgsTypes(Component);
-
-const subcategoryRegions = 'Для выбора регионов';
-
-// argTypes.compareRegionsIndexes.table!.subcategory = subcategoryRegions;
-argTypes.forFrequency.table!.subcategory = subcategoryRegions;
-argTypes.autoRegion.table!.subcategory = subcategoryRegions;
-argTypes.addRegionIcon.table!.subcategory = subcategoryRegions;
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-	},
-} as Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		projectId: 1,
-		searchers,
-		modelValue: [25],
-	},
-} satisfies Story;
-
-export const CompareRegions = {
-	args: {
-		projectId: 1,
-		searchers,
-		modelValue: [1],
-		addCompare: true,
-	},
-	render: (args) => ({
-		components: {
-			TopDialogs,
-			TopSelectorRegion: Component,
-		},
-		setup() {
-			return { args };
-		},
-		template: `
-			<!-- Подключить один раз в приложение -->
-			<TopDialogs></TopDialogs>
-
-			<TopSelectorRegion :="args"></TopSelectorRegion>
-		`,
-	}),
-} satisfies Story;
-
-export const Searchers = {
-	args: {
-		projectId: 1,
-		searchers,
-		modelValue: [],
-		onlySearcher: true,
-	},
-} satisfies Story;
-
-export const CompareSearchers = {
-	args: {
-		projectId: 1,
-		searchers,
-		modelValue: [],
-		onlySearcher: true,
-		addCompare: true,
-	},
-} satisfies Story;
-
-export default meta;

package/src/components/project/selectorRegion/selectorRegion.vue

@@ -1,365 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue';
-import type { Props, Region } from './types';
-import Select from '@/components/forms/select/select.vue';
-import Button from '@/components/forms/button/button.vue';
-import { useSelectorRegion } from './composables/selectorRegion';
-import { dummyIndex, globalRegionIndex, searhcerCompareKey } from './utils/consts';
-import { dialogSelectorRegions } from '@/components/project/selectorRegion/utils/utils';
-
-const props = withDefaults(defineProps<Props>(), {
-	searchers: () => [],
-	// compareRegionsIndexes: () => [],
-	addSearcherIcon: true,
-	addRegionIcon: true,
-	addChanger: true,
-});
-
-const model = defineModel<Props['modelValue']>({ required: true });
-const modelSingle = defineModel<Props['modelValueSingle']>('modelValueSingle');
-
-const {
-	selectSearcher,
-	selectRegion,
-	compare,
-
-	searcherByKey,
-	allRegionsIndexes,
-
-	getSearcher,
-	getRegion,
-} = useSelectorRegion(props);
-
-const onClickCompare = () => {
-	const regions: Region[] = [];
-
-	searcherByKey.value.forEach((searcher) => {
-		if (!searcher.enabled) return;
-
-		searcher.regions.forEach((region) => {
-			if (!region.enabled) return;
-
-			regions.push(region);
-		});
-	});
-
-	dialogSelectorRegions.open('selectorRegions', {
-		regions,
-		regionsIndexes: compare.regionsIndexes.value,
-		'@update:regionsIndexes': (regionsIndexes: number[]) => compare.regionsIndexes.value = regionsIndexes,
-	});
-};
-
-watch([selectRegion.regionIndex, selectSearcher.searcherKey, compare.regionsIndexes], () => {
-	if (selectSearcher.searcherKey.value === searhcerCompareKey && compare.regionsIndexes.value.length) {
-		if (JSON.stringify(model.value) === JSON.stringify(compare.regionsIndexes.value)) {
-			return;
-		}
-
-		model.value = [...compare.regionsIndexes.value];
-	} else {
-		if (props.onlySearcher) {
-			model.value = [selectSearcher.searcherKey.value];
-
-			if (selectSearcher.searcherKey.value === dummyIndex && !props.autoRegion) model.value.length = 0;
-		} else {
-			model.value = [selectRegion.regionIndex.value];
-
-			// не добавлять несуществующий регион в результаты
-			if (selectRegion.regionIndex.value === dummyIndex && !props.autoRegion) model.value.length = 0;
-		}
-	}
-
-	// регионов нет
-	if (!props.onlySearcher && !allRegionsIndexes.value.size) {
-		selectSearcher.searcherKey.value = dummyIndex;
-	}
-});
-
-if (modelSingle.value) {
-	watch(modelSingle, () => {
-		if (modelSingle.value) {
-			model.value = [modelSingle.value];
-		}
-	}, { immediate: true });
-}
-
-watch(model, () => {
-	if (model.value[0]) {
-		modelSingle.value = model.value[0];
-	}
-
-	// проверка входных данных v-model на корректность
-	if (props.onlySearcher) {
-		if (
-			!model.value.length ||
-			model.value.length === 1 && !searcherByKey.value.has(model.value[0]) ||
-			model.value.length === 1 && model.value[0] === dummyIndex && !props.autoRegion
-		) {
-			let defaultKey: number | undefined = searcherByKey.value.keys().next().value;
-
-			// запретить устанавливать несуществующий регион
-			if (defaultKey === dummyIndex && !props.autoRegion) {
-				defaultKey = undefined;
-
-				modelSingle.value = dummyIndex;
-			}
-
-			if (defaultKey !== undefined) {
-				model.value = [defaultKey];
-			}else{
-				model.value.length = 0;
-			}
-
-			return;
-		}
-
-		if (
-			model.value.length > 1 &&
-			JSON.stringify(model.value) !== JSON.stringify(compare.regionsIndexes.value)
-		) {
-			model.value = [...compare.regionsIndexes.value];
-
-			return;
-		}
-	} else {
-		let newModel = [...new Set(model.value)];
-
-		let defaultIndex = searcherByKey.value.values().next().value?.regionByIndex?.keys().next().value;
-		if (props.forFrequency) {
-			defaultIndex = searcherByKey.value.values().next().value?.regionByIndex?.values().next().value?.key;
-		}
-
-		// запретить устанавливать несуществующий регион
-		if (defaultIndex === dummyIndex && !props.autoRegion) {
-			defaultIndex = undefined;
-
-			modelSingle.value = dummyIndex;
-		}
-
-		if (!newModel.length) {
-			if (defaultIndex !== undefined) {
-				newModel.push(defaultIndex);
-			}
-		} else if (newModel.length === 1) {
-			let all = allRegionsIndexes.value;
-
-			if (props.forFrequency) {
-				all = new Set();
-				searcherByKey.value.forEach((searcher) => {
-					searcher.regionByIndex.forEach((region) => {
-						if (region.index === globalRegionIndex) return;
-						if (region.index === dummyIndex) return;
-
-						all.add(region.key);
-					});
-				});
-			}
-
-			// убрано, так как dummyIndex запрещено выбирать в model
-			// if (!all.has(newModel[0]) && newModel[0] !== dummyIndex) {
-			if (!all.has(newModel[0])) {
-				newModel = [];
-				if (defaultIndex !== undefined) {
-					newModel.push(defaultIndex);
-				}
-			}
-		} else {
-			newModel = newModel.filter(index => allRegionsIndexes.value.has(index));
-			if (!newModel.length && defaultIndex !== undefined) {
-				newModel.push(defaultIndex);
-			}
-		}
-
-		if (JSON.stringify(model.value) !== JSON.stringify(newModel)) {
-			model.value = newModel;
-
-			return;
-		}
-	}
-
-	// входные данные v-model совпадают с внутренними значениями
-	if (
-		model.value.length === 1 &&
-		model.value[0] === (props.onlySearcher ? selectSearcher.searcherKey.value : selectRegion.regionIndex.value)
-	) {
-		return;
-	}
-
-	// if (
-	// 	model.value.length > 1 &&
-	// 	selectorSearcher.searcherKey.value === searhcerCompareKey &&
-	// 	JSON.stringify(model.value) === JSON.stringify(selectorCompare.regionsIndexes.value)
-	// ) {
-	// 	return;
-	// }
-
-	// обновление regionIndex, searcherKey, selectorCompare.regionsIndexes
-	if (props.onlySearcher) {
-		// if (!model.value.length) {
-		// 	selectorSearcher.searcherKey.value = dummyIndex;
-		//
-		// 	return;
-		// }
-
-		if (model.value.length === 1) {
-			selectSearcher.searcherKey.value = model.value[0];
-
-			return;
-		}
-
-		selectSearcher.searcherKey.value = searhcerCompareKey;
-
-		return;
-	} else {
-		if (!model.value.length) {
-			// selectSearcher.searcherKey.value = dummyIndex;
-			// selectRegion.regionIndex.value = dummyIndex;
-
-			return;
-		}
-
-		if (model.value.length === 1 && selectSearcher.searcherKey.value !== searhcerCompareKey) {
-			selectRegion.regionIndex.value = model.value[0];
-
-			let newSearherKey: number | undefined;
-			for (const searcher of searcherByKey.value.values()) {
-				for (const region of searcher.regionByIndex.values()) {
-					const currentRegionIndex = props.forFrequency ? region.key : region.index;
-					if (currentRegionIndex === selectRegion.regionIndex.value) {
-						newSearherKey = searcher.key;
-
-						break;
-					}
-				}
-
-				if (newSearherKey !== undefined) {
-					break;
-				}
-			}
-
-			if (newSearherKey !== undefined) {
-				selectSearcher.searcherKey.value = newSearherKey;
-			}
-		} else {
-			selectSearcher.searcherKey.value = searhcerCompareKey;
-			compare.regionsIndexes.value = [...model.value];
-		}
-	}
-}, { immediate: true });
-
-defineExpose({
-	getSearcher,
-	getRegion,
-});
-</script>
-
-<template>
-	<div
-		:class="{
-			'top-selectorRegion': true,
-			'top-selectorRegion-onlySearcher': onlySearcher,
-		}"
-	>
-		<Select
-			:options="selectSearcher.optionBySearcherKey.value"
-			v-model="selectSearcher.searcherKey.value"
-			name="searcher_key"
-			:addChanger="addChanger"
-		/>
-
-		<Select
-			v-if="!onlySearcher && selectSearcher.searcherKey.value !== searhcerCompareKey"
-			class="top-select-region"
-			:options="selectRegion.optionByRegionIndex.value"
-			v-model="selectRegion.regionIndex.value"
-			:name="forFrequency ? 'region_key' : 'region_index'"
-			:addChanger="addChanger"
-			:data-top-icon="addRegionIcon ? '' : undefined"
-		/>
-
-		<Button
-			v-if="addCompare && !onlySearcher && selectSearcher.searcherKey.value === searhcerCompareKey"
-			name="compare"
-			@click="onClickCompare"
-			:data-count-compare-regions-indexes="compare.regionsIndexes.value.length"
-		>
-			{{ $i18n.Common.Selected_regions }}
-		</Button>
-	</div>
-</template>
-
-<style>
-@import "./styles/searcherColors.css";
-
-.top-selectorRegion {
-	width: 340px;
-	display: inline-flex;
-	vertical-align: middle;
-}
-
-.top-selectorRegion > .top-select {
-	flex-grow: 1;
-}
-
-.top-selectorRegion > .top-select:focus-within {
-	z-index: 4;
-}
-
-.top-selectorRegion > .top-select > .top-select_select:hover,
-.top-selectorRegion > .top-select > .top-select_select.top-error {
-	z-index: 1;
-}
-
-.top-selectorRegion > .top-select-searcher_key {
-	width: 140px;
-	max-width: 160px;
-	margin-right: -1px;
-}
-
-.top-selectorRegion > .top-select-region > select {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
-.top-selectorRegion > .top-select-region {
-	--top-icon-size: 20px;
-	--top-icon-color: var(--color-text-primary);
-
-	--top-icon2-size: 20px;
-	--top-icon2-color: var(--color-text-primary);
-}
-
-.top-selectorRegion > .top-select-region[data-top-icon][data-top-icon2] {
-	--top-icon2-size: 16px;
-}
-
-.top-selectorRegion > .top-select-region[data-top-icon][data-top-icon2]:after {
-	text-indent: -4px;
-}
-
-.top-selectorRegion > [name="compare"] {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	flex-grow: 1;
-}
-
-.top-selectorRegion > [name="compare"]:after {
-	content: "(" attr(data-count-compare-regions-indexes) ")";
-	margin: 0 0 0 6px;
-}
-
-.top-selectorRegion:not(.top-selectorRegion-onlySearcher) > .top-select-searcher_key > select {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	margin-right: 0;
-}
-
-.top-selectorRegion:not(.top-selectorRegion-onlySearcher) > .top-select-searcher_key[data-value="-1"] > select {
-	border-right: none;
-}
-
-.top-selectorRegion-onlySearcher {
-	width: 140px;
-}
-</style>

package/src/components/project/selectorRegion/stories/README.md

@@ -1,36 +0,0 @@
-Компонент реализует выбор поисковой системы и / или регионов.
-
-Добавляет на страницу компонент с одним или двумя компонентами **TopSelect**:
-
-- select для выбора **ПС**
-- select для выбора **региона**
-
-Списки ПС и регионов генерируется из **props.searchers**.
-
-Выбор нескольких регионов сохраняется в **localStorage** с привязкой к **projectId**.
-
-## Описание функционала
-
-- Выбор ПС и региона (modelValue - список regionIndex, modelValueSingle - searcherKey или dummyIndex, если ПС нет)
-- Выбор только ПС  (modelValue - список searcherKey, modelValueSingle - regionIndex или dummyIndex, если регионов нет)
-- Вывод значков ПС
-- Выбор **нескольких регионов** / **нескольких ПС** (modelValue - список regionKey)
-- Выбор ПС и регионов в режиме для **работы с частотой запросов**
-    - список ПС ограничен и добавляется регион **Без региона**
-    - в качестве **props.name** для TopSelect выбора региона испоьзоваться **region_key**
-- Вывод варианта **Автовыбор** (**props.autoRegion**), можно использовать при генерации отчетов с заменой на нужный регион
-
-Так как имя поля может меняться элементу label с регионом добавлен класс .g_select-region.
-
-## Утилиты
-
-**genSearcherByKey()** - Генерация словара ПС со словарем регионов из массива ПС
-
-**findRegion()** - поиск региона в массиве поисковиков
-
-## i18n
-
-Требует подключение словарей:
-
-- i18n/Common
-- i18n/keywords

package/src/components/project/selectorRegion/stories/searchers.ts

@@ -1,77 +0,0 @@
-import type { Region, Searcher } from '../types';
-import { searchersNames } from '../utils/consts';
-import { fakerRU } from '@faker-js/faker';
-import { getLangLabel } from '@/core/utils/searchers';
-
-type Location = {
-	city: string;
-	region: string;
-	countryCode: string;
-};
-
-function createRandomLocation(): Location {
-	return {
-		city: fakerRU.location.city(),
-		region: fakerRU.location.state(),
-		countryCode: fakerRU.location.countryCode(),
-	};
-}
-
-const locations = Array.from({ length: 3 }, createRandomLocation);
-
-const devices: Region['device'][] = [0, 1, 2];
-const langs = ['ru', 'en'];
-const searchers: Searcher[] = [];
-
-let count = 0;
-Object.entries(searchersNames).forEach(([key, name]) => {
-	const searcher: Searcher = {
-		id: fakerRU.number.int(),
-		key: +key,
-		name,
-		enabled: 1,
-		regions: [],
-	};
-
-	locations.forEach(location => {
-		devices.forEach(device => {
-			langs.forEach(lang => {
-				count++;
-
-				// в Google для тестов оставляем только ПК
-				if (searcher.key === 1 && device !== 0) {
-					return;
-				}
-
-				// в yandex.com для тестов не выводим регионы
-				if (searcher.key === 20) {
-					return;
-				}
-
-				// добавляем только доступные регионы
-				if (lang !== 'ru' && !getLangLabel(searcher.key, lang)) {
-					return;
-				}
-
-				const region: Region = {
-					id: fakerRU.number.int(),
-					searcher_key: searcher.key,
-					index: count,
-					key: count * 2,
-					name: location.city,
-					areaName: location.region,
-					countryCode: location.countryCode,
-					lang,
-					device,
-					enabled: 1,
-				};
-
-				searcher.regions.push(region);
-			});
-		});
-	});
-
-	searchers.push(searcher);
-});
-
-export default searchers;

package/src/components/project/selectorRegion/styles/searcherColors.css

@@ -1,41 +0,0 @@
-.top-select-searcher_key[data-value="0"]:after,
-.top-select-searcher_key[data-value="20"]:after,
-.top-select-searcher_key[data-value="21"]:after {
-	color: red;
-}
-
-.top-select-searcher_key[data-value="1"]:after {
-	color: var(--color-bg-primary-2);
-}
-
-.top-select-searcher_key[data-value="2"]:after {
-	color: #005FF9;
-}
-
-.top-select-searcher_key[data-value="3"]:after {
-	color: #01509B;
-}
-
-.top-select-searcher_key[data-value="4"]:after {
-	color: #FF0000;
-}
-
-.top-select-searcher_key[data-value="5"]:after {
-	color: #008373;
-}
-
-.top-select-searcher_key[data-value="6"]:after {
-	color: #4800B5;
-}
-
-.top-select-searcher_key[data-value="7"]:after {
-	color: #CC0000;
-}
-
-.top-select-searcher_key[data-value="8"]:after {
-	color: #1BADF8;
-}
-
-.top-select-searcher_key[data-value="9"]:after {
-	color: #00CEFF;
-}