@topvisor/ui 1.0.42-dev.2 → 1.0.42-policy.0

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

@@ -1,146 +0,0 @@
-import { computed, type ComputedRef, ref, watch } from 'vue';
-import { useI18n } from '@/core/plugins/i18n';
-import { getDeviceGIcon, getLangLabel } from '@/core/utils/searchers';
-import type { Option } from '@/components/forms/select/types';
-import { dummyIndex } from '../utils/consts';
-import type { Props, Region, SearcherIndexed } from '../types';
-
-/**
- * Создание и управление реактивными переменными для выбора региона
- *
- * @param props - входные props компонента
- * @param activeSearcherIndexed - объект активной поисковой системы (реактивная)
- */
-export const useSelectRegion = (props: Props, activeSearcherIndexed: ComputedRef<SearcherIndexed>) => {
-	const i18n = useI18n();
-
-	/**
-	 * Индекс выбранного региона
-	 */
-	const regionIndex = ref(dummyIndex);
-
-	if (props.modelValue.length === 1) {
-		regionIndex.value = props.modelValue[0];
-	}
-
-	if (regionIndex.value === dummyIndex) {
-		if (props.forFrequency) {
-			// в качетсве ключа используется region.key, а не region.index
-			regionIndex.value = activeSearcherIndexed.value?.regionByIndex.values().next().value?.key ?? dummyIndex;
-		} else {
-			regionIndex.value = activeSearcherIndexed.value?.regionByIndex.keys().next().value ?? dummyIndex;
-		}
-	}
-
-	/**
-	 * Коллекция опций для выбора региона
-	 */
-	const optionByRegionIndex = computed(() => {
-		const options = new Map<number, Option>();
-
-		activeSearcherIndexed.value.regionByIndex?.forEach((region) => {
-			let regionLabel = region.name;
-
-			// на частоту в текущей версии устройство и язык не влияют
-			// обратите внимание, в качетсве ключа используется region.key, а не region.index
-			if (props.forFrequency) {
-				const option: Option = {
-					value: region.key,
-					title: regionLabel,
-				};
-				if (!options.has(region.key)) options.set(region.key, option);
-
-				return;
-			}
-
-			if (region.device) {
-				regionLabel += ' (' + i18n.Common['Device_' + region.device] + ')';
-			}
-
-			const langLabel = getLangLabel(activeSearcherIndexed.value.key || 0, region.lang ?? '');
-			if (langLabel) regionLabel += ' / ' + langLabel;
-
-			const option: Option = {
-				value: region.index,
-				title: regionLabel,
-				icon: region.device ? getDeviceGIcon(region.device) : undefined,
-			};
-
-			options.set(region.index, option);
-		});
-
-		return options;
-	});
-
-	/**
-	 * Выбор максимально похожего региона в новой коллекции регионов
-	 */
-	watch(optionByRegionIndex, (optionByRegionIndex, oldOptionByRegionIndex) => {
-		if (props.onlySearcher || regionIndex.value !== undefined && optionByRegionIndex.get(regionIndex.value)) {
-			return;
-		}
-
-		let newRegionIndex = optionByRegionIndex.keys().next().value as Region['index'];
-		if (regionIndex.value === dummyIndex || newRegionIndex === dummyIndex) {
-			regionIndex.value = newRegionIndex;
-
-			return;
-		}
-
-		let regionName = (oldOptionByRegionIndex?.get(regionIndex.value) as Option)?.title || '';
-		let regionMatchLevel = -1;
-		for (const [index, option] of optionByRegionIndex.entries()) {
-			const title = (option as Option).title;
-
-			if (typeof title !== 'string' || typeof index === 'string') {
-				break;
-			}
-
-			// полное совпадение
-			if (title === regionName) {
-				newRegionIndex = index;
-
-				break;
-			}
-
-			const regexpDevice = new RegExp(` \\((${i18n.Common['Device_1']}|${i18n.Common['Device_2']})\\)`);
-			let regionNameCompare = regionName;
-			let regionMatchLevelI = 3;
-
-			// без устройства
-			if (title.indexOf(regionNameCompare) === -1) {
-				regionNameCompare = regionName.replace(/^[^a-zа-я]/i, '').replace(regexpDevice, '');
-
-				regionMatchLevelI--;
-			}
-
-			// без языка
-			if (title.indexOf(regionNameCompare) === -1) {
-				regionNameCompare = regionName.replace(/ \/.*/, '');
-
-				regionMatchLevelI--;
-			}
-
-			// без устройства и без языка
-			if (title.indexOf(regionNameCompare) === -1) {
-				regionNameCompare = regionName.replace(/ \/.*/, '');
-				regionNameCompare = regionNameCompare.replace(/^[^a-zа-я]/i, '').replace(regexpDevice, '');
-
-				regionMatchLevelI--;
-			}
-
-			if (title.indexOf(regionNameCompare) === -1) continue;
-			if (regionMatchLevelI <= regionMatchLevel) continue;
-
-			regionMatchLevel = regionMatchLevelI;
-			newRegionIndex = index;
-		}
-
-		regionIndex.value = newRegionIndex;
-	});
-
-	return {
-		regionIndex,
-		optionByRegionIndex,
-	};
-};

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

