@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

package/src/components/layout/rows/rows.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+const props = withDefaults(defineProps<Props>(), {
+	gap: 'none',
+});
+</script>
+
+<template>
+	<div
+		:class="{
+			['top-rows']: true,
+			['top-rows-gap_' + props.gap]: true,
+		}"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<style>
+.top-rows {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.top-rows-gap_none {
+	gap: 0px;
+}
+
+.top-rows-gap_xs {
+	gap: var(--top-gap-1);
+}
+
+.top-rows-gap_s {
+	gap: var(--top-gap-2);
+}
+
+.top-rows-gap_m {
+	gap: var(--top-gap-3);
+}
+
+.top-rows-gap_l {
+	gap: var(--top-gap-4);
+}
+</style>

package/src/components/layout/rows/stories/README.md

@@ -0,0 +1,10 @@
+Компонент ялвяется помощником для вывода элементов в ряд друг под другом с настраеваемым gap.
+
+## Классы:
+
+- `.top-rows`: конетйнер для всатвки строк
+- `.top-rows-gap_none`
+- `.top-rows-gap_xs`
+- `.top-rows-gap_s`
+- `.top-rows-gap_m`
+- `.top-rows-gap_l`

package/src/components/layout/rows/types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+	/**
+	 * Настройка отступа между элементами списка
+	 */
+	gap?: 'none' | 'xs' | 's' | 'm' | 'l',
+}

package/src/components/popup/alert/alert.stories.ts

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import OverviewComponent from './stories/overview.vue';
+
+import Component from './alert.vue';
+
+import TopButton from '@/components/forms/button/button.vue';
+
+const argTypes = genArgsTypes(Component);
+
+/**
+ * Выводит popup с текстом и кнопкой подтверждения.
+ *
+ * Расширяет функционал TopPopup и поддерживает все его настройки.
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		opener: 'Alert',
+		header: 'Сообщение',
+		default: 'Всем привет!',
+	},
+	render: (args) => ({
+		components: {
+			TopPopupAlert: Component,
+			TopButton,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TopPopupAlert
+				:submit-text="args.submitText"
+				@close="() => console.log('Окно закрыто')"
+			>
+				<template #opener>
+					<TopButton>
+						{{ args.opener }}
+					</TopButton>
+				</template>
+
+				<template #header v-if="args.header">
+					{{ args.header }}
+				</template>
+
+				<template #default v-if="args.default">
+					{{ args.default }}
+				</template>
+
+				<template #footer v-if="args.footer">
+					{{ args.footer }}
+				</template>
+			</TopPopupAlert>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {},
+}, OverviewComponent);
+
+export default meta;

package/src/components/popup/alert/alert.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts" generic="T extends Record<string, any> | undefined = undefined">
+import type { Emits, Props } from './types';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopup from '@/components/popup/popup/popup.vue';
+
+const props = defineProps<Props<T>>();
+
+defineEmits<Emits<T>>();
+
+const $propsPopup: Omit<Props<T>, 'submitText'> = {
+	...props,
+	submitText: undefined,
+};
+</script>
+
+<template>
+	<!-- @vue-generic {T} -->
+	<TopPopup
+		class="top-popupAlert"
+		:=$propsPopup
+		@open="$emit('open', $event)"
+		@close="$emit('close', $event)"
+		@scrollContentList="(...args) => $emit('scrollContentList', ...args)"
+	>
+		<template #opener>
+			<!-- @slot Элемент для открытия Popup -->
+			<slot name="opener"></slot>
+		</template>
+
+		<template #header v-if="$slots.header">
+			<!-- @slot Шапка -->
+			<slot name="header"></slot>
+		</template>
+
+		<template #content v-if="$slots.default">
+			<!-- @slot Контент в свободной форме -->
+			<slot></slot>
+		</template>
+
+		<template #footer>
+			<!-- @slot Футер -->
+			<slot name="footer"></slot>
+
+			<TopButton>
+				{{ submitText || $i18n.Common.Close }}
+			</TopButton>
+		</template>
+	</TopPopup>
+</template>

package/src/components/popup/alert/stories/overview.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import TopPopupAlert from '@/components/popup/alert/alert.vue';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopupOpener from '@/components/popup/popup/opener.vue';
+</script>
+
+<template>
+	<h2>Простой TopPopupAlert</h2>
+
+	<TopPopupAlert
+		id="popupAlert"
+		footer-support-link="https://dictionary.cambridge.org/dictionary/english/as-cool-as-a-cucumber"
+	>
+		<template #opener>
+			<TopButton>
+				Alert
+			</TopButton>
+		</template>
+
+		<template #default>
+			<q>As cool as a cucumber 🥒🧊</q>
+		</template>
+	</TopPopupAlert>
+
+	<h2>Открытие TopPopupAlert из другого компонента</h2>
+
+	<TopPopupOpener id="popupAlert" pos="1">
+		<TopButton>
+			Кнопка 1
+		</TopButton>
+	</TopPopupOpener>
+
+	&nbsp;
+
+	<TopPopupOpener id="popupAlert" pos="1">
+		<TopButton>
+			Кнопка 2
+		</TopButton>
+	</TopPopupOpener>
+</template>

package/src/components/popup/alert/types.ts

@@ -0,0 +1,11 @@
+import type { Props as PopupProps } from '../popup/types';
+
+export type { Emits } from '../popup/types';
+
+// storybook не работает с объединением типов
+export interface Props<T extends Record<string, any> | undefined = undefined> extends PopupProps<T> {
+	/**
+	 * Текст кнопки
+	 */
+	submitText?: string;
+}

