@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import Selector2 from '../selector2.vue';
-import type { Props, Item } from '../selector2';
-import dummyAPIRequest from './dummyAPIRequest';
-
-defineProps<Props>();
-
-defineModel<Props['modelValue']>();
-
-const items = [
-	{
-		id: 1,
-		name: 'Выбери меня',
-	},
-	{
-		id: 2,
-		name: 'И меня',
-	},
-	{
-		id: 3,
-		name: 'И меня тоже',
-	},
-] as Item[];
-
-const item = {
-	id: null,
-	name: '',
-};
-
-const selector_1 = ref(item);
-const selector_2 = ref(item);
-const selector_3 = ref(item);
-const selector_4 = ref([]);
-const selector_5 = ref(item);
-const selector_6 = ref([]);
-</script>
-
-<template>
-	<div>
-		<h2>Простой Selector</h2>
-
-		<Selector2
-			:=$props
-			v-model="selector_1"
-			:items="items"
-		/>
-
-		<h2>Selector с возможностью указать свое значение</h2>
-
-		<Selector2
-			:=$props
-			v-model="selector_2"
-			:items="items"
-			:appendSearchToResult="true"
-		/>
-
-		<h2>Selector с выбором Все</h2>
-
-		<Selector2
-			:=$props
-			v-model="selector_3"
-			:items="items"
-			:appendAllValue="true"
-		/>
-
-		<h2>Selector (multiselector = true)</h2>
-
-		<Selector2
-			:=$props
-			v-model="selector_4"
-			:items="items"
-			:multiselect="true"
-		/>
-
-		<h2>Selector ajax (multiselector = false)</h2>
-
-		<Selector2
-			:=$props
-			v-model="selector_5"
-			:apiRequest="dummyAPIRequest"
-		/>
-
-		<h2>Selector ajax (multiselector = true)</h2>
-
-		<Selector2
-			:=$props
-			v-model="selector_6"
-			:apiRequest="dummyAPIRequest"
-			:multiselect="true"
-		/>
-	</div>
-</template>

package/src/components/helper.js

@@ -1,10 +0,0 @@
-export const REGEXP_START_SYMBOL_ICON = new RegExp('^[^a-zа-я0-9_%#!?.:\'"«»[\\](){} \\r\\n\\t<>&/+-]', 'i');
-
-export const extractIconAndContent = content => {
-	const iconExists = content?.[0]?.match(REGEXP_START_SYMBOL_ICON);
-
-	return {
-		icon: iconExists ? content[0] : null,
-		content: iconExists ? content.substring(1) : content,
-	};
-};

package/src/components/helpersStories.ts

