Add variant prop to confirm dialogue

app/pages/components/ConfirmDialog.vue

@@ -35,6 +35,7 @@ const customDialog = () => {
     title: "Custom Dialog",
     description:
       "You can also provide a full object with label and handler to fully customise the confirm dialog.",
+    variant: "destructive",
     cancelAction: {
       label: "Cancel Me!",
       handler: () => {

src/components/alert-dialog/AlertDialogAction.vue

@@ -2,9 +2,13 @@
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue"
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/button"
+import { buttonVariants, type ButtonVariants } from "@/components/button"
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<
+  AlertDialogActionProps & {
+  class?: HTMLAttributes["class"]
+  variant?: ButtonVariants["variant"]
+}>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -14,7 +18,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants({ variant }), props.class)">
     <slot />
   </AlertDialogAction>
 </template>

src/components/confirm-dialog/ConfirmDialog.vue

@@ -11,7 +11,7 @@ import {
   AlertDialogTitle,
 } from "@/components/alert-dialog"
 
-const { isOpen, close, cancelButton, actionButton, title, description } = useConfirmDialog()
+const { isOpen, close, cancelButton, actionButton, title, description, variant } = useConfirmDialog()
 </script>
 
 <template>
@@ -32,7 +32,7 @@ const { isOpen, close, cancelButton, actionButton, title, description } = useCon
           {{ cancelButton.label ?? "Cancel" }}
         </AlertDialogCancel>
 
-        <AlertDialogAction @click="actionButton.handler">
+        <AlertDialogAction :variant @click="actionButton.handler">
           {{ actionButton.label ?? "Confirm" }}
         </AlertDialogAction>
       </AlertDialogFooter>

src/components/confirm-dialog/use-confirm-dialog.ts

@@ -1,4 +1,5 @@
 import { ref } from "vue"
+import type { ButtonVariants } from "@/components/button"
 
 type ActionHandler = () => void
 
@@ -9,16 +10,18 @@ type ActionObject = {
 
 type ActionType = ActionObject | ActionHandler | string | undefined
 
-type AlertType = {
+type ConfirmDialogType = {
   title: string
   description: string
+  variant?: ButtonVariants["variant"],
   action: ActionType
   cancelAction?: ActionType
 }
 
 const isOpen = ref(false)
 const title = ref("")
 const description = ref("")
+const variant = ref<ButtonVariants['variant'] | null>(null)
 const cancelButton = ref<ActionObject>({
   label: undefined,
   handler: () => {},
@@ -28,12 +31,13 @@ const actionButton = ref<ActionObject>({
   handler: () => {},
 })
 
-const confirmDialog = (alertConfig: AlertType) => {
-  title.value = alertConfig.title
-  description.value = alertConfig.description
+const confirmDialog = (confirmDialogConfig: ConfirmDialogType) => {
+  title.value = confirmDialogConfig.title
+  description.value = confirmDialogConfig.description
+  variant.value = confirmDialogConfig.variant
 
-  cancelButton.value = setAction(alertConfig.cancelAction)
-  actionButton.value = setAction(alertConfig.action)
+  cancelButton.value = setAction(confirmDialogConfig.cancelAction)
+  actionButton.value = setAction(confirmDialogConfig.action)
 
   open()
 }
@@ -76,9 +80,10 @@ const open = () => {
 
 function useConfirmDialog() {
   return {
-    confirmDialog: (config: AlertType) => confirmDialog(config),
+    confirmDialog: (confirmDialogConfig: ConfirmDialogType) => confirmDialog(confirmDialogConfig),
     title,
     description,
+    variant,
     isOpen,
     close,
     cancelButton,