@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { Props } from '../checkbox';
-import Checkbox from '../checkbox.vue';
-
-defineProps<Props>();
-
-const checkbox1 = ref(false);
-const checkbox2 = ref([]);
-const checkbox3 = ref(new Set<string>());
-</script>
-
-<template>
-	<div>
-		<h2>Чекбокс:</h2>
-
-		<Checkbox
-			:="$props"
-			:indeterminate="false"
-			:disabled="false"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			:modelValue="true"
-			:indeterminate="false"
-			:disabled="false"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			:indeterminate="true"
-			:disabled="false"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<h2>Чекбокс disabled:</h2>
-
-		<Checkbox
-			:="$props"
-			:indeterminate="false"
-			:disabled="true"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			:modelValue="true"
-			:indeterminate="false"
-			:disabled="true"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			:indeterminate="true"
-			:disabled="true"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<h2>Чекбокс с описанием:</h2>
-
-		<Checkbox
-			:="$props"
-			:indeterminate="false"
-			description="Перед вам потрясающий чекбокс"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			:modelValue="true"
-			:indeterminate="false"
-			description="А этот чекбокс уже отмечен"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			:indeterminate="true"
-			description="indeterminate - неопределенное состояние"
-		>
-			Чекбокс
-		</Checkbox>
-
-		<h2>Поддерижваемые типы v-model</h2>
-
-		<h3>boolean</h3>
-
-		<p>
-			<b>Ваш выбор:</b> {{ checkbox1 }}
-		</p>
-
-		<Checkbox
-			:="$props"
-			v-model="checkbox1"
-		/>
-
-		<h3>string[]</h3>
-
-		<p>
-			<b>Ваш выбор:</b> {{ checkbox2 }}
-		</p>
-
-		<Checkbox
-			:="$props"
-			value="Яблоко"
-			v-model="checkbox2"
-		>
-			Яблоко
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			value="Груша"
-			v-model="checkbox2"
-		>
-			Груша
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			value="Банан"
-			v-model="checkbox2"
-			indeterminate
-		>
-			Банан
-		</Checkbox>
-
-		<h3>Set[]</h3>
-
-		<p>
-			<b>Ваш выбор:</b> {{ checkbox3 }}
-		</p>
-
-		<Checkbox
-			:="$props"
-			value="Яблоко"
-			v-model="checkbox3"
-		>
-			Яблоко
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			value="Груша"
-			v-model="checkbox3"
-		>
-			Груша
-		</Checkbox>
-
-		<Checkbox
-			:="$props"
-			value="Банан"
-			v-model="checkbox3"
-			indeterminate
-		>
-			Банан
-		</Checkbox>
-	</div>
-</template>

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

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './controlLabel.vue';
-import * as ComponentsConst from './controlLabel';
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-/**
- * Компонент для вставки заголовка с описанием к элементу управления формы.
- *
- * Элементы управления:
- * - checkbox
- * - radio
- * - switcher
- */
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {
-	args: {
-		default: 'Заголовок',
-		description: 'Комментарий',
-	},
-} satisfies Story;
-
-export default meta;

package/src/components/forms/controlLabel/controlLabel.ts

@@ -1,4 +0,0 @@
-export interface Props {
-	description?: string;
-	disabled?: boolean;
-}

package/src/components/forms/controlLabel/controlLabel.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './controlLabel';
-
-defineProps<Props>();
-</script>
-
-<template>
-	<div class="top-forms-optionLabel">
-		<div
-			:class="{
-			  'top-forms-optionLabel_title': true,
-			  'top-forms-optionLabel_title-disabled': disabled,
-			}"
-		>
-			<!-- @slot Слот с заголовком -->
-			<slot></slot>
-		</div>
-
-		<div
-			v-if="description"
-			class="top-forms-optionLabel_description"
-			:class="{'top-forms-optionLabel_description-disabled': disabled}"
-		>
-			{{ description }}
-		</div>
-	</div>
-</template>
-
-<style>
-.top-forms-optionLabel {
-	flex-grow: 1;
-}
-
-.top-forms-optionLabel_title {
-	color: var(--color-text-1);
-	min-height: var(--top-forms-option-height);
-	display: flex;
-	align-items: center;
-}
-
-.top-forms-optionLabel_title-disabled {
-	color: var(--color-text-3);
-}
-
-.top-forms-optionLabel_description {
-	color: var(--color-text-2);
-	font-size: 0.85em;
-	line-height: var(--top-forms-option-height);
-}
-
-.top-forms-optionLabel_description-disabled {
-	color: var(--color-text-3);
-}
-</style>

package/src/components/forms/forms.ts

