wave-ui 2.38.0 → 2.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.38.0",
+  "version": "2.40.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

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

@@ -5,12 +5,11 @@
 </template>
 
 <script>
-import config from '../utils/config'
 import NotificationManager from './w-notification-manager.vue'
-import DynamicCSS from '../utils/dynamic-css'
+import dynamicCSS from '../utils/dynamic-css'
 
-const breakpointsNames = Object.keys(config.breakpoints)
-const breakpointsValues = Object.values(config.breakpoints)
+// Global var for faster results in the resize event handler.
+let breakpointsDef = { keys: [], values: [] }
 
 export default {
   name: 'w-app',
@@ -58,11 +57,11 @@ export default {
   methods: {
     getBreakpoint () {
       const width = window.innerWidth
-      const breakpoints = breakpointsValues.slice(0)
+      const breakpoints = breakpointsDef.values.slice(0)
       // Most performant lookup.
       breakpoints.push(width)
       breakpoints.sort((a, b) => a - b)
-      const breakpoint = breakpointsNames[breakpoints.indexOf(width)] || 'xl'
+      const breakpoint = breakpointsDef.keys[breakpoints.indexOf(width)] || 'xl'
 
       if (breakpoint !== this.currentBreakpoint) {
         this.currentBreakpoint = breakpoint
@@ -78,21 +77,22 @@ export default {
       }
 
       this.$waveui.breakpoint.width = width
-    },
-
-    dynamicStyles () {
-      return DynamicCSS()
     }
   },
 
   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 = this.dynamicStyles()
+      css.innerHTML = dynamicCSS(config)
 
-      document.head.appendChild(css)
+      const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
+      if (firstStyle) firstStyle.before(css)
+      else document.head.appendChild(css)
     }
 
     this.getBreakpoint(window.innerWidth)
@@ -125,6 +125,5 @@ export default {
   &.justify-space-evenly {justify-content: space-evenly;}
   &.text-center {text-align: center;}
   &.text-right {text-align: right;}
-
 }
 </style>

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

@@ -1,8 +1,9 @@
 <template lang="pug">
 transition(:name="transitionName" appear)
   .w-notification(v-if="show" :class="classes" :style="styles")
-    w-alert.white--bg(
+    w-alert(
       v-bind="alertProps"
+      :class="alertClasses"
       @update:model-value="$emit('update:modelValue', false);$emit('input', false)")
       slot
 </template>
@@ -118,6 +119,11 @@ export default {
       }
     },
 
+    alertClasses () {
+      if (this.bgColor || ((this.success || this.info || this.warning || this.error) && this.plain)) return null
+      return 'white--bg'
+    },
+
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null

package/src/wave-ui/components/w-tabs/index.vue

@@ -330,6 +330,8 @@ export default {
   &__bar-extra {
     margin-left: auto;
     align-self: center;
+    position: sticky;
+    right: 0;
 
     .w-tabs__bar--right &,
     .w-tabs__bar--center & {margin-left: 0;}

package/src/wave-ui/core.js

@@ -40,6 +40,8 @@ export default class WaveUI {
     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) {
@@ -108,6 +110,7 @@ export default class WaveUI {
         }
       }
 
+      this.config = config
       WaveUI.instance = this
       // Make waveui reactive and expose the single instance in Vue.
       app.config.globalProperties.$waveui = reactive(this)

package/src/wave-ui/utils/dynamic-css.js

@@ -1,14 +1,3 @@
-import config from './config'
-
-const { css: cssConfig } = config
-const entries = Object.entries(config.breakpoints)
-const breakpoints = entries.map(([label, max], i) => {
-  // Construct the breakpoint objects.
-  const [, value = 0] = entries[i - 1] || []
-  return { label, min: value ? value + 1 : 0, max }
-})
-
-let computedStyles = null
 // Defaults CSS variables. Will be overridden in the main function of this file (the export default)
 // which fetches the CSS :root variables generated by _layout.scss.
 const cssVars = {
@@ -16,7 +5,7 @@ const cssVars = {
   baseIncrement: 4
 }
 
-const generateColors = () => {
+const generateColors = config => {
   let styles = ''
   const { cssScope } = cssVars
 
@@ -30,7 +19,7 @@ const generateColors = () => {
   }
 
   // Color shades are generated in core.js, if the option is on.
-  if (cssConfig.colorShades && config.colorShades) {
+  if (config.css.colorShades && config.colorShades) {
     Object.entries(config.colorShades).forEach(([label, color]) => {
       styles +=
         `${cssScope} .${label}--bg{background-color:${color}}` +
@@ -56,7 +45,7 @@ const generateColors = () => {
 }
 
 // Generate the layout grid. E.g. xs1, xs2, ..., xl12.
-const generateBreakpoints = () => {
+const generateBreakpoints = (breakpoints, grid) => {
   let styles = ''
   const { cssScope } = cssVars
 
@@ -74,20 +63,20 @@ const generateBreakpoints = () => {
     // Discard `xs` since the min is 0 (`media query (min-width: 0)`), and leave in _layout.scss.
     if (label === 'xs') {
       // For each breakpoint, loop from 1 to 12. E.g. xs1, xs2, ..., xl12.
-      for (let i = 0; i < cssConfig.grid; i++) {
+      for (let i = 0; i < grid; i++) {
         styles +=
-          `${cssScope} .${label}${cssConfig.grid - i}{` +
-          `width:${parseFloat(((cssConfig.grid - i) * 100 / cssConfig.grid).toFixed(4))}%;}`
+          `${cssScope} .${label}${grid - i}{` +
+          `width:${parseFloat(((grid - i) * 100 / grid).toFixed(4))}%;}`
       }
     }
     else {
       styles += `@media(min-width:${min}px){`
 
       // For each breakpoint, loop from 1 to 12. E.g. xs1, xs2, ..., xl12.
-      for (let i = 0; i < cssConfig.grid; i++) {
+      for (let i = 0; i < grid; i++) {
         styles +=
-          `${cssScope} .${label}${cssConfig.grid - i}{` +
-          `width:${parseFloat(((cssConfig.grid - i) * 100 / cssConfig.grid).toFixed(4))}%;}`
+          `${cssScope} .${label}${grid - i}{` +
+          `width:${parseFloat(((grid - i) * 100 / grid).toFixed(4))}%;}`
       }
 
       styles += '}'
@@ -104,7 +93,7 @@ const generateBreakpoints = () => {
   The drawback is that it generates so much CSS that I don't think it is worth it.
   In this test, for only 2 margin rules, it already generates 35kb of CSS...
 
-const generateBreakpointSpaces = () => {
+const generateBreakpointSpaces = breakpoints => {
   let styles = ''
   const { cssScope, baseIncrement } = cssVars
 
@@ -128,7 +117,7 @@ const generateBreakpointSpaces = () => {
       styles += `${cssScope} .${label}-mx${i}{margin-right:${i * baseIncrement}px;margin-left:${i * baseIncrement}px}`
     }
     styles +=  '}'
-})
+  })
 
   breakpoints.forEach(({ label, max }) => {
     // Discard `xs`: xsd is just like xs.
@@ -148,7 +137,7 @@ const generateBreakpointSpaces = () => {
   return styles
 } */
 
-const genBreakpointLayoutClasses = () => {
+const genBreakpointLayoutClasses = breakpoints => {
   let styles = ''
   const { cssScope, baseIncrement } = cssVars
   const layoutClasses = [
@@ -188,7 +177,6 @@ const genBreakpointLayoutClasses = () => {
   const array12 = Array(12).fill()
 
   // Define media queries for each breakpoint: xs, sm, md, lg, xl.
-
   breakpoints.forEach(({ label, min }) => {
     // Discard `xs` since the min is 0 (`media query (min-width: 0)`), and leave in _layout.scss.
     if (label !== 'xs') {
@@ -230,16 +218,23 @@ const genBreakpointLayoutClasses = () => {
   return styles
 }
 
-export default () => {
-  let styles = ''
-  computedStyles = getComputedStyle(document.documentElement)
+export default config => {
+  const entries = Object.entries(config.breakpoints)
+  const breakpointsDef = entries.map(([label, max], i) => {
+    // Construct the breakpoint objects.
+    const [, value = 0] = entries[i - 1] || []
+    return { label, min: value ? value + 1 : 0, max }
+  })
+
+  const computedStyles = getComputedStyle(document.documentElement)
   cssVars.cssScope = computedStyles.getPropertyValue('--css-scope')
   cssVars.baseIncrement = parseInt(computedStyles.getPropertyValue('--base-increment'))
 
-  styles += generateColors()
-  styles += generateBreakpoints()
-  if (cssConfig.breakpointLayoutClasses) styles += genBreakpointLayoutClasses()
-  // if (cssConfig.breakpointSpaces) styles += generateBreakpointSpaces()
+  let styles = ''
+  styles += generateColors(config)
+  styles += generateBreakpoints(breakpointsDef, config.css.grid)
+  if (config.css.breakpointLayoutClasses) styles += genBreakpointLayoutClasses(breakpointsDef)
+  // if (config.css.breakpointSpaces) styles += generateBreakpointSpaces(breakpointsDef)
 
   return styles
 }