Add variant prop to confirm dialogue

app/pages/components/ConfirmDialog.vue

@@ -37,13 +37,15 @@ const customDialog = () => {
       "You can also provide a full object with label and handler to fully customise the confirm dialog.",
     cancelAction: {
       label: "Cancel Me!",
+      variant: "ghost",
       handler: () => {
         alert("Wow a custom cancel!")
         close()
       },
     },
     action: {
       label: "Confirm Me!",
+      variant: "destructive",
       handler: () => {
         alert("Wow a custom action!")
         close()

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/alert-dialog/AlertDialogCancel.vue

@@ -2,9 +2,18 @@
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
 import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/button"
+import { type ButtonVariants, buttonVariants } from "@/components/button"
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+const props = withDefaults(
+  defineProps<
+    AlertDialogCancelProps & {
+    class?: HTMLAttributes["class"]
+    variant?: ButtonVariants["variant"]
+  }
+  >(), {
+    variant: "outline"
+  }
+)
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -16,7 +25,7 @@ const delegatedProps = computed(() => {
 <template>
   <AlertDialogCancel
     v-bind="delegatedProps"
-    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
+    :class="cn(buttonVariants({ variant }), 'mt-2 sm:mt-0', props.class)"
   >
     <slot />
   </AlertDialogCancel>

src/components/confirm-dialog/ConfirmDialog.vue

@@ -28,11 +28,11 @@ const { isOpen, close, cancelButton, actionButton, title, description } = useCon
       </AlertDialogHeader>
 
       <AlertDialogFooter>
-        <AlertDialogCancel @click="cancelButton.handler">
+        <AlertDialogCancel :variant="cancelButton?.variant" @click="cancelButton.handler">
           {{ cancelButton.label ?? "Cancel" }}
         </AlertDialogCancel>
 
-        <AlertDialogAction @click="actionButton.handler">
+        <AlertDialogAction :variant="actionButton?.variant" @click="actionButton.handler">
           {{ actionButton.label ?? "Confirm" }}
         </AlertDialogAction>
       </AlertDialogFooter>

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

@@ -4,6 +4,7 @@ type ActionHandler = () => void
 
 type ActionObject = {
   label: string | undefined
+  variant?: string
   handler: ActionHandler
 }
 
@@ -56,6 +57,7 @@ const setAction = (config: ActionType): ActionObject => {
   if (typeof config === "object" && config !== undefined) {
     return {
       label: config.label ?? undefined,
+      variant: config.variant ?? undefined,
       handler: config.handler ?? close,
     }
   }