Permalink
Browse files

feat(form-input): Pass input element to formatter (issue #772) (#773)

* [form-input] pass input element to formatter

Pass input element as second argument to formatter function

* [form-input] Documentation update

* [form-input] allow type to be `textarea`

* [form-input] Update docs

* [form-input-static] Remove formatter option

* [form-input] Remove formatter on static control
  • Loading branch information...
tmorehouse committed Aug 8, 2017
1 parent 9da94a6 commit da77f1569372a58c1b5851a4af38be2a2fb06f80
Showing with 32 additions and 31 deletions.
  1. +15 −12 docs/components/form-input/README.md
  2. +3 −7 lib/components/form-input-static.vue
  3. +14 −12 lib/components/form-input.vue
@@ -41,7 +41,7 @@ export default {
text3: ''
},
methods: {
format(value) {
format(value, el) {
return value.toLowerCase();
}
}
@@ -53,26 +53,29 @@ export default {
### Input type
`<b-form-input>` defaults to a `text` input, but you can set it to any other text-like
type, such as `password`, `number`, `url`, etc, by setting the `type` prop.
type, such as `password`, `number`, `url`, etc, by setting the `type` prop to the
appropriate value.
#### Textarea mode
Render a `<textarea>` element by setting the `textarea` prop to `true`. The
`type` prop is ignored when prop `textarea` is set.
Render a `<textarea>` element by setting the `textarea` prop to `true` or by
setting the `type` prop to `textarea`.
By default the `<textarea>` will automatically size its height based on on the number
lines (separated by newlines) of text it contains. You can override this behaviour by supplying
a numeric value to the `rows` prop. The `rows` prop has no effect on other input types.
lines of text (separated by newlines) it contains. You can override this behaviour
by supplying a numeric value to the `rows` prop. The `rows` prop has no effect
on other input types.
### Formatter
`<b-form-input>` optionally supports formatting by passing a function reference to the `formatter` prop.
`<b-form-input>` optionally supports formatting by passing a function reference to
the `formatter` prop.
By default, formatting occurs when the control's native `input` event fires. You can use the boolean
prop `lazy-formatter` to restrict the formatter function to being called on the
control's native `change` event (which usually occurs on blur).
By default, formatting occurs when the control's native `input` event fires. You can
use the boolean prop `lazy-formatter` to restrict the formatter function to being
called on the control's native `change` event (which usually occurs on blur).
The `formatter` function receives a single argument which is the control's current value, and
should return the formatted value.
The `formatter` function receives two arguments (the raw value of the input, and
a reference to the input element) and should return the formatted value (as a string).
No formatting occurs if a `formatter` is not provided.
@@ -2,16 +2,15 @@
<p :id="id || null"
:class="inputClass"
v-html="staticValue"
>
<slot></slot>
</p>
></p>
</template>
<script>
export default {
computed: {
staticValue() {
return this.formatter ? this.formatter(this.value) : this.value;
const val = this.value;
return (val === '' || val === null) ? '&nbsp;' : val;
},
inputClass() {
return [
@@ -29,9 +28,6 @@
value: {
default: null
},
formatter: {
type: Function
},
size: {
type: String,
default: null
@@ -1,7 +1,8 @@
<template>
<input v-if="!static"
ref="input"
:type="textarea ? null : type"
:is="isTextarea ? 'textarea' : 'input'"
:type="isTextarea ? null : type"
:value="value"
:name="name"
:id="id || null"
@@ -11,12 +12,11 @@
:aria-required="required ? 'true' : null"
:aria-invalid="ariaInvalid"
:readonly="readonly"
:is="textarea ? 'textarea' : 'input'"
:class="inputClass"
:rows="textarea ? (rows || rowsCount) : null"
:rows="isTextarea ? (rows || rowsCount) : null"
:placeholder="placeholder"
@input="onInput($event.target.value)"
@change="onChange($event.target.value)"
@input="onInput($event.target.value, $event.target)"
@change="onChange($event.target.value, $event.target)"
@keyup="onKeyUp($event)"
@focus="$emit('focus')"
@blur="$emit('blur')"
@@ -26,7 +26,6 @@
:value="value"
:size="size"
:state="state"
:formatter="formatter"
></b-form-input-static>
</template>
@@ -38,6 +37,9 @@
mixins: [formMixin],
components: {bFormInputStatic},
computed: {
istextarea() {
return this.textarea || this.type === 'textarea';
},
rowsCount() {
return (this.value || '').toString().split('\n').length;
},
@@ -59,24 +61,24 @@
}
},
methods: {
format(value) {
format(value, el) {
if (this.formatter) {
const formattedValue = this.formatter(value);
const formattedValue = this.formatter(value, el);
if (formattedValue !== value) {
value = formattedValue;
this.$refs.input.value = formattedValue;
}
}
return value;
},
onInput(value) {
onInput(value, el) {
if (!this.lazyFormatter) {
value = this.format(value);
value = this.format(value, el);
}
this.$emit('input', value);
},
onChange(value) {
value = this.format(value);
onChange(value, el) {
value = this.format(value, el);
this.$emit('input', value);
this.$emit('change', value);
},

0 comments on commit da77f15

Please sign in to comment.