@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,73 +0,0 @@
-import type { Region, SearcherIndexed } from '../selectorRegion';
-import { useI18n } from '@/core/plugins/i18n';
-
-export const dummyIndex = -2;
-
-export const searchersNames = {
-	0: 'Yandex',
-	1: 'Google',
-	4: 'YouTube',
-	5: 'Bing',
-	7: 'Seznam',
-	8: 'AppStore',
-	9: 'GoogleStore',
-	20: 'Yandex.com',
-	21: 'Yandex.com.tr',
-};
-
-export const regionUndefined: Region = {
-	key: dummyIndex,
-	name: '--',
-	index: dummyIndex,
-};
-
-export const searcherUndefined: SearcherIndexed = {
-	key: dummyIndex,
-	name: '--',
-	regions: [regionUndefined],
-	regionByIndex: new Map([[dummyIndex, regionUndefined]]),
-};
-
-const regionAuto: Region = {
-	key: dummyIndex,
-	name: 'Autoselect',
-	index: dummyIndex,
-};
-
-const searcherAuto: SearcherIndexed = {
-	key: dummyIndex,
-	name: 'Autoselect',
-	regions: [regionAuto],
-	regionByIndex: new Map([[dummyIndex, regionAuto]]),
-};
-
-const regionGlobal: Region = {
-	countryCode: '00',
-	depth: 1,
-	device: 0,
-	key: -1,
-	index: -1,
-	lang: 'ru',
-	name: 'Without region',
-};
-
-export const getRegionAuto = () => {
-	regionAuto.name = useI18n().Common.Autoselect!;
-
-	return regionAuto;
-};
-
-export const getSearcherAuto = () => {
-	getRegionAuto();
-
-	searcherAuto.name = useI18n().Common.Autoselect!;
-	console.log(searcherAuto);
-
-	return searcherAuto;
-};
-
-export const getRegionGlobal = () => {
-	regionGlobal.name = useI18n().Keywords.Without_region!;
-
-	return regionGlobal;
-};

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

