[input, numeric, currency] added selectOnFocus prop

Author: budiadiono

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

@@ -65,8 +65,10 @@ export abstract class _InputBase extends FieldBase {
      * @default 'left'
      * @type {'left' | 'right' | string}
      */
-    @Prop()
-    iconPos: 'left' | 'right' | string = 'left'
+    @Prop({
+        default: 'left'
+    })
+    iconPos: 'left' | 'right' | string
 
     /**
      * Css class(es) applied to input component
@@ -78,4 +80,16 @@ export abstract class _InputBase extends FieldBase {
     })
     css: string
 
+    /**
+     * Select text when receive focus
+     * 
+     * @default true
+     * @type {boolean}
+     */
+    @Prop({
+        type: Boolean,
+        default: true
+    })
+    selectOnFocus: boolean
+
 }

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

@@ -74,6 +74,9 @@ export class Input extends _InputBase {
 		// initiate value
 		var target = $(this.$el).find('input').val(this.value)
 
+		if (this.selectOnFocus)
+			target.on('focus', function () { $(this).select() })
+
 		// make up for validation
 		Util.setDataValidateAttr(this, target)
 	}

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

@@ -31,6 +31,11 @@
     "css": {
       "type": "string",
       "description": "Css class(es) applied to input component"
+    },
+    "select-on-focus": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Select text when receive focus"
     }
   }
 }

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

@@ -96,8 +96,21 @@ export abstract class _NumericBase extends FieldBase {
      * @type {boolean}
      */
     @Prop({
-        type: Boolean
+        type: Boolean,
+        default: false
     })
-    integer: boolean = false
+    integer: boolean
+
+    /**
+     * Select text when receive focus
+     * 
+     * @default true
+     * @type {boolean}
+     */
+    @Prop({
+        type: Boolean,
+        default: true
+    })
+    selectOnFocus: boolean
 
 }

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

@@ -45,14 +45,14 @@ export class Numeric extends _NumericBase {
 		$(this.$el).find('input').autoNumeric('destroy');
 		this.setupUI();
 	}
-	
-	
+
+
 	setupUI() {
 		var def = this.$UI.$settings.numeric
 
 		var opt = {
 			aDec: Util.pickNonEmpty(this.decimalSeparator, def.decimalSeparator),
-			aSep: Util.pickNonEmpty(this.groupSeparator, def.groupSeparator),			
+			aSep: Util.pickNonEmpty(this.groupSeparator, def.groupSeparator),
 			mDec: Util.pickNonEmpty(this.decimalPlaces, def.decimalPlaces),
 			vMin: Util.pickNonEmpty(this.min, def.min),
 			vMax: Util.pickNonEmpty(this.max, def.max)
@@ -64,12 +64,15 @@ export class Numeric extends _NumericBase {
 		}
 
 		var target = $(this.$el).find('input')
-		.autoNumeric('init', this.buildOptions(opt))
-		.autoNumeric('set', this.value || 0).on('keyup change paste propertychange', (v) => {
-			var value = $(v.target).autoNumeric('get')
-			this.$emit('input', value)
-			this.$emit('change', value)
-		})
+			.autoNumeric('init', this.buildOptions(opt))
+			.autoNumeric('set', this.value || 0).on('keyup change paste propertychange', (v) => {
+				var value = $(v.target).autoNumeric('get')
+				this.$emit('input', value)
+				this.$emit('change', value)
+			})
+
+		if (this.selectOnFocus)
+			target.on('focus', function () { $(this).select() })
 
 		Util.setDataValidateAttr(this, target)
 	}

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

@@ -1,44 +1,49 @@
 {
-	"base": {
-		"FieldBase": "../../fields/field-base"
-	},
-	"props": {
-		"name": {
-			"type": "string",
-			"description": "Input element name"
-		},
-		"placeholder": {
-			"type": "string",
-			"description": "Input element placeholder"
-		},
-		"value": {
-			"type": "any",
-			"description": "v-model binding"
-		},
-		"group-separator": {
-			"type": "string",
-			"description": "Thousands group separator"
-		},
-		"decimal-separator": {
-			"type": "string",
-			"description": "Decimal group separator"
-		},
-		"decimal-places": {
-			"type": "number",
-			"description": "Number of decimal places"
-		},
-		"min": {
-			"type": "number",
-			"description": "Minimum value allowed"
-		},
-		"max": {
-			"type": "number",
-			"description": "Maximum value allowed"
-		},
-		"integer": {
-			"type": "boolean",
-			"description": "Take only integer value",
-			"default": "false"
-		}
-	}	
+  "base": {
+    "FieldBase": "../../fields/field-base"
+  },
+  "props": {
+    "name": {
+      "type": "string",
+      "description": "Input element name"
+    },
+    "placeholder": {
+      "type": "string",
+      "description": "Input element placeholder"
+    },
+    "value": {
+      "type": "any",
+      "description": "v-model binding"
+    },
+    "group-separator": {
+      "type": "string",
+      "description": "Thousands group separator"
+    },
+    "decimal-separator": {
+      "type": "string",
+      "description": "Decimal group separator"
+    },
+    "decimal-places": {
+      "type": "number",
+      "description": "Number of decimal places"
+    },
+    "min": {
+      "type": "number",
+      "description": "Minimum value allowed"
+    },
+    "max": {
+      "type": "number",
+      "description": "Maximum value allowed"
+    },
+    "integer": {
+      "type": "boolean",
+      "description": "Take only integer value",
+      "default": "false"
+    },
+    "select-on-focus": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Select text when receive focus"
+    }
+  }
 }