wave-ui 1.62.0 → 1.63.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.62.0",
+  "version": "1.63.1",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

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

@@ -28,6 +28,7 @@ export { default as WProgress } from './w-progress.vue'
 export { default as WRadio } from './w-radio.vue'
 export { default as WRadios } from './w-radios.vue'
 export { default as WRating } from './w-rating.vue'
+export { default as WScrollbar } from './w-scrollbar.vue'
 export { default as WSelect } from './w-select.vue'
 export { default as WSlider } from './w-slider.vue'
 export { default as WSpinner } from './w-spinner.vue'

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

@@ -61,7 +61,15 @@ export default {
   computed: {
     buttonProps () {
       const { tooltip, tooltipProps, ...props } = this.$props
-      return { ...props, ...this.$attrs }
+      return {
+        ...props,
+        ...this.$attrs,
+        // Vue 2 specific:
+        // The classes and styles are not in $attrs. Add them from $vnode.data.staticClass, so
+        // the button gets these classes wen used with tooltip.
+        // https://v2.vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance
+        class: this.tooltip && this.$vnode.data.staticClass
+      }
     }
   }
 }

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

@@ -407,7 +407,10 @@ export default {
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
       this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => (this.listItems.find(item => item._value === val)._selected = true))
+        .forEach(val => {
+          const foundItem = this.listItems.find(item => item._value === val)
+          if (foundItem) foundItem._selected = true
+        })
     }
   },
 

package/src/wave-ui/components/w-notification-manager.vue

