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

package/src/components/project/tagSelector/stories/README.md

@@ -0,0 +1,62 @@
+Компонент реализует выбор тегов.
+
+- Выводит выбор тега или нескольких тегов с возможностью исключить теги
+- Позволяет вывести кнопку для настройки тегов у объекта (в том числе у каждого объекта в списке объектов)
+- Позволяет вывести кнопку для настройки тегов при массовом редактировании объектов
+- Список тегов можно задать произвольно
+- При выборе тегов их можно переименовывать и сортировать
+
+## Подключение:
+
+При подключении **TopTagSelector** будет инициирован **TopPopup** со списком тегов и выведена кнопка для его открытие в режиме **filter**.  
+Для контроля за выбранными тегами используется `emit('selector')`.
+
+Порядок добавления кнопок с настройкой тегов к объектам:
+
+- добавить **TopTagSelector** с необходимыми настройками выбора тегов на старницу, если фильтр не нужен, компонент можно скрыть, но он должен
+  присутствовать
+- подписаться в **TopTagSelector** на `emit('setter')`, при редактировании объекта будет передана необходимая информация
+- в нужное место вставить кнопку **TopTagSelectorPopupOpener** с `props.modelValue` с тегами объекта и `props.mode = 'setter'`
+- компонентов **TopTagSelectorPopupOpener** может быть много
+
+## Описание функционала:
+
+Компонент работает в двух режимах выбора тегов:
+
+- **filter**: выбор тегов без привязки к объекту
+    - добавляется вариант **Все теги**
+    - если нет ни одного тега, считается, что выбор не сделан и вариант **Все теги** будет считаться активным
+    - позвоялет исключать теги с нажатой клавишей `ctrl` / `cmd`
+- **setter**: только выбор тегов с привязкой к объекту:
+    - этот режим можно включить только через подключение компонента **TopTagSelectorPopupOpener**
+        - указать `props.targetId` для привязки тегов к одному объекту
+        - указать `props.filters` для массового редактирования тегов объектов
+    - после установки тегов будет выполнен `emit('setter')`
+    - нельзя исключать теги
+
+При указании `props.singleMode` включается режим выбора **только одного** тега:
+
+- требуется выбрать хотя бы один тег
+- нельзя исключать теги
+- варинт **Все теги** всегда отсутствует
+
+При указании `props.tagsEditable` включается режим редактирвоание тегов, в котором можно переименовывать теги и сортировать их.  
+Для контроля за настройками тегов используется `props.tags`, который работает в режиме v-model.
+
+## Дополнительные компоненты:
+
+- **TopTagSelectorPopupOpener**: вывод кнопки для открытия popup с выбором тегов
+- **TopTagSelectorTagIcon**: вывод значка тега
+
+## Утилиты:
+
+- **genElPopupOpener()**: сгенерировать элемент кнопки для открытия popup с выбором тега. Утилита позволяет вставлять кнопку выбора
+  тегов в **чистый js**. Для работы требуется подключить **TopTagSelector** с указанием `props.id` и указать тот же `props.id` в утилите
+- **renderElPopupOpener()**: утилита позволяет выполнить перерисовку элемента, созданного через **genElPopupOpener()**, работает только, если элемент
+  был создан с не реактивным `props.modelValue`, в противном случае перерисовка будет происходить автоматически
+
+## i18n
+
+Требует подключение словарей:
+
+* i18n/Common

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { genElPopupOpener } from '../utils/el';
+import type { Props, Tag } from '../types';
+import TopTagSelector from '../tagSelector.vue';
+import TopTagSelectorPopupOpener from '../popupOpener/popupOpener.vue';
+
+const props = defineProps<Props>();
+
+const model = defineModel<Props['modelValue']>({
+	required: true,
+});
+
+const elFilter = ref<HTMLElement | undefined>(undefined);
+const el = ref<HTMLElement | undefined>(undefined);
+const el2 = ref<HTMLElement | undefined>(undefined);
+const el3 = ref<HTMLElement | undefined>(undefined);
+const elSetterSeveral = ref<HTMLElement | undefined>(undefined);
+
+const id = 'topTagSelectorOverview';
+
+const objects = [
+	{
+		id: '1',
+		tagsIds: ref<Tag['id'][]>(['1']),
+	},
+	{
+		id: '2',
+		tagsIds: ref<Tag['id'][]>(['1', '2', '3']),
+	},
+];
+
+onMounted(() => {
+	elFilter.value?.append(genElPopupOpener({
+		modelValue: [],
+		id,
+		tags: props.tags ?? [],
+		mode: 'filter',
+		targetId: 12345,
+		useTopButton: true,
+	}));
+
+	elSetterSeveral.value?.append(genElPopupOpener({
+		modelValue: [],
+		id,
+		tags: props.tags ?? [],
+		mode: 'setter',
+		filters: [],
+		useTopButton: true,
+	}, {
+		pos: '1',
+		notch: true,
+	}, 'Настройка'));
+
+	const els = [el, el2, el3];
+
+	els.forEach((el) => {
+		el.value?.append(genElPopupOpener({
+			modelValue: ['1'],
+			id,
+			tags: props.tags ?? [],
+			mode: 'setter',
+			targetId: 12345,
+		}, {
+			pos: '2',
+			notch: true,
+		}));
+	});
+});
+</script>
+
+<template>
+	<div>
+		<TopTagSelector
+			:="$props"
+			v-model="model"
+			:id
+		/>
+
+		<h2>Вставка дополнительных кнопок</h2>
+
+		<h3>TopTagSelectorPopupOpener (mode filter)</h3>
+
+		<TopTagSelectorPopupOpener
+			v-model="model"
+			:id
+			:tags="tags ?? []"
+			mode="filter"
+			useTopButton
+		/>
+
+		<h3>TopTagSelectorPopupOpener (mode setter)</h3>
+
+		<div v-for="object in objects">
+			Пример установки тега к объекту {{ object.id }}:
+
+			<br><br>
+
+			<TopTagSelectorPopupOpener
+				v-model="object.tagsIds.value"
+				:id
+				:tags="tags ?? []"
+				:targetId="object.id"
+				mode="setter"
+			/>
+
+			<br>
+		</div>
+
+		<h3>TopTagSelectorPopupOpener (mode setter, массовое редактирование)</h3>
+
+		<TopTagSelectorPopupOpener
+			:modelValue="[]"
+			:id
+			:tags="tags ?? []"
+			mode="setter"
+			:filters="[]"
+			useTopButton
+		>
+			Настройка
+		</TopTagSelectorPopupOpener>
+
+		<h2>Вставка дополнительных кнопок вне Vue</h2>
+
+		<h3>TopTagSelectorUtils.genElPopupOpener()</h3>
+
+		<div ref="elFilter"></div>
+
+		<h3>TopTagSelectorUtils.genElPopupOpener()</h3>
+
+		<div ref="el"></div>
+
+		<br>
+
+		<div ref="el2"></div>
+
+		<br>
+
+		<div ref="el3"></div>
+
+		<h3>TopTagSelectorPopupOpener (mode setter, массовое редактирование)</h3>
+
+		<div ref="elSetterSeveral"></div>
+	</div>
+</template>
+
+<style>
+.top-tagSelector-setter_single[data-top-popup="#topTagSelectorOverview"] {
+	width: 40px;
+	height: 50px;
+}
+</style>

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;