@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

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

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

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

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

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

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

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