@@ -1,64 +0,0 @@
-import { computed, type ComputedRef, ref } from 'vue';
-import { useI18n } from '@/core/plugins/i18n';
-import type { Props, SearcherByKey } from '../types';
-import type { Option, Options } from '@/components/forms/select/types';
-import { dummyIndex, searhcerCompareKey } from '../utils/consts';
-import { getSearcherGIcon } from '@/core/utils/searchers';
-
-/**
- * Создание и управление реактивными переменными для выбора ПС
- *
- * @param props - входные props компонента
- * @param mapSearchers - Map ПС (реактивная)
- */
-export const useSelectSearcher = (
-	props: Props,
-	mapSearchers: ComputedRef<SearcherByKey>,
-) => {
-	const i18n = useI18n();
-
-	/**
-	 * Ключ выбранной поисковой системы
-	 */
-	const searcherKey = ref(mapSearchers.value.keys().next().value ?? dummyIndex);
-
-	/**
-	 * Коллекция опций для выбора ПС
-	 */
-	const optionBySearcherKey = computed(() => {
-		const res: Options = new Map();
-		mapSearchers.value.forEach((searcher) => {
-			let option: Option = {
-				value: searcher.key,
-				title: searcher.name,
-			};
-
-			if (props.addSearcherIcon) option.icon = getSearcherGIcon(searcher.key);
-
-			res.set(searcher.key, option);
-		});
-
-		// добавить режим сравнения, если есть хотя бы одна ПС с одним регионом
-		if (props.addCompare && !res.has(dummyIndex)) {
-			const dummyOption: Option = {
-				value: '',
-				title: '--------------------',
-				disabled: true,
-			};
-			res.set(dummyOption.value, dummyOption);
-
-			const compareOption: Option = {
-				value: searhcerCompareKey,
-				title: i18n.Common.Compare!,
-			};
-			res.set(compareOption.value, compareOption);
-		}
-
-		return res;
-	});
-
-	return {
-		searcherKey,
-		optionBySearcherKey,
-	};
-};

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

