@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,204 +0,0 @@
-export interface Props {
-	projectId: number;
-
-	searchers: Searcher[];
-
-	/**
-	 * Список выбранных значений
-	 *	 *
-	 * - при `onlySearcher = false`:
-	 * 	- при `forFrequency = false`: массив `regionIndex`
-	 * 	- при `forFrequency = true`: массив `regionKey`
-	 * - при `onlySearcher = true` массив `searcherKey`
-	 *
-	 * Обратите внимание, всегда является массивом, даже если не предпогается получить несколько значений
-	 *
-	 * Если не нужно работать с массивом можно указать `modelValue = []` и использовать `modelValueSingle`
-	 */
-	modelValue: number[];
-
-	/**
-	 * Выбранное значение
-	 *
-	 * Шорткат к `modelValue[0]`, если не нужно работать с массивом (для случаев без сравнений)
-	 *
-	 * Нельзя добавить динамически
-	 */
-	modelValueSingle?: number;
-
-	// compareRegionsIndexes?: number[];
-
-	/**
-	 * Добавить режим сравнения
-	 *
-	 * В режиме сравнения выбранные значения длиной массива > 1 сохраняются с привязкой к projectId
-	 *
-	 * Чтобы изменить сохраненное значение в режиме сравнения необходимо указать modelValue с длиной массива > 1
-	 *
-	 * Выбор регионов для сравнения требуется настраивать отдельно, см. emit `compareRegions`
-	 */
-	addCompare?: boolean;
-
-	/**
-	 * Режим выбора регионов для работы с частотой
-	 */
-	forFrequency?: boolean;
-
-	/**
-	 * Добавить элемент `Автовыбор` с ключем `-2`, который в API заменяется на нужный ключ в зависимости от контекста
-	 */
-	autoRegion?: boolean;
-
-	/**
-	 * В этом режиме в regionIndex будет сохраняться searcherKey
-	 */
-	onlySearcher?: boolean;
-
-	/**
-	 * См. addChanger в TopSelect
-	 */
-	addChanger?: boolean;
-
-	/**
-	 * Добавить значок ПС
-	 */
-	addSearcherIcon?: boolean;
-
-	/**
-	 * Добавить значок региона
-	 */
-	addRegionIcon?: boolean;
-}
-
-/**
- * @todo: Вынести в topvisor-openapi
- */
-export interface Searcher {
-	/**
-	 * Состояние включения поисковой системы
-	 */
-	enabled?: 0 | 1;
-
-	/**
-	 * Id поисковой системы
-	 */
-	id?: number;
-
-	/**
-	 * Ключ поисковой системы
-	 */
-	key: number;
-
-	/**
-	 * Название поисковой системы
-	 */
-	name: string;
-
-	/**
-	 * Порядок поисковой систеимы
-	 */
-	ord?: number;
-
-	/**
-	 * Id проекта
-	 */
-	project_id?: number;
-
-	/**
-	 * Регионы поисковой системы
-	 */
-	regions: Region[];
-
-	/**
-	 * Ключ поисковой системы
-	 */
-	searcher?: number;
-}
-
-/**
- * Индексирвоанные поисковики с быстрым доступом к ПС и их регионам по словарю
- */
-export type SearcherByKey = Map<Searcher['key'], SearcherIndexed>;
-
-/**
- * Индексирвоанный поисковик с быстрым доступом к регоинам по словарю
- */
-export type SearcherIndexed = Searcher & { regionByIndex: Map<Region['index'], Region> };
-
-/**
- * @todo: Вынести в topvisor-openapi
- */
-export interface Region {
-	/**
-	 * Название области
-	 */
-	areaName?: string;
-
-	/**
-	 * Код страны
-	 */
-	countryCode?: string;
-
-	/**
-	 * Глубина поиска
-	 */
-	depth?: number;
-
-	/**
-	 * Id устройства
-	 * 0 - ПК
-	 * 1 - Планшет
-	 * 2 - Смартфон
-	 */
-	device?: 0 | 1 | 2;
-
-	/**
-	 * Домен верхнего уровня
-	 */
-	domain?: string;
-
-	/**
-	 * Состояние включения региона
-	 */
-	enabled?: 0 | 1;
-
-	/**
-	 * Необходим для поддержания сортировки
-	 */
-	id?: number;
-
-	/**
-	 * Уникальный идентификатор настройки региона (ПС + регион + настройки региона)
-	 */
-	index: number;
-
-	/**
-	 * Ключ региона
-	 */
-	key: number;
-
-	/**
-	 * Код языка
-	 */
-	lang?: string;
-
-	/**
-	 * Название региона
-	 */
-	name: string;
-
-	/**
-	 * Id родительского региона
-	 */
-	parentId?: number;
-
-	/**
-	 * Ключ поисковой системы
-	 */
-	searcher_key?: Searcher['key'];
-
-	/**
-	 * Тип
-	 */
-	type?: string;
-}

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

