@weni/unnnic-system 1.16.39-develop.0 → 1.16.40-develop.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/unnnic.common.js +7 -7
- package/dist/unnnic.common.js.map +1 -1
- package/dist/unnnic.umd.js +7 -7
- package/dist/unnnic.umd.js.map +1 -1
- package/dist/unnnic.umd.min.js +1 -1
- package/dist/unnnic.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SelectSmart/SelectSmart.vue +1 -1
- package/src/stories/SelectSmart.stories.mdx +291 -0
- package/src/stories/SelectSmart.stories.js +0 -140
package/package.json
CHANGED
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
import { Canvas, Meta, Source, Story } from "@storybook/addon-docs";
|
|
2
|
+
import unnnicSelectSmart from "../components/SelectSmart/SelectSmart.vue";
|
|
3
|
+
|
|
4
|
+
<Meta
|
|
5
|
+
title='Select/SelectSmart'
|
|
6
|
+
component={unnnicSelectSmart}
|
|
7
|
+
decorators={[
|
|
8
|
+
() => ({
|
|
9
|
+
template: '<div style="marginBottom: 200px"><story /></div>',
|
|
10
|
+
}),
|
|
11
|
+
]}
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
export const Template = (args, { argTypes }) => ({
|
|
15
|
+
props: Object.keys(argTypes),
|
|
16
|
+
components: { unnnicSelectSmart },
|
|
17
|
+
data() {
|
|
18
|
+
return {
|
|
19
|
+
exampleValue: [],
|
|
20
|
+
};
|
|
21
|
+
},
|
|
22
|
+
template: '<unnnic-select-smart v-model="exampleValue" v-bind="$props" />',
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
# SelectSmart
|
|
26
|
+
|
|
27
|
+
SelectSmart is designed to solve common problems related to option selection.
|
|
28
|
+
It combines three elements: Select, Autocomplete, and AutocompleteSelect, which
|
|
29
|
+
originally didn't follow a consistent pattern and had some bugs. With SelectSmart,
|
|
30
|
+
these components have been unified and improved and it also brings a new design.
|
|
31
|
+
|
|
32
|
+
> It is a _self-closing_ component, which means it does not support child elements.
|
|
33
|
+
|
|
34
|
+
> Available in small and medium versions, which can be toggled through the
|
|
35
|
+
`size` property, accepting the strings "sm" or "md".
|
|
36
|
+
|
|
37
|
+
<Source
|
|
38
|
+
language='html'
|
|
39
|
+
dark
|
|
40
|
+
code={`
|
|
41
|
+
<unnnic-select-smart v-model="exampleValue" :options="exampleArray" />
|
|
42
|
+
`}
|
|
43
|
+
/>
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
#### **IMPORTANT:**
|
|
48
|
+
|
|
49
|
+
To ensure proper functioning of the component, it is fundamental to provide the `v-model`
|
|
50
|
+
(or `value` and `@input`), even if it is empty (`[]`), since it is through this property
|
|
51
|
+
that the selected options are controlled.
|
|
52
|
+
|
|
53
|
+
The other one required property is `options`, which requires an array of objects in the following format:
|
|
54
|
+
|
|
55
|
+
| Key | Description | Type |
|
|
56
|
+
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------ |
|
|
57
|
+
| value | **Required.**<br/>Sets the option value. If it is empty, the _label_ of this object will be used as the _placeholder_ of the SelectSmart. | string |
|
|
58
|
+
| label | **Required.**<br/>Provides user-friendly text that represents the option to the user. | string |
|
|
59
|
+
| description | _Not required._<br/>Provides an additional description for the option. | string |
|
|
60
|
+
|
|
61
|
+
<Source
|
|
62
|
+
language='json'
|
|
63
|
+
dark
|
|
64
|
+
code={`
|
|
65
|
+
[
|
|
66
|
+
{
|
|
67
|
+
"value": "",
|
|
68
|
+
"label": "Select some option" <---- Since the value of this object is empty, this will be the placeholder
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"value": "1",
|
|
72
|
+
"label": "Option 1",
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"value": "2",
|
|
76
|
+
"label": "Option 2",
|
|
77
|
+
"description": "This is the first option"
|
|
78
|
+
},
|
|
79
|
+
]
|
|
80
|
+
`}
|
|
81
|
+
/>
|
|
82
|
+
|
|
83
|
+
> The options will be presented in alphabetical order, following the value of each `label`,
|
|
84
|
+
regardless of the sequence in which the objects are supplied to the `:options` property.
|
|
85
|
+
However, if the `orderedByIndex` property is included, the options will be sorted
|
|
86
|
+
according to the arrangement given to `:options`.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
<br />
|
|
90
|
+
|
|
91
|
+
## Default
|
|
92
|
+
|
|
93
|
+
Allows you to choose from a list.
|
|
94
|
+
|
|
95
|
+
<Canvas>
|
|
96
|
+
<Story
|
|
97
|
+
name='Default'
|
|
98
|
+
args={{
|
|
99
|
+
options: [
|
|
100
|
+
{ value: "", label: "Select some option" },
|
|
101
|
+
{ value: "5", label: "Option 5" },
|
|
102
|
+
{ value: "3", label: "Option 3" },
|
|
103
|
+
{ value: "1", label: "Option 1" },
|
|
104
|
+
{ value: "4", label: "Option 4" },
|
|
105
|
+
{ value: "2", label: "Option 2" },
|
|
106
|
+
{ value: "6", label: "Option 6" },
|
|
107
|
+
{ value: "7", label: "Option 7" },
|
|
108
|
+
],
|
|
109
|
+
}}>
|
|
110
|
+
{Template.bind({})}
|
|
111
|
+
</Story>
|
|
112
|
+
</Canvas>
|
|
113
|
+
|
|
114
|
+
## Default option selected
|
|
115
|
+
|
|
116
|
+
For the first option to be selected by default, it is essential that
|
|
117
|
+
there is no object with its `value` field empty.
|
|
118
|
+
|
|
119
|
+
If your intention is to set a specific option as the default, you can
|
|
120
|
+
accomplish this using the `value` (or `v-model`) property. Make sure that this
|
|
121
|
+
value is passed as an array, and that the object is structured according to the
|
|
122
|
+
pattern of the other options.
|
|
123
|
+
|
|
124
|
+
<Canvas>
|
|
125
|
+
<Story
|
|
126
|
+
name='FirstSelected'
|
|
127
|
+
args={{
|
|
128
|
+
options: [
|
|
129
|
+
{ value: "1", label: "Option 1" },
|
|
130
|
+
{ value: "2", label: "Option 2" },
|
|
131
|
+
{ value: "3", label: "Option 3" },
|
|
132
|
+
{ value: "4", label: "Option 4" },
|
|
133
|
+
{ value: "5", label: "Option 5" },
|
|
134
|
+
],
|
|
135
|
+
}}>
|
|
136
|
+
{Template.bind({})}
|
|
137
|
+
</Story>
|
|
138
|
+
</Canvas>
|
|
139
|
+
|
|
140
|
+
## Ordered by index
|
|
141
|
+
|
|
142
|
+
If the `orderedByIndex` property is included, the options will
|
|
143
|
+
be ordered according to the arrangement given to `:options`.
|
|
144
|
+
|
|
145
|
+
<Canvas>
|
|
146
|
+
<Story
|
|
147
|
+
name='OrderedByIndex'
|
|
148
|
+
args={{
|
|
149
|
+
options: [
|
|
150
|
+
{ value: "5", label: "Option 5" },
|
|
151
|
+
{ value: "3", label: "Option 3" },
|
|
152
|
+
{ value: "1", label: "Option 1" },
|
|
153
|
+
{ value: "4", label: "Option 4" },
|
|
154
|
+
{ value: "2", label: "Option 2" },
|
|
155
|
+
],
|
|
156
|
+
orderedByIndex: true,
|
|
157
|
+
}}>
|
|
158
|
+
{Template.bind({})}
|
|
159
|
+
</Story>
|
|
160
|
+
</Canvas>
|
|
161
|
+
|
|
162
|
+
## Disabled
|
|
163
|
+
|
|
164
|
+
SelectSmart will respond to the value passed to the `disabled` property,
|
|
165
|
+
becoming disabled when set to _true_ and remaining enabled when set to _false_.
|
|
166
|
+
|
|
167
|
+
<Canvas>
|
|
168
|
+
<Story
|
|
169
|
+
name='Disabled'
|
|
170
|
+
args={{
|
|
171
|
+
options: [{ value: "", label: "Select some option" }],
|
|
172
|
+
disabled: true,
|
|
173
|
+
}}>
|
|
174
|
+
{Template.bind({})}
|
|
175
|
+
</Story>
|
|
176
|
+
</Canvas>
|
|
177
|
+
|
|
178
|
+
## With descriptions
|
|
179
|
+
|
|
180
|
+
If you want a more detailed description for your options, you can include the
|
|
181
|
+
`description` key inside the object corresponding to each option.
|
|
182
|
+
|
|
183
|
+
<Canvas>
|
|
184
|
+
<Story
|
|
185
|
+
name='WithDescriptions'
|
|
186
|
+
args={{
|
|
187
|
+
options: [
|
|
188
|
+
{ value: "", label: "Select some option" },
|
|
189
|
+
{ value: "1", label: "Option 1", description: "This is the first option" },
|
|
190
|
+
{ value: "2", label: "Option 2", description: "Another alternative you can consider" },
|
|
191
|
+
{ value: "3", label: "Option 3", description: "A third option for your consideration" },
|
|
192
|
+
{ value: "4", label: "Option 4", description: "Yet another choice among the options" },
|
|
193
|
+
{ value: "5", label: "Option 5", description: "The last option available for selection" },
|
|
194
|
+
],
|
|
195
|
+
}}>
|
|
196
|
+
{Template.bind({})}
|
|
197
|
+
</Story>
|
|
198
|
+
</Canvas>
|
|
199
|
+
|
|
200
|
+
## Autocomplete
|
|
201
|
+
|
|
202
|
+
To activate the search functionality, just include the `autocomplete` property.
|
|
203
|
+
The search takes place based on the text of the `label`, without distinction
|
|
204
|
+
between uppercase and lowercase, spaces and accents.
|
|
205
|
+
|
|
206
|
+
If you want the search bar to be emptied when focusing on the component, use
|
|
207
|
+
the `autocompleteClearOnFocus` property.
|
|
208
|
+
|
|
209
|
+
Furthermore, it is possible to incorporate the magnifying glass icon on the side (left) of
|
|
210
|
+
the search bar by using the `autocompleteIconLeft` property.
|
|
211
|
+
|
|
212
|
+
<Canvas>
|
|
213
|
+
<Story
|
|
214
|
+
name='Autocomplete'
|
|
215
|
+
args={{
|
|
216
|
+
options: [
|
|
217
|
+
{ value: "", label: "Select some option" },
|
|
218
|
+
{ value: "united_states", label: "Estados Unidos" },
|
|
219
|
+
{ value: "brazil", label: "Brasil" },
|
|
220
|
+
{ value: "china", label: "China" },
|
|
221
|
+
{ value: "india", label: "Índia" },
|
|
222
|
+
{ value: "russia", label: "Rússia" },
|
|
223
|
+
{ value: "japan", label: "Japão" },
|
|
224
|
+
{ value: "germany", label: "Alemanha" },
|
|
225
|
+
{ value: "france", label: "França" },
|
|
226
|
+
{ value: "canada", label: "Canadá" },
|
|
227
|
+
{ value: "australia", label: "Austrália" },
|
|
228
|
+
{ value: "south_korea", label: "Coreia do Sul" },
|
|
229
|
+
{ value: "mexico", label: "México" },
|
|
230
|
+
{ value: "egypt", label: "Egito" },
|
|
231
|
+
{ value: "south_africa", label: "África do Sul" },
|
|
232
|
+
{ value: "turkey", label: "Turquia" },
|
|
233
|
+
{ value: "nigeria", label: "Nigéria" },
|
|
234
|
+
{ value: "argentina", label: "Argentina" },
|
|
235
|
+
{ value: "italy", label: "Itália" },
|
|
236
|
+
{ value: "spain", label: "Espanha" },
|
|
237
|
+
{ value: "saudi_arabia", label: "Arábia Saudita" },
|
|
238
|
+
],
|
|
239
|
+
autocomplete: true,
|
|
240
|
+
autocompleteClearOnFocus: true,
|
|
241
|
+
autocompleteIconLeft: true,
|
|
242
|
+
}}>
|
|
243
|
+
{Template.bind({})}
|
|
244
|
+
</Story>
|
|
245
|
+
</Canvas>
|
|
246
|
+
|
|
247
|
+
## Multiple
|
|
248
|
+
|
|
249
|
+
To use the component version that allows the selection of
|
|
250
|
+
several options, just pass the `multiple` property.
|
|
251
|
+
|
|
252
|
+
You also have the freedom to customize the message that signals
|
|
253
|
+
when no option has been selected, through the `multipleWithoutSelectsMessage` property.
|
|
254
|
+
|
|
255
|
+
Typically, components involving multiple options offer a considerable range
|
|
256
|
+
of choices. So, in order to improve the user experience, the `multiple` option
|
|
257
|
+
automatically activates the `autocomplete` feature, it cannot be deactivated.
|
|
258
|
+
|
|
259
|
+
<Canvas>
|
|
260
|
+
<Story
|
|
261
|
+
name='Multiple'
|
|
262
|
+
args={{
|
|
263
|
+
options: [
|
|
264
|
+
{ value: "", label: "Select some countries" },
|
|
265
|
+
{ value: "united_states", label: "Estados Unidos" },
|
|
266
|
+
{ value: "brazil", label: "Brasil" },
|
|
267
|
+
{ value: "china", label: "China" },
|
|
268
|
+
{ value: "india", label: "Índia" },
|
|
269
|
+
{ value: "russia", label: "Rússia" },
|
|
270
|
+
{ value: "japan", label: "Japão" },
|
|
271
|
+
{ value: "germany", label: "Alemanha" },
|
|
272
|
+
{ value: "france", label: "França" },
|
|
273
|
+
{ value: "canada", label: "Canadá" },
|
|
274
|
+
{ value: "australia", label: "Austrália" },
|
|
275
|
+
{ value: "south_korea", label: "Coreia do Sul" },
|
|
276
|
+
{ value: "mexico", label: "México" },
|
|
277
|
+
{ value: "egypt", label: "Egito" },
|
|
278
|
+
{ value: "south_africa", label: "África do Sul" },
|
|
279
|
+
{ value: "turkey", label: "Turquia" },
|
|
280
|
+
{ value: "nigeria", label: "Nigéria" },
|
|
281
|
+
{ value: "argentina", label: "Argentina" },
|
|
282
|
+
{ value: "italy", label: "Itália" },
|
|
283
|
+
{ value: "spain", label: "Espanha" },
|
|
284
|
+
{ value: "saudi_arabia", label: "Arábia Saudita" },
|
|
285
|
+
],
|
|
286
|
+
multiple: true,
|
|
287
|
+
multipleWithoutSelectsMessage: 'No country selected yet :(',
|
|
288
|
+
}}>
|
|
289
|
+
{Template.bind({})}
|
|
290
|
+
</Story>
|
|
291
|
+
</Canvas>
|
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
import unnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
title: 'select/SelectSmart',
|
|
5
|
-
component: unnnicSelectSmart,
|
|
6
|
-
argTypes: {
|
|
7
|
-
size: { control: { type: 'select', options: ['md', 'sm'] } },
|
|
8
|
-
type: { control: { type: 'select', options: ['normal', 'error'] } },
|
|
9
|
-
orderedByIndex: { control: { type: 'boolean' } },
|
|
10
|
-
autocomplete: { control: { type: 'boolean' } },
|
|
11
|
-
autocompleteIconLeft: { control: { type: 'boolean' } },
|
|
12
|
-
autocompleteClearOnFocus: { control: { type: 'boolean' } },
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
const exampleOptionsDefault = [
|
|
17
|
-
{ value: '', label: 'Select some option' },
|
|
18
|
-
{ value: '5', label: 'Option 5' },
|
|
19
|
-
{ value: '3', label: 'Option 3' },
|
|
20
|
-
{ value: '1', label: 'Option 1' },
|
|
21
|
-
{ value: '4', label: 'Option 4' },
|
|
22
|
-
{ value: '2', label: 'Option 2' },
|
|
23
|
-
];
|
|
24
|
-
|
|
25
|
-
const exampleOptionsWithDescriptions = [
|
|
26
|
-
{ value: '', label: 'Select some option' },
|
|
27
|
-
{ value: '1', label: 'Option 1', description: 'This is the first option' },
|
|
28
|
-
{ value: '2', label: 'Option 2', description: 'Another alternative you can consider' },
|
|
29
|
-
{ value: '3', label: 'Option 3', description: 'A third option for your consideration' },
|
|
30
|
-
{ value: '4', label: 'Option 4', description: 'Yet another choice among the options' },
|
|
31
|
-
{ value: '5', label: 'Option 5', description: 'The last option available for selection' },
|
|
32
|
-
];
|
|
33
|
-
|
|
34
|
-
const exampleOptionsCountries = [
|
|
35
|
-
{ value: '', label: 'Select some option' },
|
|
36
|
-
{ value: 'united_states', label: 'Estados Unidos' },
|
|
37
|
-
{ value: 'brazil', label: 'Brasil' },
|
|
38
|
-
{ value: 'china', label: 'China' },
|
|
39
|
-
{ value: 'india', label: 'Índia' },
|
|
40
|
-
{ value: 'russia', label: 'Rússia' },
|
|
41
|
-
{ value: 'japan', label: 'Japão' },
|
|
42
|
-
{ value: 'germany', label: 'Alemanha' },
|
|
43
|
-
{ value: 'france', label: 'França' },
|
|
44
|
-
{ value: 'canada', label: 'Canadá' },
|
|
45
|
-
{ value: 'australia', label: 'Austrália' },
|
|
46
|
-
{ value: 'south_korea', label: 'Coreia do Sul' },
|
|
47
|
-
{ value: 'mexico', label: 'México' },
|
|
48
|
-
{ value: 'egypt', label: 'Egito' },
|
|
49
|
-
{ value: 'south_africa', label: 'África do Sul' },
|
|
50
|
-
{ value: 'turkey', label: 'Turquia' },
|
|
51
|
-
{ value: 'nigeria', label: 'Nigéria' },
|
|
52
|
-
{ value: 'argentina', label: 'Argentina' },
|
|
53
|
-
{ value: 'italy', label: 'Itália' },
|
|
54
|
-
{ value: 'spain', label: 'Espanha' },
|
|
55
|
-
{ value: 'saudi_arabia', label: 'Arábia Saudita' },
|
|
56
|
-
];
|
|
57
|
-
|
|
58
|
-
const exampleOptionsFirstSelected = [
|
|
59
|
-
{ value: '1', label: 'Option 1' },
|
|
60
|
-
{ value: '2', label: 'Option 2' },
|
|
61
|
-
{ value: '3', label: 'Option 3' },
|
|
62
|
-
{ value: '4', label: 'Option 4' },
|
|
63
|
-
{ value: '5', label: 'Option 5' },
|
|
64
|
-
{ value: '5', label: 'Option 5' },
|
|
65
|
-
];
|
|
66
|
-
|
|
67
|
-
const Template = (args, { argTypes }) => ({
|
|
68
|
-
props: Object.keys(argTypes),
|
|
69
|
-
components: { unnnicSelectSmart },
|
|
70
|
-
data() {
|
|
71
|
-
return {
|
|
72
|
-
exampleValue: [],
|
|
73
|
-
};
|
|
74
|
-
},
|
|
75
|
-
|
|
76
|
-
methods: {
|
|
77
|
-
addDynamicOption() {
|
|
78
|
-
const value = Math.floor(Math.random() * 1e3);
|
|
79
|
-
|
|
80
|
-
this.exampleOptions.push({
|
|
81
|
-
value: `option${value}`,
|
|
82
|
-
label: `Option ${value}`,
|
|
83
|
-
});
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
template: `
|
|
88
|
-
<div>
|
|
89
|
-
<unnnic-select-smart
|
|
90
|
-
v-model="exampleValue"
|
|
91
|
-
:options="exampleOptions || []"
|
|
92
|
-
v-bind="$props"
|
|
93
|
-
/>
|
|
94
|
-
|
|
95
|
-
<p>v-model: {{exampleValue}}</p>
|
|
96
|
-
|
|
97
|
-
<button v-if="!(disabled || autocomplete)" @click="addDynamicOption">Add dynamic option</button>
|
|
98
|
-
</div>
|
|
99
|
-
`,
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
export const Default = Template.bind({});
|
|
103
|
-
Default.args = {
|
|
104
|
-
exampleOptions: exampleOptionsDefault,
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
export const FirstSelected = Template.bind({});
|
|
108
|
-
FirstSelected.args = {
|
|
109
|
-
exampleOptions: exampleOptionsFirstSelected,
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
export const OrderedByIndex = Template.bind({});
|
|
113
|
-
OrderedByIndex.args = {
|
|
114
|
-
exampleOptions: exampleOptionsDefault,
|
|
115
|
-
orderedByIndex: true,
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
export const Disabled = Template.bind({});
|
|
119
|
-
Disabled.args = {
|
|
120
|
-
exampleOptions: exampleOptionsDefault,
|
|
121
|
-
disabled: true,
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
export const WithDescriptions = Template.bind({});
|
|
125
|
-
WithDescriptions.args = {
|
|
126
|
-
exampleOptions: exampleOptionsWithDescriptions,
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
export const Autocomplete = Template.bind({});
|
|
130
|
-
Autocomplete.args = {
|
|
131
|
-
exampleOptions: exampleOptionsCountries,
|
|
132
|
-
autocomplete: true,
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
export const Multiple = Template.bind({});
|
|
136
|
-
Multiple.args = {
|
|
137
|
-
exampleOptions: exampleOptionsCountries,
|
|
138
|
-
autocomplete: true,
|
|
139
|
-
multiple: true,
|
|
140
|
-
};
|