@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/src/components/formsExt/navigationMenu/stories/items.ts

@@ -1,116 +0,0 @@
-import type { PropsItem } from '../navigationMenu';
-
-const items: PropsItem[] = [
-	{
-		id: 1,
-		url: '/ru/support/start/',
-		title: 'С чего начать',
-		icon: '',
-		subitems: [
-			{
-				id: 2,
-				url: '/ru/support/start/create/',
-				title: 'Начало работы в сервисе',
-				icon: '',
-				subitems: [],
-			},
-			{
-				id: 3,
-				url: '/ru/support/start/ticket-request-system/',
-				title: 'Тикет-система',
-				icon: '',
-				subitems: [
-					{
-						id: 4,
-						url: '/ru/support/start/ticket-request-system/errors/',
-						title: 'Ошибки на сайте',
-						icon: '',
-						subitems: [],
-					},
-				],
-			},
-			{
-				id: 5,
-				url: '/ru/support/start/shortcuts/',
-				title: 'Горячие клавиши',
-				icon: '',
-				subitems: [],
-			},
-		],
-	},
-	{
-		id: 6,
-		url: '/ru/support/account/',
-		title: 'Аккаунт пользователя',
-		icon: '',
-		subitems: [
-			{
-				id: 7,
-				url: '/ru/support/account/settings/',
-				title: 'Настройки аккаунта',
-				icon: '',
-				subitems: [],
-			},
-			{
-				id: 8,
-				url: '/ru/support/account/import/',
-				title: 'Импорт проектов из другого сервиса',
-				icon: '',
-				subitems: [
-					{
-						id: 9,
-						url: '/ru/support/account/import/keycollector/',
-						title: 'Key Collector',
-						icon: '',
-						subitems: [],
-					},
-				],
-			},
-			{
-				id: 10,
-				url: '/ru/support/account/multilogin/',
-				title: 'Мультилогин',
-				icon: '',
-				subitems: [],
-			},
-			{
-				id: 11,
-				url: '/ru/support/account/branding/',
-				title: 'Брендирование отчетов',
-				icon: '',
-				subitems: [],
-			},
-			{
-				id: 12,
-				url: '/ru/support/account/export/',
-				title: 'Экспорт проверок',
-				icon: '',
-				subitems: [],
-			},
-		],
-	},
-	{
-		id: 13,
-		url: '/ru/support/projects/',
-		title: 'Список проектов',
-		icon: '',
-		subitems: [
-			{
-				id: 14,
-				url: '/ru/support/projects/tags/',
-				title: 'Папки и теги',
-				icon: '',
-				subitems: [],
-			},
-			{
-				id: 15,
-				url: '/ru/support/projects/archive/',
-				title: 'Архив. Куда мог пропасть проект',
-				icon: '',
-				subitems: [],
-			},
-		],
-	},
-];
-
-export default items;

package/src/components/formsExt/radioGroup/radioGroup.stories.ts

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './radioGroup.vue';
-import * as ComponentsConst from './radioGroup';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	args: {
-		modelValue: '',
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		radiosProps: [
-			{
-				value: '0',
-				title: 'ПК',
-				icon: '',
-			},
-			{
-				value: '1',
-				title: 'Планшет',
-				icon: '',
-			},
-			{
-				value: '2',
-				title: 'Смартфон',
-				icon: '',
-			},
-		],
-	},
-} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: {
-		size: 's',
-		showIndicator: false,
-		isError: false,
-	},
-}, OverviewComponent);
-
-export default meta;

package/src/components/formsExt/radioGroup/radioGroup.ts

@@ -1,28 +0,0 @@
-import type { Size } from '@/components/forms/helpers';
-import { sizes } from '@/components/forms/helpers';
-
-export interface Props {
-	modelValue: string;
-
-	/**
-	 * Массив props для вставки radioGroupItem
-	 */
-	radiosProps?: ItemProps[];
-
-	showIndicator?: boolean;
-	size?: Size;
-	isError?: boolean;
-}
-
-export interface Emits {
-	(e: 'update:modelValue', value: Props['modelValue']): void;
-}
-
-export interface ItemProps {
-	value: Props['modelValue'];
-	title: string;
-	icon?: string;
-	disabled?: boolean;
-}
-
-export { sizes };

