Skip to content

Commit

Permalink
Merge pull request #10 from monterail/dev
Browse files Browse the repository at this point in the history 
Further improvements and docs updates
  • Loading branch information
Damian Dulisz committed May 25, 2016
2 parents b081670 + 4cfd451 commit 62f7892
Show file tree
Hide file tree
Showing 6 changed files with 232 additions and 45 deletions.
13 changes: 12 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,18 @@
<html>
<head>
<meta charset="utf-8">
<title>vue-multiselect</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Vue-Multiselect | A Vue.js library</title>
<link rel="icon" href="static/vue-logo.png" type="image/x-icon">
<meta name="description" content="Probably the most complete selecting solution for Vue.js, without jQuery.">
<meta property="og:title" content="Vue-Multiselect | A Vue.js library.">
<meta property="og:site_name" content="Vue-Multiselect | A Vue.js library.">
<meta property="og:url" content="http://monterail.github.io/vue-multiselect">
<meta property="og:description" content="Probably the most complete selecting solution for Vue.js, without jQuery.">
<meta property="og:image" content="http://monterail.github.io/vue-multiselect/static/vue-logo.png">
<meta property="twitter:image" content="http://monterail.github.io/vue-multiselect/static/vue-logo.png">
<meta property="twitter:title" content="Vue-Multiselect | A Vue.js library.">
<meta property="twitter:description" content="Probably the most complete selecting solution for Vue.js, without jQuery.">
</head>
<body>
<app></app>
Expand Down
215 changes: 185 additions & 30 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ div
:searchable="searchable",
:placeholder="placeholder",
:on-change="afterChange",
:show-labels="true"
select-label="Enter to select",
:show-labels="true",
:limit="3"
select-label="Enter to select"
)
.grid__row
.grid__column.grid__unit--md-6.list
Expand Down Expand Up @@ -95,44 +95,86 @@ div
section.docs
h1.typo__h1 Examples
hr.typo__hr
h2.typo__h2 Single select dropdown
h2.typo__h2 Single select dropdown (primitive value)
p.typo__p Disabled all highlight label text.
.grid__row
.grid__column.grid__unit--md-4
.grid__column.grid__unit--md-5
label.typo__label Single select / dropdown
multiselect(
:options="options",
:selected.sync="valuePrimitive",
:multiple="false",
:searchable="false",
:close-on-select="false",
:show-labels="false"
placeholder="Select one"
label="name"
key="name"
)
pre.language-json
code.
{{ valuePrimitive | json }}

.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
multiselect(
:options="options",
:selected.sync="valuePrimitive",
:multiple="false",
:searchable="false",
:close-on-select="false",
:show-labels="false"
placeholder="Select one"
label="name"
key="name"
)

h2.typo__h2 Single select dropdown (object)
p.typo__p Can’t become empty. Showing custom deselect label.
p.typo__p The selected value is referencing the same object as the next example, to show that dynamic preselection works.
.grid__row
.grid__column.grid__unit--md-5
label.typo__label Single select / dropdown
multiselect(
:options="source",
:selected.sync="value",
:multiple="false",
:searchable="false",
placeholder="Select one",
label="name",
:close-on-select="false",
:allow-empty="false",
deselect-label="Can’t remove this value"
key="name"
label="name"
placeholder="Select one"
)
pre.language-json
code.
{{ value | json }}

.grid__column.grid__unit--md-8
.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
multiselect(
:options="source",
:selected="value",
:selected.sync="value",
:multiple="false",
:searchable="false",
placeholder="Select one",
label="name",
:close-on-select="false",
:allow-empty="false",
deselect-label="Can’t remove this value"
key="name"
label="name"
placeholder="Select one"
)

hr.typo__hr
h2.typo__h2 Single select with search
p.typo__p The selected value is referencing the same object as the previous example, to show that dynamic preselection works.
.grid__row
.grid__column.grid__unit--md-4
.grid__column.grid__unit--md-5
label.typo__label Simple select / dropdown
multiselect(
:options="source",
Expand All @@ -141,68 +183,73 @@ div
:searchable="true",
placeholder="Select one",
label="name",
:close-on-select="true",
:clear-on-select="false"
key="name"
)
pre.language-json
code.
{{ value | json }}

.grid__column.grid__unit--md-8
.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
multiselect(
:options="source",
:selected="value",
:selected.sync="value",
:multiple="false",
:searchable="false",
:searchable="true",
placeholder="Select one",
label="name",
:close-on-select="false",
:clear-on-select="false"
key="name"
)

hr.typo__hr
h2.typo__h2 Multiple select with search
p.typo__p Limit visible results to 2.
.grid__row
.grid__column.grid__unit--md-4
.grid__column.grid__unit--md-5
label.typo__label Simple select / dropdown
multiselect(
:options="source",
:selected.sync="multiValue",
:multiple="true",
:searchable="true",
placeholder="Pick some",
:close-on-select="true",
:clear-on-select="false",
:limit="2"
placeholder="Pick some"
label="name",
:close-on-select="true"
key="name"
)
pre.language-json
code.
{{ multiValue | json }}

