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

package/src/components/formsExt/menu/menu.vue

@@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { onMounted, onUpdated, ref } from 'vue';
+import type { Item, Props } from './menu';
+import Core from '@/core/core/core';
+import { isSafari } from '@/core/utils/device';
+import TopButton from '@/components/forms/button/button.vue';
+
+const props = withDefaults(defineProps<Props>(), {
+	styling: 'default',
+});
+
+const model = defineModel({
+	required: true,
+});
+
+const el = ref();
+
+// валидация типа modelValue без возможности выбора нескольких значений (ожидается строка)
+if (!props.isMultiple && !(typeof (model.value) === 'string' || model.value instanceof String)) {
+	console.warn('Type check failed for prop "modelValue". Expected String: ' + typeof (model.value));
+}
+
+// валидация типа modelValue с возможностью выбора нескольких значений (ожидается массив)
+if (props.isMultiple && !Array.isArray(model.value)) {
+	console.warn('Type check failed for prop "modelValue". Expected Array: ' + typeof (model.value));
+}
+
+// для множественного выбора без пустого множества
+// если ничего не выбрано, присваиваем 1-ое значение
+if (props.isMultiple && !props.canBeEmptyMultiple && Array.isArray(model.value) && !model.value.length) {
+	model.value = [props.items[0].href ?? props.items[0].value];
+}
+
+const itemIsActive = (item: Item) => {
+	if (!Array.isArray(model.value)) {
+		return item.value === model.value;
+	}
+
+	return model.value.includes(item.value);
+};
+
+/**
+ * Выбрать элемент
+ * @param item
+ * @param toggle - добавить или исключить элемент, для isMultiple
+ */
+const select = (item: Item, toggle = false) => {
+	if (Array.isArray(model.value)) {
+		let modelNew = model.value.slice();
+
+		if (toggle) {
+			if (!modelNew.length) modelNew = props.items.map(item => item.value);
+
+			const index = modelNew.indexOf(item.value);
+			if (index === -1) {
+				modelNew.push(item.value);
+			} else {
+				modelNew.splice(index, 1);
+			}
+		} else {
+			if (modelNew.length === 1 && modelNew[0] === item.value) {
+				modelNew = [];
+			} else {
+				modelNew = [item.value];
+			}
+		}
+
+		if (!props.canBeEmptyMultiple && !modelNew.length) modelNew = [item.value];
+
+		model.value = modelNew;
+
+		return;
+	}
+
+	model.value = item.value;
+};
+
+// вертикальный скролл в горизонтальный скролл
+const onWheel = (event: WheelEvent) => {
+	if (el.value.scrollWidth <= el.value.offsetWidth) return;
+	if (event.shiftKey) return;
+	if (Math.abs(event.deltaY) < 50) return; // устройство с высокой точностью, например тачпад
+
+	event.preventDefault();
+
+	const delta = event.deltaY > 0 ? 30 : -30;
+	el.value.scrollLeft = el.value.scrollLeft + delta;
+};
+
+/**
+ * Замена стандартному scrollIntoView, который меняет скролл документа
+ *
+ * Выравнивание по ближнему краю элемента
+ *
+ * Выравнивается таким образом, чтобы был виден соседний элемент
+ */
+const scrollIntoView = (isSmooth = true) => {
+	const elBtn = el.value.querySelector('.top-active');
+	if (!elBtn) return;
+
+	const gap = 24;
+
+	// левая и правая координаты элемента
+	const leftMargin = elBtn.offsetLeft - el.value.offsetLeft - gap;
+	const rightMargin = elBtn.offsetLeft - el.value.offsetLeft + elBtn.clientWidth + gap;
+
+	// левая и правая границы видимой части меню
+	const leftMarginParent = el.value.scrollLeft;
+	const rightMarginParent = el.value.clientWidth + el.value.scrollLeft;
+
+	let scrollLeft: number | undefined = undefined;
+
+	// левую границу элемента к левой границе меню
+	if (leftMargin < leftMarginParent) scrollLeft = leftMargin;
+
+	// правую границу элемента к правой границе меню
+	if (rightMargin > rightMarginParent) scrollLeft = rightMargin - el.value.clientWidth;
+
+	if (scrollLeft !== undefined) {
+		if (isSafari()) {
+			Core.$?.(el.value).animate({ scrollLeft: scrollLeft }, isSmooth ? 200 : 0);
+		} else {
+			el.value.scrollTo({ left: scrollLeft, behavior: isSmooth ? 'smooth' : 'auto' });
+		}
+	}
+};
+
+/**
+ * Выбрать все элементы в меню
+ */
+const selectAll = () => {
+	if (!Array.isArray(model.value)) return;
+
+	if (model.value.length === props.items.length) {
+		model.value = [props.items[0].href ?? props.items[0].value];
+		return;
+	}
+
+	model.value = props.items.map(item => item.href ?? item.value);
+};
+
+onMounted(() => scrollIntoView(false));
+onUpdated(() => scrollIntoView(true));
+
+</script>
+
+<template>
+	<div
+		ref="el"
+		:class="{
+			'top-menu': true,
+			['top-style_' + styling]: true,
+			// ['top-unwrap-x']: styling === 'default',
+		}"
+		@wheel="onWheel"
+	>
+		<TopButton
+			v-for="item in items"
+			:="item"
+			class="top-menu_item"
+			color="theme"
+			@click="select(item, $event.ctrlKey)"
+			:isActive="itemIsActive(item)"
+		>
+			<template #default v-if="item.content">
+				{{ item.content }}
+			</template>
+		</TopButton>
+
+		<div
+			v-if="Array.isArray(model) && selectAllItem"
+			class="top-menu_selectAll"
+		>
+			<TopButton
+				:="selectAllItem"
+				class="top-menu_item"
+				color="theme"
+				styling=""
+				@click="selectAll()"
+				:isActive="model.length === items.length"
+			>
+				<template #default v-if="selectAllItem.content">
+					{{ selectAllItem.content }}
+				</template>
+			</TopButton>
+		</div>
+	</div>
+</template>
+
+<style>
+.top-menu {
+	--scroll-thumb-color: var(--color-line-1);
+	--scroll-thumb-color-hover: var(--color-line-2);
+	--scroll-thumb-color-active: var(--color-line-3);
+
+	max-width: 100%;
+	display: flex;
+	align-items: flex-start;
+	gap: var(--top-gap-2);
+	overflow-x: auto;
+	scrollbar-width: none; /* firefox */
+
+	/* предотвратить натинвые события браузера (назад / вперед) */
+	overscroll-behavior-x: contain;
+}
+
+.top-menu::-webkit-scrollbar { display: none; }
+
+.top-menu .top-menu_item {
+	--top-button-color: var(--color-text-2);
+
+	outline-offset: -2px !important;
+	min-width: 0;
+	max-width: 200px;
+	margin: 0;
+	flex-shrink: 0;
+}
+
+.top-menu .top-menu_item[data-top-icon] {
+	--top-icon-color: var(--color-text-2);
+}
+
+.top-menu_selectAll {
+	position: sticky;
+	right: 0;
+	background: var(--color-layout-front-1);
+	border-left: 1px solid var(--color-line-1);
+	padding-left: var(--top-padding-1);
+	box-shadow: var(--color-layout-front-1) var(--top-padding-2) 0px;
+}
+
+/* style default */
+.top-menu.top-style_default .top-menu_item {
+	--top-forms-radius: 0;
+	--top-forms-border-color: transparent;
+	--top-forms-border-width: 2px;
+
+	filter: none;
+	box-shadow: none;
+	border: none;
+	border-bottom: var(--top-forms-border-width) solid var(--top-forms-border-color);
+	background: none;
+}
+
+.top-style_default > .top-menu_item > [data-top-badge] {
+	margin-top: 0;
+}
+
+.top-menu.top-style_default .top-menu_item:hover {
+	--top-icon-color: var(--color-text-1);
+	--top-button-color: var(--color-text-1);
+	--top-forms-border-color: var(--color-line-2);
+}
+
+.top-menu.top-style_default .top-menu_item:active,
+.top-menu.top-style_default .top-menu_item.top-active {
+	--top-icon-color: var(--color-text-primary);
+	--top-button-color: var(--color-text-1);
+	--top-forms-border-color: var(--color-line-primary-1);
+}
+
+.top-menu.top-style_default .top-menu_selectAll {
+	padding-left: var(--top-padding-2);
+}
+
+/* style bar */
+.top-menu.top-style_bar {
+	border-radius: var(--top-radius-3);
+	border: 1px solid var(--color-line-2);
+	padding: var(--top-padding-1);
+	gap: 3px;
+}
+.top-menu.top-style_bar .top-menu_item {
+	--top-button-background-color-hover: var(--color-layer-1);
+	--top-button-background-color-active: var(--color-layer-2);
+	--top-button-background-color-selected: var(--color-layer-primary-1);
+
+	position: relative;
+}
+
+.top-menu.top-style_bar .top-menu_item:hover {
+	--top-icon-color: var(--color-text-1);
+	--top-button-color: var(--color-text-1);
+}
+
+.top-menu.top-style_bar .top-menu_item.top-active {
+	--top-icon-color: var(--color-text-primary);
+	--top-button-color: var(--color-text-primary);
+}
+
+/* разделители кнопок в баре */
+.top-menu.top-style_bar .top-menu_item:not(:first-child):not(.top-active):not(:hover):after {
+	content: "";
+	background: var(--color-line-1-opacity);
+	width: 1px;
+	height: 60%;
+	display: block;
+	position: absolute;
+	left: -2px;
+}
+.top-menu.top-style_bar .top-menu_item.top-active + .top-menu_item:after,
+.top-menu.top-style_bar .top-menu_item:hover + .top-menu_item:after {
+	content: none !important;
+}
+
+/*
+.top-style_bar > .top-menu_item > [data-top-badge] {
+	margin-top: -3px;
+}
+*/
+
+/** TODO: .top-unwrap-x надо вынести глобально в UI или добавить в стили для storybook */
+/*
+.top-menu.top-unwrap-x {
+	padding-right: var(--top-unwrap-x);
+	padding-left: var(--top-unwrap-x);
+	margin-right: calc(0px - var(--top-unwrap-x));
+	margin-left: calc(0px - var(--top-unwrap-x));
+}
+*/
+</style>

