@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type { Props, TagSelectorTarget } from './types';
+import TopPopupOpener from '../../../popup/popup/opener.vue';
+import TopButton from '@/components/forms/button/button.vue';
+import { genTagIdClear, getTagById } from '../utils/utils';
+import TopTagIcon from '../tagIcon/tagIcon.vue';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<Props>();
+
+const model = defineModel<Props['modelValue']>({
+	required: true,
+});
+
+const component = props.useTopButton ? TopButton : 'div';
+const componentSlotName = props.useTopButton ? 'html' : 'default';
+
+const topTagSelectorTarget: TagSelectorTarget = {
+	model,
+	mode: props.mode,
+	targetId: props.targetId,
+	filters: props.filters,
+	payload: props.payload,
+};
+</script>
+
+<template>
+	<TopPopupOpener :id>
+		<component
+			:is="component"
+			:class="{
+				'top-tagSelector': true,
+				'top-tagSelector-filter': props.mode === 'filter',
+				'top-tagSelector-setter_single': props.mode === 'setter' && !filters,
+				'top-tagSelector-setter_several': props.mode === 'setter' && filters,
+				'top-tagSelector-selectedOne': !model.length || model.length === 1,
+				'top-tagSelector-toTwoLine': model.length > 5,
+			}"
+			color="theme"
+			:styling
+			v-top-data:topTagSelectorTarget="topTagSelectorTarget"
+			:=$attrs
+		>
+			<template #[componentSlotName]>
+				<TopTagIcon
+					v-if="!model.length && mode === 'filter'"
+					id="all"
+					colorId=""
+					:name="$i18n.Common.All_tags ?? ''"
+					state=""
+				/>
+
+				<!-- Массовое редактирование -->
+				<div v-if="mode === 'setter' && filters">
+					<slot></slot>
+				</div>
+
+				<!-- Список тегов -->
+				<TopTagIcon
+					v-else
+					v-for="tagId in model"
+					:id="genTagIdClear(tagId)"
+					:colorId="getTagById(tagId, tags)?.color_id ?? ''"
+					:name="getTagById(tagId, tags)?.name ?? ''"
+					:state="genTagIdClear(tagId) === tagId ? 'selected' : 'excluded'"
+				/>
+			</template>
+		</component>
+	</TopPopupOpener>
+</template>
+
+<style>
+.top-tagSelector {
+	cursor: pointer;
+	min-width: 0;
+	white-space: nowrap;
+	justify-content: left;
+}
+
+.top-tagSelector.top-button {
+	width: 112px;
+	vertical-align: middle;
+}
+
+.top-tagSelector.top-button.top-as-selector {
+	width: calc(112px + 20px);
+}
+
+.top-tagSelector-filter {
+	gap: var(--top-gap-1);
+}
+
+/* все теги в фильтре */
+.top-tagSelector-filter [data-tag_id="all"]:before {
+	margin-right: 6px;
+}
+
+/* фильтр по одному тегу */
+.top-tagSelector-filter.top-tagSelector-selectedOne [data-tag_id]:after {
+	content: attr(title);
+	margin-left: 20px;
+	min-width: 74px;
+	text-align: left;
+	line-height: 1.2;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.top-tagSelector-filter.top-tagSelector-selectedOne [data-tag_id="all"]:after {
+	margin-left: 0;
+}
+
+/* фильтр по многим тегам */
+.top-button.top-tagSelector-filter.top-tagSelector-toTwoLine {
+	flex-wrap: wrap;
+	align-content: center;
+}
+
+.top-button.top-tagSelector-filter.top-tagSelector-toTwoLine [data-tag_id] {
+	--top-tag-selector-size: 8px;
+}
+
+.top-button.top-tagSelector-filter.top-tagSelector-toTwoLine [data-tag_id]:nth-child(5) {
+	margin-right: 5px;
+}
+
+/* установка тегов */
+.top-tagSelector-setter_single {
+	position: relative;
+	display: flex !important; flex-direction: column; flex-wrap: wrap; align-items: stretch !important;
+}
+
+.top-tagSelector-setter_single [data-tag_id] {
+	width: auto; min-height: 20%; min-width: 50%;
+	flex: 1 1 auto;
+}
+</style>

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

@@ -0,0 +1,74 @@
+import type { ModelRef, Ref } from 'vue';
+import type { Props as TagSelectorProps, Tag } from '../types';
+import { type Styling } from '@/components/forms/button/types';
+
+export type TagSelectorTarget = {
+	model: ModelRef<TagSelectorProps['modelValue']> | Ref<TagSelectorProps['modelValue']>,
+	mode: Props['mode']
+	targetId: Props['targetId'],
+	filters: Props['filters'],
+	payload: Props['payload'],
+};
+
+export interface Props {
+	/**
+	 * Список выбранных тегов
+	 *
+	 * Настройка происходит в TopTagSelector, после открытия popup с помощью кнопки данного компонента
+	 */
+	modelValue: TagSelectorProps['modelValue'];
+
+	/**
+	 * Уникальный id для взаимодейсвтия с компонентом TopTagSelectorSetter
+	 *
+	 * Этот компонент может работать только с TopTagSelectorSetter с `props.id`
+	 */
+	id: string;
+
+	/**
+	 * Список возможных тегов
+	 */
+	tags: Tag[];
+
+	/**
+	 * Режим работы:
+	 * - `filter`: для фильтра (как правило, 1 элемент на 1 подключение TopTagSelector)
+	 * - `setter`: для установки тегов объекту (как правило, N элементов на 1 подключение TopTagSelector)
+	 */
+	mode: 'filter' | 'setter';
+
+	/**
+	 * id целевого объекта, к которому привязываются теги
+	 *
+	 * Для режима `setter`
+	 *
+	 * Нельзя использовать вместе с `filters`
+	 */
+	targetId?: number | string;
+
+	/**
+	 * Фильтры для настройки тегов
+	 *
+	 * Для режима `setter`
+	 *
+	 * При указании фильтров, будет включен режим массового редактирования
+	 *
+	 * Нельзя использовать вместе с `targetId`
+	 */
+	filters?: [];
+
+	/**
+	 * Использовать TopButton для выбора тегов
+	 *
+	 * - TopButton удобно использовать для фильтров и форма
+	 * - Не TopButton удобно использовать, когда надо сделать вывод выбранных тегов в произвольном дизайне
+	 */
+	useTopButton?: boolean;
+
+	/**
+	 * Полезная нагрузка, при редактировании целевого объекта
+	 */
+	payload?: Record<string, any>,
+
+	styling?: Styling;
+}

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,96 @@
+<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: transparent !important; background: none !important;
+}
+
+[data-tag_id="all"]:before {
+	content: "";
+	color: var(--color-tag-all) !important;
+	font-size: 26px;
+	min-width: calc(100% + 4px);
+	height: calc(100% + 4px);
+	margin-top: -18px;
+	margin-left: -8px;
+}
+
+/* в кнопке выбора тэгов и в 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,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+
+import Component from './tagSelector.vue';
+import tagsDefaults from './tagsDefaults';
+import ReadMe from './stories/README.md?raw';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component);
+
+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;