@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

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

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

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

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

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

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

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

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