wave-ui 2.32.3 → 2.33.0

package/package.json

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

@@ -125,14 +125,6 @@ export default {
         [item[this.itemColorKey]]: item[this.itemColorKey]
       }
     }
-  },
-
-  watch: {
-    modelValue (array) {
-      this.accordionItems.forEach((item, i) => {
-        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,12 +4,13 @@ w-overlay.w-dialog(
   :persistent="persistent"
   :persistent-no-animation="persistentNoAnimation"
   @click="onOutsideClick"
+  @closed="$emit('closed')"
   :bg-color="overlayColor"
   :opacity="overlayOpacity"
   :class="classes")
   transition(:name="transition" appear @after-leave="onClose")
     w-card.w-dialog__content(
-      v-if="showContent"
+      v-show="showContent"
       no-border
       :color="color"
       :bg-color="bgColor"
@@ -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-bind="$attrs"
       @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-bind="$attrs"
       @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="modelValue"
+    v-if="showOverlay"
+    v-show="modelValue"
     :style="(modelValue && 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.modelValue
+  },
+
+  watch: {
+    modelValue (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"
@@ -172,7 +173,9 @@ export default {
     inputValue: [],
     showMenu: false,
     menuMinWidth: 0,
-    isFocused: false
+    isFocused: false,
+    selectingItem: false,
+    selectionWrapRef: undefined
   }),
 
   computed: {
@@ -209,7 +212,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-tabs/index.vue

@@ -122,6 +122,7 @@ export default {
       return {
         'w-tabs--card': this.card,
         'w-tabs--no-slider': this.noSlider,
+        'w-tabs--pill-slider': this.pillSlider,
         'w-tabs--fill-bar': this.fillBar,
         'w-tabs--init': this.init
       }
@@ -253,11 +254,11 @@ export default {
   &__bar {
     position: relative;
     display: flex;
-    // align-items: center;
     overflow-x: auto;
 
     &--center {justify-content: center;}
     &--right {justify-content: flex-end;}
+    .w-tabs--pill-slider & {padding-left: $base-increment;}
 
     .w-tabs--card &:after {
       content: '';
@@ -311,6 +312,7 @@ export default {
     &:active:before {opacity: 0.08;}
     &--disabled:before {display: none;}
   }
+  &--pill-slider &__bar-item:before {display: none;}
 
   // Bar Extra.
   // ------------------------------------------------------
@@ -331,6 +333,13 @@ export default {
     background-color: currentColor;
     transition: $transition-duration ease-in-out;
   }
+  &--pill-slider &__slider {
+    opacity: 0.1;
+    bottom: 15%;
+    height: 70%;
+    border-radius: 99em;
+  }
+
   &--init &__slider {transition: none;}
 
   // Content.

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
+      }
     }
   }
 }
@@ -58,16 +72,34 @@ export default {
   &--absolute, &--fixed {top: 0;left: 0;right: 0;}
   &--absolute {position: absolute;}
   &--fixed {position: fixed;}
+  &--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;}
+
+  // 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

@@ -134,6 +134,7 @@ export default {
   methods: {
     /**
      * Other methods in the `detachable` mixin:
+     * - `open`
      * - `getActivatorCoordinates`
      * - `computeDetachableCoords`
      * - `onResize`
@@ -157,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.$slots.activator && typeof this.activator === 'string'
+      if (this.$slots.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.$slots.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.$slots.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.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
       })
     }
 
@@ -285,7 +338,7 @@ export default {
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
     }
 
-    if (this.modelValue) this.toggleMenu({ type: 'click', target: this.activatorEl })
+    if (this.modelValue && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
   },
 
   beforeUnmount () {
@@ -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)
       })
     }