wave-ui 1.51.0 → 1.51.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.51.0",
+  "version": "1.51.1",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

package/src/wave-ui/components/w-overlay.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
-transition(name="fade" appear @after-leave="$emit('closed')")
+transition(name="fade" appear @after-leave="onClosed")
   .w-overlay(
-    v-if="value"
+    v-if="showOverlay"
+    v-show="value"
     :style="(value && styles) || null"
     @keydown.escape.stop="onClick"
     @click="onClick"
@@ -27,7 +28,8 @@ export default {
   emits: ['input', 'update:modelValue', 'click', 'close', 'closed'],
 
   data: () => ({
-    persistentAnimate: false
+    persistentAnimate: false,
+    showOverlay: false
   }),
 
   computed: {
@@ -64,6 +66,25 @@ export default {
       }
 
       this.$emit('click', e)
+    },
+
+    // Wait until the end of the closing transition to unmount the components it contains.
+    // This way, in case of w-select in w-dialog, the w-select will only remove its activator
+    // element from the DOM once the dialog is completely closed.
+    // https://github.com/antoniandre/wave-ui/issues/82
+    onClosed () {
+      this.showOverlay = false
+      this.$emit('closed')
+    }
+  },
+
+  created () {
+    this.showOverlay = this.value
+  },
+
+  watch: {
+    value (bool) {
+      if (bool) this.showOverlay = true
     }
   }
 }

package/src/wave-ui/mixins/detachable.js

@@ -341,10 +341,7 @@ export default {
     if (this.value && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
   },
 
-  // Must be on destroy and not before destroy, so that when used in a dialog, we wait for the end
-  // of the animation before removing the activator element.
-  // https://github.com/antoniandre/wave-ui/issues/82
-  destroy () {
+  beforeDestroy () {
     this.close()
 
     this.removeFromDOM()