package/src/components/formsExt/menu/stories/items.ts

@@ -0,0 +1,18 @@
+import type { Item } from '../menu';
+import { fakerRU } from '@faker-js/faker';
+
+const items: Item[] = [];
+
+for (let i = 1; i <= 10; i++) {
+	const name = fakerRU.animal.cat();
+
+	items.push({
+		icon: '',
+		title: `Длинное описание для ${name}`,
+		value: i,
+		content: name,
+		badgeNumber: fakerRU.number.int(99) * fakerRU.number.int(1),
+	});
+}
+
+export default items;

package/src/components/formsExt/menu/stories/overview.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../menu';
+import Menu from '../menu.vue';
+
+defineProps<Props>();
+
+const modelMenu = defineModel();
+const modelMenuMultiple = ref([]);
+</script>
+
+<template>
+	<div>
+		<h2>Одиночный выбор</h2>
+
+		<h3>Стиль: По умолчанию</h3>
+
+		<Menu
+			:="$props"
+			v-model="modelMenu"
+		/>
+
+		<h3>Стиль: В баре</h3>
+
+		<Menu
+			:="$props"
+			v-model="modelMenu"
+			styling="bar"
+		/>
+
+		<h2>Множественный выбор</h2>
+
+		Для множественного выбора используйте: <b>ctrl + click</b>.
+
+		<h3>Стиль: По умолчанию</h3>
+
+		<Menu
+			:="$props"
+			v-model="modelMenuMultiple"
+			:isMultiple="true"
+		/>
+
+		<h3>Стиль: В баре (с кнопкой выбрать все)</h3>
+
+		<Menu
+			:="$props"
+			v-model="modelMenuMultiple"
+			:isMultiple="true"
+			styling="bar"
+		/>
+	</div>
+</template>

