Skip to content

Commit 47fbea1

Browse files
isneezyisneezy
authored
update documentation (#29)
* Update Remote Source Github * add rotten tomatoes example #25 * Update github example #25 * smal improvements * Update CHANGELOG.md * document every component pops * explicity show selectize dependency * add slots docs template * update docs
1 parent 5e23945 commit 47fbea1

File tree

14 files changed

+331
-24
lines changed

14 files changed

+331
-24
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1111
- prettier
1212
### Changed
1313
- Updated dependencies (vue-cli v4)
14+
- Updated documentation and examples
1415

1516
## [0.5.0]
1617
### Added

‎docs/.vuepress/components/ItemSlot.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<VSelectize v-model="selected" :options="options" key-by="username" label="username" :keys="['username', 'host']">
3+
<template v-slot:item="{item}">{{ item.username }}@{{ item.host }}</template>
4+
</VSelectize>
5+
</template>
6+
<script>
7+
import VSelectize from '@isneezy/vue-selectize'
8+
export default {
9+
name: 'ItemSlot',
10+
components: { VSelectize },
11+
data: () => ({
12+
options: [{username: 'selectizejs', host: 'github.com'}],
13+
selected: {username: 'selectizejs', host: 'github.com'}
14+
})
15+
}
16+
</script>

‎docs/.vuepress/components/OptionSlot.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<VSelectize v-model="selected" :options="options" key-by="username" label="username" :keys="['username', 'host']">
3+
<template v-slot:option="{option}">{{ option.username }}@{{ option.host }}</template>
4+
<template v-slot:item="{item}">{{ item.username }}@{{ item.host }}</template>
5+
</VSelectize>
6+
</template>
7+
<script>
8+
import VSelectize from '@isneezy/vue-selectize'
9+
export default {
10+
name: 'OptionSlot',
11+
components: { VSelectize },
12+
data: () => ({
13+
options: [{username: 'selectizejs', host: 'github.com'}],
14+
selected: {username: 'selectizejs', host: 'github.com'}
15+
})
16+
}
17+
</script>

‎docs/.vuepress/components/RemoteGitHub.vue‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
<template>
22
<div>
33
<div>Tags:</div>
4-
<v-selectize label="name" :searchFn="search" :create-item="false" :options="options" v-model="selected" disableSearch>
5-
<template slot="item" slot-scope="{item}">{{item.username}}</template>
4+
<v-selectize key-by="url" label="name" :searchFn="search" :create-item="false" :options="options" v-model="selected" disableSearch>
5+
<template v-slot:option="{ option }">
6+
<div class="text-base">
7+
<i class="fa fa-code-fork"></i>
8+
<b class="ml-1">{{ option.name }}</b>
9+
<small class="ml-1">by {{ option.owner }}</small>
10+
</div>
11+
<div class="text-gray-500">{{ option.description }}</div>
12+
<div class="text-xs">
13+
<span>{{ option.language }}</span>
14+
<span class="ml-2"><b>{{ option.watchers }}</b> watchers</span>
15+
<span class="ml-2"><b>{{ option.forks }}</b> forks</span>
16+
</div>
17+
</template>
618
</v-selectize>
7-
<div>Current Value: {{ selected }}</div>
19+
<div>Current Value: {{ url }}</div>
820
</div>
921
</template>
1022

@@ -14,20 +26,35 @@ import debounce from 'lodash.debounce'
1426
export default {
1527
name: 'remote-git-hub',
1628
data: () => ({
17-
options: [],
29+
options: [
30+
{
31+
"name": "vue-selectize",
32+
"owner": "isneezy",
33+
"description": "Vanila Vue.js component that mimics Selectize behaviour (no need jquery dependency)",
34+
"language": "Vue",
35+
"watchers": 30,
36+
"forks": 5,
37+
"url": "https://github.com/isneezy/vue-selectize"
38+
}
39+
],
1840
selected: null
1941
}),
42+
computed: {
43+
url() {
44+
return this.selected ? this.selected.url : null
45+
}
46+
},
2047
methods: {
2148
search: debounce (function (text, done) {
2249
if (text.length < 3) done()
2350
fetch(`https://api.github.com/legacy/repos/search/${text}`).then(response => {
2451
return response.json()
2552
}).then(data => {
26-
this.options = data['repositories'] || []
53+
this.options = data.repositories || []
2754
done()
28-
})
29-
}, 300)
55+
}).catch(done)
56+
}, 500)
3057
},
3158
components: {VSelectize}
3259
}
33-
</script>
60+
</script>

