Skip to content
This repository was archived by the owner on Mar 17, 2021. It is now read-only.

Commit 5532928

Browse files
romanslonovromanslonov
committed
Added chip, select, select-option components
1 parent 7e66879 commit 5532928

File tree

14 files changed

+887
-5
lines changed

14 files changed

+887
-5
lines changed

‎docs/.vuepress/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ module.exports = {
3232
'components/progress',
3333
'components/radio',
3434
'components/radio-group',
35+
'components/select',
3536
'components/spinner',
3637
'components/stepper',
3738
'components/tabs',

‎docs/components/select.md‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
# Select <badge text="development" type="warn" />
2+
The custom select and it's states.
3+
4+
## Example
5+
<div class="p-3 border rounded-2 my-3">
6+
<v-select
7+
name="single-select"
8+
v-model="select1"
9+
label="Select"
10+
placeholder="Select option"
11+
:options="options"
12+
/>
13+
<div class="mt-3">Selected option: {{ select1 }}</div>
14+
</div>
15+
16+
```html
17+
<!--single select-->
18+
<v-select
19+
name="single-select"
20+
v-model="select1"
21+
label="Select"
22+
placeholder="Select option"
23+
:options="options"
24+
/>
25+
```
26+
27+
<div class="p-3 border rounded-2 my-3">
28+
<v-select
29+
name="multiple-select"
30+
v-model="select2"
31+
multiple
32+
label="Multiple select"
33+
placeholder="Select options"
34+
:options="options"
35+
/>
36+
<div class="mt-3">Selected option: {{ select2 }}</div>
37+
</div>
38+
39+
```html
40+
<!--multiple select-->
41+
<v-select
42+
name="multiple-select"
43+
v-model="select2"
44+
multiple
45+
label="Multiple select"
46+
placeholder="Select options"
47+
:options="options"
48+
/>
49+
```
50+
51+
<div class="p-3 border rounded-2 my-3">
52+
<v-select
53+
name="filterable-select"
54+
v-model="select3"
55+
label="Filterable select"
56+
placeholder="Select option"
57+
filterable
58+
:options="options"
59+
/>
60+
<div class="mt-3">Selected option: {{ select3 }}</div>
61+
</div>
62+
63+
```html
64+
<!--filterable select-->
65+
<v-select
66+
name="filterable-select"
67+
v-model="select3"
68+
label="Filterable select"
69+
placeholder="Select option"
70+
filterable
71+
:options="options"
72+
/>
73+
```
74+
75+
<div class="p-3 border rounded-2 my-3">
76+
<v-select
77+
name="clearable-select"
78+
v-model="select4"
79+
label="Filterable select"
80+
placeholder="Select option"
81+
clearable
82+
:options="options"
83+
/>
84+
<div class="mt-3">Selected option: {{ select4 }}</div>
85+
</div>
86+
87+
```html
88+
<!--clearable select-->
89+
<v-select
90+
name="clearable-select"
91+
v-model="select4"
92+
label="Filterable select"
93+
placeholder="Select option"
94+
clearable
95+
multiple
96+
:options="options"
97+
/>
98+
```
99+
100+
<div class="p-3 border rounded-2 my-3">
101+
<v-select
102+
name="custom-option-select"
103+
v-model="select5"
104+
label="Custom option select"
105+
placeholder="Select option"
106+
:options="options"
107+
>
108+
<template v-slot:option="props">
109+
<div class="flex flex-column">
110+
<div class="text-bold">{{ props.option.label }}</div>
111+
<div class="text-emphasized f5">id: {{ props.option.id }} value: {{ props.option.id }}</div>
112+
</div>
113+
</template>
114+
</v-select>
115+
<div class="mt-3">Selected option: {{ select4 }}</div>
116+
</div>
117+
118+
```html
119+
<!--custom option template-->
120+
<v-select
121+
name="custom-option-select"
122+
v-model="select5"
123+
label="Custom option select"
124+
placeholder="Select option"
125+
:options="options"
126+
>
127+
<div class="" slot-scope="props" slot="option">
128+
<div class="text-bold">{{ props.option.label }}</div>
129+
<div class="text-emphasized f5">id: {{ props.option.id }} value: {{ props.option.id }}</div>
130+
</div>
131+
</v-select>
132+
```
133+
134+
<script>
135+
export default {
136+
data() {
137+
return {
138+
select1: {},
139+
select2: [],
140+
select3: {},
141+
select4: {},
142+
select5: {},
143+
options: [
144+
{ id: 1, value: 'value1', label: 'Option 1' },
145+
{ id: 2, value: 'value2', label: 'Option 2' },
146+
{ id: 3, value: 'value3', label: 'Option 3', disabled: true },
147+
{ id: 4, value: 'value4', label: 'Option 4' },
148+
{ id: 5, value: 'value5', label: 'Option 5' },
149+
{ id: 6, value: 'value6', label: 'Option 6' },
150+
{ id: 7, value: 'value7', label: 'Option 7' },
151+
{ id: 8, value: 'value8', label: 'Option 8' },
152+
{ id: 9, value: 'value9', label: 'Option 9' },
153+
{ id: 10, value: 'value10', label: 'Option 10' },
154+
{ id: 11, value: 'value11', label: 'Option 11' },
155+
{ id: 12, value: 'value12', label: 'Option 12' },
156+
{ id: 13, value: 'value13', label: 'Option 13' },
157+
{ id: 14, value: 'value14', label: 'Option 14' },
158+
{ id: 15, value: 'value15', label: 'Option 15' },
159+
{ id: 16, value: 'value16', label: 'Option 16' },
160+
{ id: 17, value: 'value17', label: 'Option 17' },
161+
{ id: 18, value: 'value18', label: 'Option 18' },
162+
{ id: 19, value: 'value19', label: 'Option 19' },
163+
],
164+
};
165+
},
166+
};
167+
</script>
168+
169+
## Props
170+
Name | Type | Description | Default | Required
171+
---------- | ----------------- | ----------------- | ------- | --------
172+
id | [String, Number] | Unique identifier | None | false
173+
name | String | Select name | None | false
174+
label | String | Select label | 'Label' | false
175+
tabindex | [String, Number] | Select tabindex | None | false
176+
value, v-model | [Array, Object] | The model that the select value syncs to. If you are not using `v-model`, you should listen for the `input` event and update `value`. | None | true
177+
placeholder| String | Select placeholder | 'Placeholder' | false
178+
multiple | Boolean | Allows to select multiple options | false | false
179+
filterable | Boolean | Allows to filter options | false | false
180+
clearable | Boolean | Allows to clear selected option | false | false
181+
loading | Boolean | Indicates loading state | false | false
182+
options | Array | List of options | [] | true
183+
keys | Object | Allows for redefining each option object's keys | {label: 'label',value: 'value',image: 'image',disabled: 'disabled'} | false
184+
185+
## Events
186+
Name | Description
187+
---------- | ----------------------------------------------------------------------------------
188+
@input | Emitted when the select value is changed. The handler is called with the new value
189+
@change | Emitted when the select value changes
190+
@select | Emitted when the select value was selected. The handler is called with the selected option
191+
@clear | Emitted when the select value was cleared
192+
@focus | Emitted when the select value was focused
193+
@blur | Emitted when the select value was blurred
194+
195+
## Methods
196+
Name | Description
197+
---------- | -----------------
198+
reset() | Call this method to reset the select value
199+
200+
## Slots
201+
Name | Description
202+
---------- | -----------------
203+
option | This slot can be used to render a custom template for each option in select

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"prepublish": "bash scripts/prepublish.sh"
2121
},
2222
"devDependencies": {
23-
"@modulist/css": "0.0.28",
23+
"@modulist/css": "0.0.29",
2424
"@vue/cli-plugin-babel": "^3.5.0",
2525
"@vue/cli-plugin-eslint": "^3.5.0",
2626
"@vue/cli-plugin-unit-jest": "^3.5.0",
@@ -69,5 +69,7 @@
6969
"url": "https://github.com/simplystack/modulist-vue/issues"
7070
},
7171
"homepage": "https://github.com/simplystack/modulist-vue#readme",
72-
"dependencies": {}
72+
"dependencies": {
73+
"fuzzysearch": "^1.0.3"
74+
}
7375
}

