wave-ui 2.43.2 → 2.45.0

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

@@ -179,8 +179,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

@@ -48,7 +48,8 @@ export default class WaveUI {
     //   if (directives[id]) app.directive(id, directives[id])
     // }
     app.directive('focus', {
-      mounted: el => el.focus()
+      // Wait for the next tick to focus the newly mounted element.
+      mounted: el => setTimeout(() => el.focus(), 0)
     })
     app.directive('scroll', {
       mounted: (el, binding) => {