feat: QBtn justify (and alert actions justify start) (quasarframework#1395)

* feat: QBtn justify (and alert actions justify start)

* Extract inner classes to mixin computed property

Author: pdanpdan

dev/components/components/alert.vue

@@ -54,7 +54,7 @@
     <q-alert
       icon="map"
       color="primary"
-      :actions="[ { label: 'Reply', icon: 'map', handler: () => {} }, { label: 'Reply', icon: 'map', handler: () => {} }, { label: 'Dismiss', handler: () => {} } ]"
+      :actions="[ { label: 'Reply', icon: 'map', handler: () => {} }, { label: 'Reply long', icon: 'map', handler: () => {} }, { label: 'Dismiss', handler: () => {} } ]"
     >Learn how you can get there</q-alert>
     <br>
     <q-alert

dev/components/components/button.vue

@@ -271,11 +271,12 @@
 
       <p class="caption">Full Width Buttons</p>
       <div class="group">
-        <q-btn color="primary" class="full-width">Full-width Full-width Full-width Full-width Full-width Full-width Full-width Full-width Full-width</q-btn>
-        <q-btn color="secondary" class="full-width">Full-width</q-btn>
-        <q-btn color="primary" icon="alarm" class="full-width">Full-width</q-btn>
-        <q-btn color="secondary" icon-right="alarm" class="full-width">Full-width</q-btn>
-        <q-btn color="secondary" icon="lock" icon-right="alarm" class="full-width">Full-width</q-btn>
+        <q-btn color="primary" class="full-width" label="Full-width Full-width Full-width Full-width Full-width Full-width Full-width Full-width Full-width" />
+        <q-btn color="secondary" class="full-width" label="Full-width" justify="start" />
+        <q-btn color="primary" icon="alarm" class="full-width" label="Full-width" justify="end" />
+        <q-btn color="secondary" icon-right="alarm" class="full-width" label="Full-width" justify="center" />
+        <q-btn color="secondary" icon="lock" icon-right="alarm" class="full-width" label="Full-width" justify="between" />
+        <q-btn color="secondary" icon="lock" icon-right="alarm" class="full-width" label="Full-width" justify="around" />
       </div>
 
       <p class="caption">Multiline Buttons</p>
@@ -304,9 +305,9 @@
         <q-btn color="primary" icon-right="alarm" size="sm" class="full-width">Small Full-width<br/>Multiline<br/>Button</q-btn>
         <q-btn color="primary" icon-right="alarm" class="full-width">Normal Full-width<br/>Multiline<br/>Button</q-btn>
         <q-btn color="primary" icon-right="alarm" size="lg" class="full-width">Big Full-width<br/>Multiline<br/>Button</q-btn>
-        <q-btn color="primary" icon="lock" icon-right="alarm" size="sm" class="full-width">Small Full-width<br/>Multiline<br/>Button</q-btn>
-        <q-btn color="primary" icon="lock" icon-right="alarm" class="full-width">Normal Full-width<br/>Multiline<br/>Button</q-btn>
-        <q-btn color="primary" icon="lock" icon-right="alarm" size="lg" class="full-width">Big Full-width<br/>Multiline<br/>Button</q-btn>
+        <q-btn color="primary" icon="lock" icon-right="alarm" justify="between" size="sm" class="full-width">Small Full-width<br/>Multiline<br/>Button</q-btn>
+        <q-btn color="primary" icon="lock" icon-right="alarm" justify="between" class="full-width">Normal Full-width<br/>Multiline<br/>Button</q-btn>
+        <q-btn color="primary" icon="lock" icon-right="alarm" justify="between" size="lg" class="full-width">Big Full-width<br/>Multiline<br/>Button</q-btn>
       </div>
 
       <p class="caption">Wrap test</p>

src/components/alert/QAlert.js

@@ -69,10 +69,12 @@ export default {
           this.actions.map(action =>
             h('div', [
               h(QBtn, {
+                staticClass: 'full-width',
                 props: {
                   flat: true,
                   dense: true,
                   icon: action.icon,
+                  justify: 'start',
                   label: action.closeBtn === true
                     ? (typeof action.label === 'string' ? action.label : this.$q.i18n.label.close)
                     : action.label

src/components/btn/QBtn.js

@@ -130,11 +130,8 @@ export default {
         : null,
 
       h('div', {
-        staticClass: 'q-btn-inner row col flex-center',
-        'class': {
-          'no-wrap': this.noWrap,
-          'text-no-wrap': this.noWrap
-        }
+        staticClass: 'q-btn-inner row col items-center',
+        'class': this.innerClasses
       },
       this.loading
         ? [ this.$slots.loading || h(QSpinner) ]

src/components/btn/QBtnToggle.js

@@ -56,11 +56,8 @@ export default {
       h('div', { staticClass: 'q-focus-helper' }),
 
       h('div', {
-        staticClass: 'q-btn-inner row col flex-center',
-        'class': {
-          'no-wrap': this.noWrap,
-          'text-no-wrap': this.noWrap
-        }
+        staticClass: 'q-btn-inner row col items-center',
+        'class': this.innerClasses
       }, [
         this.icon
           ? h('q-icon', {

src/components/btn/btn-mixin.js

@@ -31,7 +31,12 @@ export default {
     textColor: String,
     glossy: Boolean,
     dense: Boolean,
-    noRipple: Boolean
+    noRipple: Boolean,
+    justify: {
+      type: String,
+      default: 'center',
+      validator: v => ['start', 'end', 'center', 'between', 'around'].includes(v)
+    }
   },
   computed: {
     style () {
@@ -104,6 +109,13 @@ export default {
       })
 
       return cls
+    },
+    innerClasses () {
+      const classes = [`justify-${this.justify}`]
+      if (this.noWrap) {
+        classes.push('no-wrap', 'text-no-wrap')
+      }
+      return classes
     }
   },
   methods: {