@@ -1,167 +0,0 @@
-import type { Region, Searcher, SearcherByKey, SearcherIndexed } from '../selectorRegion';
-import { dummyIndex, getRegionGlobal, getSearcherAuto, regionUndefined, searchersNames, searcherUndefined } from './consts';
-import { useAsyncTopDialog } from '@/components/dialog/dialog/composables/utils';
-
-/**
- * Генерация Map ПС с Map регионов из массива searchers
- * - ключ для ПС - searcherKey
- * - ключ для региона - regionIndex
- *
- * Если поисковиков в списке нет, в список будет добавлен searcherUndefined
- *
- * Если регионов в списке нет, в список будет добавлен regionUndefined
- *
- * @param forFrequency - получить массив для просмотра частоты (или ставок)
- * @param autoRegion - добавить элемент с ключем -2, который в API заменяется на нужный ключ в зависимости от контекста
- * @param searchers - поисковики с регионами проекта, см.: get/projects_2/projects, show_searchers_and_regions = 1
- */
-export const genSearcherByKey = (
-	forFrequency: boolean = false,
-	autoRegion: boolean = false,
-	searchers: Searcher[] = [],
-) => {
-	let searcherByKey: SearcherByKey;
-
-	if (forFrequency) {
-		searcherByKey = genSearchersMapVolume(searchers);
-	} else {
-		searcherByKey = genSearchersMapCommon(searchers);
-	}
-
-	if (autoRegion) searcherByKey.set(dummyIndex, getSearcherAuto());
-	if (!searcherByKey.size) searcherByKey.set(dummyIndex, searcherUndefined);
-
-	return searcherByKey;
-};
-
-/**
- * Список ПС с регионами
- *
- * @param searchers
- * @param onlyEnabledRegions
- * @param forceSearchersKeys - ключи ПС, которые нееобходимо вывести в любом случае
- * @param forFrequency - для частоты будут выводиться только Яндекс, Google и Mail
- */
-const genSearchersMapCommon = (
-	searchers: Searcher[],
-	onlyEnabledRegions: boolean = true,
-	forceSearchersKeys: Searcher['key'][] = [],
-	forFrequency: boolean = false,
-) => {
-	const searcherByKey: Map<Searcher['key'], SearcherIndexed> = new Map();
-
-	// настроенные ПС
-	searchers.forEach((searcher) => {
-		if (!searcher.enabled) return;
-		if (forFrequency && typeof searcher.key === 'number' && searcher.key > 1) return;
-
-		const searcherI = { ...searcher } as SearcherIndexed;
-		searcherI.regionByIndex = new Map();
-
-		if (searcher.regions) {
-			searcher.regions.forEach((region: Region) => {
-				if (onlyEnabledRegions && !region.enabled) return;
-
-				const regionI = { ...region };
-				searcherI.regionByIndex.set(regionI.index, regionI);
-			});
-		}
-
-		if (!searcherI.regionByIndex.size && !forceSearchersKeys.length) {
-			searcherI.regionByIndex.set(regionUndefined.index, regionUndefined);
-		}
-
-		if (typeof searcherI.key === 'number') searcherByKey.set(searcherI.key, searcherI);
-	});
-
-	// дополнительные ПС
-	forceSearchersKeys.forEach((searcherKey) => {
-		if (searcherByKey.has(searcherKey)) return;
-
-		const searcherI: SearcherIndexed = {
-			key: searcherKey,
-			name: searchersNames[searcherKey],
-			regions: [],
-			regionByIndex: new Map(),
-		};
-
-		searcherByKey.set(searcherI.key, searcherI);
-	});
-
-	return searcherByKey;
-};
-
-/**
- * Список ПС с регионами для проверки частоты (Яндекс, Google, Mail если добавлен в проект)
- *
- * @param searchers
- */
-const genSearchersMapVolume = (searchers: Searcher[]) => {
-	const serarcherByKey = genSearchersMapCommon(searchers, false, [0, 1], true);
-
-	// в Mail нет регионов
-	if (serarcherByKey.has(2)) {
-		const searcherMail = serarcherByKey.get(2);
-		if (searcherMail) searcherMail.regionByIndex = new Map();
-	}
-
-	// добавление глобального региона
-	serarcherByKey.forEach((searcher) => {
-		if (!searcher.regionByIndex) return;
-
-		const region = { ...getRegionGlobal() };
-		searcher.regionByIndex.set(region.index, region);
-	});
-
-	return serarcherByKey;
-};
-
-/**
- * Поиск региона по заданному критерию из списка поисковиков проекта
- *
- * @param forFrequency - поиск региона для просмотра частоты или ставок
- * @param searchRegion - объект с параметрами региона, который следует найти
- * @param searchers
- */
-export const findRegion = (forFrequency: boolean, searchRegion: Partial<Region>, searchers: Searcher[] = []) => {
-	const searcherByKey = genSearcherByKey(forFrequency, false, searchers);
-
-	let findedRegion: Region | undefined;
-
-	// поиск ПС
-	searcherByKey.forEach((searcher) => {
-		if (searchRegion.searcher_key !== undefined && searchRegion.searcher_key != searcher.key) return;
-		if (!searcher.regions) return;
-
-		// поиск региона
-		searcher.regions.forEach((region) => {
-			if (findedRegion) return;
-
-			if (searchRegion.key !== undefined && searchRegion.key != region.key) return;
-			if (searchRegion.index !== undefined && searchRegion.index != region.index) return;
-
-			if (!forFrequency) {
-				if (searchRegion.lang !== undefined && searchRegion.lang != region.lang) return;
-				if (searchRegion.device !== undefined && searchRegion.device != region.device) return;
-			}
-
-			region.searcher_key = searcher.key;
-			findedRegion = region;
-
-			return false;
-		});
-
-		if (findedRegion) return false;
-	});
-
-	return findedRegion;
-};
-
-/**
- * Открыть диалоговое окно с выбором нескольких регионов
- *
- * @see import('../dialog_selectorRegions/types').Props
- */
-export const dialogSelectorRegions = useAsyncTopDialog(() => {
-	return import('@/components/project/selectorRegion/dialog_selectorRegions/dialog_selectorRegions.vue');
-});

package/src/components/project/tagSelector/popupListItem/tagPopupListItem.vue

