@topvisor/ui 1.1.0 → 1.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/layout/layout.ts

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

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

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

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