@@ -1,167 +0,0 @@
-import { computed, watch } from 'vue';
-import { findRegion, genSearcherByKey } from '../utils/utils';
-import { dummyIndex, globalRegionIndex, searcherUndefined, searhcerCompareKey } from '../utils/consts';
-import type { Props, Region, SearcherIndexed } from '../types';
-import { useSelectSearcher } from './selectSearcher';
-import { useSelectRegion } from './selectRegion';
-import { useCompare } from './compare';
-
-/**
- * Создание и управления рективными переменными компонента
- *
- * @param props - входные props компонента
- */
-export const useSelectorRegion = (props: Props) => {
-	const searcherByKey = computed(() => {
-		return genSearcherByKey(props.forFrequency, props.autoRegion, props.searchers);
-	});
-
-	const activeSearcherIndexed = computed(() => {
-		return searcherByKey.value.get(selectSearcher.searcherKey.value) || searcherUndefined;
-	});
-
-	/**
-	 * Все индексы регионов из searcherByKey
-	 *
-	 * Активность регионов определяется в searcherByKey
-	 */
-	const allRegionsIndexes = computed(() => {
-		const regionsIndexes = new Set<number>();
-
-		searcherByKey.value.forEach((searcher) => {
-			searcher.regionByIndex.forEach((region) => {
-				if (region.index === globalRegionIndex) return;
-				if (region.index === dummyIndex) return;
-
-				regionsIndexes.add(region.index);
-			});
-		});
-
-		return regionsIndexes;
-	});
-
-	const selectSearcher = useSelectSearcher(props, searcherByKey);
-	const selectRegion = useSelectRegion(props, activeSearcherIndexed);
-	const compare = useCompare(props, searcherByKey, allRegionsIndexes);
-
-	// контроль за внешним изменением списка ПС
-	watch(searcherByKey, () => {
-		// возможные значения для сравнения регионов/пс
-		if (props.onlySearcher) {
-			compare.regionsIndexes.value = Array.from(searcherByKey.value.keys());
-		} else {
-			compare.regionsIndexes.value = compare.regionsIndexes.value.filter(regionIndex => {
-				return allRegionsIndexes.value.has(regionIndex);
-			});
-		}
-
-		if (selectSearcher.searcherKey.value === searhcerCompareKey) return;
-
-		let newSearcherKey = searcherByKey.value.keys().next().value;
-
-		searcherByKey.value.forEach((searcher) => {
-			// определить выбранную ПС
-			if (props.onlySearcher && searcher.key === selectSearcher.searcherKey.value) {
-				newSearcherKey = selectSearcher.searcherKey.value;
-				return;
-			}
-
-			if (
-				selectRegion.regionIndex.value &&
-				searcher.regionByIndex?.has(selectRegion.regionIndex.value)
-			) {
-				newSearcherKey = searcher.key;
-			}
-
-			// выбрать первую ПС с выбранным регионом
-			if (!props.onlySearcher) {
-				let regionsNewSearcher: SearcherIndexed['regionByIndex'] | undefined;
-
-				if (newSearcherKey !== undefined) {
-					regionsNewSearcher = searcherByKey.value.get(newSearcherKey)?.regionByIndex;
-				}
-
-				const regionsCurrentSearcher = searcherByKey.value.get(searcher.key)?.regionByIndex;
-				if (
-					regionsNewSearcher?.has(dummyIndex) &&
-					!regionsCurrentSearcher?.has(dummyIndex)
-				) {
-					newSearcherKey = searcher.key;
-				}
-			}
-		});
-
-		// if (props.addCompare && !selectSearcher.optionBySearcherKey.value.has(dummyIndex)) {
-		// 	if (!selectRegion.regionIndex.value && compare.regionsIndexes.value?.length) newSearcherKey = searhcerCompareKey;
-		// }
-
-		// if (props.onlySearcher && selectRegion.regionIndex.value !== dummyIndex) newSearcherKey = selectRegion.regionIndex.value;
-
-		if (newSearcherKey !== undefined) {
-			selectSearcher.searcherKey.value = newSearcherKey;
-		}
-
-		if (
-			selectRegion.regionIndex.value !== undefined &&
-			!(activeSearcherIndexed.value?.regionByIndex)?.has(selectRegion.regionIndex.value)
-		) {
-			selectRegion.regionIndex.value = activeSearcherIndexed.value?.regions?.keys().next().value as number;
-		}
-	}, { immediate: true });
-
-	const getSearcherKey = () => {
-		if (selectSearcher.searcherKey.value === searhcerCompareKey || selectSearcher.searcherKey.value === dummyIndex) return;
-
-		return selectSearcher.searcherKey.value;
-	};
-
-	const getRegionIndex = () => {
-		if (props.onlySearcher) return;
-
-		if (selectRegion.regionIndex.value === dummyIndex) return;
-
-		let res: Region['index'] | undefined = selectRegion.regionIndex.value;
-
-		// в качестве ключа используется region.key
-		if (props.forFrequency) {
-			const regionKey = selectRegion.regionIndex.value;
-			const region = findRegion(props.forFrequency, { searcher_key: getSearcherKey(), key: regionKey } as Region, props.searchers);
-
-			res = region?.index;
-		}
-
-		return res;
-	};
-
-	/**
-	 * Получить выбранную ПС
-	 */
-	const getSearcher = () => {
-		const searcherKey = getSearcherKey();
-		if (searcherKey === undefined) return;
-
-		return searcherByKey.value.get(searcherKey);
-	};
-
-	/**
-	 * Получить выбранный регион
-	 */
-	const getRegion = () => {
-		const regionIndex = getRegionIndex();
-		if (regionIndex === undefined) return;
-
-		return getSearcher()?.regionByIndex?.get(regionIndex);
-	};
-
-	return {
-		selectSearcher,
-		selectRegion,
-		compare,
-
-		searcherByKey,
-		allRegionsIndexes,
-
-		getSearcher,
-		getRegion,
-	};
-};

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

