wave-ui 2.40.4 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.40.4",
+  "version": "2.42.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",
@@ -37,7 +37,7 @@
     "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": [
@@ -46,30 +46,29 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/core": "^7.18.13",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@mdi/font": "^5.9.55",
     "@vitejs/plugin-vue": "^1.10.2",
     "@vue/compiler-sfc": "3.1.5",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.8",
     "axios": "^0.25.0",
     "eslint": "^7.32.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.10.3",
+    "gsap": "^3.11.0",
     "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.50.0",
-    "simple-syntax-highlighter": "^2.2.0",
+    "sass": "^1.54.5",
+    "simple-syntax-highlighter": "^2.2.3",
     "splitpanes": "^3.1.1",
-    "vite": "^2.9.5",
+    "vite": "^2.9.15",
     "vite-plugin-pug": "^0.3.1",
-    "vue": "^3.2.33",
-    "vue-cal": "^4.2.0",
-    "vue-router": "^4.0.14",
-    "vueperslides": "^3.3.2",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.5",
+    "vueperslides": "^3.4.2",
     "vuex": "^4.0.2"
   }
 }

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

@@ -73,7 +73,7 @@
                 v-if="$slots[`item-cell.${header.key}`] || $slots[`item-cell.${j + 1}`] || $slots['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="$slots[`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

@@ -359,6 +359,7 @@ export default {
   // ------------------------------------------------------
   &__content-wrap {
     position: relative;
+    flex-grow: 1;
 
     .w-tabs--card & {
       border: $border;

package/src/wave-ui/core.js

@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { reactive, inject } from 'vue'
 import config, { mergeConfig } from './utils/config'
 import NotificationManager from './utils/notification-manager'
 import colors from './utils/colors'
@@ -111,11 +111,12 @@ export default class WaveUI {
       }
 
       this.config = config
-      this.notify = notificationManager.notify
+      this.notify = (...args) => notificationManager.notify(...args)
       WaveUI.instance = this
 
       // Make waveui reactive and expose the single instance in Vue.
       app.config.globalProperties.$waveui = reactive(this)
+      app.provide('$waveui', WaveUI.instance)
     }
   }
 
@@ -124,4 +125,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/index.js

@@ -4,4 +4,4 @@ import * as components from './components'
 const install = WaveUI.install
 WaveUI.install = (app, options = {}) => install.call(WaveUI, app, { components, ...options })
 
-export default WaveUI
+export { default, useWaveUI } from './core'