replace ElMessageBox(alert, confirm) with alert dialog

src/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,17 @@
+<script setup>
+    import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+    const props = defineProps({
+        open: { type: Boolean, required: false },
+        defaultOpen: { type: Boolean, required: false }
+    });
+    const emits = defineEmits(['update:open']);
+
+    const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </AlertDialogRoot>
+</template>

src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,20 @@
+<script setup>
+    import { AlertDialogAction } from 'reka-ui';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+        <slot />
+    </AlertDialogAction>
+</template>

src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { AlertDialogCancel } from 'reka-ui';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <AlertDialogCancel
+        v-bind="delegatedProps"
+        :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+        <slot />
+    </AlertDialogCancel>
+</template>

src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,48 @@
+<script setup>
+    import { AlertDialogContent, AlertDialogOverlay, AlertDialogPortal, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    defineOptions({
+        inheritAttrs: false
+    });
+
+    const props = defineProps({
+        forceMount: { type: Boolean, required: false },
+        disableOutsidePointerEvents: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits([
+        'escapeKeyDown',
+        'pointerDownOutside',
+        'focusOutside',
+        'interactOutside',
+        'openAutoFocus',
+        'closeAutoFocus'
+    ]);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <AlertDialogPortal>
+        <AlertDialogOverlay
+            data-slot="alert-dialog-overlay"
+            class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80" />
+        <AlertDialogContent
+            data-slot="alert-dialog-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    props.class
+                )
+            ">
+            <slot />
+        </AlertDialogContent>
+    </AlertDialogPortal>
+</template>

src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { AlertDialogDescription } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <AlertDialogDescription
+        data-slot="alert-dialog-description"
+        v-bind="delegatedProps"
+        :class="cn('text-muted-foreground text-sm', props.class)">
+        <slot />
+    </AlertDialogDescription>
+</template>

src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,15 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div
+        data-slot="alert-dialog-footer"
+        :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,13 @@
+<script setup>
+    import { cn } from '@/lib/utils';
+
+    const props = defineProps({
+        class: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

src/components/ui/alert-dialog/AlertDialogModal.vue

@@ -0,0 +1,67 @@
+<script setup>
+    import {
+        AlertDialog,
+        AlertDialogAction,
+        AlertDialogCancel,
+        AlertDialogContent,
+        AlertDialogDescription,
+        AlertDialogFooter,
+        AlertDialogHeader,
+        AlertDialogTitle
+    } from '@/components/ui/alert-dialog';
+    import { storeToRefs } from 'pinia';
+    import { useModalStore } from '@/stores';
+
+    const modalStore = useModalStore();
+
+    const { alertOpen, alertMode, alertTitle, alertDescription, alertOkText, alertCancelText, alertDismissible } =
+        storeToRefs(modalStore);
+
+    function onEscapeKeyDown(event) {
+        if (!alertDismissible.value) {
+            event.preventDefault();
+            return;
+        }
+        modalStore.handleDismiss();
+    }
+
+    function onPointerDownOutside(event) {
+        if (!alertDismissible.value) {
+            event.preventDefault();
+            return;
+        }
+        modalStore.handleDismiss();
+    }
+
+    function onInteractOutside(event) {
+        if (!alertDismissible.value) {
+            event.preventDefault();
+            return;
+        }
+        modalStore.handleDismiss();
+    }
+</script>
+
+<template>
+    <AlertDialog :open="alertOpen" @update:open="modalStore.setAlertOpen">
+        <AlertDialogContent
+            @escapeKeyDown="onEscapeKeyDown"
+            @pointerDownOutside="onPointerDownOutside"
+            @interactOutside="onInteractOutside">
+            <AlertDialogHeader>
+                <AlertDialogTitle>{{ alertTitle }}</AlertDialogTitle>
+                <AlertDialogDescription>{{ alertDescription }}</AlertDialogDescription>
+            </AlertDialogHeader>
+
+            <AlertDialogFooter>
+                <AlertDialogCancel v-if="alertMode === 'confirm'" @click="modalStore.handleCancel">
+                    {{ alertCancelText }}
+                </AlertDialogCancel>
+
+                <AlertDialogAction @click="modalStore.handleOk">
+                    {{ alertOkText }}
+                </AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>

src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,22 @@
+<script setup>
+    import { AlertDialogTitle } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <AlertDialogTitle
+        data-slot="alert-dialog-title"
+        v-bind="delegatedProps"
+        :class="cn('text-lg font-semibold', props.class)">
+        <slot />
+    </AlertDialogTitle>
+</template>

src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,14 @@
+<script setup>
+    import { AlertDialogTrigger } from 'reka-ui';
+
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false }
+    });
+</script>
+
+<template>
+    <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+        <slot />
+    </AlertDialogTrigger>
+</template>

src/components/ui/alert-dialog/index.js

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';