@topvisor/ui 0.0.35 → 0.0.36

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

@@ -1,66 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,57 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,143 +0,0 @@
-<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

@@ -1,78 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-/* Стили для горизонтального скроллбара 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

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