.grid__column.grid__unit--md-8
.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
multiselect(
:options="source",
:selected="multiValue",
:multiple="false",
:searchable="false",
placeholder="Pick some",
:selected.sync="multiValue",
:multiple="true",
:searchable="true",
:close-on-select="true",
:clear-on-select="false",
placeholder="Pick some"
label="name",
:close-on-select="false",
key="name"
)

hr.typo__hr
h2.typo__h2 Asynchronous dropdown
p.typo__p
| Changing the search query calls the <kbd><code>:on-search-change=""</code></kbd> callback function,
| passing the search query as param. It also sets the <kbd><code>loading = true</code></kbd>.
p.typo__p
| To disable <kbd><code>loading</code></kbd> options have to be updated.
.grid__row
.grid__column.grid__unit--md-4
.grid__column.grid__unit--md-5
label.typo__label Async multiselect
multiselect(
:options="countries",
Expand All @@ -211,6 +258,7 @@ div
:searchable="searchable",
placeholder="Type to search",
:on-search-change="asyncFind",
:clear-on-select="false",
label="name"
key="code"
)
Expand All @@ -220,7 +268,7 @@ div
code.
{{ selectedCountries | json }}

.grid__column.grid__unit--md-8
.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
Expand All @@ -231,13 +279,89 @@ div
:searchable="searchable",
placeholder="Type to search",
:on-search-change="asyncFind",
:clear-on-select="false",
label="name"
key="code"
)
span(slot="noResult").
Oops! No elements found. Consider changing the search query.

hr.typo__hr
h2.typo__h2 on-change props
p.typo__p
| If set triggers the passed callback function after value changes, passing the new value as param.
p.typo__p
| For <strong>Vuex</strong> integration simply remove
<kbd><code>:reset-after="true"</code></kbd>
| prop.
p.typo__p
| May also act as dispatcher for different actions, like in this example.
.grid__row
.grid__column.grid__unit--md-5
label.typo__label Open console to see logs.
multiselect(
:options="actions",
:selected="action",
:multiple="false",
:searchable="false",
placeholder="Pick action",
:reset-after="true",
:on-change="dispatchAction"
)

.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
multiselect(
:options="actions",
:selected="action",
:multiple="false",
:searchable="false",
placeholder="Pick action",
:reset-after="true",
:on-change="dispatchAction"
)

hr.typo__hr

h2.typo__h2 Custom configuration
p.typo__p Can’t remove the last value.
p.typo__p Hides already selected options.
p.typo__p Shows error when touched, but nothing is selected.
.grid__row
.grid__column.grid__unit--md-5
div(:class="{ 'invalid': isInvalid }")
label.typo__label Must have at least one value
multiselect(
:options="options",
:selected.sync="exampleValue6",
:multiple="true",
:searchable="true",
:allow-empty="false",
:hide-selected="true",
:touched.sync="isTouched",
:max-height="400"
placeholder="Pick at least one"
)

.grid__column.grid__unit--md-7
label.typo__label Code sample
pre.language-jade
code.
multiselect(
:options="options",
:selected.sync="exampleValue6",
:multiple="true",
:searchable="true",
:allow-empty="false",
:hide-selected="true",
:touched.sync="isTouched",
:max-height="400"
placeholder="Pick at least one"
)

hr.typo__hr

section.docs
h1.typo__h1 Config
Expand Down Expand Up @@ -461,20 +585,28 @@ export default {
selected: ['Select option'],
source: [{ name: 'Vue.js' }, { name: 'Javascript' }, { name: 'Monterail' }, { name: 'Open Source' }],
value: { name: 'Vue.js' },
valuePrimitive: 'showLabels',
multiValue: [{ name: 'Vue.js' }],
multiple: true,
searchable: true,
placeholder: 'Select props',
countries: [],
selectedCountries: [],
first: 230,
second: 197
second: 197,
actions: ['alert', 'console.log', 'scrollTop'],
action: null,
isTouched: false,
exampleValue6: []
}
},
computed: {
gradient () {
// return 'linear-gradient(to left bottom, #C1C6FF 0%, #E7FFEB 100%) fixed'
return `linear-gradient(to left bottom, hsl(${this.first + SL}) 0%, hsl(${this.second + SL}) 100%)`
},
isInvalid () {
return this.isTouched && this.exampleValue6.length === 0
}
},
methods: {
Expand All @@ -491,6 +623,19 @@ export default {
},
afterChange (selectValue) {
this.selected = selectValue
},
dispatchAction (actionName) {
switch (actionName) {
case 'alert':
window.alert('You just dispatched "alert" action!')
break
case 'console.log':
console.log('You just dispatched "console.log" action!')
break
case 'scrollTop':
window.scrollTo(0, 0)
break
}
}
}
}
Expand All @@ -503,6 +648,16 @@ export default {
$multiselect-height: 140px;
$multiselect-background: #000;
.invalid {
.typo__label {
color: $error-color;
}
.multiselect__tags {
border-color: $error-color !important;
}
}
html {
height: 100%;
}
Expand Down
Loading

0 comments on commit 62f7892

Please sign in to comment.