@volverjs/ui-vue 0.0.5-beta.3 → 0.0.5-beta.4

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.
Files changed (21) hide show
  1. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -1
  2. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.umd.js +1 -1
  3. package/dist/components/VvCombobox/VvCombobox.es.js +21 -10
  4. package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
  5. package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -1
  6. package/dist/components/VvRadioGroup/VvRadioGroup.umd.js +1 -1
  7. package/dist/components/VvSelect/VvSelect.es.js +1 -1
  8. package/dist/components/VvSelect/VvSelect.umd.js +1 -1
  9. package/dist/components/index.es.js +21 -10
  10. package/dist/components/index.umd.js +1 -1
  11. package/dist/composables/useOptions.d.ts +1 -1
  12. package/dist/icons.es.js +3 -3
  13. package/dist/icons.umd.js +1 -1
  14. package/package.json +1 -1
  15. package/src/assets/icons/detailed.json +1 -1
  16. package/src/assets/icons/normal.json +1 -1
  17. package/src/assets/icons/simple.json +1 -1
  18. package/src/components/VvCombobox/VvCombobox.vue +23 -11
  19. package/src/composables/useOptions.ts +1 -1
  20. package/src/stories/Combobox/ComboboxOptions.stories.mdx +35 -0
  21. package/src/stories/Select/SelectOptions.stories.mdx +35 -0
package/src/components/VvCombobox/VvCombobox.vue CHANGED
@@ -30,6 +30,14 @@
30
30
  props,
31
31
  )
32
32
 
33
+ // Grouped options
34
+ const isGroup = (option: string | Option) => {
35
+ if (typeof option === 'string') {
36
+ return false
37
+ }
38
+ return option.options && option.options.length > 0
39
+ }
40
+
33
41
  // hint slot
34
42
  const { HintSlot } = HintSlotFactory(props, slots)
35
43
 
@@ -202,9 +210,21 @@
202
210
  } else if (props.modelValue) {
203
211
  selectedValues = [props.modelValue]
204
212
  }
205
- return props.options.filter((option) =>
206
- selectedValues.includes(getOptionValue(option)),
207
- )
213
+ const options = props.options.reduce((acc, value) => {
214
+ if (isGroup(value)) {
215
+ return [...acc, ...getOptionGrouped(value)]
216
+ }
217
+ return [...acc, value]
218
+ }, [] as Array<Option | string>)
219
+
220
+ return options.filter((option) => {
221
+ if (isGroup(option)) {
222
+ return getOptionGrouped(option).some((item) =>
223
+ selectedValues.includes(getOptionValue(item)),
224
+ )
225
+ }
226
+ return selectedValues.includes(getOptionValue(option))
227
+ })
208
228
  })
209
229
 
210
230
  const hasValue = computed(() => {
@@ -332,14 +352,6 @@
332
352
  toggleExpanded()
333
353
  }
334
354
  })
335
-
336
- // Grouped options
337
- const isGroup = (option: string | Option) => {
338
- if (typeof option === 'string') {
339
- return false
340
- }
341
- return option.options && option.options.length > 0
342
- }
343
355
  </script>
344
356
 
345
357
  <template>
package/src/composables/useOptions.ts CHANGED
@@ -31,7 +31,7 @@ export function useOptions(props: any) {
31
31
 
32
32
  const getOptionGrouped = (option: string | Option) => {
33
33
  if (typeof option !== 'object' && option !== null) return []
34
- return option.options
34
+ return option.options || []
35
35
  }
36
36
 
37
37
  return {
package/src/stories/Combobox/ComboboxOptions.stories.mdx CHANGED
@@ -98,3 +98,38 @@ import { defaultTest } from './Combobox.test'
98
98
  {Template.bind()}
99
99
  </Story>
100
100
  </Canvas>
101
+
102
+ <Canvas>
103
+ <Story
104
+ name="Grouped options"
105
+ play={defaultTest}
106
+ argTypes={{
107
+ options: {
108
+ ...argTypes.options,
109
+ control: {
110
+ disable: true,
111
+ },
112
+ },
113
+ }}
114
+ args={{
115
+ options: [
116
+ {
117
+ label: 'Group 1',
118
+ options: [
119
+ { value: 'first', label: 'First' },
120
+ { value: 'second', label: 'Second' },
121
+ ],
122
+ },
123
+ {
124
+ label: 'Group 2',
125
+ options: [
126
+ { value: 'third', label: 'Third' },
127
+ { value: 'fourth', label: 'Fourth' },
128
+ ],
129
+ },
130
+ ],
131
+ }}
132
+ >
133
+ {Template.bind()}
134
+ </Story>
135
+ </Canvas>
package/src/stories/Select/SelectOptions.stories.mdx CHANGED
@@ -98,3 +98,38 @@ import { defaultTest } from './Select.test'
98
98
  {Template.bind()}
99
99
  </Story>
100
100
  </Canvas>
101
+
102
+ <Canvas>
103
+ <Story
104
+ name="Grouped options"
105
+ play={defaultTest}
106
+ argTypes={{
107
+ options: {
108
+ ...argTypes.options,
109
+ control: {
110
+ disable: true,
111
+ },
112
+ },
113
+ }}
114
+ args={{
115
+ options: [
116
+ {
117
+ label: 'Group 1',
118
+ options: [
119
+ { value: 'first', label: 'First' },
120
+ { value: 'second', label: 'Second' },
121
+ ]
122
+ },
123
+ {
124
+ label: 'Group 2',
125
+ options: [
126
+ { value: 'third', label: 'Third' },
127
+ { value: 'fourth', label: 'Fourth' },
128
+ ]
129
+ },
130
+ ],
131
+ }}
132
+ >
133
+ {Template.bind()}
134
+ </Story>
135
+ </Canvas>