wave-ui 3.6.0 → 3.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

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

@@ -347,11 +347,11 @@ export default {
       // Reset the selections when single selection allowed for w-select.
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
-      this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => {
-          const foundItem = this.listItems.find(item => item._value === val)
-          if (foundItem) foundItem._selected = true
-        })
+      const selectedItems = this.checkSelection(selection) // Create an array with the selected values.
+      // Update which items are selected or not.
+      this.listItems.forEach(item => {
+        item._selected = selectedItems.find(val => item._value === val) !== undefined
+      })
     }
   },
 

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

@@ -248,6 +248,10 @@ export default {
      *                        even while hovering the menu.
      */
     async close (force = false) {
+      // The user may open and close the detachable so fast (like when toggling on hover) that it
+      // should not show up at all. This cancels the opening timer (if there is a set delay prop).
+      this.openTimeout = clearTimeout(this.openTimeout)
+
       // Might be already closed.
       // E.g. showOnHover & hideOnMenuClick: on click, force hide then mouseleave is also firing.
       if (!this.detachableVisible) return

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

@@ -16,7 +16,7 @@ component(
 
   w-menu(
     v-model="showMenu"
-    @close="!$event && closeMenu()"
+    @close="closeMenu"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
     :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
@@ -27,6 +27,7 @@ component(
     template(#activator="{ on }")
       //- Input wrapper.
       .w-select__selection-wrap(
+        v-on="on"
         @click="!isDisabled && !isReadonly && onInputFieldClick()"
         role="button"
         aria-haspopup="listbox"

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

@@ -22,7 +22,8 @@ export default {
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
     // Optionally designate an external activator.
-    activator: { type: [String, Object] } // The activator can be a DOM string selector, a ref or a DOM node.
+    // The activator can be a DOM string selector, a ref or a DOM node.
+    activator: { type: [String, Object] }
   },
 
   inject: {
@@ -35,7 +36,11 @@ export default {
     // as is in an array so we can delete them on destroy.
     // This only applies to the activatorEventHandlers, the other events listeners can be removed
     // normally.
-    docEventListenersHandlers: []
+    docEventListenersHandlers: [],
+    // The user may open and close the detachable so fast (like when toggling on hover) that it
+    // should not show up at all. Keep the ability to cancel the opening timer (if there is a set
+    // delay prop).
+    openTimeout: null
   }),
 
   computed: {
@@ -111,6 +116,13 @@ export default {
         (['left', 'right'].includes(this.position) && this.alignBottom && 'bottom') ||
         ''
       )
+    },
+
+    shouldShowOnClick () {
+      // For props simplicity, the w-tooltip component has the `showOnHover` prop,
+      // whereas the w-menu has `showOnClick`.
+      return (this.$options.props.showOnHover && !this.showOnHover) ||
+        (this.$options.props.showOnClick && this.showOnClick)
     }
   },
 
@@ -119,7 +131,10 @@ export default {
     async open (e) {
       // A tiny delay may help positioning the detachable correctly in case of multiple activators
       // with different menu contents.
-      if (this.delay) await new Promise(resolve => setTimeout(resolve, this.delay))
+      if (this.delay) await new Promise(resolve => (this.openTimeout = setTimeout(resolve, this.delay)))
+
+      // Cancel opening if the timeout has been cancelled by blur event (when going fast).
+      if (this.delay && !this.openTimeout) return
 
       this.detachableVisible = true
 
@@ -339,7 +354,7 @@ export default {
     if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
 
     if (this.modelValue && this.activator) {
-      this.toggle({ type: this.showOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+      this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
     }
     else if (this.modelValue) this.open({ target: this.activatorEl })
   },
@@ -360,7 +375,10 @@ export default {
 
   watch: {
     modelValue (bool) {
-      if (!!bool !== this.detachableVisible) this.toggle({ type: this.showOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+      if (!!bool !== this.detachableVisible) {
+        if (bool) this.open({ target: this.activatorEl })
+        else this.close()
+      }
     },
     appendTo () {
       this.removeFromDOM()

package/src/wave-ui/utils/dynamic-css.js

@@ -159,6 +159,7 @@ const genBreakpointLayoutClasses = breakpoints => {
     'text-nowrap{white-space:nowrap}',
     'row{flex-direction:row}',
     'column{flex-direction:column}',
+    'column-reverse{flex-direction:column-reverse}',
     'grow{flex-grow:1;flex-basis:auto}',
     'no-grow{flex-grow:0}',
     'shrink{flex-shrink:1;margin-left:auto;margin-right:auto}',