package/src/components/formsExt/radioGroup/radioGroup.vue

@@ -1,146 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from '@vue/reactivity';
-import { ref, watch } from 'vue';
-import type { Props, Emits } from './radioGroup';
-
-const model = defineModel<string>({
-	required: true,
-});
-
-const props = withDefaults(defineProps<Props>(), {
-	size: 's',
-});
-
-const emit = defineEmits<Emits>();
-
-const elRef: Ref<HTMLElement | null> = ref(null);
-
-watch(model, () => {
-	if (!props.radiosProps?.some(item => item.value === model.value)) {
-		model.value = props.radiosProps?.[0]?.value ?? '';
-	}
-
-	elRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();
-}, { immediate: true });
-
-const uid = 'radioGroup-' + Math.random();
-</script>
-
-<template>
-	<div
-		ref="elRef"
-		:class="{
-			['top-radioGroup']: true,
-			['top-scrollBarXHidding']: true,
-			['top-size_' + size]: !!size,
-			['top-error']: isError,
-		}"
-	>
-		<label
-			v-for="item of radiosProps"
-			:class="{
-				['top-radioGroup_item-selected']: item.value === model,
-				['top-radioGroup_item']: true,
-				['top-forms-focusable']: true,
-				['top-disabled']: item.disabled,
-			}"
-			:data-top-icon="item.icon"
-			@click="model = item.value"
-		>
-			{{ item.title }}
-
-			<span
-				v-if="showIndicator"
-				class="top-radioGroup_circle"
-			></span>
-
-			<!-- Для нативной навигации -->
-			<input
-				v-model="model"
-				:name="uid"
-				type="radio"
-				:class="{
-					['top-unvisible']: true,
-				}"
-				:value="item.value"
-				:disabled="item.disabled"
-			/>
-		</label>
-	</div>
-</template>
-
-<style>
-@import "./styles/top-scrollBar.css";
-
-.top-radioGroup {
-	user-select: none;
-	box-sizing: border-box;
-	border-radius: 8px;
-	background-color: var(--color-layout-middle);
-	height: var(--top-forms-base-height);
-	padding: 2px;
-	gap: 2px;
-	display: flex;
-	align-items: flex-start;
-}
-
-.top-radioGroup_item {
-	color: var(--color-text-2);
-	cursor: pointer;
-	box-sizing: border-box;
-	border-radius: 6px;
-	height: calc(var(--top-forms-base-height) - 4px);
-	padding: 0 16px;
-	font-weight: 400;
-	white-space: nowrap;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-grow: 1;
-	gap: 4px;
-}
-
-.top-radioGroup_item:hover {
-	background-color: var(--color-layout-front-1);
-	box-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);
-}
-
-/* selected */
-.top-radioGroup_item-selected {
-	color: var(--color-text-1);
-	pointer-events: none;
-	background-color: var(--color-bg-lightning-1);
-	box-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);
-}
-
-/* circle */
-.top-radioGroup_circle {
-	content: "";
-	box-sizing: border-box;
-	border: 1px solid var(--color-line-3-opacity);
-	border-radius: 50%;
-	padding: 3px;
-	margin-left: auto;
-	width: calc(var(--top-forms-option-height) - 3px * 2);
-	height: calc(var(--top-forms-option-height) - 3px * 2);
-}
-
-.top-radioGroup_item:hover .top-radioGroup_circle:before {
-	border-color: var(--color-line-primary-1);
-}
-
-/* circle selected */
-.top-radioGroup_item-selected .top-radioGroup_circle {
-	border-color: var(--color-line-primary-1);
-	border-width: 5px;
-}
-
-.top-radioGroup_item-selected:hover .top-radioGroup_circle {
-	border-color: var(--color-line-primary-1);
-}
-
-/* top-error  */
-.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {
-	border-color: var(--color-line-negative-1);
-}
-</style>

