fix(mdc-select): Add menu prop

stasson · Mar 20, 2018 · c2daafc · c2daafc
1 parent 2d61239
commit c2daafc
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 53 deletions.
diff --git a/components/select/mdc-option.vue b/components/select/mdc-option.vue
@@ -5,34 +5,39 @@
 </template>
 
 <script>
-import MDCNativeOption from './mdc-native-option.vue'
-import MDCMenuOption from './mdc-menu-option.vue'
-import MDCMultiOption from './mdc-multi-option.vue'
+import MDCNativeOption from './mdc-native-option.vue';
+import MDCMenuOption from './mdc-menu-option.vue';
+import MDCMultiOption from './mdc-multi-option.vue';
 
 export default {
   name: 'mdc-option',
   props: {
     value: String,
-    disabled: Boolean
+    disabled: Boolean,
   },
   inject: ['mdcSelect'],
   components: {
     'mdc-native-option': MDCNativeOption,
     'mdc-multi-option': MDCMultiOption,
-    'mdc-menu-option': MDCMenuOption
+    'mdc-menu-option': MDCMenuOption,
   },
   computed: {
-    isNative () {
-      return this.mdcSelect.isNative
+    isNative() {
+      return this.mdcSelect.isNative;
     },
-    multiple () {
-      return this.mdcSelect.multiple
+    multiple() {
+      return this.mdcSelect.multiple;
     },
-    type () {
-      return this.multiple ? 'mdc-multi-option'
-        : this.isNative ? 'mdc-native-option'
-          : 'mdc-menu-option'
-    }
-  }
-}
+    menu() {
+      return this.mdcSelect.menu;
+    },
+    type() {
+      return this.multiple
+        ? 'mdc-multi-option'
+        : this.menu
+          ? 'mdc-menu-option'
+          : this.isNative ? 'mdc-native-option' : 'mdc-menu-option';
+    },
+  },
+};
 </script>
diff --git a/components/select/mdc-select.vue b/components/select/mdc-select.vue
@@ -9,69 +9,75 @@
 </template>
 
 <script>
-import MDCNativeSelect from './mdc-native-select.vue'
-import MDCMenuSelect from './mdc-menu-select.vue'
-import MDCMultiSelect from './mdc-multi-select.vue'
-import { DispatchFocusMixin } from '../base'
- 
+import MDCNativeSelect from './mdc-native-select.vue';
+import MDCMenuSelect from './mdc-menu-select.vue';
+import MDCMultiSelect from './mdc-multi-select.vue';
+import { DispatchFocusMixin } from '../base';
+
 const media = new class {
-  get mobile () {
-    return this._mobile || (this._mobile =
-      window.matchMedia('(max-width: 600px) and (pointer: coarse)'))
+  get mobile() {
+    return (
+      this._mobile ||
+      (this._mobile = window.matchMedia(
+        '(max-width: 600px) and (pointer: coarse)',
+      ))
+    );
   }
-}()
+}();
 
 export default {
   name: 'mdc-select',
   mixins: [DispatchFocusMixin],
   model: {
     prop: 'value',
-    event: 'change'
+    event: 'change',
   },
   props: {
     multiple: Boolean,
     value: [String, Array],
     label: String,
-    native: Boolean
+    native: Boolean,
+    menu: Boolean,
   },
-  provide () {
-    return {mdcSelect: this}
+  provide() {
+    return { mdcSelect: this };
   },
   components: {
     'mdc-native-select': MDCNativeSelect,
     'mdc-menu-select': MDCMenuSelect,
-    'mdc-multi-select': MDCMultiSelect
+    'mdc-multi-select': MDCMultiSelect,
   },
-  data () {
+  data() {
     return {
-      mobile: (window) ? media.mobile.matches : true
-    }
+      mobile: window ? media.mobile.matches : true,
+    };
   },
   computed: {
-    type () {
-      return this.multiple ? 'mdc-multi-select'
-        : this.menu ? 'mdc-menu-select'
-        : this.isNative ? 'mdc-native-select'
-          : 'mdc-menu-select'
+    type() {
+      return this.multiple
+        ? 'mdc-multi-select'
+        : this.menu
+          ? 'mdc-menu-select'
+          : this.isNative ? 'mdc-native-select' : 'mdc-menu-select';
+    },
+    isNative() {
+      return this.native || this.multiple || this.mobile;
     },
-    isNative () {
-      return this.native || this.multiple || this.mobile
-    }
   },
   methods: {
-    onChange (value) {
-      this.$emit('change', value)
+    onChange(value) {
+      this.$emit('change', value);
+    },
+    refreshMedia() {
+      this.mobile = media.mobile.matches;
     },
-    refreshMedia () {
-      this.mobile = media.mobile.matches
-    }
   },
-  beforeMount () {
-    media.mobile.addListener(this.refreshMedia)
-    this.refreshMedia()
+  beforeMount() {
+    media.mobile.addListener(this.refreshMedia);
+    this.refreshMedia();
   },
-  beforeDestroy () {
-    media.mobile.removeListener(this.refreshMedia)
-  }
-}
+  beforeDestroy() {
+    media.mobile.removeListener(this.refreshMedia);
+  },
+};
 </script>