@topvisor/ui 1.1.0 → 1.2.0

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { Props } from '../editArea';
+import EditArea from '../editArea.vue';
+import { reactive } from 'vue';
+
+defineProps<Props>();
+
+const genVariantProps = () => {
+	return {
+		'Без настроек': {
+			modelValue: '',
+		},
+		'С заголовком': {
+			modelValue: '',
+			title: 'editArea с заголовком',
+		},
+		'С placeholder': {
+			modelValue: '',
+			placeholder: 'Напишите что-нибудь...',
+		},
+		'С текстом': {
+			modelValue: '',
+			defaultValue: 'Не выходи из комнаты, не совершай ошибку. Зачем тебе Солнце, если ты куришь Шипку? За дверью бессмысленно всё, ' +
+				'особенно — возглас счастья. Только в уборную — и сразу же возвращайся.',
+		},
+		'Много строк текста': {
+			modelValue: '',
+			defaultValue: `Люблю грозу в начале мая,
+Когда весенний, первый гром,
+как бы резвяся и играя,
+Грохочет в небе голубом.
+
+Гремят раскаты молодые,
+Вот дождик брызнул, пыль летит,
+Повисли перлы дождевые,
+И солнце нити золотит.
+
+С горы бежит поток проворный,
+В лесу не молкнет птичий гам,
+И гам лесной и шум нагорный -
+Все вторит весело громам.`,
+		},
+		'Мобильная версия': {
+			modelValue: '',
+			title: 'Вы пишите сообщение для: Геннадий Топвизоров',
+			placeholder: 'Напишите что-нибудь...',
+			attachToKeyboard: true,
+		},
+	} satisfies Record<string, Props>;
+};
+
+const variantProps = reactive(genVariantProps());
+</script>
+
+<template>
+	<template v-for="(props, h2) in variantProps">
+		<h2>
+			{{ h2 }}
+		</h2>
+		<EditArea
+			:="{...$props, ...props}"
+		></EditArea>
+	</template>
+
+	<!-- TODO: добавить переменную top-forms-fixed-height и использовать ее при добавлении отступов у страницы -->
+	<br><br><br><br><br><br><br><br><br><br>
+</template>

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './editInput.vue';
+import * as ComponentsConst from './editInput';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
+
+/**
+ * Поле ввода с кнопкой
+ *
+ * При вводе значения появляется кнопка подтверждения ввода
+ *
+ * При нажитии кнопки подвтерждения или **Enter** будет выполнено событие **update:modelValue**
+ *
+ * При нажатии **Escape** значение в поле будет возвращено к начальному значению
+ */
+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: {},
+}, OverviewComponent);
+
+export default meta;

package/src/components/formsExt/editInput/editInput.ts

@@ -0,0 +1,20 @@
+import type { Props as InputProps } from '@/components/forms/input/input';
+import type { Props as ButtonProps } from '@/components/forms/button/types';
+
+export interface Props {
+	modelValue: string;
+
+	/**
+	 * Любые props компонента Input, за исключением modelValue
+	 */
+	input?: Omit<InputProps, 'modelValue'>;
+
+	/**
+	 * Любые props компонента Button
+	 */
+	button?: ButtonProps;
+}
+
+export interface Emits {
+	(e: 'update:modelValue', value: string): void;
+}

package/src/components/formsExt/editInput/editInput.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, toRef, watch } from 'vue';
+import type { Emits, Props } from './editInput';
+import TopInput from '@/components/forms/input/input.vue';
+import TopButton from '@/components/forms/button/button.vue';
+
+const props = defineProps<Props>();
+
+const intermediateValue = ref(props.modelValue);
+
+watch(toRef(props.modelValue), () => {
+	intermediateValue.value = props.modelValue;
+});
+
+const emit = defineEmits<Emits>();
+
+const submit = () => {
+	emit('update:modelValue', intermediateValue.value);
+};
+</script>
+
+<template>
+	<div class="top-editInput">
+		<TopInput
+			:="input"
+			@keydown.esc.capture.stop="intermediateValue = modelValue"
+			@keydown.enter.stop="submit"
+			v-model="intermediateValue"
+		/>
+
+		<TopButton
+			v-if="intermediateValue !== modelValue"
+			icon=""
+			styling="soft"
+			:="button"
+			@click="submit"
+		/>
+	</div>
+</template>
+
+<style>
+.top-editInput {
+	width: 220px;
+	flex-grow: 1;
+	display: flex;
+	align-items: flex-end;
+	gap: var(--top-gap-1);
+}
+
+.top-editInput .top-input {
+	width: unset;
+	flex-grow: 1;
+}
+</style>

