wave-ui 1.58.0 → 1.60.0

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

@@ -166,7 +166,7 @@ export default {
   &__button {
     position: relative;
     width: 1.1em;
-    height: 1.1em;
+    aspect-ratio: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -216,6 +216,7 @@ export default {
     position: absolute;
     left: 0;
     width: 100%;
+    height: 100%;
     font-size: 1em;
     justify-content: flex-start;
     overflow: hidden;

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

@@ -295,7 +295,7 @@ export default {
       transform: translateX(-50%);
       top: 0;
       width: $base-increment;
-      height: $base-increment;
+      aspect-ratio: 1;
       background-color: rgba(0, 0, 0, 0.2);
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
@@ -358,7 +358,7 @@ export default {
   &__thumb {
     position: absolute;
     width: 3 * $base-increment;
-    height: 3 * $base-increment;
+    aspect-ratio: 1;
     left: 100%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -373,7 +373,7 @@ export default {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
+    aspect-ratio: 1;
     border: none;
     border-radius: 99em;
     cursor: pointer;
@@ -452,7 +452,7 @@ export default {
       transform: translateX(-50%) rotate(-45deg);
       border-radius: 99em 99em 99em 0;
       width: 2.8em;
-      height: 2.8em;
+      aspect-ratio: 1;
 
       & > div {
         position: absolute;

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

@@ -61,7 +61,7 @@ export default {
   align-self: center;
   font-size: 2rem;
   width: 1em;
-  height: 1em;
+  aspect-ratio: 1;
 
   &.size--xs {font-size: round(0.9 * divide($base-font-size, 2)) * 2;}
   &.size--sm {font-size: round(1.5 * $base-font-size);}
@@ -73,7 +73,7 @@ export default {
     content: '';
     position: absolute;
     width: 100%;
-    height: 100%;
+    aspect-ratio: 1;
     top: 0;
     left: 0;
     background-color: currentColor;

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

@@ -33,8 +33,13 @@ component(
     :class="inputClasses")
     .w-switch__track(v-if="$slots.track")
       slot(name="track")
-    .w-switch__thumb(v-if="$slots.thumb")
-      slot(name="thumb")
+    .w-switch__thumb(v-if="$slots.thumb || loading")
+      w-progress(
+        v-if="loading"
+        circle
+        color="inherit"
+        v-bind="typeof loading === 'number' ? { 'model-value': loading } : {}")
+      slot(v-else name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-switch__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
@@ -57,7 +62,8 @@ export default {
     color: { type: String, default: 'primary' },
     labelColor: { type: String, default: 'primary' },
     thin: { type: Boolean },
-    noRipple: { type: Boolean }
+    noRipple: { type: Boolean },
+    loading: { type: [Boolean, Number], default: false }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -88,6 +94,7 @@ export default {
         'w-switch--ripple': this.ripple.start,
         'w-switch--custom-thumb': this.$slots.thumb,
         'w-switch--custom-track': this.$slots.track,
+        'w-switch--loading': this.loading,
         'w-switch--rippled': this.ripple.end
       }
     },
@@ -142,6 +149,7 @@ $disabled-color: #ddd;
   vertical-align: middle;
   cursor: pointer;
 
+  &--loading {cursor: wait;}
   &--disabled, &--readonly {
     cursor: not-allowed;
     touch-action: initial;
@@ -234,7 +242,9 @@ $disabled-color: #ddd;
       background-color: currentColor;
     }
   }
-  &--custom-thumb &__input:after {display: none;}
+  &--loading .w-progress {padding: 1px;}
+  &--loading.w-switch--thin.w-switch--on .w-progress {color: #fff;}
+  &--loading &__input:after, &--custom-thumb &__input:after {display: none;}
   &__thumb > * {
     width: inherit;
     height: inherit;
@@ -247,7 +257,7 @@ $disabled-color: #ddd;
     left: 0;
     top: 0;
     width: $small-form-el-size;
-    height: $small-form-el-size;
+    aspect-ratio: 1;
     background-color: currentColor;
     border-radius: 100%;
     opacity: 0;

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

@@ -37,11 +37,16 @@
             v-if="i < headers.length - 1 && resizableColumns"
             :class="{ 'w-table__col-resizer--hover': colResizing.hover === i, 'w-table__col-resizer--active': colResizing.columnIndex === i }"
             @click.stop="/* Prevent click on header, which triggers sorting & DOM refresh. */")
+      //- Progress bar only.
+      w-transition-fade
+        tr.w-table__progress-bar(v-if="loading === 'header'")
+          td(:colspan="headers.length")
+            w-progress(tile)
 
     //- Table body.
     tbody
-      //- Progress bar.
-      tr.w-table__progress-bar(v-if="loading")
+      //- Progress bar & loading text.
+      tr.w-table__progress-bar(v-if="loading === true")
         td(:colspan="headers.length")
           w-progress(tile)
           .w-table__loading-text
@@ -52,7 +57,7 @@
           slot(name="no-data") No data to show.
 
       //- Normal rows.
-      template(v-else)
+      template(v-if="tableItems.length && loading !== true")
         template(v-for="(item, i) in sortedItems")
           //- Fully custom tr (`item` slot).
           slot(
@@ -150,7 +155,7 @@ export default {
     fixedLayout: { type: Boolean },
     fixedHeaders: { type: Boolean },
     fixedFooter: { type: Boolean },
-    loading: { type: Boolean },
+    loading: { type: [Boolean, String] }, // Bool or 'header' to only display the bar in the header.
     // Allow single sort: `+id`, or multiple in an array like: ['+id', '-firstName'].
     sort: { type: [String, Array] },
 
@@ -188,6 +193,7 @@ export default {
     uidKey: { type: String, default: 'id' },
 
     filter: { type: Function },
+    sortFunction: { type: Function },
     mobileBreakpoint: { type: Number, default: 0 },
     resizableColumns: { type: Boolean }
   },
@@ -232,7 +238,7 @@ export default {
     },
 
     sortedItems () {
-      if (!this.activeSorting.length) return this.filteredItems
+      if (!this.activeSorting.length || this.sortFunction) return this.filteredItems
 
       // Only sort with 1 key for now, may handle more later.
       const sortKey1 = this.activeSorting[0].replace(/^[+-]/, '')
@@ -313,15 +319,18 @@ export default {
       ]
     },
 
-    sortTable (header) {
+    async sortTable (header) {
       const alreadySortingThis = this.activeSortingKeys[header.key]
       if (alreadySortingThis && this.activeSortingKeys[header.key] === '-') {
         this.activeSorting = []
-        return this.$emit('update:sort')
       }
       else this.$set(this.activeSorting, 0, (alreadySortingThis ? '-' : '+') + header.key)
 
       this.$emit('update:sort', this.activeSorting)
+
+      if (typeof this.sortFunction === 'function') {
+        await this.sortFunction(this.activeSorting)
+      }
     },
 
     doSelectRow (item, index) {
@@ -549,6 +558,8 @@ $tr-border-top: 1px;
 
   // Table headers.
   // ------------------------------------------------------
+  thead {position: relative;}
+
   &__header {padding: $base-increment;}
   &__header--resizable {
     overflow: hidden;
@@ -628,6 +639,12 @@ $tr-border-top: 1px;
 
   // Progress bar when loading.
   &__progress-bar:nth-child(odd) {background: none;}
+  thead .w-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
   &__progress-bar td {padding: 0;height: 1px;}
   @-moz-document url-prefix() {
     &__progress-bar td {height: 100%;}
@@ -754,6 +771,7 @@ $tr-border-top: 1px;
 
   .w-table__progress-bar {
     display: table-row;
+
     td {display: table-cell;}
     td:before {display: none;}
   }

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

@@ -178,8 +178,10 @@ export default {
 
       if (!this.fillBar && this.activeTabEl) {
         const { left, width } = this.activeTabEl.getBoundingClientRect()
-        const { left: parentLeft } = this.activeTabEl.parentNode.getBoundingClientRect()
-        this.slider.left = `${left - parentLeft + this.activeTabEl.parentNode.scrollLeft}px`
+        const tabsBar = this.activeTabEl.parentNode
+        const { left: parentLeft } = tabsBar.getBoundingClientRect()
+        const { borderLeftWidth } = getComputedStyle(tabsBar)
+        this.slider.left = `${left - parentLeft - parseInt(borderLeftWidth) + tabsBar.scrollLeft}px`
         this.slider.width = `${width}px`
       }
       else {

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

@@ -5,7 +5,7 @@ ul.w-timeline
       :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
       :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }")
       | {{ item[itemIconKey] || icon }}
-    slot(name="item" v-if="!$slots[`item.${i + 1}`]" :item="item" :index="i + 1")
+    slot(name="item" v-if="!$scopedSlots[`item.${i + 1}`]" :item="item" :index="i + 1")
       .w-timeline-item__title(
         :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }"
         v-html="item[itemTitleKey]")
@@ -52,7 +52,7 @@ export default {
     border-radius: 1em;
     border: 1px solid currentColor;
     width: $base-font-size;
-    height: $base-font-size;
+    aspect-ratio: 1;
     transform: translateX(-50%);
     z-index: 1;
   }

package/src/wave-ui/core.js

@@ -1,7 +1,6 @@
 import config, { mergeConfig } from './utils/config'
 import NotificationManager from './utils/notification-manager'
 import colors from './utils/colors'
-import { consoleWarn } from './utils/console'
 // import * as directives from './directives'
 
 const shadeColor = (col, amt) => {
@@ -42,8 +41,8 @@ export default class WaveUI {
     //   if (directives[id]) Vue.directive(id, directives[id])
     // }
     Vue.directive('focus', {
-      // When the bound element is inserted into the DOM.
-      inserted: el => el.focus()
+      // Wait for the next tick to focus the newly mounted element.
+      inserted: el => setTimeout(() => el.focus(), 0)
     })
     Vue.directive('scroll', {
       inserted: (el, binding) => {