@topvisor/ui 1.0.20-selector2-3 → 1.0.20-selector2-4

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

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

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

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

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