package/src/components/formsExt/editInput/stories/overview.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import EditInput from '../editInput.vue';
+import type { Props } from '../editInput';
+
+defineProps<Props>();
+
+const modelValues = reactive({
+	0: '',
+	1: '',
+	2: '',
+	3: '',
+});
+</script>
+
+<template>
+	<h2>Смена значка</h2>
+
+	<EditInput
+		v-model="modelValues[0]"
+		:input="{}"
+		:button="{
+			icon: ''
+		}"
+	/>
+
+	<h2>С подписью</h2>
+
+	<EditInput
+		v-model="modelValues[1]"
+		:input="{
+			title: 'Заголовок поля',
+			captionType: 'slide',
+		}"
+	/>
+
+	<h2>С другой кнопкой</h2>
+
+	<EditInput
+		v-model="modelValues[2]"
+		:button="{
+			styling: '',
+		}"
+	/>
+
+	<h2>С кнопкой очистки</h2>
+
+	<EditInput
+		v-model="modelValues[3]"
+		:input="{
+			addCleaner: true,
+		}"
+	/>
+</template>

package/src/components/formsExt/formsExt.ts

@@ -0,0 +1,15 @@
+import type { ComponentCustomProps } from 'vue';
+
+import EditArea from './editArea/editArea.vue';
+import EditInput from './editInput/editInput.vue';
+import RadioGroup from './radioGroup/radioGroup.vue';
+import Selector2 from './selector2/selector2.vue';
+import Menu from './menu/menu.vue';
+import Info from './info/info.vue';
+
+export const TopEditArea = EditArea as typeof EditArea & ComponentCustomProps;
+export const TopEditInput = EditInput as typeof EditInput & ComponentCustomProps;
+export const TopRadioGroup = RadioGroup as typeof RadioGroup & ComponentCustomProps;
+export const TopSelector2 = Selector2 as typeof Selector2 & ComponentCustomProps;
+export const TopMenu = Menu as typeof Menu & ComponentCustomProps;
+export const TopInfo = Info as typeof Info & ComponentCustomProps;

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './info.vue';
+import * as ComponentsConst from './types';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, ['default', 'value']);
+
+/**
+ * Стилизованный блок для вывода информационных сообщений
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	args: {
+		icon: '',
+		default: 'Инфомрационное сообщение',
+		additional: '10',
+	},
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		icon: '',
+		size: 'default',
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/formsExt/info/info.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { Props, Slots } from './types';
+
+withDefaults(defineProps<Props>(), {
+	styling: 'default',
+	size: 'default',
+});
+
+defineSlots<Slots>();
+</script>
+
+<template>
+	<div
+		:class="{
+			['top-info']: true,
+			['top-size_' + size]: true,
+			['top-info-styling_' + styling]: true,
+		}"
+		:data-top-icon="icon"
+	>
+		<div class="top-info_text">
+			<slot></slot>
+		</div>
+
+		<span v-if="$slots.additional" class="top-info_value">
+			<slot name="additional"></slot>
+		</span>
+	</div>
+</template>
+
+<style>
+.top-info {
+	--top-icon-width: var(--top-icon-size);
+
+	border-radius: var(--top-forms-radius);
+	box-sizing: border-box;
+	min-height: var(--top-forms-base-height);
+	padding: var(--top-padding-1) var(--top-padding-2);
+	flex-grow: 5;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--top-gap-2);
+}
+
+.top-info_text {
+	flex-grow: 1;
+}
+
+.top-info_value {
+	font-weight: bold;
+}
+
+/* size */
+.top-info.top-size_default {
+	border-radius: var(--top-radius-3);
+	padding: var(--top-padding-4);
+}
+
+/* styling */
+.top-info-styling_default {
+	--top-icon-color: var(--color-text-2);
+
+	background: var(--color-layer-1);
+}
+
+.top-info-styling_info {
+	--top-icon-color: var(--color-text-primary);
+
+	background: var(--color-layer-primary-1);
+}
+
+.top-info-styling_warning {
+	--top-icon-color: var(--color-text-warning);
+
+	background: var(--color-layer-warning-1);
+}
+
+.top-info-styling_negative {
+	--top-icon-color: var(--color-text-negative);
+
+	background: var(--color-layer-negative-1);
+}
+</style>

