Close buefy#359 Add mobile-modal prop to dropdown

wanxe · Nov 12, 2017 · c2b6823 · c2b6823
1 parent f4768bd
commit c2b6823
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Vue 2.5+ is now the minimum required version
 * **Removed** prompt dialog ``inputPlaceholder``, ``inputName`` and ``inputMaxlength`` props
 * Add ``disabled`` prop to tabItem
+* #359 Add ``mobile-modal`` prop to dropdown to enable/disable modal on mobile
 
 ## 0.5.4
 

diff --git a/docs/pages/documentation/general/dropdown/api.js b/docs/pages/documentation/general/dropdown/api.js
@@ -36,6 +36,13 @@ export default [
                 type: 'Boolean',
                 values: '—',
                 default: '<code>false</code>'
+            },
+            {
+                name: '<code>mobile-modal</code>',
+                description: 'Dropdown content (items) are shown into a modal on mobile',
+                type: 'Boolean',
+                values: '—',
+                default: '<code>true</code>'
             }
         ],
         events: [

diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
@@ -4,8 +4,9 @@
             'is-disabled': disabled,
             'is-hoverable': hoverable,
             'is-inline': inline,
-            'is-active': isActive || inline
-        }]">
+            'is-active': isActive || inline,
+            'is-mobile-modal': isMobileModal
+        }]"> 
         <div v-if="!inline"
             role="button"
             ref="trigger"
@@ -15,7 +16,7 @@
         </div>
 
         <transition name="fade">
-            <div v-if="!inline"
+            <div v-if="isMobileModal"
                 v-show="isActive"
                 class="background">
             </div>
@@ -52,6 +53,10 @@
                         'is-bottom-left'
                     ].indexOf(value) > -1
                 }
+            },
+            mobileModal: {
+                type: Boolean,
+                default: true
             }
         },
         data() {
@@ -61,6 +66,11 @@
                 _isDropdown: true // Used internally by DropdownItem
             }
         },
+        computed: {
+            isMobileModal() {
+                return this.mobileModal && !this.inline && !this.hoverable
+            }
+        },
         watch: {
             /**
              * When v-model is changed set the new selected item.

diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss
@@ -67,7 +67,7 @@
         }
     }
     @include touch {
-        &:not(.is-hoverable):not(.is-inline) {
+        &.is-mobile-modal {
             .dropdown-menu {
                 position: fixed;
                 width: calc(100vw - 40px);