@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/src/components/project/tagSelector/tagSelector.vue

@@ -1,359 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref, shallowRef, watch } from 'vue';
-
-import Core from '@/core/core/core';
-import { useI18n } from '@/core/plugins/i18n';
-import { storage } from '@/core/utils/dom';
-import { debounce } from '@/core/utils/lodash';
-
-import type { Option } from '@/components/forms/select/select';
-import TopSelect from '@/components/forms/select/select.vue';
-
-import TopButton from '@/components/forms/button/button.vue';
-
-import type { PopupEvent } from '@/components/popup/popup/popup';
-import TopPopup from '../../popup/popup/popup.vue';
-import TopPopupListItem from '../../popup/popup/listItem.vue';
-
-import type { Emits, FiltersAction, Props, Tag } from './types';
-import tagsDefaults from './tagsDefaults';
-import { genTagIdExcluded } from './utils/utils';
-
-import type { Props as TagListItemProps } from './popupListItem/types';
-import TopTagListItem from './popupListItem/tagPopupListItem.vue';
-
-import type { TagSelectorTarget } from './popupOpener/types';
-import TopTagSelectorPopupOpener from './popupOpener/popupOpener.vue';
-
-const i18n = useI18n();
-
-const props = withDefaults(defineProps<Props>(), {
-	tagsMax: 10,
-	requiredForSetter: true,
-	emitDelay: 500,
-});
-
-/**
- * Выбранные теги кнопки в этом компоненте
- *
- * Редактирвоание ведется только через `editTarget.model`
- */
-const model = defineModel<Props['modelValue']>({
-	required: true,
-});
-
-/**
- * Список тегов
- */
-const tags = defineModel<Tag[]>('tags', {
-	default: reactive(tagsDefaults),
-});
-
-const emit = defineEmits<Emits>();
-
-const emitDebounce: typeof emit = debounce((name, e) => {
-	emit(name, e);
-}, props.emitDelay);
-
-// требуется сразу указать один тег
-if (props.singleMode && !model.value.length) {
-	model.value = [tags.value[0].id];
-}
-
-const id = props.id ?? 'top-popup-id-' + Math.random() + '';
-
-const filtersAction = ref<FiltersAction>('add');
-
-/**
- * Сгенерировать опции для выбора дейсвтия массого редактирования
- */
-const genFiltersActionOptions = () => {
-	const tagsText = ' ' + i18n.Common.Tags?.toLowerCase();
-
-	const res = new Map<FiltersAction, Option>();
-	res.set('add', { value: 'add', title: i18n.Common.Add + tagsText });
-	res.set('replace', { value: 'replace', title: i18n.Common.Replace + tagsText });
-	res.set('delete', { value: 'delete', title: i18n.Common.Delete + tagsText });
-
-	return res;
-};
-
-/**
- * Целевой объект редактирвоания тегов
- *
- * Определяется кнопкой, которая открыла popup выбора тегов
- */
-let target = shallowRef<TagSelectorTarget>({
-	model,
-	mode: 'filter',
-	targetId: undefined,
-	filters: undefined,
-	payload: undefined,
-});
-
-watch(model, () => {
-	emitDebounce('selector', model.value);
-});
-
-/**
- * Можно ли выбрать еще теги
- */
-const disabled = computed(() => {
-	if (target.value.mode !== 'setter') return;
-
-	if (!props.maxTagsForSetter) return;
-
-	// массовая смена тегов, количество тегов в результате узнать невозможно
-	if (target.value.filters) return;
-
-	return target.value.model.value.length >= props.maxTagsForSetter;
-});
-
-const genTargetTagState = (tagId: Tag['id'] | 'all'): TagListItemProps['state'] => {
-	if (tagId !== 'all') {
-		if (target.value.model.value.includes(tagId)) return 'selected';
-
-		if (target.value.model.value.includes(genTagIdExcluded(tagId))) return 'excluded';
-	}
-
-	// Все теги, ни один из тегов не выбран
-	if (tagId === 'all' && !target.value.model.value.length) return 'selected';
-
-	return '';
-};
-
-const updateTargetModel = (tagId: Tag['id'], action: 'unselect' | 'select' | 'exclude') => {
-	const tagIdExcluded = genTagIdExcluded(tagId);
-
-	let tagsIds = target.value.model.value.filter(modelTagId => modelTagId !== tagId && modelTagId !== tagIdExcluded);
-
-	if (action === 'select') tagsIds.push(tagId);
-	if (action === 'exclude') tagsIds.push(tagIdExcluded);
-
-	// режим редактирвоания тегов одного объекта с требованием указать хотя бы один тег
-	if (target.value.mode === 'setter' && target.value.targetId !== undefined && props.requiredForSetter) {
-		// нельзя снимать выделение со всех тегов
-		if (!tagsIds.length) {
-			tagsIds.push('1');
-		}
-
-		// при первом выборе сразу снять тег "Без тега"
-		if (tagsIds.length === 2 && target.value.model.value.length === 1 && target.value.model.value[0] === '1') {
-			tagsIds = tagsIds.filter((tagId) => tagId !== '1');
-		}
-	}
-
-	// режим выбора одного тега
-	if (props.singleMode && !target.value.filters) {
-		// нужно указать хотя бы один тег
-		if (!tagsIds.length) {
-			tagsIds = target.value.model.value;
-		}
-
-		if (tagsIds.length > 1) {
-			tagsIds = [tagsIds[tagsIds.length - 1]];
-		}
-	}
-
-	// всегда выводить теги в порядке, указанном в настройках tags
-	tagsIds.sort((a, b) => {
-		if (!props.tags) return 0;
-
-		const aIndex = props.tags.findIndex((tag) => tag.id === a);
-		const bIndex = props.tags.findIndex((tag) => tag.id === b);
-
-		return aIndex - bIndex;
-	});
-
-	target.value.model.value = tagsIds;
-
-	if (target.value.mode === 'setter' && target.value.targetId !== undefined) {
-		emitDebounce('setter', {
-			tagsIds: tagsIds as Tag['id'][],
-			targetId: target.value.targetId,
-			payload: target.value.payload,
-		});
-	}
-};
-
-const classString = computed(() => {
-	let res = 'top-tagSelector_popup';
-
-	if (target.value.mode === 'filter') res += ' top-tagSelector_popup-filter';
-	if (target.value.mode === 'setter') res += ' top-tagSelector_popup-setter';
-
-	return res;
-});
-
-/**
- * Добавить тег
- */
-const addTag = () => {
-	const tagName = prompt('', 'New tag');
-	if (!tagName || tagName === 'New tag') return;
-
-	const tagId = tags.value.length + 1;
-
-	tags.value.push({
-		id: String(tagId) as Tag['id'],
-		name: tagName,
-		color_id: String((tagId - 1) % 10 + 1) as Tag['color_id'],
-	});
-
-	emit('tagsChanged', tags.value);
-};
-
-const onOpen = (popupEvent: PopupEvent) => {
-	// popup открыт другой кнопкой c другим modelValue, для редактирвоания объектов
-	target.value = storage(popupEvent.elPopupOpener, 'topTagSelectorTarget');
-	if (!target.value) throw new Error('Open popup TopTagSelector required v-data:topTagSelectorTarget');
-
-	// при начале массовой установки тегов сбросить состояние формы
-	if (target.value.filters) {
-		filtersAction.value = 'add';
-		target.value.model.value = [];
-	}
-
-	if (!Core.$?.ui['sortable']) {
-		console.info('Для работы сортировки требуется глобальная загрузка jQuery UI Sortable');
-
-		return;
-	}
-
-	if (!Core.state.isMobile && !Core.state.isMobileUA && tags.value) {
-		$(popupEvent.elPopup).sortable({
-			items: 'li:has([data-tag_id]:not([data-tag_id="all"]))',
-
-			/**
-			 * @todo Удалить `[contenteditable="true"]` через пол года после выхода версии firefox с поддержкой contenteditable plaintext-only, включая бета версии
-			 */
-			cancel: '[contenteditable="plaintext-only"], [contenteditable="true"]',
-
-			distance: 10,
-			stop: function (_e, ui) {
-				if (!tags.value) return;
-
-				const $tags = $(ui.item).parent().find('[data-tag_id]');
-
-				const tagsSorted: Tag['id'][] = [];
-				$tags.each((_index, elTag) => {
-					if (!tags.value) return;
-
-					const tagId = $(elTag).attr('data-tag_id') as Tag['id'];
-					tagsSorted.push(tagId);
-				});
-
-				tags.value.sort((tagIdA, tagIdB) => {
-					const a = tagsSorted.findIndex(tagSorted => tagSorted === tagIdA.id);
-					const b = tagsSorted.findIndex(tagSorted => tagSorted === tagIdB.id);
-
-					return a - b;
-				});
-
-				emitDebounce('tagsChanged', tags.value);
-			},
-		});
-	}
-};
-
-const onClose = (popupEvent: PopupEvent) => {
-	if (!Core.$?.ui['sortable']) return;
-
-	if ($(popupEvent.elPopup).data('ui-sortable')) {
-		$(popupEvent.elPopup).sortable('destroy');
-	}
-};
-</script>
-
-<template>
-	<TopTagSelectorPopupOpener
-		class="top-select_arrow"
-		v-model="model"
-		:id
-		:tags
-		mode="filter"
-		useTopButton
-	/>
-
-	<TopPopup
-		:id
-		:class="classString"
-		@open="onOpen($event)"
-		@close="onClose($event)"
-		:transition-duration="50"
-	>
-		<!-- Массовое редактирвоание-->
-		<template #header v-if="target.mode === 'setter' && target.filters">
-			<TopSelect
-				v-model="filtersAction"
-				:options="genFiltersActionOptions()"
-			/>
-		</template>
-
-		<template #footer v-if="target.mode === 'setter' && target.filters">
-			<TopButton color="theme">
-				{{ $i18n.Common.Cancel }}
-			</TopButton>
-
-			<TopButton
-				@click="emitDebounce('setter', {
-					tagsIds: target.model.value as Tag['id'][],
-					filters: target.filters,
-					filtersAction,
-					payload: target.payload,
-				})"
-			>
-				{{ filtersAction === 'add' ? $i18n.Common['Add'] : '' }}
-				{{ filtersAction === 'replace' ? $i18n.Common['Replace'] : '' }}
-				{{ filtersAction === 'delete' ? $i18n.Common['Remove'] : '' }}
-			</TopButton>
-		</template>
-
-		<template #contentList>
-			<TopTagListItem
-				v-if="target.mode === 'filter' && !singleMode"
-				id="all"
-				colorId=""
-				:name="$i18n.Common.All_tags ?? ''"
-				:state="target.model.value.length ? '' : 'selected'"
-				@select="target.model.value = []"
-			/>
-
-			<TopTagListItem
-				v-for="tag in tags"
-				:key="tag.id"
-				:id="tag.id"
-				:colorId="tag.color_id"
-				:name="tag.name"
-				:state="genTargetTagState(tag.id)"
-				:canExclude="target.mode === 'filter' && !singleMode"
-				:editable="tagsEditable"
-				:disabled="disabled && genTargetTagState(tag.id) === ''"
-				@unselect="updateTargetModel(tag.id, 'unselect')"
-				@select="updateTargetModel(tag.id, 'select')"
-				@exclude="updateTargetModel(tag.id, 'exclude')"
-				@update:name="tag.name = $event as string, emitDebounce('tagsChanged', tags);"
-			/>
-
-			<TopPopupListItem
-				v-if="tagsEditable && tags.length < tagsMax && tags.length < 20"
-				data-top-icon=""
-				@click.stop="addTag"
-			>
-				{{ $i18n.Common.Add }}
-			</TopPopupListItem>
-		</template>
-	</TopPopup>
-</template>
-
-<style>
-.top-tagSelector_popup .top-popup {
-	user-select: none;
-	min-width: 220px !important;
-	text-align: left;
-}
-
-.top-tagSelector_popup .top-popup_header .top-select{
-	flex-grow: 1;
-}
-</style>