@@ -1,40 +0,0 @@
-/**
- * Замечание для разработчиков
- *
- * При изменении библиотеки Forms не забудьте обновить ее подключение в плагине
- *
- * @see import('@/core/core/plugin')
- */
-
-import type { ComponentCustomProps } from 'vue';
-
-import Avatar from './avatar/avatar.vue';
-import Button from './button/button.vue';
-import Checkbox from './checkbox/checkbox.vue';
-import ControlLabel from './controlLabel/controlLabel.vue';
-import Hint from './hint/hint.vue';
-import Input from './input/input.vue';
-import InputDate from './inputDate/inputDate.vue';
-import InputRange from './inputRange/inputRange.vue';
-import Radio from './radio/radio.vue';
-import Switcher from './switcher/switcher.vue';
-import Textarea from './textarea/textarea.vue';
-import Select from './select/select.vue';
-import Loadbar from './loadbar/loadbar.vue';
-
-// Для не SFC, чтобы работало автозаполнение в template в ComponentOptions
-// Имена намеренно делаются разными, чтобы типы не конфликтовали: `Button` и `TopButton`
-
-export const TopAvatar = Avatar as typeof Avatar & ComponentCustomProps;
-export const TopButton = Button as typeof Button & ComponentCustomProps;
-export const TopCheckbox = Checkbox as typeof Checkbox & ComponentCustomProps;
-export const TopControlLabel = ControlLabel as typeof ControlLabel & ComponentCustomProps;
-export const TopHint = Hint as typeof Hint & ComponentCustomProps;
-export const TopInput = Input as typeof Input & ComponentCustomProps;
-export const TopInputDate = InputDate as typeof InputDate & ComponentCustomProps;
-export const TopInputRange = InputRange as typeof InputRange & ComponentCustomProps;
-export const TopRadio = Radio as typeof Radio & ComponentCustomProps;
-export const TopSwitcher = Switcher as typeof Switcher & ComponentCustomProps;
-export const TopTextarea = Textarea as typeof Textarea & ComponentCustomProps;
-export const TopSelect = Select as typeof Select & ComponentCustomProps;
-export const TopLoadbar = Loadbar as typeof Loadbar & ComponentCustomProps;

package/src/components/forms/helpers.ts

@@ -1,11 +0,0 @@
-/**
- * Размеры
- */
-export const sizes = {
-	xs: 'xs',
-	s: 's',
-	m: 'm',
-	l: 'l',
-} as const;
-
-export type Size = typeof sizes[keyof typeof sizes];

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

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-import Component from './hint.vue';
-import * as ComponentsConst from './hint';
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-/**
- * Компонент для вывода иконки с подсказкой
- *
- * Для настройки tooltip см. директиву v-top-tooltip
- */
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	args: {
-		hint: 'Текст подсказки',
-	},
-	argTypes,
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {} satisfies Story;
-
-export const Tooltip = {
-	render: (args) => ({
-		components: {
-			Hint: Component,
-		},
-		setup() {
-			return { args };
-		},
-		template: `
-			<Hint :hint="args.hint" v-top-tooltip></Hint>
-		`,
-	}),
-} satisfies Story;
-
-export default meta;

package/src/components/forms/hint/hint.ts

@@ -1,8 +0,0 @@
-export interface Props {
-	/**
-	 * Текст подсказки, значение атрибута title
-	 *
-	 * Для подключения tooltip используйте директиву **v-top-tooltip**
-	 */
-	hint: string;
-}

package/src/components/forms/hint/hint.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './hint';
-
-defineProps<Props>();
-</script>
-
-<template>
-	<span
-		class="top-hint"
-		data-top-icon=""
-		:title="hint"
-	></span>
-</template>
-
-<style>
-.top-hint {
-	--top-icon-size: 16px;
-	--top-icon-width: var(--top-icon-size);
-
-	border-radius: 50%;
-	background: var(--color-layout-front-1);
-	padding: 1px;
-	color: var(--color-text-3);
-	line-height: 1;
-	z-index: 1;
-	pointer-events: all;
-}
-
-.top-hint:hover {
-	color: var(--color-text-2);
-}
-</style>

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

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './input.vue';
-import * as ComponentsConst from './input';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	args: {
-		modelValue: '',
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: {
-		title: 'Заголовок поля',
-		captionType: '',
-		isError: false,
-		styling: '',
-	},
-}, OverviewComponent);
-
-export default meta;

package/src/components/forms/input/input.ts

@@ -1,47 +0,0 @@
-import type { Size } from '@/components/forms/helpers';
-import { sizes } from '@/components/forms/helpers';
-
-export interface Props {
-	modelValue: string;
-
-	name?: string;
-	disabled?: boolean;
-	readonly?: boolean;
-	modificator?: string;
-	size?: Size;
-	styling?: Style;
-
-	isError?: boolean;
-	isLoading?: boolean;
-
-	icon?: string;
-	icon2?: string;
-
-	addCleaner?: boolean;
-
-	title?: string;
-	captionType?: CaptionType;
-}
-
-export interface Emits {
-	(e: 'update:modelValue', value: string): void;
-}
-
-export const captionTypes = {
-	none: '',
-	slide: 'slide',
-	top: 'top',
-} as const;
-
-export type CaptionType = typeof captionTypes[keyof typeof captionTypes];
-
-export const styling = {
-	regular: '',
-	light: 'light',
-	soft: 'soft',
-	transparent: 'transparent',
-} as const;
-
-export type Style = typeof styling[keyof typeof styling];
-
-export { sizes };

