@topvisor/ui 1.0.20-selector2-3 → 1.0.20-selector2-4

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

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './types';
-
-defineProps<Props>();
-</script>
-
-<template>
-	<div
-		:class="{
-			'top-tagSelector_tagIcon': true,
-			'top-tagSelector-active': !!state,
-			'top-tagSelector-excluded': state === 'excluded',
-		}"
-		:data-tag_id="id"
-		:data-tag_color_id="colorId"
-		:title="name"
-	></div>
-</template>
-
-<style>
-[data-tag_id] { display: inline-flex; gap: var(--top-gap-2); align-items: center; }
-
-[data-tag_id=""] { border-color: #bdc3c7 !important; color: #55555F !important; }
-[data-tag_color_id="1"] { border-color: var(--color-tag-1) !important; color: #55555F !important; }
-[data-tag_color_id="2"] { border-color: var(--color-tag-2) !important; color: var(--color-tag-2) !important; }
-[data-tag_color_id="3"] { border-color: var(--color-tag-3) !important; color: var(--color-tag-3) !important; }
-[data-tag_color_id="4"] { border-color: var(--color-tag-4) !important; color: var(--color-tag-4) !important; }
-[data-tag_color_id="5"] { border-color: var(--color-tag-5) !important; color: var(--color-tag-5) !important; }
-[data-tag_color_id="6"] { border-color: var(--color-tag-6) !important; color: var(--color-tag-6) !important; }
-[data-tag_color_id="7"] { border-color: var(--color-tag-7) !important; color: var(--color-tag-7) !important; }
-[data-tag_color_id="8"] { border-color: var(--color-tag-8) !important; color: var(--color-tag-8) !important; }
-[data-tag_color_id="9"] { border-color: var(--color-tag-9) !important; color: var(--color-tag-9) !important; }
-[data-tag_color_id="10"] { border-color: var(--color-tag-10) !important; color: var(--color-tag-10) !important; }
-
-[data-tag_id=""].top-tagSelector-active { background: #bdc3c7 !important; }
-[data-tag_color_id="1"].top-tagSelector-active { background: var(--color-tag-1) !important; }
-[data-tag_color_id="2"].top-tagSelector-active { background: var(--color-tag-2) !important; }
-[data-tag_color_id="3"].top-tagSelector-active { background: var(--color-tag-3) !important; }
-[data-tag_color_id="4"].top-tagSelector-active { background: var(--color-tag-4) !important; }
-[data-tag_color_id="5"].top-tagSelector-active { background: var(--color-tag-5) !important; }
-[data-tag_color_id="6"].top-tagSelector-active { background: var(--color-tag-6) !important; }
-[data-tag_color_id="7"].top-tagSelector-active { background: var(--color-tag-7) !important; }
-[data-tag_color_id="8"].top-tagSelector-active { background: var(--color-tag-8) !important; }
-[data-tag_color_id="9"].top-tagSelector-active { background: var(--color-tag-9) !important; }
-[data-tag_color_id="10"].top-tagSelector-active { background: var(--color-tag-10) !important; }
-
-[data-tag_id="all"] {
-	border-color: var(--color-tag-all) !important; background: var(--color-tag-all) !important;
-	color: var(--color-text-2);
-	margin-left: 4px;
-}
-
-[data-tag_id="all"]:before {
-	content: "";
-	border-radius: 100%; background: var(--color-tag-all); border: 2px solid var(--color-layout-front-1);
-	min-width: calc(100% + 4px);
-	height: calc(100% + 4px);
-	margin-left: -10px;
-	transition: 0.1s border-color;
-}
-
-/* в кнопке выбора тэгов и в popup */
-.top-tagSelector-filter [data-tag_id],
-.top-tagSelector_popup [data-tag_id] {
-	--top-tag-selector-size: 10px;
-
-	box-sizing: content-box;
-	border-radius: 100%; border: 2px solid var(--color-layout-front-1); background: var(--color-layout-front-1);
-	width: var(--top-tag-selector-size);
-	height: var(--top-tag-selector-size);
-	font-size: calc(var(--top-tag-selector-size) + 4px);
-	/*font-family: inherit !important;*/
-}
-
-/* исключение тегов */
-.top-body-press_ctrl .top-tagSelector_tagListItem-canExclude:hover [data-tag_id],
-[data-tag_id].top-tagSelector-excluded { position: relative; }
-
-.top-body-press_ctrl .top-tagSelector_tagListItem-canExclude:hover [data-tag_id]:before,
-[data-tag_id].top-tagSelector-excluded:before {
-	content: "";
-	width: calc(var(--top-tag-selector-size) * 2); height: 1px; background: inherit;
-	transform: rotate(-45deg); filter: brightness(80%);
-	display: block;
-	position: absolute; top: calc(var(--top-tag-selector-size) / 2); left: calc(0px - var(--top-tag-selector-size) / 2);
-}
-.top-body-press_ctrl .top-tagSelector_tagListItem-canExclude:hover [data-tag_id]:not([data-tag_id="all"]):not(.top-tagSelector-active):before { background: #AAA; }
-[data-tag_id].top-tagSelector-excluded:after,
-[data-tag_id].top-tagSelector-excluded ~ .top-tagSelector_tagListItemName { text-decoration: line-through; }
-
-/* popup */
-.top-popup_listItem.top-tagSelector-active { background: var(--top-popup-background-color-active) !important; }
-
-.top-popup_listItem:hover [data-tag_id="all"]:before { border-color: var(--top-popup-background-color-hover); }
-.top-popup_listItem.top-tagSelector-active [data-tag_id="all"]:before,
-.top-popup_listItem.top-active [data-tag_id="all"]:before { border-color: var(--top-popup-background-color-active); }
-</style>

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

@@ -1,25 +0,0 @@
-import type { Tag } from '../types';
-
-export interface Props {
-	/**
-	 * Индекс тега
-	 *
-	 * Определяет цвет, не зависит от порядка сортирвоки тегов
-	 */
-	id: Tag['id'] | 'all';
-
-	/**
-	 * Индекс цвета тега
-	 */
-	colorId: '' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
-
-	/**
-	 * Имя тега
-	 */
-	name: string;
-
-	/**
-	 * Состояние выбора тега
-	 */
-	state: '' | 'selected' | 'excluded';
-}

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

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-
-import Component from './tagSelector.vue';
-import tagsDefaults from './tagsDefaults';
-import * as ComponentsConst from './types';
-import ReadMe from './stories/README.md?raw';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		modelValue: [],
-		tags: tagsDefaults,
-		tagsEditable: true,
-		singleMode: false,
-		maxTagsForSetter: 4,
-	},
-} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: Playground.args,
-}, OverviewComponent);
-
-export const Single = {
-	args: {
-		modelValue: [],
-		tags: tagsDefaults,
-		singleMode: true,
-		maxTagsForSetter: 4,
-	},
-} satisfies Story;
-
-export default meta;

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[];