87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { SHEET_CONTENT_CLASS, SHEET_FOOTER_CLASS } from '@/components/sheetClasses'
|
|
import LocaleAlert from '@/components/localization/LocaleAlert.vue'
|
|
import LocaleButton from '@/components/localization/LocaleButton.vue'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title: string
|
|
description?: string
|
|
confirmLabel: string
|
|
cancelLabel?: string
|
|
tone?: 'primary' | 'danger'
|
|
pending?: boolean
|
|
confirmDisabled?: boolean
|
|
error?: { title: string; description?: string } | null
|
|
}>(),
|
|
{
|
|
description: undefined,
|
|
cancelLabel: undefined,
|
|
tone: 'primary',
|
|
pending: false,
|
|
confirmDisabled: false,
|
|
error: null,
|
|
},
|
|
)
|
|
|
|
const emit = defineEmits<{ close: []; confirm: [] }>()
|
|
|
|
const CLOSE_BUTTON = {
|
|
color: 'neutral',
|
|
variant: 'ghost',
|
|
class: 'size-11 justify-center p-0 text-muted md:size-7',
|
|
} as const
|
|
</script>
|
|
|
|
<template>
|
|
<UModal
|
|
:open="true"
|
|
:title="title"
|
|
:description="description"
|
|
:dismissible="!pending"
|
|
:close="pending ? false : CLOSE_BUTTON"
|
|
:ui="{
|
|
content: `${SHEET_CONTENT_CLASS} sm:top-25 sm:max-w-115`,
|
|
close: 'end-6 top-8 md:top-5',
|
|
header: 'min-h-0 items-start px-6 pt-5 pb-0 sm:px-6',
|
|
title: 'pe-14 text-lg/6 font-semibold md:pe-10',
|
|
description: 'mt-1 pe-14 text-sm text-pretty text-toned md:pe-10',
|
|
body: 'px-6 pt-4 pb-0 sm:px-6 sm:pt-4 sm:pb-0',
|
|
footer: SHEET_FOOTER_CLASS,
|
|
}"
|
|
@update:open="(value: boolean) => !value && emit('close')"
|
|
>
|
|
<template #body>
|
|
<div class="flex flex-col gap-3.5">
|
|
<LocaleAlert
|
|
v-if="error"
|
|
tone="error"
|
|
icon="i-lucide-circle-x"
|
|
:title="error.title"
|
|
:description="error.description"
|
|
/>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<div class="flex w-full flex-col-reverse gap-2 md:flex-row md:justify-end">
|
|
<LocaleButton :disabled="pending" block class="md:w-auto" @click="emit('close')">
|
|
{{ cancelLabel ?? t('Cancel') }}
|
|
</LocaleButton>
|
|
<LocaleButton
|
|
:kind="tone === 'danger' ? 'danger' : 'primary'"
|
|
:disabled="confirmDisabled || pending"
|
|
:loading="pending"
|
|
block
|
|
class="md:w-auto"
|
|
@click="emit('confirm')"
|
|
>
|
|
{{ confirmLabel }}
|
|
</LocaleButton>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</template>
|