@topvisor/ui 1.0.41-dialog.1 → 1.1.0-date.0

package/src/components/forms/switcher/switcher.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Emits, Props } from './types';
+import ControlLabel from '../controlLabel/controlLabel.vue';
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const localValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(value) {
+		emit('update:modelValue', value);
+	},
+});
+</script>
+
+<template>
+	<label
+		:class="{
+		['top-forms-optionWrapper']: true,
+		['top-checkboxSwitcher']: true,
+		['top-disabled']: disabled,
+		['top-error']: isError && !disabled,
+	}"
+	>
+		<input
+			v-top-focus.onupdate="isError"
+			type="checkbox"
+			:class="{
+				['top-forms-focusable']: !disabled,
+				['top-forms-option']: true,
+				['top-checkboxSwitcher_input']: true,
+				['top-error']: isError && !disabled,
+			}"
+			v-model="localValue"
+			:name="name"
+			:value="value"
+			:disabled="disabled"
+		>
+
+		<ControlLabel
+			v-if="$slots.default"
+			:description="description"
+			:disabled="disabled"
+		>
+			<!-- @slot Слот с заголовком -->
+			<slot></slot>
+		</ControlLabel>
+	</label>
+</template>
+
+<style>
+.top-checkboxSwitcher {
+	cursor: pointer;
+	display: inline-flex;
+	gap: 4px;
+}
+
+.top-checkboxSwitcher_input {
+	border-radius: 9px;
+	border: none;
+	background: var(--color-layer-3);
+	width: 36px;
+	height: 18px;
+	position: relative;
+}
+
+.top-checkboxSwitcher_input:before {
+	content: "";
+	border-radius: 50%;
+	background: var(--color-white);
+	width: 12px;
+	height: 12px;
+	margin: 3px;
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	transition: left 0.1s;
+}
+
+.top-checkboxSwitcher_input:hover {
+	background: var(--color-layer-4);
+}
+
+/* checked */
+.top-checkboxSwitcher_input:checked {
+	background: var(--top-forms-option-color);
+}
+
+.top-checkboxSwitcher_input:checked:hover {
+	background: var(--top-forms-option-color-hover);
+}
+
+.top-checkboxSwitcher_input:checked:before {
+	left: 50%;
+}
+
+/* isError */
+.top-checkboxSwitcher_input.top-error {
+	background: var(--color-layer-negative-3);
+}
+
+.top-checkboxSwitcher_input.top-error:hover {
+	background: var(--color-layer-negative-4);
+}
+
+.top-checkboxSwitcher_input.top-error:checked {
+	background: var(--color-bg-negative-2);
+}
+
+.top-checkboxSwitcher_input.top-error:checked:hover {
+	background: var(--color-bg-negative-1);
+}
+
+</style>

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

