wave-ui 2.48.0 → 3.0.0

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

@@ -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,
@@ -358,6 +360,8 @@ export default {
   align-items: center;
   font-size: $base-font-size;
 
+  @include themeable;
+
   &--disabled {
     color: $disabled-color;
     cursor: not-allowed;
@@ -525,7 +529,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%);
@@ -579,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;

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

@@ -232,7 +232,9 @@ export default {
         }
         return true
       }
-    }
+    },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [
@@ -315,7 +317,9 @@ export default {
         'w-table--resizing': this.colResizing.dragging,
         'w-table--fixed-header': this.fixedHeaders,
         'w-table--fixed-footer': this.fixedFooter,
-        'w-table--sticky-column': this.hasStickyColumn
+        'w-table--sticky-column': this.hasStickyColumn,
+        'w-table--dark': this.dark,
+        'w-table--light': this.light
       }
     },
 
@@ -600,6 +604,8 @@ $tr-border-top: 1px;
   border-collapse: collapse;
   border: none;
 
+  @include themeable;
+
   &--fixed-layout {
     table-layout: fixed; // Allow resizing beyond the cell minimum text width.
   }
@@ -624,7 +630,7 @@ $tr-border-top: 1px;
   &--fixed-header thead {
     position: sticky;
     top: 0;
-    background-color: #fff;
+    background-color: $base-bg-color;
     z-index: 1; // For sticky columns to go under.
 
     &:after {
@@ -649,14 +655,14 @@ $tr-border-top: 1px;
       right: 0;
       bottom: 0;
       z-index: -1;
-      background-color: #fff;
+      background-color: $base-bg-color;
     }
   }
 
   // Sorting arrow.
   &__header--sortable {cursor: pointer;}
   &__header-sort {
-    color: rgba(0, 0, 0, 0.8);
+    color: rgba(var(--w-base-color-rgb), 0.8);
     vertical-align: text-bottom;
     @include default-transition;
 
@@ -716,7 +722,7 @@ $tr-border-top: 1px;
 
   // Table body.
   // ------------------------------------------------------
-  tbody tr {border-top: $tr-border-top solid rgba(0, 0, 0, 0.06);}
+  tbody tr {border-top: $tr-border-top solid rgba(var(--w-base-color-rgb), 0.06);}
   // Don't apply built-in bg color if a bg color is already found on a tr.
   tbody tr:nth-child(odd):not(.no-data):not([class*="--bg"]) {background-color: $table-tr-odd-color;}
   tbody .w-table__row:hover:not(.no-data):not([class*="--bg"]) {background-color: $table-tr-hover-color;}
@@ -729,7 +735,7 @@ $tr-border-top: 1px;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--primary);
+    background-color: var(--w-primary);
     opacity: 0.2;
     pointer-events: none;
   }
@@ -761,7 +767,7 @@ $tr-border-top: 1px;
       bottom: 0;
       z-index: -1;
     }
-    &:before {background-color: #fff;}
+    &:before {background-color: $base-bg-color;}
   }
   tr:nth-child(odd) &__cell--sticky:after {background-color: $table-tr-odd-color;}
   tr:hover &__cell--sticky:after {background-color: $table-tr-hover-color;}
@@ -781,7 +787,7 @@ $tr-border-top: 1px;
   &--fixed-footer tfoot {
     position: sticky;
     bottom: 0;
-    background-color: #fff;
+    background-color: $base-bg-color;
     z-index: 1; // For sticky columns to go under.
 
     &:after {
@@ -820,10 +826,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-tabs/index.vue

@@ -73,7 +73,9 @@ export default {
     fillBar: { type: Boolean },
     center: { type: Boolean },
     right: { type: Boolean },
-    card: { type: Boolean }
+    card: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   components: { TabContent },
@@ -125,7 +127,9 @@ export default {
         'w-tabs--no-slider': this.noSlider,
         'w-tabs--pill-slider': this.pillSlider,
         'w-tabs--fill-bar': this.fillBar,
-        'w-tabs--init': this.init
+        'w-tabs--init': this.init,
+        'w-tabs--dark': this.dark,
+        'w-tabs--light': this.light
       }
     },
 
@@ -259,6 +263,8 @@ export default {
   border: $border;
   overflow: hidden;
 
+  @include themeable;
+
   &--tile {border-radius: 0;}
   &--card {border: none;}
   &--no-border, &--shadow {border: none;}