package/src/components/formsExt/navigationMenu/item.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { NavigationMenuItem, PropsItem, EmitsItem } from './navigationMenu';
+
+const props = defineProps<NavigationMenuItem>();
+const emit = defineEmits<EmitsItem>();
+
+const isItemsOpened = ref(false);
+const activeItemId = ref(props.activeItemId);
+
+const handlerClick = (item: PropsItem) => {
+	if (!isItemsOpened.value) isItemsOpened.value = true;
+
+	activeItemId.value = item.id;
+	emit('updateActiveItem', item);
+};
+
+watch(() => props.activeItemId, (newVal) => {
+	activeItemId.value = newVal;
+});
+
+/**
+ * Устанавливаем начальную высоту, запускаем анимацию, устанавливая высоту на полный размер
+ */
+const onEnter = (el: Element) => {
+	const element = el as HTMLElement;
+	element.style.height = '0';
+
+	requestAnimationFrame(() => {
+		element.style.height = `${element.scrollHeight}px`;
+	});
+};
+
+/**
+ * Убираем фиксированную высоту, чтобы подпункты могли открываться
+ */
+const onAfterEnter = (el: Element) => {
+	(el as HTMLElement).style.height = 'auto';
+};
+
+/**
+ * Возвращаем фиксированную высоту, запускаем анимацию, устанавливая высоту в 0
+ */
+const onLeave = (el: Element) => {
+	const element = el as HTMLElement;
+	element.style.height = `${element.scrollHeight}px`;
+
+	requestAnimationFrame(() => {
+		element.style.height = '0';
+	});
+};
+</script>
+
+<template>
+	<li
+		:class="{
+			'top-navigationMenuItem': true,
+			['top-navigationMenuItem-depth-' + depth]: true,
+			'top-navigationMenuItem-opened': item.subitems?.length && isItemsOpened,
+			'top-navigationMenuItem-active': activeItemId === item.id,
+		}"
+	>
+		<span
+			v-if="item.subitems?.length && depth <= 3"
+			class="top-navigationMenuItemChevron"
+			data-top-icon=""
+			@click="isItemsOpened = !isItemsOpened"
+		></span>
+
+		<a
+			class="top-navigationMenuItem_link"
+			:href="item.url"
+			:data-top-icon="depth === 1 ? item.icon : undefined"
+			@click.prevent="handlerClick(item)"
+		>
+			{{ item.title }}
+		</a>
+
+		<Transition
+			name="expand"
+			@enter="onEnter"
+			@after-enter="onAfterEnter"
+			@leave="onLeave"
+		>
+			<ul
+				v-if="item.subitems?.length && depth <= 3"
+				v-show="isItemsOpened"
+				class="top-navigationMenuItem_subitems"
+			>
+				<Item
+					v-for="subitem in item.subitems"
+					:item="subitem"
+					:depth="depth + 1"
+					:activeItemId="activeItemId"
+					@updateActiveItem="(activeItem: PropsItem) => handlerClick(activeItem)"
+				/>
+			</ul>
+		</Transition>
+	</li>
+</template>
+
+<style>
+.top-navigationMenuItem {
+	--top-icon-color: var(--color-text-2);
+	--top-link-color: var(--color-text-2);
+
+	width: 320px;
+	padding: 0;
+	position: relative;
+	z-index: 2;
+}
+
+.top-navigationMenuItem-active {
+	--top-icon-color: var(--color-text-white);
+	--top-link-color: var(--color-text-white);
+}
+
+.top-navigationMenuItemChevron,
+.top-navigationMenuItem_link {
+	--top-forms-padding: 0px;
+}
+
+.top-navigationMenuItemChevron {
+	cursor: pointer;
+	position: absolute;
+	margin: 12px 0 12px var(--top-chevron-margin-left);
+	z-index: 1;
+}
+
+.top-navigationMenuItem_link {
+	color: var(--top-link-color);
+	text-decoration: none;
+	padding: var(--top-padding-3);
+	padding-left: var(--top-link-padding-left);
+	display: block;
+}
+
+.top-navigationMenuItem_link:before {
+	padding-right: var(--top-padding-1);
+}
+
+.top-navigationMenuItem:not(.top-navigationMenuItem-active) > .top-navigationMenuItem_link:hover {
+	background-color: var(--color-layout-front-3);
+}
+
+.top-navigationMenuItem-active > .top-navigationMenuItem_link {
+	background-color: var(--color-bg-primary-1);
+}
+
+.top-navigationMenuItem-depth-1 {
+	--top-chevron-margin-left: var(--top-padding-2);
+	--top-link-padding-left: var(--top-padding-8);
+}
+
+.top-navigationMenuItem-depth-2 {
+	--top-chevron-margin-left: calc(var(--top-padding-2) + var(--top-padding-7));
+	--top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7));
+}
+
+.top-navigationMenuItem-depth-3 {
+	--top-chevron-margin-left: calc(var(--top-padding-2) + var(--top-padding-7) + var(--top-padding-4));
+	--top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7) + var(--top-padding-4));
+}
+
+.top-navigationMenuItem-depth-4 {
+	--top-chevron-margin-left: calc(var(--top-padding-2) + var(--top-padding-7) + var(--top-padding-4) + var(--top-padding-4));
+	--top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7) + var(--top-padding-4) + var(--top-padding-4));
+}
+
+/* Анимация стрелочки */
+.top-navigationMenuItemChevron:before {
+	transform: rotate(-90deg);
+	transition: transform var(--transition-fast);
+}
+
+.top-navigationMenuItem-opened > .top-navigationMenuItemChevron:before {
+	transform: rotate(0deg);
+}
+
+/* Анимация раскрывающегося списка */
+.expand-enter-active,
+.expand-leave-active {
+	transition: height var(--transition-fast);
+	overflow: hidden;
+}
+</style>

