New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
ampersand-input-view
Advanced tools
ampersand-input-view - npm Package Compare versions
Comparing version 5.0.0 to 5.0.1
@@ -31,2 +31,7 @@ /*$AMPERSAND_VERSION*/ | ||
| }, | ||
| 'tabindex': { | ||
| type: 'attribute', | ||
| selector: 'input, textarea', | ||
| name: 'tabindex' | ||
| }, | ||
| 'label': [ | ||
@@ -101,3 +106,4 @@ { | ||
| invalidClass: ['string', true, 'input-invalid'], | ||
| validityClassSelector: ['string', true, 'input, textarea'] | ||
| validityClassSelector: ['string', true, 'input, textarea'], | ||
| tabindex: ['number', true, 0] | ||
| }, | ||
@@ -104,0 +110,0 @@ derived: { |
| { | ||
| "name": "ampersand-input-view", | ||
| "description": "A view module for intelligently rendering and validating input. Works well with ampersand-form-view.", | ||
| "version": "5.0.0", | ||
| "version": "5.0.1", | ||
| "author": "Henrik Joreteg <henrik@andyet.net>", | ||
@@ -25,12 +25,9 @@ "browserify": { | ||
| "ampersand-view-conventions": "^1.1.5", | ||
| "browserify": "^10.2.4", | ||
| "function-bind": "^1.0.0", | ||
| "jshint": "^2.5.6", | ||
| "phantomjs": "^1.9.7-15", | ||
| "phantomjs": "^1.9.19", | ||
| "precommit-hook": "^3.0.0", | ||
| "run-browser": "^2.0.2", | ||
| "tap-spec": "^4.0.2", | ||
| "tape": "^2.14.0", | ||
| "tape-run": "^1.0.0", | ||
| "tape-suite": "^0.2.1" | ||
| "tape": "^4.4.0", | ||
| "tape-suite": "^0.2.1", | ||
| "zuul": "^3.9.0" | ||
| }, | ||
@@ -50,4 +47,5 @@ "homepage": "https://github.com/ampersandjs/ampersand-input-view", | ||
| "scripts": { | ||
| "start": "run-browser test/index.js", | ||
| "test": "browserify test/index.js | tape-run | tap-spec", | ||
| "start": "zuul --local -- test/index.js", | ||
| "test": "zuul --phantom -- test/index.js", | ||
| "test-ci": "zuul -- test/index.js", | ||
| "preversion": "git checkout master && git pull && npm ls", | ||
@@ -54,0 +52,0 @@ "publish-patch": "npm run preversion && npm version patch && git push origin master --tags && npm publish", |
| # ampersand-input-view | ||
| Lead Maintainer: [Christopher Dieringer (@cdaringe)](https://github.com/cdaringe) | ||
@@ -9,3 +8,2 @@ | ||
| It does the following: | ||
| - Automatically shows/hides error messages based on tests | ||
@@ -18,3 +16,2 @@ - Will not show error messages pre-submit, or if it's never had a valid value. This lets people tab-through a form without triggering a bunch of error messages. | ||
| ## install | ||
@@ -47,9 +44,6 @@ | ||
| }); | ||
| ``` | ||
| ## API Reference | ||
| ### extend `AmpersandInputView.extend({ })` | ||
| Since this view is based on [ampersand-state](http://ampersandjs.com/docs#ampersand-state), it can be extended in the same way. | ||
@@ -59,5 +53,4 @@ | ||
| **Note:** If you want to add **`initialize()`**, remember that it’s overriding InputView’s own `initialize()`. Thus, you should call the parent's `initialize()` manually: | ||
| **Note:** If you want to add **`initialize()`**, remember that it's overriding InputView's own `initialize()`. Thus, you should call the parent's `initialize()` manually: | ||
| ```javascript | ||
@@ -76,10 +69,6 @@ var AmpersandInputView = require('ampersand-input-view'); | ||
| ### constructor/initialize `new AmpersandInputView([opts])` | ||
| When creating an instance of an `InputView`, you can pass in the initial values of the **attributes** which will be [`set`](http://ampersandjs.com/docs#ampersand-state-set) on the state. Unless [`extraProperties`](#amperand-state-extra-properties) is set to `allow`, you will need to have defined these attributes in `props` or `session`. | ||
| #### opts | ||
| - `tests` (default: `[]`): test function to run on input (more below). | ||
@@ -90,3 +79,3 @@ - `name`: the input's `name` attribute's value. Used when reporting to parent form. | ||
| - `template`: a custom template to use (see 'template' section, below, for more). | ||
| - `placeholder`: (optional) “placeholder text” for the input. | ||
| - `placeholder`: (optional) "placeholder text" for the input. | ||
| - `el`: (optional) element if you want to render it into a specific exisiting element pass it on initialization. | ||
@@ -100,16 +89,13 @@ - `required` (default: `true`): whether this field is required or not. | ||
| - `beforeSubmit`: function called by [ampersand-form-view](https://github.com/AmpersandJS/ampersand-form-view) during submit. By default this runs the tests and displays error messages. | ||
| - `tabindex` (default: `0`): Specify the tab index number for your field (integer). | ||
| ### render `inputView.render()` | ||
| Renders the inputView. This is called automatically if your inputView is used within a parent [ampersand-form-view](https://github.com/ampersandjs/ampersand-form-view). | ||
| ### template `inputView.template` | ||
| This can either be customized by using `extend`, or by passing in a `template` on instantiation. | ||
| It can be a function that returns a string of HTML or DOM element—or just an plain old HTML string. | ||
| It can be a function that returns a string of HTML or DOM element--or just an plain old HTML string. | ||
| But whatever it is, the resulting HTML should contain the following hooks: | ||
| - an `<input>` or `<textarea>` element | ||
@@ -133,3 +119,3 @@ - an element with a `data-hook="label"` attribute | ||
| '</label>' | ||
| ].join(''); | ||
| ].join('') | ||
| }); | ||
@@ -151,3 +137,2 @@ | ||
| ### value `new AmpersandInputView({ value: 'something' })` | ||
| If you pass `value` on instantiation, it will be set on the `<input>` element (and also tracked as `startingValue`). | ||
@@ -173,8 +158,6 @@ | ||
| ### Customizing the view | ||
| #### Custom calculated output `value` | ||
| If you need to decouple what the user puts into the form from the resulting value, you can do that by overriding the `value` derived property. | ||
| For example, consider a validated address input. You may have a single text input for address, which you can attempt to match to a real known address with an API call. So, you have a single `<input>`, but you want the inputView’s `value` to be an object returned from that API. | ||
| For example, consider a validated address input. You may have a single text input for address, which you can attempt to match to a real known address with an API call. So, you have a single `<input>`, but you want the inputView's `value` to be an object returned from that API. | ||
@@ -245,2 +228,3 @@ Do it by overriding the `value` derived property as follows: | ||
| And this would set it on the root label and the message element | ||
| ```javascript: | ||
@@ -253,3 +237,2 @@ var CustomInput = InputView.extend({ | ||
| ### tests `InputView.extend({ tests: [test functions] });` or `new InputView({ tests: [] })` | ||
| You can provide tests inside `extend`, or passed them in for `initialize`. | ||
@@ -277,7 +260,5 @@ | ||
| Remember that the inputView will only show one error per field at a time. This is to minimize annoyance. We don't want to show “this field is required” and every other error if they just left it empty. We just show the first one that fails, then when they go to correct it, it will update to reflect the next failed test (if any). | ||
| Remember that the inputView will only show one error per field at a time. This is to minimize annoyance. We don't want to show "this field is required" and every other error if they just left it empty. We just show the first one that fails, then when they go to correct it, it will update to reflect the next failed test (if any). | ||
| ### setValue `inputView.setValue([value], [skipValidation|bool])` | ||
| Setter for value that will fire all appropriate handlers/tests. Can also be done by user input or setting value of `input` manually. | ||
@@ -302,30 +283,29 @@ | ||
| }); | ||
| ``` | ||
| ### reset `inputView.reset()` | ||
| Set value to back original value. If you passed a `value` when creating the view it will reset to that, otherwise to `''`. | ||
| ### clear `inputView.clear()` | ||
| Sets value to `''` no matter what previous values were. | ||
| ## gotchas | ||
| - Some browsers do not always fire a `change` event as expected. In these [rare cases](https://github.com/AmpersandJS/ampersand-input-view/issues/2), validation may not occur when expected. Validation *will occur* regardless on form submission, specifically when this field's `beforeSubmit` executes. | ||
| - Some browsers do not always fire a `change` event as expected. In these [rare cases](https://github.com/AmpersandJS/ampersand-input-view/issues/2), validation may not occur when expected. Validation _will occur_ regardless on form submission, specifically when this field's `beforeSubmit` executes. | ||
| ## changelog | ||
| - 5.0.0 | ||
| - Upgrade to &-view 8.x | ||
| - Add `readonly` option | ||
| - dependency and test maintenance | ||
| - Upgrade to &-view 8.x | ||
| - Add `readonly` option | ||
| - dependency and test maintenance | ||
| - 4.0.5 | ||
| - Handle uncaught input value changes beforeSubmit | ||
| - Add view convention tests, and update to pass them | ||
| - Handle uncaught input value changes beforeSubmit | ||
| - Add view convention tests, and update to pass them | ||
| - 4.0.0 | ||
| - Remove `rootElementClass` in favor of a better validityClass selector | ||
| - Listen to `change` instead of `blur` event | ||
| - Reset error message state on `clear()` and `reset()` | ||
| - Allow `beforeSubmit` to be defined on initialization | ||
| - Remove `rootElementClass` in favor of a better validityClass selector | ||
| - Listen to `change` instead of `blur` event | ||
| - Reset error message state on `clear()` and `reset()` | ||
| - Allow `beforeSubmit` to be defined on initialization | ||
| - 3.1.0 - Add [ampersand-version](https://github.com/ampersandjs/ampersand-version) for version tracking. | ||
@@ -337,8 +317,5 @@ - 3.0.0 - Add API reference docs. Add `.clear()`, `.reset()` methods. Make `value` derived property. Fix #21 validity class issue. | ||
| ## credits | ||
| Created by [@HenrikJoreteg](http://twitter.com/henrikjoreteg). | ||
| ## license | ||
| MIT | ||
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Fixed alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.68%
24233
- Dev dependency count
- decreased by-27.27%
8
- Lines of code
- increased by2.51%
245
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Number of medium maintenance alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-6.97%
307
No dependency changes