wave-ui 1.68.0 → 1.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.68.0",
+  "version": "1.69.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",
@@ -50,38 +50,38 @@
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.10",
-    "@babel/eslint-parser": "^7.22.10",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.2.0",
     "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^1.10.2",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.16",
     "axios": "^0.21.4",
-    "core-js": "^3.26.1",
+    "core-js": "^3.33.2",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-vue": "^7.20.0",
     "font-awesome": "^4.7.0",
     "ghspa": "^1.0.0",
-    "gsap": "^3.11.3",
+    "gsap": "^3.12.2",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.31",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.56.1",
-    "simple-syntax-highlighter": "^1.5.1",
+    "sass": "^1.69.5",
+    "simple-syntax-highlighter": "^1.6.2",
     "splitpanes": "^2.4.1",
-    "vite": "^2.9.15",
+    "vite": "^2.9.16",
     "vite-plugin-vue2": "^1.9.3",
-    "vue": "^2.7.14",
+    "vue": "^2.7.15",
     "vue-router": "^3.6.5",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.7.14",
+    "vue-template-compiler": "^2.7.15",
     "vueperslides": "^2.16.0",
     "vuex": "^3.6.2"
   }

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

@@ -281,7 +281,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-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" v-on="$listeners")
   slot
+  template(#loading)
+    slot(name="loading")
 </template>
 
 <script>

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

@@ -105,8 +105,9 @@ export default {
   methods: {
     onInput () {
       this.isChecked = !this.isChecked
-      this.$emit('update:modelValue', this.isChecked)
-      this.$emit('input', this.isChecked)
+      const returnValue = this.isChecked && this.returnValue !== undefined ? this.returnValue : this.isChecked
+      this.$emit('update:modelValue', returnValue)
+      this.$emit('input', returnValue)
 
       if (!this.noRipple) {
         if (this.isChecked) {
@@ -143,11 +144,8 @@ $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;
 
-  &--disabled {cursor: not-allowed;}
-
   // The hidden real checkbox.
   input[type="checkbox"] {
     position: absolute;
@@ -165,8 +163,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.
@@ -260,10 +260,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-checkboxes.vue

@@ -38,6 +38,9 @@ export default {
   props: {
     items: { type: Array, required: true }, // All the possible options.
     value: { type: Array }, // v-model on selected option.
+    // If true, the returnValue set on each w-checkboxes item will be returned once the checkbox is
+    // checked. If false & by default, the return value of the w-checkboxes is an array of booleans.
+    returnValues: { type: Boolean },
     labelOnLeft: { type: Boolean },
     itemLabelKey: { type: String, default: 'label' },
     itemValueKey: { type: String, default: 'value' },
@@ -92,7 +95,7 @@ export default {
 
     toggleCheck (checkbox, isChecked) {
       checkbox._isChecked = isChecked
-      const selection = this.checkboxItems.filter(item => item._isChecked).map(item => item.value)
+      const selection = this.checkboxItems.filter(item => item._isChecked).map(item => this.returnValues ? item.returnValue : item.value)
 
       this.$emit('update:modelValue', selection)
       this.$emit('input', selection)

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"
@@ -558,6 +559,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-list.vue

@@ -229,8 +229,8 @@ export default {
         'w-list__item-label--focused': item._focused,
         'w-list__item-label--hoverable': this.hover,
         'w-list__item-label--selectable': this.isSelectable,
-        [item.color]: !!item.color,
-        [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
+        [item[this.itemColorKey]]: !!item[this.itemColorKey],
+        [this.SelectionColor]: item._selected && !item[this.itemColorKey] && this.SelectionColor,
         [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       }
     },
@@ -406,11 +406,11 @@ export default {
       // Reset the selections when single selection allowed for w-select.
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
-      this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => {
-          const foundItem = this.listItems.find(item => item._value === val)
-          if (foundItem) foundItem._selected = true
-        })
+      const selectedItems = this.checkSelection(selection) // Create an array with the selected values.
+      // Update which items are selected or not.
+      this.listItems.forEach(item => {
+        item._selected = selectedItems.find(val => item._value === val) !== undefined
+      })
     }
   },
 

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

@@ -79,6 +79,7 @@ export default {
     contentClass: { type: [String, Object, Array] },
     arrow: { type: Boolean }, // The small triangle pointing toward the activator.
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
+    maxWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
@@ -132,6 +133,11 @@ export default {
       else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
     },
 
+    menuMaxWidth () {
+      if (this.maxWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
+      else return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
+    },
+
     menuClasses () {
       return objectifyClasses(this.menuClass)
     },
@@ -174,7 +180,8 @@ 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']
+        maxWidth: (this.maxWidth && this.menuMaxWidth) || null,
+        '--w-menu-bg-color': this.arrow && (this.$waveui.colors[this.bgColor] || 'rgb(var(--w-base-bg-color-rgb))')
       }
     },
 
@@ -254,6 +261,10 @@ export default {
      *                        even while hovering the menu.
      */
     async close (force = false) {
+      // The user may open and close the detachable so fast (like when toggling on hover) that it
+      // should not show up at all. This cancels the opening timer (if there is a set delay prop).
+      this.openTimeout = clearTimeout(this.openTimeout)
+
       // Might be already closed.
       // E.g. showOnHover & hideOnMenuClick: on click, force hide then mouseleave is also firing.
       if (!this.detachableVisible) return

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

@@ -10,13 +10,13 @@ component(
   template(v-if="labelPosition === 'left'")
     label.w-select__label.w-select__label--left.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-select--${_uid}`"
+      @click="$refs['selection-input'].click()"
       :class="labelClasses")
       slot {{ label }}
 
   w-menu(
     v-model="showMenu"
-    @close="!$event && closeMenu()"
+    @close="closeMenu"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
     :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
@@ -47,7 +47,6 @@ component(
           @focus="!isDisabled && !isReadonly && onFocus($event)"
           @blur="onBlur"
           @keydown="!isDisabled && !isReadonly && onKeydown($event)"
-          :id="`w-select--${_uid}`"
           :class="{ 'w-select__selection--placeholder': !$scopedSlots.selection && !selectionString && placeholder }"
           :disabled="isDisabled || null"
           readonly
@@ -64,7 +63,6 @@ component(
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
             v-if="$slots.default || label"
-            :for="`w-select--${_uid}`"
             :class="labelClasses")
             slot {{ label }}
         w-icon.w-select__icon.w-select__icon--inner-right(
@@ -77,7 +75,7 @@ component(
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
       @keydown:enter="noUnselect && !multiple && closeMenu()"
-      @keydown:escape="showMenu && (this.showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
+      @keydown:escape="showMenu && (showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :value="inputValue"
       :items="selectItems"
       :multiple="multiple"
@@ -103,7 +101,7 @@ component(
   template(v-if="labelPosition === 'right'")
     label.w-select__label.w-select__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-select--${_uid}`"
+      @click="$refs['selection-input'].click()"
       :class="labelClasses")
       slot {{ label }}
 </template>
@@ -252,7 +250,7 @@ export default {
       if (!e.metaKey && !e.ctrlKey && e.keyCode !== 9) e.preventDefault()
 
       if (e.keyCode === 27 && this.showMenu) this.closeMenu() // Escape.
-      else if (e.keyCode === 13) this.openMenu() // Enter.
+      else if ([13, 32].includes(e.keyCode)) this.openMenu() // Enter or Space.
 
       // Up & down arrows.
       else if ([38, 40].includes(e.keyCode)) {
@@ -272,7 +270,25 @@ export default {
             index = (index + items.length + direction) % items.length
           }
 
-          this.onInput(items[index])
+          // If the current item is disabled, find the next one enabled (forward or backward).
+          let allItemsAreDisabled = false
+          if (items[index].disabled) {
+            const direction = e.keyCode === 38 ? -1 : 1 // Prev or next.
+
+            // Modulo to prevent out of range; + items.length to also work with negative values.
+            let newIndex = (index + direction + items.length) % items.length
+            const itemsCount = items.length
+            let loop = 0 // While-safety: will always end at least after 1 full array cycle.
+            while (loop < itemsCount && items[newIndex].disabled) {
+              // Circle through the array of items forward or backward, and reloop when out of range.
+              newIndex = (newIndex + items.length + direction) % items.length
+              loop++
+            }
+            if (loop >= itemsCount) allItemsAreDisabled = true
+            index = newIndex
+          }
+
+          if (!allItemsAreDisabled) this.onInput(items[index])
         }
       }
     },
@@ -321,7 +337,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)
         }
 
@@ -508,8 +524,8 @@ export default {
       -webkit-tap-highlight-color: transparent;
     }
 
-    &--inner-left {left: 6px;}
-    &--inner-right {right: 6px;}
+    &--inner-left {left: $base-increment;}
+    &--inner-right {right: $base-increment;}
     .w-select--no-padding &--inner-left {left: 1px;}
     .w-select--no-padding &--inner-right {right: 1px;}
 
@@ -526,6 +542,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;}
@@ -553,7 +570,7 @@ export default {
     transform: translateY(-50%);
     pointer-events: none;
 
-    .w-select--inner-icon-right & {padding-right: 22px;}
+    .w-select--inner-icon-right & {padding-right: 26px;}
 
     .w-select--no-padding & {
       left: 0;
@@ -570,8 +587,7 @@ export default {
       transition: $transition-duration ease;
     }
 
-    // move label with underline style.
-    .w-select--focused.w-select--floating-label &,
+    // Move label with underline style.
     .w-select--open.w-select--floating-label &,
     .w-select--filled.w-select--floating-label &,
     .w-select--has-placeholder.w-select--floating-label & {
@@ -582,13 +598,11 @@ export default {
       transform: translateY(-160%) scale(0.85);
     }
     // Move label with outline style or with shadow.
-    .w-select--focused.w-select--floating-label .w-select__selection-wrap--box &,
     .w-select--open.w-select--floating-label .w-select__selection-wrap--box &,
     .w-select--filled.w-select--floating-label .w-select__selection-wrap--box &,
     .w-select--has-placeholder.w-select--floating-label .w-select__selection-wrap--box & {
       transform: translateY(-180%) scale(0.85);
     }
-    .w-select--focused.w-select--floating-label.w-select--inner-icon-left &,
     .w-select--open.w-select--floating-label.w-select--inner-icon-left &,
     .w-select--filled.w-select--floating-label.w-select--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.

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

@@ -844,7 +844,7 @@ $tr-border-top: 1px;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--primary);
+    background-color: var(--w-primary-color);
     opacity: 0.2;
     pointer-events: none;
   }

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

@@ -326,6 +326,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

@@ -63,7 +63,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: #fff;
@@ -88,7 +88,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

@@ -42,7 +42,14 @@ export default {
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
     persistent: { type: Boolean },
-    delay: { type: Number }
+    delay: { type: Number },
+    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:
     // appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
     // alignRight, noPosition, zIndex, activator.
@@ -81,6 +88,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,
@@ -90,6 +108,8 @@ export default {
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
         '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,
@@ -103,17 +123,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)
@@ -123,10 +147,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
     }
   },
@@ -146,8 +170,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
@@ -226,6 +254,12 @@ 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.

package/src/wave-ui/core.js

@@ -1,17 +1,51 @@
+import { consoleWarn } from './utils/console'
 import { mergeConfig } from './utils/config'
 import NotificationManager from './utils/notification-manager'
 import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
-// import * as directives from './directives'
+
+// const detectOSDarkMode = $waveui => {
+//   const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+//   $waveui.preferredTheme = matchMedia.matches ? 'dark' : 'light'
+//   $waveui.switchTheme($waveui.preferredTheme)
+
+//   matchMedia.addEventListener('change', event => {
+//     $waveui.preferredTheme = event.matches ? 'dark' : 'light'
+//     $waveui.switchTheme($waveui.preferredTheme)
+//   })
+// }
 
 /**
  * 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

@@ -22,7 +22,8 @@ export default {
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
     // Optionally designate an external activator.
-    activator: { type: [String, Object] } // The activator can be a DOM string selector, a ref or a DOM node.
+    // The activator can be a DOM string selector, a ref or a DOM node.
+    activator: { type: [String, Object] }
   },
 
   inject: {
@@ -35,7 +36,11 @@ export default {
     // as is in an array so we can delete them on destroy.
     // This only applies to the activatorEventHandlers, the other events listeners can be removed
     // normally.
-    docEventListenersHandlers: []
+    docEventListenersHandlers: [],
+    // The user may open and close the detachable so fast (like when toggling on hover) that it
+    // should not show up at all. Keep the ability to cancel the opening timer (if there is a set
+    // delay prop).
+    openTimeout: null
   }),
 
   computed: {
@@ -111,6 +116,13 @@ export default {
         (['left', 'right'].includes(this.position) && this.alignBottom && 'bottom') ||
         ''
       )
+    },
+
+    shouldShowOnClick () {
+      // For props simplicity, the w-tooltip component has the `showOnHover` prop,
+      // whereas the w-menu has `showOnClick`.
+      return (this.$options.props.showOnHover && !this.showOnHover) ||
+        (this.$options.props.showOnClick && this.showOnClick)
     }
   },
 
@@ -119,7 +131,10 @@ export default {
     async open (e) {
       // A tiny delay may help positioning the detachable correctly in case of multiple activators
       // with different menu contents.
-      if (this.delay) await new Promise(resolve => setTimeout(resolve, this.delay))
+      if (this.delay) await new Promise(resolve => (this.openTimeout = setTimeout(resolve, this.delay)))
+
+      // Cancel opening if the timeout has been cancelled by blur event (when going fast).
+      if (this.delay && !this.openTimeout) return
 
       this.detachableVisible = true
 
@@ -336,7 +351,7 @@ export default {
     else {
       this.$nextTick(() => {
         if (this.activator) this.bindActivatorEvents()
-        if (this.value) this.toggle({ type: 'click', target: this.activatorEl })
+        if (this.value) this.open({ target: this.activatorEl })
       })
     }
 
@@ -346,7 +361,10 @@ export default {
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
     }
 
-    if (this.value && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
+    if (this.value && this.activator) {
+      this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+    }
+    else if (this.value) this.open({ target: this.activatorEl })
   },
 
   beforeDestroy () {
@@ -368,7 +386,10 @@ export default {
 
   watch: {
     value (bool) {
-      if (!!bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
+      if (!!bool !== this.detachableVisible) {
+        if (bool) this.open({ target: this.activatorEl })
+        else this.close()
+      }
     },
     appendTo () {
       this.removeFromDOM()