Add support for readonly and disabled; get rid of unwanted padding an…

…d margins.
roncemer · Feb 26, 2019 · a63df2f · a63df2f
1 parent 2481138
commit a63df2f
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -33,13 +33,18 @@
         <button type="button" class="btn btn-sm btn-primary" v-on:click="toggle_debug()">Toggle debug</button>
        </div>
 
+       <div class="btn-group" role="group">
+	    <button type="button" class="btn btn-sm" v-bind:class="readonly ? 'btn-success' : 'btn-danger'" v-on:click="readonly = !readonly">Readonly {{readonly ? 'on' : 'off'}}</button>
+	    <button type="button" class="btn btn-sm" v-bind:class="disabled ? 'btn-success' : 'btn-danger'" v-on:click="disabled = !disabled">Disabled {{disabled ? 'on' : 'off'}}</button>
+	   </div>
+
      </div>
     </div>
 
     <div class="form-group row">
      <label class="col-sm-2 col-form-label">State</label>
      <div class="col-sm-10">
-      <ajax-combobox v-model="state_id" v-bind:options="ajax_combobox_options"/>
+      <ajax-combobox v-model="state_id" v-bind:options="ajax_combobox_options" v-bind:readonly="readonly" v-bind:disabled="disabled"/>
      </div>
     </div>
 

diff --git a/demo/index.js b/demo/index.js
@@ -13,7 +13,9 @@
                 id_type:'number',
                 alt_id_type:'string',
                 placeholder_label:defaultPlaceholderLabel,
-            }
+            },
+			readonly:false,
+			disabled:false,
         },
 
         methods:{

diff --git a/dist/vue-bootstrap-ajax-combobox.js b/dist/vue-bootstrap-ajax-combobox.js
@@ -30,12 +30,12 @@ SOFTWARE.
 Vue.component(
     'ajax-combobox',
     {
-        props:['value', 'options'],
+        props:['value', 'options', 'readonly', 'disabled'],
 
         template:
-'<div class="ajax-combobox">'+"\n"+
-' <div class="input-group">'+"\n"+
-'  <input type="text" ref="search" class="ajax-combobox-search-input form-control" v-bind:readonly="!inSearchMode" v-on:focus="searchFocused" v-on:blur="searchBlurred" autocomplete="off" autocorrect="off" autocapitalize="none" v-on:keydown="searchKeyDown" v-on:keypress="searchKeyPress" v-model.trim="search_computed"/>'+"\n"+
+'<div class="ajax-combobox" style="padding:0; border:none;">'+"\n"+
+' <div class="input-group" style="margin:0; padding:0;">'+"\n"+
+'  <input type="text" ref="search" class="ajax-combobox-search-input form-control" v-bind:readonly="my_readonly || (!inSearchMode)" v-bind:disabled="my_disabled" v-on:focus="searchFocused" v-on:blur="searchBlurred" autocomplete="off" autocorrect="off" autocapitalize="none" v-on:keydown="searchKeyDown" v-on:keypress="searchKeyPress" v-model.trim="search_computed" style="margin:0; padding:0;"/>'+"\n"+
 '  <div v-if="my_options.allow_clear && (!isPlaceholderId())" class="ajax-combobox-clear-button-container input-group-append"><button class="ajax-combobox-clear-button btn btn-default" tabindex="-1" v-on:click.stop.prevent="clearButtonClicked()"><i class="fa fa-times-circle-o"></i></button></div>'+"\n"+
 '  <div class="input-group-append ajax-combobox-toggle-button-container"><button class="ajax-combobox-toggle-button btn btn-default" tabindex="-1" v-on:click.stop.prevent="chevronDownClicked()"><i class="fa fa-chevron-down"></i></button></div>'+"\n"+
 ' </div> <!-- .input-group -->'+"\n"+
@@ -59,6 +59,9 @@ Vue.component(
                     placeholder_label:null,
                 },
 
+				my_readonly:false,
+				my_disabled:false,
+
                 // Placeholder id and alternate id, derived from id_type and alt_id_type.
                 placeholder_id:null,
                 placeholder_alt_id:null,
@@ -136,10 +139,20 @@ Vue.component(
                 },
                 deep:true,
             },
+
+			readonly:function() {
+				this.updateMyReadonlyFromProp();
+			},
+
+			disabled:function() {
+				this.updateMyDisabledFromProp();
+			},
         },
 
         created:function() {
             this.updateMyOptionsFromParentOptions();
+			this.updateMyReadonlyFromProp();
+			this.updateMyDisabledFromProp();
             this.triggerLookupById();
         },
 
@@ -174,6 +187,8 @@ Vue.component(
             },
 
             searchKeyDown:function(evt) {
+                if (this.my_readonly || this.my_disabled) return;
+
                 if ((!evt.shiftKey) && (!evt.ctrlKey) && (!evt.altKey) && (!evt.metaKey)) {
                     switch (evt.key) {
                     case 'ArrowUp':
@@ -218,6 +233,8 @@ Vue.component(
             },
 
             searchKeyPress:function(evt) {
+                if (this.my_readonly || this.my_disabled) return;
+
                 if ((!this.inSearchMode) && (evt.charCode >= 0x20) && (!evt.shiftKey) && (!evt.ctrlKey) && (!evt.altKey) && (!evt.metaKey)) {
                     evt.stopPropagation();
                     this.inSearchMode = true;
@@ -443,6 +460,22 @@ Vue.component(
                 return changed;
             },
 
+			updateMyReadonlyFromProp:function() {
+				this.my_readonly = this.calcReadonlyOrDisabledFromProp('readonly');
+			},
+
+			updateMyDisabledFromProp:function() {
+				this.my_disabled = this.calcReadonlyOrDisabledFromProp('disabled');
+			},
+
+			calcReadonlyOrDisabledFromProp(propname) {
+				switch (typeof(this[propname])) {
+				case 'undefined': return false;
+				case 'boolean': return this[propname];
+				case 'string': return true;
+				}
+			},
+
             buildURL:function(args) {
                 var sep = (this.my_options.ajax_url.indexOf('?') >= 0) ? '&' : '?';
                 var url = this.my_options.ajax_url+sep+args;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-bootstrap-ajax-combobox",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "AJAX Combobox autocomplete component for Vue.js 2.x and Bootstrap 4.",
   "main": "vue-bootstrap-ajax-combobox.js",
   "scripts": {