wave-ui 1.56.0 → 1.57.0

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "wave-ui",
-  "version": "1.56.0",
+  "version": "1.57.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
+  "license": "MIT",
+  "repository": "https://github.com/antoniandre/wave-ui",
+  "funding": "https://github.com/sponsors/antoniandre",
   "main": "./dist/wave-ui.umd.js",
   "unpkg": "dist/wave-ui.umd.js",
   "jsdelivr": "dist/wave-ui.umd.js",
@@ -11,6 +14,7 @@
     "./dist/wave-ui.css": "./dist/wave-ui.css",
     "./dist/wave-ui.cjs.js": "./dist/wave-ui.cjs.js",
     "./src/wave-ui": "./src/wave-ui/index.js",
+    "./src/wave-ui/scss/_variables.scss": "./src/wave-ui/scss/_variables.scss",
     ".": {
       "import": "./dist/wave-ui.es.js",
       "require": "./dist/wave-ui.umd.js"
@@ -29,13 +33,11 @@
     "vue framework",
     "ui"
   ],
-  "license": "MIT",
-  "repository": "https://github.com/antoniandre/wave-ui",
   "scripts": {
     "dev": "vite",
     "build": "vite build --base /wave-ui/",
     "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/wave-ui.css",
-    "serve": "vite preview --root docs --base /wave-ui/",
+    "serve": "vite preview --base /wave-ui/",
     "lint": "vite lint"
   },
   "sideEffects": [
@@ -44,40 +46,40 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/core": "^7.19.0",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@vitejs/plugin-vue": "^1.10.2",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.8",
     "axios": "^0.21.4",
-    "core-js": "^3.21.0",
+    "core-js": "^3.25.0",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-vue": "^7.20.0",
     "font-awesome": "^4.7.0",
     "ghspa": "^1.0.0",
-    "gsap": "^3.9.1",
+    "gsap": "^3.11.1",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.16",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.49.7",
-    "simple-syntax-highlighter": "^1.5.0",
-    "splitpanes": "^2.3.8",
-    "vite": "^2.7.13",
-    "vite-plugin-pug": "^0.3.0",
+    "sass": "^1.54.8",
+    "simple-syntax-highlighter": "^1.5.1",
+    "splitpanes": "^2.4.1",
+    "vite": "^2.9.15",
+    "vite-plugin-pug": "^0.3.1",
     "vite-plugin-vue2": "^1.9.3",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.3",
+    "vue": "^2.7.10",
+    "vue-router": "^3.6.5",
     "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.14",
-    "vueperslides": "^2.15.2",
+    "vue-template-compiler": "^2.7.10",
+    "vueperslides": "^2.15.3",
     "vuex": "^3.6.2"
   },
   "dependencies": {
-    "@mdi/font": "^6.5.95"
+    "@mdi/font": "^6.9.96"
   }
 }

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,19 +77,18 @@ 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)
 
       const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
       if (firstStyle) firstStyle.before(css)
@@ -127,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-button.vue