@@ -1,205 +0,0 @@
-import type { Component, ComponentInstance } from 'vue';
-import type { StoryObj } from '@storybook/vue3';
-import type { InputType } from '@storybook/csf';
-import { faker, fakerRU } from '@faker-js/faker';
-
-faker.seed(1);
-fakerRU.seed(1);
-
-/**
- * Генерация объекта ArgsTypes для Storybook
- */
-export function genArgsTypes(
-	component: ComponentInstance<Component>,
-	ComponentsConsts: Record<string, any>,
-	slotsAsString: string[] = [],
-	readonly = false,
-) {
-	const argTypes: Record<string, InputType> = {};
-
-	// slot по умолчанию в виде строки
-	slotsAsString.forEach((slotName) => {
-		argTypes[slotName] = {
-			control: 'text',
-			table: {
-				readonly,
-			},
-		};
-	});
-
-	const propsNames = Object.keys(component.props ?? []);
-	propsNames.forEach(name => {
-		const prop = component.props[name];
-
-		argTypes[name] = genInputType(prop);
-
-		argTypes[name].table ??= {};
-		argTypes[name].table.readonly = readonly;
-
-		// union типы, определенные через константы
-		const typeName = name[0].toLowerCase() + name.substring(1);
-		const typeNamePlural = name[0].toLowerCase() + name.substring(1) + 's';
-
-		const type = ComponentsConsts[typeName] || ComponentsConsts[typeNamePlural];
-		if (type) {
-			const size = Object.keys(type).length;
-
-			argTypes[name].control = (size > 3) ? 'select' : 'inline-radio';
-			argTypes[name].options = Object.keys(type);
-		}
-
-		// Строка перечисления
-		if (prop.type === String){
-			argTypes[name].control = 'text';
-		}
-
-		// Число перечисления
-		if (prop.type === Number){
-			argTypes[name].control = 'number';
-		}
-
-		// для controls необходимо указывать конкретный тип, выбрать первый
-		if (Array.isArray(prop.type)) {
-			const type = prop.type[0];
-
-			switch (type) {
-				case Boolean:
-					argTypes[name].control = 'boolean';
-
-					break;
-
-				case String:
-					argTypes[name].control = 'text';
-
-					break;
-
-				case Number:
-					argTypes[name].control = 'number';
-
-					break;
-			}
-		}
-	});
-
-	return argTypes;
-}
-
-/**
- * Генерация элемента для объекта ArgsTypes для Storybook
- */
-const genInputType = (prop: any) => {
-	const inputType: InputType = {
-		table: {},
-	};
-
-	if (prop.required) {
-		inputType.table!.category = 'required';
-	}
-
-	return inputType;
-};
-
-/**
- * Сгенерировать историю обзора компонента
- *
- * Располагайте компонент OverviewComponent в папке stories, чтобы он не мешал основному компоненту
- * @param options - парамтеры историии
- * @param options.args - следует указавать только необходимые для демонстрации props, которых нет в шаблоне OverviewComponent
- * @param OverviewComponent - компонент для вывода другого компонента в разных состояниях
- * @returns возвращает историю обзора компонента
- */
-export function genOverviewStory<Story>(options: Story & StoryObj, OverviewComponent: any): Story {
-	if (!options.args) {
-		options.args = {};
-	}
-
-	if (!options.parameters) {
-		options.parameters = {};
-	}
-	if (!options.parameters.controls) {
-		options.parameters.controls = {};
-	}
-	if (!options.parameters.controls.include) {
-		options.parameters.controls.include = Object.keys(options.args);
-	}
-
-	if (!options.render) {
-		options.render = (args) => ({
-			components: { OverviewComponent },
-			setup() {
-				return { args };
-			},
-			template: '<OverviewComponent :="args"/>',
-		});
-	}
-
-	return options satisfies StoryObj;
-}
-
-/**
- * Получить объект с css переменными из css стилей
- * @param css - стили css
- * @return - словарь с css переменными
- */
-export function parseCSSVariables(css: string): Map<string, string> {
-	const matches = css.matchAll(/--([^:]+):([^;]+)/g);
-
-	const cssVariables = new Map();
-
-	for (const match of matches) {
-		const name = match[1].trim();
-		const value = match[2].trim();
-
-		cssVariables.set(name, value);
-	}
-
-	return cssVariables;
-}
-
-/**
- * Сгенерировать словарь css переменных с двойной вложенностью, определяемую разделителем '-' в имени переменной
- * @param cssVariables - словарь css переменных
- * @param searchStrings - вернуть только подходящие по имени переменные, по условию AND
- * @return - словарь с группами css переменных
- */
-export function genCSSVariablesGroups(
-	cssVariables: Map<string, string>,
-	searchStrings: string[] = [],
-): Map<string, Map<string, Map<string, string>>> {
-	const cssVariablesGroups2 = new Map();
-
-	cssVariables.forEach((value, name) => {
-		const parts = name.split('-');
-		const groupName = parts[0] ?? '';
-		const subgroupName = parts[1] ?? '';
-
-		for (const searchString of searchStrings) {
-			if (searchString) {
-				if (searchString[0] === '/') {
-					const regexpString = searchString.replaceAll('/', '');
-
-					const regExp = new RegExp(regexpString);
-
-					if (!regExp.test(name)) {
-						return;
-					}
-				} else {
-					if (name.indexOf(searchString) === -1) {
-						return;
-					}
-				}
-
-			}
-		}
-
-		const group: Map<string, Map<string, string>> = cssVariablesGroups2.get(groupName) || new Map();
-		const subgroup: Map<string, string> = group.get(subgroupName) || new Map();
-
-		subgroup.set(name, value);
-		group.set(subgroupName, subgroup);
-
-		cssVariablesGroups2.set(groupName, group);
-	});
-
-	return cssVariablesGroups2;
-}

package/src/components/layout/islandRows/islandRows.stories.ts

