Gathering detailed insights and metrics for @cone2875/vue-formulate-select
Gathering detailed insights and metrics for @cone2875/vue-formulate-select
Gathering detailed insights and metrics for @cone2875/vue-formulate-select
Gathering detailed insights and metrics for @cone2875/vue-formulate-select
@braid/vue-formulate-i18n
Internationalization (i18n) support for vue-formulate
@braid/vue-formulate
The easiest way to build forms in Vue.
vue-formulate-datepicker
Wrapper for using vuejs-datepicker in vue-formulate
vue-select
Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
npm install @cone2875/vue-formulate-select
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
8 Stars
11 Commits
5 Forks
1 Watching
1 Branches
3 Contributors
Updated on 31 Mar 2023
JavaScript (52.9%)
Vue (47.1%)
Cumulative downloads
Total Downloads
Last day
53.4%
158
Compared to previous day
Last week
16.3%
634
Compared to previous week
Last month
20.2%
2,230
Compared to previous month
Last year
5.6%
17,447
Compared to previous year
Vue Formulate Select is a Vue Formulate plugin that provides the
Vue Select UI into a FormulateInput
.
1npm i vue-select @cone2875/vue-formulate-select
As with any Vue Formulate plugin:
1import Vue from 'vue' 2import VueFormulate from '@braid/vue-formulate' 3 4import FormulateVSelectPlugin from '@cone2875/vue-formulate-select' 5 6// !important 7// Import the vue-select css 8import 'vue-select/dist/vue-select.css'; 9 10Vue.use(VueFormulate, { 11 plugins: [ FormulateVSelectPlugin ] 12})
Use vue-select
as the input type
.
1<FormulateInput 2 type="vue-select" 3 :options="[ 4 {value: 'MX', label: 'Mexico'}, 5 {value: 'TH', label: 'Thailand'}, 6 {value: 'BI', label: 'Burundi'}, 7 ]" 8 />
It works as any other FormulateInput
.
Vue Formulate and Vue Select have different approaches when parsing arrays of
objects. Vue Formulate requires these objects to include a label
and
value
property, whereas Vue Select has a much more flexible approach
with the reduce
and label
props. We had to take the more restrive
approach of Vue Formulate. The vue-select reduce
and label
props are
currently hard-coded as:
1<v-select 2 :reduce="x => x.value" 3 label="label" 4 />
As such, using the taggable
prop wil always require you to define
createOption
too.
Moreover, Vue Formulate normalizes the value
into a string value. Thus, using
objects as values is impossible. Secondly, using numbers as the value can
result in the following problem:
1<!-- template --> 2<FormulateInput 3 type="vue-select" 4 v-model="val" 5 :options="options" 6 />
1// script 2export default { 3 data(){ 4 return { 5 val: 3, 6 options: [ 7 {value: '1', label: 'Mexico'}, 8 {value: '2', label: 'Thailand'}, 9 {value: '3', label: 'Burundi'}, 10 ] 11 } 12 } 13}
Will display an initial value of "3" in the input, not "Burundi". It is thus
necessary to turn val
into "3"
before the FormulateInput
is created and
turn it back into a number before submission, when necessary.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 2/9 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
80 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-25
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