validated-input

components.validated-input.help-section.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'p',

  classNames: ['c-input-error-text'],
  classNameBindings: ['inlineError:inline-input-error-text']

});

components.validated-input.js

/**
 * A component which handles input. Block usage and the inputComponent property use components in the validated-input directory
 *
 * Required Properties:
 *
 *   labelText (string): Text to use as the label (All inputs must have labels. If you wish not to display a label, use the `hideLabel` boolean)
 *
 * Optional Properties:
 *
 *   autofocus (boolean): Whether the input should be autofocused or not
 *
 *   filter (regex literal): Regular expression that the input will be tested against (defaults to /^.*$/)
 *
 *   hideLabel (boolean): Set to true to hide the label (defaults to false)
 *
 *   inputComponent (string): Name of the component to use for the input
 *
 *   inputId (string): Text to use as the `id` attribute for the input, and the `for` attribute for the label
 *
 *   inputValue: Initial input value
 *
 *   helpText (string): Text to display when displayHelp is true
 *
 *   placeholder (string): Placeholder text in input (defaults to '')
 *
 * Usage: Inline, Block
 *
 *   {{validated-input hideLabel=true labelText="Label" helpText="foobar" filter=regex}}
 *
 *   {{#validated-input as |subcomponents|}}
 *     {{subcomponents.labelSection text="Foo"}}
 *     {{subcomponents.inputSection filter=regex placeholder="name"}}
 *     {{subcomponents.helpSection text="Bar"}}
 *   {{/validated-input}}
 */

import Ember from 'ember';

export default Ember.Component.extend({
  hideLabel: false,
  isValid: true,
  inputComponent: 'validated-input/text-input',
  inputId: generateUuid(),
  showHelpText: false,

  actions: {
    onBlur() {
      this.set('showHelpText', !this.get('isValid'));
    },

    onInputChanged(isValid, parsedValue) {
      this.setProperties({ isValid, inputValue: parsedValue });

      if (isValid) { this.set('showHelpText', false); }

      // Call the passed in action
      (this.get('onInputChanged') || (() => {}))();
    }
  }
});

function generateUuid() {
    let values = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let uuid = '';
    for (let i = 0; i < 13; i++) {
      let rand = Math.floor(36 * Math.random());
      uuid += values[rand];
    }

    return uuid;
  }

components.validated-input.label-section.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'label',

  attributeBindings: ['for'],
  classNameBindings: ['hideLabel:sr-only'],
  classNames: ['c-input-label']
});

components.validated-input.text-input.js

/**
 * A component which handles basic text input. Designed to be modular, and is the base for all of the *-input components in the validated-input directory
 *
 * Required Properties:
 *
 * Optional Properties:
 *
 *   autofocus (boolean): Whether the input should be autofocused or not
 *
 *   filter (regex literal): Regular expression that the input will be tested against (defaults to /^.*$/)
 *
 *   formatter (function): Function that takes a value, and returns a formatted version of that value
 *
 *   inputId (string): Text to use as the `id` attribute for the input, and the `for` attribute for the label
 *
 *   parser (function): Function that takes a value, and returns a parsed version of that value
 *
 *   placeholder (string): Placeholder text in input (defaults to '')
 *
 * Usage: Inline
 */

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  filter: /^.*$/,
  value: '',

  formattedValue: Ember.computed('value', function () {
    return this.get('formatter')(this.get('value'));
  }),

  isValid: Ember.computed('filter', 'value', function () {
    return this.get('filter').test(this.get('value'));
  }),

  parsedValue: Ember.computed('value', function () {
    return this.get('parser')(this.get('value'));
  }),

  onInit: Ember.on('init', function () {
    this.setDisplayValue();
  }),

  formatter: value => value,
  parser: value => value,

  setDisplayValue() {
    let formattedValue = this.get('formattedValue');

    this.set('displayValue', formattedValue);
  },

  actions: {
    fieldUpdated(newValue) {
      this.setProperties({ displayValue: newValue, value: newValue });
      (this.get('onInputChanged') || (() => {}))(this.get('isValid'), newValue);
    },

    onBlur() {
      this.setDisplayValue();

      this.get('onBlur')();
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  regexAllowAll:  /^\.*$/
  regexAllowWords: /^\w*$/
  regexAllowDigits: /^\d*$/
});

templates.application.hbs

{{validated-input value="" autofocus=true labelText="Inline validated-input" helpText="Please Enter Something Useful" filter=regexAllowWords}}





{{#validated-input  as |subcomponents|}}
	{{subcomponents.labelSection text="Foo"}}
  {{subcomponents.inputSection filter=regex placeholder="name" value="Blah"}}
  {{subcomponents.helpSection text="Bar"}}
{{/validated-input}}

templates.components.validated-input.hbs

{{#if hasBlock}}
  {{yield
    (hash
      labelSection=(component "validated-input/label-section"
        for=(readonly inputId)
        hideLabel=(readonly hideLabel)
      )
      inputSection=(component inputComponent
        inputId=(readonly inputId)
        onBlur=(action "onBlur")
        onInputChanged=(action "onInputChanged")
      )
      helpSection=(component "validated-input/help-section"
        isVisible=(readonly showHelpText)
      )
    )
  }}
{{else}}
  {{component "validated-input/label-section"
    for=(readonly inputId)
    hideLabel=(readonly hideLabel)
    text=(readonly labelText)
  }}
  {{component inputComponent
    autofocus=(readonly autofocus)
    filter=(readonly filter)
    inputId=(readonly inputId)
    onBlur=(action "onBlur")
    onInputChanged=(action "onInputChanged")
    placeholder=(readonly placeholder)
    value=(readonly inputValue)
  }}
  {{component "validated-input/help-section"
    isVisible=(readonly showHelpText)
    text=(readonly helpText)
  }}
{{/if}}

templates.components.validated-input.help-section.hbs

<i class="fa fa-exclamation-circle t__i-with-text"></i> {{text}}

templates.components.validated-input.label-section.hbs

{{text}}

templates.components.validated-input.text-input.hbs

{{one-way-input
  displayValue
  autofocus=autofocus
  id=inputId
  onblur=(action "onBlur")
  placeholder=placeholder
  update=(action "fieldUpdated" newValue=displayValue)
}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-one-way-controls": "2.0.0"
  }
}