wave-ui 2.32.3 → 2.35.0

package/package.json

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

@@ -1,12 +1,12 @@
 <template lang="pug">
 component.w-icon(
   :is="tag || 'i'"
-  :class="classes"
   v-on="$attrs"
+  :class="classes"
   role="icon"
   aria-hidden="true"
-  :style="styles")
-  template(v-if="ligature") {{ ligature.icon }}
+  :style="readIcon() /* Always reacting to slot change when called from template. */ && styles")
+  template(v-if="hasLigature") {{ icon }}
 </template>
 
 <script>
@@ -41,15 +41,13 @@ export default {
   emits: [],
 
   data: () => ({
-    icon: ''
+    icon: '',
+    fontName: ''
   }),
 
   computed: {
-    ligature () {
-      if (!config.iconsLigature) return false
-
-      const [fontName, icon] = this.icon.split(' ')
-      return fontName === config.iconsLigature && { fontName, icon }
+    hasLigature () {
+      return config.iconsLigature === this.fontName
     },
     forcedSize () {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size)
@@ -66,7 +64,8 @@ export default {
     },
     classes () {
       return {
-        [this.icon]: true,
+        [this.fontName]: true,
+        [!this.hasLigature && this.icon]: !this.hasLigature && this.icon,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -80,8 +79,7 @@ export default {
         'w-icon--rotate-90': this.rotate90a,
         'w-icon--rotate-135': this.rotate135a,
         'w-icon--flip-x': this.flipX,
-        'w-icon--flip-y': this.flipY,
-        [this.ligature && this.ligature.fontName]: this.ligature
+        'w-icon--flip-y': this.flipY
       }
     },
     styles () {
@@ -89,14 +87,13 @@ export default {
     }
   },
 
-  created () {
-    this.icon = this.$slots.default && this.$slots.default()[0].children
-  },
-
-  // Using the slot content directly in the classes computed is not always reacting to changes.
-  // https://github.com/antoniandre/wave-ui/issues/81
-  updated () {
-    this.icon = this.$slots.default && this.$slots.default()[0].children
+  methods: {
+    readIcon () {
+      const { default: slot } = this.$slots
+      const [fontName = '', icon = ''] = typeof slot === 'function' && slot()[0].children.trim().split(' ') || []
+      this.fontName = fontName
+      this.icon = icon
+    }
   }
 }
 </script>
@@ -110,6 +107,7 @@ export default {
   justify-content: center;
   vertical-align: middle;
   user-select: none;
+  speak: never;
   line-height: 1;
   font-size: 1.2em;
   width: 1em;

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

@@ -29,6 +29,10 @@ component(
     @click="$refs.input.focus();$refs.input.click()"
     v-on="$attrs"
     :class="inputClasses")
+    .w-switch__track(v-if="$slots.track")
+      slot(name="track")
+    .w-switch__thumb(v-if="$slots.thumb")
+      slot(name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_.uid}`")
       slot
@@ -77,6 +81,8 @@ export default {
         'w-switch--disabled': this.isDisabled,
         'w-switch--readonly': this.isReadonly,
         'w-switch--ripple': this.ripple.start,
+        'w-switch--custom-thumb': this.$slots.thumb,
+        'w-switch--custom-track': this.$slots.track,
         'w-switch--rippled': this.ripple.end
       }
     },
@@ -186,8 +192,18 @@ $disabled-color: #ddd;
     }
   }
 
-  // Thumb.
-  &__input:after {
+  // Track slot, if any.
+  &__track {
+    position: absolute;
+    left: 100%;
+    padding: 0 4px;
+    transform: translateX(-100%);
+    @include default-transition;
+  }
+  .w-switch--on &__track {left: 0;transform: translateX(0);}
+
+  // Thumb: show either the thumb slot if any, or :after otherwise.
+  &__thumb, &__input:after {
     content: '';
     position: absolute;
     left: 0;
@@ -196,22 +212,28 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: #fff;
     border-radius: 100%;
+    text-align: center;
     @include default-transition;
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
 
-    :checked ~ & {transform: translateX(100%);}
+    .w-switch--on & {left: 100%;transform: translateX(-100%);}
 
     .w-switch--thin & {
       top: - round(0.15 * $small-form-el-size);
       transform: scale(1.1);
       box-shadow: $box-shadow;
     }
-    .w-switch--thin :checked ~ & {
-      transform: translateX(100%) scale(1.1);
+    .w-switch--thin.w-switch--on & {
+      transform: translateX(-100%) scale(1.1);
       background-color: currentColor;
     }
   }
+  &--custom-thumb &__input:after {display: none;}
+  &__thumb > * {
+    width: inherit;
+    height: inherit;
+  }
 
   // The focus outline & ripple on switch activation.
   &__input:before {
@@ -223,11 +245,12 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: currentColor;
     border-radius: 100%;
-    transform: translateX(100%) scale(0);
     opacity: 0;
     pointer-events: none;
     transition: 0.25s ease-in-out;
 
+    :checked ~ & {transform: translateX(-100%) scale(0);left: 100%;}
+
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
     .w-switch--thin & {top: - round(0.15 * $small-form-el-size);}
   }
@@ -242,14 +265,14 @@ $disabled-color: #ddd;
     opacity: 0.2;
   }
   :focus:checked ~ &__input:before {
-    transform: translateX(100%) scale(1.8);
+    transform: translateX(-100%) scale(1.8);
   }
 
   // After ripple reset to default state, then remove the class via js and the
   // `:focus ~ &__input:before` will re-transition to normal focused outline.
   &--rippled &__input:before {
     transition: none;
-    transform: translateX(100%) scale(0);
+    transform: translateX(-100%) scale(0);
     opacity: 0;
   }
 
@@ -264,7 +287,7 @@ $disabled-color: #ddd;
 }
 
 @keyframes w-switch-ripple {
-  0% {opacity: 0.8;transform: translateX(100%) scale(1);background-color: currentColor;} // Start with visible ripple.
-  100% {opacity: 0;transform: translateX(100%) scale(2.8);} // Propagate ripple to max radius and fade out.
+  0% {opacity: 0.8;transform: translateX(-100%) scale(1);background-color: currentColor;} // Start with visible ripple.
+  100% {opacity: 0;transform: translateX(-100%) scale(2.8);} // Propagate ripple to max radius and fade out.
 }
 </style>

package/src/wave-ui/components/w-tabs/index.vue

@@ -66,6 +66,7 @@ export default {
     titleClass: { type: String },
     activeClass: { type: String, default: 'primary' },
     noSlider: { type: Boolean },
+    pillSlider: { type: Boolean },
     sliderColor: { type: String, default: 'primary' },
     contentClass: { type: String },
     transition: { type: [String, Boolean], default: '' },
@@ -122,6 +123,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 +255,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 +313,7 @@ export default {
     &:active:before {opacity: 0.08;}
     &--disabled:before {display: none;}
   }
+  &--pill-slider &__bar-item:before {display: none;}
 
   // Bar Extra.
   // ------------------------------------------------------
@@ -331,6 +334,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>