package/src/components/popup/confirm/confirm.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import OverviewComponent from './stories/overview.vue';
+
+import Component from './confirm.vue';
+
+import TopButton from '@/components/forms/button/button.vue';
+
+const argTypes = genArgsTypes(Component);
+
+/**
+ * Выводит popup с текстом и кнопками подтверждения и отмены.
+ *
+ * При нажатии на кнопку подтверждения, отправиться emit **sumbit**.
+ *
+ * Расширяет функционал TopPopup и поддерживает все его настройки.
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		opener: 'Confirm',
+		header: 'Подтверждение действия',
+		default: 'Вы уверены, что хотите продолджить?',
+	},
+	render: (args) => ({
+		components: {
+			TopPopupConfirm: Component,
+			TopButton,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TopPopupConfirm
+				:submit-text="args.submitText"
+				:cancel-text="args.cancelText"
+				@close="console.log('Окно закрыто')"
+				@submit="console.log('Подтверждено')"
+			>
+				<template #opener>
+					<TopButton>
+						{{ args.opener }}
+					</TopButton>
+				</template>
+
+				<template #header v-if="args.header">
+					{{ args.header }}
+				</template>
+
+				<template #default v-if="args.default">
+					{{ args.default }}
+				</template>
+
+				<template #footer v-if="args.footer">
+					{{ args.footer }}
+				</template>
+			</TopPopupConfirm>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {},
+}, OverviewComponent);
+
+export default meta;

package/src/components/popup/confirm/confirm.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts" generic="T extends Record<string, any> | undefined = undefined">
+import { ref } from 'vue';
+import type { PopupEvent } from '@/components/popup/popup/types';
+import type { Emits, Props } from './types';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopup from '@/components/popup/popup/popup.vue';
+
+const props = defineProps<Props<T>>();
+
+const emit = defineEmits<Emits<T>>();
+
+const isSubmit = ref(false);
+
+const onSubmit = () => {
+	isSubmit.value = true;
+
+	emit('submit');
+};
+
+const onClose = (popupEvent: PopupEvent<T>) => {
+	if (isSubmit.value) {
+		isSubmit.value = false;
+
+		return;
+	}
+
+	emit('close', popupEvent);
+};
+
+const $propsPopup: Omit<Props<T>, 'submitText' | 'cancelText' | 'isWarning'> = {
+	...props,
+	submitText: undefined,
+	cancelText: undefined,
+	isWarning: undefined,
+};
+</script>
+
+<template>
+	<!-- @vue-generic {T} -->
+	<TopPopup
+		class="top-popupConfirm"
+		:=$propsPopup
+		@open="$emit('open', $event)"
+		@close="onClose($event)"
+		@scrollContentList="(...args) => $emit('scrollContentList', ...args)"
+	>
+		<template #opener>
+			<!-- @slot Элемент для открытия TopPopup -->
+			<slot name="opener"></slot>
+		</template>
+
+		<template #header v-if="$slots.header">
+			<!-- @slot Шапка -->
+			<slot name="header"></slot>
+		</template>
+
+		<template #content v-if="$slots.default">
+			<!-- @slot Контент в свободной форме -->
+			<slot></slot>
+		</template>
+
+		<template #footer>
+			<!-- @slot Футер -->
+			<slot name="footer"></slot>
+
+			<TopButton color="theme">
+				{{ cancelText || $i18n.Common.Cancel }}
+			</TopButton>
+
+			<TopButton
+				@click="onSubmit"
+				:color="isWarning ? 'red' : 'blue'"
+			>
+				{{ submitText || $i18n.Common.Continue }}
+			</TopButton>
+		</template>
+	</TopPopup>
+</template>

package/src/components/popup/confirm/stories/overview.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import TopPopupConfirm from '@/components/popup/confirm/confirm.vue';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopupOpener from '@/components/popup/popup/opener.vue';
+
+const alert = (...args) => window.alert(...args);
+</script>
+
+<template>
+	<h2>Простой TopPopupСonfirm</h2>
+
+	<TopPopupConfirm
+		id="popupСonfirm"
+		footer-support-link="https://topvisor.com/ru/support/bank/balance/"
+	>
+		<template #opener>
+			<TopButton>
+				Confirm
+			</TopButton>
+		</template>
+
+		<template #default>
+			<div>Вы уверены что хотите продолжить?</div>
+		</template>
+	</TopPopupConfirm>
+
+	&nbsp;
+
+	<TopPopupConfirm
+		id="popupСonfirmWarning"
+		:is-warning="true"
+		cancel-text="Отмена"
+		submit-text="Удалить"
+		@submit="() => alert('Элемент удален')"
+	>
+		<template #opener>
+			<TopButton color="theme" icon=""/>
+		</template>
+
+		<template #header>
+			Удаление элемента
+		</template>
+
+		<template #default>
+			<div>После удаления элемент нельзя будет восстановить, вы уверены?</div>
+		</template>
+	</TopPopupConfirm>
+
+	<h2>Открытие TopPopupСonfirm из другого компонента</h2>
+
+	<TopPopupOpener id="popupСonfirm" pos="1">
+		<TopButton>
+			Запустить
+		</TopButton>
+	</TopPopupOpener>
+
+	&nbsp;
+
+	<TopPopupOpener id="popupСonfirmWarning" pos="1">
+		<TopButton color="theme" icon=""/>
+	</TopPopupOpener>
+</template>

package/src/components/popup/confirm/types.ts

@@ -0,0 +1,26 @@
+import type { Emits as PopupEmits, Props as PopupProps } from '../popup/types';
+
+// storybook не работает с объединением типов
+export interface Props<T extends Record<string, any> | undefined = undefined> extends PopupProps<T> {
+	/**
+	 * Текст кнопки отмены
+	 */
+	cancelText?: string;
+
+	/**
+	 * Текст кнопки подтверждения
+	 */
+	submitText?: string;
+
+	/**
+	 * Если true, кнопка подтверждения будет красной
+	 */
+	isWarning?: boolean;
+}
+
+export type Emits<T extends Record<string, any> | undefined> = PopupEmits<T> & {
+	/**
+	 * Будет вызвано при нажатии кнопок или закрытии окна
+	 */
+	submit: [];
+};