@@ -0,0 +1,22 @@
+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;
+}

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import type { Props } from '../types';
+import Textarea from '../textarea.vue';
+
+defineProps<Props>();
+
+const genVariantProps = () => {
+	return {
+		'Без настроек': {
+			modelValue: '',
+		},
+		'С placeholder': {
+			modelValue: '',
+			placeholder: `Напишите что-нибудь...
+
+Поддерживается многострочный placeholder
+`,
+		},
+		'С текстом': {
+			modelValue: 'Текст введен',
+		},
+		'Много строк текста': {
+			modelValue: `Ночь, улица, фонарь, аптека,
+Бессмысленный и тусклый свет.
+Живи еще хоть четверть века -
+Все будет так. Исхода нет.
+
+Умрешь - начнешь опять сначала
+И повторится все, как встарь:
+Ночь, ледяная рябь канала,
+Аптека, улица, фонарь.`,
+		},
+		'Не активная': {
+			modelValue: 'Текст введен',
+			disabled: true,
+		},
+		'Только чтение': {
+			modelValue: 'Текст введен',
+			readonly: true,
+		},
+		'С maxLength': {
+			modelValue: '',
+			maxLength: 10,
+		},
+		'С maxLength (максимум)': {
+			modelValue: '0123456789',
+			maxLength: 10,
+		},
+		'С maxLength (скролл)': {
+			modelValue: `Ночь, улица, фонарь, аптека,
+Бессмысленный и тусклый свет.
+Живи еще хоть четверть века -
+Все будет так. Исхода нет.
+
+Умрешь - начнешь опять сначала
+И повторится все, как встарь:
+Ночь, ледяная рябь канала,
+Аптека, улица, фонарь.`,
+			maxLength: 400,
+		},
+		'С maxLength (скролл, максимум)': {
+			modelValue: `Ночь, улица, фонарь, аптека,
+Бессмысленный и тусклый свет.
+Живи еще хоть четверть века -
+Все будет так. Исхода нет.`,
+			maxLength: 115,
+		},
+	} satisfies Record<string, Props>;
+};
+
+const variantProps = reactive(genVariantProps());
+</script>
+
+<template>
+	<div class="overview" style="display: grid; grid-template-columns: auto 1fr; gap: 32px;">
+		<template v-for="(props, h2) in variantProps">
+			<div>
+				<h2>
+					{{ h2 }}
+				</h2>
+				<Textarea
+					:="{...$props, ...props}"
+					v-model="props.modelValue"
+				></Textarea>
+			</div>
+		</template>
+	</div>
+</template>

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './textarea.vue';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	args: {
+		modelValue: '',
+	},
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		styling: '',
+		rows: 5,
+		minHeight: 120,
+		expandable: false,
+		isError: false,
+		hint: '',
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/forms/textarea/textarea.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import Hint from '@/components/forms/hint/hint.vue';
+import type { Emits, Props } from './types';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+	styling: '',
+	rows: 5,
+	minHeight: 120,
+});
+
+const emit = defineEmits<Emits>();
+
+const localValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(value) {
+		emit('update:modelValue', value);
+	},
+});
+</script>
+
+<template>
+	<label
+		:class="{
+			['top-textarea']: true,
+			['top-textarea-' + name]: name,
+			['top-disabled']: disabled,
+		}"
+	>
+		<textarea
+			v-top-focus.onupdate="isError"
+			type="text"
+			:class="{
+				['top-forms-focusable']: !disabled,
+				['top-textarea_textarea']: true,
+				['top-textarea_textarea-expandable']: expandable,
+				['top-error']: isError,
+				[`top-style_${styling}`]: !!styling,
+			}"
+			autocomplete="off_always"
+			:name="name"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			:rows="!expandable ? rows : undefined"
+			:maxlength="maxLength"
+			:="$attrs"
+			v-model="localValue"
+		/>
+
+		<span
+			v-if="expandable"
+			class="top-textarea_pseudoContent"
+		>
+			{{ localValue + ' ' }}
+		</span>
+
+		<Hint
+			v-if="hint"
+			class="top-textarea_hint"
+			:hint="hint"
+			v-top-tooltip
+		/>
+
+		<div
+			v-if="maxLength"
+			class="top-textarea_counter"
+			:class="{
+				'top-textarea_counter-max': localValue.length >= maxLength,
+			}"
+		>
+			{{ localValue.length }}/{{ maxLength }}
+		</div>
+	</label>
+</template>
+
+<style>
+.top-textarea {
+	width: 180px;
+	display: inline-flex;
+	align-items: center;
+	position: relative;
+}
+
+.top-textarea_textarea {
+	color: var(--color-text-1);
+	background: var(--top-forms-background-color);
+	width: 100%;
+	padding: var(--top-forms-padding);
+	resize: none;
+}
+
+.top-textarea_textarea:hover {
+	background: var(--top-forms-background-color-hover);
+}
+
+.top-textarea_textarea:focus {
+	border-color: var(--color-line-primary-1);
+	outline: none;
+}
+
+html .top-textarea_textarea.top-textarea_textarea-expandable {
+	width: 100%;
+	height: calc(100% + var(--top-forms-border-width) * 2);
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.top-textarea_pseudoContent {
+	pointer-events: none;
+	box-sizing: border-box;
+	min-height: v-bind(minHeight+ "px");
+	max-height: 60vh;
+	padding: var(--top-forms-padding);
+	font-size: 14px;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	display: block;
+	opacity: 0;
+	z-index: -1;
+}
+
+.top-textarea_hint {
+	height: var(--top-icon-width);
+	display: flex;
+	position: absolute;
+	top: 2px;
+	right: 2px;
+}
+
+.top-textarea_counter {
+	box-shadow:
+		-7px 0px 7px var(--top-forms-background-color),
+		0px -5px 5px var(--top-forms-background-color);
+	border-radius: var(--top-forms-radius) 0;
+	background: var(--top-forms-background-color);
+	padding: var(--top-padding-1);
+	color: var(--color-text-4);
+	position: absolute;
+	right: var(--top-forms-border-width);
+	bottom: var(--top-forms-border-width);
+	z-index: 1;
+}
+
+.top-textarea_counter-max {
+	color: var(--color-text-negative);
+}
+</style>

package/src/components/forms/textarea/types.ts

@@ -0,0 +1,52 @@
+/**
+ * Определение параметров
+ */
+export interface Props {
+	modelValue: string;
+	name?: string;
+	placeholder?: string;
+	styling?: Style;
+
+	/**
+	 * Высота поля в строках, не работает в режиме **expandable**
+	 */
+	rows?: number;
+
+	/**
+	 * Минимальная высота в px для режима **expandable**
+	 */
+	minHeight?: number;
+
+	/**
+	 * Автоматически изменять высоту при вводе текста
+	 */
+	expandable?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	isError?: boolean;
+
+	/**
+	 * Добавить к полю элемент с подсказкой, которая будет появляться при наведении
+	 */
+	hint?: string;
+
+	/**
+	 * Максимальное количество символов
+	 */
+	maxLength?: number;
+}
+
+export const styling = {
+	regular: '',
+	soft: 'soft',
+	transparent: 'transparent',
+} as const;
+
+export type Style = typeof styling[keyof typeof styling];
+
+/**
+ * Определение событий
+ */
+export interface Emits {
+	(e: 'update:modelValue', value?: string): void;
+}

package/src/components/formsExt/README.mdx

@@ -0,0 +1,5 @@
+# UI/FormsExt
+
+Бибилотка содержит расширенный функционал для работы с формами
+
+В отличие от **UI/Forms** грузится по требованию и при сборке делится на файлы

package/src/components/formsExt/checkboxGroup/checkboxGroup.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './checkboxGroup.vue';
+import OverviewComponent from './stories/overview.vue';
+import { items1 } from './stories/example';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: [],
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		items: items1,
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		items: items1,
+		size: 's',
+		styling: 'outline',
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/formsExt/checkboxGroup/checkboxGroup.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+const model = defineModel<Props['modelValue']>({
+	required: true,
+});
+
+withDefaults(defineProps<Props>(), {
+	size: 's',
+	styling: 'outline',
+});
+
+const onChange = (id: Props['modelValue'][number]) => {
+	const newModel = [...model.value];
+	const index = newModel.indexOf(id);
+
+	if (index === -1) {
+		newModel.push(id);
+	} else {
+		newModel.splice(index, 1);
+	}
+
+	model.value = newModel;
+};
+</script>
+
+<template>
+	<div
+		:class="{
+      		['top-checkboxGroup']: true,
+      		['top-checkboxGroup-' + styling]: true,
+      		['top-scrollBarXHidding']: true,
+      		['top-size_' + size]: !!size,
+      		['top-error']: isError,
+    	}"
+	>
+		<label
+			v-for="item in items"
+			:key="item.id"
+			:class="{
+				['top-checkboxGroup_item']: true,
+				['top-checkboxGroup_item-selected']: model.includes(item.id),
+				['top-forms-focusable']: true,
+				['top-disabled']: item.disabled,
+			}"
+			:data-top-icon="item.icon"
+		>
+			<input
+				type="checkbox"
+				class="top-unvisible"
+				:value="item.id"
+				:checked="model.includes(item.id)"
+				:disabled="item.disabled"
+				@change="onChange(item.id)"
+			/>
+
+			{{ item.title }}
+		</label>
+	</div>
+</template>
+
+<style>
+.top-checkboxGroup {
+	user-select: none;
+	border-radius: 8px;
+	height: var(--top-forms-base-height);
+	box-sizing: border-box;
+	display: flex;
+}
+
+.top-checkboxGroup_item {
+	box-sizing: border-box;
+	padding: 1px var(--top-padding-4);
+	cursor: pointer;
+	font-weight: 600;
+	white-space: nowrap;
+	display: flex;
+	flex-grow: 1;
+	justify-content: center;
+	align-items: center;
+	gap: var(--top-gap-1);
+}
+
+/* outline */
+.top-checkboxGroup-outline {
+	border: 1px solid var(--color-line-1);
+	background: var(--color-layout-front-1);
+}
+
+.top-checkboxGroup-outline .top-checkboxGroup_item {
+	height: calc(var(--top-forms-base-height) - 2px);
+	min-height: 100%;
+}
+
+.top-checkboxGroup-outline .top-checkboxGroup_item:hover {
+	background: var(--color-layer-primary-1);
+}
+
+.top-checkboxGroup-outline .top-checkboxGroup_item-selected {
+	background: var(--color-bg-primary-1);
+	color: var(--color-text-white);
+	--top-icon-color: var(--color-text-white);
+}
+
+.top-checkboxGroup-outline .top-checkboxGroup_item-selected:hover {
+	background: var(--color-bg-primary-2);
+}
+
+.top-checkboxGroup-outline.top-error .top-checkboxGroup_item:hover {
+	background: var(--color-layer-negative-1);
+}
+
+.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected {
+	background: var(--color-bg-negative-1);
+}
+
+.top-checkboxGroup-outline.top-error .top-checkboxGroup_item-selected:hover {
+	background: var(--color-bg-negative-2);
+}
+
+/* borderless */
+.top-checkboxGroup-borderless {
+	padding: 2px;
+	background: var(--color-bg-shading-2);
+	gap: 2px;
+}
+
+.top-checkboxGroup-borderless .top-checkboxGroup_item {
+	border-radius: 6px;
+	height: calc(var(--top-forms-base-height) - 4px);
+}
+
+.top-checkboxGroup-borderless .top-checkboxGroup_item:hover {
+	box-shadow: var(--top-shadow-s);
+	background: var(--color-bg-lightning-1);
+}
+
+.top-checkboxGroup-borderless .top-checkboxGroup_item-selected {
+	background: var(--color-bg-primary-1);
+	color: var(--color-text-white);
+	--top-icon-color: var(--color-text-white);
+}
+
+.top-checkboxGroup-borderless .top-checkboxGroup_item-selected:hover {
+	background: var(--color-bg-primary-2);
+}
+
+.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item:hover {
+	background: var(--color-bg-lightning-1);
+}
+
+.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected {
+	background: var(--color-bg-negative-1);
+}
+
+.top-checkboxGroup-borderless.top-error .top-checkboxGroup_item-selected:hover {
+	background: var(--color-bg-negative-2);
+}
+</style>

package/src/components/formsExt/checkboxGroup/stories/example.ts

@@ -0,0 +1,42 @@
+export const items1 = [
+	{
+		id: 0,
+		title: 'ПК',
+	},
+	{
+		id: 1,
+		title: 'Планшет',
+	},
+	{
+		id: 2,
+		title: 'Смартфон',
+	},
+	{
+		id: 3,
+		title: 'Книга',
+	},
+];
+
+export const items2 = [
+	{
+		id: 0,
+		title: 'ПК',
+		icon: '',
+	},
+	{
+		id: 1,
+		title: 'Планшет',
+		icon: '',
+	},
+	{
+		id: 2,
+		title: 'Смартфон',
+		icon: '',
+	},
+	{
+		id: 3,
+		title: 'Книга',
+		icon: '',
+		disabled: true,
+	},
+];