@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Emits, Props } from './switcher';
-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/textarea/stories/overview.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue';
-import type { Props } from '../textarea';
-import Textarea from '../textarea.vue';
-
-defineProps<Props>();
-
-const genVariantProps = () => {
-	return {
-		'Без настроек': {
-			modelValue: '',
-		},
-		'С placeholder': {
-			modelValue: '',
-			placeholder: `Напишите что-нибудь...
-
-Поддерживается многострочный placeholder
-`,
-		},
-		'С текстом': {
-			modelValue: 'Текст введен',
-		},
-		'Много строк текста': {
-			modelValue: `Ночь, улица, фонарь, аптека,
-Бессмысленный и тусклый свет.
-Живи еще хоть четверть века -
-Все будет так. Исхода нет.
-
-Умрешь - начнешь опять сначала
-И повторится все, как встарь:
-Ночь, ледяная рябь канала,
-Аптека, улица, фонарь.`,
-		},
-		'Не активная': {
-			modelValue: 'Текст введен',
-			disabled: true,
-		},
-		'Только чтение': {
-			modelValue: 'Текст введен',
-			readonly: true,
-		},
-	} 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

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './textarea.vue';
-import * as ComponentsConst from './textarea';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-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.ts

@@ -1,47 +0,0 @@
-/**
- * Определение параметров
- */
-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;
-}
-
-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/forms/textarea/textarea.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import Hint from '@/components/forms/hint/hint.vue';
-import type { Emits, Props } from './textarea';
-
-defineOptions({
-	inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<Props>(), {
-	styling: '',
-	rows: 5,
-	minHeight: 120,
-});
-
-const emit = defineEmits<Emits>();
-
-const value = 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"
-			:="$attrs"
-			v-model="value"
-		/>
-
-		<div
-			v-if="expandable"
-			class="top-textarea_pseudoContent"
-		>
-			{{ value + ' ' }}
-		</div>
-
-		<Hint
-			v-if="hint"
-			class="top-textarea_hint"
-			:hint="hint"
-			v-top-tooltip
-		/>
-	</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 {
-	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;
-	pointer-events: none;
-	opacity: 0;
-	z-index: -1;
-}
-
-.top-textarea_hint {
-	position: absolute;
-	top: 2px;
-	right: 2px;
-}
-</style>

package/src/components/formsExt/README.mdx

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

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

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './editArea.vue';
-import * as ComponentsConst from './editArea';
-import ReadMe from './stories/README.md?raw';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	args: {
-		modelValue: '',
-	},
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: {
-		hint: '',
-		rows: 1,
-		minHeight: 20,
-		expandable: true,
-		isError: false,
-	},
-}, OverviewComponent);
-
-export default meta;

package/src/components/formsExt/editArea/editArea.ts

@@ -1,41 +0,0 @@
-import type { Props as TextareaProps } from '@/components/forms/textarea/textarea';
-
-export interface Props extends TextareaProps {
-	/**
-	 * Поддерживает modelValue и **все другие** props компонента Textarea
-	 *
-	 * См. докуменатцию **Textarea**
-	 */
-	defaultValue?: string;
-
-	title?: string;
-	cancelText?: string;
-	submitText?: string;
-	closeText?: string;
-
-	/**
-	 * Установить фокус на поле ввода при его появлении
-	 */
-	isFocused?: boolean;
-
-	/**
-	 * Показывать кнопку **Close** пока ничего не введено или не изменено
-	 */
-	forceShowCloseBtn?: boolean;
-
-	/**
-	 * Прикрепить к клавиатуре, прикрепляет форму к нижней части экрана
-	 */
-	attachToKeyboard?: boolean;
-}
-
-export interface Emits {
-	(e: 'submit', value: string): void;
-
-	(e: 'close'): void;
-
-	/**
-	 * Только если **attachToKeyboard = true**
-	 */
-	(e: 'clickOnTitle'): void;
-}

package/src/components/formsExt/editArea/editArea.vue

