wave-ui 3.6.1 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "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-checkbox.vue

@@ -112,8 +112,9 @@ export default {
   methods: {
     onInput () {
       this.isChecked = !this.isChecked
-      this.$emit('update:modelValue', this.isChecked)
-      this.$emit('input', this.isChecked)
+      const returnValue = this.isChecked && this.returnValue !== undefined ? this.returnValue : this.isChecked
+      this.$emit('update:modelValue', returnValue)
+      this.$emit('input', returnValue)
 
       if (!this.noRipple) {
         if (this.isChecked) {

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

@@ -40,6 +40,9 @@ export default {
   props: {
     items: { type: Array, required: true }, // All the possible options.
     modelValue: { type: Array }, // v-model on selected option.
+    // If true, the returnValue set on each w-checkboxes item will be returned once the checkbox is
+    // checked. If false & by default, the return value of the w-checkboxes is an array of booleans.
+    returnValues: { type: Boolean },
     labelOnLeft: { type: Boolean },
     itemLabelKey: { type: String, default: 'label' },
     itemValueKey: { type: String, default: 'value' },
@@ -94,7 +97,7 @@ export default {
 
     toggleCheck (checkbox, isChecked) {
       checkbox._isChecked = isChecked
-      const selection = this.checkboxItems.filter(item => item._isChecked).map(item => item.value)
+      const selection = this.checkboxItems.filter(item => item._isChecked).map(item => this.returnValues ? item.returnValue : item.value)
 
       this.$emit('update:modelValue', selection)
       this.$emit('input', selection)

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

@@ -69,6 +69,7 @@ export default {
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean }, // The small triangle pointing toward the activator.
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
+    maxWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
@@ -124,6 +125,11 @@ export default {
       else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
     },
 
+    menuMaxWidth () {
+      if (this.maxWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
+      else return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
+    },
+
     menuClasses () {
       return objectifyClasses(this.menuClass)
     },
@@ -168,6 +174,7 @@ export default {
         top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
         left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
         minWidth: (this.minWidth && this.menuMinWidth) || null,
+        maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
         '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))')
       }
     },
@@ -248,6 +255,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}',