@topvisor/ui 1.0.41-dialog.1 → 1.1.0-date.0

package/src/components/forms/select/select.vue

@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import type { ComputedRef } from 'vue';
+import { computed, watch } from 'vue';
+import type { Emits, LocalOptions, Option, Props } from './types';
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 's',
+	styling: '',
+});
+
+const model = defineModel<Props['modelValue']>({
+	required: true,
+});
+
+defineEmits<Emits>();
+
+/**
+ * Словарь с учетом вложенных Props['options']
+ *
+ * Этот словарь должен использовать в логике компонента, чтобы она не зависила от типа входных данных
+ */
+const optionByValue: ComputedRef<LocalOptions> = computed(() => {
+	/**
+	 * Преобразование:
+	 * - Array => Map
+	 * - string => Option
+	 */
+	const res = new Map();
+
+	props.options.forEach((option, index) => {
+		// базовый Options со строками
+		if (typeof option === 'string') option = genOption(index, option);
+
+		if (option.children) {
+			// вложенные элементы Option для <optgroup>
+			const children = new Map();
+
+			option.children.forEach((subOption, subIndex) => {
+				// базовый Options со строками
+				if (typeof subOption === 'string') subOption = genOption(subIndex, subOption);
+
+				children.set(subOption.value, subOption);
+			});
+
+			option = { ...option };
+			option.children = children;
+
+			res.set(option.value, option);
+		} else {
+			// самостоятельный элемент Option
+			res.set(option.value, option);
+		}
+	});
+
+	return res;
+});
+
+/**
+ * Словарь со всеми не disabled значениями Props['options'] в порядке следования с учетом вложенных Props['options']
+ */
+const flatOptionByValue = computed(() => {
+	const res = new Map<Props['modelValue'], Option>();
+
+	optionByValue.value.forEach(option => {
+		if (option.disabled) {
+			return;
+		}
+
+		// вложенные элементы Option для <optgroup>
+		if (option.children) {
+			option.children.forEach(subOption => {
+				if (subOption.disabled) {
+					return;
+				}
+
+				res.set(subOption.value, subOption);
+			});
+
+			return;
+		}
+
+		res.set(option.value, option);
+	});
+
+	return res;
+});
+
+/**
+ * Генерация Объекта option из строки
+ *
+ * Для базового способа указания props
+ */
+const genOption = (value: Props['modelValue'], title: string): Option => {
+	return {
+		value,
+		title,
+	};
+};
+
+/**
+ * Логика для обртаной своместимости:
+ * - null - заменить на первое доступное значение
+ * - undefined - заменить на первое доступное значение
+ */
+watch([
+	() => props.modelValue,
+	flatOptionByValue,
+], () => {
+	if ((model.value === null || model.value === undefined) && flatOptionByValue.value.size) {
+		console.warn('Пожалуйста, не передавайте в компонент Select значения null и undefined');
+
+		model.value = flatOptionByValue.value.keys().next().value!;
+	}
+}, { immediate: true });
+
+/**
+ * Иконка выбранного option
+ */
+const optionIcon = computed(() => {
+	return flatOptionByValue.value.get(model.value)?.icon;
+});
+
+/**
+ * Выбрать следующее доступное значение
+ */
+const selectNextValue = () => {
+	const listEnabledValues = [...flatOptionByValue.value.keys()];
+	const currentIndex = listEnabledValues.indexOf(model.value);
+	const nextIndex = (currentIndex + 1) % listEnabledValues.length;
+
+	model.value = listEnabledValues[nextIndex];
+};
+</script>
+
+<template>
+	<label
+		:class="{
+			['top-select']:true,
+			['top-select-' + name]:name,
+			['top-size_' + size]: true,
+			['top-formsCaptionWrapper']: !!title,
+			['top-select-error']: isError,
+			['top-disabled']: disabled,
+		}"
+		:data-value="model"
+		:data-top-icon="icon"
+		:data-top-icon2="optionIcon"
+	>
+		<select
+			v-top-focus.onupdate="isError"
+			:class="{
+				['top-forms-focusable']: !disabled,
+				['top-select_select']: true,
+				['top-select_arrow']: true,
+				['top-error']: isError,
+				[`top-style_${styling}`]: !!styling,
+			}"
+			:name="name"
+			:disabled="disabled"
+			v-model="model"
+		>
+			<template v-for="[value, option] of optionByValue">
+				<optgroup
+					v-if="option.children"
+					:key="'group_' + value"
+					:label="option.title"
+					:disabled="option.disabled"
+				>
+					<option
+						v-for="[subValue, subOption] of option.children"
+						:key="subValue"
+						:value="subValue"
+						:selected="subValue === model"
+						:disabled="subOption.disabled"
+					>
+						{{ subOption.title }}
+					</option>
+				</optgroup>
+
+				<option
+					v-else
+					:key="value ?? undefined"
+					:value="value"
+					:selected="value === model"
+					:disabled="option.disabled"
+				>
+					{{ option.title }}
+				</option>
+			</template>
+		</select>
+
+		<span
+			v-if="addChanger && flatOptionByValue.size && !disabled"
+			class="top-changer"
+			@click="selectNextValue"
+		></span>
+
+		<span
+			v-if="title"
+			class="top-formsCaption"
+		>
+			{{ title }}
+		</span>
+	</label>
+</template>
+
+<style>
+.top-select {
+	color: var(--color-text-1);
+	--top-icon-color: var(--color-text-2);
+	--top-icon2-color: var(--color-text-2);
+
+	align-items: center;
+	width: 180px;
+	max-width: 100%;
+	display: inline-flex;
+}
+
+.top-select-error {
+	--top-icon-color: var(--color-text-negative);
+	--top-icon2-color: var(--color-text-negative);
+}
+
+.top-select_select {
+	background-color: var(--top-forms-background-color);
+	/* для select вместо padding нужно использовать text-indent */
+	padding-left: var(--top-forms-padding);
+
+	/* если есть значки, добавить отступ на их ширину с учетом уже добавленного padding */
+	text-indent: calc(clamp(0px, calc(var(--top-icon-both-width) - var(--top-forms-padding)), calc(var(--top-icon-both-width) - var(--top-forms-padding))));
+
+	width: 100%;
+	height: var(--top-forms-base-height);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+.top-select optgroup {
+	color: var(--color-text-1);
+	font-style: normal;
+}
+
+.top-select option:not(:disabled) {
+	background: var(--color-layout-front-1);
+	color: var(--color-text-1);
+}
+
+.top-select option:disabled {
+	background: unset;
+	color: unset;
+}
+
+/* хром не мерняет цвет для optgroup option, стили оставлены по умолчанию */
+/*
+.top-select optgroup:disabled,
+.top-select optgroup option,
+.top-select option:disabled {
+
+}
+*/
+
+/* https://bugzilla.mozilla.org/show_bug.cgi?id=1743066 */
+@-moz-document url-prefix() {
+	.top-select_select {
+		text-indent: calc(clamp(0px, calc(var(--top-icon-both-width) - var(--top-forms-padding)), calc(var(--top-icon-both-width) - var(--top-forms-padding))) / 2);
+	}
+}
+
+@media only screen and (min-width: 900px) {
+	/* changer */
+	.top-changer {
+		cursor: pointer;
+		border-radius: 100%;
+		width: 0;
+		transform: translateX(-44px);
+		color: var(--color-text-2);
+		font-size: 16px;
+		line-height: 1;
+		display: none;
+		z-index: 2;
+		order: 4;
+	}
+
+	.top-changer:hover {
+		color: var(--color-text-primary);
+	}
+
+	.top-changer:after {
+		content: "";
+		background-color: var(--top-forms-background-color);
+		font-family: "Topvisor-2";
+	}
+
+	*:hover > .top-changer {
+		display: block;
+	}
+}
+</style>

package/src/components/forms/select/stories/exampleOptions.ts

@@ -0,0 +1,61 @@
+import type { Option, Props } from '../types';
+
+const optionsMap: Map<Props['modelValue'], Option> = new Map();
+
+optionsMap.set('folders', {
+	value: 'folders',
+	title: 'Папки',
+	icon: '',
+});
+
+optionsMap.set('even', {
+	value: 'even',
+	title: 'Четные',
+});
+
+optionsMap.set('odd', {
+	value: 'odd',
+	title: 'Нечетные (заблокировано)',
+	disabled: true,
+});
+
+const groupOptions: Map<string, string> = new Map();
+
+groupOptions.set('1', 'Один');
+groupOptions.set('2', 'Два');
+groupOptions.set('3', 'Три');
+
+const groupOptions2: Map<string, string> = new Map();
+
+groupOptions2.set('4', 'Четыре');
+groupOptions2.set('5', 'Пять');
+groupOptions2.set('6', 'Шесть');
+
+const groupOptions3: Map<string, string> = new Map();
+
+groupOptions3.set('7', 'Семь');
+groupOptions3.set('8', 'Восемь');
+groupOptions3.set('9', 'Девять');
+
+optionsMap.set('group_1', {
+	value: 'group_1',
+	title: 'Группа чисел 1',
+	children: groupOptions,
+});
+
+optionsMap.set('group_2', {
+	value: 'group_2',
+	title: 'Группа чисел 2 (заблокировано)',
+	disabled: true,
+	children: groupOptions2,
+});
+
+optionsMap.set('group_3', {
+	value: 'group_3',
+	title: 'Группа чисел 3',
+	children: groupOptions3,
+});
+
+const optionsArray = Array.from(optionsMap.values());
+
+export { groupOptions, optionsMap, optionsArray };

package/src/components/forms/select/stories/overview.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../types';
+import Select from '../select.vue';
+import TopRadio from '@/components/forms/radio/radio.vue';
+import { groupOptions, optionsArray, optionsMap } from './exampleOptions';
+
+defineProps<Props>();
+
+const model = defineModel<Props['modelValue']>({
+	required: true,
+});
+
+const options = ref(optionsMap);
+</script>
+
+<template>
+	<div>
+		<h2>Простой список</h2>
+
+		<Select
+			:="$props"
+			v-model="model"
+			:options="groupOptions"
+		/>
+
+		<h2>Список с дополнительными настройками</h2>
+
+		Тип props:
+
+		<TopRadio v-model="options" :value="optionsMap">optionsMap</TopRadio>
+
+		&nbsp;
+
+		<TopRadio v-model="options" :value="optionsArray">optionsArray</TopRadio>
+
+		<br>
+
+		<details>
+			<summary>
+				см. код
+			</summary>
+			<pre>{{ options }}</pre>
+		</details>
+
+		<br><br>
+
+		<Select
+			:="$props"
+			v-model="model"
+			:options
+		/>
+
+		<h2>Disabled</h2>
+
+		<Select
+			:="$props"
+			v-model="model"
+			:options
+			:disabled="true"
+		/>
+
+		<h2>Со значком</h2>
+
+		<Select
+			:="$props"
+			v-model="model"
+			:options
+			icon=""
+		/>
+	</div>
+</template>

package/src/components/forms/select/types.ts

@@ -0,0 +1,68 @@
+import type { Size } from '@/components/forms/helpers';
+
+export interface Props {
+	modelValue: string | number | boolean;
+
+	/**
+	 * Словарь для генерации элементов <option>
+	 *
+	 * Поддерживает 3 типа аргумента:
+	 * - Словарь со значениями: базовый способ создать простой список
+	 * - Словарь с объектами Option: расширенный способ, позволяющий указать для <option disabled> и вынести <option> в <optgroup>
+	 * - Массив с объектами Option: альтернативный словарю расширенный способ, в новых версиях js использовать не рекомендуется, работает медленнее
+	 *
+	 * Можно задать <optgroup>, передав в options[n].children вложенный список options
+	 */
+	options: Options | Option[];
+	name?: string;
+	disabled?: boolean;
+	icon?: string;
+	size?: Size;
+	styling?: Style;
+	addChanger?: boolean;
+	title?: string;
+	isError?: boolean;
+}
+
+export const styling = {
+	regular: '',
+	soft: 'soft',
+	transparent: 'transparent',
+} as const;
+
+export type Style = typeof styling[keyof typeof styling];
+
+export interface Emits {
+	(e: 'update:modelValue', value: Props['modelValue']): void;
+}
+
+export type Options = Map<Props['modelValue'], string | Option>;
+
+/**
+ * Конфигурации для более сложной настройки <option>
+ */
+export interface Option {
+	value: Props['modelValue'];
+	title: string;
+	icon?: string;
+	disabled?: boolean;
+	children?: Props['options'];
+}
+
+/**
+ * Тип для внутренней реализации компонента
+ */
+export type LocalOptions = Map<Props['modelValue'], LocalOption>;
+
+/**
+ * Тип для внутренней реализации компонента
+ */
+export interface LocalOption {
+	value: Props['modelValue'];
+	title: string;
+	icon?: string;
+	disabled?: boolean;
+	children?: LocalOptions;
+}
+
+export type { Size } ;

package/src/components/forms/switcher/stories/overview.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../types';
+import Switcher from '../switcher.vue';
+
+defineProps<Props>();
+
+const switcher1 = ref(false);
+const switcher2 = ref([]);
+const switcher3 = ref(new Set<string>());
+</script>
+
+<template>
+	<div>
+		<h2>Переключатель:</h2>
+
+		<Switcher
+			:="$props"
+			:disabled="false"
+		>
+			Переключатель
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			:modelValue="true"
+			:disabled="false"
+		>
+			Переключатель
+		</Switcher>
+
+		<h2>Переключатель disabled:</h2>
+
+		<Switcher
+			:="$props"
+			:disabled="true"
+		>
+			Переключатель
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			:modelValue="true"
+			:disabled="true"
+		>
+			Переключатель
+		</Switcher>
+
+		<h2>Переключатель c описанием:</h2>
+
+		<Switcher
+			:="$props"
+			description="Этот переключатель выключен"
+		>
+			Переключатель
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			:modelValue="true"
+			description="Этот переключатель включен"
+		>
+			Переключатель
+		</Switcher>
+
+		<h2>Поддерижваемые типы v-model</h2>
+
+		<h3>boolean</h3>
+
+		<p>
+			<b>Ваш выбор:</b> {{ switcher1 }}
+		</p>
+
+		<Switcher
+			:="$props"
+			v-model="switcher1"
+		/>
+
+		<h3>string[]</h3>
+
+		<p>
+			<b>Ваш выбор:</b> {{ switcher2 }}
+		</p>
+
+		<Switcher
+			:="$props"
+			value="Яблоко"
+			v-model="switcher2"
+		>
+			Яблоко
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			value="Груша"
+			v-model="switcher2"
+		>
+			Груша
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			value="Банан"
+			v-model="switcher2"
+		>
+			Банан
+		</Switcher>
+
+		<h3>Set[]</h3>
+
+		<p>
+			<b>Ваш выбор:</b> {{ switcher3 }}
+		</p>
+
+		<Switcher
+			:="$props"
+			value="Яблоко"
+			v-model="switcher3"
+		>
+			Яблоко
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			value="Груша"
+			v-model="switcher3"
+		>
+			Груша
+		</Switcher>
+
+		<Switcher
+			:="$props"
+			value="Банан"
+			v-model="switcher3"
+		>
+			Банан
+		</Switcher>
+	</div>
+</template>

package/src/components/forms/switcher/switcher.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './switcher.vue';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: false,
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		default: 'Переключатель',
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;