@@ -1,252 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
-import { TopDialog, TopDialogPage, useTopDialogSelf } from '@/components/dialog/dialog';
-import { genFlagLinkByCountryCode } from '@/core/utils/string';
-import type { Props, RegionRich } from './types';
-import { getDeviceGIcon, getLangLabel, getSearcherGIcon } from '@/core/utils/searchers';
-import Core from '@/core/core/core';
-
-defineOptions({ id: 'selectorRegions' });
-
-const props = defineProps<Partial<Props>>();
-
-const dialog = useTopDialogSelf();
-
-/**
- * Список расширенных регионов для использования в компоненте
- */
-const regionsRich = ref<RegionRich[]>([]);
-
-/**
- * Ссылка на элемент с регионами
- */
-const elRegions = ref<null | HTMLElement>(null);
-
-/**
- * Направление сортировки по полю
- */
-const sortedVectorByField = reactive({
-	searcher_key: -1,
-	key: -1,
-	name: -1,
-});
-
-/**
- * Выбраны все регионы
- */
-const isAllSelected = computed({
-	get() {
-		return regionsRich.value.every(region => region.selected);
-	},
-
-	set(value) {
-		regionsRich.value = regionsRich.value.map(region => ({ ...region, selected: value }));
-	},
-});
-
-/**
- * Сортировать регионы по выбранному полю
- * @param sortedField - Поле для сортировки
- */
-const sort = (sortedField: keyof typeof sortedVectorByField) => {
-	sortedVectorByField[sortedField] = -sortedVectorByField[sortedField];
-
-	regionsRich.value.sort((regionA, regionB) => {
-		if (!regionA[sortedField] || !regionB[sortedField]) return -1;
-
-		return regionA[sortedField] >= regionB[sortedField] ? sortedVectorByField[sortedField] : -sortedVectorByField[sortedField];
-	});
-};
-
-/**
- * Применить изменения
- *
- * Вызывает callback `props['@update:regionsIndexes']`
- */
-const onSubmit = () => {
-	if (!regionsRich.value.some(region => region.selected)) return;
-
-	const regionsIndexes = regionsRich.value
-		.filter(region => region.selected)
-		.map(region => region.index);
-
-	props['@update:regionsIndexes']?.(regionsIndexes);
-
-	dialog.close();
-};
-
-// генерация регионов
-watch([
-	() => props.regions,
-	() => props.regionsIndexes,
-], () => {
-	regionsRich.value = [];
-
-	if (!props.regions) return;
-	if (!props.regionsIndexes) return;
-
-	let regions = [...props.regions];
-
-	// отсортировать регионы по входным данным
-	const orderByRegionIndex = new Map(props.regionsIndexes.map((index, order) => [index, order]));
-
-	regions.sort((regionA, regionB) => {
-		const orderA = orderByRegionIndex.get(regionA.index) ?? Number.MAX_VALUE;
-		const orderB = orderByRegionIndex.get(regionB.index) ?? Number.MAX_VALUE;
-
-		return orderA - orderB;
-	});
-
-	regions.forEach(region => {
-		let title = region.name;
-		if (region.areaName) title += ` (${region.areaName})`;
-
-		const selected = props.regionsIndexes?.includes(region.index) ?? false;
-		const searcherIcon = getSearcherGIcon(region.searcher_key);
-		const langLabel = region.lang !== undefined ? getLangLabel(region.searcher_key ?? 999, region.lang) : undefined;
-		const deviceIcon = region.device !== undefined ? getDeviceGIcon(region.device) : undefined;
-		const flagLink = region.countryCode !== undefined ? genFlagLinkByCountryCode(region.countryCode) : undefined;
-
-		const regionRich = {
-			...region,
-			selected,
-			title,
-			searcherIcon,
-			langLabel,
-			deviceIcon,
-			flagLink,
-		};
-
-		regionsRich.value.push(regionRich);
-	});
-});
-
-/**
- * Проверить на существование sortable
- */
-const onOpen = () => {
-	if (!Core.$?.ui['sortable']) {
-		console.info('Для работы сортировки требуется глобальная загрузка jQuery UI Sortable');
-
-		return;
-	}
-
-	if (!elRegions.value) return;
-
-	$(elRegions.value).sortable({
-		distance: 10,
-
-		stop: () => {
-			// Обновляем порядок регионов в массиве regionsRich после сортировки
-			const sortedIndexes = [...elRegions.value!.children].map(el => Number(el.getAttribute('data-region-index')));
-			regionsRich.value.sort((a, b) => sortedIndexes.indexOf(a.index) - sortedIndexes.indexOf(b.index));
-		},
-	});
-};
-
-/**
- * Удаление sortable
- */
-const onClose = () => {
-	if (!Core.$?.ui['sortable']) return;
-	if (!elRegions.value) return;
-
-	$(elRegions.value).sortable('destroy');
-};
-
-</script>
-
-<template>
-	<TopDialog
-		:id="dialog.id"
-		pageActive="selectorRegions"
-		class="dialog_selectorRegions"
-		height="600px"
-		width="600px"
-		@open="onOpen"
-		@close="onClose"
-	>
-		<TopDialogPage name="selectorRegions" :order="0">
-			<template #header>
-				<div class="dialog_selectorRegions_header">
-					<TopCheckbox v-model="isAllSelected"></TopCheckbox>
-
-					<TopButton
-						class="dialog_selectorRegions_sortButton"
-						color="theme"
-						data-top-icon=""
-						@click="sort('searcher_key')"
-						:title="$i18n.Projects?.Sort_by_search_engine"
-					/>
-
-					<TopButton
-						class="dialog_selectorRegions_sortButton"
-						color="theme"
-						data-top-icon=""
-						@click="sort('key')"
-						:title="$i18n.Projects?.Sort_by_yande_region_code"
-					/>
-
-					<TopButton
-						class="dialog_selectorRegions_sortButton"
-						color="theme"
-						data-top-icon=""
-						@click="sort('name')"
-						:title="$i18n.Projects?.Sort_by_lphabetically"
-					/>
-				</div>
-			</template>
-
-			<template #body>
-				<div ref="elRegions">
-					<TopCheckbox
-						v-for="region of regionsRich"
-						:key="region.index"
-						v-model="region.selected"
-						class="dialog_selectorRegions_region"
-						:data-region-index="region.index"
-					>
-						<div
-							class="dialog_selectorRegions_regionSearcherIcon"
-							:data-top-icon="region.searcherIcon"
-						></div>
-
-						<img
-							v-if="region.flagLink"
-							class="top-flag"
-							:src="'//topvisor.dev' + region.flagLink"
-							:alt="region.countryCode"
-						>
-
-						<div class="top-ellipsis">
-							{{ region.name }}
-
-							<span class="dialog_selectorRegions_regionAreaName">
-								{{ region.areaName }}
-							</span>
-						</div>
-
-						<div v-if="region.langLabel">
-							[{{ region.langLabel }}]
-						</div>
-
-						<div
-							v-if="region.deviceIcon"
-							:data-top-icon="region.deviceIcon"
-						></div>
-					</TopCheckbox>
-				</div>
-			</template>
-
-			<template #footer>
-				<TopButton @click="onSubmit">
-					{{ $i18n.Common?.Apply }}
-				</TopButton>
-			</template>
-		</TopDialogPage>
-	</TopDialog>
-</template>
-
-<style>
-@import "./style.css";
-</style>

