@topvisor/ui 1.0.22-test-ci-cd-10 → 1.2.0

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+/* Стили для горизонтального скроллбара 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

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

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