@topvisor/ui 1.1.0 → 1.2.0

package/src/components/popup/prompt/stories/overview.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import TopPopupPrompt from '@/components/popup/prompt/prompt.vue';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopupOpener from '@/components/popup/popup/opener.vue';
+</script>
+
+<template>
+	<h2>Простой TopPopupPrompt</h2>
+
+	<TopPopupPrompt
+		id="popupPrompt"
+		footer-support-link="https://topvisor.com/ru/support/bank/balance/"
+	>
+		<template #opener>
+			<TopButton>
+				Prompt
+			</TopButton>
+		</template>
+
+		<template #default>
+			<div>Введите ваше имя:</div>
+		</template>
+	</TopPopupPrompt>
+
+	<h2>Открытие TopPopupСonfirm из другого компонента</h2>
+
+	<TopPopupOpener id="popupPrompt" pos="1">
+		<TopButton>
+			Войти
+		</TopButton>
+	</TopPopupOpener>
+
+	<h2>Со значением по умолчанию</h2>
+
+	<TopPopupPrompt default-value="1000">
+		<template #opener>
+			<TopButton>
+				Оплатить
+			</TopButton>
+		</template>
+
+		<template #header>
+			Пополнение счета
+		</template>
+
+		<template #default>
+			<div>Введите сумму:</div>
+		</template>
+	</TopPopupPrompt>
+</template>

package/src/components/popup/worker.ts

@@ -0,0 +1 @@
+export { default as TopPopupWorker } from './lib/worker';

package/src/components/project/project.ts

@@ -0,0 +1,23 @@
+import type { ComponentCustomProps } from 'vue';
+
+import SelectorCompetitors from './selectorCompetitors/selectorCompetitors.vue';
+import SelectorRegion from './selectorRegion/selectorRegion.vue';
+
+import TagSelector from './tagSelector/tagSelector.vue';
+import TagSelectorPopupOpener from './tagSelector/popupOpener/popupOpener.vue';
+import TagSelectorTagIcon from './tagSelector/tagIcon/tagIcon.vue';
+
+export const TopSelectorCompetitors = SelectorCompetitors as typeof SelectorCompetitors & ComponentCustomProps;
+export { useItemsFromCompetitors } from './selectorCompetitors/composables';
+
+export { findRegion, genSearcherByKey, dialogSelectorRegions } from './selectorRegion/utils/utils';
+export const TopSelectorRegion = SelectorRegion as typeof SelectorRegion & ComponentCustomProps;
+
+export type { Emits as TopTagSelectorEmits, Tag, TagId, TagIdExclude } from './tagSelector/types';
+export {
+	genElPopupOpener as genElTopTagSelectorPopupOpener,
+	renderElPopupOpener as renderElTopTagSelectorPopupOpener,
+} from './tagSelector/utils/el';
+export const TopTagSelector = TagSelector as typeof TagSelector & ComponentCustomProps;
+export const TopTagSelectorPopupOpener = TagSelectorPopupOpener as typeof TagSelectorPopupOpener & ComponentCustomProps;
+export const TopTagSelectorTagIcon = TagSelectorTagIcon as typeof TagSelectorTagIcon & ComponentCustomProps;

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

@@ -0,0 +1,21 @@
+import type { MaybeRefOrGetter } from 'vue';
+import { computed, toValue } from 'vue';
+import type { Item } from '@/components/project/selectorCompetitors/selectorCompetitors';
+import type { Competitor } from '@/components/project/selectorCompetitors/types/competitor';
+
+export const useItemsFromCompetitors = (competitors: MaybeRefOrGetter<Competitor[]>, projectId: MaybeRefOrGetter<number>) => {
+	return computed(() => {
+		const activeCompetitors = toValue(competitors).filter(competitor => competitor.on >= 0 || competitor.id === projectId);
+
+		const items: Item[] = activeCompetitors.map(competitor => {
+			return {
+				value: competitor.id,
+				title: competitor.url + ` [${competitor.id}]`,
+				icon: competitor.id === toValue(projectId) ? '' : '',
+				content: competitor.name,
+			};
+		});
+
+		return items;
+	});
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './selectorCompetitors.vue';
+import * as ComponentsConst from './selectorCompetitors';
+import items from './stories/items';
+import ReadMe from './stories/README.md?raw';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		modelValue: [1],
+		items,
+	},
+} satisfies Story;
+
+export default meta;

