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

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

@@ -1,298 +0,0 @@
-<script setup lang="ts">
-import type { ComputedRef } from 'vue';
-import { computed, watch } from 'vue';
-import type { Emits, LocalOptions, Option, Props } from './select';
-
-const props = withDefaults(defineProps<Props>(), {
-	size: 's',
-});
-
-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,
-			}"
-			: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

@@ -1,61 +0,0 @@
-import type { Option, Props } from '../select';
-
-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

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { Props } from '../select';
-import Select from '../select.vue';
-import TopRadio from '@/components/forms/radio/radio.vue';
-import { groupOptions, optionsArray, optionsMap } from './exampleOptions';
-
-defineProps<Props>();
-
-const model = defineModel<string>({
-	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/switcher/stories/overview.vue

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

@@ -1,33 +0,0 @@
-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, ['default']);
-
-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;

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

@@ -1,22 +0,0 @@
-type ModelValue = boolean | string[] | Set<string>;
-
-export interface Props {
-	/**
-	 * Может быть одного из трех типов:
-	 * - boolean
-	 * - string[]
-	 * - Set
-	 *
-	 * [подробнее](https://vuejs.org/guide/essentials/forms.html#checkbox)
-	 */
-	modelValue: ModelValue;
-	name?: string;
-	value?: string;
-	description?: string;
-	disabled?: boolean;
-	isError?: boolean;
-}
-
-export interface Emits {
-	(e: 'update:modelValue', value: ModelValue): void;
-}