input icon - closes #14

Author: budiadiono

demo/docs/src/components/form-inputs/input/README.md

@@ -0,0 +1 @@
+## Input Component

demo/src/demo/input/index.html renamed to demo/src/demo/input/basic/index.html

@@ -1,11 +1,11 @@
 import { Component } from 'vue-typed';
-import { Base } from '../base'
+import { Base } from '../../base'
 import * as Vue from 'vue'
 
 @Component({
 	template: require('./index.html')
 })
-export class Input extends Base  {
+export class InputBasic extends Base  {
 	firstName: string = 'John'
 	lastName: string = 'Doe'
 	password: string = 'supersecretpassword'

demo/src/demo/input/index.ts renamed to demo/src/demo/input/basic/index.ts

@@ -0,0 +1,6 @@
+<div>
+	<ui-form>
+		<ui-input icon="user" v-model="userName" label="First Name" placeholder="Please enter your user name"></ui-input>		
+		<ui-input icon="lock" v-model="password" :password="true" label="Password" placeholder="Please enter password"></ui-input>				
+	</ui-form>
+</div>

demo/src/demo/input/icon/index.html

@@ -0,0 +1,11 @@
+import { Component } from 'vue-typed';
+import { Base } from '../../base'
+import * as Vue from 'vue'
+
+@Component({
+	template: require('./index.html')
+})
+export class InputIcon extends Base  {
+	userName: string = 'superuser'
+	password: string = 'supersecretpassword'
+}

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

@@ -2,7 +2,8 @@ import { FormBasic } from './form/basic';
 import { FormInline } from './form/inline';
 import { FormComponentBasic } from './form-component/basic';
 import { FormComponentReplace } from './form-component/replace';
-import { Input } from './input';
+import { InputBasic } from './input/basic';
+import { InputIcon } from './input/icon';
 import { Numeric } from './numeric';
 import { Currency } from './currency';
 import { TabBasic } from './tab/basic';
@@ -29,7 +30,8 @@ const m = [
 	{ group: 'component/form', text: 'Inline Form', path: 'form/inline', component: FormInline },
 	{ group: 'decorator/form', text: 'Basic', path: 'form-component/basic', component: FormComponentBasic },
 	{ group: 'decorator/form', text: 'Replace', path: 'form-component/replace', component: FormComponentReplace },
-	{ group: 'component/input', text: 'Input', path: 'input', component: Input },
+	{ group: 'component/input', text: 'Basic Input', path: 'input/basic', component: InputBasic },
+	{ group: 'component/input', text: 'Input With Icon', path: 'input/icon', component: InputIcon },
 	{ group: 'component/numeric', text: 'Numeric', path: 'numeric', component: Numeric },
 	{ group: 'component/currency', text: 'Currency', path: 'currency', component: Currency },
 	{ group: 'component/date', text: 'Date', path: 'date', component: DateDemo },

demo/src/demo/routes.ts

@@ -688,7 +688,17 @@ var _InputBase = function (_FieldBase) {
 
     function _InputBase() {
         classCallCheck(this, _InputBase);
-        return possibleConstructorReturn(this, (_InputBase.__proto__ || Object.getPrototypeOf(_InputBase)).apply(this, arguments));
+
+        /**
+         * Icon position
+         *
+         * @default 'left'
+         * @type {'left' | 'right' | string}
+         */
+        var _this = possibleConstructorReturn(this, (_InputBase.__proto__ || Object.getPrototypeOf(_InputBase)).apply(this, arguments));
+
+        _this.iconPos = 'left';
+        return _this;
     }
 
     return _InputBase;
@@ -704,6 +714,10 @@ __decorate([vueTyped.Prop()], _InputBase.prototype, "value", void 0);
 __decorate([vueTyped.Prop({
     type: Boolean
 })], _InputBase.prototype, "password", void 0);
+__decorate([vueTyped.Prop({
+    type: String
+})], _InputBase.prototype, "icon", void 0);
+__decorate([vueTyped.Prop()], _InputBase.prototype, "iconPos", void 0);
 
 // ref: http://vuejs.org/guide/components.html#Form-Input-Components-using-Custom-Events
 var Input = function (_InputBase2) {
@@ -723,7 +737,7 @@ var Input = function (_InputBase2) {
     }, {
         key: 'createComponent',
         value: function createComponent(ch) {
-            return ch('input', {
+            var input = ch('input', {
                 attrs: {
                     type: this.password ? 'password' : 'text',
                     name: this.name,
@@ -734,6 +748,23 @@ var Input = function (_InputBase2) {
                     change: this.emiter('change')
                 }
             });
+            if (!this.icon) return input;
+            var icon = ch('i', {
+                class: 'icon ' + this.icon
+            });
+            var contents = [];
+            var css = 'ui left icon input';
+            if (this.iconPos == 'left') {
+                contents.push(icon);
+                contents.push(input);
+            } else {
+                contents.push(input);
+                contents.push(icon);
+                css = 'ui icon input';
+            }
+            return ch('div', {
+                class: css
+            }, contents);
         }
     }, {
         key: 'mounted',

dist/vue-typed-ui.js

@@ -511,8 +511,17 @@
       "FieldBase": "../../fields/field-base"
     },
     "type": "component",
-    "readme": false,
+    "readme": true,
     "props": {
+      "icon": {
+        "type": "string",
+        "description": "Name of icon to be displayed"
+      },
+      "icon-pos": {
+        "type": "'left' | 'right' | string",
+        "description": "Icon position",
+        "default": "'left'"
+      },
       "kind": {
         "type": "'default' | 'grouped' | 'inline'",
         "description": "Field layout style"

doc/api.json

@@ -0,0 +1 @@
+## Input Component

src/components/form-inputs/input/README.md

@@ -48,4 +48,23 @@ export abstract class _InputBase extends FieldBase {
     })
     password: boolean
 
+    /**
+     * Name of icon to be displayed
+     * 
+     * @type {string}
+     */
+    @Prop({
+        type: String
+    })
+    icon: string
+
+    /**
+     * Icon position
+     * 
+     * @default 'left'
+     * @type {'left' | 'right' | string}
+     */
+    @Prop()
+    iconPos: 'left' | 'right' | string = 'left'
+
 }