@topvisor/ui 1.0.19 → 1.0.20-selector2-3

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/radioGroup/radioGroup.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './radioGroup.vue';
+import * as ComponentsConst from './radioGroup';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: '',
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		radiosProps: [
+			{
+				value: '0',
+				title: 'ПК',
+				icon: '',
+			},
+			{
+				value: '1',
+				title: 'Планшет',
+				icon: '',
+			},
+			{
+				value: '2',
+				title: 'Смартфон',
+				icon: '',
+			},
+		],
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		size: 's',
+		showIndicator: false,
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/formsExt/radioGroup/radioGroup.ts

@@ -0,0 +1,28 @@
+import type { Size } from '@/components/forms/helpers';
+import { sizes } from '@/components/forms/helpers';
+
+export interface Props {
+	modelValue: string;
+
+	/**
+	 * Массив props для вставки radioGroupItem
+	 */
+	radiosProps?: ItemProps[];
+
+	showIndicator?: boolean;
+	size?: Size;
+	isError?: boolean;
+}
+
+export interface Emits {
+	(e: 'update:modelValue', value: Props['modelValue']): void;
+}
+
+export interface ItemProps {
+	value: Props['modelValue'];
+	title: string;
+	icon?: string;
+	disabled?: boolean;
+}
+
+export { sizes };

package/src/components/formsExt/radioGroup/radioGroup.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { Ref } from '@vue/reactivity';
+import { ref, watch } from 'vue';
+import type { Props, Emits } from './radioGroup';
+
+const model = defineModel<string>({
+	required: true,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 's',
+});
+
+const emit = defineEmits<Emits>();
+
+const elRef: Ref<HTMLElement | null> = ref(null);
+
+watch(model, () => {
+	if (!props.radiosProps?.some(item => item.value === model.value)) {
+		model.value = props.radiosProps?.[0]?.value ?? '';
+	}
+
+	elRef.value?.querySelector('.radioGroup_item-selected')?.scrollIntoView();
+}, { immediate: true });
+
+const uid = 'radioGroup-' + Math.random();
+</script>
+
+<template>
+	<div
+		ref="elRef"
+		:class="{
+			['top-radioGroup']: true,
+			['top-scrollBarXHidding']: true,
+			['top-size_' + size]: !!size,
+			['top-error']: isError,
+		}"
+	>
+		<label
+			v-for="item of radiosProps"
+			:class="{
+				['top-radioGroup_item-selected']: item.value === model,
+				['top-radioGroup_item']: true,
+				['top-forms-focusable']: true,
+				['top-disabled']: item.disabled,
+			}"
+			:data-top-icon="item.icon"
+			@click="model = item.value"
+		>
+			{{ item.title }}
+
+			<span
+				v-if="showIndicator"
+				class="top-radioGroup_circle"
+			></span>
+
+			<!-- Для нативной навигации -->
+			<input
+				v-model="model"
+				:name="uid"
+				type="radio"
+				:class="{
+					['top-unvisible']: true,
+				}"
+				:value="item.value"
+				:disabled="item.disabled"
+			/>
+		</label>
+	</div>
+</template>
+
+<style>
+@import "./styles/top-scrollBar.css";
+
+.top-radioGroup {
+	user-select: none;
+	box-sizing: border-box;
+	border-radius: 8px;
+	background-color: var(--color-layout-middle);
+	height: var(--top-forms-base-height);
+	padding: 2px;
+	gap: 2px;
+	display: flex;
+	align-items: flex-start;
+}
+
+.top-radioGroup_item {
+	color: var(--color-text-2);
+	cursor: pointer;
+	box-sizing: border-box;
+	border-radius: 6px;
+	height: calc(var(--top-forms-base-height) - 4px);
+	padding: 0 16px;
+	font-weight: 400;
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	gap: 4px;
+}
+
+.top-radioGroup_item:hover {
+	background-color: var(--color-layout-front-1);
+	box-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);
+}
+
+/* selected */
+.top-radioGroup_item-selected {
+	color: var(--color-text-1);
+	pointer-events: none;
+	background-color: var(--color-bg-lightning-1);
+	box-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);
+}
+
+/* circle */
+.top-radioGroup_circle {
+	content: "";
+	box-sizing: border-box;
+	border: 1px solid var(--color-line-3-opacity);
+	border-radius: 50%;
+	padding: 3px;
+	margin-left: auto;
+	width: calc(var(--top-forms-option-height) - 3px * 2);
+	height: calc(var(--top-forms-option-height) - 3px * 2);
+}
+
+.top-radioGroup_item:hover .top-radioGroup_circle:before {
+	border-color: var(--color-line-primary-1);
+}
+
+/* circle selected */
+.top-radioGroup_item-selected .top-radioGroup_circle {
+	border-color: var(--color-line-primary-1);
+	border-width: 5px;
+}
+
+.top-radioGroup_item-selected:hover .top-radioGroup_circle {
+	border-color: var(--color-line-primary-1);
+}
+
+/* top-error  */
+.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle {
+	border-color: var(--color-line-negative-1);
+}
+</style>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../radioGroup';
+import RadioGroup from '../radioGroup.vue';
+
+defineProps<Props>();
+
+const modelValue1 = ref('1');
+const modelValue2 = ref('3');
+
+const radiosProps1 = [
+	{
+		value: '0',
+		title: 'ПК',
+	},
+	{
+		value: '1',
+		title: 'Планшет',
+	},
+	{
+		value: '2',
+		title: 'Смартфон',
+	},
+	{
+		value: '3',
+		title: 'Книга',
+		disabled: true,
+	},
+];
+
+const radiosProps2 = [
+	{
+		value: '0',
+		title: 'ПК',
+		icon: '',
+	},
+	{
+		value: '1',
+		title: 'Планшет',
+		icon: '',
+	},
+	{
+		value: '2',
+		title: 'Смартфон',
+		icon: '',
+	},
+	{
+		value: '3',
+		title: 'Книга',
+		icon: '',
+		disabled: true,
+	},
+];
+</script>
+
+<template>
+	<div>
+		<h2>Стандартный вид</h2>
+
+		<RadioGroup
+			:="$props"
+			v-model="modelValue1"
+			:radiosProps="radiosProps1"
+		/>
+
+		<p><b>Ваш выбор:</b> {{ modelValue1 }}</p>
+
+		<h2>Со значками</h2>
+
+		<RadioGroup
+			:="$props"
+			v-model="modelValue2"
+			:radiosProps="radiosProps2"
+		/>
+
+		<p><b>Ваш выбор:</b> {{ modelValue2 }}</p>
+	</div>
+</template>