package/src/components/project/tagSelector/tagsDefaults.ts

@@ -1,54 +0,0 @@
-import type { Tag } from './types';
-
-export default [
-	{
-		id: '1',
-		name: 'Without Tag',
-		color_id: '1',
-	},
-	{
-		id: '2',
-		name: 'Red',
-		color_id: '2',
-	},
-	{
-		id: '3',
-		name: 'Orange',
-		color_id: '3',
-	},
-	{
-		id: '4',
-		name: 'Yellow',
-		color_id: '4',
-	},
-	{
-		id: '5',
-		name: 'Blue',
-		color_id: '5',
-	},
-	{
-		id: '6',
-		name: 'Purple',
-		color_id: '6',
-	},
-	{
-		id: '7',
-		name: 'Green',
-		color_id: '7',
-	},
-	{
-		id: '8',
-		name: 'Magenta',
-		color_id: '8',
-	},
-	{
-		id: '9',
-		name: 'Dark blue',
-		color_id: '9',
-	},
-	{
-		id: '10',
-		name: 'Turquoise',
-		color_id: '10',
-	},
-] as Tag[];

package/src/components/project/tagSelector/types.ts

@@ -1,159 +0,0 @@
-import type { components as componentsTagId } from 'topvisor-openapi/src/ts/Tags_2/Types/TagId';
-
-/**
- * Информация о теге
- */
-export interface Tag {
-	/**
-	 * Индекс тега
-	 *
-	 * Определяет цвет, не зависит от порядка сортирвоки тегов
-	 */
-	id: componentsTagId['schemas']['Tags_2.Types.TagId'];
-
-	/**
-	 * Индекс цвета тега
-	 */
-	color_id: '' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
-
-	/**
-	 * Имя тега
-	 */
-	name: string;
-}
-
-export type TagId = Tag['id'];
-export type TagIdExclude = `-${Tag['id']}`;
-
-export interface Props {
-	/**
-	 * Список выбранных тегов
-	 *
-	 * Положительны значения - выбранные теги
-	 *
-	 * Отрицательные значения - исключенные теги
-	 *
-	 * В режиме редактирвоания исклчюения тегов недоступно
-	 */
-	modelValue: (Tag['id'] | TagIdExclude)[];
-
-	/**
-	 * Список возможных тегов
-	 *
-	 * Если не указано, будет выведен список по умолчанию на английском языке
-	 *
-	 * Цвет тэгов определется в css в переменных, пример: `--color-tag-1`
-	 *
-	 * В режиме редактирования реализуют v-model поведение
-	 */
-	tags?: Tag[];
-
-	/**
-	 * Разрешить переименовывать и сортировать теги
-	 *
-	 * Требует указания `tags`
-	 *
-	 * Изменения фиксируется через `v-model` `tags`
-	 */
-	tagsEditable?: boolean;
-
-	/**
-	 * Максимальное количество тегов
-	 *
-	 * Если тегов меньше, появится кнопка добавления тега
-	 *
-	 * Если не указано теги добавлять нельзя
-	 *
-	 * Может быть от 10 до 20
-	 */
-	tagsMax?: number;
-
-	/**
-	 * Уникальный id для взаимодейсвтия с компонентом
-	 *
-	 * Для работы вне Vue используется в паре с `TopPopupWorker.genElPopupOpener()`
-	 *
-	 * @see import('../../popup/lib/worker').default.genElPopupOpener
-	 */
-	id?: string;
-
-	/**
-	 * Режим выбора одного тега
-	 */
-	singleMode?: boolean;
-
-	/**
-	 * Требуется ли указать хотя бы один тег, при установке тегов у объекта
-	 */
-	requiredForSetter?: boolean;
-
-	/**
-	 * Максимальное количество тегов, которые можно установить у объекта
-	 *
-	 * Если не указано, ограничения нет
-	 */
-	maxTagsForSetter?: number;
-
-	/**
-	 * Задержка перед вызовом emit в ms
-	 *
-	 * Имитирует ожидание завершения действий пользователя
-	 *
-	 * Не рекомендуется менять
-	 */
-	emitDelay?: number;
-}
-
-export type FiltersAction = 'add' | 'replace' | 'delete';
-
-export type Emits = {
-	/**
-	 * Изменен выбор тегов
-	 *
-	 * При выборе тегов в режиме `filter`
-	 */
-	selector: [tagsIds: Props['modelValue']];
-
-	/**
-	 * У объекта были изменены теги
-	 *
-	 * При выборе тегов в режиме `setter`
-	 */
-	setter: [
-		event: {
-			/**
-			 * Список выбранных тегов
-			 */
-			tagsIds: Tag['id'][],
-
-			/**
-			 * К какому объекту следует привязать теги
-			 *
-			 * Не будет указан, если указаны `filters`
-			 */
-			targetId?: number | string,
-
-			/**
-			 * По каким фильтрам следует установить теги
-			 *
-			 * Не будут указаны, если указан `targetId`
-			 */
-			filters?: [],
-
-			/**
-			 * Какое действие необходимо применить по указанным `filters`
-			 */
-			filtersAction?: FiltersAction,
-
-			/**
-			 * Полезная нагрузка, передаваямая кнопкой
-			 */
-			payload?: Record<string, any>,
-		}
-	];
-
-	/**
-	 * Изменен список тегов
-	 */
-	tagsChanged: [tags: NonNullable<Props['tags']>];
-}