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

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './selector2.vue';
+import type { Item } from './selector2';
+import * as ComponentsConst from './selector2';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		modelValue: [],
+		items: [
+			{
+				id: 1,
+				name: 'Выбери меня',
+			},
+			{
+				id: 2,
+				name: 'И меня',
+			},
+			{
+				id: 3,
+				name: 'И меня тоже',
+			},
+		] as Item[],
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		modelValue: [],
+		isError: false,
+		useCache: false,
+	},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,145 @@
+import type { Size } from '@/components/forms/helpers';
+import { sizes } from '@/components/forms/helpers';
+
+export interface Props {
+	/**
+	 * Выбранный элемент
+	 *
+	 * Массив выбранных элементов, если multiselect = true
+	 */
+	modelValue: Item | Item[];
+
+	/**
+	 * Список вариантов для выбора
+	 *
+	 * Работая совместно с apiRequest, всегда выводится перед результатами apiRequest
+	 */
+	items?: Item[];
+
+	/**
+	 * Режим выбора нескольких вариантов
+	 *
+	 * Константа, после установки менять нельзя
+	 */
+	multiselect?: boolean;
+
+	disabled?: boolean;
+	size?: Size;
+	isError?: boolean;
+
+	/**
+	 * Если указан, будет выполнена загрузка результатов через API
+	 *
+	 * Константа, после установки заменять нельзя
+	 */
+	apiRequest?: {
+		params: {
+			limit?: number,
+			offset?: number,
+			search?: string,
+		};
+		call: Function;
+		cache: Map<string, { result: Array<Item>, nextOffset?: number }>;
+
+		[propName: string]: any;
+	};
+
+	/**
+	 * Минимальная длина для выполнения поиска
+	 *
+	 * Для apiRequest
+	 *
+	 * Константа, после установки менять нельзя
+	 */
+	minLength?: number;
+
+	/**
+	 * Использовать кэширвоание
+	 *
+	 * Для apiRequest
+	 *
+	 * Константа, после установки менять нельзя
+	 */
+	useCache?: boolean;
+
+	/**
+	 * Добавить в результаты item = {id:null, name:search}, где search - введенная строка в поле поиска
+	 */
+	appendSearchToResult?: boolean;
+
+	/**
+	 * Добавить вариант: "Все"
+	 *
+	 * Для multiselect = false
+	 */
+	appendAllValue?: boolean;
+
+	/**
+	 * Отобразить кнопку смены значения
+	 *
+	 * Работает с props.items без учета apiRequest
+	 *
+	 * Для multiselect = false
+	 */
+	addChanger?: boolean;
+
+	/**
+	 * Текст для placeholder поля поиска
+	 */
+	placeholder?: string;
+
+	/**
+	 * Выводить в placeholder поля поиска выбранное значение modelValue.name
+	 *
+	 * Для multiselect = false
+	 */
+	showSelectedInInput?: boolean;
+}
+
+export interface Slots {
+	/**
+	 * Шаблон для генерации элементов списка результатов
+	 *
+	 * Принимает параметр item: Type
+	 *
+	 * Если шаблон не указан будет выводиться item.name
+	 *
+	 * Пример:
+	 *
+	 * ```html
+	 * <div :title="'id: ' + item.id">
+	 *     {{ item.name }}
+	 * </div>
+	 * ```
+	 */
+	item(props: { item: Item }): any;
+}
+
+export interface PropsItemMulti {
+	id: Item['id'],
+	name: Item['name'],
+}
+
+export type EmitsItemMulti = {
+	/**
+	 * Удалить выбранный элемент
+	 */
+	delete: [id: Item['id']]
+}
+
+/**
+ * Элемент, который можно выбрать в Selector
+ */
+export interface Item {
+	/**
+	 * id объекта
+	 *
+	 * Если null - объект для добавления, не имеет свой id
+	 */
+	id: number | null;
+	name: string;
+
+	[propName: string]: any;
+}
+
+export { sizes };

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

