diff --git a/sp-form/fields/sp-text-field/ViewModel.js b/sp-form/fields/sp-text-field/ViewModel.js index 32a662c..c7483c8 100644 --- a/sp-form/fields/sp-text-field/ViewModel.js +++ b/sp-form/fields/sp-text-field/ViewModel.js @@ -1,34 +1,45 @@ -import Field from 'spectre-canjs/util/field/Field'; - -/** - * A `` component's ViewModel - * @class ViewModel - * @extends Field - * @memberof sp-text-field - */ -export default Field.extend('TextField', { - /** @lends sp-text-field.ViewModel.prototype */ - /** - * The type of input to create. - * The default is 'text' - * @example - * textType="number" - * @memberof sp-text-field.ViewModel.prototype - * @type {String} - */ - textType: {default: 'text', type: 'string'}, - /** - * Checks for the enter keypress and triggers a change event on the input - * The enter key press triggers a submit event on the form, but before the - * submit event, we need to trigger a change on the field value - * @param {domElement} element The form input element - * @param {KeyDownEvent} event The form submit event - * @return {Boolean} - */ - beforeSubmit (element, event) { - if (event.keyCode === 13) { - element.dispatchEvent(new Event('change')); - } - return true; - } +import Field from 'spectre-canjs/util/field/Field'; + +/** + * A `` component's ViewModel + * @class ViewModel + * @extends Field + * @memberof sp-text-field + */ +export default Field.extend('TextField', { + /** @lends sp-text-field.ViewModel.prototype */ + /** + * The type of input to create. + * The default is 'text' + * @example + * textType="number" + * @memberof sp-text-field.ViewModel.prototype + * @type {String} + */ + textType: {default: 'text', type: 'string'}, + /** + * Show or hide the clear input addon button + * @example + * showClear="true" + * @memberof sp-text-field.ViewModel.prototype + * @type {Boolean} + */ + showClear: {default: false, type: 'boolean'}, + /** + * Checks for the enter keypress and triggers a change event on the input + * The enter key press triggers a submit event on the form, but before the + * submit event, we need to trigger a change on the field value + * @param {domElement} element The form input element + * @param {KeyDownEvent} event The form submit event + * @return {Boolean} + */ + beforeSubmit (element, event) { + if (event.keyCode === 13) { + element.dispatchEvent(new Event('change')); + } + return true; + }, + clearValue () { + this.value = ''; + } }); \ No newline at end of file diff --git a/sp-form/fields/sp-text-field/sp-text-field.stache b/sp-form/fields/sp-text-field/sp-text-field.stache index 2a0c2df..4137f54 100644 --- a/sp-form/fields/sp-text-field/sp-text-field.stache +++ b/sp-form/fields/sp-text-field/sp-text-field.stache @@ -1,25 +1,37 @@ - -
- {{#unless(inline)}} - - {{/unless}} - {{#if(textarea)}} - - {{else}} - - {{/if}} - {{#if(error)}}{{error}}{{/if}} -
+{{ +{{/input}} + +
+ {{#unless(inline)}} + + {{/unless}} + {{#if(textarea)}} + + {{else}} + {{#if(showClear)}} +
+ {{>input}} + +
+ {{else}} + {{>input}} + {{/if}} + {{/if}} + {{#if(error)}}{{error}}{{/if}} +
diff --git a/sp-form/fields/sp-text-field/sp-text-field.test.js b/sp-form/fields/sp-text-field/sp-text-field.test.js index 279749d..690ef52 100644 --- a/sp-form/fields/sp-text-field/sp-text-field.test.js +++ b/sp-form/fields/sp-text-field/sp-text-field.test.js @@ -1,14 +1,20 @@ -import ViewModel from './ViewModel'; - -let vm; - -beforeEach(() => { - vm = new ViewModel(); -}); -afterEach(() => { - vm = null; -}); - -test('sp-text-field', () => { - expect(vm).toBeTruthy(); -}); +import ViewModel from './ViewModel'; + +let vm; + +beforeEach(() => { + vm = new ViewModel(); +}); +afterEach(() => { + vm = null; +}); + +test('sp-text-field', () => { + expect(vm).toBeTruthy(); +}); + +test('clearValue()', () => { + vm.value = 'hello'; + vm.clearValue(); + expect(vm.value).toBeFalsy(); +});