wave-ui 3.27.2 → 4.0.0

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

@@ -168,8 +168,8 @@ export default {
 .w-notification {
   display: flex;
   justify-content: center;
-  left: 2 * $base-increment;
-  right: 2 * $base-increment;
+  left: calc(var(--w-base-increment) * 2);
+  right: calc(var(--w-base-increment) * 2);
   position: fixed;
   z-index: 300;
   pointer-events: none;
@@ -178,8 +178,8 @@ export default {
 
   // Position.
   &--absolute {position: absolute;z-index: 400;}
-  &--top {top: 0;padding-top: 2 * $base-increment;}
-  &--bottom {bottom: 0;padding-bottom: 2 * $base-increment;}
+  &--top {top: 0;padding-top: calc(var(--w-base-increment) * 2);}
+  &--bottom {bottom: 0;padding-bottom: calc(var(--w-base-increment) * 2);}
   &--left {justify-content: flex-start;right: auto;}
   &--right {justify-content: flex-end;left: auto;}
 

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

@@ -135,11 +135,11 @@ $circle-size: 40;
   &--top {top: 0;}
   &--bottom {bottom: 0;}
 
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 
   // Linear progress.
   // ------------------------------------------------------
-  &--linear {border-radius: $border-radius;}
+  &--linear {border-radius: var(--w-border-radius);}
   // Tile, round and outline are only available on linear progress.
   &--tile {border-radius: 0;}
   &--round {border-radius: 99em;}
@@ -147,7 +147,7 @@ $circle-size: 40;
 
   &--linear {
     display: flex;
-    height: $base-increment;
+    height: var(--w-base-increment);
     overflow: hidden;
 
     // Background.
@@ -156,8 +156,7 @@ $circle-size: 40;
       position: absolute;
       inset: 0;
       border-radius: inherit;
-      background-color: currentColor;
-      opacity: 0.15;
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
     }
     &.w-progress--outline:after {display: none;}
 
@@ -242,11 +241,11 @@ $circle-size: 40;
     display: inline-flex;
     width: 3em;
     aspect-ratio: 1;
-    font-size: $base-font-size;
+    font-size: var(--w-base-font-size);
 
     svg {display: block;width: 100%;}
     circle.bg {stroke: currentColor;}
-    &.w-progress--default-bg circle.bg {stroke: $progress-bg-color;}
+    &.w-progress--default-bg circle.bg {stroke: var(--w-progress-bg-color);}
 
     .w-progress__progress {
       transform-origin: 100% 100%;

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

@@ -69,6 +69,12 @@ export default {
     color: { type: String, default: 'primary' },
     labelColor: { type: String, default: 'primary' },
     noRipple: { type: Boolean },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean },
     dark: { type: Boolean },
     light: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
@@ -90,6 +96,10 @@ export default {
     hasLabel () {
       return this.label || this.$slots.default
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return {
         [`w-radio w-radio--${this.inputValue ? 'checked' : 'unchecked'}`]: true,
@@ -98,7 +108,8 @@ export default {
         'w-radio--ripple': this.ripple.start,
         'w-radio--rippled': this.ripple.end,
         'w-radio--dark': this.ripple.dark,
-        'w-radio--light': this.ripple.light
+        'w-radio--light': this.ripple.light,
+        [`size--${this.presetSize}`]: !!this.presetSize
       }
     }
   },
@@ -148,6 +159,8 @@ $outline-width: 2px;
 $inactive-color: #666;
 
 .w-radio {
+  // --_size resolves --w-size if set (e.g. via size class or inline style), otherwise the global default.
+  --_size: var(--w-size, var(--w-small-form-el-size));
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
@@ -175,7 +188,7 @@ $inactive-color: #666;
   &__input {
     position: relative;
     border-radius: 100%;
-    width: $small-form-el-size;
+    width: var(--_size);
     aspect-ratio: 1;
     display: flex;
     flex: 0 0 auto; // Prevent stretching width or height.
@@ -185,11 +198,11 @@ $inactive-color: #666;
     transition: 0.3s ease-in-out;
     cursor: inherit;
 
-    .w-radio--disabled & {border-color: $disabled-color;}
+    .w-radio--disabled & {border-color: var(--w-disabled-color);}
 
     // Checked state.
     :checked ~ & {border-color: currentColor;}
-    .w-radio--disabled :checked ~ & {border-color: $disabled-color;}
+    .w-radio--disabled :checked ~ & {border-color: var(--w-disabled-color);}
   }
 
   // The inner bullet - visible when checked.
@@ -200,7 +213,7 @@ $inactive-color: #666;
     border: 0 solid $inactive-color;
     // Prevents a tiny hole while animating and in some browser zoom levels.
     background-color: $inactive-color;
-    transition: $transition-duration;
+    transition: var(--w-transition-duration);
 
     :checked ~ & {
       border-width: 4px;
@@ -209,9 +222,9 @@ $inactive-color: #666;
       background-color: currentColor;
     }
     .w-radio--disabled & {
-      border-color: $disabled-color;
+      border-color: var(--w-disabled-color);
       // Prevents a tiny hole while animating and in some browser zoom levels.
-      background-color: $disabled-color;
+      background-color: var(--w-disabled-color);
     }
   }
 
@@ -256,6 +269,18 @@ $inactive-color: #666;
 
     .w-radio--disabled & {opacity: 0.7;}
   }
+
+  // Sizes.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--xs &__input {border-width: 1px;}
+  &.size--xs :checked ~ &__input:after {border-width: 3px;}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--sm :checked ~ &__input:after {border-width: 3px;}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--lg :checked ~ &__input:after {border-width: 5px;}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
+  &.size--xl :checked ~ &__input:after {border-width: 6px;}
 }
 
 @keyframes w-radio-ripple {

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

@@ -49,7 +49,13 @@ export default {
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     inline: { type: Boolean },
     color: { type: String, default: 'primary' },
-    labelColor: { type: String, default: 'primary' }
+    labelColor: { type: String, default: 'primary' },
+    // Sizes.
+    xs: { type: Boolean },
+    sm: { type: Boolean },
+    md: { type: Boolean },
+    lg: { type: Boolean },
+    xl: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -77,10 +83,15 @@ export default {
         color: item[this.itemColorKey] || this.color
       }))
     },
+    presetSize () {
+      return (this.xs && 'xs') || (this.sm && 'sm') || (this.md && 'md') || (this.lg && 'lg') || (this.xl && 'xl') || null
+    },
+
     classes () {
       return [
         'w-radios',
-        `w-radios--${this.inline ? 'inline' : 'column'}`
+        `w-radios--${this.inline ? 'inline' : 'column'}`,
+        this.presetSize && `size--${this.presetSize}`
       ]
     }
   },
@@ -113,8 +124,22 @@ export default {
     flex-wrap: wrap;
     vertical-align: middle;
 
-    .w-radio {margin-right: 3 * $base-increment;}
+    .w-radio {margin-right: calc(var(--w-base-increment) * 3);}
     .w-radio:last-child {margin-right: 0;}
   }
+
+  // Sizes (cascades --w-small-form-el-size to child w-radio elements).
+  // Also scales the radio bullet border-width proportionally.
+  // ------------------------------------------------------
+  &.size--xs {--w-size: round(nearest, calc(0.86 * var(--w-base-font-size)), 2px);}
+  &.size--xs .w-radio__input {border-width: 1px;}
+  &.size--xs :checked ~ .w-radio__input:after {border-width: 3px;}
+  &.size--sm {--w-size: round(nearest, calc(1.14 * var(--w-base-font-size)), 2px);}
+  &.size--sm .w-radio__input {border-width: 1.5px;}
+  &.size--sm :checked ~ .w-radio__input:after {border-width: 4px;}
+  &.size--lg {--w-size: round(nearest, calc(1.43 * var(--w-base-font-size)), 2px);}
+  &.size--lg :checked ~ .w-radio__input:after {border-width: 5px;}
+  &.size--xl {--w-size: round(nearest, calc(1.71 * var(--w-base-font-size)), 2px);}
+  &.size--xl :checked ~ .w-radio__input:after {border-width: 7px;}
 }
 </style>

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

