Merge pull request #217 from frappe/dialog-action-context

fix: dialog action context object

Author: netchampfaris

src/components/Dialog.story.vue

@@ -5,6 +5,12 @@ import { Button } from './Button'
 
 const dialog1 = ref(false)
 const dialog2 = ref(false)
+
+const createPromise = () => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 2000)
+  })
+}
 </script>
 <template>
   <Story :layout="{ width: 500, type: 'grid' }">
@@ -15,7 +21,15 @@ const dialog2 = ref(false)
           title: 'Confirm',
           message: 'Are you sure you want to confirm this action?',
           size: 'xl',
-          actions: [{ label: 'Confirm', variant: 'solid', onClick: () => {} }],
+          actions: [
+            {
+              label: 'Confirm',
+              variant: 'solid',
+              onClick: () => {
+                return createPromise()
+              },
+            },
+          ],
         }"
         v-model="dialog1"
       />

src/components/Dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <TransitionRoot
     as="template"
-    :show="open"
+    :show="isOpen"
     @after-leave="$emit('after-leave')"
   >
     <HDialog
@@ -116,13 +116,13 @@
               </slot>
               <div
                 class="px-4 pb-7 pt-4 sm:px-6"
-                v-if="dialogActions.length || $slots.actions"
+                v-if="actions.length || $slots.actions"
               >
                 <slot name="actions" v-bind="{ close }">
                   <div class="space-y-2">
                     <Button
                       class="w-full"
-                      v-for="action in dialogActions"
+                      v-for="action in actions"
                       :key="action.label"
                       v-bind="action"
                     >
@@ -147,7 +147,7 @@ import {
   TransitionChild,
   TransitionRoot,
 } from '@headlessui/vue'
-import { computed, ref, watch } from 'vue'
+import { computed, reactive } from 'vue'
 import { Button, ButtonProps } from './Button'
 import FeatherIcon from './FeatherIcon.vue'
 
@@ -178,8 +178,11 @@ type DialogOptions = {
   position?: 'top' | 'center'
 }
 
+type DialogActionContext = {
+  close: () => void
+}
 type DialogAction = ButtonProps & {
-  onClick?: (close: () => void) => Promise<void> | void
+  onClick?: (context: DialogActionContext) => void | Promise<void>
 }
 
 interface DialogProps {
@@ -199,37 +202,33 @@ const emit = defineEmits<{
   (event: 'after-leave'): void
 }>()
 
-const dialogActions = ref<Array<DialogAction>>([])
-watch(
-  () => props.options.actions,
-  (actions) => {
-    if (!actions?.length) return
+const actions = computed(() => {
+  let actions = props.options.actions
+  if (!actions?.length) return []
 
-    dialogActions.value = actions.map((action) => {
-      let loading = ref(false)
-      return {
-        ...action,
-        loading,
-        onClick: !action.onClick
-          ? close
-          : async () => {
-              loading.value = true
-              try {
-                if (action.onClick) {
-                  // pass close function to action
-                  await action.onClick(close)
-                }
-              } finally {
-                loading.value = false
+  return actions.map((action) => {
+    let _action = reactive({
+      ...action,
+      loading: false,
+      onClick: !action.onClick
+        ? close
+        : async () => {
+            _action.loading = true
+            try {
+              if (action.onClick) {
+                let context: DialogActionContext = { close }
+                await action.onClick(context)
               }
-            },
-      }
+            } finally {
+              _action.loading = false
+            }
+          },
     })
-  },
-  { immediate: true },
-)
+    return _action
+  })
+})
 
-const open = computed({
+const isOpen = computed({
   get() {
     return props.modelValue
   },
@@ -242,7 +241,7 @@ const open = computed({
 })
 
 function close() {
-  open.value = false
+  isOpen.value = false
 }
 
 const icon = computed(() => {