Add editable prop for Select Field.

examples/form/mapping.vue

@@ -53,12 +53,23 @@
     remoteMapping: {
       label: 'Remote Mapping',
       default: 2,
-      mapping: function() {
+      mapping: function(model, searchText) {
         return new Promise(function(resolve) {
           var xhr = new XMLHttpRequest();
           xhr.open('GET', '/examples/json/mapping.json', true);
           xhr.onload = function(response) {
-            resolve(JSON.parse(response.target.responseText));
+            const result = JSON.parse(response.target.responseText);
+
+            if (searchText) {
+              for (var prop in result) {
+                result[prop + searchText] = result[prop];
+                delete result[prop];
+              }
+
+              console.log('result:', result);
+            }
+
+            resolve(result);
           };
           xhr.send();
         });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-desktop",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "A UI library for building admin panel website.",
   "main": "lib/index.js",
   "scripts": {

src/form/fields/field-common.js

@@ -50,6 +50,28 @@ export default {
   },
 
   methods: {
+    fetchMapping(...args) {
+      var schema = this.fieldSchema;
+      var emptyRecord = this.emptyRecord;
+      if (schema) {
+        var result = schema.getPropertyMapping(this.property, this.model, ...args);
+        if (result.then) {
+          result.then((value) => {
+            this.selectValue = null;
+            this.mapping = value;
+            if (emptyRecord) {
+              this.mapping[''] = null;
+            }
+          });
+        } else {
+          this.mapping = result;
+          if (emptyRecord) {
+            this.mapping[''] = null;
+          }
+        }
+      }
+    },
+
     validate() {
       var model = this.model;
       var schema = this.fieldSchema;
@@ -210,27 +232,8 @@ export default {
     }
 
     if (this.parentProperty) {
-      var select = this;
       this.$watch('model.' + this.parentProperty, () => {
-        var schema = select.fieldSchema;
-        var emptyRecord = this.emptyRecord;
-        if (schema) {
-          var result = schema.getPropertyMapping(select.property, select.model);
-          if (result.then) {
-            result.then(function(value) {
-              select.selectValue = null;
-              select.mapping = value;
-              if (emptyRecord) {
-                select.mapping[''] = null;
-              }
-            });
-          } else {
-            select.mapping = result;
-            if (emptyRecord) {
-              select.mapping[''] = null;
-            }
-          }
-        }
+        this.fetchMapping();
       });
     }
   }

src/form/fields/select.vue

@@ -3,13 +3,13 @@
     <label :style="{ width: labelWidth != null ? labelWidth + 'px' : '' }" v-show="!hideLabel">{{ labelText }}</label>
     <div class="d-field-content" :style="{ marginLeft: labelWidth != null ? labelWidth + 'px' : '' }">
       <div @click="toggleSelect($event)" class="d-selectfield-box" :class="{ active: selectVisible }" :style="{ width: realEditorWidth ? realEditorWidth : '' }">
-        <span class="d-selectfield-box-text">{{ textValue }}</span><span class="d-selectfield-trigger d-icon d-icon-arrow-down"></span>
+        <input class="d-selectfield-box-text" @keydown="handleKeydown" @input="handleInput" v-model="searchText" /><span class="d-selectfield-trigger d-icon d-icon-arrow-down"></span>
         <d-select v-ref:select v-if="selectActive" v-show="selectVisible" :multi-select="multiSelect" :value.sync="selectValue" @select="selectVisible = false" @selection-change="handleSelectionChange" @click="$event.stopPropagation()">
-          <d-option v-for="(key, val) in mapping" :value="val" :show-checkbox="multiSelect">{{key}}</d-option>
+          <d-option v-for="(key, val) in mapping" :value="val" :show-checkbox="multiSelect">{{ key }}</d-option>
         </d-select>
       </div>
       <div class="d-field-hint" v-if="!hideHint">
-        <i class='d-icon' :class="{ 'd-icon-error': hintType === 'error', 'd-icon-warning': hintType === 'warning' }"></i>{{ hintMessage || '' }}
+        <i class='d-icon' :class="{ 'd-icon-error': hintType === 'error', 'd-icon-warning': hintType === 'warning' }"></i>{{hintMessage || '' }}
       </div>
     </div>
   </div>
@@ -58,9 +58,13 @@
   }
 
   .d-selectfield-box-text {
-    overflow: hidden;
-    height: 26px;
     display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    line-height: 24px;
+    vertical-align: top;
+    border: none;
+    outline: none;
   }
 </style>
 
@@ -69,6 +73,8 @@
   import { default as common } from './field-common';
   import { default as Dropdown } from '../../service/dropdown';
 
+  const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40];
+
   export default {
     props: merge({
       multiSelect: {
@@ -79,22 +85,28 @@
       emptyRecord: {
         type: Boolean,
         default: false
+      },
+
+      editable: {
+        type: Boolean,
+        default: false
       }
     }, common.props),
 
     data() {
       return {
+        searchModel: '',
         selectActive: false,
         selectVisible: false
       };
     },
 
     computed: merge({
       textValue() {
-        var mapping = this.mapping;
-        var selectValue = this.selectValue;
+        const mapping = this.mapping;
+        const selectValue = this.selectValue;
 
-        var reversedMap = {};
+        const reversedMap = {};
 
         for (var label in mapping) {
           if (mapping.hasOwnProperty(label)) {
@@ -113,6 +125,19 @@
           return reversedMap[selectValue];
         }
       },
+
+      searchText: {
+        get() {
+          if (!this.selectVisible) {
+            return this.textValue;
+          }
+          return this.searchModel;
+        },
+        set(newValue) {
+          this.searchModel = newValue;
+        }
+      },
+
       selectValue: {
         get() {
           if (this.model && this.property) {
@@ -155,6 +180,21 @@
         this.selectVisible = false;
       },
 
+      handleKeydown(event) {
+        var keyCode = event.keyCode;
+        if (!this.editable && FUNCTION_KEYS.indexOf(keyCode) === -1) {
+          event.preventDefault();
+        }
+
+        if (keyCode === 27) {
+          this.selectVisible = false;
+        }
+      },
+
+      handleInput() {
+        this.fetchMapping(this.searchModel);
+      },
+
       handleSelectionChange() {
         const children = this.$refs.select.$children;
         const value = [];

src/schema/index.js

@@ -223,7 +223,7 @@ class Schema {
     return (this.props[property] || {}).label || '';
   }
 
-  getPropertyMapping(property, object) {
+  getPropertyMapping(property, object, ...args) {
     const descriptor = this.props[property] || {};
     const mapping = descriptor.mapping;
     let result = mapping;
@@ -236,7 +236,7 @@ class Schema {
         result[config.name || config.label] = config.value;
       }
     } else if (typeof mapping === 'function') {
-      result = mapping(object);
+      result = mapping(object, ...args);
     }
 
     return result;