wave-ui 3.28.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.28.0",
+  "version": "4.0.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

package/src/wave-ui/components/index.js

@@ -2,7 +2,6 @@ export { default as WAccordion } from './w-accordion/index.vue'
 export { default as WAccordionItem } from './w-accordion/item.vue'
 export { default as WAlert } from './w-alert.vue'
 export { default as WAutocomplete } from './w-autocomplete.vue'
-export { default as WApp } from './w-app.vue'
 export { default as WBadge } from './w-badge.vue'
 export { default as WBreadcrumbs } from './w-breadcrumbs.vue'
 export { default as WButton } from './w-button/index.vue'

package/src/wave-ui/components/transitions/w-transition-bounce.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-bounce',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 transition(
   name="expand"
-  mode="out-in"
+  :mode="mode"
   :css="false"
   @before-appear="beforeAppear"
   @appear="appear"
@@ -22,7 +22,8 @@ export default {
   props: {
     x: { type: Boolean },
     y: { type: Boolean },
-    duration: { type: Number, default: 250 }
+    duration: { type: Number, default: 250 },
+    mode: { type: String, default: 'out-in' }
   },
 
   data: () => ({

package/src/wave-ui/components/transitions/w-transition-fade.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-fade',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-scale-fade.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-scale-fade',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-scale.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-scale',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-slide-fade.vue

@@ -12,7 +12,8 @@ export default {
     right: { type: Boolean },
     up: { type: Boolean },
     down: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   },
 
   computed: {

package/src/wave-ui/components/transitions/w-transition-slide.vue

@@ -12,7 +12,8 @@ export default {
     right: { type: Boolean },
     up: { type: Boolean },
     down: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   },
 
   computed: {

package/src/wave-ui/components/transitions/w-transition-twist.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-twist',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

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

@@ -45,6 +45,7 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import { objectifyClasses } from '../../utils/index'
 import { consoleError } from '../../utils/console'
 import RippleMixin from '../../mixins/ripple'
@@ -68,6 +69,7 @@ export default {
     itemClass: { type: [String, Array, Object] },
     titleClass: { type: [String, Array, Object] },
     contentClass: { type: [String, Array, Object] },
+    expandedClass: { type: [String, Array, Object] },
     expandIcon: { type: [String, Boolean], default: 'wi-triangle-down' },
     expandIconRight: { type: Boolean },
     expandIconRotate90: { type: Boolean },
@@ -89,8 +91,9 @@ export default {
   // All provided to the WAccordionItem, not passed as prop since it could be used externally.
   provide () {
     return {
-      titleClasses: this.titleClasses,
-      contentClasses: this.contentClasses,
+      titleClasses: computed(() => this.titleClasses),
+      contentClasses: computed(() => this.contentClasses),
+      expandedClass: computed(() => this.expandedClass),
       onItemToggle: this.onItemToggle,
       onEndOfCollapse: this.onEndOfCollapse,
       getOriginalItem: this.getOriginalItem,
@@ -116,7 +119,7 @@ export default {
 
     // Detect if the accordion items are directly provided through slot using WAccordionItem.
     accordionItemsProvided () {
-      return this.$slots.default?.()?.some(item => item?.type?.name)
+      return this.$slots.default?.()?.some(item => item?.type?.name === 'w-accordion-item')
     },
 
     accordionClasses () {
@@ -133,7 +136,9 @@ export default {
     },
 
     itemClasses () {
-      return objectifyClasses(this.itemClass)
+      const classes = [this.itemClass]
+      if (this.expandedClass) classes.push(this.expandedClass)
+      return objectifyClasses(classes)
     },
 
     titleClasses () {
@@ -217,6 +222,6 @@ export default {
 
   @include themeable;
 
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 }
 </style>

package/src/wave-ui/components/w-accordion/item.vue

@@ -45,11 +45,19 @@
       :item="accordionItem"
       :class="contentClasses")
       slot(
+        v-if="$slots.content"
         name="content"
         :item="getOriginalItem(accordionItem)"
         :expanded="accordionItem._expanded"
         :index="accordionItem._index + 1")
         div(v-html="accordionItem[options.itemContentKey]")
+      slot(
+        v-else
+        name="default"
+        :item="getOriginalItem(accordionItem)"
+        :expanded="accordionItem._expanded"
+        :index="accordionItem._index + 1")
+        div(v-html="accordionItem[options.itemContentKey]")
   w-transition-expand(
     v-else
     y
@@ -62,11 +70,19 @@
         :item="accordionItem"
         :class="contentClasses")
         slot(
+          v-if="$slots.content"
           name="content"
           :item="getOriginalItem(accordionItem)"
           :expanded="accordionItem._expanded"
           :index="accordionItem._index + 1")
           div(v-html="accordionItem[options.itemContentKey]")
+        slot(
+          v-else
+          name="default"
+          :item="getOriginalItem(accordionItem)"
+          :expanded="accordionItem._expanded"
+          :index="accordionItem._index + 1")
+          div(v-html="accordionItem[options.itemContentKey]")
 </template>
 
 <script>
@@ -97,6 +113,7 @@ export default {
     options: { from: 'options' },
     titleClasses: { from: 'titleClasses' },
     contentClasses: { from: 'contentClasses' },
+    expandedClass: { from: 'expandedClass' },
     onItemToggle: { from: 'onItemToggle' },
     onEndOfCollapse: { from: 'onEndOfCollapse' },
     getOriginalItem: { from: 'getOriginalItem' },
@@ -137,7 +154,8 @@ export default {
       return {
         'w-accordion__item--expanded': this.accordionItem._expanded,
         'w-accordion__item--disabled': this.accordionItem._disabled,
-        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey]
+        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey],
+        [this.expandedClass]: this.accordionItem._expanded
       }
     }
   },
@@ -181,13 +199,11 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-accordion__item {position: relative;}
 
 button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 40%, transparent);}
 .w-accordion__expand-icon {
-  margin-right: $base-increment;
+  margin-right: var(--w-base-increment);
 
   .w-accordion--rotate-icon & {@include default-transition;}
   &--rotate90 {transform: rotate(-90deg);}
@@ -201,11 +217,11 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
   position: relative;
   display: flex;
   align-items: center;
-  font-size: math.round(1.2 * $base-font-size);
-  padding: 1 * $base-increment;
+  font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);
+  padding: var(--w-base-increment);
   user-select: none;
   cursor: pointer;
-  border-top: $border;
+  border-top: var(--w-border);
   -webkit-tap-highlight-color: transparent;
 
   .w-accordion__item--disabled & {
@@ -213,7 +229,7 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
     opacity: 0.6;
     -webkit-tap-highlight-color: transparent;
   }
-  .w-accordion--no-icon &, .w-accordion--icon-right & {padding-left: 3 * $base-increment;}
+  .w-accordion--no-icon &, .w-accordion--icon-right & {padding-left: calc(var(--w-base-increment) * 3);}
 
   .w-accordion__item:first-child & {border-top-color: transparent;}
 
@@ -221,18 +237,17 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
     content: '';
     position: absolute;
     inset: 0;
-    background-color: currentColor;
-    opacity: 0;
-    transition: $fast-transition-duration;
+    background-color: transparent;
+    transition: background-color var(--w-transition-duration-fast);
     pointer-events: none;
   }
 
-  &:focus:before, &:hover:before {opacity: 0.03;}
-  &:active:before {opacity: 0.05;}
+  &:focus:before, &:hover:before {background-color: color-mix(in srgb, currentColor 3%, transparent);}
+  &:active:before {background-color: color-mix(in srgb, currentColor 5%, transparent);}
   .w-accordion__item--disabled &:before {display: none;}
 }
 
 .w-accordion__item-content {
-  padding: (2 * $base-increment) (3 * $base-increment);
+  padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
 }
 </style>

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

@@ -131,15 +131,13 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-alert {
   position: relative;
-  margin-top: 4 * $base-increment;
-  margin-bottom: 4 * $base-increment;
-  padding: 2 * $base-increment;
-  font-size: $base-font-size;
-  border-radius: $border-radius;
+  margin-top: calc(var(--w-base-increment) * 4);
+  margin-bottom: calc(var(--w-base-increment) * 4);
+  padding: calc(var(--w-base-increment) * 2);
+  font-size: var(--w-base-font-size);
+  border-radius: var(--w-border-radius);
   border: 0 solid currentColor;
 
   @include themeable;
@@ -154,10 +152,10 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding-left: 3 * $base-increment;
-    padding-right: 3 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 3);
+    padding-right: calc(var(--w-base-increment) * 3);
   }
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
   &--one-border, &--plain {border: transparent;}
 
   // Before for the border, after for the background color.
@@ -171,33 +169,33 @@ export default {
 
   // Single side border.
   // ------------------------------------------------------
-  &--border-left {padding-left: 3 * $base-increment;}
-  &--border-right {padding-right: 3 * $base-increment;}
-  &--border-top {padding-top: 3 * $base-increment;}
-  &--border-bottom {padding-bottom: 3 * $base-increment;}
+  &--border-left {padding-left: calc(var(--w-base-increment) * 3);}
+  &--border-right {padding-right: calc(var(--w-base-increment) * 3);}
+  &--border-top {padding-top: calc(var(--w-base-increment) * 3);}
+  &--border-bottom {padding-bottom: calc(var(--w-base-increment) * 3);}
 
   &--one-border:before {content: '';opacity: 0.3;}
   &--border-left:before {
     right: auto;
-    width: $base-increment;
+    width: var(--w-base-increment);
     border-top-left-radius: inherit;
     border-bottom-left-radius: inherit;
   }
   &--border-right:before {
     left: auto;
-    width: $base-increment;
+    width: var(--w-base-increment);
     border-top-right-radius: inherit;
     border-bottom-right-radius: inherit;
   }
   &--border-top:before {
     bottom: auto;
-    height: $base-increment;
+    height: var(--w-base-increment);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
   }
   &--border-bottom:before {
     top: auto;
-    height: $base-increment;
+    height: var(--w-base-increment);
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }
@@ -215,15 +213,15 @@ export default {
   // ------------------------------------------------------
   &__dismiss.w-button {
     align-self: flex-start;
-    margin-left: 2 * $base-increment;
-    margin-top: math.round(-0.5 * $base-increment);
-    margin-right: math.round(-0.5 * $base-increment);
+    margin-left: calc(var(--w-base-increment) * 2);
+    margin-top: calc(var(--w-base-increment) * -0.5);
+    margin-right: calc(var(--w-base-increment) * -0.5);
   }
 
   & &__icon {
     opacity: 0.9;
     align-self: flex-start;
-    margin-right: 2 * $base-increment;
+    margin-right: calc(var(--w-base-increment) * 2);
     font-size: 1.3em;
   }
   &--has-icon &__content {flex-grow: 1;}
@@ -238,18 +236,18 @@ export default {
     z-index: 1;
     transform: translateX(-50%);
     border: 1px solid color-mix(in srgb, var(--w-base-bg-color) 70%, transparent);
-    background-color: $base-bg-color;
+    background-color: var(--w-base-bg-color);
   }
   &--icon-outside &__icon:before {transform: scale(1.05);}
 
-  &--icon-outside &__content {padding-left: 3 * $base-increment;}
+  &--icon-outside &__content {padding-left: calc(var(--w-base-increment) * 3);}
 
   // Sizes.
   // ------------------------------------------------------
-  &.size--xs {padding-top: $base-increment;padding-bottom: $base-increment;}
-  &.size--sm {padding-top: $base-increment;padding-bottom: $base-increment;}
-  &.size--md {padding-top: math.round(2 * $base-increment);padding-bottom: math.round(2 * $base-increment);}
-  &.size--lg {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(2.5 * $base-increment);}
-  &.size--xl {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(3 * $base-increment);}
+  &.size--xs {padding-top: var(--w-base-increment);padding-bottom: var(--w-base-increment);}
+  &.size--sm {padding-top: var(--w-base-increment);padding-bottom: var(--w-base-increment);}
+  &.size--md {padding-top: calc(var(--w-base-increment) * 2);padding-bottom: calc(var(--w-base-increment) * 2);}
+  &.size--lg {padding-top: calc(var(--w-base-increment) * 3);padding-bottom: calc(var(--w-base-increment) * 2.5);}
+  &.size--xl {padding-top: calc(var(--w-base-increment) * 3);padding-bottom: calc(var(--w-base-increment) * 3);}
 }
 </style>