‎src/components/Chip/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Chip from './main.vue';
2+
3+
// eslint-disable-next-line func-names
4+
Chip.install = function (Vue) {
5+
Vue.component('VChip', Chip);
6+
};
7+
8+
export default Chip;

‎src/components/Chip/main.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div
3+
ref="chip"
4+
class="chip"
5+
tabindex="0"
6+
7+
:class="classes"
8+
9+
v-on="$listeners"
10+
>
11+
<div class="chip__text">{{ title }}</div>
12+
13+
<div class="chip__close" v-if="closable">
14+
15+
<button class="chip__delete" @click.stop="onDelete">
16+
<svg slot="icon" height="12" width="12">
17+
<use xlink:href="#cross-icon"></use>
18+
</svg>
19+
</button>
20+
21+
</div>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
name: 'VChip',
28+
props: {
29+
title: String,
30+
appearance: {
31+
type: String,
32+
},
33+
closable: Boolean,
34+
},
35+
computed: {
36+
classes() {
37+
return [
38+
`chip--${this.appearance}`,
39+
];
40+
},
41+
},
42+
methods: {
43+
onDelete(e) {
44+
this.$emit('delete', e);
45+
},
46+
},
47+
};
48+
</script>

‎src/components/Select/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Select from './main.vue';
2+
3+
// eslint-disable-next-line func-names
4+
Select.install = function (Vue) {
5+
Vue.component('VSelect', Select);
6+
};
7+
8+
export default Select;

0 commit comments

Comments
 (0)