@topvisor/ui 1.1.0 → 1.2.0

package/src/components/popup/popup/style/popup.css

@@ -0,0 +1,345 @@
+:root {
+	--top-popup-z-index: 200000;
+	--top-popup-transition-delay: 100ms;
+
+	--top-popup-background-color: var(--color-layout-front-1);
+	--top-popup-background-color-hover: var(--color-layout-front-3);
+	--top-popup-background-color-active: var(--color-layout-front-4);
+
+	--top-popup-border-color: var(--color-line-2-opacity);
+	--top-popup-title-background-color: var(--color-layer-1);
+
+	/* суммарный отсуп от каря popup до элемента */
+	--top-popup-content-padding: calc(var(--top-popup-list-padding) + var(--top-popup-listItem-padding));
+
+	/* списки */
+	--top-popup-list-padding: var(--top-padding-2);
+
+	--top-popup-listItem-radius: var(--top-radius-2);
+	--top-popup-listItem-padding: var(--top-padding-2);
+}
+
+.top-popup-front { position: relative; }
+
+.top-popup-wrapper {
+	/* см. recalcPosition() */
+	--top-popup-height: 0px;
+	--top-popup-right-bounding: 0px;
+	--top-popup-bottom-bounding: 0px;
+	--top-popup-top: 0px;
+	--top-popup-right: calc(100vw - var(--top-popup-right-bounding));
+	--top-popup-bottom: calc(var(--100vh) - var(--top-popup-bottom-bounding));
+	--top-popup-left: 0px;
+
+	text-align: initial; white-space: normal; word-break: normal;
+	position: absolute; z-index: 200000;
+}
+
+.top-popup-wrapper:not(.top-popup-wrapper-shown) { overflow: hidden; }
+
+/* top-popupPanel */
+.top-popupPanel {
+	cursor: default;
+	box-shadow: var(--top-shadow-b);
+	border-radius: 14px;
+	background: var(--top-popup-background-color);
+	position: absolute; overflow: hidden;
+	display: flex; flex-direction: column;
+}
+
+/* position */
+.top-popup-wrapper > * {
+	opacity: 0;
+	transition: opacity var(--top-popup-transition-delay) linear, transform var(--top-popup-transition-delay) linear;
+}
+
+.top-popup-wrapper.p0 > * { transform: translateY(-8px); }
+
+.top-popup-wrapper.p1 > * { transform: translateY(8px); }
+
+.top-popup-wrapper.p2 > * { transform: translateX(8px); }
+
+.top-popup-wrapper.p3 > * { transform: translateY(8px); }
+
+.top-popup-wrapper.p4 > * { transform: translateX(-8px); }
+
+.top-popup-wrapper-shown:not(.top-popup-wrapper-closed) > * {opacity: 1;transform: translate(0, 0) !important;}
+
+.top-popup-wrapper.p0 > .top-popup { top: calc(-16px); left: calc(0px - 8px); }
+
+.top-popup-wrapper.p1 > .top-popup { bottom: calc(100% + 8px); }
+
+.top-popup-wrapper.p2 > .top-popup { left: calc(100% + 8px); }
+
+.top-popup-wrapper.p3 > .top-popup { top: calc(100% + 8px); }
+
+.top-popup-wrapper.p4 > .top-popup { right: calc(100% + 8px); }
+
+.top-popup-wrapper.p2 > .top-popup,
+.top-popup-wrapper.p4 > .top-popup { margin-top: -10px; }
+
+.top-popup-wrapper.p1.with_notch > .top-popup { margin-bottom: 5px; }
+
+.top-popup-wrapper.p2.with_notch > .top-popup { margin-left: 5px; }
+
+.top-popup-wrapper.p3.with_notch > .top-popup { margin-top: 5px; }
+
+.top-popup-wrapper.p4.with_notch > .top-popup { margin-right: 5px; }
+
+.top-popup-wrapper.invert-x > .top-popup { right: 0; }
+
+.top-popup-wrapper.invert-y > .top-popup { bottom: 0; }
+
+/* notch */
+.top-popup-wrapper > .notch { border: 7.4px solid transparent; position: absolute; display: block; }
+
+.top-popup-wrapper.p1 > .notch { border-bottom: 0; border-top: 7.4px solid var(--color-layout-front-1); margin: 0 0 7.4px -7.4px; bottom: 100%; left: 50% }
+
+.top-popup-wrapper.p2 > .notch { border-left: 0; border-right: 7.4px solid var(--color-layout-front-1); margin: 0 0 -7.4px 7.4px; bottom: 50%; left: 100%; }
+
+.top-popup-wrapper.p3 > .notch { border-top: 0; border-bottom: 7.4px solid var(--color-layout-front-1); margin: 7.4px 0 0 -7.4px; top: 100%; left: 50%; }
+
+.top-popup-wrapper.p4 > .notch { border-right: 0; border-left: 7.4px solid var(--color-layout-front-1); margin: 0 7.4px -7.4px 0; bottom: 50%; right: 100%; }
+
+.top-popup-wrapper.p1 > .notch-border { border-top-color: rgba(0, 0, 0, 0.05); margin-bottom: 6px; }
+
+.top-popup-wrapper.p2 > .notch-border { border-right-color: rgba(0, 0, 0, 0.05); margin-left: 6px; }
+
+.top-popup-wrapper.p3 > .notch-border { border-bottom-color: rgba(0, 0, 0, 0.05); margin-top: 6px; }
+
+.top-popup-wrapper.p4 > .notch-border { border-left-color: rgba(0, 0, 0, 0.05); margin-right: 6px; }
+
+/* common */
+.top-popup_header,
+.top-popup_content,
+.top-popup_footer { font-size: 14px; }
+
+.top-popup_header,
+.top-popup_footer { display: flex; align-items: center; justify-content: space-between; }
+
+/* header */
+.top-popup_header {
+	color: var(--color-text-1);
+	border-bottom: 1px solid var(--top-popup-border-color);
+	padding: var(--top-padding-3);
+	font-weight: 600;
+}
+
+.top-popup_header > * { font-weight: 400; }
+
+.top-popup_header > .a { cursor: pointer;}
+
+.top-popup_header > .a:hover { color: var(--color-text-primary); }
+
+.top-popup_headerButton { width: 60px; }
+
+/* widget */
+.top-popup_widget {
+	padding: var(--top-padding-2);
+}
+
+/* content */
+.top-popup_content {
+	margin: 0;
+	flex-grow: 1;
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	gap: var(--top-gap-4);
+
+	-webkit-overflow-scrolling: touch;
+}
+
+div.top-popup_content {
+	color: var(--color-text-1);
+	padding: var(--top-popup-content-padding);
+}
+
+div.top-popup_content > * { flex-shrink: 0; }
+
+div.top-popup_content > .top-button { margin: 0; }
+
+div.top-popup_content .top-unwrap {
+	--top-unwrap-x: var(--top-popup-content-padding);
+}
+
+ul.top-popup_content {
+	color: var(--color-text-1);
+	padding: var(--top-popup-list-padding);
+	gap: 2px;
+}
+
+ul.top-popup_content .top-unwrap {
+	--top-unwrap-x: var(--top-popup-list-padding);
+}
+
+.top-popup_listItem {
+	border-radius: var(--top-popup-listItem-radius);
+	padding: var(--top-popup-listItem-padding);
+	line-height: 1 !important;
+}
+
+ul.top-popup_content li { margin: 0; list-style: none; display: flex; position: relative }
+
+ul.top-popup_content li > * { flex-grow: 1; }
+
+ul.top-popup_content li > a:not(.top-button),
+ul.top-popup_content li > .a {
+	cursor: pointer;
+	box-sizing: border-box;
+	border-radius: var(--top-popup-listItem-radius);
+	background: var(--top-popup-background-color);
+	padding: var(--top-popup-listItem-padding);
+	color: var(--color-text-1) !important; font-size: 14px; font-weight: normal !important; text-decoration: none !important; font-style: normal;
+	line-height: 1 !important;
+	display: flex; flex: 1 1 100%; align-items: center;
+	transition: background-color 0.1s ease-in-out;
+}
+
+.top-popup-wrapper-no_animate ul.top-popup_content li > a:not(.top-button),
+.top-popup-wrapper-no_animate ul.top-popup_content li > .a { transition: none; }
+
+ul.top-popup_content li > a:not(.top-button):hover,
+ul.top-popup_content li > .a:hover { background: var(--top-popup-background-color-hover); }
+
+ul.top-popup_content li > a:not(.top-button).top-active,
+ul.top-popup_content li > .a.top-active {
+	--top-icon-color: var(--color-text-primary) !important;
+
+	background: var(--top-popup-background-color-active);
+}
+
+.top-popup_content + .top-popup_content { padding-top: 0; }
+
+/* listTitle */
+.top-popup_listItem-title {
+	background: var(--color-layer-1);
+	color: var(--color-text-1); font-size: 12px;
+}
+
+/* listDelimiter */
+.top-popup_listItem-delimiter {
+	border-radius: 3px;
+	background: var(--top-popup-border-color);
+	height: 1px;
+	padding: 0;
+	margin: 4px;
+}
+
+/* listMore */
+.top-popup_listMore {
+	font-size: 20px;
+	margin: calc(0px - var(--top-popup-listItem-padding)) calc(0px - var(--top-popup-listItem-padding) / 2) calc(0px - var(--top-popup-listItem-padding)) 0;
+}
+
+.top-popup_listMore.top-button { margin: 0; }
+
+ul.top-popup_content li > .a.top-popup_listMore {
+	text-align: center;
+	flex-basis: 10px;
+}
+
+ul.top-popup_content li > .a.top-popup_listMore:before { color: var(--color-text-2); }
+
+ul.top-popup_content li > * > .top-popup_listMore {
+	margin-left: auto;
+	color: var(--color-layer-4);
+	font-size: 14px;
+}
+
+ul.top-popup_content li > * > i.top-popup_listMore:hover,
+ul.top-popup_content li > * > i.top-popup_listMore.top-active { color: var(--color-text-primary); }
+
+ul.top-popup_content li > * > i.top-popup_listMore:before {
+	transform: rotate(90deg);
+	display: block;
+}
+
+ul.top-popup_content li a.close { background: none !important; }
+
+/* data-top-icon */
+.top-popup_content > [data-top-icon]:before {
+	--top-icon-size: 20px;
+}
+
+ul.top-popup_content li > [data-top-icon]:not(.top-button) {
+	--top-icon-color: var(--color-text-3);
+	--top-icon-size: 20px;
+	--top-icon-width: 20px;
+}
+
+ul.top-popup_content li > [data-top-icon]:not(.top-button):before {
+	height: 1rem; margin-right: 8px; transition: color 0.1s;
+}
+
+ul.top-popup_content li:hover > [data-top-icon]:not(.top-button) {
+	--top-icon-color: var(--color-text-2);
+}
+
+/* footer */
+.top-popup_footer {
+	/*padding: var(--top-popup-list-padding);*/
+	padding: var(--top-padding-3);
+	border-top: 1px solid var(--top-popup-border-color);
+	display: flex;
+	gap: var(--top-gap-2);
+	justify-content: flex-end;
+}
+
+/* footerSupportLink */
+.top-popup_footerSupportLink {
+	margin-right: auto;
+}
+
+/* Виджеты */
+.top-popup > [data-widget] { padding: 0 var(--top-popup-list-padding); }
+
+.top-popup > [data-widget] + hr { margin: 0 var(--top-popup-list-padding); }
+
+.top-popup .placeholder {
+	border: 1px solid #E0D9D9 !important; border-right: none !important; border-left: none !important; background: #F9F9F9 !important; margin: -1px 0; z-index: 1;
+	position: relative;
+}
+
+/* компоненты  */
+.top-popup-wrapper.simple_list > .top-popup { min-width: 0; white-space: nowrap; }
+
+.top-popup_content .top-column { display: flex; flex-direction: column; gap: 4px; }
+
+html .top-popup .top-popup_content li > .top-button {
+	margin: calc(var(--top-popup-listItem-padding) / 2) var(--top-popup-listItem-padding);
+}
+
+.top-popup li .check_all,
+.top-popup li .clear_all { cursor: pointer; color: var(--color-text-primary); padding: 8px; display: inline-block; }
+
+.top-popup li .check_all:hover,
+.top-popup li .clear_all:hover { text-decoration: underline; }
+
+.top-popup li .clear_all { display: none; }
+
+/* table */
+.top-popup_content table { margin: -9px 0; }
+
+.top-popup_content table td,
+.top-popup_content table th { padding: 9px var(--top-popup-listItem-padding) 9px 0; vertical-align: top; }
+
+.top-popup_content table th { width: 40%; font-weight: 600; white-space: nowrap; }
+
+/* формы */
+ul.top-popup_content .a > [type="checkbox"],
+ul.top-popup_content .a > [type="radio"] { margin: -8px 0 -8px auto; }
+
+/* deprecated */
+ul.top-popup_content a > [class*=icon],
+ul.top-popup_content i.a > [class*=icon] {
+	transition: 0.1s;
+}
+
+.top-popup .buttons { border-radius: 0 0 4px 4px; border-top: 1px solid #BDC3C7; background: #ECF0F1; padding: 10px 15px; margin: 10px -15px -10px -15px; white-space: nowrap; }
+
+.top-popup_footer [class*=btn]:not(.btn-transparent) { min-width: 100px; padding: 5px 14px; margin-left: 10px; }
+
+.top-popup_footer [class*=btn]:first-child { margin-left: 0; }
+
+.top-popup_footer .btn.full_width { margin: 0; flex-grow: 1; }

package/src/components/popup/popup/style/popup.m.css

@@ -0,0 +1,72 @@
+:root {
+	--top-popup-list-padding: 0px;
+
+	--top-popup-listItem-radius: 0px;
+	--top-popup-listItem-padding: var(--top-padding-4);
+}
+
+html.with_popup { background: #808080; }
+
+.top-popup-wrapper {
+	--top-popup-footer-offset: 25px;
+
+	width: auto !important; height: auto !important;
+	position: fixed; top: 0 !important; right: 0 !important; left: 0 !important; overflow: hidden;
+	transition: background 0.3s;
+}
+
+.top-popup-wrapper-shown:not(.top-popup-wrapper-closed) { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); }
+.top-popup-wrapper-shown:not(.top-popup-wrapper-closed) > .top-popup { opacity: 1 !important; }
+
+.top-popup {
+	border-radius: 8px 8px 0 0; width: auto !important; max-height: calc(100% - var(--header-height, 0px) - var(--toolbar-height, 0px) - 12px); margin: 0 !important;
+	top: auto !important; right: 0 !important; bottom: var(--toolbar-height, 0px) !important; left: 0 !important;
+	display: flex; flex-direction: column;
+
+	/* невозможно опустить элемент вниз за экран на 100%, fix: opacity и translateY(80%) */
+	transform: translateY(80%);
+
+	transition: opacity 0.3s, transform 0.3s;
+}
+
+/* from top */
+.top-popup-wrapper.p-from-top {
+	--top-popup-footer-offset: 0px;
+
+	top: var(--header-height, 0px) !important;
+}
+.with_dialog .top-popup-wrapper.p-from-top { top: 50px !important; }
+.top-popup-wrapper.p-from-top > .top-popup {
+	border-radius: 0 0 8px 8px; max-height: calc(100% - 24px); top: 0 !important; bottom: auto !important;
+	transform: translateY(calc(-100% - 24px));
+}
+
+/* widget */
+.top-popup_widget:not(.p-from-top) { order: 10; }
+
+/* content */
+ul.top-popup_content {
+	gap: 0;
+}
+ul.top-popup_content li:not(:last-child) { border-bottom: 1px solid var(--top-popup-border-color); }
+
+.top-popup-wrapper.top-style_alt > .top-popup > ul > li { border-bottom: none; }
+
+/* footer */
+.top-popup_footer {
+	flex-direction: column-reverse;
+}
+.top-popup_footer > .top-button {
+	--top-forms-base-height: var(--top-forms-base-height_l);
+
+	width: 100%;
+}
+
+/* listTitle */
+ul.top-popup_content .top-popup_listItem-title {
+	--top-popup-padding-v: 12px;
+}
+
+/* listDelimiter */
+ul.top-popup_content .top-popup_listItem-delimiter { background: var(--color-line-1-opacity); height: 4px; margin: 0; }
+ul.top-popup_content li:first-child > .top-popup_listItem-delimiter { border-top: 1px solid var(--top-popup-border-color); }

package/src/components/popup/popup/style/popup.pc.css

@@ -0,0 +1,26 @@
+.top-popup { min-width: 250px; max-width: calc(100vw - var(--top-popup-left) - 16px); max-height: calc(var(--top-popup-bottom) + var(--top-popup-height)); }
+.top-popup-wrapper.invert-x > .top-popup { max-width: calc(100vw - var(--top-popup-right) - 16px); }
+.top-popup-wrapper.invert-y > .top-popup { max-height: calc(100vh - var(--top-popup-bottom) - 16px); }
+
+/* position */
+.top-popup-wrapper.p1 > .top-popup { max-height: calc(var(--top-popup-top) - var(--header-height, 0px) - 16px); }
+.top-popup-wrapper.p3 > .top-popup { max-height: calc(var(--top-popup-bottom) - 16px); }
+.top-popup-wrapper.p2 > .top-popup { max-width: calc(var(--top-popup-right) - 16px); }
+.top-popup-wrapper.p4 > .top-popup { max-width: calc(var(--top-popup-left) - 16px); }
+
+/* notch */
+.top-popup-wrapper.p1.with_notch > .top-popup,
+.top-popup-wrapper.p3.with_notch > .top-popup { margin-left: -16px !important; }
+.top-popup-wrapper.p1.with_notch > .notch,
+.top-popup-wrapper.p3.with_notch > .notch { margin-left: -8px !important; }
+
+.top-popup-wrapper.p1.with_notch.invert-x,
+.top-popup-wrapper.p3.with_notch.invert-x { margin-left: 3px !important; }
+.top-popup-wrapper.p1.with_notch.invert-x > .notch,
+.top-popup-wrapper.p3.with_notch.invert-x > .notch { margin-left: -9px !important; }
+
+/* listMore */
+ul.top-popup_content li > * > i.top-popup_listMore { visibility: hidden; transition: none; }
+ul.top-popup_content li:hover > * > i.top-popup_listMore,
+ul.top-popup_content li > *.top-active > i.top-popup_listMore,
+ul.top-popup_content li > * > i.top-popup_listMore.top-active { visibility: visible; }

package/src/components/popup/popup/widgetInput.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ModelRef } from 'vue';
+import type { Props } from '@/components/forms/input/input';
+import TopInput from '@/components/forms/input/input.vue';
+
+withDefaults(defineProps<Props>(), {
+	addCleaner: true,
+});
+
+const model: ModelRef<string> = defineModel({
+	default: '',
+});
+</script>
+
+<template>
+	<TopInput
+		:="$props"
+		modificator="popupWidgetInput"
+		v-model="model"
+	/>
+</template>
+
+<style>
+.top-input-popupWidgetInput {
+	--top-loadbar-color: var(--color-line-2);
+
+	width: 100%;
+}
+
+.top-input_input-popupWidgetInput {
+	border: none;
+	background: var(--color-layer-1);
+}
+
+.top-input_input-popupWidgetInput:hover {
+	background: var(--color-layer-2);
+}
+
+.top-input_input-popupWidgetInput:focus {
+	background: var(--color-layer-1);
+	outline: unset;
+}
+</style>

