wave-ui 3.4.7 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.4.7",
+  "version": "3.5.1",
   "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-button/index.vue

@@ -6,6 +6,8 @@ component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps || {}")
   div(v-html="tooltip")
 button-partial(v-else v-bind="buttonProps")
   slot
+  template(#loading)
+    slot(name="loading")
 </template>
 
 <script>

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

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister && !wCheckboxes ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: isChecked, disabled: isDisabled }"
+  v-bind="formRegister && { validators, inputValue: isChecked, disabled: isDisabled, readonly: isReadonly }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', isChecked = null);$emit('input', null)"
   :class="classes")
@@ -12,12 +12,12 @@ component(
     type="checkbox"
     :name="inputName"
     :checked="isChecked || null"
-    :disabled="isDisabled || null"
+    :disabled="isDisabled || isReadonly || null"
     :required="required || null"
     :tabindex="tabindex || null"
     @focus="$emit('focus', $event)"
     @blur="$emit('blur', $event)"
-    @change="onInput() /* Edge doesn't fire input on checkbox/radio/select change */"
+    @change="onInput() /* Edge doesn't emit an `input` event on checkbox/radio/select change */"
     @keypress.enter="onInput"
     :aria-checked="isChecked || 'false'"
     role="checkbox")
@@ -98,6 +98,7 @@ export default {
       return {
         [`w-checkbox w-checkbox--${this.isChecked ? 'checked' : 'unchecked'}`]: true,
         'w-checkbox--disabled': this.isDisabled,
+        'w-checkbox--readonly': this.isReadonly,
         'w-checkbox--indeterminate': this.indeterminate,
         'w-checkbox--ripple': this.ripple.start,
         'w-checkbox--rippled': this.ripple.end,
@@ -149,13 +150,10 @@ $inactive-color: #666;
   vertical-align: middle;
   // Contain the hidden radio button, so browser doesn't pan to it when outside of the screen.
   position: relative;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
   @include themeable;
 
-  &--disabled {cursor: not-allowed;}
-
   // The hidden real checkbox.
   input[type="checkbox"] {
     position: absolute;
@@ -173,8 +171,10 @@ $inactive-color: #666;
     flex: 0 0 auto; // Prevent stretching width or height.
     align-items: center;
     justify-content: center;
-    cursor: inherit;
+    cursor: pointer;
     z-index: 0;
+
+    .w-checkbox--disabled & {cursor: not-allowed;}
   }
 
   // The checkmark - visible when checked.
@@ -202,6 +202,7 @@ $inactive-color: #666;
     .w-checkbox--indeterminate & {opacity: 0;}
     .w-checkbox--disabled & {stroke: rgba(var(--w-contrast-color-rgb), 0.4);}
   }
+
   &__input:after {
     content: '';
     position: absolute;
@@ -252,7 +253,7 @@ $inactive-color: #666;
   }
 
   :focus ~ &__input:before,
-  :active ~ &__input:before {
+  &:not(.w-checkbox--disabled) :active ~ &__input:before {
     transform: scale(1.8);
     opacity: 0.2;
   }
@@ -268,10 +269,13 @@ $inactive-color: #666;
   &__label {
     display: flex;
     align-items: center;
-    cursor: inherit;
+    cursor: pointer;
     user-select: none;
 
-    .w-checkbox--disabled & {opacity: 0.7;}
+    .w-checkbox--disabled & {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
   }
 }
 

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

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister && !wRadios ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue, disabled: isDisabled }"
+  v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', inputValue = null);$emit('input', null)"
   :class="classes")
@@ -12,11 +12,11 @@ component(
     type="radio"
     :name="inputName"
     :checked="inputValue || null"
-    :disabled="isDisabled || null"
+    :disabled="isDisabled || isReadonly || null"
     :required="required || null"
     :tabindex="tabindex || null"
     @focus="$emit('focus', $event)"
-    @change="onInput($event) /* Edge doesn't fire input on checkbox/radio/select change */"
+    @change="onInput($event) /* Edge doesn't emit an `input` event on checkbox/radio/select change */"
     :aria-checked="inputValue || 'false'"
     role="radio")
   template(v-if="hasLabel && labelOnLeft")
@@ -89,6 +89,7 @@ export default {
       return {
         [`w-radio w-radio--${this.inputValue ? 'checked' : 'unchecked'}`]: true,
         'w-radio--disabled': this.isDisabled,
+        'w-radio--readonly': this.isReadonly,
         'w-radio--ripple': this.ripple.start,
         'w-radio--rippled': this.ripple.end,
         'w-radio--dark': this.ripple.dark,

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

@@ -77,7 +77,7 @@ component(
       @update:model-value="onInput"
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
-      @keydown:enter="noUnselect && !multiple && closeMenu('la3')"
+      @keydown:enter="noUnselect && !multiple && closeMenu()"
       @keydown:escape="showMenu && (this.showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :items="selectItems"
       :multiple="multiple"
@@ -252,8 +252,8 @@ export default {
       // still allow meta key & ctrl key combinations and the tab key (9).
       if (!e.metaKey && !e.ctrlKey && e.keyCode !== 9) e.preventDefault()
 
-      if (e.keyCode === 27 && this.showMenu) this.closeMenu('la5') // Escape.
-      else if (e.keyCode === 13) this.openMenu() // Enter.
+      if (e.keyCode === 27 && this.showMenu) this.closeMenu() // Escape.
+      else if ([13, 32].includes(e.keyCode)) this.openMenu() // Enter or Space.
 
       // Up & down arrows.
       else if ([38, 40].includes(e.keyCode)) {
@@ -322,7 +322,7 @@ export default {
 
       return items.map(item => {
         let value = item
-        if (typeof item === 'object') {
+        if (item && typeof item === 'object') { // `null` is also an object!
           value = item[this.itemValueKey] !== undefined ? item[this.itemValueKey] : (item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item)
         }