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

package/src/components/VvCombobox/VvCombobox.vue

@@ -299,34 +299,36 @@
 		loadingLabel: propsDefaults.value.loadingLabel,
 		disabled: disabled.value,
 		readonly: readonly.value,
-		modifiers: props.modifiers,
-		options: props.options,
-		labelKey: props.labelKey,
-		valueKey: props.valueKey,
-		icon: props.icon,
-		iconPosition: props.iconPosition,
-		floating: props.floating,
-		unselectable: props.unselectable,
-		multiple: props.multiple,
-		label: props.label,
-		placeholder: props.placeholder,
+		modifiers: propsDefaults.value.modifiers,
+		options: propsDefaults.value.options,
+		labelKey: propsDefaults.value.labelKey,
+		valueKey: propsDefaults.value.valueKey,
+		icon: propsDefaults.value.icon,
+		iconPosition: propsDefaults.value.iconPosition,
+		floating: propsDefaults.value.floating,
+		unselectable: propsDefaults.value.unselectable,
+		multiple: propsDefaults.value.multiple,
+		label: propsDefaults.value.label,
+		placeholder: propsDefaults.value.placeholder,
 		modelValue: props.modelValue,
 	}))
 
 	const dropdownProps = computed(() => ({
 		id: hasDropdownId.value,
 		reference: wrapperEl.value,
-		placement: props.placement,
-		strategy: props.strategy,
-		transitionName: props.transitionName,
-		offset: props.offset,
-		shift: props.shift,
-		flip: props.flip,
-		autoPlacement: props.autoPlacement,
-		arrow: props.arrow,
-		autofocusFirst: searchable.value ? false : props.autofocusFirst,
-		triggerWidth: props.triggerWidth,
-		modifiers: props.dropdownModifiers,
+		placement: propsDefaults.value.placement,
+		strategy: propsDefaults.value.strategy,
+		transitionName: propsDefaults.value.transitionName,
+		offset: propsDefaults.value.offset,
+		shift: propsDefaults.value.shift,
+		flip: propsDefaults.value.flip,
+		autoPlacement: propsDefaults.value.autoPlacement,
+		arrow: propsDefaults.value.arrow,
+		autofocusFirst: searchable.value
+			? false
+			: propsDefaults.value.autofocusFirst,
+		triggerWidth: propsDefaults.value.triggerWidth,
+		modifiers: propsDefaults.value.dropdownModifiers,
 	}))
 
 	// slots

package/src/composables/useOptions.ts

@@ -1,4 +1,5 @@
 import type { Option } from '../types/generic'
+import { get } from 'ts-dot-prop'
 
 // eslint-disable-next-line
 export function useOptions(props: any) {
@@ -11,7 +12,7 @@ export function useOptions(props: any) {
 		return String(
 			typeof labelKey.value === 'function'
 				? labelKey.value(option)
-				: option[labelKey.value],
+				: get(option, labelKey.value),
 		)
 	}
 
@@ -20,7 +21,7 @@ export function useOptions(props: any) {
 
 		return typeof valueKey.value === 'function'
 			? valueKey.value(option)
-			: option[valueKey.value]
+			: get(option, valueKey.value)
 	}
 
 	const getOptionDisabled = (option: string | Option): boolean => {
@@ -28,7 +29,7 @@ export function useOptions(props: any) {
 
 		return typeof disabledKey.value === 'function'
 			? disabledKey.value(option)
-			: option[disabledKey.value]
+			: get(option, disabledKey.value)
 	}
 
 	const getOptionGrouped = (option: string | Option) => {

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

@@ -2,7 +2,6 @@ import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
 import { sleep } from '@/test/sleep'
-import { getOptionValue } from '@/test/options'
 import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
@@ -49,11 +48,12 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 		// select first value
 		await expect(dropdownFirstItem).toBeClicked()
 		await sleep()
+
+		const { getOptionValue } = useOptions(args)
+
 		const firstValue = getOptionValue(
-			args.options[0].options ? args.options[0] : args,
-			0,
+			args.options[0].options?.[0] ?? args.options[0],
 		)
-
 		// in grouped options the first element is not selectable
 		if (args.multiple) {
 			await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
@@ -66,8 +66,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 			await expect(dropdownSecondItem).toBeClicked()
 			await sleep()
 			const secondValue = getOptionValue(
-				args.options[0].options ? args.options[0] : args,
-				1,
+				args.options[0].options?.[1] ?? args.options[1],
 			)
 			if (args.multiple) {
 				await expect(JSON.parse(value.innerHTML)).toEqual([

package/src/stories/Combobox/ComboboxOptions.stories.ts

@@ -76,3 +76,21 @@ export const GroupedOptions: Story = {
 		],
 	},
 }
+
+export const DotPathOptions: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		valueKey: 'value.val',
+		labelKey: 'label.en',
+		options: [
+			{ value: { val: 'first' }, label: { it: 'Primo', en: 'First' } },
+			{
+				value: { val: 'second' },
+				label: { it: 'Secondo', en: 'Second' },
+			},
+			{ value: { val: 'third' }, label: { it: 'Terzo', en: 'Third' } },
+			{ value: { val: 'fourth' }, label: { it: 'Quarto', en: 'Fourth' } },
+		],
+	},
+}

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

@@ -2,7 +2,6 @@ import type { PlayAttributes } from '@/test/types'
 import { within } from '@storybook/testing-library'
 import { expect } from '@/test/expect'
 import { sleep } from '@/test/sleep'
-import { getOptionValue } from '@/test/options'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const element = (await within(canvasElement).findByTestId(
@@ -16,6 +15,8 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	)[0] as HTMLSelectElement
 	const hint = element.getElementsByClassName('vv-select__hint')[0]
 
+	const { getOptionValue } = useOptions(args)
+
 	if (
 		!args.invalid &&
 		!args.disabled &&
@@ -25,8 +26,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	) {
 		// select first value
 		const firstValue = getOptionValue(
-			args.options[0].options ? args.options[0] : args,
-			0,
+			args.options[0].options?.[0] ?? args.options[0],
 		)
 		select.value = firstValue
 		select.dispatchEvent(new Event('change'))