first commit

resources/js/components/AppDialog.vue

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