@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref } from 'vue';
-import type { Emits, Props } from './types';
-import TopTagIcon from '../tagIcon/tagIcon.vue';
-import TopPopupListItem from '@/components/popup/popup/listItem.vue';
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-const name = defineModel<Props['name']>('name', {
-	required: true,
-});
-
-const elName = ref<HTMLElement | null>(null);
-
-/**
- * @todo Удалить через пол года после выхода версии firefox с поддержкой contenteditable plaintext-only, включая бета версии
- */
-const firefoxProps = computed(() => {
-	if (navigator.userAgent.indexOf('Firefox') != -1) {
-
-		return {
-			contenteditable: inEdit.value,
-			onpaste: (event: Event) => event.preventDefault(),
-		};
-	}
-
-	return {};
-});
-
-/**
- * Включен режим редактирвоания
- */
-const inEdit = ref(false);
-
-/**
- * Включить режим редактирование
- */
-const turnToEdit = async () => {
-	inEdit.value = true;
-
-	await nextTick();
-
-	elName.value?.focus();
-};
-
-/**
- * Применить редактирование
- */
-const editCommit = () => {
-	const name = elName.value?.innerText;
-	if (!name) return editCancel();
-
-	if (elName.value) elName.value.innerText = name;
-
-	inEdit.value = false;
-
-	emit('update:name', name);
-};
-
-/**
- * Отменить редактирование
- */
-const editCancel = async () => {
-	if (elName.value) elName.value.innerText = props.name;
-
-	inEdit.value = false;
-};
-
-/**
- * Применить выбор
- */
-const changeSelect = (e: MouseEvent) => {
-	// в режиме редактирования выбор не применяется
-	if (inEdit.value) return;
-
-	// тег запрещено выбирать
-	if (props.disabled) return;
-
-	let toState: Props['state'] = 'selected';
-
-	if (props.canExclude) {
-		if (e.ctrlKey || e.metaKey) {
-			toState = 'excluded';
-		}
-	}
-
-	if (props.state == toState) {
-		toState = '';
-	}
-
-	if (toState === '') emit('unselect');
-	if (toState === 'selected') emit('select');
-	if (toState === 'excluded') emit('exclude');
-};
-</script>
-
-<template>
-	<TopPopupListItem
-		:class="{
-			'top-tagSelector_tagListItem': true,
-			'top-tagSelector_tagListItem-inEdit': inEdit,
-			'top-tagSelector_tagListItem-disabled': disabled,
-			'top-tagSelector_tagListItem-canExclude': canExclude,
-			'top-tagSelector-active': !!state,
-			'top-tagSelector-excluded': state === 'excluded'
-		}"
-		@click.stop="changeSelect"
-	>
-		<TopTagIcon
-			:id
-			:name
-			:colorId
-			:state
-		/>
-
-		<span
-			ref="elName"
-			class="top-tagSelector_tagListItemName"
-			:contenteditable="inEdit ? 'plaintext-only' : false"
-			:="firefoxProps"
-			@keydown.enter.stop="editCommit"
-			@keydown.esc.stop="editCancel"
-		>
-			{{ name }}
-		</span>
-
-		<template v-if="editable">
-			<span
-				v-if="!inEdit"
-				data-top-icon=""
-				class="top-tagSelector_edit"
-				@click="turnToEdit"
-			></span>
-
-			<span
-				v-else
-				data-top-icon=""
-				class="top-tagSelector_edit"
-				@click.stop="editCommit"
-			></span>
-		</template>
-	</TopPopupListItem>
-</template>
-
-<style>
-.top-tagSelector_tagListItem.top-popup_listItem {
-	padding-top: var(--top-padding-2) !important;
-	padding-bottom: var(--top-padding-2) !important;
-	gap: 10px;
-}
-
-.top-tagSelector_tagListItemName {
-	border-radius: var(--top-radius-1);
-	width: 120px;
-	padding: 4px 2px;
-	margin: -4px -2px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	flex-grow: 1;
-}
-
-/* редактирование */
-.top-tagSelector_edit {
-	--top-icon-size: 18px;
-	--top-icon-color: var(--color-text-3);
-
-	width: 20px;
-	flex-grow: 0;
-}
-
-.top-tagSelector_edit:before {
-	line-height: 0;
-}
-
-.top-tagSelector_edit { opacity: 0; }
-.top-tagSelector_edit:hover {
-	--top-icon-color: var(--color-text-primary);
-}
-
-.top-tagSelector_tagListItem:hover .top-tagSelector_edit,
-.top-tagSelector_tagListItem-inEdit .top-tagSelector_edit {
-	cursor: pointer;
-	opacity: 1;
-}
-
-.top-tagSelector_tagListItem-inEdit {
-	background: var(--color-layout-front-3) !important;
-	outline: 1px dashed var(--color-line-2);
-	outline-offset: -1px;
-}
-
-.top-tagSelector_tagListItem-inEdit .top-tagSelector_tagListItemName {
-	cursor: text;
-	background: var(--color-layout-front-1);
-}
-
-/* disabled */
-.top-tagSelector_tagListItem-disabled {
-	cursor: not-allowed !important;
-	opacity: 0.85;
-}
-.top-tagSelector_tagListItem-disabled:hover {
-	background: inherit;
-}
-.top-tagSelector_tagListItem-disabled [data-tag_id] {
-	opacity: 0.6;
-}
-</style>

