@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../radio';
+import Radio from '../radio.vue';
+
+defineProps<Props>();
+
+const modelValue1 = ref('Мужчина');
+const modelValue2 = ref('Мужчина');
+const modelValue3 = ref('Мужчина');
+</script>
+
+<template>
+	<div>
+		<h2>Радио кнопка:</h2>
+
+		<p><b>Ваш выбор:</b> {{ modelValue1 }}</p>
+
+		<Radio
+			:="$props"
+			v-model="modelValue1"
+			value="Мужчина"
+		>
+			Мужчина
+		</Radio>
+
+		<Radio
+			:="$props"
+			v-model="modelValue1"
+			value="Женщина"
+		>
+			Женщина
+		</Radio>
+
+		<h2>Радио кнопка disabled:</h2>
+
+		<p><b>Ваш выбор:</b> {{ modelValue2 }}</p>
+
+		<Radio
+			:="$props"
+			v-model="modelValue2"
+			value="Мужчина"
+			:disabled="true"
+		>
+			Мужчина
+		</Radio>
+
+		<Radio
+			:="$props"
+			v-model="modelValue2"
+			value="Женщина"
+			:disabled="true"
+		>
+			Женщина
+		</Radio>
+
+		<h2>Радио кнопка с описанием:</h2>
+
+		<p><b>Ваш выбор:</b> {{ modelValue3 }}</p>
+
+		<Radio
+			:="$props"
+			v-model="modelValue3"
+			value="Мужчина"
+			description="👨 Мужик!"
+		>
+			Мужчина
+		</Radio>
+
+		<Radio
+			:="$props"
+			v-model="modelValue3"
+			value="Женщина"
+			description="👩 Красавица! "
+		>
+			Женщина
+		</Radio>
+	</div>
+</template>

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './select.vue';
+import * as ComponentsConst from './select';
+import { optionsMap } from './stories/exampleOptions';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: optionsMap.keys().next().value,
+		options: optionsMap,
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		size: 's',
+		title: '',
+		addChanger: false,
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,36 @@
+import type { Size } from '@/components/forms/helpers';
+import { sizes } from '@/components/forms/helpers';
+
+export interface Props {
+	modelValue: string;
+
+	/**
+	 * Словарь или массив с объктами Option, по которому будут генерироваться элементы option
+	 *
+	 * Ключи словаря могут быть произвольными строковыми значениями
+	 *
+	 * Можно задать optiongroup, передав в option.children вложенный список options
+	 */
+	options: Map<string, Option> | Option[];
+	name?: string;
+	disabled?: boolean;
+	icon?: string;
+	size?: Size;
+	addChanger?: boolean;
+	title?: string;
+	isError?: boolean;
+}
+
+export interface Emits {
+	(e: 'update:modelValue', value: Props['modelValue']): void;
+}
+
+export interface Option {
+	value: Props['modelValue'];
+	title: string;
+	icon?: string;
+	disabled?: boolean;
+	children?: Props['options'];
+}
+
+export { sizes };

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

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { toRef, computed, watch } from 'vue';
+import type { Props, Emits } from './select';
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 's',
+});
+
+const emit = defineEmits<Emits>();
+
+const localValue = computed({
+	get() {
+		return props.modelValue;
+	},
+
+	set(value) {
+		emit('update:modelValue', value);
+	},
+});
+
+/**
+ * Иконка выбранного option
+ */
+const optionIcon = computed(() => {
+	return optionByValue.value.get(localValue.value)?.icon;
+});
+
+/**
+ * Словарь с доступными options
+ */
+const optionByValue = computed(() => {
+	const res = new Map();
+
+	props.options.forEach((option) => {
+		if (option.disabled) {
+			return;
+		}
+
+		if (option.children) {
+			option.children.forEach(subOption => {
+				if (subOption.disabled) {
+					return;
+				}
+
+				res.set(subOption.value, subOption);
+			});
+
+			return;
+		}
+
+		res.set(option.value, option);
+	});
+
+	return res;
+});
+
+/**
+ * Логика для обртаной своместимости:
+ * - null - заменить на первое доступное значение
+ * - undefined - заменить на первое доступное значение
+ */
+watch([
+	toRef(props.modelValue),
+	optionByValue,
+], () => {
+	if ((localValue.value === null || localValue.value === undefined) && optionByValue.value.size) {
+		console.warn('Пожалуйста, не передавайте в компонент Select значения null и undefined');
+
+		localValue.value = optionByValue.value.keys().next().value;
+	}
+}, { immediate: true });
+
+/**
+ * Выбрать следующее доступное значение
+ */
+const selectNextValue = () => {
+	const listEnabledValues = [...optionByValue.value.keys()];
+	const currentIndex = listEnabledValues.indexOf(localValue.value);
+	const nextIndex = (currentIndex + 1) % listEnabledValues.length;
+
+	localValue.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="localValue"
+		:data-top-icon="icon"
+		:data-top-icon2="optionIcon"
+	>
+		<select
+			:class="{
+				['top-forms-focusable']: !disabled,
+				['top-select_select']: true,
+				['top-select_arrow']: true,
+				['top-error']: isError,
+			}"
+			:name="name"
+			:disabled="disabled"
+			v-model="localValue"
+		>
+			<template v-for="[_index, option] of options.entries()">
+				<optgroup
+					v-if="option.children"
+					:key="'group_' + option.value"
+					:label="option.title"
+					:disabled="option.disabled"
+				>
+					<option
+						v-for="[_index, subOption] of option.children.entries()"
+						:key="option.value"
+						:value="subOption.value"
+						:selected="subOption.value === localValue"
+						:disabled="subOption.disabled"
+					>
+						{{ subOption.title }}
+					</option>
+				</optgroup>
+
+				<option
+					v-else
+					:key="option.value"
+					:value="option.value"
+					:selected="option.value === localValue"
+					:disabled="option.disabled"
+				>
+					{{ option.title }}
+				</option>
+			</template>
+		</select>
+
+		<span
+			v-if="addChanger && optionByValue.size && !disabled"
+			class="top-changer"
+			@click="selectNextValue"
+		></span>
+
+		<span
+			v-if="title"
+			class="top-formsCaption"
+		>
+			{{ title }}
+		</span>
+	</label>
+</template>
+
+<style module>
+.top-select {
+	--top-icon-color: var(--color-text-3);
+	--top-icon2-color: var(--color-text-2);
+
+	align-items: center;
+	width: 180px;
+	max-width: 100%;
+	vertical-align: middle;
+	display: inline-flex;
+}
+
+.top-select-error {
+	--top-icon-color: var(--color-negative);
+	--top-icon2-color: var(--color-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_select:focus {
+	outline-color: var(--color-theme-75);
+	outline-offset: 0;
+}
+
+.top-select_select:disabled {
+	background: var(--color-theme-50);
+}
+
+.top-select optgroup {
+	color: var(--color-text-1);
+	font-style: normal;
+}
+
+.top-select option {
+	background: var(--content-background-color);
+	color: var(--color-text-1);
+}
+
+/* хром не мерняет цвет для 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-secondary-2);
+		font-size: 16px;
+		line-height: 1;
+		display: none;
+		z-index: 2;
+		order: 4;
+	}
+
+	.top-changer:hover {
+		color: var(--color-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,71 @@
+import type { Option } from '../select';
+
+const optionsMap: Map<string, 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, Option> = new Map();
+
+groupOptions.set('1', {
+	value: '1',
+	title: 'Один',
+});
+
+groupOptions.set('2', {
+	value: '2',
+	title: 'Два',
+});
+
+groupOptions.set('3', {
+	value: '3',
+	title: 'Три',
+});
+
+const groupOptions2: Map<string, Option> = new Map();
+
+groupOptions2.set('3', {
+	value: '3',
+	title: 'Три',
+});
+
+groupOptions2.set('4', {
+	value: '4',
+	title: 'Четыре',
+});
+
+groupOptions2.set('5', {
+	value: '5',
+	title: 'Пять',
+});
+
+optionsMap.set('group_1', {
+	value: 'group_1',
+	title: 'Группа чисел 1',
+	children: groupOptions,
+});
+
+optionsMap.set('group_2', {
+	value: 'group_2',
+	title: 'Группа чисел 2',
+	disabled: true,
+	children: groupOptions2,
+});
+
+const optionsArray = Array.from(optionsMap.values());
+
+export { optionsMap, optionsArray };

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../select';
+import Select from '../select.vue';
+import { Radio } from '@/components/forms/forms';
+import { optionsMap, optionsArray } from './exampleOptions';
+
+defineProps<Props>();
+
+const options = ref(optionsMap);
+
+const select1 = ref('');
+const select2 = ref('folders');
+const select3 = ref('folders');
+const select4 = ref('folders');
+</script>
+
+<template>
+	<div>
+		<Radio v-model="options" :value="optionsMap">optionsMap</Radio>
+
+		<br>
+
+		<Radio v-model="options" :value="optionsArray">optionsArray</Radio>
+
+		<h2>Без значения</h2>
+
+		<Select
+			:="$props"
+			:options="options"
+			v-model="select1"
+		/>
+
+		<h2>Со значением</h2>
+
+		<Select
+			:="$props"
+			:options="options"
+			v-model="select2"
+		/>
+
+		<h2>Disabled</h2>
+
+		<Select
+			:="$props"
+			:options="options"
+			v-model="select3"
+			:disabled="true"
+		/>
+
+		<h2>Со значком</h2>
+
+		<Select
+			:="$props"
+			:options="options"
+			v-model="select4"
+			icon=""
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../switcher';
+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,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './switcher.vue';
+import * as ComponentsConst from './switcher';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, true);
+
+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;