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

package/src/components/VvCheckbox/index.ts

@@ -42,7 +42,7 @@ export function useGroupProps(
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
 	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.disabled.value),
+		Boolean(props.readonly || group?.value?.readonly.value),
 	)
 	const disabled = computed(() =>
 		Boolean(props.disabled || group?.value?.disabled.value),

package/src/components/VvCombobox/VvCombobox.vue

@@ -30,6 +30,14 @@
 		props,
 	)
 
+	// Grouped options
+	const isGroup = (option: string | Option) => {
+		if (typeof option === 'string') {
+			return false
+		}
+		return option.options && option.options.length > 0
+	}
+
 	// hint slot
 	const { HintSlot } = HintSlotFactory(props, slots)
 
@@ -202,9 +210,21 @@
 		} else if (props.modelValue) {
 			selectedValues = [props.modelValue]
 		}
-		return props.options.filter((option) =>
-			selectedValues.includes(getOptionValue(option)),
-		)
+		const options = props.options.reduce((acc, value) => {
+			if (isGroup(value)) {
+				return [...acc, ...getOptionGrouped(value)]
+			}
+			return [...acc, value]
+		}, [] as Array<Option | string>)
+
+		return options.filter((option) => {
+			if (isGroup(option)) {
+				return getOptionGrouped(option).some((item) =>
+					selectedValues.includes(getOptionValue(item)),
+				)
+			}
+			return selectedValues.includes(getOptionValue(option))
+		})
 	})
 
 	const hasValue = computed(() => {
@@ -332,14 +352,6 @@
 			toggleExpanded()
 		}
 	})
-
-	// Grouped options
-	const isGroup = (option: string | Option) => {
-		if (typeof option === 'string') {
-			return false
-		}
-		return option.options && option.options.length > 0
-	}
 </script>
 
 <template>

package/src/components/VvRadio/index.ts

@@ -25,7 +25,7 @@ export function useGroupProps(
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
 	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.disabled.value),
+		Boolean(props.readonly || group?.value?.readonly.value),
 	)
 	const disabled = computed(() =>
 		Boolean(props.disabled || group?.value?.disabled.value),

package/src/composables/useOptions.ts

@@ -31,7 +31,7 @@ export function useOptions(props: any) {
 
 	const getOptionGrouped = (option: string | Option) => {
 	if (typeof option !== 'object' && option !== null) return []
-		return option.options
+		return option.options || []
 	}
 
 	return {

package/src/stories/Combobox/Combobox.test.ts

@@ -21,11 +21,11 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const dropdown = element.getElementsByClassName(
 		'vv-dropdown',
 	)[0] as HTMLElement
-	const dropdownFirstItem = dropdown.getElementsByTagName(
-		'li',
+	const dropdownFirstItem = dropdown.querySelectorAll(
+		'li[role="option"]',
 	)[0] as HTMLElement
-	const dropdownSecondItem = dropdown.getElementsByTagName(
-		'li',
+	const dropdownSecondItem = dropdown.querySelectorAll(
+		'li[role="option"]',
 	)[1] as HTMLElement
 	const hint = element.getElementsByClassName('vv-select__hint')[0]
 
@@ -49,7 +49,12 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		// select first value
 		await expect(dropdownFirstItem).toBeClicked()
 		await sleep()
-		const firstValue = getOptionValue(args, 0)
+		const firstValue = getOptionValue(
+			args.options[0].options ? args.options[0] : args,
+			0,
+		)
+
+		// in grouped options the first element is not selectable
 		if (args.multiple) {
 			await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
 		} else {
@@ -60,7 +65,10 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		if (args.options.length > 1) {
 			await expect(dropdownSecondItem).toBeClicked()
 			await sleep()
-			const secondValue = getOptionValue(args, 1)
+			const secondValue = getOptionValue(
+				args.options[0].options ? args.options[0] : args,
+				1,
+			)
 			if (args.multiple) {
 				await expect(JSON.parse(value.innerHTML)).toEqual([
 					firstValue,

package/src/stories/Combobox/ComboboxOptions.stories.mdx

@@ -98,3 +98,38 @@ import { defaultTest } from './Combobox.test'
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Grouped options"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			options: [
+				{
+					label: 'Group 1',
+					options: [
+						{ value: 'first', label: 'First' },
+						{ value: 'second', label: 'Second' },
+					],
+				},
+				{
+					label: 'Group 2',
+					options: [
+						{ value: 'third', label: 'Third' },
+						{ value: 'fourth', label: 'Fourth' },
+					],
+				},
+			],
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Select/Select.test.ts

@@ -24,7 +24,10 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		args.options.length > 0
 	) {
 		// select first value
-		const firstValue = getOptionValue(args, 0)
+		const firstValue = getOptionValue(
+			args.options[0].options ? args.options[0] : args,
+			0,
+		)
 		select.value = firstValue
 		select.dispatchEvent(new Event('change'))
 		await sleep()

package/src/stories/Select/SelectOptions.stories.mdx

@@ -98,3 +98,38 @@ import { defaultTest } from './Select.test'
 		{Template.bind()}
 	</Story>
 </Canvas>
+
+<Canvas>
+	<Story
+		name="Grouped options"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			options: [
+				{ 
+					label: 'Group 1',
+					options: [
+						{ value: 'first', label: 'First' },
+						{ value: 'second', label: 'Second' },
+					]
+				},
+				{ 
+					label: 'Group 2',
+					options: [
+						{ value: 'third', label: 'Third' },
+						{ value: 'fourth', label: 'Fourth' },
+					]
+				},
+			],
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>