wave-ui 1.43.0 → 1.44.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.43.0",
+  "version": "1.44.2",
   "description": "An emerging UI framework for Vue.js & Vue 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-app.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-app(:class="{ 'theme--dark': dark, 'd-block': block }")
+.w-app(:class="classes")
   slot
   notification-manager
 </template>
@@ -16,7 +16,17 @@ export default {
   name: 'w-app',
   props: {
     dark: { type: Boolean },
-    block: { type: Boolean }
+    block: { type: Boolean },
+    row: { type: Boolean },
+    alignCenter: { type: Boolean },
+    alignEnd: { type: Boolean },
+    justifyCenter: { type: Boolean },
+    justifyEnd: { type: Boolean },
+    justifySpaceBetween: { type: Boolean },
+    justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
+    textCenter: { type: Boolean },
+    textRight: { type: Boolean }
   },
 
   components: { NotificationManager },
@@ -26,6 +36,25 @@ export default {
     notifManager: null
   }),
 
+  computed: {
+    classes () {
+      return {
+        'd-block': this.block,
+        'row': this.row,
+        'align-center': this.alignCenter,
+        'align-end': this.alignEnd,
+        'justify-center': this.justifyCenter,
+        'justify-end': this.justifyEnd,
+        'justify-space-between': this.justifySpaceBetween,
+        'justify-space-around': this.justifySpaceAround,
+        'justify-space-evenly': this.justifySpaceEvenly,
+        'text-center': this.textCenter,
+        'text-right': this.textRight,
+        'theme--dark': this.dark
+      }
+    }
+  },
+
   methods: {
     getBreakpoint () {
       const width = window.innerWidth
@@ -85,6 +114,17 @@ export default {
   flex-direction: column;
   min-height: 100vh;
 
+  &.row {flex-direction: row;}
   &.d-block {display: block;}
+  &.align-center {align-items: center;}
+  &.align-end {align-items: flex-end;}
+  &.justify-center {justify-content: center;}
+  &.justify-end {justify-content: flex-end;}
+  &.justify-space-between {justify-content: space-between;}
+  &.justify-space-around {justify-content: space-around;}
+  &.justify-space-evenly {justify-content: space-evenly;}
+  &.text-center {text-align: center;}
+  &.text-right {text-align: right;}
+
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template lang="pug">
 .w-confirm
-  w-menu(v-model="showPopup" v-bind="wMenuProps" :menu-class="menuClasses")
+  w-menu(v-model="showPopup" v-bind="wMenuProps")
     template(#activator="{ on }")
       w-button.w-confirm__button(v-on="on" v-bind="buttonProps")
         slot
@@ -8,9 +8,16 @@
       div
         slot(name="question") Are you sure?
       .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
-        w-button.mr2(v-if="!noCancel" :bg-color="cancelButton.bgColor || 'error'" v-bind="cancelButton" @click="onCancel")
+        w-button.mr2(
+          v-if="!noCancel"
+          v-bind="cancelButton"
+          :bg-color="(cancelButton || {}).bgColor || 'error'"
+          @click="onCancel")
           slot(name="cancel") Cancel
-        w-button(:bg-color="confirmButton.bgColor || 'success'" v-bind="confirmButton" @click="onConfirm")
+        w-button(
+          v-bind="confirmButton"
+          :bg-color="(confirmButton || {}).bgColor || 'success'"
+          @click="onConfirm")
           slot(name="confirm") Confirm
 </template>
 
@@ -22,20 +29,18 @@ export default {
     bgColor: { type: String },
     color: { type: String },
     icon: { type: String },
-    menu: { type: Boolean },
+    mainButton: { type: Object }, // Allow passing down an object of props to the w-button component.
 
     // Cancel & confirm buttons props.
-    cancelButtonColor: { type: String },
-    confirmButtonColor: { type: String },
     noCancel: { type: Boolean }, // Removes the cancel button.
     cancelButton: { type: [Boolean, Object] }, // Allow passing down an object of props to the w-button component.
-    confirmButton: { type: [Boolean, Object] }, // Allow passing down an object of props to the w-button component.
+    confirmButton: { type: Object }, // Allow passing down an object of props to the w-button component.
 
     // global menu props.
     inline: { type: Boolean }, // The layout inside the menu.
 
     // W-menu props.
-    menuProps: { type: Object }, // Allow passing down an object of props to the w-menu component.
+    menu: { type: Object }, // Allow passing down an object of props to the w-menu component.
     // All the menu props shorthands, as long as they don't conflict with the button props.
     noArrow: { type: Boolean }, // Adds a directional triangle to the edge of the menu, like a tooltip.
     top: { type: Boolean },
@@ -71,14 +76,15 @@ export default {
         alignRight: this.alignRight,
         persistent: this.persistent,
         transition: this.transition,
-        ...this.menuProps
+        ...this.menu
       }
     },
     buttonProps () {
       return {
         bgColor: this.bgColor,
         color: this.color,
-        icon: this.icon
+        icon: this.icon,
+        ...this.mainButton
       }
     }
   },

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

@@ -62,7 +62,7 @@ export default {
   z-index: 1000;
   pointer-events: none;
   width: 280px;
-  overflow: auto;
+  overflow-x: hidden;
 
   &--left {right: auto;left: 0;}