@topvisor/ui 0.0.35 → 0.0.36

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

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

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

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

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

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

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

@@ -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, 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;