package/src/components/formsExt/radioGroup/stories/overview.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { Props } from '../radioGroup';
-import RadioGroup from '../radioGroup.vue';
-
-defineProps<Props>();
-
-const modelValue1 = ref('1');
-const modelValue2 = ref('3');
-
-const radiosProps1 = [
-	{
-		value: '0',
-		title: 'ПК',
-	},
-	{
-		value: '1',
-		title: 'Планшет',
-	},
-	{
-		value: '2',
-		title: 'Смартфон',
-	},
-	{
-		value: '3',
-		title: 'Книга',
-		disabled: true,
-	},
-];
-
-const radiosProps2 = [
-	{
-		value: '0',
-		title: 'ПК',
-		icon: '',
-	},
-	{
-		value: '1',
-		title: 'Планшет',
-		icon: '',
-	},
-	{
-		value: '2',
-		title: 'Смартфон',
-		icon: '',
-	},
-	{
-		value: '3',
-		title: 'Книга',
-		icon: '',
-		disabled: true,
-	},
-];
-</script>
-
-<template>
-	<div>
-		<h2>Стандартный вид</h2>
-
-		<RadioGroup
-			:="$props"
-			v-model="modelValue1"
-			:radiosProps="radiosProps1"
-		/>
-
-		<p><b>Ваш выбор:</b> {{ modelValue1 }}</p>
-
-		<h2>Со значками</h2>
-
-		<RadioGroup
-			:="$props"
-			v-model="modelValue2"
-			:radiosProps="radiosProps2"
-		/>
-
-		<p><b>Ваш выбор:</b> {{ modelValue2 }}</p>
-	</div>
-</template>

package/src/components/formsExt/radioGroup/styles/top-scrollBar.css

