wave-ui 3.5.2 → 3.6.0

package/package.json

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

@@ -571,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-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/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()