wave-ui 1.51.1 → 1.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.51.1",
+  "version": "1.52.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-accordion.vue

@@ -126,14 +126,6 @@ export default {
         [item[this.itemColorKey]]: item[this.itemColorKey]
       }
     }
-  },
-
-  watch: {
-    value (array) {
-      this.accordionItems.forEach((item, i) => {
-        this.$set(item, 'expanded', (Array.isArray(array) && array[i]) || false)
-      })
-    }
   }
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-card(:class="classes" :style="styles")
+.w-card(:class="classes")
   .w-card__title(
     v-if="$slots.title"
     :class="{ 'w-card__title--has-toolbar': titleHasToolbar, ...titleClasses }")
@@ -71,10 +71,6 @@ export default {
         'w-card--tile': this.tile,
         'w-card--shadow': this.shadow
       }
-    },
-
-    styles () {
-      return false
     }
   }
 }
@@ -107,6 +103,17 @@ export default {
   &__content {
     padding: 3 * $base-increment;
     flex-grow: 1;
+
+    // Only if there is no title bar.
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+    &:last-child {
+    // Only if there is no actions bar.
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
   }
 
   &__actions {

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

@@ -18,7 +18,7 @@ export default {
     classes () {
       return {
         [`w-divider--has-color ${this.color}`]: this.color,
-        'w-divider--vertical': this.vertical,
+        [`w-divider--${this.vertical ? 'vertical' : 'horizontal'}`]: true,
         'w-divider--has-content': this.$slots.default
       }
     }
@@ -34,10 +34,14 @@ export default {
   &--has-color {border-color: currentColor;}
 
   &--vertical {
+    align-self: stretch; // Fill up the available height.
     display: flex;
     border-top-width: 0;
     border-left-width: 1px;
-    align-self: stretch;
+  }
+
+  .w-toolbar--vertical > &--horizontal {
+    align-self: stretch; // Fill up the available width.
   }
 
   // With a slot.

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 ul.w-timeline
   li.w-timeline-item(v-for="(item, i) in items" :key="i")
-    .w-timeline-item__bullet(
+    component.w-timeline-item__bullet(
       :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
       :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }")
       | {{ item[itemIconKey] || icon }}

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

@@ -13,6 +13,10 @@ export default {
     absolute: { type: Boolean },
     fixed: { type: Boolean },
     bottom: { type: Boolean },
+    vertical: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    width: { type: [Number, String], default: null },
     height: { type: [Number, String], default: null },
     noBorder: { type: Boolean },
     shadow: { type: Boolean }
@@ -21,25 +25,35 @@ export default {
   emits: [],
 
   computed: {
-    // Return the width or height value if defined, or false otherwise.
+    // Return the height value if defined, or false otherwise.
     toolbarHeight () {
       const h = this.height
       // If a number is passed without units, append `px`.
       return h && parseInt(h) == h ? h + 'px' : h
     },
+    // Return the width value if defined, or false otherwise.
+    toolbarWidth () {
+      const w = this.width
+      // If a number is passed without units, append `px`.
+      return w && parseInt(w) == w ? w + 'px' : w
+    },
     classes () {
       return {
         [this.color]: !!this.color,
         [`${this.bgColor}--bg`]: !!this.bgColor,
         'w-toolbar--absolute': !!this.absolute,
         'w-toolbar--fixed': !!this.fixed,
-        [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: true,
+        [`w-toolbar--${this.bottom ? 'bottom' : 'top'}`]: !this.vertical,
+        [`w-toolbar--vertical w-toolbar--${this.right ? 'right' : 'left'}`]: this.vertical,
         'w-toolbar--no-border': this.noBorder,
         'w-toolbar--shadow': !!this.shadow
       }
     },
     styles () {
-      return this.height ? `height: ${this.toolbarHeight}` : false
+      return {
+        height: this.height && !this.vertical ? this.toolbarHeight : null,
+        width: this.width && this.vertical ? this.toolbarWidth : null
+      }
     }
   }
 }
@@ -56,18 +70,36 @@ export default {
   z-index: 10;
 
   &--absolute, &--fixed {top: 0;left: 0;right: 0;}
+  &--absolute.w-toolbar--vertical, &--fixed.w-toolbar--vertical {top: 0;bottom: 0;}
+  &--absolute.w-toolbar--left, &--fixed.w-toolbar--left {left: 0;right: auto;}
+  &--absolute.w-toolbar--right, &--fixed.w-toolbar--right {left: auto;right: 0;}
   &--absolute {position: absolute;}
   &--fixed {position: fixed;}
+
+  // Horizontal.
   &--top {border-bottom: $border;}
   &--bottom {
     bottom: 0;
     top: auto;
     border-top: $border;
   }
-  &--no-border, &--shadow {
-    border-top-width: 0;
-    border-bottom-width: 0;
+
+  // Vertical.
+  &--vertical {
+    padding: (2 * $base-increment);
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  &--left {border-right: $border;}
+  &--right {
+    right: 0;
+    left: auto;
+    border-left: $border;
   }
+
+  &--no-border, &--shadow {border-width: 0;}
   &--shadow {box-shadow: $box-shadow;}
 
   .w-app > & {z-index: 200;}
@@ -81,5 +113,13 @@ export default {
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }
+  .w-card__content &--left {
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  .w-card__content &--right {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
 }
 </style>

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

@@ -2,7 +2,12 @@
 .w-tooltip-wrap
   slot(name="activator" :on="activatorEventHandlers")
   transition(:name="transitionName" appear)
-    .w-tooltip(v-if="detachableVisible" ref="detachable" :class="classes" :style="styles")
+    .w-tooltip(
+      v-if="detachableVisible"
+      ref="detachable"
+      :key="_uid"
+      :class="classes"
+      :style="styles")
       slot
 </template>