wave-ui 2.48.0 → 3.0.0

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

@@ -25,7 +25,6 @@ export default {
     modelValue: { type: [Boolean, Number], default: -1 },
     color: { type: String },
     bgColor: { type: String },
-    dark: { type: Boolean },
     shadow: { type: Boolean },
     tile: { type: Boolean },
     round: { type: Boolean },
@@ -38,7 +37,9 @@ export default {
     lg: { type: Boolean },
     xl: { type: Boolean },
     width: { type: [Number, String] },
-    height: { type: [Number, String] }
+    height: { type: [Number, String] },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue'],
@@ -58,7 +59,8 @@ export default {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: true,
-        'w-tag--dark': this.dark && !this.outline,
+        'w-tag--dark': this.dark,
+        'w-tag--light': this.light,
         'w-tag--clickable': this.modelValue !== -1,
         'w-tag--outline': this.outline,
         'w-tag--no-border': this.noBorder || this.shadow,
@@ -85,14 +87,16 @@ export default {
   justify-content: center;
   vertical-align: middle;
   border-radius: $border-radius;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background-color: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(var(--w-contrast-bg-color-rgb), 0.08);
+  background-color: rgba(var(--w-base-bg-color-rgb), 0.85);
   padding-left: 2 * $base-increment;
   padding-right: 2 * $base-increment;
   cursor: default;
   user-select: none;
 
-  &--dark {color: rgba(255, 255, 255, 0.95);}
+  @include themeable;
+
+  &--dark {color: rgba(var(--w-base-bg-color-rgb), 0.95);}
   &--outline {background-color: transparent;border-color: currentColor;}
   &--no-border {border-color: transparent;}
   &--round {border-radius: 99em;}
@@ -103,6 +107,7 @@ export default {
     $font-size: round(0.7 * $base-font-size);
     font-size: $font-size;
     line-height: $font-size + 2px;
+    padding: round(0.25 * $base-increment) $base-increment;
   }
   &.size--sm {
     $font-size: round(0.82 * $base-font-size);
@@ -150,7 +155,7 @@ export default {
     }
 
     &:hover {
-      .w-tag__closable {background-color: rgba(0, 0, 0, 0.1);}
+      .w-tag__closable {background-color: rgba(var(--w-contrast-bg-color-rgb), 0.1);}
     }
 
     // Overlay to mark the focus and active state.
@@ -171,19 +176,19 @@ export default {
 
     // Hover state.
     &:hover:before {background-color: currentColor;opacity: 0.06;}
-    &--dark:hover:before {background-color: rgba(255, 255, 255, 0.12);opacity: 1;}
+    &--dark:hover:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.12);opacity: 1;}
     &--outline:hover:before,
     &--text:hover:before {background-color: currentColor;opacity: 0.12;}
 
     // Focus state.
     &:focus:before {background-color: currentColor;opacity: 0.2;}
-    &--dark:focus:before {background-color: rgba(255, 255, 255, 0.12);}
+    &--dark:focus:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.12);}
     &--outline:focus:before,
     &--text:focus:before {background-color: currentColor;opacity: 0.12;}
 
     // Active state.
     &:active:before {background-color: currentColor;opacity: 0.2;}
-    &--dark:active:before {background-color: rgba(255, 255, 255, 0.2);}
+    &--dark:active:before {background-color: rgba(var(--w-base-bg-color-rgb), 0.2);}
     &--outline:active:before,
     &--text:active:before {background-color: currentColor;opacity: 0.2;}
   }

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

@@ -83,14 +83,15 @@ export default {
     color: { type: String, default: 'primary' },
     bgColor: { type: String },
     labelColor: { type: String, default: 'primary' },
-    dark: { type: Boolean },
     outline: { type: Boolean },
     shadow: { type: Boolean },
     noAutogrow: { type: Boolean },
     resizable: { type: Boolean }, // Toggle the HTML built-in bottom right corner resize handle.
     tile: { type: Boolean },
     rows: { type: [Number, String], default: 3 },
-    cols: { type: [Number, String] }
+    cols: { type: [Number, String] },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -132,6 +133,7 @@ export default {
         [`w-textarea--${this.hasValue ? 'filled' : 'empty'}`]: true,
         'w-textarea--focused': this.isFocused && !this.isReadonly,
         'w-textarea--dark': this.dark,
+        'w-textarea--light': this.light,
         'w-textarea--resizable': this.resizable,
         'w-textarea--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-textarea--no-padding': !this.outline && !this.bgColor && !this.shadow,
@@ -228,6 +230,8 @@ $inactive-color: #777;
   flex-wrap: wrap;
   font-size: $base-font-size;
 
+  @include themeable;
+
   // textarea wrapper.
   // ------------------------------------------------------
   &__textarea-wrap {

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-ul.w-timeline
+ul.w-timeline(:class="classes")
   li.w-timeline-item(v-for="(item, i) in items" :key="i")
     component.w-timeline-item__bullet(
       :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
@@ -23,16 +23,29 @@ export default {
     itemTitleKey: { type: String, default: 'title' },
     itemContentKey: { type: String, default: 'content' },
     itemIconKey: { type: String, default: 'icon' },
-    itemColorKey: { type: String, default: 'color' }
+    itemColorKey: { type: String, default: 'color' },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
-  emits: []
+  emits: [],
+
+  computed: {
+    classes () {
+      return {
+        'w-timeline--dark': this.dark,
+        'w-timeline--light': this.light
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 .w-timeline {
   margin-left: $base-increment;
+
+  @include themeable;
 }
 
 .w-timeline-item {
@@ -48,7 +61,7 @@ export default {
     position: absolute;
     top: 2px;
     left: 0;
-    background-color: #fff;
+    background-color: $timeline-bullet-color;
     border-radius: 1em;
     border: 1px solid currentColor;
     width: $base-font-size;
@@ -66,7 +79,7 @@ export default {
     top: 2px;
     bottom: -2px;
     left: -1px;
-    border-left: 2px solid #ddd;
+    border-left: 2px solid $timeline-bg-color;
   }
 }
 </style>

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

@@ -19,7 +19,9 @@ export default {
     width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
-    shadow: { type: Boolean }
+    shadow: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
@@ -41,6 +43,8 @@ export default {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
+        'w-toolbar--dark': this.dark,
+        'w-toolbar--light': this.light,
         'w-toolbar--absolute': !!this.absolute,
         'w-toolbar--fixed': !!this.fixed,
         [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: !this.vertical,
@@ -66,9 +70,11 @@ export default {
   flex: 1 1 auto;
   align-items: center;
   padding: (2 * $base-increment) (3 * $base-increment);
-  background-color: #fff;
+  background-color: $toolbar-bg-color;
   z-index: 10;
 
+  @include themeable;
+
   &--absolute, &--fixed {top: 0;left: 0;right: 0;}
   &--absolute {position: absolute;}
   &--fixed {position: fixed;}

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

@@ -32,7 +32,9 @@ export default {
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
     persistent: { type: Boolean },
-    delay: { type: Number }
+    delay: { type: Number },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Other props in the detachable mixin:
     // detachTo, appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
     // alignRight, noPosition, zIndex, activator.
@@ -78,6 +80,8 @@ export default {
         ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: !this.noPosition,
         [`w-tooltip--align-${this.alignment}`]: !this.noPosition && this.alignment,
+        'w-tooltip--dark': this.dark,
+        'w-tooltip--light': this.light,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
         'w-tooltip--shadow': this.shadow,
@@ -190,7 +194,7 @@ export default {
   position: absolute;
   padding: $base-increment round(1.5 * $base-increment);
   border-radius: $border-radius;
-  border: 1px solid #ddd;
+  border: 1px solid $tooltip-border-color;
   background-color: $tooltip-bg-color;
   pointer-events: none;
   color: $tooltip-color;
@@ -199,6 +203,8 @@ export default {
   width: max-content; // Not supported in IE11. :/
   z-index: 100;
 
+  @include themeable;
+
   &--fixed {position: fixed;z-index: 1000;}
 
   &--tile {border-radius: 0;}
@@ -218,12 +224,12 @@ export default {
 
   // Tooltip without border.
   &--no-border {
-    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px, 0);
+    @include triangle($tooltip-bg-color, '.w-tooltip', 7px, 0);
   }
 
   // Tooltip with border.
   &:not(&--no-border) {
-    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px);
+    @include triangle($tooltip-bg-color, '.w-tooltip', 7px);
   }
 }
 

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?.length || 0 }})
     component(
@@ -39,16 +44,15 @@ ul.w-tree(:class="classes")
         @click="$emit('click', $event)"
         @select="$emit('select', $event)"
         @update:model-value="$emit('update:model-value', $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,10 @@ 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.
+    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: ['update:model-value', 'before-open', 'open', 'before-close', 'close', 'click', 'select'],
@@ -100,6 +107,12 @@ 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.
@@ -107,8 +120,10 @@ export default {
           label: item.label,
           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 +150,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 +237,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 +287,7 @@ $expand-icon-size: 20px;
     position: relative;
     display: inline-flex;
     align-items: center;
+    user-select: none;
 
     &:before {
       content: '';
@@ -274,16 +298,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,52 +1,73 @@
 import { reactive, inject } from 'vue'
-import config, { mergeConfig } from './utils/config'
-import NotificationManager from './utils/notification-manager'
-import colors 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('')
+import { mergeConfig } from './utils/config'
+import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
+import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
+import { injectColorsCSSInDOM, injectCSSInDOM } from './utils/dynamic-css'
+import './scss/index.scss'
+
+let mounted = false
+const detectOSDarkMode = $waveui => {
+  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
+  $waveui.preferredTheme = matchMedia.matches ? 'dark' : 'light'
+  $waveui.switchTheme($waveui.preferredTheme)
+
+  matchMedia.addEventListener('change', event => {
+    $waveui.preferredTheme = event.matches ? 'dark' : 'light'
+    $waveui.switchTheme($waveui.preferredTheme)
+  })
 }
 
-// Keep the notification manager private.
-// @todo: find a way to use private fields with Vue 3 proxies.
-// https://github.com/tc39/proposal-class-fields/issues/106
-// https://github.com/tc39/proposal-class-fields/issues/227
-let notificationManager = null
+/**
+ * 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
+  static #registered = 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,
+      width: null
+    },
+    config: {},
+    colors: {}, // Object of pairs of color-name => color hex.
+    preferredTheme: null, // The user OS preferred theme (light or dark).
+    theme: null, // The current theme (light or dark).
+    _notificationManager: null,
+
+    // Callable from this.$waveui.
+    notify (...args) {
+      this._notificationManager.notify(...args)
+    },
+
+    // Callable from this.$waveui.
+    switchTheme (theme) {
+      this.theme = theme
+      document.documentElement.setAttribute('data-theme', theme)
+      document.head.querySelector('#wave-ui-colors')?.remove?.()
+      const themeColors = this.config.colors[this.theme]
+      injectColorsCSSInDOM(themeColors)
+      this.colors = flattenColors(themeColors, colorPalette)
+    }
   }
 
-  // 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 (app, options = {}) {
     // Register directives.
-    // for (const id in directives) {
-    //   if (directives[id]) app.directive(id, directives[id])
-    // }
     app.directive('focus', {
       // Wait for the next tick to focus the newly mounted element.
       mounted: el => setTimeout(() => el.focus(), 0)
@@ -62,71 +83,77 @@ export default class WaveUI {
 
     // Register a-la-carte components from the given list.
     const { components = {} } = options || {}
-    for (let id in components) {
+    for (const 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])
       app.component(component.name, component)
     }
 
     // Register mixins.
-    // app.mixin({
-    //   mounted () {
-    //   }
-    // })
+    app.mixin({
+      // Add a mixin to capture the first mounted hook, trigger the Wave UI init then unregister the mixin straight away.
+      beforeMount () {
+        if (!mounted) {
+          mounted = true
+          const $waveui = inject('$waveui')
+          const { config } = $waveui
+
+          // Add the .w-app class where defined by user or at the root.
+          const wApp = document.querySelector(config.on) || document.body
+          wApp.classList.add('w-app')
+
+          let themeColors = config.colors[config.theme]
+          if (config.theme === 'auto') {
+            detectOSDarkMode($waveui)
+            themeColors = config.colors[$waveui.preferredTheme]
+            $waveui.colors = flattenColors(themeColors, colorPalette)
+          }
+          injectColorsCSSInDOM(themeColors)
+          injectCSSInDOM($waveui)
+          injectNotifManagerInDOM(wApp, components, $waveui)
+
+          // This mixin must only run once, we can delete it.
+          app._context.mixins.find(mixin => mixin.mounted && delete mixin.mounted)
+        }
+      }
+    })
 
-    WaveUI.registered = true
+    new WaveUI(app, options)
+    WaveUI.#registered = true
   }
 
-  // Singleton.
   constructor (app, options = {}) {
-    if (WaveUI.instance) return WaveUI.instance
-
-    else {
-      if (!WaveUI.registered) app.use(WaveUI)
-      notificationManager = reactive(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 = {}
+    if (WaveUI.#registered) {
+      console.warn('Wave UI is already instantiated.')
+      return
+    }
 
-        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}`
+    if (!options.theme) options.theme = 'light'
+    // Move colors inside a theme if there are option.colors without theme.
+    // E.g. colors: { primary, ... } & not colors: { light { primary, ... }, dark: { primary, ... } })
+    const colors = { ...options.colors }
+    if (!options.colors?.light) options.colors.light = colors
+    if (!options.colors?.dark) options.colors.dark = colors
+    // Cleanup anything else than themes in config.colors.
+    options.colors = { light: options.colors.light, dark: options.colors.dark }
 
-          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
+    // Merge user options into the default config.
+    let { components, ...config } = options
+    config = this.$waveui.config = mergeConfig(config)
 
-            // 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
-          }
-        }
-      }
+    // Generates color shades for each color of each theme and store in the config.colors object.
+    if (config.css.colorShades) generateColorShades(config)
 
-      this.config = config
-      this.notify = (...args) => notificationManager.notify(...args)
-      WaveUI.instance = this
+    // Make Wave UI reactive and expose the single instance in the app.
+    const $waveui = reactive(this.$waveui)
+    app.config.globalProperties.$waveui = $waveui
+    app.provide('$waveui', $waveui)
 
-      // Make waveui reactive and expose the single instance in Vue.
-      app.config.globalProperties.$waveui = reactive(this)
-      app.provide('$waveui', WaveUI.instance)
+    if (config.theme !== 'auto') {
+      this.$waveui.colors = flattenColors(config.colors[config.theme], colorPalette)
     }
   }
-
-  notify (...args) {
-    notificationManager.notify(...args)
-  }
 }
-
-/**
- * Returns the WaveUI instance. Equivalent to using `$waveui` inside templates.
- */
-export const useWaveUI = () => inject('$waveui')