@@ -1,139 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './islandRows.vue';
-import * as ComponentsConst from './types';
-import ReadMe from './stories/README.md?raw';
-
-import TopRows from '../rows/rows.vue';
-import TopIslandRowsRow from '@/components/layout/islandRows/islandRowsRow/islandRowsRow.vue';
-import TopIslandRowsSubTitle from '@/components/layout/islandRows/islandRowsSubTitle/islandRowsSubTitle.vue';
-import { fakerRU } from '@faker-js/faker';
-import { ref } from 'vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['title', 'default']);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		title: 'Заголовок',
-		default: `Тут должен быть вставлен TopRows`,
-	},
-} satisfies Story;
-
-export const Overview = {
-	render: () => ({
-		components: {
-			TopRows,
-			TopIslandRows: Component,
-			TopIslandRowsRow,
-			TopIslandRowsSubTitle,
-		},
-		setup: () => {
-			return {
-				isCheck: ref(false),
-				fakerRU,
-			};
-		},
-		template: `
-			<div style="max-width: 500px;">
-				<TopIslandRows>
-					<template #title>
-						Настройки профиля
-					</template>
-					<template #default>
-						<TopIslandRowsSubTitle>
-							Основные настройки
-						</TopIslandRowsSubTitle>
-
-						<TopRows gap="xs">
-							<TopIslandRowsRow>
-								<TopRows>
-									<TopRows gap="l">
-										<TopInput
-											modelValue=""
-											captionType="top"
-											title="First name"
-											:placeholder="fakerRU.person.firstName()"
-										/>
-
-										<TopInput
-											modelValue=""
-											captionType="top"
-											title="Last name"
-											:placeholder="fakerRU.person.lastName()"
-										/>
-									</TopRows>
-								</TopRows>
-							</TopIslandRowsRow>
-						</TopRows>
-
-						<TopRows>
-							<TopInput
-								modelValue=""
-								captionType="top"
-								title="E-mail"
-								type="email"
-							/>
-						</TopRows>
-
-						<TopIslandRowsSubTitle>
-							Прочие настройки
-						</TopIslandRowsSubTitle>
-
-						<TopIslandRowsRow>
-							<TopSwitcher
-								:modelValue="false"
-								description="Вы можете использовать бета версию для получение новых фичей раньше остальных. Внимание, бета версии означает, что функционал находится в стадии разработки."
-							>
-								Бета версия
-							</TopSwitcher>
-						</TopIslandRowsRow>
-
-						<TopRows>
-							<TopTextarea modelValue="" placeholder="Опишите ваши любимые литературные образы"/>
-
-							<div class="top-comment">&nbsp; Книги бывают очень интересны</div>
-						</TopRows>
-
-						<TopIslandRowsRow>
-							<TopRadio modelValue="Мужчина" value="Мужчина" name="sex">
-								Мужчина
-							</TopRadio>
-							<TopRadio modelValue="" value="Женщина" name="sex">
-								Женщина
-							</TopRadio>
-						</TopIslandRowsRow>
-
-						<TopIslandRowsRow>
-							<TopCheckbox v-model="isCheck">
-								Согласен
-							</TopCheckbox>
-						</TopIslandRowsRow>
-
-						<TopIslandRowsRow v-show="isCheck" v-top-scroll-into-view>
-							<TopButton color="blue" styling="soft">
-								<span data-top-icon=""></span>Сохранить
-							</TopButton>
-						</TopIslandRowsRow>
-					</template>
-				</TopIslandRows>
-			</div>`,
-	}),
-} satisfies Story;
-
-export default meta;

package/src/components/layout/islandRows/islandRows.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { Slots } from './types';
-import TopRows from '../rows/rows.vue';
-
-defineSlots<Slots>();
-</script>
-
-<template>
-	<div class="top-islandRows">
-		<div
-			v-if="$slots.title"
-			class="top-islandRows_title"
-		>
-			<slot name="title"></slot>
-		</div>
-
-		<TopRows gap="l" class="top-islandRows_rows">
-			<slot></slot>
-		</TopRows>
-	</div>
-</template>
-
-<style>
-.top-islandRows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--top-gap-2);
-}
-
-.top-islandRows_title {
-	font-size: 20px;
-	font-weight: bold;
-}
-
-.top-islandRows_rows {
-	border-radius: var(--top-radius-3);
-	background: var(--color-bg-shading-2);
-	padding: var(--top-padding-3);
-}
-
-/* В islandRows у всех полей ввода внутри top-rows прозрачные рамки */
-.top-islandRows_rows .top-rows > .top-input,
-.top-islandRows_rows .top-rows > .top-textarea,
-.top-islandRows_rows .top-rows > .top-select { --top-forms-border-color: transparent }
-
-/* Размеры форм */
-.top-islandRows_rows .top-button,
-.top-islandRows_rows .top-input,
-.top-islandRows_rows .top-textarea,
-.top-islandRows_rows .top-select { width: auto; flex-grow: 1; display: flex; }
-
-.top-islandRows_rows .top-forms-optionWrapper { padding: 0; flex-grow: 1; }
-</style>

