wave-ui 2.32.1 → 2.33.0

package/package.json

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

@@ -32,20 +32,21 @@
     transition(:name="transitionName" :mode="transitionMode")
       keep-alive
         //- Keep-alive only works with components, not with DOM nodes.
-        tab-content(:key="activeTab._index" :class="contentClass")
-          slot(
-            v-if="$slots[`item-content.${activeTab.id || activeTab._index + 1}`]"
-            :name="`item-content.${activeTab.id || activeTab._index + 1}`"
-            :item="getOriginalItem(activeTab)"
-            :index="activeTab._index + 1"
-            :active="activeTab._index === activeTabIndex")
-          slot(
-            v-else
-            name="item-content"
-            :item="getOriginalItem(activeTab)"
-            :index="activeTab._index + 1"
-            :active="activeTab._index === activeTabIndex")
-            div(v-html="activeTab[itemContentKey]")
+        tab-content(:key="activeTab._index" :item="activeTab" :class="contentClass")
+          template(#default="{ item }")
+            slot(
+              v-if="$slots[`item-content.${item._index + 1}`]"
+              :name="`item-content.${item._index + 1}`"
+              :item="getOriginalItem(item)"
+              :index="item._index + 1"
+              :active="item._index === activeTab._index")
+            slot(
+              v-else
+              name="item-content"
+              :item="getOriginalItem(item)"
+              :index="item._index + 1"
+              :active="item._index === activeTab._index")
+              div(v-if="item[itemContentKey]" v-html="item[itemContentKey]")
 </template>
 
 <script>
@@ -121,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
       }
@@ -252,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: '';
@@ -310,6 +312,7 @@ export default {
     &:active:before {opacity: 0.08;}
     &--disabled:before {display: none;}
   }
+  &--pill-slider &__bar-item:before {display: none;}
 
   // Bar Extra.
   // ------------------------------------------------------
@@ -330,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-tabs/tab-content.vue

@@ -1,8 +1,11 @@
 <template lang="pug">
 .w-tabs__content
-  slot
+  slot(:item="item")
 </template>
 
 <script>
 // Keep-alive only works with components, not with DOM nodes.
+export default {
+  props: { item: Object }
+}
 </script>

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/core.js

@@ -2,7 +2,6 @@ import { reactive } from 'vue'
 import config, { mergeConfig } from './utils/config'
 import NotificationManager from './utils/notification-manager'
 import colors from './utils/colors'
-import { consoleWarn } from './utils/console'
 // import * as directives from './directives'
 
 const shadeColor = (col, amt) => {