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

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export default {
 		name: 'VvCombobox',
-		components: { VvDropdown, VvDropdownOption },
+		components: { VvDropdown, VvDropdownOption, VvDropdownOptgroup },
 	}
 </script>
 
@@ -11,6 +11,7 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import VvDropdown from '../VvDropdown/VvDropdown.vue'
 	import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
+	import VvDropdownOptgroup from '../VvDropdown/VvDropdownOptgroup.vue'
 	import VvSelect from '../VvSelect/VvSelect.vue'
 	import VvBadge from '../VvBadge/VvBadge.vue'
 	import HintSlotFactory from '../common/HintSlot'
@@ -29,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)
 
@@ -155,8 +164,12 @@
 		props.searchable ? filteredOptions.value : props.options,
 	)
 
-	const { getOptionLabel, getOptionValue, getOptionDisabled } =
-		useOptions(props)
+	const {
+		getOptionLabel,
+		getOptionValue,
+		getOptionDisabled,
+		getOptionGrouped,
+	} = useOptions(props)
 
 	// options filtered by search text
 	const filteredOptions = computed(() => {
@@ -197,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(() => {
@@ -439,35 +464,77 @@
 				</template>
 				<template #items>
 					<template v-if="filteredOptions.length">
-						<VvDropdownOption
+						<template
 							v-for="(option, index) in filteredOptions"
-							v-bind="{
-								disabled: getOptionDisabled(option),
-								selected: getOptionSelected(option),
-								unselectable,
-								deselectHintLabel:
-									propsDefaults.deselectHintLabel,
-								selectHintLabel: propsDefaults.selectHintLabel,
-								selectedHintLabel:
-									propsDefaults.selectedHintLabel,
-							}"
 							:key="index"
-							class="vv-dropdown-option"
-							@click.passive="onInput(option)"
 						>
-							<!-- @slot Slot for option customization -->
-							<slot
-								name="option"
+							<template v-if="isGroup(option)">
+								<VvDropdownOptgroup
+									:label="getOptionLabel(option)"
+								/>
+								<VvDropdownOption
+									v-for="(item, i) in getOptionGrouped(
+										option,
+									)"
+									v-bind="{
+										disabled: getOptionDisabled(item),
+										selected: getOptionSelected(item),
+										unselectable,
+										deselectHintLabel:
+											propsDefaults.deselectHintLabel,
+										selectHintLabel:
+											propsDefaults.selectHintLabel,
+										selectedHintLabel:
+											propsDefaults.selectedHintLabel,
+									}"
+									:key="i"
+									class="vv-dropdown-option"
+									@click.passive="onInput(item)"
+								>
+									<!-- @slot Slot for option customization -->
+									<slot
+										name="option"
+										v-bind="{
+											option,
+											selectedOptions,
+											selected: getOptionSelected(item),
+											disabled: getOptionDisabled(item),
+										}"
+									>
+										{{ getOptionLabel(item) }}
+									</slot>
+								</VvDropdownOption>
+							</template>
+							<VvDropdownOption
+								v-else
 								v-bind="{
-									option,
-									selectedOptions,
-									selected: getOptionSelected(option),
 									disabled: getOptionDisabled(option),
+									selected: getOptionSelected(option),
+									unselectable,
+									deselectHintLabel:
+										propsDefaults.deselectHintLabel,
+									selectHintLabel:
+										propsDefaults.selectHintLabel,
+									selectedHintLabel:
+										propsDefaults.selectedHintLabel,
 								}"
+								class="vv-dropdown-option"
+								@click.passive="onInput(option)"
 							>
-								{{ getOptionLabel(option) }}
-							</slot>
-						</VvDropdownOption>
+								<!-- @slot Slot for option customization -->
+								<slot
+									name="option"
+									v-bind="{
+										option,
+										selectedOptions,
+										selected: getOptionSelected(option),
+										disabled: getOptionDisabled(option),
+									}"
+								>
+									{{ getOptionLabel(option) }}
+								</slot>
+							</VvDropdownOption>
+						</template>
 					</template>
 					<VvDropdownOption
 						v-else-if="!options.length"

