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

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'))