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

package/src/components/project/tagSelector/utils/el.ts

@@ -0,0 +1,151 @@
+import { isRef, type Ref, ref, unref, watch } from 'vue';
+import { useI18n } from '@/core/plugins/i18n';
+import { storage } from '@/core/utils/dom';
+import TopPopupWorker from '@/components/popup/lib/worker';
+import type { OpenerProps as PopupOpenerProps } from '@/components/popup/popup/popup';
+import type { Props as TagSelectorOpenerProps, TagSelectorTarget } from '../popupOpener/types';
+import type { Props as TagIconProps } from '../tagIcon/types';
+import { genTagIdClear, getTagById } from '../utils/utils';
+
+/**
+ * Сгенерировтаь элемент для открытия popup с выбором тегов
+ *
+ * Альтернатива TopTagSelecorPopupOpener для работы вне vue
+ *
+ * Требует монтирования компонента TopTagSelecor
+ */
+export const genElPopupOpener = (
+	props: TagSelectorOpenerProps & { modelValue: TagSelectorOpenerProps['modelValue'] | Ref<TagSelectorOpenerProps['modelValue']> },
+	propsPopup?: Partial<PopupOpenerProps>,
+	htmlSetterSeveral?: string,
+): HTMLElement => {
+	if (!propsPopup) propsPopup = { id: props.id };
+
+	propsPopup.id = props.id;
+
+	const el = TopPopupWorker.genElPopupOpener('div', propsPopup as PopupOpenerProps);
+
+	el.classList.add('top-tagSelector');
+	if (props.useTopButton) el.classList.add('top-button', 'top-color_theme');
+	if (props.mode === 'filter') el.classList.add('top-tagSelector-filter');
+	if (props.mode === 'setter' && !props.filters) el.classList.add('top-tagSelector-setter_single');
+	if (props.mode === 'setter' && props.filters) el.classList.add('top-tagSelector-setter_several');
+
+	// прокcи клик: lazy connect
+	el.onclick = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		el.onclick = null;
+
+		const model = ref(props.modelValue);
+
+		const target: TagSelectorTarget = {
+			model,
+			mode: props.mode,
+			targetId: props.targetId,
+			filters: props.filters,
+			payload: props.payload,
+		};
+
+		storage(el, 'topTagSelectorTarget', target);
+
+		delete el.dataset.topPopupDisabled;
+
+		if (!isRef(props.modelValue)) {
+			watch(model, () => {
+				props.modelValue = model.value;
+
+				elPopupOpenerRender(el, props, htmlSetterSeveral);
+			});
+		}
+
+		// выполнение клика
+		el.click();
+	};
+
+	if (isRef(props.modelValue)) {
+		watch(props.modelValue, () => elPopupOpenerRender(el, props, htmlSetterSeveral));
+	} else {
+		storage(el, 'topTagSelectorRender', (modelValue: TagSelectorOpenerProps['modelValue']) => {
+			props.modelValue = modelValue;
+
+			const target = storage(el, 'topTagSelectorTarget');
+			if (target) target.model.value = modelValue;
+
+			elPopupOpenerRender(el, props, htmlSetterSeveral);
+		});
+	}
+
+	elPopupOpenerRender(el, props, htmlSetterSeveral);
+
+	return el;
+};
+
+/**
+ * Вызвать перерисовку элемента, который был создан через genElPopupOpener()
+ *
+ * Работет только для элементов не с реактивным modelValue
+ */
+export const renderElPopupOpener = (el: HTMLElement, modelValue: TagSelectorOpenerProps['modelValue']) => {
+	storage(el, 'topTagSelectorRender')?.(modelValue);
+};
+
+/**
+ * Отрисовать TopTagSelecorPopupOpener
+ */
+const elPopupOpenerRender = (el, props: TagSelectorOpenerProps, htmlSetterSeveral?: string) => {
+	const tagsIds = unref(props.modelValue);
+
+	el.classList.toggle('top-tagSelector-selectedOne', !tagsIds.length || tagsIds.length === 1);
+	el.classList.toggle('top-tagSelector-toTwoLine', tagsIds.length > 5);
+
+	if (props.mode === 'setter' && props.filters) {
+		el.innerHTML = `<div>${htmlSetterSeveral}</div>`;
+
+		return;
+	}
+
+	el.innerHTML = '';
+
+	if (!tagsIds.length && props.mode === 'filter') {
+		const elTagIcon = genElTagIcon({
+			id: 'all',
+			colorId: '',
+			name: useI18n().Common?.All_tags ?? '',
+			state: '',
+		});
+
+		el.append(elTagIcon);
+	}
+
+	tagsIds.forEach(tagId => {
+		const elTagIcon = genElTagIcon({
+			id: genTagIdClear(tagId),
+			colorId: getTagById(tagId, props.tags)?.color_id ?? '',
+			name: getTagById(tagId, props.tags)?.name ?? '',
+			state: genTagIdClear(tagId) === tagId ? 'selected' : 'excluded',
+		});
+
+		el.append(elTagIcon);
+	});
+};
+
+/**
+ * Сгенерировтаь элемент для открытия popup с выбором тегов
+ *
+ * Альтернатива TopTagSelecorTagIcon для работы вне vue
+ */
+const genElTagIcon = (props: TagIconProps) => {
+	const el = document.createElement('div');
+
+	el.classList.add('top-tagSelector_tagIcon');
+	el.classList.toggle('top-tagSelector-active', !!props.state);
+	el.classList.toggle('top-tagSelector-excluded', props.state === 'excluded');
+
+	el.dataset.tag_id = props.id;
+	el.dataset.tag_color_id = props.colorId;
+	el.title = props.name;
+
+	return el;
+};

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

