wave-ui 3.6.2 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.6.2",
+  "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))')
       }
     },