wave-ui 2.47.0 → 3.0.0

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

@@ -147,7 +147,6 @@ export default {
     step: { type: [Number, String] },
     min: { type: [Number, String] },
     max: { type: [Number, String] },
-    dark: { type: Boolean },
     outline: { type: Boolean },
     round: { type: Boolean },
     shadow: { type: Boolean },
@@ -158,7 +157,9 @@ export default {
     showProgress: { type: [Boolean] }, // Only for file uploads.
     // Allow syncing the files 1 way: prefilling a file is not possible.
     // https://stackoverflow.com/questions/16365668/pre-populate-html-form-file-input
-    files: { type: Array }
+    files: { type: Array },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -251,6 +252,7 @@ export default {
         [`w-input--${this.hasValue || this.isAutofilled ? 'filled' : 'empty'}`]: true,
         'w-input--focused': this.isFocused && !this.isReadonly,
         'w-input--dark': this.dark,
+        'w-input--light': this.light,
         'w-input--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
         'w-input--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,
         'w-input--has-placeholder': this.placeholder,

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

@@ -194,7 +194,7 @@ export default {
         // eslint-disable-next-line vue/custom-event-name-casing
         else if (e.keyCode === 27) this.$emit('keydown:escape')
         // On arrow keys press, navigate to prev/next item.
-        else if (this.arrowsNavigation) {
+        else if (this.arrowsNavigation && [38, 40].includes(e.keyCode)) {
           e.preventDefault()
           if (e.keyCode === 38) this.focusPrevNextItem(li._index, false)
           if (e.keyCode === 40) this.focusPrevNextItem(li._index, true)

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

@@ -73,7 +73,9 @@ export default {
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
     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.
@@ -153,7 +155,9 @@ export default {
         'w-menu--round': this.round,
         'w-menu--arrow': this.arrow,
         'w-menu--shadow': this.shadow,
-        'w-menu--fixed': this.fixed
+        'w-menu--fixed': this.fixed,
+        'w-menu--dark': this.dark,
+        'w-menu--light': this.light
       }
     },
 
@@ -272,9 +276,12 @@ export default {
 .w-menu {
   position: absolute;
   z-index: 100;
+  color: $menu-color;
+
+  @include themeable;
 
   &--fixed {position: fixed;z-index: 1000;}
-  &--card {background-color: #fff;}
+  &--card {background-color: $menu-bg-color;}
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
@@ -293,7 +300,7 @@ export default {
     &.w-menu--left {margin-left: -4 * $base-increment;}
     &.w-menu--right {margin-left: 4 * $base-increment;}
 
-    @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
+    @include triangle($menu-bg-color, '.w-menu', 9px);
   }
 }
 </style>

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

@@ -1,36 +1,31 @@
 <template lang="pug">
-transition-group(
-  tag="div"
-  class="w-notification-manager"
-  :class="{ 'w-notification-manager--left': conf.align === 'left' }"
-  :name="transition"
-  appear)
-  template(v-for="notif in notifications")
-    w-alert.white--bg(
-      v-if="notif._value"
-      :key="notif._uid"
-      v-model="notif._value"
-      @close="notifManager.dismiss(notif._uid)"
-      v-bind="notifProps(notif)")
-      div(v-html="notif.message")
+teleport(to=".w-app")
+  transition-group(
+    tag="div"
+    class="w-notification-manager"
+    :class="{ 'w-notification-manager--left': conf.align === 'left' }"
+    :name="transition"
+    appear)
+    template(v-for="notif in notifications")
+      w-alert.white--bg(
+        v-if="notif._value"
+        :key="notif._uid"
+        v-model="notif._value"
+        @close="notif.dismiss"
+        v-bind="notifProps(notif)")
+        div(v-html="notif.message")
 </template>
 
 <script>
-import NotificationManager from '../utils/notification-manager'
-
 export default {
   name: 'w-notification-manager',
 
-  data: () => ({
-    notifManager: null
-  }),
-
   computed: {
     conf () {
       return this.$waveui.config.notificationManager
     },
     notifications () {
-      return this.notifManager?.notifications || []
+      return this.$waveui._notificationManager?.notifications
     },
     // Possible transitions: slide-fade-down, slide-fade-left, slide-fade-right,
     // slide-left, slide-right, bounce, twist, fade, scale, scale-fade.
@@ -44,17 +39,10 @@ export default {
   methods: {
     notifProps (notif) {
       const { _value, _uid, message, timeout, ...props } = notif
+      // Replace the dismiss function with bool as expected from the w-alert component.
+      if (props.dismiss) props.dismiss = true
       return props
     }
-  },
-
-  created () {
-    this.notifManager = new NotificationManager()
-  },
-
-  beforeUnmount () {
-    this.notifManager.notifications = []
-    delete this.notifManager
   }
 }
 </script>

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

@@ -45,7 +45,9 @@ export default {
     sm: { type: Boolean },
     md: { type: Boolean },
     lg: { type: Boolean },
-    xl: { type: Boolean }
+    xl: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue', 'close'],
@@ -114,6 +116,8 @@ export default {
 
     classes () {
       return {
+        'w-notification--dark': this.dark,
+        'w-notification--light': this.light,
         'w-notification--absolute': this.absolute,
         [`w-notification--${this.position.join(' w-notification--')}`]: true
       }
@@ -170,6 +174,8 @@ export default {
   z-index: 300;
   pointer-events: none;
 
+  @include themeable;
+
   // Position.
   &--absolute {position: absolute;z-index: 400;}
   &--top {top: 0;padding-top: 2 * $base-increment;}

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

@@ -11,7 +11,7 @@
       //- Background first, in SVG there is no z-index.
       circle.bg(
         v-if="bgColor || this.progressValue > -1"
-        :class="bgColor"
+        :class="bgColor || null"
         :cx="circleCenter"
         :cy="circleCenter"
         :r="circleRadius"
@@ -252,7 +252,7 @@ $circle-size: 40;
 
     svg {display: block;width: 100%;}
     circle.bg {stroke: currentColor;}
-    &.w-progress--default-bg circle.bg {stroke: rgba(0, 0, 0, 0.1);}
+    &.w-progress--default-bg circle.bg {stroke: $progress-bg-color;}
 
     .w-progress__progress {
       transform-origin: 100% 100%;

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

@@ -63,7 +63,9 @@ export default {
     labelOnLeft: { type: Boolean },
     color: { type: String, default: 'primary' },
     labelColor: { type: String, default: 'primary' },
-    noRipple: { type: Boolean }
+    noRipple: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -88,7 +90,9 @@ export default {
         [`w-radio w-radio--${this.inputValue ? 'checked' : 'unchecked'}`]: true,
         'w-radio--disabled': this.isDisabled,
         'w-radio--ripple': this.ripple.start,
-        'w-radio--rippled': this.ripple.end
+        'w-radio--rippled': this.ripple.end,
+        'w-radio--dark': this.ripple.dark,
+        'w-radio--light': this.ripple.light
       }
     }
   },
@@ -146,6 +150,8 @@ $inactive-color: #666;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
+  @include themeable;
+
   &--disabled {
     cursor: not-allowed;
     -webkit-tap-highlight-color: transparent;

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

@@ -39,14 +39,16 @@ export default {
     modelValue: {},
     max: { type: [Number, String], default: 5 },
     color: { type: String, default: 'primary' },
-    bgColor: { type: String, default: 'grey-light4' },
+    bgColor: { type: String },
     icon: { type: String, default: 'wi-star' },
     xs: { type: Boolean },
     sm: { type: Boolean },
     md: { type: Boolean },
     lg: { type: Boolean },
     xl: { type: Boolean },
-    noRipple: { type: Boolean }
+    noRipple: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -79,6 +81,8 @@ export default {
     classes () {
       return {
         'w-rating': true,
+        'w-rating--dark': this.dark,
+        'w-rating--light': this.light,
         'w-rating--focus': this.hasFocus,
         'w-rating--hover': this.hover,
         'w-rating--disabled': this.isDisabled,
@@ -144,7 +148,8 @@ export default {
         'w-rating__button--half': isHalf,
         [this.icon]: true,
         [`size--${this.size}`]: true,
-        [isOn ? this.color : this.bgColor]: true
+        [this.color]: isOn,
+        [this.bgColor]: this.bgColor && !isOn
       }
     }
   },
@@ -162,6 +167,8 @@ export default {
   display: inline-flex;
   align-items: center;
 
+  @include themeable;
+
   &__button {
     position: relative;
     width: 1.1em;
@@ -171,6 +178,7 @@ export default {
     justify-content: center;
     border: none;
     background: none;
+    color: $rating-bg-color;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     @include default-transition($fast-transition-duration);

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

@@ -60,7 +60,7 @@ component(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
           :key="i"
           type="hidden"
-          :value="val.value || ''"
+          :value="val.value === undefined ? '' : val.value.toString()"
           :name="inputName + (multiple ? '[]' : '')")
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
@@ -143,12 +143,13 @@ export default {
     round: { type: Boolean },
     shadow: { type: Boolean },
     tile: { type: Boolean },
-    dark: { type: Boolean },
     returnObject: { type: Boolean },
     // By default you can unselect a list item by re-selecting it.
     // Allow preventing that on single selection lists only.
     noUnselect: { type: Boolean },
-    menuProps: { type: Object } // Allow passing down an object of props to the w-menu component.
+    menuProps: { type: Object }, // Allow passing down an object of props to the w-menu component.
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -196,11 +197,12 @@ export default {
     classes () {
       return {
         'w-select': true,
+        'w-select--dark': this.dark,
+        'w-select--light': this.light,
         'w-select--disabled': this.isDisabled,
         'w-select--readonly': this.isReadonly,
         [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
         'w-select--focused': (this.isFocused || this.showMenu) && !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,
         'w-select--has-placeholder': this.placeholder,
@@ -298,7 +300,8 @@ export default {
     // Also accept objects if returnObject is true.
     // In any case, always end up with an array.
     checkSelection (items) {
-      items = Array.isArray(items) ? items : (items ? [items] : [])
+      console.log(items)
+      items = Array.isArray(items) ? items : (items !== undefined ? [items] : [])
       // `selectItems` items always have a value.
       const allValues = this.selectItems.map(item => item.value)
 
@@ -357,6 +360,8 @@ export default {
   align-items: center;
   font-size: $base-font-size;
 
+  @include themeable;
+
   &--disabled {
     color: $disabled-color;
     cursor: not-allowed;
@@ -423,8 +428,10 @@ export default {
   &__selection {
     width: 100%;
     height: 100%;
-    font-size: inherit;
+    min-height: inherit;
+    font: inherit;
     color: inherit;
+    text-align: inherit;
     background: none;
     border: none;
     outline: none;
@@ -521,12 +528,15 @@ export default {
     position: absolute;
     top: 50%;
     left: 0;
-    // Use margin instead of padding as the scale transformation bellow decreases the real padding
+    right: 0;
+    // 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%);
     pointer-events: none;
 
+    .w-select--inner-icon-right & {padding-right: 22px;}
+
     .w-select--no-padding & {
       left: 0;
       margin-left: 0;
@@ -573,7 +583,7 @@ export default {
     margin: 0;
     max-height: 300px;
     overflow: auto;
-    background-color: #fff;
+    background-color: $base-bg-color;
     border: $border;
     border-radius: $border-radius;
 

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

@@ -98,7 +98,9 @@ export default {
     max: { type: [Number, String], default: 100 },
     step: { type: [Number, String] },
     labelLeft: { type: String },
-    labelRight: { type: String }
+    labelRight: { type: String },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -165,6 +167,8 @@ export default {
     wrapperClasses () {
       return {
         'w-slider': true,
+        'w-slider--dark': this.dark,
+        'w-slider--light': this.light,
         'w-slider--dragging': this.dragging,
         'w-slider--disabled': this.isDisabled,
         'w-slider--readonly': this.isReadonly,
@@ -264,6 +268,8 @@ export default {
   align-items: center;
   user-select: none;
 
+  @include themeable;
+
   // Slider label, left & right.
   // ------------------------------------------------------
   &__label--left {margin-right: 3 * $base-increment;}
@@ -284,7 +290,7 @@ export default {
     transform: translateX(-50%);
     font-size: 0.8em;
     padding-top: 2 * $base-increment;
-    color:rgba(0, 0, 0, 0.5);
+    color: $slider-step-label-color;
     z-index: 1;
     cursor: pointer;
 
@@ -296,7 +302,7 @@ export default {
       top: 0;
       width: $base-increment;
       aspect-ratio: 1;
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: $slider-step-label-bg-color;
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
       box-sizing: border-box;
@@ -377,7 +383,7 @@ export default {
     border: none;
     border-radius: 99em;
     cursor: pointer;
-    background-color: #fff;
+    background-color: $slider-thumb-button-bg-color;
 
     .w-slider--disabled &, .w-slider--readonly & {cursor: auto;}
 
@@ -427,12 +433,12 @@ export default {
     margin-bottom: round(3 * $base-increment);
     transform: translateX(-50%);
     padding: round(0.75 * $base-increment) (2 * $base-increment);
-    background-color: #fff;
+    background-color: $slider-thumb-label-bg-color;
     border-radius: $border-radius;
     border: $border;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
     font-size: 0.85em;
-    color:rgba(0, 0, 0, 0.7);
+    color: $slider-thumb-label-color;
 
     &:before, &:after {
       content: '';
@@ -446,7 +452,7 @@ export default {
     }
 
     &:before {border-width: 7px;border-top-color: inherit;}
-    &:after {border-width: 6px;border-top-color: #fff;}
+    &:after {border-width: 6px;border-top-color: $slider-thumb-label-bg-color;}
 
     &--droplet {
       transform: translateX(-50%) rotate(-45deg);

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

@@ -1,24 +1,34 @@
 <template lang="pug">
-.w-steps
+.w-steps(:class="classes")
 </template>
 
 <script>
 export default {
   name: 'w-steps',
   props: {
-
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
 
   data: () => ({
 
-  })
+  }),
+
+  computed: {
+    classes () {
+      return {
+        'w-steps--dark': this.dark,
+        'w-steps--light': this.light
+      }
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 .w-steps {
-
+  @include themeable;
 }
 </style>

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

@@ -38,7 +38,7 @@ component(
         v-if="loading"
         circle
         color="inherit"
-        v-bind="typeof loading === 'number' ? { 'model-value': loading } : {}")
+        v-bind="typeof loading === 'number' && { 'model-value': loading }")
       slot(v-else name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-switch__label--right.w-form-el-shakable(
@@ -63,7 +63,9 @@ export default {
     labelColor: { type: String, default: 'primary' },
     thin: { type: Boolean },
     noRipple: { type: Boolean },
-    loading: { type: [Boolean, Number], default: false }
+    loading: { type: [Boolean, Number], default: false },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -95,7 +97,9 @@ export default {
         'w-switch--custom-thumb': this.$slots.thumb,
         'w-switch--custom-track': this.$slots.track,
         'w-switch--loading': this.loading,
-        'w-switch--rippled': this.ripple.end
+        'w-switch--rippled': this.ripple.end,
+        'w-switch--dark': this.dark,
+        'w-switch--light': this.light
       }
     },
     inputClasses () {
@@ -140,8 +144,6 @@ export default {
 
 <style lang="scss">
 $outline-width: 2px;
-$inactive-color: #ccc;
-$disabled-color: #ddd;
 
 .w-switch {
   display: inline-flex;
@@ -149,6 +151,8 @@ $disabled-color: #ddd;
   vertical-align: middle;
   cursor: pointer;
 
+  @include themeable;
+
   &--loading {cursor: wait;}
   &--disabled, &--readonly {
     cursor: not-allowed;
@@ -173,9 +177,9 @@ $disabled-color: #ddd;
     flex: 0 0 auto; // Prevent stretching width or height.
     align-items: center;
     justify-content: center;
-    border: $outline-width solid $inactive-color;
+    border: $outline-width solid transparent;
     border-radius: 3em;
-    background-color: $inactive-color;
+    background-color: $switch-inactive-color;
     cursor: inherit;
     @include default-transition;
 
@@ -194,15 +198,11 @@ $disabled-color: #ddd;
       width: 2 * $small-form-el-size;
       height: round(0.7 * $small-form-el-size);
     }
-    .w-switch--thin :checked ~ & {
-      background-color: $inactive-color;
-    }
+    .w-switch--thin :checked ~ & {background-color: $switch-inactive-color;}
 
     // Disabled.
     .w-switch--disabled & {color: $disabled-color;}
-    .w-switch--disabled :checked ~ & {
-      opacity: 0.5;
-    }
+    .w-switch--disabled :checked ~ & {opacity: 0.5;}
   }
 
   // Track slot, if any.
@@ -223,7 +223,7 @@ $disabled-color: #ddd;
     top: 0;
     width: $small-form-el-size;
     height: $small-form-el-size;
-    background-color: #fff;
+    background-color: $switch-thumb-color;
     border-radius: 100%;
     text-align: center;
     @include default-transition;