wave-ui 2.34.0 → 2.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

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

@@ -1,12 +1,12 @@
 <template lang="pug">
 component.w-icon(
   :is="tag || 'i'"
-  :class="classes"
   v-on="$attrs"
+  :class="classes"
   role="icon"
   aria-hidden="true"
-  :style="styles")
-  template(v-if="ligature") {{ ligature.icon }}
+  :style="readIcon() /* Always reacting to slot change when called from template. */ && styles")
+  template(v-if="hasLigature") {{ icon }}
 </template>
 
 <script>
@@ -41,15 +41,13 @@ export default {
   emits: [],
 
   data: () => ({
-    icon: ''
+    icon: '',
+    fontName: ''
   }),
 
   computed: {
-    ligature () {
-      if (!config.iconsLigature) return false
-
-      const [fontName, icon] = this.icon.split(' ')
-      return fontName === config.iconsLigature && { fontName, icon }
+    hasLigature () {
+      return config.iconsLigature === this.fontName
     },
     forcedSize () {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size)
@@ -66,7 +64,8 @@ export default {
     },
     classes () {
       return {
-        [this.icon]: true,
+        [this.fontName]: true,
+        [!this.hasLigature && this.icon]: !this.hasLigature && this.icon,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -80,8 +79,7 @@ export default {
         'w-icon--rotate-90': this.rotate90a,
         'w-icon--rotate-135': this.rotate135a,
         'w-icon--flip-x': this.flipX,
-        'w-icon--flip-y': this.flipY,
-        [this.ligature && this.ligature.fontName]: this.ligature
+        'w-icon--flip-y': this.flipY
       }
     },
     styles () {
@@ -89,14 +87,13 @@ export default {
     }
   },
 
-  created () {
-    this.icon = this.$slots.default && this.$slots.default()[0].children
-  },
-
-  // Using the slot content directly in the classes computed is not always reacting to changes.
-  // https://github.com/antoniandre/wave-ui/issues/81
-  updated () {
-    this.icon = this.$slots.default && this.$slots.default()[0].children
+  methods: {
+    readIcon () {
+      const { default: slot } = this.$slots
+      const [fontName = '', icon = ''] = typeof slot === 'function' && slot()[0].children.trim().split(' ') || []
+      this.fontName = fontName
+      this.icon = icon
+    }
   }
 }
 </script>
@@ -110,6 +107,7 @@ export default {
   justify-content: center;
   vertical-align: middle;
   user-select: none;
+  speak: never;
   line-height: 1;
   font-size: 1.2em;
   width: 1em;

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

@@ -29,6 +29,10 @@ component(
     @click="$refs.input.focus();$refs.input.click()"
     v-on="$attrs"
     :class="inputClasses")
+    .w-switch__track(v-if="$slots.track")
+      slot(name="track")
+    .w-switch__thumb(v-if="$slots.thumb")
+      slot(name="thumb")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_.uid}`")
       slot
@@ -77,6 +81,8 @@ export default {
         'w-switch--disabled': this.isDisabled,
         'w-switch--readonly': this.isReadonly,
         'w-switch--ripple': this.ripple.start,
+        'w-switch--custom-thumb': this.$slots.thumb,
+        'w-switch--custom-track': this.$slots.track,
         'w-switch--rippled': this.ripple.end
       }
     },
@@ -186,8 +192,18 @@ $disabled-color: #ddd;
     }
   }
 
-  // Thumb.
-  &__input:after {
+  // Track slot, if any.
+  &__track {
+    position: absolute;
+    left: 100%;
+    padding: 0 4px;
+    transform: translateX(-100%);
+    @include default-transition;
+  }
+  .w-switch--on &__track {left: 0;transform: translateX(0);}
+
+  // Thumb: show either the thumb slot if any, or :after otherwise.
+  &__thumb, &__input:after {
     content: '';
     position: absolute;
     left: 0;
@@ -196,22 +212,28 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: #fff;
     border-radius: 100%;
+    text-align: center;
     @include default-transition;
 
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
 
-    :checked ~ & {transform: translateX(100%);}
+    .w-switch--on & {left: 100%;transform: translateX(-100%);}
 
     .w-switch--thin & {
       top: - round(0.15 * $small-form-el-size);
       transform: scale(1.1);
       box-shadow: $box-shadow;
     }
-    .w-switch--thin :checked ~ & {
-      transform: translateX(100%) scale(1.1);
+    .w-switch--thin.w-switch--on & {
+      transform: translateX(-100%) scale(1.1);
       background-color: currentColor;
     }
   }
+  &--custom-thumb &__input:after {display: none;}
+  &__thumb > * {
+    width: inherit;
+    height: inherit;
+  }
 
   // The focus outline & ripple on switch activation.
   &__input:before {
@@ -223,11 +245,12 @@ $disabled-color: #ddd;
     height: $small-form-el-size;
     background-color: currentColor;
     border-radius: 100%;
-    transform: translateX(100%) scale(0);
     opacity: 0;
     pointer-events: none;
     transition: 0.25s ease-in-out;
 
+    :checked ~ & {transform: translateX(-100%) scale(0);left: 100%;}
+
     .w-switch[class^="bdrs"] &, .w-switch[class*=" bdrs"] & {border-radius: inherit;}
     .w-switch--thin & {top: - round(0.15 * $small-form-el-size);}
   }
@@ -242,14 +265,14 @@ $disabled-color: #ddd;
     opacity: 0.2;
   }
   :focus:checked ~ &__input:before {
-    transform: translateX(100%) scale(1.8);
+    transform: translateX(-100%) scale(1.8);
   }
 
   // After ripple reset to default state, then remove the class via js and the
   // `:focus ~ &__input:before` will re-transition to normal focused outline.
   &--rippled &__input:before {
     transition: none;
-    transform: translateX(100%) scale(0);
+    transform: translateX(-100%) scale(0);
     opacity: 0;
   }
 
@@ -264,7 +287,7 @@ $disabled-color: #ddd;
 }
 
 @keyframes w-switch-ripple {
-  0% {opacity: 0.8;transform: translateX(100%) scale(1);background-color: currentColor;} // Start with visible ripple.
-  100% {opacity: 0;transform: translateX(100%) scale(2.8);} // Propagate ripple to max radius and fade out.
+  0% {opacity: 0.8;transform: translateX(-100%) scale(1);background-color: currentColor;} // Start with visible ripple.
+  100% {opacity: 0;transform: translateX(-100%) scale(2.8);} // Propagate ripple to max radius and fade out.
 }
 </style>