From 44068e66c36b9ad33af3c9fb6947523030c31526 Mon Sep 17 00:00:00 2001
From: Seth Sharp <58869086+SethSharp@users.noreply.github.com>
Date: Fri, 17 Oct 2025 09:30:03 +1000
Subject: [PATCH 1/2] add prop

---
 app/pages/components/ConfirmDialog.vue            |  2 ++
 src/components/alert-dialog/AlertDialogAction.vue | 10 +++++++---
 src/components/alert-dialog/AlertDialogCancel.vue | 15 ++++++++++++---
 src/components/confirm-dialog/ConfirmDialog.vue   |  4 ++--
 .../confirm-dialog/use-confirm-dialog.ts          |  2 ++
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/pages/components/ConfirmDialog.vue b/app/pages/components/ConfirmDialog.vue
index 18951e8..e660587 100644
--- a/app/pages/components/ConfirmDialog.vue
+++ b/app/pages/components/ConfirmDialog.vue
@@ -37,6 +37,7 @@ 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()
@@ -44,6 +45,7 @@ const customDialog = () => {
     },
     action: {
       label: "Confirm Me!",
+      variant: "destructive",
       handler: () => {
         alert("Wow a custom action!")
         close()
diff --git a/src/components/alert-dialog/AlertDialogAction.vue b/src/components/alert-dialog/AlertDialogAction.vue
index c559d6d..b5aa76b 100644
--- a/src/components/alert-dialog/AlertDialogAction.vue
+++ b/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>
diff --git a/src/components/alert-dialog/AlertDialogCancel.vue b/src/components/alert-dialog/AlertDialogCancel.vue
index 5a131fd..60dcd02 100644
--- a/src/components/alert-dialog/AlertDialogCancel.vue
+++ b/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>
diff --git a/src/components/confirm-dialog/ConfirmDialog.vue b/src/components/confirm-dialog/ConfirmDialog.vue
index a187346..2413fa4 100644
--- a/src/components/confirm-dialog/ConfirmDialog.vue
+++ b/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>
diff --git a/src/components/confirm-dialog/use-confirm-dialog.ts b/src/components/confirm-dialog/use-confirm-dialog.ts
index 526a4fc..fccda75 100644
--- a/src/components/confirm-dialog/use-confirm-dialog.ts
+++ b/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,
     }
   }

From b2cc090441a613ae405a975731eb5548174f31f5 Mon Sep 17 00:00:00 2001
From: Seth Sharp <58869086+SethSharp@users.noreply.github.com>
Date: Fri, 17 Oct 2025 10:14:36 +1000
Subject: [PATCH 2/2] pass variant at the dialog level (remove support for
 cancel button)

---
 app/pages/components/ConfirmDialog.vue        |  3 +--
 .../alert-dialog/AlertDialogCancel.vue        | 15 +++----------
 .../confirm-dialog/ConfirmDialog.vue          |  6 +++---
 .../confirm-dialog/use-confirm-dialog.ts      | 21 +++++++++++--------
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/app/pages/components/ConfirmDialog.vue b/app/pages/components/ConfirmDialog.vue
index e660587..bb1fba5 100644
--- a/app/pages/components/ConfirmDialog.vue
+++ b/app/pages/components/ConfirmDialog.vue
@@ -35,9 +35,9 @@ 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!",
-      variant: "ghost",
       handler: () => {
         alert("Wow a custom cancel!")
         close()
@@ -45,7 +45,6 @@ const customDialog = () => {
     },
     action: {
       label: "Confirm Me!",
-      variant: "destructive",
       handler: () => {
         alert("Wow a custom action!")
         close()
diff --git a/src/components/alert-dialog/AlertDialogCancel.vue b/src/components/alert-dialog/AlertDialogCancel.vue
index 60dcd02..5a131fd 100644
--- a/src/components/alert-dialog/AlertDialogCancel.vue
+++ b/src/components/alert-dialog/AlertDialogCancel.vue
@@ -2,18 +2,9 @@
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
 import { cn } from "@/lib/utils"
-import { type ButtonVariants, buttonVariants } from "@/components/button"
+import { buttonVariants } from "@/components/button"
 
-const props = withDefaults(
-  defineProps<
-    AlertDialogCancelProps & {
-    class?: HTMLAttributes["class"]
-    variant?: ButtonVariants["variant"]
-  }
-  >(), {
-    variant: "outline"
-  }
-)
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -25,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <AlertDialogCancel
     v-bind="delegatedProps"
-    :class="cn(buttonVariants({ variant }), 'mt-2 sm:mt-0', props.class)"
+    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
   >
     <slot />
   </AlertDialogCancel>
diff --git a/src/components/confirm-dialog/ConfirmDialog.vue b/src/components/confirm-dialog/ConfirmDialog.vue
index 2413fa4..249ba28 100644
--- a/src/components/confirm-dialog/ConfirmDialog.vue
+++ b/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>
@@ -28,11 +28,11 @@ const { isOpen, close, cancelButton, actionButton, title, description } = useCon
       </AlertDialogHeader>
 
       <AlertDialogFooter>
-        <AlertDialogCancel :variant="cancelButton?.variant" @click="cancelButton.handler">
+        <AlertDialogCancel @click="cancelButton.handler">
           {{ cancelButton.label ?? "Cancel" }}
         </AlertDialogCancel>
 
-        <AlertDialogAction :variant="actionButton?.variant" @click="actionButton.handler">
+        <AlertDialogAction :variant @click="actionButton.handler">
           {{ actionButton.label ?? "Confirm" }}
         </AlertDialogAction>
       </AlertDialogFooter>
diff --git a/src/components/confirm-dialog/use-confirm-dialog.ts b/src/components/confirm-dialog/use-confirm-dialog.ts
index fccda75..21e9b16 100644
--- a/src/components/confirm-dialog/use-confirm-dialog.ts
+++ b/src/components/confirm-dialog/use-confirm-dialog.ts
@@ -1,18 +1,19 @@
 import { ref } from "vue"
+import type { ButtonVariants } from "@/components/button"
 
 type ActionHandler = () => void
 
 type ActionObject = {
   label: string | undefined
-  variant?: string
   handler: ActionHandler
 }
 
 type ActionType = ActionObject | ActionHandler | string | undefined
 
-type AlertType = {
+type ConfirmDialogType = {
   title: string
   description: string
+  variant?: ButtonVariants["variant"],
   action: ActionType
   cancelAction?: ActionType
 }
@@ -20,6 +21,7 @@ type AlertType = {
 const isOpen = ref(false)
 const title = ref("")
 const description = ref("")
+const variant = ref<ButtonVariants['variant'] | null>(null)
 const cancelButton = ref<ActionObject>({
   label: undefined,
   handler: () => {},
@@ -29,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()
 }
@@ -57,7 +60,6 @@ const setAction = (config: ActionType): ActionObject => {
   if (typeof config === "object" && config !== undefined) {
     return {
       label: config.label ?? undefined,
-      variant: config.variant ?? undefined,
       handler: config.handler ?? close,
     }
   }
@@ -78,9 +80,10 @@ const open = () => {
 
 function useConfirmDialog() {
   return {
-    confirmDialog: (config: AlertType) => confirmDialog(config),
+    confirmDialog: (confirmDialogConfig: ConfirmDialogType) => confirmDialog(confirmDialogConfig),
     title,
     description,
+    variant,
     isOpen,
     close,
     cancelButton,