add support fot component's modal.attributes property

andrewvasilchuk · Nov 10, 2019 · 73bf020 · 73bf020
1 parent 8c5666b
commit 73bf020
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/demo/components/ExampleComponent.vue b/demo/components/ExampleComponent.vue
@@ -40,6 +40,9 @@ export default {
   modal: {
     classes: ['baz', 'poo', { javascript: true, jQuery: false }],
     label: 'Foo bar',
+    attributes: {
+      'data-test': 'foo'
+    }
   },
 }
 </script>

diff --git a/src/components/VueAccessibleModal.vue b/src/components/VueAccessibleModal.vue
@@ -37,6 +37,7 @@ export default {
       component: null,
       options: {},
       lastFocusedElement: null,
+      localAttributes: null,
     }
   },
   computed: {
@@ -59,8 +60,14 @@ export default {
       return arr
     },
     attributes() {
-      const { options } = this
-      if (options) return options.attributes
+      const { options, localAttributes } = this
+      if (options) {
+        if (localAttributes) {
+          return Object.assign({}, localAttributes, options.attributes)
+        }
+
+        return options.attributes
+      }
       return {}
     },
     props() {
@@ -157,6 +164,14 @@ export default {
       if (focusableElements.length) {
         focusableElements[0].focus()
       }
+
+      const { modal } = this.$refs.component.$options
+
+      if (modal) {
+        if (modal.attributes) {
+          this.localAttributes = modal.attributes
+        }
+      }
     },
   },
 }