@@ -0,0 +1,30 @@
+import type { Props as TagSelectorOpenerProps, TagSelectorTarget } from '../popupOpener/types';
+import type { Tag, TagIdExclude } from '../types';
+
+/**
+ * Полуичить значение исключения тега tagId
+ */
+export const genTagIdExcluded = (tagId: Tag['id']): TagIdExclude => {
+	return '-' + tagId as TagIdExclude;
+};
+
+/**
+ * Вернуть чистый tagId без exclude флага
+ */
+export const genTagIdClear = (tagId: Tag['id'] | TagIdExclude) => {
+	if (tagId[0] === '-') return tagId.substring(1) as Tag['id'];
+
+	return tagId as Tag['id'];
+};
+
+/**
+ * Получить инфомрацию о теге по его id
+ */
+export const getTagById = (tagId: Tag['id'] | TagIdExclude, tags: TagSelectorOpenerProps['tags']) => {
+	tagId = genTagIdClear(tagId);
+
+	const tag = tags.find(tag => tag.id === tagId);
+	if (!tag) return;
+
+	return tag;
+};

package/src/components/tabs/tabs/content.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PropsContent } from './tabs';
+
+defineProps<PropsContent>();
+</script>
+
+<template>
+	<div
+		:class="{
+			'top-tabs_content': true,
+		}"
+		:data-tabs-name="name"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<style>
+.top-tabs_content {
+	padding: 14px;
+	overflow: auto;
+	display: none;
+}
+</style>

package/src/components/tabs/tabs/stories/README.md

@@ -0,0 +1,12 @@
+В компоненте используется 3 именованых слота:
+
+**#header** - шаблон или текст справа от вкладок  
+**#buttons** - для вставки самих вкладок  
+**#contents** - для шаблона или текста под вкладкой
+
+Также нужно использовать два вспомогательных компонента:
+
+**TabsTab** - компонент вкладки  
+**TabsContent** - компонент содержания вкладки
+
+Для совместимости с версткой в html поддерживает 6 вкладок