package/src/components/layout/islandRows/islandRowsRow/islandRowsRow.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-	<div class="top-islandRows_row">
-		<slot></slot>
-	</div>
-</template>
-
-<style>
-.top-islandRows_row {
-	outline-offset: 2px;
-	border-radius: 8px;
-	background: var(--color-layout-front-1);
-	padding: var(--top-padding-3);
-	display: flex;
-	gap: var(--top-gap-2);
-}
-
-/* Фокус форм */
-.top-islandRows_row:has(> .top-forms-optionWrapper .top-forms-focusable:focus-visible) {
-	outline: 2px solid var(--color-line-primary-1);
-	outline-offset: 2px;
-}
-
-/* Фокус форм, стили top-error оставить у форм, иначе они будут конфликтовать со стилями фокуса, так как у top-islandRows_row нет border */
-.top-islandRows_row > .top-forms-optionWrapper .top-forms-focusable:not(.top-error) {
-	outline: none;
-	animation: none;
-}
-
-/* Отмена прозрачных рамок у полей ввода внутри islandRows, если top-rows расположен в islandRowsRow */
-.top-islandRows_row .top-rows > .top-input,
-.top-islandRows_row .top-rows > .top-textarea,
-.top-islandRows_row .top-rows > .top-select { --top-forms-border-color: inherit }
-</style>

package/src/components/layout/islandRows/islandRowsRow/types.ts

@@ -1 +0,0 @@
-export interface Props {}

package/src/components/layout/islandRows/islandRowsSubTitle/islandRowsSubTitle.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-	<div class="top-islandRows_subTitle">
-		<slot></slot>
-	</div>
-</template>
-
-<style>
-.top-islandRows_subTitle {
-	width: 100%;
-	font-size: 16px;
-	font-weight: bold;
-}
-</style>

package/src/components/layout/islandRows/stories/README.md

@@ -1,8 +0,0 @@
-Компонент ялвяется помощником для вывода элементов строчками друг под другом с заголовком.
-
-Для вывода строчек использует **TopRows** со своей стилизацией.
-
-## Подкомпоненты
-
-- **TopIslandRowsRow**: Вставка в список подстроки, добавляет отступы и фон
-- **TopIslandRowsSubTitle**: Подзаголовок, для ручной всатвки заголовков строчек в нужное место

package/src/components/layout/islandRows/types.ts

@@ -1,11 +0,0 @@
-export interface Slots {
-	/**
-	 * Заголовок
-	 */
-	title(props: {}): any;
-
-	/**
-	 * Содержимое TopRows
-	 */
-	default(props: {}): any;
-}

package/src/components/layout/layout.ts

@@ -1,11 +0,0 @@
-import type { ComponentCustomProps } from 'vue';
-
-import IslandRows from './islandRows/islandRows.vue';
-import IslandRowsRow from './islandRows/islandRowsRow/islandRowsRow.vue';
-import IslandRowsSubTitle from './islandRows/islandRowsSubTitle/islandRowsSubTitle.vue';
-import Rows from './rows/rows.vue';
-
-export const TopIslandRows = IslandRows as typeof IslandRows & ComponentCustomProps;
-export const TopIslandRowsRow = IslandRowsRow as typeof IslandRowsRow & ComponentCustomProps;
-export const TopIslandRowsSubTitle = IslandRowsSubTitle as typeof IslandRowsSubTitle & ComponentCustomProps;
-export const TopRows = Rows as typeof Rows & ComponentCustomProps;

package/src/components/layout/rows/rows.stories.ts

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './rows.vue';
-import * as ComponentsConst from './types';
-import ReadMe from './stories/README.md?raw';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		gap: 'm',
-	},
-	render: (args) => ({
-		components: {
-			Rows: Component,
-		},
-		setup() {
-			return { args };
-		},
-		template: `
-			<Rows :gap="args.gap">
-				<div>Элемент 1</div>
-				<div>Элемент 2</div>
-				<div>Элемент 3</div>
-				<div>Элемент 4</div>
-				<div>Элемент 5</div>
-			</Rows>
-		`,
-	}),
-} satisfies Story;
-
-export default meta;

package/src/components/layout/rows/rows.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './types';
-
-const props = withDefaults(defineProps<Props>(), {
-	gap: 'none',
-});
-</script>
-
-<template>
-	<div
-		:class="{
-			['top-rows']: true,
-			['top-rows-gap_' + props.gap]: true,
-		}"
-	>
-		<slot></slot>
-	</div>
-</template>
-
-<style>
-.top-rows {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-.top-rows-gap_none {
-	gap: 0x;
-}
-
-.top-rows-gap_xs {
-	gap: var(--top-gap-1);
-}
-
-.top-rows-gap_s {
-	gap: var(--top-gap-2);
-}
-
-.top-rows-gap_m {
-	gap: var(--top-gap-3);
-}
-
-.top-rows-gap_l {
-	gap: var(--top-gap-4);
-}
-</style>

package/src/components/layout/rows/stories/README.md

@@ -1,10 +0,0 @@
-Компонент ялвяется помощником для вывода элементов в ряд друг под другом с настраеваемым gap.
-
-## Классы:
-
-- `.top-rows`: конетйнер для всатвки строк
-- `.top-rows-gap_none`
-- `.top-rows-gap_xs`
-- `.top-rows-gap_s`
-- `.top-rows-gap_m`
-- `.top-rows-gap_l`