wave-ui 1.67.3 → 1.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.67.3",
+  "version": "1.68.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

@@ -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 }"
   :valid.sync="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")
@@ -93,6 +93,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,
@@ -192,6 +193,7 @@ $inactive-color: #666;
 
     .w-checkbox--indeterminate & {opacity: 0;}
   }
+
   &__input:after {
     content: '';
     position: absolute;
@@ -242,7 +244,7 @@ $inactive-color: #666;
   }
 
   :focus ~ &__input:before,
-  :active ~ &__input:before {
+  &:not(.w-checkbox--disabled) :active ~ &__input:before {
     transform: scale(1.8);
     opacity: 0.2;
   }

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

@@ -415,10 +415,7 @@ $inactive-color: #777;
     &--round {border-radius: 99em;}
     &--tile {border-radius: initial;}
     &--shadow {box-shadow: $box-shadow;}
-    &--loading, &--upload-complete {
-      border-bottom-color: transparent;
-      flex-wrap: wrap;
-    }
+    &--loading, &--upload-complete {flex-wrap: wrap;}
     &--loading ~ .w-progress {
       height: 2px;
       position: absolute;
@@ -427,8 +424,7 @@ $inactive-color: #777;
     }
 
     .w-input--focused & {border-color: currentColor;}
-    .w-input--focused &--loading,
-    .w-input--focused &--upload-complete {border-bottom-color: transparent;}
+    .w-input--focused &--loading {border-bottom-color: transparent;}
 
     // Underline.
     &--underline:after {
@@ -444,8 +440,6 @@ $inactive-color: #777;
       pointer-events: none;
     }
 
-    &--loading:after {border-bottom-color: transparent;}
-
     .w-input--focused &--underline:after {transform: scaleX(1);}
     &--round.w-input__input-wrap--underline:after {
       border-radius: 99em;

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 }"
   :valid.sync="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")
@@ -87,6 +87,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
       }