package/src/components/forms/input/input.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Emits, Props } from './input';
-import TopLoadbar from '@/components/forms/loadbar/loadbar.vue';
-
-defineOptions({
-	inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<Props>(), {
-	size: 's',
-	captionType: '',
-	styling: '',
-});
-
-const emit = defineEmits<Emits>();
-
-const localValue = computed({
-	get() {
-		return props.modelValue;
-	},
-	set(value) {
-		emit('update:modelValue', value);
-	},
-});
-
-const placeholder = computed(() => {
-	if (props.addCleaner && !props.title) {
-		return '';
-	}
-	if (props.captionType !== '') {
-		return '';
-	}
-
-	return props.title;
-});
-
-const clean = (event: Event) => {
-	if (props.modelValue) {
-		event.stopPropagation();
-	}
-
-	emit('update:modelValue', '');
-};
-</script>
-
-<template>
-	<label
-		:class="{
-			['top-input']: true,
-			['top-size_' + size]: true,
-			['top-disabled']: disabled,
-			['top-input-' + modificator]: !!modificator,
-			['top-input-withCleaner']: addCleaner && localValue && localValue !== '0000-00-00',
-			['top-formsCaptionWrapper']: captionType !== '',
-			['top-formsCaptionWrapper-always']: captionType === 'top',
-		}"
-		:data-top-icon="icon"
-		:data-top-icon2="icon2"
-	>
-		<TopLoadbar v-if="isLoading"/>
-
-		<input
-			v-top-focus.onupdate="isError"
-			type="text"
-			:class="{
-				['top-input_input']: true,
-				['top-input_input-' + modificator]: !!modificator,
-				['top-forms-focusable']: !disabled,
-				['top-error']: isError,
-				[`top-style_${styling}`]: !!styling,
-			}"
-			autocomplete="off_always"
-			:name="name"
-			v-model="localValue"
-			:title="title"
-			:placeholder="placeholder"
-			:disabled="disabled"
-			:readonly="readonly"
-			@keydown.esc="(event) => (addCleaner || !!$slots.btn) && clean(event)"
-			:="$attrs"
-		>
-
-		<span
-			v-if="addCleaner && localValue && localValue !== '0000-00-00'"
-			class="top-input_cleaner"
-			data-top-icon=""
-			@click.prevent="clean"
-		></span>
-
-		<span
-			v-if="captionType !== ''"
-			class="top-formsCaption"
-		>
-			{{ title }}
-		</span>
-
-		<!-- @slot Слот для вставки произвольного кода в label -->
-		<slot></slot>
-	</label>
-</template>
-
-<style>
-.top-input {
-	--top-forms_clear-width: 0px;
-
-	border-radius: var(--top-forms-radius);
-	width: 180px;
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--top-gap-1);
-}
-
-.top-input_input {
-	color: var(--color-text-2);
-	background: var(--top-forms-background-color);
-	height: var(--top-forms-base-height);
-	padding: 0;
-	padding-right: calc(max(var(--top-forms-padding), calc(var(--top-icon2-width) + var(--top-forms_clear-width))));
-	padding-left: calc(max(var(--top-forms-padding), var(--top-icon-width)));
-}
-
-.top-input_input:hover {
-	background: var(--top-forms-background-color-hover);
-}
-
-.top-input_input:focus {
-	color: var(--color-text-1);
-	border-color: var(--top-forms-border-color-hover);
-	outline: none;
-}
-
-/* значки */
-.top-input[data-top-icon]:before,
-.top-input[data-top-icon2]:after {
-	--top-icon-color: var(--color-text-4);
-	--top-icon2-color: var(--color-text-4);
-
-	position: absolute;
-	z-index: 3;
-	font-size: 20px;
-}
-
-.top-input[data-top-icon]:before {
-	left: 0;
-}
-
-.top-input[data-top-icon2]:after {
-	right: 0;
-}
-
-/* cleaner */
-.top-input-withCleaner {
-	--top-forms_clear-width: 24px;
-}
-
-.top-input_cleaner[data-top-icon] {
-	--top-icon-size: 16px;
-	--top-icon-width: 20px;
-	--top-icon-color: var(--color-text-3);
-
-	cursor: pointer;
-	border-radius: 50%;
-	width: 20px;
-	height: 16px;
-	position: absolute;
-	right: calc(var(--top-forms-border-width) + max(var(--top-icon2-width), var(--top-forms-padding) / 2));
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.top-input_cleaner[data-top-icon]:hover {
-	--top-icon-color: var(--color-text-2);
-}
-
-/* TODO: перенести в inputsRange */
-.top-input_input {
-	width: 50%;
-	flex-grow: 1;
-}
-
-/* top-loadbar */
-.top-input .top-loadbar {
-	border-radius: var(--top-forms-radius) 0 0 0;
-}
-</style>