package/src/components/project/selectorCompetitors/selectorCompetitors.ts

@@ -0,0 +1,27 @@
+import type { Props as ButtonProps } from '@/components/forms/button/types';
+
+export interface Props {
+	/**
+	 * Выбранные элементы меню
+	 */
+	modelValue: number[];
+
+	/**
+	 * Список кнопок со значением и текстом
+	 *
+	 * Поддерижвает все props Button
+	 */
+	items: Item[];
+
+	/**
+	 * Выводить кнопку "Выбрать все"
+	 */
+	showSelectAllItem?: boolean;
+}
+
+export interface Item extends ButtonProps {
+	value: number;
+	title?: string;
+	content: string;
+	icon?: string;
+}

package/src/components/project/selectorCompetitors/selectorCompetitors.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Props } from './selectorCompetitors';
+import Core from '@/core/core/core';
+import Button from '@/components/forms/button/button.vue';
+import Popup from '@/components/popup/popup/popup.vue';
+import ListItem from '@/components/popup/popup/listItem.vue';
+import Menu from '@/components/formsExt/menu/menu.vue';
+import { useI18n } from '@/core/plugins/i18n';
+
+const props = withDefaults(defineProps<Props>(), {
+	showSelectAllItem: true,
+});
+const model = defineModel<Props['modelValue']>();
+
+const selectAllItem = computed(() => {
+	if (props.showSelectAllItem) {
+		return {
+			icon: '',
+			title: useI18n().Common.Select_all,
+			value: 'all',
+			content: '',
+		};
+	}
+});
+</script>
+
+<template>
+	<div class="top-selectorCompetitors">
+		<Popup v-if="Core.state.isMobile">
+			<template #opener>
+				<Button
+					class="top-selectorCompetitors_opener"
+					color="theme"
+					icon=""
+					icon2=""
+				>
+					{{ items.find((item) => item.value === model?.[0])?.content }}
+				</Button>
+			</template>
+
+			<template #contentList>
+				<ListItem
+					v-for="(item, index) in items"
+					:class="{
+						'top-active': model?.includes(item.value)
+					}"
+					:data-top-icon="item.icon"
+					:title="item.title"
+					@click="() => model = [item.value]"
+				>
+					<span class="top-ellipsis1">
+						{{ item.content }}
+					</span>
+				</ListItem>
+			</template>
+		</Popup>
+
+		<Menu
+			v-else
+			v-model="model"
+			:items="items"
+			:isMultiple="true"
+			styling="bar"
+			:canBeEmptyMultiple="false"
+			:selectAllItem="selectAllItem"
+		/>
+	</div>
+</template>
+
+<style>
+.top-selectorCompetitors_opener.top-button {
+	width: 100%;
+}
+</style>

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

@@ -0,0 +1,20 @@
+Компонент выбора несольких элементов с возмоэностью выбрать все и поддержкой мобильной версии.
+
+Базируется на компонентах:
+
+- **menu**: для вывода списка в виде кнопок для ПК
+- **popup**: для вывода списка в popup для Адаптива (Core.state.isMobile)
+
+## Кнопка: "Выбрать все"
+
+Можно добавить кнпоку "Выбрать все" через `props.showSelectAllItem = true`
+
+## Утилиты
+
+**useItemsFromCompetitors()** - Генерация массива items из объектов проекта и его конкурентов
+
+## i18n
+
+Требует подключение словарей:
+
+- i18n/Common

package/src/components/project/selectorCompetitors/stories/items.ts

@@ -0,0 +1,30 @@
+import { unref } from 'vue';
+import type { Competitor } from '@/components/project/selectorCompetitors/types/competitor';
+import { useItemsFromCompetitors } from '@/components/project/selectorCompetitors/composables';
+import { faker } from '@faker-js/faker';
+
+const competitors: Competitor[] = [] as const;
+
+competitors.push({
+	id: faker.number.int(),
+	name: 'My stie',
+	site: 'example.com',
+	on: 1,
+	url: 'example.com',
+});
+
+for (let i = 1; i <= 5; i++) {
+	const name = faker.company.name();
+
+	competitors.push({
+		id: faker.number.int(),
+		name: name,
+		site: 'example.com',
+		on: 1,
+		url: 'example.com/' + name.replaceAll(' ', '-'),
+	});
+}
+
+const items = useItemsFromCompetitors(competitors, competitors[0].id);
+
+export default unref(items);