package/src/components/formsExt/navigationMenu/navigationMenu.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import Component from './navigationMenu.vue';
+import * as ComponentsConst from './navigationMenu';
+import items from './stories/items';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+/**
+ * Компонент предназначен для вывода навигационного меню с древовидной структурой
+ *
+ * Максимальная степень вложенности - 4. Пункты с более глубокой вложенности отображены не будут.
+ *
+ * Иконки отображаются только на первом уровне вложенности
+ *
+ * ## Подкомпоненты
+ *
+ * - **NavigationMenuItem**: пункт меню, может содержать внутри себя подпункты
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	args: {},
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		items,
+	},
+} satisfies Story;
+
+export default meta;

package/src/components/formsExt/navigationMenu/navigationMenu.ts

@@ -0,0 +1,28 @@
+/**
+ * Определение параметров
+ */
+export interface Props {
+	items: PropsItem[];
+}
+
+export interface NavigationMenuItem {
+	depth: number;
+	activeItemId?: number;
+	item: PropsItem;
+}
+
+export interface PropsItem {
+	id: number;
+	url?: string;
+	title?: string;
+	icon?: string;
+	subitems?: PropsItem[];
+}
+
+export interface EmitsItem {
+	(e: 'updateActiveItem', item: PropsItem): void;
+}
+
+export interface Emits {
+	(e: 'updateActiveItem', item: PropsItem): void;
+}

package/src/components/formsExt/navigationMenu/navigationMenu.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import NavigationMenuItem from './item.vue';
+import type { Props, PropsItem, Emits } from './navigationMenu';
+
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const activeItemId = ref();
+
+const handler = (activeItem: PropsItem) => {
+	activeItemId.value = activeItem.id;
+	emit('updateActiveItem', activeItem);
+};
+</script>
+
+<template>
+	<ul class="top-navigationMenu">
+		<NavigationMenuItem
+			v-for="item in items"
+			:depth="1"
+			:activeItemId="activeItemId"
+			:item="item"
+			@updateActiveItem="(activeItem) => handler(activeItem)"
+		/>
+	</ul>
+</template>
+
+<style>
+.top-navigationMenu,
+ul.top-navigationMenu ul {
+	margin: 0;
+	padding: 0;
+}
+
+ul.top-navigationMenu li {
+	margin: 0;
+	list-style: none;
+}
+</style>