@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

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

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

@@ -1,28 +0,0 @@
-/**
- * Определение параметров
- */
-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

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