@@ -1,52 +0,0 @@
-/* Стили для горизонтального скроллбара top-scrollBarXHidding*/
-/* top-scrollBarXHidding - добавляет скроллбар, если он нужен. Скроллбар появится при hover */
-/* чтобы эффект работал, родитель должен иметь фиксированную высоту */
-.top-scrollBarXHidding {
-	scrollbar-width: none;
-	overflow-x: auto;
-	overflow-y: hidden;
-}
-
-.top-scrollBarXHidding:hover {
-	scrollbar-width: thin;
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar {
-	height: 6px;
-	display: none;
-}
-
-.top-scrollBarXHidding:hover::-webkit-scrollbar {
-	display: block;
-	scrollbar-width: thin;
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-track {
-	background-color: transparent;
-	box-shadow: inset rgba(0, 0, 0, 0.06) 0 0 0 10px;
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-track:hover {
-	box-shadow: inset rgba(0, 0, 0, 0.08) 0 0 0 10px;
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-track:active {
-	box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 10px;
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-thumb {
-	background-color: var(--color-line-1-opacity);
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-thumb:hover {
-	background-color: var(--color-line-2-opacity);
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-thumb:active {
-	background-color: var(--color-line-3-opacity);
-}
-
-.top-scrollBarXHidding::-webkit-scrollbar-button {
-	width: 0;
-	height: 0;
-}

package/src/components/formsExt/selector2/api.ts

@@ -1,148 +0,0 @@
-import type { Ref } from 'vue';
-import { ref } from 'vue';
-import { debounce } from '@/core/utils/lodash';
-import type { Item, Props } from './selector2';
-
-export const useAPI = (apiRequest: Props['apiRequest'], minLength: number, useCache: Props['useCache']) => {
-	/**
-	 * Список, полученный через API
-	 */
-	const items: Ref<Array<Item>> = ref([]);
-
-	/**
-	 * Флаг - идет загрузка
-	 */
-	const isLoading = ref(false);
-
-	let _searchText = '';
-	let _nextOffset: number | undefined;
-
-	if (apiRequest && !apiRequest.params.limit) {
-		apiRequest.params.limit = 100;
-	}
-
-	/**
-	 * Выполнить обращение к API
-	 *
-	 * При ошибке вернет undefined
-	 */
-	const callAPIRequest = async (): Promise<{ nextOffset?: number, result: Array<Item> } | undefined> => {
-		if (!apiRequest) return;
-
-		let res;
-		let cacheKey;
-
-		if (useCache) {
-			// кэш для полученных ответов через apiRequest
-			// общий для всех компонентов, использующих apiRequest
-			apiRequest.cache ??= new Map();
-
-			cacheKey = JSON.stringify(apiRequest.params);
-			res = apiRequest.cache.get(cacheKey);
-
-			if (res) {
-				return res;
-			}
-		}
-
-		isLoading.value = true;
-		res = await apiRequest.call();
-		isLoading.value = false;
-
-		if (res.errors) return;
-
-		if (!Array.isArray(res.result)) {
-			console.warn(`В result ожидался массив`);
-
-			return;
-		}
-
-		const indexWithError = (res.result as Array<Item | any>).findIndex(item => item.id === undefined || item.name === undefined);
-		if (indexWithError !== -1) {
-			console.warn(`В result[${indexWithError}] нет id или name`);
-
-			return;
-		}
-
-		if (useCache) {
-			apiRequest.cache.set(cacheKey as string, res);
-		}
-
-		return res;
-	};
-
-	/**
-	 * Загрузить items
-	 */
-	const load = async () => {
-		if (!apiRequest) return;
-
-		apiRequest.params.offset = 0;
-		apiRequest.params.search = _searchText;
-
-		const res = await callAPIRequest();
-		if (!res) return;
-
-		_nextOffset = res.nextOffset;
-
-		items.value = res.result;
-	};
-
-	/**
-	 * Загрузить следующую страницу items
-	 */
-	const loadAppend = async () => {
-		if (!apiRequest) return;
-
-		// данных о следующих страницах не обнаружено
-		if (!_nextOffset) return;
-
-		// дозагружать нельзя, если не завершена предыдущшая загрузка
-		if (isLoading.value) return;
-
-		apiRequest.params.offset = _nextOffset;
-		apiRequest.params.search = _searchText;
-
-		const res = await callAPIRequest();
-		if (!res) return;
-
-		_nextOffset = res.nextOffset;
-
-		items.value = items.value.concat(res.result);
-	};
-
-	const loadDebounce = debounce(() => load(), 200);
-
-	/**
-	 * Выполнить поиск по указанному тексту
-	 *
-	 * Если длина текста меньше minLength, поиск не будет проивзеден
-	 *
-	 * Если текст не изменился, поиск не будет проивзеден
-	 * @param searchText - текст поиска
-	 * @param useDebounce - отложенное выполнение поиска
-	 */
-	const setSearchTextAndLoad = (searchText: string, useDebounce = true) => {
-		if (!apiRequest) return;
-
-		if (searchText.length < minLength) return;
-
-		// условия поиска не поменялись, данные загружены
-		if (searchText === _searchText && items.value.length) return;
-
-		_searchText = searchText;
-
-		if (useDebounce) {
-			loadDebounce();
-		} else {
-			void load();
-		}
-	};
-
-	return {
-		items,
-		isLoading,
-		loadAppend,
-		setSearchTextAndLoad,
-	};
-};

package/src/components/formsExt/selector2/itemMulti.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import type { EmitsItemMulti, PropsItemMulti } from './selector2';
-
-defineProps<PropsItemMulti>();
-defineEmits<EmitsItemMulti>();
-</script>
-
-<template>
-	<div class="top-selector2_itemMulti top-ellipsis">
-		{{ name }}
-		<span
-			class="top-selector2_itemMultiDelete"
-			data-top-icon=""
-			@click="$emit('delete', id)"
-			@mousedown.stop
-		></span>
-	</div>
-</template>
-
-<style>
-.top-selector2_itemMulti {
-	box-sizing: border-box;
-	padding-left: var(--top-padding-2);
-	border-radius: var(--top-radius-1, 4px);
-	border: 1px solid var(--color-line-primary-1);
-	background: var(--color-layer-primary-2);
-	min-height: 22px;
-	max-width: 100%;
-	color: var(--color-text-1);
-	flex-grow: 0;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--top-gap-1);
-}
-
-.top-selector2_itemMultiDelete {
-	--top-icon-size: 14px;
-	--top-icon-width: 18px;
-	--top-icon-color: var(--color-text-1);
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	cursor: pointer;
-}
-
-.top-selector2_itemMultiDelete:hover {
-	background: var(--color-layer-primary-2);
-}
-
-@media screen and (min-width: 900px) {
-	.top-selector2.top-active .top-selector2_itemMultiDelete {
-		z-index: calc(var(--top-popup-z-index) + 1);
-	}
-}
-</style>