@wishbone-media/spark 0.51.0 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/components/SparkModalContainer.vue

@@ -1,6 +1,8 @@
 <template>
   <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
-    <Dialog class="relative z-1000" @close="sparkModalService.hide">
+    <!-- Headless UI emits close with a payload (false); call hide() without it
+         so a backdrop/ESC dismiss resolves the show() promise with null -->
+    <Dialog class="relative z-1000" @close="() => sparkModalService.hide()">
       <TransitionChild
         as="template"
         enter="ease-out duration-300"

package/src/composables/sparkModalService.js

@@ -9,18 +9,40 @@ class SparkModalService {
       props: {},
       eventHandlers: {},
     })
+    this._resolveShow = null
   }
 
+  /**
+   * Show a modal with a custom component.
+   *
+   * @param {Object} component - Vue component to render inside the modal
+   * @param {Object} [props] - Props passed to the component
+   * @param {Object} [eventHandlers] - Event handlers bound to the component
+   * @returns {Promise<any>} - Resolves when the modal closes: with the value
+   *   passed to hide(result), or null on a plain hide() / backdrop / ESC dismiss
+   */
   show = (component, props = {}, eventHandlers = {}) => {
+    this._resolveShow?.(null) // a new modal supersedes a still-pending one
     this.state.content = markRaw(component)
     this.state.props = props
     this.state.eventHandlers = eventHandlers
     this.state.isVisible = true
+    return new Promise((resolve) => {
+      this._resolveShow = resolve
+    })
   }
 
-  hide = () => {
+  /**
+   * Close the current modal, resolving the pending show() promise.
+   *
+   * @param {any} [result=null] - Value the show() promise resolves with
+   */
+  hide = (result = null) => {
     this.state.isVisible = false
     this.state.eventHandlers = {}
+    const resolve = this._resolveShow
+    this._resolveShow = null
+    resolve?.(result)
   }
 
   /**
@@ -33,42 +55,37 @@ class SparkModalService {
    * @param {string} [options.confirmText='Confirm'] - Confirm button text
    * @param {string} [options.cancelText='Cancel'] - Cancel button text
    * @param {string} [options.confirmVariant='primary'] - Confirm button variant
-   * @returns {Promise<boolean>} - Resolves to true if confirmed, false if cancelled
+   * @returns {Promise<boolean>} - Resolves to true if confirmed, false if
+   *   cancelled or dismissed (backdrop / ESC)
    */
-  confirm = (options = {}) => {
-    return new Promise((resolve) => {
-      const {
-        title = 'Confirm',
-        message = 'Are you sure?',
-        type = 'warning',
-        confirmText = 'Confirm',
-        cancelText = 'Cancel',
-        confirmVariant = 'primary',
-      } = options
+  confirm = async (options = {}) => {
+    const {
+      title = 'Confirm',
+      message = 'Are you sure?',
+      type = 'warning',
+      confirmText = 'Confirm',
+      cancelText = 'Cancel',
+      confirmVariant = 'primary',
+    } = options
 
-      this.show(
-        SparkModalDialog,
-        {
-          title,
-          message,
-          type,
-          buttons: [
-            { text: confirmText, variant: confirmVariant, event: 'confirm' },
-            { text: cancelText, variant: 'secondary', event: 'cancel' },
-          ],
-        },
-        {
-          confirm: () => {
-            this.hide()
-            resolve(true)
-          },
-          cancel: () => {
-            this.hide()
-            resolve(false)
-          },
-        },
-      )
-    })
+    const result = await this.show(
+      SparkModalDialog,
+      {
+        title,
+        message,
+        type,
+        buttons: [
+          { text: confirmText, variant: confirmVariant, event: 'confirm' },
+          { text: cancelText, variant: 'secondary', event: 'cancel' },
+        ],
+      },
+      {
+        confirm: () => this.hide(true),
+        cancel: () => this.hide(false),
+      },
+    )
+
+    return Boolean(result)
   }
 }