wave-ui 2.48.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.48.0",
+  "version": "3.0.0",
   "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",
@@ -62,14 +62,15 @@
     "gsap": "^3.11.3",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.20",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.56.1",
+    "sass": "^1.57.1",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",
     "vite": "^3.2.5",
+    "vite-svg-loader": "^4.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vueperslides": "^3.5.1",

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

@@ -83,7 +83,9 @@ export default {
     expandSingle: { type: Boolean },
     collapseIcon: { type: String },
     shadow: { type: Boolean },
-    duration: { type: Number, default: 250 }
+    duration: { type: Number, default: 250 },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'item-expand', 'item-collapsed'],
@@ -97,6 +99,8 @@ export default {
       return {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
+        'w-accordion--dark': this.dark,
+        'w-accordion--light': this.light,
         'w-accordion--shadow': this.shadow,
         'w-accordion--no-icon': !this.expandIcon && !this.collapseIcon,
         'w-accordion--icon-right': this.expandIcon && this.expandIconRight,
@@ -168,11 +172,13 @@ export default {
 .w-accordion {
   z-index: 1;
 
+  @include themeable;
+
   &--shadow {box-shadow: $box-shadow;}
 
   &__item {position: relative;}
 
-  button.w-accordion__expand-icon {color: #999;}
+  button.w-accordion__expand-icon {color: rgba(var(--w-base-color-rgb), 0.4);}
   &__expand-icon {
     margin-right: $base-increment;
 

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

@@ -48,7 +48,9 @@ export default {
     borderRight: { type: Boolean },
     borderTop: { type: Boolean },
     borderBottom: { type: Boolean },
-    outline: { type: Boolean }
+    outline: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue', 'close'],
@@ -113,7 +115,9 @@ export default {
         'w-alert--border-right': !this.noBorder && this.borderRight,
         'w-alert--border-top': !this.noBorder && this.borderTop,
         'w-alert--border-bottom': !this.noBorder && this.borderBottom,
-        'w-alert--shadow': this.shadow
+        'w-alert--shadow': this.shadow,
+        'w-alert--dark': this.dark,
+        'w-alert--light': this.light
       }
     }
   },
@@ -137,6 +141,8 @@ export default {
   border-radius: $border-radius;
   border: 1px solid currentColor;
 
+  @include themeable;
+
   &--has-icon {
     display: flex;
     align-items: center;
@@ -232,8 +238,8 @@ export default {
     left: 1px;
     z-index: 1;
     transform: translateX(-50%);
-    border: 1px solid rgba(255, 255, 255, 0.7);
-    background-color: #fff;
+    border: 1px solid rgba(var(--w-base-bg-color-rgb), 0.7);
+    background-color: $base-bg-color;
   }
   &--icon-outside &__icon:before {transform: scale(1.05);}
 

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

@@ -1,20 +1,13 @@
 <template lang="pug">
-.w-app(:class="classes")
+.w-app
   slot
-  notification-manager
 </template>
 
 <script>
-import NotificationManager from './w-notification-manager.vue'
-import dynamicCSS from '../utils/dynamic-css'
-
-// Global var for faster results in the resize event handler.
-let breakpointsDef = { keys: [], values: [] }
-
 export default {
   name: 'w-app',
+  // Keep the props for the API documentation.
   props: {
-    dark: { type: Boolean },
     block: { type: Boolean },
     row: { type: Boolean },
     alignCenter: { type: Boolean },
@@ -26,104 +19,6 @@ export default {
     justifySpaceEvenly: { type: Boolean },
     textCenter: { type: Boolean },
     textRight: { type: Boolean }
-  },
-
-  components: { NotificationManager },
-
-  data: () => ({
-    currentBreakpoint: null,
-    notifManager: null
-  }),
-
-  computed: {
-    classes () {
-      return {
-        'd-block': this.block,
-        row: this.row,
-        'align-center': this.alignCenter,
-        'align-end': this.alignEnd,
-        'justify-center': this.justifyCenter,
-        'justify-end': this.justifyEnd,
-        'justify-space-between': this.justifySpaceBetween,
-        'justify-space-around': this.justifySpaceAround,
-        'justify-space-evenly': this.justifySpaceEvenly,
-        'text-center': this.textCenter,
-        'text-right': this.textRight,
-        'theme--dark': this.dark
-      }
-    }
-  },
-
-  methods: {
-    getBreakpoint () {
-      const width = window.innerWidth
-      const breakpoints = breakpointsDef.values.slice(0)
-      // Most performant lookup.
-      breakpoints.push(width)
-      breakpoints.sort((a, b) => a - b)
-      const breakpoint = breakpointsDef.keys[breakpoints.indexOf(width)] || 'xl'
-
-      if (breakpoint !== this.currentBreakpoint) {
-        this.currentBreakpoint = breakpoint
-        this.$waveui.breakpoint = {
-          name: breakpoint,
-          xs: breakpoint === 'xs',
-          sm: breakpoint === 'sm',
-          md: breakpoint === 'md',
-          lg: breakpoint === 'lg',
-          xl: breakpoint === 'xl',
-          width
-        }
-      }
-
-      this.$waveui.breakpoint.width = width
-    }
-  },
-
-  mounted () {
-    const { config } = this.$waveui
-    breakpointsDef = { keys: Object.keys(config.breakpoints), values: Object.values(config.breakpoints) }
-
-    // Inject global dynamic CSS classes in document head.
-    if (!document.getElementById('wave-ui-styles')) {
-      const css = document.createElement('style')
-      css.id = 'wave-ui-styles'
-      css.innerHTML = dynamicCSS(config)
-
-      const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
-      if (firstStyle) firstStyle.before(css)
-      else document.head.appendChild(css)
-    }
-
-    this.getBreakpoint(window.innerWidth)
-    window.addEventListener('resize', this.getBreakpoint)
-  },
-
-  beforeUnmount () {
-    window.removeEventListener('resize', this.getBreakpoint)
   }
 }
 </script>
-
-<style lang="scss">
-@import '../scss/index';
-
-.w-app {
-  position: relative; // Make the .w-app a referential for tooltips / menus.
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-
-  &.row {flex-direction: row;}
-  &.d-block {display: block;}
-  &.align-center {align-items: center;}
-  &.align-end {align-items: flex-end;}
-  &.justify-center {justify-content: center;}
-  &.justify-end {justify-content: flex-end;}
-  &.justify-space-between {justify-content: space-between;}
-  &.justify-space-around {justify-content: space-around;}
-  &.justify-space-evenly {justify-content: space-evenly;}
-  &.text-center {text-align: center;}
-  &.text-right {text-align: right;}
-}
-</style>

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

@@ -33,13 +33,14 @@ export default {
     color: { type: String },
     size: { type: [Number, String] },
     bgColor: { type: String, default: 'primary' },
-    dark: { type: Boolean },
     badgeClass: { type: String },
     outline: { type: Boolean },
     shadow: { type: Boolean },
     dot: { type: Boolean },
     round: { type: Boolean },
-    transition: { type: String, default: 'fade' }
+    transition: { type: String, default: 'fade' },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
@@ -72,7 +73,8 @@ export default {
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.badgeClass]: this.badgeClass || null,
         'w-badge--round': this.round || (slotText || this.modelValue + '' || '').length < 2,
-        'w-badge--dark': this.dark && !this.outline,
+        'w-badge--dark': this.dark,
+        'w-badge--light': this.light,
         'w-badge--outline': this.outline,
         'w-badge--inline': this.inline,
         'w-badge--shadow': this.shadow,
@@ -109,6 +111,8 @@ export default {
   z-index: 1;
   padding: 0 $base-increment;
 
+  @include themeable;
+
   &--inline {position: static;}
 
   &--round {

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

@@ -27,6 +27,7 @@ export default {
     color: { type: String },
     bgColor: { type: String },
     dark: { type: Boolean },
+    light: { type: Boolean },
     outline: { type: Boolean },
     text: { type: Boolean },
     round: { type: Boolean },
@@ -106,12 +107,13 @@ export default {
     classes () {
       return {
         // If no color / bg color is set, set a primary color by default.
-        'primary--bg': !this.bgColor && !this.color && !this.dark && !(this.outline || this.text),
+        'primary--bg': !this.bgColor && !this.color && !(this.outline || this.text),
         primary: !this.bgColor && !this.color && !this.dark && (this.outline || this.text),
 
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
-        'w-button--dark': this.dark && !this.outline,
+        'w-button--dark': this.dark,
+        'w-button--light': this.light,
         'w-button--outline': this.outline,
         'w-button--text': this.text,
         'w-button--round': this.round,
@@ -166,6 +168,8 @@ $spinner-size: 40;
   transition: $transition-duration, background-color 0s, padding 0s;
   -webkit-tap-highlight-color: transparent;
 
+  @include themeable;
+
   // In w-flex wrapper, allow overriding the default `align-self: center`.
   .w-flex.align-start > & {align-self: flex-start;}
   .w-flex.align-end > & {align-self: flex-end;}

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

@@ -1,9 +1,13 @@
 <template lang="pug">
 .w-card(:class="classes")
   .w-card__title(
-    v-if="$slots.title || title"
+    v-if="$slots.title"
+    :class="{ 'w-card__title--has-toolbar': $slots.title && titleHasToolbar, ...titleClasses }")
+    slot(name="title")
+  .w-card__title(
+    v-else-if="title"
+    v-html="title"
     :class="{ 'w-card__title--has-toolbar': $slots.title && titleHasToolbar, ...titleClasses }")
-    slot(name="title") {{ title }}
   w-image.w-card__image(v-if="image" :src="image" v-bind="imgProps")
     slot(name="image-content")
   .w-card__content(:class="contentClasses")
@@ -30,7 +34,9 @@ export default {
     image: { type: String },
     imageProps: { type: Object },
     titleClass: { type: [String, Object, Array] },
-    contentClass: { type: [String, Object, Array] }
+    contentClass: { type: [String, Object, Array] },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
@@ -68,7 +74,9 @@ export default {
         [`${this.bgColor}--bg`]: this.bgColor,
         'w-card--no-border': this.noBorder,
         'w-card--tile': this.tile,
-        'w-card--shadow': this.shadow
+        'w-card--shadow': this.shadow,
+        'w-card--dark': this.dark,
+        'w-card--light': this.light
       }
     }
   }
@@ -83,6 +91,8 @@ export default {
   border-radius: $border-radius;
   border: $border;
 
+  @include themeable;
+
   &--tile {border-radius: 0;}
   &--shadow {box-shadow: $box-shadow;}
   &--no-border, &--shadow {border: none;}

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

@@ -70,7 +70,9 @@ export default {
     labelColor: { type: String, default: 'primary' },
     noRipple: { type: Boolean },
     indeterminate: { type: Boolean },
-    round: { type: Boolean }
+    round: { type: Boolean },
+    dark: { type: Boolean },
+    light: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -99,7 +101,9 @@ export default {
         'w-checkbox--indeterminate': this.indeterminate,
         'w-checkbox--ripple': this.ripple.start,
         'w-checkbox--rippled': this.ripple.end,
-        'w-checkbox--round': this.round
+        'w-checkbox--round': this.round,
+        'w-checkbox--dark': this.dark,
+        'w-checkbox--light': this.light
       }
     }
   },
@@ -148,6 +152,8 @@ $inactive-color: #666;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
+  @include themeable;
+
   &--disabled {cursor: not-allowed;}
 
   // The hidden real checkbox.
@@ -177,7 +183,7 @@ $inactive-color: #666;
     aspect-ratio: 1;
     fill: none;
     stroke-width: 2;
-    stroke: white;
+    stroke: $contrast-color;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-dasharray: 16px;
@@ -194,6 +200,7 @@ $inactive-color: #666;
     }
 
     .w-checkbox--indeterminate & {opacity: 0;}
+    .w-checkbox--disabled & {stroke: rgba(var(--w-contrast-color-rgb), 0.4);}
   }
   &__input:after {
     content: '';
@@ -214,14 +221,14 @@ $inactive-color: #666;
       // Prevents a tiny hole while animating and in some browser zoom levels.
       background-color: currentColor;
     }
+    .w-checkbox--indeterminate :checked ~ & {
+      border-width: ((divide($small-form-el-size, 2)) - 1px) 3px;
+      background-color: $contrast-color;
+    }
     .w-checkbox--disabled :checked ~ & {
       border-color: $disabled-color;
       // Prevents a tiny hole while animating and in some browser zoom levels.
-      background-color: $disabled-color;
-    }
-    .w-checkbox--indeterminate :checked ~ & {
-      border-width: ((divide($small-form-el-size, 2)) - 1px) 3px;
-      background-color: white;
+      background-color: rgba(var(--w-contrast-color-rgb), 0.4);
     }
   }
 

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

@@ -65,7 +65,9 @@ export default {
     alignLeft: { type: Boolean },
     alignRight: { type: Boolean },
     persistent: { type: Boolean },
-    transition: { type: String }
+    transition: { type: String },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: ['cancel', 'confirm'],
@@ -124,6 +126,8 @@ export default {
         bgColor: this.bgColor,
         color: this.color,
         icon: this.icon,
+        dark: this.dark,
+        light: this.light,
         tooltip: label,
         tooltipProps,
         ...this.mainButton

package/src/wave-ui/components/w-date-picker.vue

@@ -7,6 +7,8 @@
 export default {
   name: 'w-date-picker',
   props: {
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
@@ -14,6 +16,8 @@ export default {
   computed: {
     classes () {
       return {
+        'w-date-picker--dark': this.dark,
+        'w-date-picker--light': this.light
       }
     },
     styles () {
@@ -25,5 +29,7 @@ export default {
 
 <style lang="scss">
 .w-date-picker {
+
+  @include themeable;
 }
 </style>

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

@@ -46,7 +46,9 @@ export default {
     overlayColor: { type: String },
     color: { type: String },
     bgColor: { type: String },
-    overlayOpacity: { type: [Number, String, Boolean] }
+    overlayOpacity: { type: [Number, String, Boolean] },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   provide () {
@@ -74,7 +76,9 @@ export default {
     },
     classes () {
       return {
-        'w-dialog--fullscreen': this.fullscreen
+        'w-dialog--fullscreen': this.fullscreen,
+        'w-dialog--dark': this.dark,
+        'w-dialog--light': this.light
       }
     },
     contentStyles () {
@@ -121,7 +125,9 @@ export default {
     flex-grow: 1;
     max-width: 95%;
     overflow: auto;
-    background-color: #fff;
+    background-color: $dialog-bg-color;
+
+    @include themeable;
 
     .w-dialog--fullscreen > & {
       flex: 1 1 auto;

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

@@ -12,7 +12,9 @@ export default {
 
   props: {
     vertical: { type: Boolean },
-    color: { type: String }
+    color: { type: String },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   emits: [],
@@ -22,7 +24,9 @@ export default {
       return {
         [`w-divider--has-color ${this.color}`]: this.color,
         [`w-divider--${this.vertical ? 'vertical' : 'horizontal'}`]: true,
-        'w-divider--has-content': this.$slots.default
+        'w-divider--has-content': this.$slots.default,
+        'w-divider--dark': this.dark,
+        'w-divider--light': this.light
       }
     }
   }
@@ -31,9 +35,11 @@ export default {
 
 <style lang="scss">
 .w-divider {
-  border: 0 solid rgba(0, 0, 0, 0.15);
+  border: 0 solid $divider-color;
   border-top-width: 1px;
 
+  @include themeable;
+
   &--has-color {border-color: currentColor;}
 
   &--vertical {

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

@@ -77,7 +77,9 @@ export default {
     overlayColor: { type: String },
     overlayOpacity: { type: [Number, String, Boolean] },
     drawerClass: { type: String },
-    tag: { type: String, default: 'aside' }
+    tag: { type: String, default: 'aside' },
+    dark: { type: Boolean },
+    light: { type: Boolean }
   },
 
   provide () {
@@ -133,7 +135,9 @@ export default {
         [`w-drawer--${this.position}`]: true,
         'w-drawer--fit-content': this.fitContent,
         'w-drawer--persistent': this.persistent,
-        'w-drawer--persistent-animate': this.persistent && this.persistentAnimate
+        'w-drawer--persistent-animate': this.persistent && this.persistentAnimate,
+        'w-drawer--dark': this.dark,
+        'w-drawer--light': this.light
       }
     },
     // The track is a wrapper around the pushable content and drawer.
@@ -247,9 +251,11 @@ export default {
   position: inherit;
   display: flex;
   z-index: 1;
-  background: #fff;
+  background: $drawer-bg-color;
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
 
+  @include themeable;
+
   &--left, &--right {
     top: 0;
     bottom: 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-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>