‎docs/.vuepress/components/RemoteRottenTomatoes.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div>
3+
<div class="my-2">Movie:</div>
4+
<VSelectize :options="movies" :searchFn="search" v-model="selected" disableSearch key-by="id" label="title" :create-item="false">
5+
<template v-slot:option="{ option }">
6+
<div class="flex overflow-hidden">
7+
<img class="w-16" style="background: rgba(0,0,0,0.04);" :src="option.posters.thumbnail" alt="">
8+
<div class="flex-1 pl-2">
9+
<div class="truncate text-base font-bold">{{ option.title }}</div>
10+
<div class="mt-2 flex flex-wrap">
11+
<span class="px-1 rounded text-xs text-white bg-gray-500">
12+
<i class="fa fa-exclamation-circle mr-1"></i>
13+
{{ option.mpaa_rating }}
14+
</span>
15+
<span class="ml-1 px-1 rounded text-xs text-white bg-green-500">
16+
<i class="fa fa-clock-o mr-1"></i>
17+
{{ option.runtime }}
18+
</span>
19+
</div>
20+
<div class="truncate mt-1">{{ option.synopsis || 'No synopsis available at this time.' }}</div>
21+
<div class="truncate text-sm text-gray-500">
22+
<template v-if="option.abridged_cast.length">
23+
<span>Starring </span>
24+
<span class="text-gray-700">
25+
{{ option.abridged_cast.map(act => act.name).join(', ') }}
26+
</span>
27+
</template>
28+
<template v-else>Actors unavailable</template>
29+
</div>
30+
</div>
31+
</div>
32+
</template>
33+
</VSelectize>
34+
<div class="py-2">Current vaue: "{{ selected ? selected.title : null }}"</div>
35+
</div>
36+
</template>
37+
38+
<script>
39+
import VSelectize from '@isneezy/vue-selectize'
40+
import debounce from 'lodash.debounce'
41+
export default {
42+
name: 'RemoteRottenTomatoes',
43+
components: { VSelectize },
44+
data: () => ({
45+
movies: [],
46+
selected: null
47+
}),
48+
methods: {
49+
search: debounce (function (text, done) {
50+
if (text.length < 3) done()
51+
fetch(`https://www.rottentomatoes.com/api/private/v1.0/movies.json?q=${text}&page_limit=10`).then(response => {
52+
return response.json()
53+
}).then(data => {
54+
this.movies = data.movies || []
55+
done()
56+
}).catch(done)
57+
}, 300)
58+
}
59+
}
60+
</script>
61+
62+
<style scoped>
63+
64+
</style>

‎docs/.vuepress/components/Tip.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div class="p-4 border-l-4 border-green-500 bg-gray-200">
3+
<p class="mb-2 font-bold"><slot name="title">TIP</slot></p>
4+
<p>
5+
<slot></slot>
6+
</p>
7+
</div>
8+
</template>
9+
<script>
10+
export default {
11+
name: 'Tip'
12+
}
13+
</script>

