wave-ui 3.5.1 → 3.6.0

package/package.json

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

@@ -282,7 +282,10 @@ $spinner-size: 40;
 
   // Active state.
   &:active {transform: scale(1.02);}
-  &:active:before {opacity: 0.3;}
+  &:active:before {
+    opacity: 0.3;
+    @include default-transition($fast-transition-duration);
+  }
   &--dark:active:before, &.primary--bg:active:before {opacity: 0.35;}
 
   // Disable visual feedback on loading and disabled buttons.

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"
@@ -570,6 +571,7 @@ $inactive-color: #777;
   &__label {
     transition: color $transition-duration;
     cursor: pointer;
+    user-select: none;
 
     &--left {margin-right: 2 * $base-increment;}
     &--right {margin-left: 2 * $base-increment;}

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

@@ -168,7 +168,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,
-        '--w-menu-bg-color': this.arrow && this.$waveui.colors[this.bgColor || 'white']
+        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))')
       }
     },
 
@@ -300,7 +300,7 @@ export default {
     &.w-menu--left {margin-left: -4 * $base-increment;}
     &.w-menu--right {margin-left: 4 * $base-increment;}
 
-    @include triangle($menu-bg-color, '.w-menu', 9px);
+    @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
   }
 }
 </style>

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

@@ -529,6 +529,7 @@ export default {
     align-items: center;
     transition: color $transition-duration;
     cursor: pointer;
+    user-select: none;
 
     &--left {margin-right: 2 * $base-increment;}
     &--right {margin-left: 2 * $base-increment;}

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

@@ -330,6 +330,7 @@ $inactive-color: #777;
     transition: color $transition-duration;
     cursor: pointer;
     align-self: flex-start;
+    user-select: none;
 
     &--left {
       margin-top: $base-increment;

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/components/w-tooltip.vue

@@ -34,7 +34,14 @@ export default {
     persistent: { type: Boolean },
     delay: { type: Number },
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    caption: { type: Boolean }, // Apply the caption class and style (grey, italic, small).
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
+    enableTouch: { type: Boolean }
     // Other props in the detachable mixin:
     // detachTo, appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
     // alignRight, noPosition, zIndex, activator.
@@ -73,6 +80,17 @@ export default {
       return this.transition || `w-tooltip-slide-fade-${direction}`
     },
 
+    size () {
+      return (
+        (this.xs && 'xs') ||
+        (this.sm && 'sm') ||
+        (this.sm && 'md') ||
+        (this.lg && 'lg') ||
+        (this.xl && 'xl') ||
+        (this.caption ? 'sm' : 'md') // if no size is set put md by default, or sm if caption is on.
+      )
+    },
+
     classes () {
       return {
         [this.color]: this.color,
@@ -84,6 +102,8 @@ export default {
         'w-tooltip--light': this.light,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
+        caption: this.caption,
+        [`size--${this.size}`]: true,
         'w-tooltip--shadow': this.shadow,
         'w-tooltip--fixed': this.fixed,
         'w-tooltip--no-border': this.noBorder || this.bgColor,
@@ -97,17 +117,21 @@ export default {
         zIndex: this.zIndex || this.zIndex === 0 || null,
         top: (this.detachableCoords.top && `${~~this.detachableCoords.top}px`) || null,
         left: (this.detachableCoords.left && `${~~this.detachableCoords.left}px`) || null,
-        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor || 'white']
+        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))'
       }
     },
 
     activatorEventHandlers () {
       let handlers = {}
-      if (this.showOnClick) handlers = { click: this.toggle }
-      else {
+
+      // Check the window exists: SSR-proof.
+      const isTouchDevice = typeof window !== 'undefined' && 'ontouchstart' in window
+
+      // Toggling tooltip on mouseenter/mouseout (by default), and also show on focus, hide on blur.
+      if (!this.showOnClick && !isTouchDevice) {
         handlers = {
-          focus: this.toggle,
-          blur: this.toggle,
+          focus: this.open,
+          blur: this.close,
           mouseenter: e => {
             this.hoveringActivator = true
             this.open(e)
@@ -117,10 +141,10 @@ export default {
             this.close()
           }
         }
-
-        // Check the window exists: SSR-proof.
-        if (typeof window !== 'undefined' && 'ontouchstart' in window) handlers.click = this.toggle
       }
+      // Only bind a click event on mobile, or if showOnClick is set.
+      else if (this.enableTouch || this.showOnClick) handlers = { click: this.toggle }
+
       return handlers
     }
   },
@@ -140,8 +164,12 @@ export default {
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
       let shouldShowTooltip = this.detachableVisible
+
+      // For touch devices.
       if (typeof window !== 'undefined' && 'ontouchstart' in window) {
-        if (e.type === 'click') shouldShowTooltip = !shouldShowTooltip
+        // disable tooltip opening for mouseenter activation.
+        if (!this.enableTouch && !this.showOnClick) shouldShowTooltip = false
+        else shouldShowTooltip = !shouldShowTooltip
       }
       else if (e.type === 'click' && this.showOnClick) shouldShowTooltip = !shouldShowTooltip
       else if (['mouseenter', 'focus'].includes(e.type) && !this.showOnClick) shouldShowTooltip = true
@@ -220,16 +248,22 @@ export default {
   &--left {margin-left: -3 * $base-increment;}
   &--right {margin-left: 3 * $base-increment;}
 
+  &.size--xs {font-size: 0.75rem;}
+  &.size--sm {font-size: 0.83rem;}
+  &.size--md {font-size: 0.9rem;}
+  &.size--lg {font-size: 1rem;}
+  &.size--xl {font-size: 1.1rem;}
+
   &--custom-transition {transform: none;}
 
   // Tooltip without border.
   &--no-border {
-    @include triangle($tooltip-bg-color, '.w-tooltip', 7px, 0);
+    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px, 0);
   }
 
   // Tooltip with border.
   &:not(&--no-border) {
-    @include triangle($tooltip-bg-color, '.w-tooltip', 7px);
+    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px);
   }
 }
 

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/mixins/detachable.js

@@ -331,14 +331,17 @@ export default {
     else {
       this.$nextTick(() => {
         if (this.activator) this.bindActivatorEvents()
-        if (this.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
+        if (this.modelValue) this.open({ target: this.activatorEl })
       })
     }
 
     // Unwrap the overlay if any.
     if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
 
-    if (this.modelValue && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
+    if (this.modelValue && this.activator) {
+      this.toggle({ type: this.showOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+    }
+    else if (this.modelValue) this.open({ target: this.activatorEl })
   },
 
   unmounted () {
@@ -357,7 +360,7 @@ export default {
 
   watch: {
     modelValue (bool) {
-      if (!!bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
+      if (!!bool !== this.detachableVisible) this.toggle({ type: this.showOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
     },
     appendTo () {
       this.removeFromDOM()

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

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