Gathering detailed insights and metrics for ampersand-multiselect-view
Installations
npm install ampersand-multiselect-viewDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
7.2.1
NPM Version
3.10.10
Score
69.5
Supply Chain
95.3
Quality
72.4
Maintenance
100
Vulnerability
97.9
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
kylefarris
Download Statistics
Total Downloads
11,188
Last Day
5
Last Week
18
Last Month
120
Last Year
977
GitHub Statistics
2 Stars
31 Commits
3 Watching
1 Branches
2 Contributors
Bundle Size
79.29 kB
Minified
23.64 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.0.7
Package Id
ampersand-multiselect-view@0.0.7
Size
11.08 kB
NPM Version
3.10.10
Node Version
7.2.1
Total Downloads
Cumulative downloads
Total Downloads
11,188
Last day
25%
5
Compared to previous day
Last week
-37.9%
18
Compared to previous week
Last month
-30.6%
120
Compared to previous month
Last year
4.9%
977
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
ampersand-multiselect-view
Lead Maintainer: Kyle Farris (@kylefarris)
overview
A view module for intelligently rendering and validating selectbox input. Works well with ampersand-form-view. Based off of ampersand-select-view.
install
npm install ampersand-multiselect-view
Part of the Ampersand.js toolkit for building clientside applications.
API Reference
clear() - [Function] - returns this
Alias to calling setValue(null, true). Unselects all options.
reset() - [Function] - returns this
Sets the selected option and view value to the original option value provided during construction.
setValue([value, skipValidationMessage]) - [Function] - returns this
Sets the selected options to those which match the provided value(s). Updates the view's .value accordingly. MultiSelectView will error if no matching options exist.
constructor - [Function] new MultiSelectView([options])
options
general options
autoRender: [default:false] generally, we leave rendering of this FieldView to its controlling formname: the<select>'snameattribute's value. Used when reporting to parent formparent: parent form referenceoptions: array/collection of options to render into the select box[el]: element if you want to render the view into[template]: a custom template to use (see 'template' section, below, for more)[required]: [default:false] field required[eagerValidate]: [default:false] validate and show messages immediately. Note: field will be validated immediately to provide a true.validvalue, but messages by default are hidden.[value]: initial value(s) (array) for the<select>.valuemust be a members of theoptionsset.
label & validation options
[label]: [default:namevalue] text to annotate your select control[invalidClass]: [default:'select-invalid'] class to apply to root element if invalid[validClass]: [default:'select-valid'] class to apply to root element if valid[requiredMessage]: [default:'Selection required'] message to display if invalid and required
collection option set
If using a collection to produce <select> <option>s, the following may also be specified:
[disabledAttribute]: boolean model attribute to flag disabling of the option node[idAttribute]: model attribute to use as the id for the option node. This will be returned bySelectView.prototype.value[textAttribute]: model attribute to use as the text of the option node in the select box[yieldModel]: [default:true] if options is a collection, yields the full model rather than just itsidAttributeto.value
When the collection changes, the view will try and maintain its currently .value. If the corresponding model is removed, the <select> control will default to the 0th index <option> and update its value accordingly.
custom template
You may override the default template by providing your own template string to the constructor options hash. Technically, all you must provided is a <select> element. However, your template may include the following under a single root element:
- An element with a
data-hook="label"to annotate your select control - An
<select>element to hold youroptionswith themultipleormultiple="multiple"attribute. - An element with a
data-hook="message-container"to contain validation messages - An element with a
data-hook="message-text"nested beneath thedata-hook="message-container"element to show validation messages
Here's the default template for reference:
1<label class="select"> 2 <span data-hook="label"></span> 3 <select multiple="multiple"></select> 4 <span data-hook="message-container" class="message message-below message-error"> 5 <p data-hook="message-text"></p> 6 </span> 7</label>
example
1var FormView = require('ampersand-form-view'); 2var MultiSelectView = require('ampersand-multiselect-view'); 3 4 5module.exports = FormView.extend({ 6 fields: function () { 7 return [ 8 new MultiSelectView({ 9 label: 'Pick some colors!', 10 // actual field name 11 name: 'color', 12 parent: this, 13 // you can pass simple string options 14 options: ['blue', 'orange', 'red'], 15 // you can specify that they have to pick at least one 16 required: true 17 }), 18 new MultiSelectView({ 19 name: 'option', 20 parent: this, 21 // you can also pass array, first is the value, second is used for the label 22 // and an optional third value can used to disable the option 23 options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C', true] ] 24 }), 25 new MultiSelectView({ 26 name: 'model', 27 parent: this, 28 // you can pass in a collection here too 29 options: collection, 30 // and pick some item from the collection as the selected ones 31 value: [collection1.at(2), collection1.at(5)], 32 // here you specify which attribute on the objects in the collection 33 // to use for the value returned. 34 idAttribute: 'id', 35 // you can also specify which model attribute to use as the title 36 textAttribute: 'title', 37 // you can also specify a boolean model attribute to render items as disabled 38 disabledAttribute: 'disabled', 39 // here you can specify if it should return the selected model(s) from the 40 // collection, or just the id attribute(s). defaults `true` 41 yieldModel: false 42 }) 43 ]; 44 } 45}); 46
browser support
changelog
- We're still on the beta version!
credits
Based considerably off of the ampersand-select-view by Christopher Dieringer (@cdaringe).
contributing
Do it. This is still experimental--I can use all the help I can get!
license
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 1/29 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Score
3
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More