@@ -63,12 +63,12 @@ export default {
 .w-notification-manager {
   position: fixed;
   top: 0;
-  bottom: 0;
+  max-height: 100%;
   right: 0;
   z-index: 1000;
-  pointer-events: none;
   width: 280px;
   overflow-x: hidden;
+  overflow-y: auto;
 
   &--left {right: auto;left: 0;}
 
@@ -79,7 +79,6 @@ export default {
     right: 0;
     margin: 8px;
     flex-grow: 1;
-    pointer-events: all;
   }
 }
 </style>

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

@@ -0,0 +1,24 @@
+<template lang="pug">
+.w-scrollbar
+</template>
+
+<script>
+export default {
+  name: 'w-scrollbar',
+  props: {
+
+  },
+
+  emits: [],
+
+  data: () => ({
+
+  })
+}
+</script>
+
+<style lang="scss">
+.w-scrollbar {
+
+}
+</style>

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

@@ -525,7 +525,7 @@ export default {
     top: 50%;
     left: 0;
     right: 0;
-    // Use margin instead of padding as the scale transformation bellow decreases the real padding
+    // Use margin instead of padding as the scale transformation below decreases the real padding
     // size and misaligns the label.
     margin-left: 2 * $base-increment;
     transform: translateY(-50%);

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

@@ -820,10 +820,18 @@ $tr-border-top: 1px;
 
 // Mobile layout.
 .w-table--mobile {
+  display: flex;
+
   thead {display: none;}
-  td {display: block;}
+  tbody {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
   tr {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
     padding-top: $base-increment;
     padding-bottom: $base-increment;
   }

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

@@ -4,22 +4,27 @@ ul.w-tree(:class="classes")
     v-for="(item, i) in currentDepthItems"
     :key="i"
     :class="itemClasses(item)")
-    .w-tree__item-label(
-      @click="!disabled && onLabelClick(item, $event)"
-      @keydown="!disabled && onLabelKeydown(item, $event)"
-      :tabindex="!disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+    //- The keys `route` & `disabled` are always present in any currentDepthItems.
+    component.w-tree__item-label(
+      :is="!disabled && !item.disabled && item.route ? (!$router || hasExternalLink(item) ? 'a' : 'router-link') : 'div'"
+      v-bind="item.route && { [!$router || hasExternalLink(item) ? 'href' : 'to']: item.route }"
+      @click="!disabled && !item.disabled && onLabelClick(item, $event)"
+      @keydown="!disabled && !item.disabled && onLabelKeydown(item, $event)"
+      :tabindex="!disabled && !item.disabled && (item.children || item.branch || selectable) && !(unexpandableEmpty && !item.children) ? 0 : null")
+      //- @click.stop to not follow link if item is a link.
       w-button.w-tree__item-expand(
         v-if="(item.children || item.branch) && ((expandOpenIcon && item.open) || expandIcon) && !(unexpandableEmpty && !item.children)"
+        @click.stop="!disabled && !item.disabled && onLabelClick(item, $event)"
         color="inherit"
         :icon="(item.open && expandOpenIcon) || expandIcon"
         :icon-props="{ rotate90a: !item.open }"
         :tabindex="-1"
-        :disabled="disabled"
+        :disabled="disabled || item.disabled"
         text
         sm)
-      slot(name="item-label" :item="item.originalItem" :depth="depth" :open="item.open")
+      slot(name="item" :item="item.originalItem" :depth="depth" :open="item.open")
         w-icon(v-if="itemIcon(item)" class="w-tree__item-icon" :color="item.originalItem[itemIconColorKey] || iconColor") {{ itemIcon(item) }}
-        span {{ item.label }}
+        span(v-html="item.label")
         span.ml1(v-if="counts && (item.children || item.branch)").
           ({{ item.originalItem.children ? item.originalItem.children.length : 0 }})
     component(
@@ -39,16 +44,15 @@ ul.w-tree(:class="classes")
         @click="$emit('click', $event)"
         @select="$emit('select', $event)"
         @input="$emit('input', $event)")
-        template(#item-label="{ item, depth, open }")
-          slot(name="item-label" :item="item" :depth="depth" :open="open")
+        template(#item="{ item, depth, open }")
+          slot(name="item" :item="item" :depth="depth" :open="open")
 </template>
 
 <script>
+import { consoleWarn } from '../utils/console'
 /**
- * @todo things to support:
- * - items routes
- * - icon per item
- * - left border?
+ * @todo:
+ * - option to add a left border.
  **/
 
 export default {
@@ -74,7 +78,11 @@ export default {
     counts: { type: Boolean },
     itemIconKey: { type: String, default: 'icon' }, // Support a different icon per item.
     iconColor: { type: String }, // Applies a color on all the label item icons.
-    itemIconColorKey: { type: String, default: 'iconColor' } // Applies a specific color on each label item icons.
+    itemLabelKey: { type: String, default: 'label' }, // Specify a different key for the item label.
+    itemIconColorKey: { type: String, default: 'iconColor' }, // Applies a specific color on each label item icons.
+    itemRouteKey: { type: String, default: 'route' }, // Uses a router link if the item has the `route` key.
+    itemDisabledKey: { type: String, default: 'disabled' }, // Disables the item click and selection.
+    itemOpenKey: { type: String, default: 'open' } // Open the item by default.
   },
 
   emits: ['input', 'before-open', 'open', 'before-close', 'close', 'click', 'select'],
@@ -100,15 +108,23 @@ export default {
     updateCurrentDepthTree (items, oldItems = []) {
       this.currentDepthItems = []
 
+      if (!Array.isArray(items) && typeof items !== 'object') {
+        return consoleWarn(`[w-tree] the tree items must be of type array or object, ${typeof items} received.`, items)
+      }
+
+      if (!Array.isArray(items)) items = [items]
+
       items.forEach((item, i) => {
         this.currentDepthItems.push({
           originalItem: item, // Store the original item to return it on event emits.
           _uid: this.depth.toString() + (i + 1),
-          label: item.label,
+          label: item[this.itemLabelKey],
           children: !!item.children, // The children tree remains available in originalItem.
           branch: item.branch,
+          route: item[this.itemRouteKey],
+          disabled: item[this.itemDisabledKey],
           depth: this.depth,
-          open: !!(oldItems[i]?.open || this.expandAll)
+          open: !!(oldItems[i]?.open || this.expandAll || item[this.itemOpenKey])
         })
       })
     },
@@ -135,6 +151,9 @@ export default {
     },
 
     onLabelClick (item, e) {
+      const route = item[this.itemRouteKey]
+      if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
+
       this.$emit('click', { item: item.originalItem, depth: this.depth, e })
       if (item.children || (item.branch && !this.unexpandableEmpty)) this.expandDepth(item)
 
@@ -219,9 +238,14 @@ export default {
       )
     },
 
+    hasExternalLink (item) {
+      return /^(https?:)?\/\/|mailto:|tel:/.test(item[this.itemRouteKey])
+    },
+
     itemClasses (item) {
       return {
         [item.children || item.branch ? 'w-tree__item--branch' : 'w-tree__item--leaf']: true,
+        'w-tree__item--disabled': item[this.itemDisabledKey],
         'w-tree__item--empty': item.branch && !item.children,
         'w-tree__item--unexpandable': item.branch && !item.children && this.unexpandableEmpty
       }
@@ -264,6 +288,7 @@ $expand-icon-size: 20px;
     position: relative;
     display: inline-flex;
     align-items: center;
+    user-select: none;
 
     &:before {
       content: '';
@@ -274,16 +299,24 @@ $expand-icon-size: 20px;
       right: - $base-increment - 2px;
       border-radius: $border-radius;
     }
+    &:hover:before {background-color: rgba($primary, 0.05);}
     &:focus:before {background-color: rgba($primary, 0.1);}
   }
   &__item--leaf &__item-label:before {
     left: - $base-increment;
     right: - $base-increment;
   }
+  &__item--disabled &__item-label {opacity: 0.5;}
+  &__item--disabled &__item-label:before {display: none;}
 
   &__item-expand {margin-right: 2px;}
 
   &__item--branch > &__item-label {cursor: pointer;}
+  &__item--disabled > &__item-label {
+    color: $disabled-color;
+    cursor: not-allowed;
+    -webkit-tap-highlight-color: transparent;
+  }
   &__item--unexpandable > &__item-label {
     margin-left: $expand-icon-size + 2px;
     cursor: auto;

package/src/wave-ui/core.js

@@ -1,40 +1,45 @@
-import config, { mergeConfig } from './utils/config'
+import { mergeConfig } from './utils/config'
 import NotificationManager from './utils/notification-manager'
-import colors from './utils/colors'
+import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
 // import * as directives from './directives'
 
-const shadeColor = (color, amount) => {
-  return '#' + color.slice(1).match(/../g)
-    .map(x => (x =+ `0x${x}` + amount, x < 0 ? 0 : ( x > 255 ? 255 : x)).toString(16).padStart(2, 0))
-    .join('')
+/**
+ * Inject presets into a Vue component props defaults before its registration into the app.
+ *
+ * @param {Object} component the Vue component to inject presets into.
+ * @param {Object} presets the presets to inject. E.g. `{ bgColor: 'green' }`.
+ */
+const injectPresets = (component, presets) => {
+  for (const preset in presets) {
+    component.props[preset].default = presets[preset]
+  }
 }
 
 export default class WaveUI {
   static instance = null
   static vueInstance = null // Needed until constructor is called.
-  #notificationManager
 
-  // Public breakpoint object. Accessible from this.$waveui.breakpoint.
-  breakpoint = {
-    name: '',
-    xs: false,
-    sm: false,
-    md: false,
-    lg: false,
-    xl: false
+  // Exposed as a global object and also `app.provide`d.
+  // Accessible from this.$waveui, or inject('$waveui').
+  $waveui = {
+    breakpoint: {
+      name: '',
+      xs: false,
+      sm: false,
+      md: false,
+      lg: false,
+      xl: false
+    },
+    config: {},
+    colors: {}, // Object of pairs of color-name => color hex.
+    _notificationManager: null,
+
+    // Callable from this.$waveui.
+    notify (...args) {
+      this._notificationManager.notify(...args)
+    }
   }
 
-  // A public object containing pairs of color-name => color hex.
-  // Accessible from anywhere via `this.$waveui.colors`.
-  // These colors generate the CSS in `w-app` on mounted.
-  colors = colors.reduce((obj, color) => {
-    obj[color.label] = color.color
-    color.shades.forEach(shade => (obj[shade.label] = shade.color))
-    return obj
-  }, { ...config.colors, black: '#000', white: '#fff', transparent: 'transparent', inherit: 'inherit' })
-
-  config = {} // Store and expose the config in the $waveui object.
-
   static install (Vue, options = {}) {
     // Register directives.
     // for (const id in directives) {
@@ -57,6 +62,8 @@ export default class WaveUI {
     const { components = {} } = options || {}
     for (let id in components) {
       const component = components[id]
+      // If presets are defined for this component inject them into the props defaults.
+      if (options.presets?.[component.name]) injectPresets(component, options.presets[component.name])
       Vue.component(component.name, component)
     }
 
@@ -74,53 +81,22 @@ export default class WaveUI {
   constructor (options = {}) {
     if (WaveUI.instance) return WaveUI.instance
 
-    else {
-      this.#notificationManager = new NotificationManager()
-
-      // Merge user options into the default config.
-      mergeConfig(options)
-
-      // Add color shades for each custom color given in options.
-      if (config.css.colorShades) {
-        config.colorShades = {}
-
-        for (let color in config.colors) {
-          color = { label: color, color: config.colors[color].replace('#', '') }
-          const col = color.color
-          if (col.length === 3) color.color = col[0] + '' + col[0] + col[1] + col[1] + col[2] + col[2]
+    this.$waveui._notificationManager = new NotificationManager()
 
-          this.colors[color.label] = `#${color.color}`
+    // Merge user options into the default config.
+    this.$waveui.config = mergeConfig(options)
+    const config = this.$waveui.config
 
-          for (let i = 1; i <= 3; i++) {
-            const lighterColor = shadeColor(`#${color.color}`, i * 40)
-            const darkerColor = shadeColor(`#${color.color}`, -i * 40)
-            this.colors[`${color.label}-light${i}`] = lighterColor
-            this.colors[`${color.label}-dark${i}`] = darkerColor
+    // Generates color shades for each color of each theme and store in the config.colors object.
+    if (config.css.colorShades) generateColorShades(config)
+    this.$waveui.colors = flattenColors(config.colors, colorPalette)
 
-            // Adding the shades to the config object to generate the CSS from w-app.
-            config.colorShades[`${color.label}-light${i}`] = lighterColor
-            config.colorShades[`${color.label}-dark${i}`] = darkerColor
-          }
-        }
-      }
-
-      this.config = config
-      this.notify = (...args) => notificationManager.notify(...args)
-      WaveUI.instance = this
+    WaveUI.instance = this
 
-      // Make waveui reactive and expose the single instance in Vue.
-      WaveUI.vueInstance.prototype.$waveui = WaveUI.vueInstance.observable(this)
+    // Make Wave UI reactive and expose the single instance in the app.
+    const $waveui = WaveUI.vueInstance.observable(this.$waveui)
+    WaveUI.vueInstance.prototype.$waveui = $waveui
 
-      delete WaveUI.vueInstance // Get rid of the Vue instance that we don't need anymore.
-    }
-  }
-
-  notify (...args) {
-    this.#notificationManager.notify(...args)
+    delete WaveUI.vueInstance // Get rid of the Vue instance that we don't need anymore.
   }
 }
-
-/**
- * Returns the WaveUI instance. Equivalent to using `$waveui` inside templates.
- */
-export const useWaveUI = () => inject('$waveui')

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

@@ -170,7 +170,7 @@
 
     // Sizes.
     // ----------------------------------------------
-    // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
+    // In all the sizes below, round(x / 2) * 2 to always have even numbers.
     // Different heights with a mix of odd and even numbers will misalign
     // when vertically centering (vertical-align or align-items center).
     .size--xs {font-size: round(0.85 * $base-font-size);}

package/src/wave-ui/utils/colors.js

@@ -1,4 +1,54 @@
-export default [
+const shadeColor = (color, amount) => {
+  return '#' + color.slice(1).match(/../g)
+    .map(x => {
+      x = +`0x${x}` + amount
+      return (x < 0 ? 0 : (x > 255 ? 255 : x)).toString(16).padStart(2, 0)
+    })
+    .join('')
+}
+
+/**
+ * Generates the color shades for each custom color and status colors for the current theme (only),
+ * and save it in the config object.
+ *
+ * @param {Object} config
+ */
+export const generateColorShades = config => {
+  config.shades = {}
+
+  for (let color in config.colors) {
+    color = { label: color, color: config.colors[color].replace('#', '') }
+    const col = color.color
+    if (col.length === 3) color.color = col[0] + '' + col[0] + col[1] + col[1] + col[2] + col[2]
+
+    for (let i = 1; i <= 3; i++) {
+      const lighterColor = shadeColor(`#${color.color}`, i * 40)
+      const darkerColor = shadeColor(`#${color.color}`, -i * 40)
+
+      // Adding the shades to the config object to generate the CSS from w-app.
+      config.shades[`${color.label}-light${i}`] = lighterColor
+      config.shades[`${color.label}-dark${i}`] = darkerColor
+    }
+  }
+}
+
+export const flattenColors = (themeColors, colorPalette) => {
+  const colors = {
+    ...colorPalette.reduce((obj, color) => {
+      obj[color.label] = color.color
+      const shades = (color.shades || []).reduce((obj, color) => {
+        obj[color.label] = color.color
+        return obj
+      }, {})
+      return { ...obj, ...shades }
+    }, { ...themeColors, ...themeColors.shades })
+  }
+  delete colors.shades
+
+  return colors
+}
+
+export const colorPalette = [
   {
     label: 'pink',
     color: '#e91e63',
@@ -342,5 +392,9 @@ export default [
       { label: 'grey-dark5', color: '#353535' },
       { label: 'grey-dark6', color: '#252525' }
     ]
-  }
+  },
+  { label: 'black', color: '#000' },
+  { label: 'white', color: '#fff' },
+  { label: 'transparent', color: 'transparent' },
+  { label: 'inherit', color: 'inherit' }
 ]

package/src/wave-ui/utils/config.js

@@ -11,7 +11,7 @@ const config = Vue.observable({
   },
   css: {
     // Generate shades for custom colors and status colors.
-    // Palette color shades are always generated with palette.
+    // Note: the color palette shades are always generated separately from SCSS.
     colorShades: true,
 
     // Generate palette colors and palette color shades.
@@ -27,10 +27,10 @@ const config = Vue.observable({
   colors: {
     primary: '#234781',
     secondary: '#d3ebff',
-    success: '#54b946',
-    error: '#f65555',
+    info: '#3d9ff5',
     warning: '#f80',
-    info: '#3d9ff5'
+    success: '#54b946',
+    error: '#f65555'
   },
   icons: [],
   iconsLigature: false,
@@ -44,9 +44,18 @@ const config = Vue.observable({
 export { config as default }
 
 export const mergeConfig = (options, conf = config) => {
-  for (const key in options) {
-    const option = options[key]
-    if (typeof option === 'object') mergeConfig(options[key], conf[key])
-    else conf[key] = option
+  // If the conf object is empty, populate with options (case of presets).
+  if (!Object.keys(conf).length) conf = Object.assign(conf, options)
+
+  else {
+    for (const key in options) {
+      const option = options[key]
+      if (typeof option === 'object') {
+        mergeConfig(options[key], conf[key])
+      }
+      else conf[key] = option
+    }
   }
+
+  return conf
 }

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

@@ -19,8 +19,8 @@ const generateColors = config => {
   }
 
   // Color shades are generated in core.js, if the option is on.
-  if (config.css.colorShades && config.colorShades) {
-    Object.entries(config.colorShades).forEach(([label, color]) => {
+  if (config.css.colorShades && config.shades) {
+    Object.entries(config.shades).forEach(([label, color]) => {
       styles +=
         `${cssScope} .${label}--bg{background-color:${color}}` +
         `${cssScope} .${label}{color:${color}}`

package/src/wave-ui/utils/notification-manager.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 export default class NotificationManager {
-  static instance
+  static #instance
   notifications
   // Private fields.
   #uid // A unique ID for each notification.
@@ -9,9 +9,9 @@ export default class NotificationManager {
 
   constructor () {
     // Singleton pattern.
-    if (NotificationManager.instance) return NotificationManager.instance
+    if (NotificationManager.#instance) return NotificationManager.#instance
 
-    NotificationManager.instance = this
+    NotificationManager.#instance = this
     this.notifications = []
     this.#uid = 0
     this.#notificationDefaults = {