@topvisor/ui 1.0.20-focus-1 → 1.0.20-selector2-3

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

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

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

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

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

@@ -0,0 +1,54 @@
+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[];