wave-ui 1.58.0 → 1.59.0

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-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

@@ -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) => {