Added size prop to modal

simplystack · Apr 2, 2019 · 9e35fea · 9e35fea
1 parent fc52a12
commit 9e35fea
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/components/Modal/main.vue b/src/components/Modal/main.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="modal" @after-enter="onEnter" @after-leave="onLeave">
-    <div class="modal modal__mask" v-show="open" :role="role">
+    <div class="modal modal__mask" v-show="open" :role="role" :class="classes">
       <div ref="backdrop" class="modal__wrapper" @click="dismissOnBackdrop && close($event)">
         <div
           ref="container"
@@ -59,6 +59,13 @@ export default {
       type: String,
       default: 'Modal title',
     },
+    size: {
+      type: String,
+      default: '2',
+      validator(size) {
+        return ['1', '2', '3'].indexOf(size) > -1;
+      },
+    },
     dismissible: {
       type: Boolean,
       default: true,
@@ -78,6 +85,11 @@ export default {
     dismissOnEsc() {
       return this.dismissOn.indexOf('esc') > -1;
     },
+    classes() {
+      return [
+        `modal--size-${this.size}`,
+      ];
+    },
   },
   methods: {
     close(e) {