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

package/src/components/formsExt/info/info.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { Props, Slots } from './types';
+
+withDefaults(defineProps<Props>(), {
+	styling: 'default',
+	size: 'default',
+});
+
+defineSlots<Slots>();
+</script>
+
+<template>
+	<div
+		:class="{
+			['top-info']: true,
+			['top-size_' + size]: true,
+			['top-info-styling_' + styling]: true,
+		}"
+		:data-top-icon="icon"
+	>
+		<div class="top-info_text">
+			<slot></slot>
+		</div>
+
+		<span v-if="$slots.additional" class="top-info_value">
+			<slot name="additional"></slot>
+		</span>
+	</div>
+</template>
+
+<style>
+.top-info {
+	--top-icon-width: var(--top-icon-size);
+
+	border-radius: var(--top-forms-radius);
+	box-sizing: border-box;
+	min-height: var(--top-forms-base-height);
+	padding: var(--top-padding-1) var(--top-padding-2);
+	flex-grow: 5;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--top-gap-2);
+}
+
+.top-info_text {
+	flex-grow: 1;
+}
+
+.top-info_value {
+	font-weight: bold;
+}
+
+/* size */
+.top-info.top-size_default {
+	border-radius: var(--top-radius-3);
+	padding: var(--top-padding-4);
+}
+
+/* styling */
+.top-info-styling_default {
+	--top-icon-color: var(--color-text-2);
+
+	background: var(--color-layer-1);
+}
+
+.top-info-styling_info {
+	--top-icon-color: var(--color-text-primary);
+
+	background: var(--color-layer-primary-1);
+}
+
+.top-info-styling_warning {
+	--top-icon-color: var(--color-text-warning);
+
+	background: var(--color-layer-warning-1);
+}
+
+.top-info-styling_negative {
+	--top-icon-color: var(--color-text-negative);
+
+	background: var(--color-layer-negative-1);
+}
+</style>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Props } from '../types';
+import Info from '../info.vue';
+
+defineProps<Props>();
+
+const stylings: Props['styling'][] = ['default', 'info', 'warning', 'negative'];
+</script>
+
+<template>
+	<div>
+		<template v-for="styling in stylings">
+			<h2>Стиль: {{ styling }}</h2>
+
+			<div class="overviewInfo">
+				<Info
+					:="$props"
+					:styling
+				>
+					{{ styling }}
+
+					<template #additional>
+						10
+					</template>
+				</Info>
+			</div>
+		</template>
+	</div>
+</template>

package/src/components/formsExt/info/types.ts

@@ -0,0 +1,25 @@
+export interface Props {
+	icon: string,
+
+	/**
+	 * Стиль оформления
+	 */
+	styling?: 'default' | 'info' | 'warning' | 'negative',
+
+	/**
+	 * Размер
+	 */
+	size?: 'default' | 's' | 'm' | 'l',
+}
+
+export interface Slots {
+	/**
+	 * Текст сообщения
+	 */
+	default(props: {}): any;
+
+	/**
+	 * Текст справа от сообещния с дополнительной информацией (например, сумма к оплате)
+	 */
+	additional?(props: {}): any;
+}

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+
+import Component from './menu.vue';
+import OverviewComponent from './stories/overview.vue';
+import items from './stories/items';
+
+const argTypes = genArgsTypes(Component);
+
+/**
+ * Компонент предназначен для вывода меню с выбором одного или нескольких элементов
+ *
+ * Не является навигационным меню, можно использовать для фильтров или для управления выводом другого контента
+ *
+ * Элементы меню представляют собой компонент **Button**. Все кнопки можно гибко настраивать.
+ *
+ * Имеет несколько видов оформления
+ *
+ * ## Дополнительный функционал:
+ *
+ * - Меню можно скролить стандартным скроллом мыши
+ * - Меню автоматически проскролливается до выбранного пункта меню
+ * - Есть возможность вывода кнопки "Выбрать все"
+ *
+ * Для **safari**: скролл с анимацией доступен только при подключении jQuery
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		modelValue: 1,
+		items,
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		modelValue: 1,
+		items,
+		selectAllItem: {
+			icon: '',
+			title: 'Выбрать все',
+			value: 'all',
+			content: '',
+		},
+		canBeEmptyMultiple: false,
+	},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { onMounted, onUpdated, ref } from 'vue';
+import type { Item, Props } from './types';
+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' && typeof (model.value) !== 'number') {
+	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 && props.items[0]) {
+	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 || $event.metaKey)"
+			: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 '../types';
+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 '../types';
+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/cmd + 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/menu/types.ts

@@ -0,0 +1,45 @@
+import type { Props as ButtonProps } from '@/components/forms/button/types';
+
+export interface Props {
+	/**
+	 * Значение активной кнопки, value или href
+	 */
+	modelValue: string | string[] | number | number[];
+
+	/**
+	 * Дополниетольно поддерижвает все props Button
+	 */
+	items: Item[];
+
+	/**
+	 * Возможность множественного выбора
+	 */
+	isMultiple?: boolean;
+
+	/**
+	 * Возможность пустого множества
+	 */
+	canBeEmptyMultiple?: boolean;
+
+	/**
+	 * Стиль меню
+	 * default - табы
+	 * bar - кнопки в баре
+	 */
+	styling?: typeof styling[keyof typeof styling];
+
+	/**
+	 * Кнопка - выбрать все
+	 */
+	selectAllItem?: Item;
+}
+
+export interface Item extends ButtonProps {
+	value: string | number;
+	content?: string;
+}
+
+export const styling = {
+	'default': 'default',
+	'bar': 'bar',
+} as const;

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Component from './policy.vue';
+import { TopButton } from '@/components/forms/forms';
+import { genArgsTypes } from '@/components/helpersStories';
+
+const argTypes = genArgsTypes(Component);
+
+/**
+ * Окно согласия на использование файлов cookie
+ *
+ * После согласия устанавливается куки с именем cookie_consent и значением accepted. Куки устанавливается для корневого домена второго уровня (без www) и для всех его поддоменов. Куки доступно на всех страницах сайта. Срок действия куки - 1 год.
+ */
+const meta = {
+	component: Component,
+	argTypes,
+	tags: ['autodocs'],
+} satisfies Meta<typeof Component>;
+
+export const Playground = {
+	args: {
+		title: 'Мы используем cookie',
+		text: 'Наш сайт использует cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных' +
+			' данных в соответствии с <a class="top-as-a" href="https://topvisor.com/ru/privacy-policy/">политикой конфиденциальности</a> и ' +
+			'<a class="top-as-a" href="https://topvisor.com/ru/privacy-consent/">политикой обработки cookie-файлов</a>, а также' +
+			' предоставляете <a class="top-as-a" href="hrefConfirm">согласие на обработку таких данных</a>'
+	},
+	render: (args) => ({
+		components: {
+			TopPolicy: Component,
+			TopButton,
+		},
+
+		setup() {
+			const hasCookie = document.cookie.includes('cookie_consent=accepted');
+
+			const deleteCookie = () => {
+				document.cookie = 'cookie_consent=; path=/; max-age=0';
+				location.reload();
+			};
+
+			return {
+				hasCookie,
+				deleteCookie,
+				args,
+			};
+		},
+
+		template: `
+			<div style="height: 50dvh">
+				<TopButton
+					v-if="hasCookie"
+					@click="deleteCookie"
+				>
+					Удалить куку
+				</TopButton>
+
+				<TopPolicy
+					v-if="!hasCookie"
+					:="args"
+				/>
+			</div>
+		`,
+	}),
+} satisfies StoryObj<typeof meta>;
+
+export default meta;