‎docs/.vuepress/config.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ module.exports = {
55
// base: '/vue-selectize/',
66
ga: 'UA-105706124-2',
77
head: [
8-
['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/selectize.default.css' }]
8+
['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/selectize.default.css' }],
9+
['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' }],
10+
['link', { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' }]
911
],
1012
themeConfig: {
1113
repo: 'isneezy/vue-selectize',
@@ -23,8 +25,15 @@ module.exports = {
2325
collapsable: false,
2426
children: [
2527
'/guide/',
26-
'/guide/examples/',
27-
'/guide/api/',
28+
'/guide/examples/'
29+
]
30+
},
31+
{
32+
title: 'API',
33+
collapsable: false,
34+
children: [
35+
'/api/props',
36+
'/api/slots'
2837
]
2938
}
3039
]

‎docs/README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ actionLink: /guide/
1212
Installation
1313

1414
```bash
15-
npm install @isneezy/vue-selectize --save
16-
# OR
15+
# With npm package manager
16+
npm install selectize @isneezy/vue-selectize --save
17+
# OR with yarn package manager
1718
yarn add selectize @isneezy/vue-selectize
18-
```
19+
```

‎docs/api/props.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: Props
3+
---
4+
5+
## multiple
6+
7+
Equivalent to the multiple attribute on a `<select>` input.
8+
9+
```js
10+
multiple: { default: false, type: Boolean },
11+
```
12+
13+
## placeholder
14+
15+
Equivalent to the placeholder attribute on a `<input>` input.
16+
17+
```js
18+
placeholder: { default: '', type: String },
19+
```
20+
21+
## options
22+
23+
An array of strings or objects to be used as dropdown choices.
24+
If you are using an array of objects, vue-selectize will look for a `id` and `label` key
25+
Ex. `[{id: 'MZ', label: 'Mozambique'}]`
26+
A custom label key can be set with the [label](#label) prop.
27+
28+
```js
29+
options: { default: () => [], type: Array },
30+
```
31+
32+
## keyBy
33+
34+
Selectable option unique identifier key, each option must have a unique identifier.
35+
Use this prop to change the default behavior
36+
37+
```js
38+
keyBy: { default: 'id', type: String },
39+
```
40+
41+
## label
42+
43+
Tells vue-selectize what key to use when generating option labels when each option
44+
is an object.
45+
46+
```js
47+
label: { default: 'label', type: String },
48+
```
49+
50+
## keys
51+
52+
vue-selectize internaly uses fuse.js to perform its search capabilities, this props tells
53+
witch keys to use for searching.
54+
55+
```js
56+
keys: { default: () => ['label'] },
57+
```
58+
59+
## value
60+
61+
Contains the currently selected value. Very similar to a value attribute on an `<input>`. You can listen for changes
62+
using `input` event using v-on
63+
64+
```js
65+
value: { default: null, type: [Array, Object, String, Number] },
66+
```
67+
68+
## limit
69+
70+
The limits the number of options that are visible in the dropdown
71+
72+
```js
73+
limit: { default: 0, type: [Number] },
74+
```
75+
76+
## disabled
77+
78+
Disable the entire component.
79+
80+
```js
81+
disabled: { default: false, type: Boolean },
82+
```
83+
84+
## disableSearch
85+
86+
Disable the built in search engine
87+
88+
```js
89+
disableSearch: { default: false, type: Boolean },
90+
```
91+
92+
## createItem
93+
94+
User defined function for adding Options. Set to false to disable adding option
95+
96+
```js
97+
createItem: {
98+
default: function(text) {
99+
return Promise.resolve(text)
100+
},
101+
type: [Function, Boolean]
102+
},
103+
```
104+
105+
## searchFn
106+
107+
User defined function for searching
108+
109+
```js
110+
searchFn: { default: false, type: [Boolean, Function] },
111+
```
112+
113+
## theme
114+
115+
Selectize.js theme
116+
117+
```js
118+
theme: { default: '', type: String }
119+
```
120+
121+

‎docs/api/slots.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Slots
3+
---
4+
5+
<tip>
6+
<tempalet slot="title">WARN</tempalet>
7+
This content is under revision and it is incomplete.
8+
</tip>
9+
10+
<tip class="mt-2">
11+
VueSelectize leverages scoped slots to allow for total customization of the presentation layer.
12+
Slots can be used to change the look and feel of the UI, or to simply swap out text.
13+
</tip>
14+
15+
## item
16+
17+
The text displayed to represent each selected item.
18+
- `item {Object|String}` - A selected option
19+
20+
<ItemSlot />
21+
22+
<<< @/docs/.vuepress/components/ItemSlot.vue
23+
24+
## option
25+
26+
The option within the dropdown.
27+
- `option {Object}` - The currently isolated option from `filteredOptions`
28+
29+
<OptionSlot />
30+
31+
<<< @/docs/.vuepress/components/OptionSlot.vue
32+
33+
34+
## create-item
35+
## spinner

0 commit comments

Comments
 (0)