wave-ui 1.49.3 → 1.51.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wave-ui",
-  "version": "1.49.3",
-  "description": "An emerging UI framework for Vue.js & Vue 3 with only the bright side. :sunny:",
+  "version": "1.51.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",
   "unpkg": "dist/wave-ui.umd.js",

package/src/wave-ui/components/index.js

@@ -16,6 +16,7 @@ export { default as WDrawer } from './w-drawer.vue'
 export { default as WFlex } from './w-flex.vue'
 export { default as WForm } from './w-form.vue'
 export { default as WFormElement } from './w-form-element.vue'
+export { default as WGrid } from './w-grid.vue'
 export { default as WIcon } from './w-icon.vue'
 export { default as WImage } from './w-image.vue'
 export { default as WInput } from './w-input.vue'

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-flex.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
-component.w-flex-wrap(v-if="gap" :is="tag")
-  .w-flex(:class="classes")
-    slot
-component.w-flex(v-else :class="classes" :is="tag")
+component.w-flex(:class="classes" :is="tag")
   slot
 </template>
 
@@ -28,7 +25,7 @@ export default {
     justifySpaceAround: { type: Boolean },
     justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
-    gap: { type: Number, default: 0 }
+    gap: { type: [Number, String], default: 0 }
   },
 
   computed: {
@@ -51,7 +48,7 @@ export default {
         'justify-space-around': this.justifySpaceAround,
         'justify-space-evenly': this.justifySpaceEvenly,
         'basis-zero': this.basisZero,
-        [`w-flex--gap${this.gap}`]: this.gap
+        [`gap${this.gap}`]: ~~this.gap
       }
     }
   }
@@ -68,12 +65,5 @@ export default {
   &.wrap {flex-wrap: wrap;}
   &.basis-zero > * {flex-basis: 0;flex-grow: 1;}
   &.basis-zero > .no-grow, &.basis-zero > .shrink {flex-grow: 0;}
-
-  @for $i from 1 through 12 {
-    // Divide by 2 as there are 2 elements having this space.
-    $space: round($base-increment * divide($i, 2));
-    &--gap#{$i} {margin: -$space;}
-    &--gap#{$i} > * {margin: $space;}
-  }
 }
 </style>

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

