87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { NButton, NFlex, NModal, NSpace, NSpin, NText } from 'naive-ui';
|
|
import type { AppDialogButtonProps } from '../composables/useAppDialog';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
show: boolean;
|
|
loading?: boolean;
|
|
title?: string;
|
|
content?: string;
|
|
positiveText?: string;
|
|
negativeText?: string;
|
|
maskClosable?: boolean;
|
|
positiveProps?: AppDialogButtonProps;
|
|
negativeProps?: AppDialogButtonProps;
|
|
}>(),
|
|
{
|
|
loading: false,
|
|
positiveText: 'Подтвердить',
|
|
negativeText: 'Отмена',
|
|
maskClosable: false,
|
|
positiveProps: () => ({ type: 'error', secondary: true }),
|
|
negativeProps: () => ({ type: 'primary', secondary: true }),
|
|
},
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
'update:show': [value: boolean];
|
|
confirm: [];
|
|
cancel: [];
|
|
'after-leave': [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<NModal
|
|
:show="show"
|
|
:mask-closable="maskClosable"
|
|
preset="card"
|
|
class="relative max-w-sm overflow-clip"
|
|
:title="title"
|
|
@update:show="(val) => emit('update:show', val)"
|
|
@after-leave="emit('after-leave')"
|
|
>
|
|
<NFlex vertical size="large">
|
|
<NSpace vertical :size="0">
|
|
<NText v-if="content" tag="p">{{ content }}</NText>
|
|
</NSpace>
|
|
|
|
<NSpace vertical size="small">
|
|
<NButton
|
|
v-if="negativeText"
|
|
block
|
|
v-bind="negativeProps"
|
|
@click="emit('cancel')"
|
|
>
|
|
{{ negativeText }}
|
|
</NButton>
|
|
<NButton
|
|
v-if="positiveText"
|
|
block
|
|
v-bind="positiveProps"
|
|
@click="emit('confirm')"
|
|
>
|
|
{{ positiveText }}
|
|
</NButton>
|
|
</NSpace>
|
|
</NFlex>
|
|
|
|
<div
|
|
v-if="loading"
|
|
class="absolute inset-0"
|
|
style="
|
|
background-color: color-mix(
|
|
in srgb,
|
|
var(--n-color-embedded-modal),
|
|
transparent 50%
|
|
);
|
|
"
|
|
>
|
|
<div class="flex h-full flex-col items-center justify-center">
|
|
<NSpin description="Загрузка" />
|
|
</div>
|
|
</div>
|
|
</NModal>
|
|
</template>
|