package/src/components/popup/popup.ts

@@ -0,0 +1,17 @@
+import type { ComponentCustomProps } from 'vue';
+
+import Popup from './popup/popup.vue';
+import PopupOpener from './popup/opener.vue';
+import PopupListItem from './popup/listItem.vue';
+import PopupWidgetInput from './popup/widgetInput.vue';
+import PopupAlert from './alert/alert.vue';
+import PopupConfirm from './confirm/confirm.vue';
+import PopupPrompt from './prompt/prompt.vue';
+
+export const TopPopup = Popup as typeof Popup & ComponentCustomProps;
+export const TopPopupOpener = PopupOpener as typeof PopupOpener & ComponentCustomProps;
+export const TopPopupListItem = PopupListItem as typeof PopupListItem & ComponentCustomProps;
+export const TopPopupWidgetInput = PopupWidgetInput as typeof PopupWidgetInput & ComponentCustomProps;
+export const TopPopupAlert = PopupAlert as typeof PopupAlert & ComponentCustomProps;
+export const TopPopupConfirm = PopupConfirm as typeof PopupConfirm & ComponentCustomProps;
+export const TopPopupPrompt = PopupPrompt as typeof PopupPrompt & ComponentCustomProps;

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import OverviewComponent from './stories/overview.vue';
+
+import { computed } from 'vue';
+import Component from './prompt.vue';
+import * as ComponentsConst from './prompt';
+
+import TopButton from '@/components/forms/button/button.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+/**
+ * Выводит 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: 'Prompt',
+		header: 'Ввод текста',
+		default: 'Введите текст:',
+	},
+	render: (args) => ({
+		components: {
+			TopPopupPrompt: Component,
+			TopButton,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TopPopupPrompt
+				:submit-text="args.submitText"
+				:cancel-text="args.cancelText"
+				:footer-support-link="args.footerSupportLink"
+				:default-value="args.defaultValue"
+				@close="console.log('Окно закрыто')"
+				@submit="(value) => console.log('Введен текст: ' + value)"
+			>
+				<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>
+			</TopPopupPrompt>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {},
+}, OverviewComponent);
+
+export default meta;

package/src/components/popup/prompt/prompt.ts

@@ -0,0 +1,26 @@
+import type { Emits as PopupEmits, Props as PopupProps } from '../popup/popup';
+
+// storybook не работает с объединением типов
+export interface Props extends PopupProps {
+	/**
+	 * Текст кнопки подтверждения
+	 */
+	submitText?: string;
+
+	/**
+	 * Текст кнопки отмены
+	 */
+	cancelText?: string;
+
+	/**
+	 * Значение, введенное в поле ввода
+	 */
+	defaultValue?: string;
+}
+
+export type Emits = PopupEmits & {
+	/**
+	 * Будет вызвано при нажатии кнопки подтверждения
+	 */
+	submit: [value: string];
+}

package/src/components/popup/prompt/prompt.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { PopupEvent } from '@/components/popup/popup/popup';
+import type { Emits, Props } from './prompt';
+import TopButton from '@/components/forms/button/button.vue';
+import TopPopup from '@/components/popup/popup/popup.vue';
+import TopPopupWidgetInput from '@/components/popup/popup/widgetInput.vue';
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const reset = () => localValue.value = props.defaultValue ?? '';
+
+const isSubmit = ref(false);
+
+const localValue = ref();
+watch(() => props.defaultValue, () => reset(), { immediate: true });
+
+const onSubmit = () => {
+	isSubmit.value = true;
+};
+
+const onClose = (popupEvent: PopupEvent) => {
+	if (isSubmit.value) {
+		isSubmit.value = false;
+
+		emit('submit', localValue.value);
+
+		reset();
+
+		return;
+	}
+
+	reset();
+
+	emit('close', popupEvent);
+};
+
+const $propsPopup = { ...props, submitText: undefined, cancelText: undefined, defaultValue: undefined };
+delete $propsPopup.submitText;
+delete $propsPopup.cancelText;
+delete $propsPopup.defaultValue;
+</script>
+
+<template>
+	<TopPopup
+		class="top-popupPrompt"
+		:=$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>
+
+			<TopPopupWidgetInput v-model.trim="localValue"/>
+		</template>
+
+		<template #footer>
+			<!-- @slot Футер -->
+			<slot name="footer"></slot>
+
+			<TopButton color="theme">
+				{{ cancelText || $i18n.Common.Cancel }}
+			</TopButton>
+
+			<TopButton @click="onSubmit">
+				{{ submitText || $i18n.Common.OK }}
+			</TopButton>
+		</template>
+	</TopPopup>
+</template>