package/src/components/project/tagSelector/popupListItem/types.ts

@@ -1,40 +0,0 @@
-import type { Props as TagIconProps } from '../tagIcon/types';
-
-export interface Props extends TagIconProps {
-	/**
-	 * Можно ли изментять тег
-	 */
-	editable?: boolean;
-
-	/**
-	 * Запретить выбор тега
-	 */
-	disabled?: boolean;
-
-	/**
-	 * Можно ли исключать
-	 */
-	canExclude?: boolean;
-}
-
-export type Emits = {
-	/**
-	 * Изменить имя
-	 */
-	'update:name': [name: string];
-
-	/**
-	 * Сбросить статус выбора тега
-	 */
-	unselect: [];
-
-	/**
-	 * Исключить тег
-	 */
-	exclude: [];
-
-	/**
-	 * Выбрать тег
-	 */
-	select: [];
-}

package/src/components/project/tagSelector/popupOpener/popupOpener.vue

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import type { Props, TagSelectorTarget } from './types';
-import TopPopupOpener from '../../../popup/popup/opener.vue';
-import TopButton from '@/components/forms/button/button.vue';
-import { genTagIdClear, getTagById } from '../utils/utils';
-import TopTagIcon from '../tagIcon/tagIcon.vue';
-
-defineOptions({
-	inheritAttrs: false,
-});
-
-const props = defineProps<Props>();
-
-const model = defineModel<Props['modelValue']>({
-	required: true,
-});
-
-const component = props.useTopButton ? TopButton : 'div';
-const componentSlotName = props.useTopButton ? 'html' : 'default';
-
-const topTagSelectorTarget: TagSelectorTarget = {
-	model,
-	mode: props.mode,
-	targetId: props.targetId,
-	filters: props.filters,
-	payload: props.payload,
-};
-</script>
-
-<template>
-	<TopPopupOpener :id>
-		<component
-			:is="component"
-			:class="{
-				'top-tagSelector': true,
-				'top-tagSelector-filter': props.mode === 'filter',
-				'top-tagSelector-setter_single': props.mode === 'setter' && !filters,
-				'top-tagSelector-setter_several': props.mode === 'setter' && filters,
-				'top-tagSelector-selectedOne': !model.length || model.length === 1,
-				'top-tagSelector-toTwoLine': model.length > 5,
-			}"
-			color="theme"
-			styling=""
-			v-top-data:topTagSelectorTarget="topTagSelectorTarget"
-			:=$attrs
-		>
-			<template #[componentSlotName]>
-				<TopTagIcon
-					v-if="!model.length && mode === 'filter'"
-					id="all"
-					colorId=""
-					:name="$i18n.Common.All_tags ?? ''"
-					state=""
-				/>
-
-				<!-- Массовое редактирование -->
-				<div v-if="mode === 'setter' && filters">
-					<slot></slot>
-				</div>
-
-				<!-- Список тегов -->
-				<TopTagIcon
-					v-else
-					v-for="tagId in model"
-					:id="genTagIdClear(tagId)"
-					:colorId="getTagById(tagId, tags)?.color_id ?? ''"
-					:name="getTagById(tagId, tags)?.name ?? ''"
-					:state="genTagIdClear(tagId) === tagId ? 'selected' : 'excluded'"
-				/>
-			</template>
-		</component>
-	</TopPopupOpener>
-</template>
-
-<style>
-.top-tagSelector {
-	cursor: pointer;
-	min-width: 0;
-	white-space: nowrap;
-	justify-content: left;
-}
-
-.top-tagSelector.top-button {
-	width: 112px;
-	vertical-align: middle;
-}
-
-.top-tagSelector.top-button.top-select_arrow {
-	width: calc(112px + 20px);
-}
-
-.top-tagSelector-filter {
-	gap: var(--top-gap-1);
-}
-
-/* все теги в фильтре */
-.top-tagSelector-filter [data-tag_id="all"] {
-	margin-left: 0;
-}
-.top-tagSelector-filter [data-tag_id="all"]:before {
-	border: none;
-	margin-left: 3px;
-	opacity: 0.5;
-}
-
-/* фильтр по одному тегу */
-.top-tagSelector-filter.top-tagSelector-selectedOne [data-tag_id]:after {
-	content: attr(title);
-	margin-left: 20px;
-	min-width: 74px;
-	text-align: left;
-	line-height: 1.2;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.top-tagSelector-filter.top-tagSelector-selectedOne [data-tag_id="all"]:after {
-	margin-left: 0;
-}
-
-/* фильтр по многим тегам */
-.top-button.top-tagSelector-filter.top-tagSelector-toTwoLine {
-	flex-wrap: wrap;
-	align-content: center;
-}
-
-.top-button.top-tagSelector-filter.top-tagSelector-toTwoLine [data-tag_id] {
-	--top-tag-selector-size: 8px;
-}
-
-.top-button.top-tagSelector-filter.top-tagSelector-toTwoLine [data-tag_id]:nth-child(5) {
-	margin-right: 5px;
-}
-
-/* установка тегов */
-.top-tagSelector-setter_single {
-	position: relative;
-	display: flex !important; flex-direction: column; flex-wrap: wrap; align-items: stretch !important;
-}
-
-.top-tagSelector-setter_single [data-tag_id] {
-	width: auto; min-height: 20%; min-width: 50%;
-	flex: 1 1 auto;
-}
-</style>

package/src/components/project/tagSelector/popupOpener/types.ts

@@ -1,71 +0,0 @@
-import type { ModelRef, Ref } from 'vue';
-import type { Props as TagSelectorProps, Tag } from '../types';
-
-export type TagSelectorTarget = {
-	model: ModelRef<TagSelectorProps['modelValue']> | Ref<TagSelectorProps['modelValue']>,
-	mode: Props['mode']
-	targetId: Props['targetId'],
-	filters: Props['filters'],
-	payload: Props['payload'],
-};
-
-export interface Props {
-	/**
-	 * Список выбранных тегов
-	 *
-	 * Настройка происходит в TopTagSelector, после открытия popup с помощью кнопки данного компонента
-	 */
-	modelValue: TagSelectorProps['modelValue'];
-
-	/**
-	 * Уникальный id для взаимодейсвтия с компонентом TopTagSelectorSetter
-	 *
-	 * Этот компонент может работать только с TopTagSelectorSetter с `props.id`
-	 */
-	id: string;
-
-	/**
-	 * Список возможных тегов
-	 */
-	tags: Tag[];
-
-	/**
-	 * Режим работы:
-	 * - `filter`: для фильтра (как правило, 1 элемент на 1 подключение TopTagSelector)
-	 * - `setter`: для установки тегов объекту (как правило, N элементов на 1 подключение TopTagSelector)
-	 */
-	mode: 'filter' | 'setter';
-
-	/**
-	 * id целевого объекта, к которому привязываются теги
-	 *
-	 * Для режима `setter`
-	 *
-	 * Нельзя использовать вместе с `filters`
-	 */
-	targetId?: number | string;
-
-	/**
-	 * Фильтры для настройки тегов
-	 *
-	 * Для режима `setter`
-	 *
-	 * При указании фильтров, будет включен режим массового редактирования
-	 *
-	 * Нельзя использовать вместе с `targetId`
-	 */
-	filters?: [];
-
-	/**
-	 * Использовать TopButton для выбора тегов
-	 *
-	 * - TopButton удобно использовать для фильтров и форма
-	 * - Не TopButton удобно использовать, когда надо сделать вывод выбранных тегов в произвольном дизайне
-	 */
-	useTopButton?: boolean;
-
-	/**
-	 * Полезная нагрузка, при редактировании целевого объекта
-	 */
-	payload?: Record<string, any>,
-}