feat: update dialog (#361)

fixes #360

components/dialog/Dialog.vue

@@ -1,30 +1,33 @@
 <template>
   <div
-    aria-describedby="my-dialog-content"
-    aria-labelledby="my-dialog-title"
+    :aria-describedby="ariaDescribedby"
+    :aria-labelledby="ariaLabelledby"
     aria-modal="true"
     class="mdc-dialog"
+    :class="classes"
     role="alertdialog"
+    @MDCDialog:opening="onOpening"
+    @MDCDialog:opened="onOpened"
+    @MDCDialog:closing="onClosing"
     @MDCDialog:closed="onClosed"
   >
     <div class="mdc-dialog__container">
       <div class="mdc-dialog__surface">
         <h2
           v-if="$slots['header']"
-          id="my-dialog-title"
+          :id="ariaLabelledby"
           class="mdc-dialog__title"
         >
-          <!-- -->
-          <slot name="header" /><!-- -->
+          <slot name="header" />
         </h2>
         <div
           v-if="$slots['body']"
-          id="my-dialog-content"
-          :class="bodyClasses"
+          :id="ariaDescribedby"
           class="mdc-dialog__content"
         >
           <slot name="body" />
         </div>
+        <slot />
         <footer
           v-if="$slots['acceptButton'] || $slots['cancelButton'] || $slots['dialogButton']"
           class="mdc-dialog__actions"
@@ -62,6 +65,22 @@ export default {
     stacked: {
       type: Boolean,
       default: true
+    },
+    escapeKeyAction: {
+      type: String,
+      default: 'close'
+    },
+    scrimClickAction: {
+      type: String,
+      default: 'close'
+    },
+    ariaDescribedby: {
+      type: String,
+      default: 'my-dialog-content'
+    },
+    ariaLabelledby: {
+      type: String,
+      default: 'my-dialog-title'
     }
   },
   data () {
@@ -71,9 +90,9 @@ export default {
     }
   },
   computed: {
-    bodyClasses () {
+    classes () {
       return {
-        'mdc-dialog__body--scrollable': this.scrollable
+        'mdc-dialog--scrollable': this.scrollable
       }
     },
     model: {
@@ -90,11 +109,22 @@ export default {
       if (this.open) this.mdcDialog.open()
     },
     stacked () {
-      if (!this.stacked) this.mdcDialog.autoStackButtons = false
+      this.mdcDialog.autoStackButtons = this.stacked
+    },
+    escapeKeyAction () {
+      this.mdcDialog.escapeKeyAction = this.escapeKeyAction
+    },
+    scrimClickAction () {
+      this.mdcDialog.scrimClickAction = this.scrimClickAction
     }
+
   },
   mounted () {
     this.mdcDialog = MDCDialog.attachTo(this.$el)
+    this.mdcDialog.autoStackButtons = this.stacked
+    this.mdcDialog.escapeKeyAction = this.escapeKeyAction
+    this.mdcDialog.scrimClickAction = this.scrimClickAction
+
     this.slotObserver = new MutationObserver(() => this.updateSlots())
     this.slotObserver.observe(this.$el, {
       childList: true,
@@ -107,6 +137,17 @@ export default {
     this.mdcDialog.destroy()
   },
   methods: {
+    onOpening () {
+      this.$emit('opening')
+    },
+    onOpened () {
+      this.$emit('opened')
+      this.$el.setAttribute('aria-hidden', 'true')
+    },
+    onClosing (event) {
+      this.$emit('closing', event.detail)
+      this.$el.removeAttribute('aria-hidden')
+    },
     onClosed (event) {
       this.model = false
       this.$emit('closed', event.detail)

components/dialog/README.md

@@ -45,20 +45,28 @@ methods: {
 | scrollable | Boolean | false | scrollable body |
 | open | Boolean | false | dialog starts in open state |
 | stacked | Boolean | true | whether the buttons are stacked vertically automatically |
+| escapeKeyAction | String | 'close' | Sets the action reflected when the Escape key is pressed. Setting to '' disables closing the dialog via Escape key. |
+| scrimClickAction | String | 'close' | Sets the action reflected when the scrim is clicked. Setting to '' disables closing the dialog via scrim click. |
+| ariaDescribedby | String | 'my-dialog-content' | `aria-describedby` of the dialog element and the `id` of the content element |
+| ariaLabelledby | String | 'my-dialog-title' | `aria-labelledby` of the dialog element and the `id` of the title element |
 
 ### Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
+| opening | {} | emitted when dialog is opening |
+| opened | {} | emitted when dialog is opened |
+| closing | { action: value } | emitted when dialog is closing |
 | closed | { action: value } | emitted when dialog is closed |
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
+| default | body of dialog without wrapping `mdc-dialog__content` class, not recommended to use |
 | header | header of dialog |
 | body | body of dialog |
-| acceptButton | accept button |
+| acceptButton | accept button and the default button |
 | cancelButton | cancel button |
 | dialogButton | additional button(s) |
 

components/dialog/__test__/Dialog.spec.js

@@ -0,0 +1,44 @@
+import 'mutationobserver-shim'
+import { mount } from '@vue/test-utils'
+import Dialog from '../Dialog.vue'
+
+describe('Dialog', () => {
+  it('should mount', () => {
+    const wrapper = mount(Dialog)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper.vm.$data.mdcDialog).toBeDefined()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(Dialog)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-dialog')
+  })
+
+  it('should render as scrollable', () => {
+    const wrapper = mount(Dialog, {
+      propsData: {
+        scrollable: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-dialog--scrollable')
+  })
+
+  it('should render and emit', () => {
+    const wrapper = mount(Dialog)
+
+    wrapper.setProps({ open: true })
+
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['opening'])
+    expect(wrapper.vm.$data.mdcDialog.isOpen).toBe(true)
+    expect(wrapper.isVisible()).toBe(true)
+
+    wrapper.find('.mdc-dialog__scrim').trigger('click')
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['opening', 'closing'])
+    expect(wrapper.emitted().closing[0]).toEqual([{ action: 'close' }])
+    expect(wrapper.vm.$data.mdcDialog.isOpen).toBe(false)
+  })
+})

components/dialog/__test__/__snapshots__/Dialog.spec.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog should render and emit 1`] = `
+<div aria-describedby="my-dialog-content" aria-labelledby="my-dialog-title" aria-modal="true" role="alertdialog" class="mdc-dialog mdc-dialog--opening">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface">
+      <!---->
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</div>
+`;
+
+exports[`Dialog should render and emit 2`] = `
+<div aria-describedby="my-dialog-content" aria-labelledby="my-dialog-title" aria-modal="true" role="alertdialog" class="mdc-dialog mdc-dialog--opening mdc-dialog--closing">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface">
+      <!---->
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</div>
+`;
+
+exports[`Dialog should render as scrollable 1`] = `
+<div aria-describedby="my-dialog-content" aria-labelledby="my-dialog-title" aria-modal="true" role="alertdialog" class="mdc-dialog mdc-dialog--scrollable">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface">
+      <!---->
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</div>
+`;
+
+exports[`Dialog should render with no prop 1`] = `
+<div aria-describedby="my-dialog-content" aria-labelledby="my-dialog-title" aria-modal="true" role="alertdialog" class="mdc-dialog">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface">
+      <!---->
+      <!---->
+      <!---->
+    </div>
+  </div>
+  <div class="mdc-dialog__scrim"></div>
+</div>
+`;