package/src/components/project/selectorRegion/dialog_selectorRegions/style.css

@@ -1,49 +0,0 @@
-#dialog_selectorRegions .modal-body {
-	--scroll-offset-top: 40px;
-}
-
-.dialog_selectorRegions_header,
-.dialog_selectorRegions_region {
-	padding-right: 10px;
-	padding-left: 10px;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.dialog_selectorRegions_header {
-	background: inherit;
-	height: 40px;
-	padding-left: 10px;
-	gap: 2px;
-	position: sticky;
-	top: 0;
-}
-
-.dialog_selectorRegions_sortButton {
-	--top-icon-size: 18px;
-}
-
-.dialog_selectorRegions_region {
-	border-radius: var(--top-radius-2);
-}
-
-.dialog_selectorRegions_region:hover {
-	background: var(--color-bg-shading-1);
-}
-
-.dialog_selectorRegions_region .top-forms-optionLabel_title {
-	gap: 4px;
-}
-
-.dialog_selectorRegions_regionSearcherIcon {
-	--top-icon-size: 20px;
-
-	color: var(--color-text-3);
-	margin: 0 4px 0 2px;
-}
-
-.dialog_selectorRegions_regionAreaName {
-	color: var(--color-text-3);
-	font-size: var(--top-font-size-s);
-}

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

@@ -1,31 +0,0 @@
-import type { Region } from '@/components/project/selectorRegion/types';
-
-export interface Props {
-
-	/**
-	 * Список регионов
-	 */
-	regions: Region[],
-
-	/**
-	 * Выбранные регионы
-	 */
-	regionsIndexes: number[],
-
-	/**
-	 * Колбэк для emit изменения выбранных регионов
-	 */
-	'@update:regionsIndexes': (regionsIndexes: number[]) => void,
-}
-
-/**
- * Регион для шаблона
- */
-export type RegionRich = Region & {
-	selected: boolean,
-	title: string,
-	searcherIcon: string,
-	langLabel?: string,
-	deviceIcon?: string,
-	flagLink?: string,
-};