@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

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