@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import type { ComputedRef, ModelRef, ComponentInstance } from 'vue';
+import { computed, ref, watch } from 'vue';
+import Core from '@/core/core/core';
+import { invertKeyboardLayout } from '@/core/utils/keyboard';
+import { useI18n } from '@/core/plugins/i18n';
+import { TopPopup, TopPopupListItem, TopPopupWidgetInput } from '@/components/popup/popup';
+import type PopupClass from '@/components/popup/lib/popup';
+import type { Item, Props, Slots } from './selector2';
+import { useAPI } from './api';
+import Selector2ItemMulti from './itemMulti.vue';
+
+const props = withDefaults(defineProps<Props>(), {
+	items: () => [] as Array<Item>,
+	size: 's',
+	minLength: 0,
+	showSelectedInInput: true,
+});
+
+const model = defineModel<Props['modelValue']>() as ModelRef<Props['modelValue']>;
+
+defineSlots<Slots>();
+
+/**
+ * Текст поиска по результатам
+ */
+const searchText = ref('');
+
+/**
+ * Сброс поиска
+ */
+const resetSearch = () => {
+	searchText.value = '';
+	API.items.value = [];
+};
+
+
+const itemAll = {
+	id: 0,
+	name: useI18n().Common.All!,
+};
+
+/**
+ * Экземпляр компонента Popup
+ */
+const popupRef = ref<ComponentInstance<typeof TopPopup> | null>(null);
+
+/**
+ * Основной элемент селектора
+ */
+const elRef = ref<HTMLElement | null>(null);
+
+/**
+ * Получить доступ к объекту popup
+ */
+const getPopup = (): PopupClass | undefined => {
+	return popupRef.value?.popup;
+};
+
+// для storybook
+if ((window as any).__STORYBOOK_PREVIEW__ && !props.modelValue) {
+	watch(
+		() => props.multiselect,
+		() => {
+			model.value = props.multiselect ? [] : { id: null, name: '' };
+		},
+		{ immediate: true },
+	);
+}
+
+const API = useAPI(props.apiRequest, props.minLength, props.useCache);
+
+/**
+ * Варианты выбора: props.items + "Выбрать все"
+ */
+const localItems: ComputedRef<Array<Item>> = computed(() => {
+	const items: Array<Item> = [];
+
+	if (!props.multiselect && props.appendAllValue) {
+		items.push(itemAll);
+	}
+
+	props.items.forEach(item => items.push({ ...item }));
+
+	return items;
+});
+
+/**
+ * Проверить, что элемент выбран
+ */
+const isSelected = (item: Item, checkNameForNullId = true) => {
+	if (checkNameForNullId && item.id === null) {
+		if (Array.isArray(model.value)) {
+			return model.value.some(itemSelected => itemSelected.id === item.id && itemSelected.name === item.name);
+		} else {
+			return item.name === model.value.name;
+		}
+	}
+
+	if (Array.isArray(model.value)) {
+		return model.value.some(itemSelected => itemSelected.id === item.id);
+	} else {
+		return item.id === model.value.id;
+	}
+};
+
+/**
+ * Варианты выбора, которые выводятся
+ */
+const itemsForShow = computed(() => {
+	const searchString = searchText.value.toLowerCase();
+	const searchStringInvertKeyboard = invertKeyboardLayout(searchString);
+
+	let items: typeof localItems.value = [];
+
+	localItems.value.forEach((item) => {
+		const itemName = item.name.toLowerCase();
+
+		if (
+			item.id === Number(searchString) ||
+			itemName.includes(searchString) ||
+			itemName.includes(searchStringInvertKeyboard)
+		) {
+			if (itemName === searchString || itemName === searchStringInvertKeyboard) {
+				items.unshift(item);
+			} else {
+				items.push(item);
+			}
+		}
+	});
+
+	items.push(...API.items.value);
+
+	if (
+		props.appendSearchToResult &&
+		!!searchText.value &&
+		(!items.length || items[0].name.toLowerCase() !== searchString)
+	) {
+		items.push({
+			id: null,
+			name: searchText.value,
+		});
+	}
+
+	if (props.multiselect) {
+		items = items.filter(item => !isSelected(item));
+	}
+
+	return items;
+});
+
+/**
+ * Флаг - идет загрузка
+ *
+ * Скрывает вывод заглушки "Нет результатов" - для загрузки данных через API (multiselect = true) - (см. selectItem)
+ */
+const isLoading = ref(API.isLoading.value);
+
+watch(API.isLoading, () => {
+	isLoading.value = API.isLoading.value;
+});
+
+/**
+ * Выбрать значение
+ *
+ * Управляет закрытием окна
+ */
+const selectItem = async (item: Item) => {
+	if (props.multiselect) {
+		if (!Array.isArray(model.value)) return;
+
+		if (isSelected(item)) {
+			return;
+		}
+
+		if (props.apiRequest && searchText.value) {
+			isLoading.value = true;
+		}
+
+		const newModel = [...model.value];
+		newModel.push({ ...item });
+		model.value = newModel;
+
+		if (Core.state.isMobile) {
+			getPopup()?.close();
+		} else {
+			setTimeout(() => {
+				getPopup()?.recalcPosition();
+				getPopup()?.elPopupWidget?.querySelector('input')?.focus();
+
+				if (searchText.value) resetSearch();
+			});
+		}
+	} else {
+		if (JSON.stringify(item) !== JSON.stringify(model.value)) {
+			model.value = { ...item };
+		}
+
+		getPopup()?.close();
+	}
+};
+
+/**
+ * Выбрать следующее значение
+ */
+const selectNextItem = () => {
+	if (!Array.isArray(model.value)) {
+		const currentIndex = localItems.value.findIndex(item => item.id === (model.value as Item).id);
+		const nextIndex = (currentIndex + 1) % localItems.value.length;
+		model.value = { ...localItems.value[nextIndex] };
+	}
+};
+
+/**
+ * Удалить выбранное значение по id
+ * @param id
+ */
+const deleteItemById = async (id: Item['id']) => {
+	if (Array.isArray(model.value)) {
+		model.value = model.value.filter(item => item.id !== id);
+
+		setTimeout(() => {
+			getPopup()?.recalcPosition();
+		});
+	}
+};
+
+const isOpened = ref(false); // флаг попап открыт
+
+if (props.apiRequest) {
+	watch(isOpened, () => {
+		if (isOpened.value) {
+			// при открытии сразу выполнить поиск
+			API.setSearchTextAndLoad(searchText.value, false);
+		}
+	});
+
+	// отложенный поиск при вводе текста
+	watch(searchText, () => API.setSearchTextAndLoad(searchText.value));
+}
+
+const onScrollContentList = (e: Event) => {
+	const el = e.target as HTMLElement;
+
+	if (el.scrollTop / (el.scrollHeight - el.offsetHeight) > 0.8) {
+		API.loadAppend();
+	}
+};
+
+const onClose = () => {
+	isOpened.value = false;
+
+	elRef.value?.focus();
+
+	if (searchText.value) resetSearch();
+};
+</script>
+
+<template>
+	<TopPopup
+		ref="popupRef"
+		@open="isOpened = true"
+		@close="onClose()"
+		@scrollContentList="apiRequest ? onScrollContentList($event) : undefined"
+		:notch="false"
+		:transitionDuration="0"
+	>
+		<template #opener>
+			<div
+				ref="elRef"
+				v-top-focus.onupdate="isError"
+				:class="{
+					'top-selector2' : true,
+					'top-selector2-multiselect': multiselect,
+					['top-size_' + size]: true,
+					['top-disabled']: disabled,
+					['top-forms-focusable']: !disabled,
+					['top-error']: isError,
+				}"
+				@keydown.up.down.enter.space.stop.prevent="($event.currentTarget as HTMLElement).click()"
+				@keydown.delete="model = []"
+				tabindex="0"
+			>
+				<template v-if="multiselect">
+					<div class="top-selector2_activeItems">
+						<Selector2ItemMulti
+							v-for="item of model as Array<Item>"
+							:id="item.id"
+							:name="item.name"
+							@delete="deleteItemById"
+						/>
+					</div>
+				</template>
+
+				<span v-if="!multiselect" class="top-selector2_activeName top-ellipsis">
+					{{ !Array.isArray(model) ? model.name : '' }}
+				</span>
+
+				<span
+					v-if="addChanger && !multiselect && localItems.length > 1 && !disabled"
+					class="top-changer top-changer-selector"
+					@click.stop="selectNextItem"
+				></span>
+			</div>
+		</template>
+
+		<template #widget>
+			<TopPopupWidgetInput
+				title="Поиск"
+				icon=""
+				v-model="searchText"
+				:isLoading="isLoading"
+				:placeholder="!Array.isArray(model) && !multiselect && showSelectedInInput ? model.name : placeholder"
+			/>
+		</template>
+
+		<template #contentList>
+			<TopPopupListItem
+				v-for="item of itemsForShow"
+				:class="{
+					'top-active': !Array.isArray(model) && !multiselect && model.name === item.name
+				}"
+				:key="item.id ?? undefined"
+				@click.stop="selectItem(item)"
+			>
+				<slot
+					v-if="$slots.item"
+					name="item"
+					:item="item"
+				></slot>
+
+				<template
+					v-else
+				>
+					{{ item.name }}
+				</template>
+			</TopPopupListItem>
+
+			<TopPopupListItem
+				v-if="!isLoading && !itemsForShow.length"
+				type="regular"
+			>
+				{{ $i18n.Common.No_results }}
+			</TopPopupListItem>
+		</template>
+	</TopPopup>
+</template>
+
+<style>
+.top-selector2 {
+	width: 180px;
+	min-height: var(--top-forms-base-height);
+	box-sizing: border-box;
+	position: relative;
+	display: flex;
+	overflow: hidden;
+	padding: var(--top-padding-1) var(--top-forms-padding);
+	color: var(--top-forms-placeholder-color);
+
+	border-radius: var(--top-radius-2);
+	border: 1px solid var(--top-forms-border-color);
+	background: var(--top-forms-background-color);
+}
+
+.top-selector2-multiselect {
+	width: unset;
+	min-width: 180px;
+	padding: var(--top-padding-1);
+}
+
+.top-selector2.top-active {
+	--top-forms-border-color: var(--top-forms-border-color-hover);
+}
+
+.top-selector2_activeItems {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--top-padding-1);
+	max-width: 100%;
+}
+
+.top-selector2_activeName {
+	white-space: nowrap;
+}
+
+.top-changer-selector {
+	transform: translateX(-16px);
+}
+</style>

