@topvisor/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,209 @@
+<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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,145 @@
+<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

@@ -0,0 +1,71 @@
+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>,
+}