package/src/components/project/selectorCompetitors/types/competitor.ts

@@ -0,0 +1,7 @@
+export type Competitor = {
+	id: number,
+	name: string,
+	site: string,
+	on: 0 | 1,
+	url: string
+};

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

@@ -0,0 +1,87 @@
+import { type ComputedRef, ref, watch } from 'vue';
+import type { Props, SearcherByKey } from '../selectorRegion';
+
+/**
+ * Создание и управление реактивными переменными для сравнения
+ *
+ * @param props - входные props компонента
+ * @param searcherByKey - Map ПС (реактивная)
+ * @param allRegionsIndexes - Все доступные индексы регионов (реактивная)
+ */
+export const useCompare = (props: Props, searcherByKey: ComputedRef<SearcherByKey>, allRegionsIndexes: ComputedRef<Set<number>>) => {
+	/**
+	 * Индексы регионов/ПС в сравнение
+	 */
+	const regionsIndexes = ref<number[]>([]);
+
+	/**
+	 * Загрузка индексов регионов для сравнения
+	 *
+	 * Если в modelValue передано несколько регионов, они будут установлены как выбранные для сравнения
+	 */
+	const compareLoad = () => {
+		if (props.onlySearcher && searcherByKey.value) {
+			regionsIndexes.value = Array.from(searcherByKey.value.keys());
+
+			return;
+		}
+
+		let regionsIndexesSaved: Props['modelValue'] = [];
+
+		if (props.modelValue.length > 1) {
+			regionsIndexesSaved = [...props.modelValue];
+		} else {
+			try {
+				// загрузить индексы регионов, если они были сохранены
+				regionsIndexesSaved = JSON.parse(
+					localStorage.getItem('ui:project:regionSelector' + props.projectId + ':regionsIndexes') as string,
+				) ?? [];
+			} catch (e) {
+
+			}
+		}
+
+		// убрать из сравнения регионы, которых нет в props.searchers
+		if (regionsIndexesSaved.length) {
+			regionsIndexesSaved = regionsIndexesSaved.filter((regionIndex) => {
+				return allRegionsIndexes.value.has(regionIndex);
+			});
+		}
+
+		// если не сохранено ни одного региона, выбрать все регионы проекта
+		if (!regionsIndexesSaved.length) {
+			regionsIndexesSaved = Array.from(allRegionsIndexes.value);
+		}
+
+		regionsIndexes.value = [...regionsIndexesSaved];
+	};
+
+	/**
+	 * Сохранение выбранных регионов
+	 */
+	const compareSave = () => {
+		if (regionsIndexes.value.length) {
+			localStorage.setItem('ui:project:regionSelector:' + props.projectId + ':regionsIndexes', JSON.stringify(regionsIndexes.value));
+		} else {
+			localStorage.removeItem('ui:project:regionSelector:' + props.projectId + ':regionsIndexes');
+		}
+	};
+
+	watch(regionsIndexes, () => {
+		compareSave();
+	});
+
+	if (props.addCompare) {
+		// if (props.compareRegionsIndexes?.length) {
+		// 	compareRegionsIndexes.value = [...props.compareRegionsIndexes];
+		// } else {
+		// 	compareLoad();
+		// }
+
+		compareLoad();
+	}
+
+	return {
+		regionsIndexes,
+	};
+};

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

@@ -0,0 +1,147 @@
+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/select';
+import { dummyIndex } from '../utils/consts';
+import type { Props, Region, SearcherIndexed } from '../selectorRegion';
+
+/**
+ * Создание и управление реактивными переменными для выбора региона
+ *
+ * @param props - входные props компонента
+ * @param activeSearcherIndexed - объект активной поисковой системы (реактивная)
+ * @param regionsIndexes - входные индексы регионов/ПС
+ */
+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

@@ -0,0 +1,64 @@
+import { computed, type ComputedRef, ref } from 'vue';
+import { useI18n } from '@/core/plugins/i18n';
+import type { Props, SearcherByKey } from '../selectorRegion';
+import type { Option, Options } from '@/components/forms/select/select';
+import { dummyIndex } 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: -1,
+				title: i18n.Common.Compare!,
+			};
+			res.set(compareOption.value, compareOption);
+		}
+
+		return res;
+	});
+
+	return {
+		searcherKey,
+		optionBySearcherKey,
+	};
+};