@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

package/src/components/project/project.ts

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

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

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

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

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

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

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

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

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

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

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

@@ -1,147 +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/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

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