@@ -1,198 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import Button from '@/components/forms/button/button.vue';
-import type { Emits, Props } from './editArea';
-import Textarea from '@/components/forms/textarea/textarea.vue';
-
-const props = withDefaults(defineProps<Props>(), {
-	defaultValue: '',
-	cancelText: 'Cancel',
-	submitText: 'Send',
-	closeText: 'Close',
-	expandable: true,
-});
-
-const emit = defineEmits<Emits>();
-
-const localValue = ref(props.defaultValue);
-
-const isFocused = ref(props.isFocused);
-
-const isChanged = computed(() => localValue.value !== props.defaultValue);
-
-const submit = (value: string) => {
-	emit('submit', value);
-
-	localValue.value = props.defaultValue;
-};
-
-const cancel = () => {
-	if (props.forceShowCloseBtn && !isChanged.value) {
-		emit('close');
-
-		return;
-	}
-
-	localValue.value = props.defaultValue;
-};
-
-const clickOnTitle = () => {
-	if (props.attachToKeyboard) emit('clickOnTitle');
-};
-</script>
-
-<template>
-	<div
-		:class="{
-			'top-editArea': true,
-			'top-editArea-attachedToKeyboard': attachToKeyboard,
-		}"
-	>
-		<div
-			v-if="title"
-			class="top-editArea_title"
-			@click="clickOnTitle()"
-		>
-			{{ title }}
-		</div>
-
-		<div
-			:class="{
-				'top-editArea_form': true,
-				'top-error': isError,
-				'top-focus': isFocused,
-			}"
-		>
-			<Textarea
-				v-model="localValue"
-				:name="name"
-				:placeholder="placeholder"
-				:rows="rows"
-				:minHeight="minHeight"
-				:expandable="expandable"
-				:disabled="disabled"
-				:readonly="readonly"
-				:isError="isError"
-				:hint="hint"
-				class="top-editArea_element"
-				@focus="() => isFocused = true"
-				@blur="() => isFocused = false"
-				@keyup.esc="cancel"
-				@keyup.ctrl.enter="submit(localValue)"
-			/>
-
-			<div class="top-editArea_footer">
-				<Button
-					v-if="isChanged || forceShowCloseBtn"
-					:icon="$core.state.isMobile ? '': ''"
-					class="top-editArea_button"
-					color="theme"
-					styling="soft"
-					@click="cancel"
-				>
-					<template
-						#default
-						v-if="!$core.state.isMobile"
-					>
-						{{ cancelText }}
-					</template>
-				</Button>
-
-				<Button
-					class="top-editArea_button"
-					v-if="isChanged"
-					:icon="$core.state.isMobile ? '': ''"
-					@click="submit(localValue)"
-				>
-					<template
-						#default
-						v-if="!$core.state.isMobile"
-					>
-						{{ submitText }}
-					</template>
-				</Button>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style>
-.top-editArea {
-	--top-editArea-bottom: env(keyboard-inset-height, 0px);
-	--top-editArea-offset-bottom: 0px;
-
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.top-editArea_title {
-	font-size: 12px;
-}
-
-.top-editArea_form {
-	flex-direction: column;
-	outline: none;
-}
-
-.top-editArea_form:not(.top-error):hover,
-.top-editArea_form:not(.top-error).top-focus {
-	border-color: var(--top-forms-border-color-hover);
-}
-
-/* textarea в EditArea */
-.top-textarea {
-	width: 100%;
-}
-
-.top-editArea_element.top-textarea_textarea {
-	--top-forms-border-width: 0px;
-
-	outline: none;
-	animation: none;
-}
-
-/* footer */
-.top-editArea_footer {
-	padding: var(--top-forms-padding);
-	display: flex;
-	min-height: 32px;
-	align-self: flex-end;
-	justify-content: flex-end;
-	gap: var(--top-forms-padding);
-}
-
-/* attachedToKeyboard */
-.top-editArea-attachedToKeyboard {
-	background: var(--top-forms-background-color);
-	position: fixed;
-	bottom: calc(var(--top-editArea-offset-bottom) + var(--top-editArea-bottom));
-	right: 0;
-	left: 0;
-	z-index: 2;
-	gap: 0;
-	transition: bottom var(--transition-fast);
-}
-
-.top-editArea-attachedToKeyboard .top-editArea_form {
-	border-radius: 0;
-	border: none;
-	border-top: 1px solid var(--top-forms-border-color);
-}
-
-.top-editArea-attachedToKeyboard .top-editArea_title {
-	cursor: pointer;
-	border-top: 1px solid var(--color-line-2-opacity);
-	padding: var(--top-forms-padding);
-}
-
-.top-editArea-attachedToKeyboard .top-editArea_footer > [data-top-icon] {
-	border-radius: 100%;
-}
-
-@media screen and (max-width: 900px) {
-	.top-editArea_form{
-		flex-direction: row;
-	}
-}
-</style>

package/src/components/formsExt/editArea/stories/README.md

@@ -1,21 +0,0 @@
-Поле для ввода текста с кнопками
-
-Поддерживает все props компонента **Textarea**.
-
-Можно задать для поля значение по умолчанию - **defaultValue**.
-
-При вводе текста или изменении существующего, появляются две кнопки - **Cancel** и **Send**. Название всех кнопок можно поменять через соответствующие
-props.
-
-Если включен props - **forceShowCloseBtn**, то будет отображаться кнопка **Close**, если текст еще не введён или не изменён.
-
-При нажатии на кнопку **Send** или при нажатии **Ctrl + Enter** значение текстового поля отправляется родителю, само поле принимает значение
-defaultValue
-
-При нажатии кнопки **Cancel** или **Escape**, содержимое textarea будет приведено к начальному состоянию
-
-При нажатии кнопки **Close**, в родителе сработает событие **@close**
-
-В режиме **attachToKeyboard** форма прикрепляется к низу экрана, чтобы всегда находиться рядом с клавиатурой.
-
-В этом режиме, вместо текста, на кнопках будут иконки. А при нажатии на **title**, родителю будет отправлено событие **@clickOnTitle**