@@ -0,0 +1,82 @@
+<template lang="pug">
+component.w-grid(:class="classes" :is="tag")
+  slot
+</template>
+
+<script>
+export default {
+  name: 'w-grid',
+  props: {
+    tag: { type: String, default: 'div' },
+    columns: { type: [Number, Object, String] },
+    gap: { type: [Number, Object, String], default: 0 }
+  },
+
+  computed: {
+    breakpointsColumns () {
+      let columns = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 }
+      switch (typeof this.columns) {
+        case 'object':
+          columns = Object.assign(columns, this.columns)
+          break
+        case 'number':
+        case 'string':
+          columns = Object.keys(columns).reduce((obj, breakpoint) => (obj[breakpoint] = ~~this.columns), {})
+          break
+        default:
+          break
+      }
+      return columns
+    },
+
+    breakpointsGap () {
+      let gap = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 }
+      switch (typeof this.gap) {
+        case 'object':
+          gap = Object.assign(gap, this.gap)
+          break
+        case 'number':
+        case 'string':
+          gap = Object.keys(gap).reduce((obj, breakpoint) => (obj[breakpoint] = ~~this.gap), {})
+          break
+        default:
+          break
+      }
+      return gap
+    },
+
+    classes () {
+      let breakpointsColumns = null
+      if (typeof this.columns === 'object') {
+        breakpointsColumns = Object.entries(this.breakpointsColumns).reduce((obj, [breakpoint, columns]) => {
+          obj[`${breakpoint}-columns${columns}`] = true
+          return obj
+        }, {})
+      }
+
+      let breakpointsGap = null
+      if (typeof this.gap === 'object') {
+        breakpointsGap = Object.entries(this.breakpointsGap).reduce((obj, [breakpoint, gap]) => {
+          obj[`${breakpoint}-gap${gap}`] = true
+          return obj
+        }, {})
+      }
+
+      return {
+        ...(breakpointsColumns || { [`columns${this.columns}`]: this.columns }),
+        ...(breakpointsGap || { [`gap${this.gap}`]: this.gap })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.w-grid {
+  display: grid;
+
+  @for $i from 1 through 12 {
+    &.columns#{$i} {grid-template-columns: repeat($i, 1fr);}
+  }
+}
+</style>

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,5 +1,5 @@
 <template lang="pug">
-transition(name="fade" mode="out-in" appear)
+transition(name="fade" appear @after-leave="$emit('closed')")
   .w-overlay(
     v-if="value"
     :style="(value && styles) || null"
@@ -24,7 +24,7 @@ export default {
     persistentNoAnimation: { type: Boolean }
   },
 
-  emits: ['input', 'update:modelValue', 'click', 'close'],
+  emits: ['input', 'update:modelValue', 'click', 'close', 'closed'],
 
   data: () => ({
     persistentAnimate: false
@@ -60,7 +60,7 @@ 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)
@@ -85,6 +85,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-tooltip.vue

@@ -129,6 +129,7 @@ export default {
   methods: {
     /**
      * Other methods in the `detachable` mixin:
+     * - `open`
      * - `getActivatorCoordinates`
      * - `computeDetachableCoords`
      * - `onResize`
@@ -152,37 +153,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,18 +338,21 @@ 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 () {
+  // Must be on destroy and not before destroy, so that when used in a dialog, we wait for the end
+  // of the animation before removing the activator element.
+  // https://github.com/antoniandre/wave-ui/issues/82
+  destroy () {
     this.close()
 
     this.removeFromDOM()
 
     // 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)
       })
     }

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

@@ -212,3 +212,8 @@
     // ----------------------------------------------
   }
 }
+
+@for $i from 1 through 12 {
+  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: round($base-increment * $i);}
+}
+.w-flex.gap0, .w-grid.gap0 {gap: 0;}

package/src/wave-ui/utils/dynamic-css.js

@@ -150,7 +150,7 @@ const generateBreakpointSpaces = () => {
 
 const genBreakpointLayoutClasses = () => {
   let styles = ''
-  const { cssScope } = cssVars
+  const { cssScope, baseIncrement } = cssVars
   const layoutClasses = [
     'show{display:block}',
     'hide{display:none}',
@@ -185,6 +185,7 @@ const genBreakpointLayoutClasses = () => {
     'justify-space-around{justify-content:space-around}',
     'justify-space-evenly{justify-content:space-evenly}'
   ]
+  const array12 = Array(12).fill()
 
   // Define media queries for each breakpoint: xs, sm, md, lg, xl.
 
@@ -194,6 +195,10 @@ const genBreakpointLayoutClasses = () => {
       styles +=
         `@media(min-width:${min}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}u-${rule}`).join('') +
+        // w-grid columns and gap.
+        array12.map((item, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((item, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        `.w-flex.${label}u-gap0,.w-flex.${label}u-gap0{gap:0}` +
         '}'
     }
   })
@@ -202,6 +207,10 @@ const genBreakpointLayoutClasses = () => {
     styles +=
       `@media (min-width:${min}px) and (max-width:${max}px){` +
       layoutClasses.map(rule => `${cssScope} .${label}-${rule}`).join('') +
+      // w-grid columns and gap.
+      array12.map((item, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+      array12.map((item, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+      `.w-flex.${label}-gap0,.w-flex.${label}-gap0{gap:0}` +
       '}'
   })
 
@@ -210,6 +219,10 @@ const genBreakpointLayoutClasses = () => {
       styles +=
         `@media (max-width:${max}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}d-${rule}`).join('') +
+        // w-grid columns and gap.
+        array12.map((item, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((item, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        `.w-flex.${label}d-gap0,.w-flex.${label}d-gap0{gap:0}` +
         '}'
     }
   })