@@ -1,335 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue';
-import type { Props, Region } from './selectorRegion';
-import Select from '@/components/forms/select/select.vue';
-import Button from '@/components/forms/button/button.vue';
-import { useSelectorRegion } from './composables/selectorRegion';
-import { dummyIndex } 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 === -1 && compare.regionsIndexes.value.length) {
-		if (JSON.stringify(model.value) === JSON.stringify(compare.regionsIndexes.value)) {
-			return;
-		}
-
-		model.value = [...compare.regionsIndexes.value];
-	} else {
-		model.value = [props.onlySearcher ? selectSearcher.searcherKey.value : selectRegion.regionIndex.value];
-	}
-
-	// регионов нет
-	if (!props.onlySearcher && !allRegionsIndexes.value.size) {
-		selectSearcher.searcherKey.value = dummyIndex;
-	}
-});
-
-if (modelSingle.value) {
-	watch(modelSingle, () => {
-		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])
-		) {
-			let defaultKey: number | undefined = searcherByKey.value.keys().next().value;
-
-			if (defaultKey !== undefined) {
-				model.value = [defaultKey];
-			}
-
-			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 (!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 === -1) return;
-						if (region.index === dummyIndex) return;
-
-						all.add(region.key);
-					});
-				});
-			}
-
-			if (!all.has(newModel[0]) && newModel[0] !== -2) {
-				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 === -1 &&
-	// 	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 = -1;
-
-		return;
-	} else {
-		// if (!model.value.length) {
-		// 	selectorSearcher.searcherKey.value = dummyIndex;
-		// 	selectorRegion.regionIndex.value = dummyIndex;
-		//
-		// 	return;
-		// }
-
-		if (model.value.length === 1 && selectSearcher.searcherKey.value !== -1) {
-			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 = -1;
-			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 !== -1"
-			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 === -1"
-			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: 320px;
-	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: 120px;
-	max-width: 140px;
-	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-1);
-
-	--top-icon2-size: 20px;
-	--top-icon2-color: var(--color-text-primary-1);
-}
-
-.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: 120px;
-}
-</style>

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

@@ -1,36 +0,0 @@
-Компонент реализует выбор поисковой системы и / или регионов.
-
-Добавляет на страницу компонент с одним или двумя компонентами **TopSelect**:
-
-- select для выбора **ПС**
-- select для выбора **региона**
-
-Списки ПС и регионов генерируется из **props.searchers**.
-
-Выбор нескольких регионов сохраняется в **localStorage** с привязкой к **projectId**.
-
-## Описание функционала
-
-- Выбор ПС и региона (modelValue - список regionIndex)
-- Выбор только ПС  (modelValue - список searcherKey)
-- Вывод значков ПС
-- Выбор **нескольких регионов** / **нескольких ПС** (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 '../selectorRegion';
-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;
-}