package/src/components/formsExt/info/stories/overview.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Props } from '../types';
+import Info from '../info.vue';
+
+defineProps<Props>();
+
+const stylings: Props['styling'][] = ['default', 'info', 'warning', 'negative'];
+</script>
+
+<template>
+	<div>
+		<template v-for="styling in stylings">
+			<h2>Стиль: {{ styling }}</h2>
+
+			<div class="overviewInfo">
+				<Info
+					:="$props"
+					:styling
+				>
+					{{ styling }}
+
+					<template #additional>
+						10
+					</template>
+				</Info>
+			</div>
+		</template>
+	</div>
+</template>

package/src/components/formsExt/info/types.ts

@@ -0,0 +1,25 @@
+export interface Props {
+	icon: string,
+
+	/**
+	 * Стиль оформления
+	 */
+	styling?: 'default' | 'info' | 'warning' | 'negative',
+
+	/**
+	 * Размер
+	 */
+	size?: 'default' | 's' | 'm' | 'l',
+}
+
+export interface Slots {
+	/**
+	 * Текст сообщения
+	 */
+	default(props: {}): any;
+
+	/**
+	 * Текст справа от сообещния с дополнительной информацией (например, сумма к оплате)
+	 */
+	additional(props: {}): any;
+}

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+
+import Component from './menu.vue';
+import * as ComponentsConst from './menu';
+import OverviewComponent from './stories/overview.vue';
+import items from './stories/items';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+/**
+ * Компонент предназначен для вывода меню с выбором одного или нескольких элементов
+ *
+ * Не является навгиационным меню, можно испоьзовать для фильтров или для управления выводом другого контента
+ *
+ * Элементы меню представляют собой компонент **Button**. Все кнопки можно гибко настраивать.
+ *
+ * Имеен несколько видов оформления
+ *
+ * ## Дополнительный функицонал:
+ *
+ * - Меню можно скроллить стандартным скроллом мыши
+ * - Меню автоматически проскролливается до выбранного пункта меню
+ * - Есть возможнсоть вывода кнопки "Выбрать все"
+ *
+ * Для **safari**: скролл с анимацией доступен только при подключении jQuery
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		modelValue: 1,
+		items,
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		modelValue: 1,
+		items,
+		selectAllItem: {
+			icon: '',
+			title: 'Выбрать все',
+			value: 'all',
+			content: '',
+		},
+		canBeEmptyMultiple: false,
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/formsExt/menu/menu.ts

@@ -0,0 +1,45 @@
+import type { Props as ButtonProps } from '@/components/forms/button/types';
+
+export interface Props {
+	/**
+	 * Значение активной кнопки, value или href
+	 */
+	modelValue: string | string[] | number | number[];
+
+	/**
+	 * Дополниетольно поддерижвает все props Button
+	 */
+	items: Item[];
+
+	/**
+	 * Возможность множественного выбора
+	 */
+	isMultiple?: boolean;
+
+	/**
+	 * Возможность пустого множества
+	 */
+	canBeEmptyMultiple?: boolean;
+
+	/**
+	 * Стиль меню
+	 * default - табы
+	 * bar - кнопки в баре
+	 */
+	styling?: typeof styling[keyof typeof styling];
+
+	/**
+	 * Кнопка - выбрать все
+	 */
+	selectAllItem?: Item;
+}
+
+export interface Item extends ButtonProps {
+	value: string | number;
+	content?: string;
+}
+
+export const styling = {
+	'default': 'default',
+	'bar': 'bar',
+} as const;