[form] add keyboard-shortcuts prop

Author: budiadiono

demo/src/demo/form/disable-keyboard-shortcuts/index.html

@@ -0,0 +1,10 @@
+<ui-form v-on:success="submit" label-width="100px" :validator="validator" :keyboard-shortcuts="false">
+	<ui-message class="info">
+		Form not submitted until you press <strong>Submit</strong> button
+	</ui-message>
+	<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="submit positive">Submit</ui-button>	
+
+	<ui-message class="error"></ui-message>
+</ui-form>

demo/src/demo/form/disable-keyboard-shortcuts/index.ts

@@ -0,0 +1,24 @@
+import { Component } from 'vue-typed'
+import * as Vue from 'vue'
+import { Base } from '../../base'
+
+@Component({ template: require('./index.html') })
+export class FormDisableKeyboardShortcuts extends Base {
+	firstName: string = ''
+	lastName: string = ''
+
+	validator = {
+		firstName: {
+			identifier: 'firstName',
+			rules: [{ type: 'empty', prompt: 'First name can not be empty' }]
+		},
+		lastName: {
+			identifier: 'lastName',
+			rules: [{ type: 'empty', prompt: 'Last name can not be empty' }]
+		}
+	}
+
+	submit() {
+		this.$ui.toast.success('Changes saved!')
+	}
+}

demo/src/demo/routes.ts

@@ -1,6 +1,7 @@
 import { FormBasic } from './form/basic';
 import { FormInline } from './form/inline';
 import { FormVariations } from './form/variations';
+import { FormDisableKeyboardShortcuts } from './form/disable-keyboard-shortcuts';
 import { FormComponentBasic } from './form-component/basic';
 import { FormComponentReplace } from './form-component/replace';
 import { InputBasic } from './input/basic';
@@ -30,6 +31,7 @@ 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: 'component/form', text: 'Variations', path: 'form/variations', component: FormVariations },
+	{ group: 'component/form', text: 'Disable Keyboard Shortcuts', path: 'form/disable-keyboard-shortcuts', component: FormDisableKeyboardShortcuts },
 	{ 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: 'Basic Input', path: 'input/basic', component: InputBasic },

dist/vue-typed-ui.js

@@ -296,7 +296,17 @@ var _FormBase = function (_Vue) {
 
     function _FormBase() {
         classCallCheck(this, _FormBase);
-        return possibleConstructorReturn(this, (_FormBase.__proto__ || Object.getPrototypeOf(_FormBase)).apply(this, arguments));
+
+        /**
+         * Adds keyboard shortcut for enter key to submit form
+         *
+         * @default true
+         * @type {boolean}
+         */
+        var _this = possibleConstructorReturn(this, (_FormBase.__proto__ || Object.getPrototypeOf(_FormBase)).apply(this, arguments));
+
+        _this.keyboardShortcuts = true;
+        return _this;
     }
 
     return _FormBase;
@@ -309,6 +319,9 @@ __decorate([vueTyped.Prop({
 __decorate([vueTyped.Prop({
     type: String
 })], _FormBase.prototype, "labelWidth", void 0);
+__decorate([vueTyped.Prop({
+    type: Boolean
+})], _FormBase.prototype, "keyboardShortcuts", void 0);
 
 var Form = function (_FormBase2) {
     inherits(Form, _FormBase2);
@@ -328,7 +341,9 @@ var Form = function (_FormBase2) {
                 },
                 onFailure: function onFailure(formErrors, fields) {
                     self.$emit('error', formErrors, fields);
-                }
+                },
+                // using default form keyboard shortcuts instead 
+                keyboardShortcuts: false
             };
             if (this.validator) {
                 Object.assign(opt, {
@@ -353,7 +368,8 @@ var Form = function (_FormBase2) {
     }, {
         key: 'render',
         value: function render(ch) {
-            return ch('form', {
+            var tag = this.keyboardShortcuts ? 'form' : 'div';
+            return ch(tag, {
                 class: 'ui form',
                 domProps: {
                     onsubmit: function onsubmit(e) {

doc/api.json

@@ -475,6 +475,11 @@
     "type": "component",
     "readme": false,
     "props": {
+      "keyboard-shortcuts": {
+        "type": "boolean",
+        "description": "Adds keyboard shortcut for enter key to submit form",
+        "default": "true"
+      },
       "label-width": {
         "type": "string",
         "description": "Width of fields label when displayed 'inline'."

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

@@ -36,4 +36,15 @@ export abstract class _FormBase extends Vue {
     })
     labelWidth: string
 
+    /**
+     * Adds keyboard shortcut for enter key to submit form
+     * 
+     * @default true
+     * @type {boolean}
+     */
+    @Prop({
+        type: Boolean
+    })
+    keyboardShortcuts: boolean = true
+
 }

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

@@ -14,7 +14,10 @@ export class Form extends _FormBase {
 			},
 			onFailure: function (formErrors, fields) {
 				self.$emit('error', formErrors, fields)
-			}
+			},
+
+			// using default form keyboard shortcuts instead 
+			keyboardShortcuts: false
 		};
 
 		if (this.validator) {
@@ -42,7 +45,10 @@ export class Form extends _FormBase {
 	}
 
 	render(ch) {
-		return ch('form', {
+
+		let tag = this.keyboardShortcuts ? 'form' : 'div'
+
+		return ch(tag, {
 			class: 'ui form',
 			domProps: {
 				onsubmit: function onsubmit(e) {

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

@@ -14,6 +14,11 @@
 		"label-width": {
 			"type": "string",
 			"description": "Width of fields label when displayed 'inline'."
+		},
+		"keyboard-shortcuts": {
+			"type": "boolean",
+			"description": "Adds keyboard shortcut for enter key to submit form",
+			"default": "true"
 		}
 	}
 }