package/src/components/formsExt/selector2/stories/dummyAPIRequest.ts

@@ -0,0 +1,58 @@
+import { invertKeyboardLayout } from '@/core/utils/keyboard';
+
+const items: Array<any> = [];
+
+for (let i = 10; i < 300; i++) {
+	const id = i + 1;
+	items.push({ id, name: `Запись #${id}` });
+}
+
+const dummyAPIRequest = {
+	params: {
+		offset: undefined,
+		limit: undefined,
+		search: '',
+	},
+
+	cache: new Map(),
+
+	async call() {
+		console.log('dummyAPIRequest call()');
+
+		const offset = this.params.offset ?? 0;
+		const limit = this.params.limit ?? 100;
+		const searchString = this.params.search?.toLowerCase();
+		const searchStringInvertKeyboard = invertKeyboardLayout(searchString);
+
+		const filterItems = items.filter(item => {
+			if (!searchString) return true;
+
+			const itemName = item.name.toLowerCase();
+
+			return (
+				item.id === Number(searchString)
+				|| itemName.includes(searchString)
+				|| itemName.includes(searchStringInvertKeyboard)
+			);
+		});
+
+		const result = filterItems.slice(offset, offset + limit);
+
+		return new Promise(resolve => {
+			const res: { result: Array<any>, nextOffset?: number } = {
+				result,
+			};
+
+			const nextOffset = offset + limit;
+
+			if (nextOffset < filterItems.length) res.nextOffset = nextOffset;
+
+			setTimeout(
+				() => resolve(res),
+				500,
+			);
+		});
+	},
+};
+
+export default dummyAPIRequest;