@@ -103,7 +103,7 @@ export default {
       ]
     },
     externalLink () {
-      return /^(https?:)?\/\//.test(this.route)
+      return /^(https?:)?\/\/|mailto:|tel:/.test(this.route)
     },
     classes () {
       return {

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 .w-divider(
   :class="classes"
-  role="presentation"
+  :role="$slots.default ? null : 'presentation'"
   :aria-orientation="vertical ? 'vertical' : 'horizontal'")
   slot
 </template>

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

@@ -144,12 +144,10 @@ export default {
       el.Validation.message = validationMessage
     },
 
+    // Reset is called from:
+    // - the form `reset` event listener
+    // - the modelValue watcher when set to `null`.
     reset (e) {
-      // Reset is called from:
-      //   - the form `reset` event listener
-      //   - the value watcher when set to `null`.
-      // Prevent resetting twice on form reset that sets the value to null.
-      if (!e) return
       this.status = null
 
       // Since the whole w-form may be disabled or readonly,

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

@@ -10,8 +10,6 @@ component.w-icon(
 </template>
 
 <script>
-import config from '../utils/config'
-
 export default {
   name: 'w-icon',
 
@@ -47,7 +45,7 @@ export default {
 
   computed: {
     hasLigature () {
-      return config.iconsLigature === this.fontName
+      return this.$waveui.config.iconsLigature === this.fontName
     },
     forcedSize () {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size)

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

@@ -16,7 +16,6 @@ transition-group(
 </template>
 
 <script>
-import config from '../utils/config'
 import NotificationManager from '../utils/notification-manager'
 
 export default {
@@ -28,7 +27,7 @@ export default {
 
   computed: {
     conf () {
-      return config.notificationManager
+      return this.$waveui.config.notificationManager
     },
     notifications () {
       return this.notifManager?.notifications || []

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"
       @input="$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-table.vue

@@ -73,7 +73,7 @@
                 v-if="$scopedSlots[`item-cell.${header.key}`] || $scopedSlots[`item-cell.${j + 1}`] || $scopedSlots['item-cell']"
                 :key="`${j}-a`"
                 :data-label="header.label"
-                :class="`text-${header.align || 'left'}`")
+                :class="{ [`text-${header.align || 'left'}`]: true, 'w-table__cell--sticky': header.sticky }")
                 slot(
                   v-if="$scopedSlots[`item-cell.${header.key}`]"
                   :name="`item-cell.${header.key}`"
@@ -103,7 +103,7 @@
                 v-else
                 :key="`${j}-b`"
                 :data-label="header.label"
-                :class="`text-${header.align || 'left'}`")
+                :class="{ [`text-${header.align || 'left'}`]: true, 'w-table__cell--sticky': header.sticky }")
                 div(v-html="item[header.key] || ''")
                 span.w-table__col-resizer(
                   v-if="j < headers.length - 1 && resizableColumns"
@@ -147,6 +147,7 @@ export default {
     items: { type: Array, required: true },
     headers: { type: Array, required: true },
     noHeaders: { type: Boolean },
+    fixedLayout: { type: Boolean },
     fixedHeaders: { type: Boolean },
     fixedFooter: { type: Boolean },
     loading: { type: Boolean },
@@ -264,11 +265,13 @@ export default {
 
     classes () {
       return {
+        'w-table--fixed-layout': this.fixedLayout || this.resizableColumns || this.hasStickyColumn,
         'w-table--mobile': this.isMobile || null,
         'w-table--resizable-cols': this.resizableColumns || null,
         'w-table--resizing': this.colResizing.dragging,
         'w-table--fixed-header': this.fixedHeaders,
-        'w-table--fixed-footer': this.fixedFooter
+        'w-table--fixed-footer': this.fixedFooter,
+        'w-table--sticky-column': this.hasStickyColumn
       }
     },
 
@@ -276,6 +279,10 @@ export default {
       return ~~this.mobileBreakpoint && this.$waveui.breakpoint.width <= ~~this.mobileBreakpoint
     },
 
+    hasStickyColumn () {
+      return this.headers.find(header => header.sticky)
+    },
+
     // Faster lookup than array.includes(uid) and also cached.
     selectedRowsByUid () {
       return this.selectedRowsInternal.reduce((obj, uid) => (obj[uid] = true) && obj, {})
@@ -291,6 +298,7 @@ export default {
     headerClasses (header) {
       return {
         'w-table__header--sortable': header.sortable !== false, // Can also be falsy with `0`.
+        'w-table__header--sticky': header.sticky,
         'w-table__header--resizable': !!this.resizableColumns,
         [`text-${header.align || 'left'}`]: true
       }
@@ -529,7 +537,7 @@ $tr-border-top: 1px;
   border-collapse: collapse;
   border: none;
 
-  &--resizable-cols {
+  &--fixed-layout {
     table-layout: fixed; // Allow resizing beyond the cell minimum text width.
   }
 
@@ -552,6 +560,7 @@ $tr-border-top: 1px;
     position: sticky;
     top: 0;
     background-color: #fff;
+    z-index: 1; // For sticky columns to go under.
 
     &:after {
       content: '';
@@ -563,6 +572,22 @@ $tr-border-top: 1px;
     }
   }
 
+  &__header--sticky {
+    position: sticky;
+    left: 0;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+      background-color: #fff;
+    }
+  }
+
   // Sorting arrow.
   &__header--sortable {cursor: pointer;}
   &__header-sort {
@@ -652,6 +677,24 @@ $tr-border-top: 1px;
     }
   }
 
+  &__cell--sticky {
+    position: sticky;
+    left: 0;
+
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+    }
+    &:before {background-color: #fff;}
+  }
+  tr:nth-child(odd) &__cell--sticky:after {background-color: $table-tr-odd-color;}
+  tr:hover &__cell--sticky:after {background-color: $table-tr-hover-color;}
+
   .no-data &__cell {
     background-color: rgba(255, 255, 255, 0.2);
     padding: (2 * $base-increment) $base-increment;
@@ -668,6 +711,7 @@ $tr-border-top: 1px;
     position: sticky;
     bottom: 0;
     background-color: #fff;
+    z-index: 1; // For sticky columns to go under.
 
     &:after {
       content: '';

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

@@ -329,6 +329,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;}
@@ -356,6 +358,7 @@ export default {
   // ------------------------------------------------------
   &__content-wrap {
     position: relative;
+    flex-grow: 1;
 
     .w-tabs--card & {
       border: $border;

package/src/wave-ui/core.js

@@ -34,6 +34,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 (Vue, options = {}) {
     // Register directives.
     // for (const id in directives) {
@@ -103,7 +105,10 @@ export default class WaveUI {
         }
       }
 
+      this.config = config
+      this.notify = (...args) => notificationManager.notify(...args)
       WaveUI.instance = this
+
       // Make waveui reactive and expose the single instance in Vue.
       WaveUI.vueInstance.prototype.$waveui = WaveUI.vueInstance.observable(this)
 
@@ -116,4 +121,7 @@ export default class WaveUI {
   }
 }
 
-WaveUI.version = '__VERSION__'
+/**
+ * Returns the WaveUI instance. Equivalent to using `$waveui` inside templates.
+ */
+export const useWaveUI = () => inject('$waveui')

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
 }