@@ -167,8 +167,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-rating {
   display: inline-flex;
   align-items: center;
@@ -184,21 +182,21 @@ export default {
     justify-content: center;
     border: none;
     background: none;
-    color: $rating-bg-color;
+    color: var(--w-rating-bg-color);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    @include default-transition($fast-transition-duration);
+    @include default-transition(var(--w-transition-duration-fast));
 
     // Disabled & readonly.
     .w-rating--disabled & {opacity: 0.6;cursor: not-allowed;}
     .w-rating--readonly & {cursor: auto;}
 
     // Sizes.
-    &.size--xs {font-size: math.round(0.85 * $base-font-size);}
-    &.size--sm {font-size: math.round(1.15 * $base-font-size);}
-    &.size--md {font-size: math.round(1.4 * $base-font-size);}
-    &.size--lg {font-size: math.round(1.7 * $base-font-size);}
-    &.size--xl {font-size: 2 * $base-font-size;margin-left: 0;}
+    &.size--xs {font-size: round(nearest, calc(0.85 * var(--w-base-font-size)), 1px);}
+    &.size--sm {font-size: round(nearest, calc(1.15 * var(--w-base-font-size)), 1px);}
+    &.size--md {font-size: round(nearest, calc(1.4 * var(--w-base-font-size)), 1px);}
+    &.size--lg {font-size: round(nearest, calc(1.7 * var(--w-base-font-size)), 1px);}
+    &.size--xl {font-size: calc(2 * var(--w-base-font-size));margin-left: 0;}
 
     &:before {font-size: 1.1em;}
     &:before, .w-icon:before {