package/src/components/VvDropdown/VvDropdownOptgroup.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownOptgroup',
+	}
+</script>
+
+<script setup lang="ts">
+	import { LabelProps } from '../../props'
+	const props = defineProps({
+		...LabelProps,
+	})
+</script>
+
+<template>
+	<li class="vv-dropdown-optgroup" role="presentation" tabindex="-1">
+		{{ props.label }}
+	</li>
+</template>

package/src/components/VvSelect/VvSelect.vue

@@ -9,6 +9,7 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import HintSlotFactory from '../common/HintSlot'
 	import { VvSelectProps, VvSelectEmits } from '.'
+	import type { Option } from '@/types/generic'
 
 	// props, emit and slots
 	const props = defineProps(VvSelectProps)
@@ -124,8 +125,12 @@
 		modelValue: props.modelValue,
 	}))
 
-	const { getOptionLabel, getOptionValue, getOptionDisabled } =
-		useOptions(props)
+	const {
+		getOptionLabel,
+		getOptionValue,
+		getOptionDisabled,
+		getOptionGrouped,
+	} = useOptions(props)
 
 	const localModelValue = computed({
 		get: () => {
@@ -138,6 +143,12 @@
 			emit('update:modelValue', newValue)
 		},
 	})
+
+	// Grouped options
+	const isGroup = (option: string | Option) => {
+		if (typeof option === 'string') return false
+		return option && option.options && option.options.length > 0
+	}
 </script>
 
 <template>
@@ -169,14 +180,31 @@
 					>
 						{{ placeholder }}
 					</option>
-					<option
-						v-for="(option, index) in options"
-						:key="index"
-						:disabled="getOptionDisabled(option)"
-						:value="getOptionValue(option)"
-					>
-						{{ getOptionLabel(option) }}
-					</option>
+					<template v-for="(option, index) in options">
+						<option
+							v-if="!isGroup(option)"
+							:key="index"
+							:disabled="getOptionDisabled(option)"
+							:value="getOptionValue(option)"
+						>
+							{{ getOptionLabel(option) }}
+						</option>
+						<optgroup
+							v-else
+							:key="`group-${index}`"
+							:disabled="getOptionDisabled(option)"
+							:label="getOptionLabel(option)"
+						>
+							<option
+								v-for="(item, i) in getOptionGrouped(option)"
+								:key="`group-${index}-item-${i}`"
+								:disabled="getOptionDisabled(item)"
+								:value="getOptionValue(item)"
+							>
+								{{ getOptionLabel(item) }}
+							</option>
+						</optgroup>
+					</template>
 				</select>
 				<VvIcon
 					v-if="hasIconAfter"

package/src/composables/useOptions.ts

@@ -29,10 +29,16 @@ export function useOptions(props: any) {
 			: option[disabledKey.value]
 	}
 
+	const getOptionGrouped = (option: string | Option) => {
+	if (typeof option !== 'object' && option !== null) return []
+		return option.options || []
+	}
+
 	return {
 		options,
 		getOptionLabel,
 		getOptionValue,
 		getOptionDisabled,
+		getOptionGrouped
 	}
 }

package/src/resolvers/unplugin.ts

@@ -54,8 +54,9 @@ export const getStyleNames = function (kebabName: string) {
 	if (kebabName === 'vv-combobox') {
 		return [
 			'vv-select',
-			'vv-dropdown',
 			'vv-dropdown-option',
+			'vv-dropdown-optgroup',
+			'vv-dropdown',
 			'vv-dropdown-action',
 		]
 	}

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/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>

package/src/types/generic.d.ts

@@ -1,5 +1,6 @@
 export type Nullable<T> = T | null | undefined
 
 export type Option = {
-	[key: string]: unknown
+	options?: Option[],
+	[key: string]: unknown,
 }