wave-ui 2.47.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.47.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/transitions/w-transition-expand.vue

@@ -27,6 +27,7 @@ export default {
 
   data: () => ({
     el: {
+      savedState: false,
       originalStyles: '',
       width: 0,
       height: 0,
@@ -59,7 +60,7 @@ export default {
     beforeAppear (el) {
       // Only save original state once before a 'clean' transition start.
       // Not when clicking very fast and mixing states order.
-      if (this.cleanTransitionCycle) this.saveOriginalStyles(el)
+      if (this.cleanTransitionCycle) this.saveOriginalInlineStyles(el)
       this.cleanTransitionCycle = false
     },
     appear (el, done) {
@@ -76,7 +77,7 @@ export default {
     beforeEnter (el) {
       // Only save original state once before a 'clean' transition start.
       // Not when clicking very fast and mixing states order.
-      if (this.cleanTransitionCycle) this.saveOriginalStyles(el)
+      if (this.cleanTransitionCycle) this.saveOriginalInlineStyles(el)
       this.cleanTransitionCycle = false
     },
     enter (el, done) {
@@ -91,6 +92,9 @@ export default {
       this.cleanTransitionCycle = false
     },
     beforeLeave (el) {
+      // When starting with an open item.
+      if (!this.el.savedState) this.saveComputedStyles(el)
+
       this.beforeHide(el)
       this.cleanTransitionCycle = false
     },
@@ -102,6 +106,9 @@ export default {
     afterLeave (el) {
       this.applyOriginalStyles(el)
       this.cleanTransitionCycle = true
+      // Reset for recomputing the next time we start the transition from an open state.
+      // In case there might be some changed styles from last closing.
+      this.el.savedState = false
     },
 
     applyHideStyles (el) {
@@ -151,11 +158,25 @@ export default {
     applyOriginalStyles (el) {
       el.style.cssText = this.el.originalStyles
     },
-    saveOriginalStyles (el) {
-      // Keep the original styles to restore them after transition.
+    saveOriginalInlineStyles (el) {
+      // Keep any original inline styles to restore them after transition.
       this.el.originalStyles = el.style.cssText
     },
     show (el, done) {
+      this.saveComputedStyles(el)
+      this.applyHideStyles(el)
+
+      setTimeout(() => this.applyShowStyles(el), 20)
+      setTimeout(done, this.duration)
+    },
+    beforeHide (el) {
+      this.applyShowStyles(el)
+    },
+    hide (el, done) {
+      setTimeout(() => this.applyHideStyles(el), 20)
+      setTimeout(done, this.duration)
+    },
+    saveComputedStyles (el) {
       const computedStyles = window.getComputedStyle(el, null)
 
       // Save the width & height then set them to 0 as the animation starting point.
@@ -177,17 +198,7 @@ export default {
         this.el.borderTopWidth = computedStyles.getPropertyValue('borderTopWidth')
         this.el.borderBottomWidth = computedStyles.getPropertyValue('borderBottomWidth')
       }
-      this.applyHideStyles(el)
-
-      setTimeout(() => this.applyShowStyles(el), 20)
-      setTimeout(done, this.duration)
-    },
-    beforeHide (el) {
-      this.applyShowStyles(el)
-    },
-    hide (el, done) {
-      setTimeout(() => this.applyHideStyles(el), 20)
-      setTimeout(done, this.duration)
+      this.el.savedState = true
     }
   }
 }

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

@@ -2,7 +2,7 @@
 .w-confirm
   w-menu(v-model="showPopup" v-bind="wMenuProps")
     template(#activator="{ on }")
-      w-button.w-confirm__button(v-bind="{ ...$attrs, ...buttonProps, ...on }")
+      w-button.w-confirm__button(v-bind="{ ...$attrs, ...buttonProps, ...(disablePrompt ? {} : on) }")
         slot
     w-flex(:column="!inline" align-center)
       div
@@ -32,6 +32,7 @@ export default {
     bgColor: { type: String },
     color: { type: String },
     icon: { type: String },
+    disablePrompt: { type: Boolean }, // If true, the confirm button acts like a simple w-button.
     mainButton: { type: Object }, // Allow passing down an object of props to the w-button component.
     question: { type: String, default: 'Are you sure?' },
 
@@ -64,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'],
@@ -123,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;