ya-input - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

addon/components/ya-input/component.js

@@ -6,86 +6,76 @@ import Ember from 'ember';
   Component,
-  addObserver,
-  getProperties,
+  defineProperty,
   isEmpty,
-  observer,
   on,
+  get,
+  set,
+  getWithDefault,
   computed,
-  run
+  String: { dasherize },
+  computed: { oneWay },
+  A: emberArray
 } = Ember;
 
-const { next: runNext } = run;
+function defaultCPSetter(_key, newValue) {
+  return newValue;
+}
 
-const {
-  oneWay,
-  equal
-} = computed;
-
-const get = Ember.get;
-const set = Ember.set;
-
-export default Component.extend({
-  layout: layout,
+const YaInputComponent = Component.extend({
+  layout,
+  type: 'text',
   classNameBindings: ['validClass', 'type'],
-
-  field: '',
-  canShowErrors: false,
+  hasFocusedOnce: false,
   hasLostFocus: false,
+  hasInitialFocus: false,
 
+  model: oneWay('form.model'),
+  modelName: oneWay('model.constructor.modelName'),
+  shouldShowValidationErrors: oneWay('model.shouldShowValidationErrors'),
   errorText: oneWay('errors.firstObject'),
 
-  fieldObserver: observer('value', function() {
-    const props  = getProperties(this, 'form.model', 'field-name');
-    set(props['form.model'], props['field-name'], get(this, 'value'));
+  inputId: computed('model', 'field-name', {
+    get() {
+      const modelName = getWithDefault(this, 'modelName', get(this, 'model').toString());
+
+      return dasherize(`${modelName}-${get(this, 'field-name')}`);
+    },
+    set: defaultCPSetter
   }),
 
-  setErrorsObserver: on('init', observer('form.model', 'field-name', function() {
-    const fieldName = get(this, 'field-name');
-    const valueKey = `form.model.${fieldName}`;
-    const errorsKey = `form.model.errors.${fieldName}`;
+  name: computed('fieldName', {
+    get() {
+      return dasherize(get(this, 'field-name'));
+    },
+    set: defaultCPSetter
+  }),
 
-    if (isEmpty(fieldName)) {
-      // might want to teardown
-      return;
-    }
+  value: computed('model', 'field-name', {
+    get() {
+      const model = get(this, 'model');
+      const fieldName = get(this, 'field-name');
 
-    addObserver(this, valueKey, this, this._updateValue);
-    addObserver(this, errorsKey, this, this._updateErrors);
+      return model ? get(model, fieldName) : null;
+    },
+    set(_key, newValue) {
+      const model = get(this, 'model');
+      const fieldName = get(this, 'field-name');
 
-    this._updateValue(this, valueKey);
-    this._updateErrors(this, errorsKey);
-  })),
+      return model ? set(model, fieldName, newValue) : null;
+    }
+  }),
 
-  _updateValue(component, key) {
-    set(component, 'value', get(component, key));
-  },
-
-  _updateErrors(component, key) {
-    set(component, 'errors', get(component, key));
-  },
-
-  errorsObserver: observer('errors.length', 'hasLostFocus', 'form.model.shouldShowValidationErrors', function() {
-    runNext(() => {
+  canShowErrors: computed('errors.[]', 'hasLostFocus', 'shouldShowValidationErrors', {
+    get() {
       const errorsCount = get(this, 'errors.length');
       const hasLostFocus = get(this, 'hasLostFocus');
-      const shouldShowValidationErrors = get(this, 'form.model.shouldShowValidationErrors');
+      const shouldShowValidationErrors = get(this, 'shouldShowValidationErrors');
 
-      if (errorsCount === 0) {
-        set(this, 'canShowErrors', false);
-      } else if (errorsCount > 0 && (hasLostFocus || shouldShowValidationErrors)) {
-        set(this, 'canShowErrors', true);
-      }
-    });
+      return !!(errorsCount > 0 && (hasLostFocus || shouldShowValidationErrors));
+    },
+    set: defaultCPSetter
   }),
 
-  validClass: computed('canShowErrors', 'errorText', 'focusedOnce', 'form.model.shouldShowValidationErrors', {
+  validClass: computed('errors.[]', 'field-name', 'canShowErrors', 'errorText', 'hasFocusedOnce', 'shouldShowValidationErrors', {
     get() {
-      if (get(this, 'focusedOnce') || get(this, 'form.model.shouldShowValidationErrors')) {
-        if (get(this, 'canShowErrors')) {
-          return 'is-invalid';
-        } else {
-          return 'is-valid';
-        }
-      }
-
-      return;
+      return this._getValidClass(get(this, 'model.errors'), get(this, 'field-name'));
     }
@@ -96,9 +86,74 @@ }),
     set(this, 'hasLostFocus', false);
-    set(this, 'initialFocus', true);
+    set(this, 'hasInitialFocus', true);
   },
 
   focusOut() {
-    set(this, 'focusedOnce', true);
+    set(this, 'hasFocusedOnce', true);
     set(this, 'hasLostFocus', true);
+  },
+
+  /**
+   * Logic for the input's validClass.
+   *
+   * @private
+   * @param {Array} modelErrors
+   * @param {String} fieldName
+   * @return {String}
+   */
+  _getValidClass(modelErrors, fieldName) {
+    if (get(this, 'hasFocusedOnce') || get(this, 'shouldShowValidationErrors')) {
+      if (this._hasDSError(modelErrors, fieldName)) {
+        return 'is-invalid';
+      }
+
+      return get(this, 'canShowErrors') ? 'is-invalid' : 'is-valid';
+    }
+  },
+
+  /**
+   * Adds the `errors` computed property at runtime, when the component is
+   * initialized with attrs.
+   *
+   * @private
+   * @return {Void}
+   */
+  _addErrorsComputedProperty: on('didInitAttrs', function() {
+    const modelName = get(this, 'attrs.form.model.constructor.modelName');
+    const fieldName = get(this, 'attrs.field-name');
+    let errorKey = `form.errors.model.${fieldName}`;
+
+    if (modelName) {
+      errorKey = `form.errors.${modelName}.${fieldName}`;
+    }
+
+    defineProperty(this, 'errors', computed(errorKey, `form.model.${fieldName}`, 'field-name', {
+      get() {
+        return get(this, errorKey);
+      },
+      set: defaultCPSetter
+    }));
+  }),
+
+  /**
+   * Checks for the existence of the field-name on the `DS.Errors` object added
+   * by Ember Data rejections.
+   *
+   * @private
+   * @param {Array} modelErrors
+   * @param {String} fieldName
+   * @return {Boolean}
+   */
+  _hasDSError(modelErrors = emberArray(), fieldName = '') {
+    modelErrors = emberArray(modelErrors); // ensures we have `findBy`
+
+    if (isEmpty(modelErrors)) {
+      return false;
+    }
+
+    return !!modelErrors.findBy('attribute', fieldName);
   }
 });
+
+export default YaInputComponent.reopenClass({
+  positionalParams: ['form', 'field-name']
+});

package.json

 {
   "name": "ya-input",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "The default blueprint for ember-cli addons.",
@@ -14,24 +14,25 @@ "directories": {
   },
-  "repository": "",
+  "repository": "https://github.com/danmcclain/ya-input",
   "engines": {
     "node": ">= 0.10.0"
   },
-  "author": "",
+  "author": "Dan McClain",
   "license": "MIT",
   "devDependencies": {
-    "broccoli-asset-rev": "^2.0.2",
-    "ember-cli": "0.2.3",
-    "ember-cli-app-version": "0.3.3",
+    "broccoli-asset-rev": "^2.1.2",
+    "ember-cli": "1.13.8",
+    "ember-cli-app-version": "0.5.0",
     "ember-cli-content-security-policy": "0.4.0",
-    "ember-cli-dependency-checker": "0.0.8",
-    "ember-cli-ic-ajax": "0.1.1",
-    "ember-cli-inject-live-reload": "^1.3.0",
-    "ember-cli-qunit": "0.3.10",
-    "ember-cli-uglify": "1.0.1",
-    "ember-data": "1.0.0-beta.16.1",
+    "ember-cli-dependency-checker": "^1.0.1",
+    "ember-cli-htmlbars-inline-precompile": "^0.2.0",
+    "ember-cli-ic-ajax": "0.2.1",
+    "ember-cli-inject-live-reload": "^1.3.1",
+    "ember-cli-qunit": "^1.0.0",
+    "ember-cli-release": "0.2.3",
+    "ember-cli-uglify": "^1.2.0",
+    "ember-disable-proxy-controllers": "^1.0.0",
+    "ember-export-application-global": "^1.0.3",
     "ember-disable-prototype-extensions": "^1.0.0",
-    "ember-export-application-global": "^1.0.2",
-    "ember-try": "0.0.4",
-    "ember-validations": "dockyard/ember-validations",
-    "ya-form": "0.0.1"
+    "ember-try": "0.0.6",
+    "ember-validations": "dockyard/ember-validations#4ae1caf607a2f6de34f05c8bcf99849deab24075"
   },
@@ -42,4 +43,5 @@ "keywords": [
   "dependencies": {
-    "ember-cli-htmlbars": "0.7.4",
-    "ember-cli-babel": "^5.0.0"
+    "ya-form": "0.1.0",
+    "ember-cli-htmlbars": "0.7.9",
+    "ember-cli-babel": "^5.1.3"
   },
@@ -46,0 +48,0 @@ "ember-addon": {

README.md

@@ -6,9 +6,9 @@ # Ya-input
 ```hbs
-{{#ya-form model=controller as |form|}}
+{{#ya-form model as |form|}}
   <h2>Test Form</h2>
 
-  {{! Pass ya-input the form yielded by ya-form, and the name of the field you want to make the input for }}
+  {{! Pass ya-input the form yielded by ya-form, and the name of the field you want to make the input for, using positional params }}
   {{! By default, wraps in a div that has the valid class bound to it, can change it via the tagName property }}
   {{! ya-input yields itself }}
-  {{#ya-input form=form field-name="name" tagName="header" as |yaInput|}}
+  {{#ya-input form "name" tagName="header" as |yaInput|}}
 
@@ -20,3 +20,3 @@ {{! viewName property allows you to link inputs to labels via the assigned id }}
     {{! You can bind the valid class to your input as well }}
-    {{input value=yaInput.value viewName="nameField" classBinding=":blah yaInput.validClass"}}
+    {{input value=yaInput.value classBinding=":blah yaInput.validClass"}}
 
@@ -23,0 +23,0 @@ {{! yaInput has a property that tells you whether or not to show errors for that field }}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

2

decreased by-33.33%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

9386

decreased by-99.89%

Dependency count

3

increased by50%

Dev dependency count

16

increased by6.67%

Number of package files

11

decreased by-59.26%

Lines of code

179

decreased by-99.73%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedya-form@0.1.0

• + Addedember-cli-htmlbars@0.7.9(transitive)

• + Addedya-form@0.1.0(transitive)

• - Removedember-cli-htmlbars@0.7.4(transitive)

• Updatedember-cli-babel@^5.1.3

• Updatedember-cli-htmlbars@0.7.9