v 1.1.6

README.md

@@ -154,7 +154,7 @@ text color of modal when mode is light
 #### `modalSize`
 size of modal dialog
 - type: `String`
-- value: `md` | `lg` | `xl` | `full-w` | `full-hw`
+- value: `md` | `lg` | `xl` | `full-w` | `full-hw` | `sidebar-l` | `sidebar-r`
 
 ## API
 
@@ -169,6 +169,10 @@ Feel free to open an issue or pull request. Open an issue if you want discussing
 
 ## Changelogs
 
+#### 1.1.6
+- Add more `modalSize` options -> [`sidebar-r`, `sidebar-l`]
+- Add little A11y
+
 #### 1.1.5
 - Add props `modalSize` with value [`md`, `lg`, `xl`, `full-w`, `full-hw`]
 - fix reponsiveness problems

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burhanahmeed/vue-modal-2",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": false,
   "author": "Burhanuddin Ahmed <[email protected]>",
   "license": "MIT",

src/App.vue

@@ -36,7 +36,7 @@
       }"
       :darkMode="false"
       @on-close="handleClose2"
-      modalSize="full-hw"
+      modalSize="sidebar-l"
     >
       <div>content</div>
     </modal-vue>

src/components/Container.vue

@@ -11,7 +11,11 @@
     aria-modal="true"
     :aria-labelledby="`dialog ${name}`"
   >
-    <div class="vm2_modal-dialog vm2_settings" :class="contentSize? contentSize: ''" role="document">
+    <div 
+      class="vm2_modal-dialog vm2_settings" 
+      :class="`${contentSize? contentSize: ''} ${visible? 'vm2_visible': ''}`" 
+      role="document"
+    >
       <div
         class="vm2_modal-content"
         :id="`vm2_box_${name}`"
@@ -159,6 +163,10 @@ export default {
           return 'vm2_fullWidth'
         } else if (this.modalSize === 'full-hw') {
           return 'vm2_full-hw'
+        } else if (this.modalSize == 'sidebar-r') {
+          return 'vm2_sidebar-r'
+        } else if (this.modalSize == 'sidebar-l') {
+          return 'vm2_sidebar-l'
         }
       }
       return null
@@ -244,22 +252,47 @@ export default {
 .vm2_body {
   overflow-y: auto;
 }
-.vm2_full-hw .vm2_modal-content {
+.vm2_full-hw .vm2_modal-content,
+.vm2_sidebar-r .vm2_modal-content,
+.vm2_sidebar-l .vm2_modal-content {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.vm2_full-hw .vm2_body {
+.vm2_full-hw .vm2_body,
+.vm2_sidebar-r .vm2_body,
+.vm2_sidebar-l .vm2_body {
   flex: 1 1 auto;
   position: relative;
 }
 .vm2_full-hw.vm2_modal-dialog {
   max-height: unset;
 }
-.vm2_full-hw.vm2_settings {
+.vm2_full-hw.vm2_settings,
+.vm2_sidebar-r.vm2_settings,
+.vm2_sidebar-l.vm2_settings {
   height: unset;
-  margin: 0.3rem;
+  margin: 0rem;
+}
+
+.vm2_sidebar-r.vm2_modal-dialog {
+  max-height: unset;
+  left: unset;
+  width: 100%;
+}
+.vm2_sidebar-l.vm2_modal-dialog {
+  max-height: unset;
+  right: unset;
+  width: 100%;
+}
+.vm2_sidebar-r.vm2_modal-dialog {
+  right: -10000px;
+  transition: right .7s ease;
 }
+.vm2_visible.vm2_sidebar-r.vm2_modal-dialog {
+  right: 0;
+}
+
 
 @media screen and (min-width: 370px) {
   .vm2_settings {

src/components/withHeader.vue

@@ -5,6 +5,7 @@
         <h4 style="margin: 5px 10px">{{ title }}</h4>
       </div>
       <button
+        tabindex="1"
         ref="closeButton"
         aria-label="Close" 
         role="button"