package/src/components/tabs/tabs/tab.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PropsTab } from './tabs';
+
+defineProps<PropsTab>();
+</script>
+
+<template>
+	<input
+		type="radio"
+		class="top-tabs_tabInput top-unvisible"
+		:id="tabsId + name"
+		:name="tabsId"
+		:value="name"
+		:checked="active"
+		:disabled="disabled"
+	/>
+
+	<label
+		:class="{
+			'top-tabs_tabLabel': true,
+			'top-forms-focusable': true,
+			'top-disabled': disabled,
+		}"
+		:for="tabsId + name"
+	>
+		<slot></slot>
+	</label>
+</template>
+
+<style>
+.top-tabs_tabLabel {
+	color: var(--color-text-1);
+	cursor: pointer;
+	border-bottom: 2px solid transparent;
+	padding: 14px 20px;
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.top-tabs_tabLabel:hover {
+	border-color: var(--color-line-2);
+}
+
+.top-tabs_tabInput:checked + .top-tabs_tabLabel {
+	border-color: var(--color-line-primary-1);
+	color: var(--color-text-primary);
+}
+</style>

package/src/components/tabs/tabs/tabs.stories.ts

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import Component from './tabs.vue';
+import TabsTab from './tab.vue';
+import TabsContent from './content.vue';
+import * as ComponentsConst from './tabs';
+import ReadMe from './stories/README.md?raw';
+
+import Button from '@/components/forms/button/button.vue';
+import Hint from '@/components/forms/hint/hint.vue';
+import Textarea from '@/components/forms/textarea/textarea.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Overview = {
+	args: {
+		id: 'tabs',
+	},
+	render: (args) => ({
+		components: {
+			Tabs: Component,
+			TabsTab,
+			TabsContent,
+			Button,
+			Textarea,
+			Hint,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<Tabs :id="args.id">
+				<template #header>
+					<Hint hint="В шапку табов можно вставлять произвольный HTML код"></Hint>
+
+					<Button icon="" color="theme"/>
+				</template>
+
+				<template #buttons>
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_1"
+						active
+					>
+						Вкладка 1
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_2"
+					>
+						Вкладка 2
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_3"
+					>
+						Вкладка 3
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_4"
+					>
+						Вкладка 4
+
+						&nbsp;
+
+						<Hint hint="В заголовок вкладки можно вставлять произвольный HTML код"></Hint>
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_5"
+					>
+						Вкладка 5 (вложенные)
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_6"
+						disabled
+					>
+						Вкладка 6 (disabled)
+					</TabsTab>
+				</template>
+
+				<template #contents>
+					<TabsContent>
+						<p>
+							Текст для вкладки 1 с вставкой большого блока
+						</p>
+
+						<div style="background: var(--color-layout-middle); width: 150%; height: 50vh; padding: 10px; display: block;">
+							Большой блок
+						</div>
+					</TabsContent>
+
+					<TabsContent>
+						<Textarea modelValue="" placeholder="Напишите что-нибудь..."/>
+					</TabsContent>
+
+					<TabsContent>
+						<Button>
+							Кнопка
+						</Button>
+					</TabsContent>
+
+					<TabsContent>
+						Текст для вкладки 4
+					</TabsContent>
+
+					<TabsContent>
+						<Tabs :id="args.id + '-2'">
+							<template #buttons>
+								<TabsTab
+									:tabsId="args.id + '2'"
+									name="subtab_1"
+									active
+								>
+									Вкладка 1
+								</TabsTab>
+
+								<TabsTab
+									:tabsId="args.id + '2'"
+									name="subtab_2"
+								>
+									Вкладка 2
+								</TabsTab>
+							</template>
+
+							<template #contents>
+								<TabsContent name="tab_1">
+									Текст для вкладки 1
+								</TabsContent>
+
+								<TabsContent name="tab_2">
+									Текст для вкладки 2
+								</TabsContent>
+							</template>
+						</Tabs>
+					</TabsContent>
+
+					<TabsContent>
+						Текст для вкладки 6
+					</TabsContent>
+				</template>
+			</Tabs>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/tabs/tabs/tabs.ts

@@ -0,0 +1,22 @@
+export interface Props {
+	/**
+	 * Уникальный id табов для нативного DOM и возмоэности сохранения state
+	 */
+	id: string;
+}
+
+export interface PropsTab {
+	tabsId: string;
+
+	/**
+	 * Обязательный атрибут, должен быть уникален для каждого таба в пределах одного компонента
+	 */
+	name: string;
+	title?: string;
+	active?: boolean;
+	disabled?: boolean;
+}
+
+export interface PropsContent {
+	name?: string;
+}

package/src/components/tabs/tabs/tabs.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Props } from './tabs';
+
+defineProps<Props>();
+</script>
+
+<template>
+	<div
+		:class="{
+			'top-tabs': true,
+		}"
+	>
+		<!-- @slot Кнопки вкладок, ожидает передачу компонентов TabTitle -->
+		<slot name="buttons"></slot>
+
+		<div v-if="$slots.header" class="top-tabs_header">
+			<!-- @slot Слот с проивзольным содержимым, которое будет добавлено справа от вкладок -->
+			<slot name="header"></slot>
+		</div>
+
+		<div class="top-tabs_contents">
+			<!-- @slot Контент вкладок, ожидает передачу компонентов TabContent -->
+			<slot name="contents"></slot>
+		</div>
+	</div>
+</template>
+
+<style>
+.top-tabs {
+	background: var(--color-layout-front-1);
+	border-radius: 8px;
+	border: 1px solid var(--color-line-2-opacity);
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+}
+
+.top-tabs_header {
+	padding: 6px;
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+/* Содержимое вкладок */
+.top-tabs_contents {
+	border-top: 1px solid var(--color-line-2-opacity);
+	width: 100%;
+	margin-top: -1px;
+}
+
+/* Состояние открытости вкладок */
+.top-tabs_tabInput:checked:nth-child(1) ~ .top-tabs_contents > .top-tabs_content:nth-child(1),
+.top-tabs_tabInput:checked:nth-child(3) ~ .top-tabs_contents > .top-tabs_content:nth-child(2),
+.top-tabs_tabInput:checked:nth-child(5) ~ .top-tabs_contents > .top-tabs_content:nth-child(3),
+.top-tabs_tabInput:checked:nth-child(7) ~ .top-tabs_contents > .top-tabs_content:nth-child(4),
+.top-tabs_tabInput:checked:nth-child(9) ~ .top-tabs_contents > .top-tabs_content:nth-child(5),
+.top-tabs_tabInput:checked:nth-child(11) ~ .top-tabs_contents > .top-tabs_content:nth-child(6) {
+	display: block;
+}
+</style>

package/src/components/tabs/tabs.ts

@@ -0,0 +1,9 @@
+import type { ComponentCustomProps } from 'vue';
+
+import Tabs from './tabs/tabs.vue';
+import TabsTab from './tabs/tab.vue';
+import TabsContent from './tabs/content.vue';
+
+export const TopTabs = Tabs as typeof Tabs & ComponentCustomProps;
+export const TopTabsTab = TabsTab as typeof TabsTab & ComponentCustomProps;
+export const TopTabsContent = TabsContent as typeof TabsContent & ComponentCustomProps;