form label-width

Author: budiadiono

demo/src/demo/form/inline/index.html

@@ -0,0 +1,5 @@
+<ui-form v-on:success="submit" label-width="100px">
+	<ui-input kind="inline" label="First Name" placeholder="Please enter first name" v-model="firstName"></ui-input>
+	<ui-input kind="inline" label="Last Name" placeholder="Please enter last name" v-model="lastName"></ui-input>
+	<ui-button class="positive">Submit</ui-button>	
+</ui-form>

demo/src/demo/form/inline/index.ts

@@ -0,0 +1,13 @@
+import { Component } from 'vue-typed'
+import * as Vue from 'vue'
+import { Base } from '../../base'
+
+@Component({ template: require('./index.html') })
+export class FormInline extends Base {
+	firstName: string = 'Budi'
+	lastName: string = 'Adiono'
+
+	submit() {
+		this.$ui.toast.success('Changes saved!')
+	}
+}

demo/src/demo/routes.ts

@@ -1,4 +1,5 @@
 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';
@@ -25,6 +26,7 @@ import { Focus } from './focus';
 // Main routes builder
 const m = [
 	{ group: 'component/form', text: 'Form Basic', path: 'form/basic', component: FormBasic },
+	{ 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 },

dist/vue-typed-ui.js

@@ -306,6 +306,9 @@ __decorate([vueTyped.Prop()], _FormBase.prototype, "validator", void 0);
 __decorate([vueTyped.Prop({
     type: Boolean
 })], _FormBase.prototype, "validateInline", void 0);
+__decorate([vueTyped.Prop({
+    type: String
+})], _FormBase.prototype, "labelWidth", void 0);
 
 var Form = function (_FormBase2) {
     inherits(Form, _FormBase2);
@@ -338,6 +341,9 @@ var Form = function (_FormBase2) {
                 e.preventDefault();
             });
             $(this.$el).form(opt);
+            if (this.labelWidth) {
+                $(this.$el).find('.field.inline > label, .fields.inline > label').width(this.labelWidth);
+            }
         }
     }, {
         key: 'destroyed',

doc/api.json

@@ -475,7 +475,11 @@
     "type": "component",
     "readme": false,
     "props": {
-      "validateInline": {
+      "label-width": {
+        "type": "string",
+        "description": "Width of fields label when displayed 'inline'."
+      },
+      "validate-inline": {
         "type": "boolean",
         "description": "Show validation message inline"
       },

src/components/form-inputs/form/_base.ts

@@ -26,4 +26,14 @@ export abstract class _FormBase extends Vue {
     })
     validateInline: boolean
 
+    /**
+     * Width of fields label when displayed 'inline'.
+     * 
+     * @type {string}
+     */
+    @Prop({
+        type: String
+    })
+    labelWidth: string
+
 }

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

@@ -31,6 +31,10 @@ export class Form extends _FormBase {
 
 		$(this.$el).form(opt)
 
+		if (this.labelWidth) {
+			$(this.$el).find('.field.inline > label, .fields.inline > label').width(this.labelWidth)
+		}
+
 	}
 
 	destroyed() {

src/components/form-inputs/form/schema/props.json

@@ -7,9 +7,13 @@
 			"type": "any",
 			"description": "Fields validation object. See: http://semantic-ui.com/behaviors/form.html#specifying-validation-rules"
 		},
-		"validateInline": {
+		"validate-inline": {
 			"type": "boolean",
 			"description": "Show validation message inline"
+		},
+		"label-width": {
+			"type": "string",
+			"description": "Width of fields label when displayed 'inline'."
 		}
 	}
 }