@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,66 @@
+<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: 'Не выходи из комнаты, не совершай ошибку. Зачем тебе Солнце, если ты куришь Шипку? За дверью бессмысленно всё, ' +
+				'особенно — возглас счастья. Только в уборную — и сразу же возвращайся.',
+		},
+		'Много строк текста': {
+			modelValue: `Люблю грозу в начале мая,
+Когда весенний, первый гром,
+как бы резвяся и играя,
+Грохочет в небе голубом.
+
+Гремят раскаты молодые,
+Вот дождик брызнул, пыль летит,
+Повисли перлы дождевые,
+И солнце нити золотит.
+
+С горы бежит поток проворный,
+В лесу не молкнет птичий гам,
+И гам лесной и шум нагорный -
+Все вторит весело громам.`,
+		},
+		'Мобильная версия': {
+			modelValue: '',
+			title: 'Вы пишите сообщение для: Hello Kitty',
+			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}"
+			v-model="props.modelValue"
+		></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, true);
+
+/**
+ * Поле ввода с кнопкой
+ *
+ * При вводе значения появляется кнопка подтверждения ввода
+ *
+ * При нажитии кнопки подвтерждения или **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/button';
+
+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,57 @@
+<script setup lang="ts">
+import { ref, toRef, watch } from 'vue';
+import type { Props, Emits } from './editInput';
+import Input from '@/components/forms/input/input.vue';
+import Button 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">
+		<Input
+			:="input"
+			@keydown.esc.capture.stop="intermediateValue = modelValue"
+			@keydown.enter.stop="submit"
+			v-model="intermediateValue"
+		/>
+
+		<Button
+			v-if="intermediateValue !== modelValue"
+			icon=""
+			styling="soft"
+			:="button"
+			@click="submit"
+		>
+			<!-- @slot Слот Button -->
+			<slot></slot>
+		</Button>
+	</div>
+</template>
+
+<style module>
+.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,3 @@
+export { default as EditArea } from './editArea/editArea.vue';
+export { default as EditInput } from './editInput/editInput.vue';
+export { default as RadioGroup } from './radioGroup/radioGroup.vue'

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './radioGroup.vue';
+import * as ComponentsConst from './radioGroup';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: '',
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		radiosProps: [
+			{
+				value: '0',
+				title: 'ПК',
+				icon: '',
+			},
+			{
+				value: '1',
+				title: 'Планшет',
+				icon: '',
+			},
+			{
+				value: '2',
+				title: 'Смартфон',
+				icon: '',
+			},
+		],
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		size: 's',
+		showIndicator: false,
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/formsExt/radioGroup/radioGroup.ts

@@ -0,0 +1,28 @@
+import type { Size } from '@/components/forms/helpers';
+import { sizes } from '@/components/forms/helpers';
+
+export interface Props {
+	modelValue: string;
+
+	/**
+	 * Массив props для вставки radioGroupItem
+	 */
+	radiosProps?: ItemProps[];
+
+	showIndicator?: boolean;
+	size?: Size;
+	isError?: boolean;
+}
+
+export interface Emits {
+	(e: 'update:modelValue', value: Props['modelValue']): void;
+}
+
+export interface ItemProps {
+	value: Props['modelValue'];
+	title: string;
+	icon?: string;
+	disabled?: boolean;
+}
+
+export { sizes };

