feat(ons-select): Wrapper for Vue2 binding.

OnsenUI · Feb 1, 2017 · 3421cda · 3421cda
1 parent 67b71c7
commit 3421cda
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 9 deletions.
diff --git a/bindings/vue/examples/components/Forms.vue b/bindings/vue/examples/components/Forms.vue
@@ -48,6 +48,22 @@
         </div>
       </ons-list-item>
 
+      <ons-list-header>
+        Select box - <button @click="modify('select')">Modify JS</button>
+      </ons-list-header>
+      <ons-list-item>
+        <v-ons-select id="choose-sel" v-ons-model="selectedModifier" @change="editSelects(rowId, $event)">
+          <option v-for="modifier in modifiers" v-bind:value="modifier.value">
+            {{ modifier.text }}
+          </option>
+        </v-ons-select>
+      </ons-list-item>
+      <ons-list-item>
+        <div class="center">
+          Modifier {{ selectedModifier }} looks great!
+        </div>
+      </ons-list-item>
+
       <ons-list-header>
         Radio buttons - <button @click="modify('radio')">Modify JS</button>
       </ons-list-header>
@@ -121,6 +137,12 @@
     data() {
       return {
         name: 'Andreas',
+        modifiers: [
+          { text: 'Basic', value: 'basic' },
+          { text: 'Material', value: 'material' },
+          { text: 'Underbar', value: 'underbar' }
+        ],
+        selectedModifier: 'material',
         switchOn: true,
         vegetables: ['Tomato', 'Cabbage', 'Cucumber'],
         selectedVegetable: 'Cabbage',
@@ -149,6 +171,14 @@
             this.volume = (this.volume + 20) % 100;
             break;
         }
+      },
+
+      editSelects: function(rowId, event) {
+        console.log('editSelects', event);
+        document.getElementById('choose-sel').removeAttribute('modifier');
+        if (event.target.value == 'material' || event.target.value == 'underbar') {
+          document.getElementById('choose-sel').setAttribute('modifier', event.target.value);
+        }
       }
     }
 	};

diff --git a/bindings/vue/src/components/index.js b/bindings/vue/src/components/index.js
@@ -20,6 +20,7 @@ export const VOnsIcon = extend('icon');
 export const VOnsSwitch = extend('switch');
 export const VOnsInput = extend('input');
 export const VOnsRange = extend('range');
+export const VOnsSelect = extend('select');
 export const VOnsBottomToolbar = extend('bottom-toolbar');
 export const VOnsSpeedDialItem = extend('speed-dial-item');
 export const VOnsList = extend('list');

diff --git a/bindings/vue/src/directives/VOnsModel.js b/bindings/vue/src/directives/VOnsModel.js
@@ -39,6 +39,11 @@ export default {
     const tag = el.tagName.toLowerCase();
 
     switch (tag) {
+      case 'ons-select':
+        el.querySelector('option[value=' + binding.value + ']').setAttribute('selected', 'selected');
+        _bindSimpleInputOn('change', modelKey, vnode, 'value');
+        break;
+
       case 'ons-switch':
         el.checked = binding.value;
         _bindSimpleInputOn('change', modelKey, vnode, 'checked');
@@ -77,6 +82,10 @@ export default {
     const tag = el.tagName.toLowerCase();
 
     switch (tag) {
+      case 'ons-select':
+        el.querySelectorAll('option').forEach(function (option) { option.value == binding.value ? option.setAttribute('selected', 'selected') : option.removeAttribute('selected') });
+        break;
+
       case 'ons-switch':
         el.checked = binding.value;
         break;

diff --git a/core/src/elements/ons-fab.js b/core/src/elements/ons-fab.js
@@ -74,10 +74,8 @@ export default class FabElement extends BaseElement {
   init() {
     // The following statements can be executed before contentReady
     // since these do not access the children
-    {
-      this.show();
-      this.classList.add(defaultClassName);
-    }
+    this.show();
+    this.classList.add(defaultClassName);
 
     contentReady(this, () => {
       this._compile();

diff --git a/core/src/elements/ons-select.js b/core/src/elements/ons-select.js
@@ -157,6 +157,14 @@ export default class SelectElement extends BaseElement {
     }
   }
 
+  get _select() {
+    return this.querySelector('select');
+  }
+
+  static get events() {
+    return ['change'];
+  }
+
   _updateBoundAttributes() {
     INPUT_ATTRIBUTES.forEach((attr) => {
       if (this.hasAttribute(attr)) {
@@ -168,10 +176,6 @@ export default class SelectElement extends BaseElement {
     });
   }
 
-  get _select() {
-    return this.querySelector('select');
-  }
-
   /**
    * @property length
    * @description

diff --git a/css-components/components-src/stylus/components/select.styl b/css-components/components-src/stylus/components/select.styl
@@ -54,7 +54,6 @@ select-input()
   input()
   transparent()
   position relative
-  max-width 50%
   font-size var-select-input-font-size
   height var-select-input-height
   border-color var-select-input-border-color