wave-ui 1.50.1 → 1.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.50.1",
+  "version": "1.52.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

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

@@ -126,14 +126,6 @@ export default {
         [item[this.itemColorKey]]: item[this.itemColorKey]
       }
     }
-  },
-
-  watch: {
-    value (array) {
-      this.accordionItems.forEach((item, i) => {
-        this.$set(item, 'expanded', (Array.isArray(array) && array[i]) || false)
-      })
-    }
   }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-card(:class="classes" :style="styles")
+.w-card(:class="classes")
   .w-card__title(
     v-if="$slots.title"
     :class="{ 'w-card__title--has-toolbar': titleHasToolbar, ...titleClasses }")
@@ -71,10 +71,6 @@ export default {
         'w-card--tile': this.tile,
         'w-card--shadow': this.shadow
       }
-    },
-
-    styles () {
-      return false
     }
   }
 }
@@ -107,6 +103,17 @@ export default {
   &__content {
     padding: 3 * $base-increment;
     flex-grow: 1;
+
+    // Only if there is no title bar.
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+    &:last-child {
+    // Only if there is no actions bar.
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
   }
 
   &__actions {

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

@@ -4,6 +4,7 @@ w-overlay.w-dialog(
   :persistent="persistent"
   :persistent-no-animation="persistentNoAnimation"
   @click="onOutsideClick"
+  @closed="$emit('closed')"
   :bg-color="overlayColor"
   :opacity="overlayOpacity"
   :class="classes")
@@ -18,10 +19,10 @@ w-overlay.w-dialog(
       :content-class="contentClass"
       :title="title || undefined"
       :style="contentStyles")
-      template(v-if="$slots.title" v-slot:title)
+      template(#title v-if="$slots.title")
         slot(name="title")
       slot
-      template(v-if="$slots.actions" v-slot:actions)
+      template(#actions v-if="$slots.actions")
         slot(name="actions")
 </template>
 
@@ -47,7 +48,7 @@ export default {
     overlayOpacity: { type: [Number, String, Boolean] }
   },
 
-  emits: ['input', 'update:modelValue', 'close'],
+  emits: ['input', 'update:modelValue', 'close', 'closed'],
 
   data () {
     return {
@@ -87,7 +88,7 @@ export default {
       this.showWrapper = false
       this.$emit('update:modelValue', false)
       this.$emit('input', false)
-      this.$emit('close', false)
+      this.$emit('close')
     }
   },
 

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

@@ -18,7 +18,7 @@ export default {
     classes () {
       return {
         [`w-divider--has-color ${this.color}`]: this.color,
-        'w-divider--vertical': this.vertical,
+        [`w-divider--${this.vertical ? 'vertical' : 'horizontal'}`]: true,
         'w-divider--has-content': this.$slots.default
       }
     }
@@ -34,10 +34,14 @@ export default {
   &--has-color {border-color: currentColor;}
 
   &--vertical {
+    align-self: stretch; // Fill up the available height.
     display: flex;
     border-top-width: 0;
     border-left-width: 1px;
-    align-self: stretch;
+  }
+
+  .w-toolbar--vertical > &--horizontal {
+    align-self: stretch; // Fill up the available width.
   }
 
   // With a slot.

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

@@ -5,6 +5,7 @@
     .w-menu(
       v-if="custom && detachableVisible"
       ref="detachable"
+      v-on="$listeners"
       @click="hideOnMenuClick && close(true)"
       @mouseenter="showOnHover && (hoveringMenu = true)"
       @mouseleave="showOnHover && ((hoveringMenu = false), close())"
@@ -14,6 +15,7 @@
     w-card.w-menu(
       v-else-if="detachableVisible"
       ref="detachable"
+      v-on="$listeners"
       @click.native="hideOnMenuClick && close(true)"
       @mouseenter.native="showOnHover && (hoveringMenu = true)"
       @mouseleave.native="showOnHover && ((hoveringMenu = false), close())"
@@ -134,7 +136,10 @@ export default {
     },
 
     overlayClasses () {
-      return objectifyClasses(this.overlayClass)
+      return {
+        ...objectifyClasses(this.overlayClass),
+        'w-overlay--no-pointer-event': this.showOnHover
+      }
     },
 
     classes () {
@@ -196,6 +201,7 @@ export default {
   methods: {
     /**
      * Other methods in the `detachable` mixin:
+     * - `open`
      * - `getActivatorCoordinates`
      * - `computeDetachableCoords`
      * - `onResize`
@@ -207,7 +213,8 @@ export default {
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
       let shouldShowMenu = this.detachableVisible
-      if ('ontouchstart' in window && this.showOnHover && e.type === 'click') {
+      if (typeof window !== 'undefined' && 'ontouchstart' in window &&
+          this.showOnHover && e.type === 'click') {
         shouldShowMenu = !shouldShowMenu
       }
       else if (e.type === 'click' && !this.showOnHover) shouldShowMenu = !shouldShowMenu
@@ -226,37 +233,6 @@ export default {
       else this.close()
     },
 
-    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    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))
-
-      this.detachableVisible = true
-
-      // If the activator is external, there might be multiple,
-      // so on open, the activator will be set to the event target.
-      if (this.activator) this.activatorEl = e.target
-
-      await this.insertInDOM()
-
-      if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
-
-      if (!this.noPosition) this.computeDetachableCoords(e)
-
-      // In `getActivatorCoordinates` accessing the menu computed styles takes a few ms (less than 10ms),
-      // if we don't postpone the Menu apparition it will start transition from a visible menu and
-      // thus will not transition.
-      this.timeoutId = setTimeout(() => {
-        this.$emit('update:modelValue', true)
-        this.$emit('input', true)
-        this.$emit('open')
-      }, 0)
-
-      if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
-      if (!this.noPosition) window.addEventListener('resize', this.onResize)
-    },
-
     /**
      * Closes the menu. Can happen on:
      * - click of activator

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

@@ -1,7 +1,8 @@
 <template lang="pug">
-transition(name="fade" mode="out-in" appear)
+transition(name="fade" appear @after-leave="onClosed")
   .w-overlay(
-    v-if="value"
+    v-if="showOverlay"
+    v-show="value"
     :style="(value && styles) || null"
     @keydown.escape.stop="onClick"
     @click="onClick"
@@ -24,10 +25,11 @@ export default {
     persistentNoAnimation: { type: Boolean }
   },
 
-  emits: ['input', 'update:modelValue', 'click', 'close'],
+  emits: ['input', 'update:modelValue', 'click', 'close', 'closed'],
 
   data: () => ({
-    persistentAnimate: false
+    persistentAnimate: false,
+    showOverlay: false
   }),
 
   computed: {
@@ -60,10 +62,29 @@ export default {
       else if (!this.persistent) {
         this.$emit('update:modelValue', false)
         this.$emit('input', false)
-        this.$emit('close', false)
+        this.$emit('close')
       }
 
       this.$emit('click', e)
+    },
+
+    // Wait until the end of the closing transition to unmount the components it contains.
+    // This way, in case of w-select in w-dialog, the w-select will only remove its activator
+    // element from the DOM once the dialog is completely closed.
+    // https://github.com/antoniandre/wave-ui/issues/82
+    onClosed () {
+      this.showOverlay = false
+      this.$emit('closed')
+    }
+  },
+
+  created () {
+    this.showOverlay = this.value
+  },
+
+  watch: {
+    value (bool) {
+      if (bool) this.showOverlay = true
     }
   }
 }
@@ -85,6 +106,7 @@ export default {
   background-color: rgba(0, 0, 0, 0.3);
 
   &--persistent-animate {animation: 0.15s w-overlay-pop cubic-bezier(0.6, -0.28, 0.74, 0.05);}
+  &--no-pointer-event {pointer-events: none;}
 }
 
 @keyframes w-overlay-pop {

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

@@ -25,11 +25,12 @@ component(
     align-left
     custom
     min-width="activator"
+    @mousedown="isFocused = true, selectingItem = true"
+    @mouseup="isFocused = true, selectingItem = false"
     v-bind="menuProps || {}")
     template(#activator="{ on }")
       //- Input wrapper.
       .w-select__selection-wrap(
-        ref="selection-wrap"
         @click="!isDisabled && !isReadonly && (showMenu ? closeMenu : openMenu)()"
         role="button"
         aria-haspopup="listbox"
@@ -173,7 +174,9 @@ export default {
     inputValue: [],
     showMenu: false,
     menuMinWidth: 0,
-    isFocused: false
+    isFocused: false,
+    selectingItem: false,
+    selectionWrapRef: undefined
   }),
 
   computed: {
@@ -210,7 +213,7 @@ export default {
         'w-select--disabled': this.isDisabled,
         'w-select--readonly': this.isReadonly,
         [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
-        'w-select--focused': this.isFocused && !this.isReadonly,
+        'w-select--focused': (this.isFocused || this.selectingItem) && !this.isReadonly,
         'w-select--dark': this.dark,
         'w-select--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-select--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 ul.w-timeline
   li.w-timeline-item(v-for="(item, i) in items" :key="i")
-    .w-timeline-item__bullet(
+    component.w-timeline-item__bullet(
       :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
       :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }")
       | {{ item[itemIconKey] || icon }}

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

@@ -13,6 +13,10 @@ export default {
     absolute: { type: Boolean },
     fixed: { type: Boolean },
     bottom: { type: Boolean },
+    vertical: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
     shadow: { type: Boolean }
@@ -21,25 +25,35 @@ export default {
   emits: [],
 
   computed: {
-    // Return the width or height value if defined, or false otherwise.
+    // Return the height value if defined, or false otherwise.
     toolbarHeight () {
       const h = this.height
       // If a number is passed without units, append `px`.
       return h && parseInt(h) == h ? h + 'px' : h
     },
+    // Return the width value if defined, or false otherwise.
+    toolbarWidth () {
+      const w = this.width
+      // If a number is passed without units, append `px`.
+      return w && parseInt(w) == w ? w + 'px' : w
+    },
     classes () {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
         'w-toolbar--absolute': !!this.absolute,
         'w-toolbar--fixed': !!this.fixed,
-        [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: true,
+        [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: !this.vertical,
+        [`w-toolbar--vertical w-toolbar--${this.right ? 'right' : 'left'}`]: this.vertical,
         'w-toolbar--no-border': this.noBorder,
         'w-toolbar--shadow': !!this.shadow
       }
     },
     styles () {
-      return this.height ? `height: ${this.toolbarHeight}` : false
+      return {
+        height: this.height && !this.vertical ? this.toolbarHeight : null,
+        width: this.width && this.vertical ? this.toolbarWidth : null
+      }
     }
   }
 }
@@ -56,18 +70,36 @@ export default {
   z-index: 10;
 
   &--absolute, &--fixed {top: 0;left: 0;right: 0;}
+  &--absolute.w-toolbar--vertical, &--fixed.w-toolbar--vertical {top: 0;bottom: 0;}
+  &--absolute.w-toolbar--left, &--fixed.w-toolbar--left {left: 0;right: auto;}
+  &--absolute.w-toolbar--right, &--fixed.w-toolbar--right {left: auto;right: 0;}
   &--absolute {position: absolute;}
   &--fixed {position: fixed;}
+
+  // Horizontal.
   &--top {border-bottom: $border;}
   &--bottom {
     bottom: 0;
     top: auto;
     border-top: $border;
   }
-  &--no-border, &--shadow {
-    border-top-width: 0;
-    border-bottom-width: 0;
+
+  // Vertical.
+  &--vertical {
+    padding: (2 * $base-increment);
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  &--left {border-right: $border;}
+  &--right {
+    right: 0;
+    left: auto;
+    border-left: $border;
   }
+
+  &--no-border, &--shadow {border-width: 0;}
   &--shadow {box-shadow: $box-shadow;}
 
   .w-app > & {z-index: 200;}
@@ -81,5 +113,13 @@ export default {
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }
+  .w-card__content &--left {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  .w-card__content &--right {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
 }
 </style>

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

@@ -2,7 +2,12 @@
 .w-tooltip-wrap
   slot(name="activator" :on="activatorEventHandlers")
   transition(:name="transitionName" appear)
-    .w-tooltip(v-if="detachableVisible" ref="detachable" :class="classes" :style="styles")
+    .w-tooltip(
+      v-if="detachableVisible"
+      ref="detachable"
+      :key="_uid"
+      :class="classes"
+      :style="styles")
       slot
 </template>
 
@@ -129,6 +134,7 @@ export default {
   methods: {
     /**
      * Other methods in the `detachable` mixin:
+     * - `open`
      * - `getActivatorCoordinates`
      * - `computeDetachableCoords`
      * - `onResize`
@@ -152,37 +158,6 @@ export default {
       else this.close()
     },
 
-    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    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))
-
-      this.detachableVisible = true
-
-      // If the activator is external, there might be multiple,
-      // so on open, the activator will be set to the event target.
-      if (this.activator) this.activatorEl = e.target
-
-      await this.insertInDOM()
-
-      if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
-
-      if (!this.noPosition) this.computeDetachableCoords(e)
-
-      // In `getActivatorCoordinates` accessing the tooltip computed styles takes a few ms (less than 10ms),
-      // if we don't postpone the Tooltip apparition it will start transition from a visible tooltip and
-      // thus will not transition.
-      this.timeoutId = setTimeout(() => {
-        this.$emit('update:modelValue', true)
-        this.$emit('input', true)
-        this.$emit('open')
-      }, 0)
-
-      if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
-      if (!this.noPosition) window.addEventListener('resize', this.onResize)
-    },
-
     /**
      * Closes the tooltip. Can happen on:
      * - click of activator

package/src/wave-ui/mixins/detachable.js

@@ -22,7 +22,8 @@ export default {
     alignRight: { type: Boolean },
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
-    activator: { type: String } // Optionally designate an external activator.
+    // Optionally designate an external activator.
+    activator: { type: [String, Object, HTMLElement] } // The activator can be a DOM string selector, a ref or a DOM node.
   },
 
   data: () => ({
@@ -31,7 +32,7 @@ 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.
-    docAEventListenersHandlers: []
+    docEventListenersHandlers: []
   }),
 
   computed: {
@@ -70,17 +71,22 @@ export default {
     },
 
     hasSeparateActivator () {
-      return !this.$scopedSlots.activator && typeof this.activator === 'string'
+      if (this.$scopedSlots.activator) return false
+      const activatorIsString = typeof this.activator === 'string'
+      const activatorIsDomEl = (this.activator?.$el || this.activator) instanceof HTMLElement
+      return activatorIsString || activatorIsDomEl
     },
 
     activatorEl: {
       get () {
-        if (this.hasSeparateActivator) return document.querySelector(this.activator)
+        if (this.hasSeparateActivator) {
+          const activator = this.activator?.$el || this.activator
+          if (activator instanceof HTMLElement) return activator
+          return document.querySelector(this.activator)
+        }
         return this.$el.firstElementChild
       },
-      set () {
-
-      }
+      set () {}
     },
 
     position () {
@@ -106,9 +112,40 @@ export default {
 
   methods: {
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    getActivatorCoordinates (e) {
+    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))
+
+      this.detachableVisible = true
+
+      // If the activator is external, there might be multiple,
+      // so on open, the activator will be set to the event target.
+      if (this.activator) this.activatorEl = e.target
+
+      await this.insertInDOM()
+
+      if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
+
+      if (!this.noPosition) this.computeDetachableCoords()
+
+      // In `getActivatorCoordinates` accessing the menu computed styles takes a few ms (less than 10ms),
+      // if we don't postpone the Menu apparition it will start transition from a visible menu and
+      // thus will not transition.
+      this.timeoutId = setTimeout(() => {
+        this.$emit('update:modelValue', true)
+        this.$emit('input', true)
+        this.$emit('open')
+      }, 0)
+
+      if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
+      if (!this.noPosition) window.addEventListener('resize', this.onResize)
+    },
+
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
+    getActivatorCoordinates () {
       // Get the activator coordinates relative to window.
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect()
+      const { top, left, width, height } = (this.activatorEl).getBoundingClientRect()
       let coords = { top, left, width, height }
 
       // If absolute position, adjust top & left.
@@ -126,9 +163,9 @@ export default {
     },
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    computeDetachableCoords (e) {
+    computeDetachableCoords () {
       // Get the activator coordinates.
-      let { top, left, width, height } = this.getActivatorCoordinates(e)
+      let { top, left, width, height } = this.getActivatorCoordinates()
 
       // 1. First display the menu but hide it (So we can get its dimension).
       // --------------------------------------------------
@@ -251,31 +288,47 @@ export default {
         this.detachableEl.remove()
         this.detachableEl = null
       }
-    }
-  },
-
-  mounted () {
-    const wrapper = this.$el
-
-    // Unwrap the activator element if the activator is in the activator slot.
-    if (this.$scopedSlots.activator) wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
+    },
 
     // If the activator is external, add event listeners to the document and check the target is
     // the activator when toggling.
     // This way, the activator can be a future DOM element, that is not yet in the DOM.
-    else if (this.activator) {
+    bindActivatorEvents () {
+      const activatorIsString = typeof this.activator === 'string'
+
       Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
         // Convert mouseenter to mouseover & mouseleave to mouseout because we are attaching
-        // event to the document, so it can accept future nodes.
+        // event to the document, so it can accept future DOM nodes.
         eventName = eventName.replace('mouseenter', 'mouseover').replace('mouseleave', 'mouseout')
         const handlerWrap = e => {
-          if (e.target?.matches && e.target.matches(this.activator)) handler(e)
+          // The activator can be a DOM string selector a ref or a DOM node.
+          if (activatorIsString && e.target?.matches && e.target.matches(this.activator)) handler(e)
+          else if (e.target === this.activatorEl || this.activatorEl.contains(e.target)) handler(e)
         }
         document.addEventListener(eventName, handlerWrap)
         // The event listeners handlers have to be removed the exact same way they have been attached.
         // Since the handler functions have variables that change after hot-reload, keep them exactly
         // as is in an array so we can delete them on destroy.
-        this.docAEventListenersHandlers.push({ eventName, handler: handlerWrap })
+        this.docEventListenersHandlers.push({ eventName, handler: handlerWrap })
+      })
+    }
+  },
+
+  mounted () {
+    const wrapper = this.$el
+
+    // Unwrap the activator element if the activator is in the activator slot.
+    if (this.$scopedSlots.activator) wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
+
+    // If the activator is external.
+    else if (this.activator) this.bindActivatorEvents()
+
+    // If the activator seems to be undefined, it is probably a DOM node or Vue ref,
+    // so check it on nextTick.
+    else {
+      this.$nextTick(() => {
+        this.activator && this.bindActivatorEvents()
+        if (this.value) this.toggle({ type: 'click', target: this.activatorEl })
       })
     }
 
@@ -285,7 +338,7 @@ export default {
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
     }
 
-    if (this.value) this.toggleMenu({ type: 'click', target: this.activatorEl })
+    if (this.value && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
   },
 
   beforeDestroy () {
@@ -295,8 +348,8 @@ export default {
 
     // Remove the event listeners the exact same way they have been defined.
     // Fixes issues on hot-reloading.
-    if (this.docAEventListenersHandlers.length) {
-      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+    if (this.docEventListenersHandlers.length) {
+      this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
         document.removeEventListener(eventName, handler)
       })
     }