feat(dialog): add accent and accept-disabled property

components/dialog/README.md

@@ -1,44 +1,49 @@
-## Usage
-
-```html
-<mdc-dialog ref="dialog" title="Title" accept="Accept" cancel="Decline"
-  @accept="onAccept" @cancel="onDecline">
-  {{ dialogText }}  
-</mdc-dialog>
-```
-
-```javascript
-var vm = new Vue({
-  data: {
-    dialogText: 'Lorem ipsum dolor sit amet, ...',
-  },
-  methods: {
-    showDialog () {
-      this.$refs.dialog.show()
-    },
-    onAccept () {
-      console.log('accepted')
-    },
-    onDecline () {
-      console.log('declined')
-    },
-  }
-})
-```
-
-### props
-
-| props | Type | Default | Description |
-|-------|------|---------|-------------|
-|`title`|String| required | the dialog title |
-|`accept`|String|`'Ok'`| the dialog accept button text   |
-|`cancel`| String| `'cancel'`| the dialog cancel button text  |
-|`scrollable`| String|| whether the dialog is scrollable |
-|`@accept`| String|| emitted when dialog is accepted   |
-|`@cancel`| String|| emitted when dialog is cancelled   |
-|`dark`| boolean| | set the dark theme |
-
-
-### Reference
-- <https://material.io/components/web/catalog/dialogs>
-
+## Usage
+
+```html
+<mdc-dialog ref="dialog"
+  title="Title" accept="Accept" cancel="Decline"
+  @accept="onAccept" @cancel="onDecline"
+>{{ dialogText }}</mdc-dialog>
+```
+
+```javascript
+var vm = new Vue({
+  data: {
+    dialogText: 'Lorem ipsum dolor sit amet, ...',
+  },
+  methods: {
+    showDialog () {
+      this.$refs.dialog.show()
+    },
+    onAccept () {
+      console.log('accepted')
+    },
+    onDecline () {
+      console.log('declined')
+    },
+  }
+})
+```
+
+### props
+
+| props | Type | Default | Description |
+|-------|------|---------|-------------|
+|`title`|String| required | the dialog title |
+|`accept`|String|`'Ok'`| the dialog accept button text   |
+|`accept-disabled`|String|`'Ok'`| the dialog accept button text   |
+|`cancel`| String| `'cancel'`| the dialog cancel button text  |
+|`scrollable`| Boolean| false | whether the dialog is scrollable |
+|`accent`| Boolean| false | set accented style to the footer buttons |
+
+### events
+
+| props   | args |  Description |
+|---------|------|--------------|
+|`@accept`| none | emitted when dialog is accepted   |
+|`@cancel`| none | emitted when dialog is cancelled  |
+
+### Reference
+
+<https://material.io/components/web/catalog/dialogs>

components/dialog/mdc-dialog.vue

@@ -16,13 +16,14 @@
       </section>
       <footer class="mdc-dialog__footer">
         <mdcButton ref="cancel" v-if="cancel"
-          class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel">
-          {{ cancel }}
-        </mdcButton>
+          class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel"
+          :class="{'mdc-dialog__action':accent}"
+          >{{ cancel }}</mdcButton>
         <mdcButton  ref="accept"
-        class="mdc-dialog__footer__button mdc-dialog__footer__button--accept">
-          {{ accept }}
-        </mdcButton>
+          class="mdc-dialog__footer__button mdc-dialog__footer__button--accept"
+          :class="{'mdc-dialog__action':accent}"
+          :disabled="acceptDisabled"
+        >{{ accept }}</mdcButton>
       </footer>
     </div>
     <div class="mdc-dialog__backdrop"></div>
@@ -37,11 +38,12 @@ import {mdcButton} from '../button'
 export default {
   name: 'mdc-dialog',
   props: {
-    'title': { type: String, required: true },
-    'accept': { type: String, default: 'Ok' },
-    'cancel': { type: String, default: 'Cancel' },
-    'scrollable': Boolean,
-    'dark': Boolean
+    title: { type: String, required: true },
+    accept: { type: String, default: 'Ok' },
+    acceptDisabled: Boolean,
+    cancel: { type: String, default: 'Cancel' },
+    accent: Boolean,
+    scrollable: Boolean
   },
   components: {
     mdcButton : mdcButton