@topvisor/ui 0.0.34 → 0.0.35

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,38 @@
+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>;
+
+/**
+ * test 2
+ */
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		title: 'Заголовок',
+		description: 'Комментарий',
+	}
+} satisfies Story;
+
+/**
+ * test 3
+ */
+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,48 @@
+<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"
+		>
+			{{ description }}
+		</div>
+	</div>
+</template>
+
+<style module>
+.top-forms-optionLabel {
+	flex-grow: 1;
+}
+
+.top-forms-optionLabel_title {
+	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-3);
+	font-size: 0.85em;
+	line-height: var(--top-forms-option-height);
+}
+</style>

package/src/components/forms/forms.ts

@@ -0,0 +1,10 @@
+export { default as Button } from './button/button.vue'
+export { default as Checkbox } from './checkbox/checkbox.vue'
+export { default as ControlLabel } from './controlLabel/controlLabel.vue'
+export { default as Hint } from './hint/hint.vue'
+export { default as Input } from './input/input.vue'
+export { default as InputDate } from './inputDate/inputDate.vue'
+export { default as Radio } from './radio/radio.vue'
+export { default as Switcher } from './switcher/switcher.vue'
+export { default as Textarea } from './textarea/textarea.vue'
+export { default as Select } from './select/select.vue'

package/src/components/forms/helpers.ts

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

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './hint.vue';
+import * as ComponentsConst from './hint';
+import TabsTab from '@/components/tabs/tabs/tab.vue';
+import TabsContent from '@/components/tabs/tabs/content.vue';
+import Button from '@/components/forms/button/button.vue';
+import Textarea from '@/components/forms/textarea/textarea.vue';
+import Hint from '@/components/forms/hint/hint.vue';
+
+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';
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+	<span
+		class="top-hint"
+		data-top-icon=""
+		:title="hint"
+	></span>
+</template>
+
+<style module>
+.top-hint {
+	--top-icon-size: 16px;
+	--top-icon-width: var(--top-icon-size);
+
+	border-radius: 50%;
+	background: var(--content-background-color);
+	padding: 1px;
+	color: var(--color-text-4);
+	line-height: 1;
+	z-index: 1;
+	pointer-events: all;
+}
+
+.top-hint:hover {
+	color: var(--color-text-3);
+}
+</style>

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

@@ -0,0 +1,31 @@
+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, true);
+
+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,
+	},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,34 @@
+import type { Size } from '@/components/forms/helpers';
+import { sizes } from '@/components/forms/helpers';
+
+export interface Props {
+	modelValue: string;
+
+	name?: string;
+	disabled?: boolean;
+	readonly?: boolean;
+
+	title?: string;
+	captionType?: CaptionType;
+
+	size?: Size;
+	icon?: string;
+	icon2?: string;
+	addCleaner?: boolean;
+	isError?: boolean;
+	modificator?: string;
+}
+
+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 { sizes };

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

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Props, Emits } from './input';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 's',
+	captionType: '',
+});
+
+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 = () => {
+	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"
+	>
+		<input
+			type="text"
+			:class="{
+				['top-input_input']: true,
+				['top-input_input-' + modificator]: !!modificator,
+				['top-forms-focusable']: !disabled,
+				['top-error']: isError,
+			}"
+			autocomplete="off_always"
+			:name="name"
+			v-model="localValue"
+			:title="title"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			@keydown.esc.stop="() => (addCleaner || !!$slots.btn) && clean()"
+			:="$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 module>
+.top-input {
+	--top-forms_clear-width: 0px;
+
+	width: 180px;
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--top-gap-1);
+}
+
+.top-input_input {
+	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 {
+	outline-color: var(--color-theme-75);
+	outline-offset: 0;
+}
+
+/* значки */
+.top-input[data-top-icon]:before,
+.top-input[data-top-icon2]:after {
+	--top-icon-color: var(--color-text-secondary);
+	--top-icon2-color: var(--color-text-secondary);
+
+	position: absolute;
+	z-index: 3;
+}
+
+.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 {
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+	--top-icon-color: var(--color-text-3);
+
+	cursor: pointer;
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	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:hover {
+	--top-icon-color: var(--color-text-2);
+}
+
+/* TODO: перенести в inputsRange */
+.top-input_input {
+	width: 50%;
+	flex-grow: 1;
+}
+</style>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { sizes } from '@/components/forms/helpers';
+import type { Props } from '../input';
+import { Input, Button } from '../../forms';
+import { reactive } from 'vue';
+
+defineProps<Props>();
+
+/**
+ * Варианты props для вывода компонента в различных состояних
+ */
+const genVariantProps = () => [
+	{
+		modelValue: '',
+	},
+	{
+		modelValue: 'Текст введен',
+	},
+	{
+		modelValue: '',
+		title: 'С иконкой поиска',
+		icon: '',
+	},
+	{
+		modelValue: '',
+		title: 'С кнопкой очистки',
+		addCleaner: true,
+	},
+	{
+		modelValue: '',
+		title: 'Не активное',
+		disabled: true,
+	},
+	{
+		modelValue: '',
+		title: 'Только чтение',
+		readonly: true,
+	},
+] satisfies Props[];
+
+const variantPropsBySize: Record<string, Props[]> = {};
+Object.values(sizes).forEach(keySize => variantPropsBySize[keySize] = reactive(genVariantProps()));
+</script>
+
+<template>
+	<div>
+		<template v-for="size in sizes">
+			<h2>Размер: {{ size }}</h2>
+
+			<template v-for="props in variantPropsBySize[size]">
+				<Input
+					:="{ ...$props, ...props }"
+					v-model="props.modelValue"
+					:size="size"
+				/>
+				&nbsp;
+			</template>
+			<hr>
+		</template>
+	</div>
+</template>