@topvisor/ui 1.0.22-test-ci-cd-10 → 1.2.0

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+/**
+ * Замечание для разработчиков
+ *
+ * При изменении библиотеки 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

@@ -0,0 +1,11 @@
+/**
+ * Размеры
+ */
+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

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

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

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

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

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

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

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