wave-ui 3.5.0 → 3.5.2

package/package.json

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

@@ -150,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;
@@ -174,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.
@@ -270,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-input.vue

@@ -61,6 +61,7 @@ component(
           @change="onFileChange"
           :multiple="multiple || null"
           v-bind="attrs"
+          :disabled="isDisabled || null"
           :data-progress="overallFilesProgress /* Needed to emit the overallProgress. */")
         transition-group.w-input__input.w-input__input--file(
           tag="label"

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)
         }
 

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

@@ -67,7 +67,7 @@ export default {
 .w-toolbar {
   position: relative;
   display: flex;
-  flex: 1 1 auto;
+  flex: 0 1 auto; // No grow, so it doesn't stretch vertically in flex column.
   align-items: center;
   padding: (2 * $base-increment) (3 * $base-increment);
   background-color: $toolbar-bg-color;
@@ -94,7 +94,6 @@ export default {
   &--vertical {
     padding: (2 * $base-increment);
     flex-direction: column;
-    flex-grow: 0;
     flex-shrink: 0;
   }
 

package/src/wave-ui/core.js

@@ -1,8 +1,9 @@
 import { reactive, inject } from 'vue'
 import { mergeConfig } from './utils/config'
-import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
+import { consoleWarn } from './utils/console'
 import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
 import { injectColorsCSSInDOM, injectCSSInDOM } from './utils/dynamic-css'
+import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
 import './scss/index.scss'
 
 let mounted = false
@@ -19,13 +20,36 @@ const detectOSDarkMode = $waveui => {
 
 /**
  * Inject presets into a Vue component props defaults before its registration into the app.
+ * If a preset is not found in the given component props, try to find it in its mixins, if any.
  *
+ * @todo remove mixins-related code when stopping support for Vue 2.
  * @param {Object} component the Vue component to inject presets into.
  * @param {Object} presets the presets to inject. E.g. `{ bgColor: 'green' }`.
  */
 const injectPresets = (component, presets) => {
   for (const preset in presets) {
-    component.props[preset].default = presets[preset]
+    // If we don't have the prop output a warning and continue.
+    if (!component.props?.[preset]) {
+      let foundProp = false
+      // Check to see if the prop exists on a mixin when it doesn't exist on the component.
+      // @todo: remove this check when there is no more Vue 2 and mixins: mixins are now deprecated.
+      if (Array.isArray(component.mixins) && component.mixins.length) {
+        // Loop through the array of mixin, and if we find the prop in one, update its default value.
+        for (const mixin of component.mixins) {
+          if (mixin?.props?.[preset]) {
+            mixin.props[preset].default = presets[preset]
+            foundProp = true
+            break
+          }
+        }
+
+        // If the given prop (= preset) is still not found in the mixins props raise warning.
+        if (!foundProp) consoleWarn(`Attempting to set a preset on a prop that doesn't exist: \`${component.name}.${preset}\`.`)
+        continue // Continue to the next preset.
+      }
+    }
+
+    else component.props[preset].default = presets[preset]
   }
 }
 

package/src/wave-ui/scss/index.scss

@@ -1,4 +1,3 @@
-@import './variables';
 @import './base';
 @import './typography';
 @import './layout';