[input] fix disabled state

Author: budiadiono

demo/src/docs/components/input/icon/index.ts

@@ -7,4 +7,5 @@ import * as Vue from 'vue'
 export class InputIcon  {
 	userName: string = 'superuser'
 	password: string = 'supersecretpassword'
+	allowEditPassword: boolean = true
 }

demo/src/docs/components/input/icon/view.pug

@@ -1,4 +1,5 @@
 div
   ui-form
     ui-input(icon='user', v-model='userName', label='First Name', placeholder='Please enter your user name')
-    ui-input(icon='lock', v-model='password', :password='true', label='Password', placeholder='Please enter password')
+    ui-input(icon='lock', v-model='password', :password='true', label='Password', placeholder='Please enter password', :disabled='!allowEditPassword')
+    ui-checkbox(v-model='allowEditPassword') No password

dist/vue-typed-ui.js

@@ -674,24 +674,32 @@ var Input = function (_InputBase2) {
     }, {
         key: 'createComponent',
         value: function createComponent(ch) {
+            var attrs = {
+                type: this.password ? 'password' : 'text',
+                name: this.name,
+                placeholder: this.placeholder
+            };
+            var css = 'ui input';
+            if (this.disabled) {
+                css += ' disabled';
+                attrs['disabled'] = true;
+            }
             var input = ch('input', {
                 class: this.css,
-                attrs: {
-                    type: this.password ? 'password' : 'text',
-                    name: this.name,
-                    placeholder: this.placeholder
-                },
+                attrs: attrs,
                 on: {
                     input: this.emiter('input'),
                     change: this.emiter('change')
                 }
             });
-            if (!this.icon) return input;
+            if (!this.icon) return ch('div', {
+                class: css
+            }, [input]);
             var icon = ch('i', {
                 class: 'icon ' + this.icon
             });
             var contents = [];
-            var css = 'ui left icon input';
+            css = 'ui left icon input';
             if (this.iconPos == 'left') {
                 contents.push(icon);
                 contents.push(input);
@@ -3156,7 +3164,7 @@ function focus(instance, $this) {
         var target = $($this.$el).find(element);
         if (!target || !target.length) return;
         if (!target.is('input')) {
-            target = target.find('> input');
+            target = target.find('input').first();
         }
         target.focus();
     };

src/components/form-inputs/input/index.ts

@@ -8,7 +8,7 @@ import { _InputBase } from './_base';
 
 @Component()
 export class Input extends _InputBase {
-	
+
 	@Watch('value')
 	valueChanged(val) {
 		if (this.$el.querySelector('input') == document.activeElement)
@@ -17,34 +17,48 @@ export class Input extends _InputBase {
 		$(this.$el).find('input').val(val)
 	}
 
+
+
 	createComponent(ch) {
-				
+
+		let attrs = {
+			type: this.password ? 'password' : 'text',
+			name: this.name,
+			placeholder: this.placeholder
+		}
+
+		let css = 'ui input'
+		if (this.disabled) {
+			css += ' disabled'
+			attrs['disabled'] = true
+		}
+
 		let input = ch('input', {
 			class: this.css,
-			attrs: {
-				type: this.password ? 'password' : 'text',
-				name: this.name,
-				placeholder: this.placeholder
-			},
+			attrs,
 			on: {
 				input: this.emiter('input'),
 				change: this.emiter('change')
 			}
 		})
 
+
+
 		if (!this.icon)
-			return input;
+			return ch('div', {
+				class: css
+			}, [input])
 
 		let icon = ch('i', {
 			class: 'icon ' + this.icon
 		})
 
 		let contents = []
-		let css = 'ui left icon input'
+		css = 'ui left icon input'
 		if (this.iconPos == 'left') {
 			contents.push(icon)
 			contents.push(input)
-		} else{
+		} else {
 			contents.push(input)
 			contents.push(icon)
 			css = 'ui icon input'
@@ -55,7 +69,7 @@ export class Input extends _InputBase {
 		}, contents)
 
 	}
-	
+
 	mounted() {
 		// initiate value
 		var target = $(this.$el).find('input').val(this.value)