package/src/components/formsExt/radioGroup/radioGroup.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Props, Emits } from './radioGroup';
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 's',
+});
+
+const emit = defineEmits<Emits>();
+
+const localValue = computed({
+	get() {
+		return props.modelValue;
+	},
+
+	set(value) {
+		emit('update:modelValue', value);
+	},
+});
+
+</script>
+
+<template>
+	<div
+		:class="{
+			['top-radioGroup']: true,
+			['top-scrollBarXHidding']: true,
+			['top-size_' + size]: !!size,
+			['top-error']: isError,
+		}"
+	>
+		<div
+			v-for="item of radiosProps"
+			:class="{
+				['top-radioGroup_item-selected']: item.value === localValue,
+				['top-radioGroup_item']: true,
+				['top-disabled']: item.disabled,
+			}"
+			:data-top-icon="item.icon"
+			@click="localValue = item.value"
+		>
+			{{ item.title }}
+
+			<span
+				v-if="showIndicator"
+				class="top-radioGroup_circle"
+			></span>
+		</div>
+	</div>
+</template>
+
+<style module>
+@import "./styles/top-scrollBar.css";
+
+.top-radioGroup {
+	user-select: none;
+	box-sizing: border-box;
+	border-radius: 8px;
+	background-color: var(--color-theme-50);
+	height: var(--top-forms-base-height);
+	padding: 2px;
+	gap: 2px;
+	display: flex;
+	align-items: flex-start;
+}
+
+.top-radioGroup_item {
+	cursor: pointer;
+	box-sizing: border-box;
+	border-radius: 6px;
+	height: calc(var(--top-forms-base-height) - 4px);
+	padding: 0 16px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	gap: 4px;
+}
+
+.top-radioGroup_item:hover {
+	background-color: var(--color-theme-25);
+	box-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);
+}
+
+/* selected */
+.top-radioGroup_item-selected {
+	pointer-events: none;
+	background-color: var(--color-bg-3);
+	box-shadow: 0px 4px 32px 0px rgba(4, 9, 84, 0.10), 0px 0px 4px 0px rgba(4, 9, 84, 0.08);
+}
+
+/* circle */
+.top-radioGroup_circle {
+	padding: 3px;
+	margin-left: auto;
+	display: flex;
+}
+
+.top-radioGroup_circle:before {
+	content: "";
+	border: 1px solid var(--color-line-3-opacity);
+	border-radius: 50%;
+	box-sizing: border-box;
+	width: calc(var(--top-forms-option-height) - 3px * 2);
+	height: calc(var(--top-forms-option-height) - 3px * 2);
+}
+
+.top-radioGroup_item:hover .top-radioGroup_circle:before {
+	border-color: var(--color-primary);
+}
+
+/* circle selected */
+.top-radioGroup_item-selected .top-radioGroup_circle:before {
+	border-color: var(--color-primary);
+	border-width: 5px;
+}
+
+.top-radioGroup_item-selected:hover .top-radioGroup_circle:before {
+	border-color: var(--color-primary-2);
+}
+
+/* top-disabled */
+.top-radioGroup_item.top-disabled {
+	--top-icon-color: var(--color-text-3);
+
+	color: var(--color-text-3);
+}
+
+.top-radioGroup_item.top-disabled .top-radioGroup_circle:before {
+	border-color: var(--color-theme-400);
+	background-color: var(--color-theme-50);
+}
+
+/* top-error  */
+.top-radioGroup.top-error .top-radioGroup_item:not(.top-disabled) .top-radioGroup_circle:before {
+	border-color: var(--color-negative);
+}
+
+.top-radioGroup.top-error .top-radioGroup_item:hover .top-radioGroup_circle:before {
+	border-color: var(--color-negative-2);
+}
+</style>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { Props } from '../radioGroup';
+import RadioGroup from '../radioGroup.vue';
+
+defineProps<Props>();
+
+const modelValue1 = ref('1');
+const modelValue2 = ref('3');
+
+const radiosProps1 = [
+	{
+		value: '0',
+		title: 'ПК',
+	},
+	{
+		value: '1',
+		title: 'Планшет',
+	},
+	{
+		value: '2',
+		title: 'Смартфон',
+	},
+	{
+		value: '3',
+		title: 'Книга',
+		disabled: true,
+	},
+];
+
+const radiosProps2 = [
+	{
+		value: '0',
+		title: 'ПК',
+		icon: '',
+	},
+	{
+		value: '1',
+		title: 'Планшет',
+		icon: '',
+	},
+	{
+		value: '2',
+		title: 'Смартфон',
+		icon: '',
+	},
+	{
+		value: '3',
+		title: 'Книга',
+		icon: '',
+		disabled: true,
+	},
+];
+</script>
+
+<template>
+	<div>
+		<h2>Стандартный вид</h2>
+
+		<RadioGroup
+			:="$props"
+			v-model="modelValue1"
+			:radiosProps="radiosProps1"
+		/>
+
+		<p><b>Ваш выбор:</b> {{ modelValue1 }}</p>
+
+		<h2>Со значками</h2>
+
+		<RadioGroup
+			:="$props"
+			v-model="modelValue2"
+			:radiosProps="radiosProps2"
+		/>
+
+		<p><b>Ваш выбор:</b> {{ modelValue2 }}</p>
+	</div>
+</template>

package/src/components/formsExt/radioGroup/styles/top-scrollBar.css

@@ -0,0 +1,52 @@
+/* Стили для горизонтального скроллбара top-scrollBarXHidding*/
+/* top-scrollBarXHidding - добавляет скроллбар, если он нужен. Скроллбар появится при hover */
+/* чтобы эффект работал, родитель должен иметь фиксированную высоту */
+.top-scrollBarXHidding {
+	scrollbar-width: none;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.top-scrollBarXHidding:hover {
+	scrollbar-width: thin;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar {
+	height: 6px;
+	display: none;
+}
+
+.top-scrollBarXHidding:hover::-webkit-scrollbar {
+	display: block;
+	scrollbar-width: thin;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-track {
+	background-color: transparent;
+	box-shadow: inset rgba(0, 0, 0, 0.06) 0 0 0 10px;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-track:hover {
+	box-shadow: inset rgba(0, 0, 0, 0.08) 0 0 0 10px;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-track:active {
+	box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 10px;
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-thumb {
+	background-color: var(--color-line-1-opacity);
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-line-2-opacity);
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-thumb:active {
+	background-color: var(--color-line-3-opacity);
+}
+
+.top-scrollBarXHidding::-webkit-scrollbar-button {
+	width: 0;
+	height: 0;
+}

package/src/components/helper.js

@@ -0,0 +1,10 @@
+export const REGEXP_START_SYMBOL_ICON = new RegExp('^[^a-zа-я0-9_%#!?.:\'"«»[\\](){} \\r\\n\\t<>&/+-]', 'i');
+
+export const extractIconAndContent = content => {
+	const iconExists = content?.[0]?.match(REGEXP_START_SYMBOL_ICON);
+
+	return {
+		icon: iconExists ? content[0] : null,
+		content: iconExists ? content.substring(1) : content,
+	};
+};