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

package/src/components/VvCombobox/VvCombobox.vue

@@ -101,7 +101,9 @@
 	const onAfterExpand = () => {
 		if (searchable.value) {
 			if (inputSearchEl.value) {
-				inputSearchEl.value.focus()
+				inputSearchEl.value.focus({
+					preventScroll: true,
+				})
 			}
 		}
 	}

package/src/components/VvDropdown/VvDropdown.vue

@@ -210,7 +210,9 @@
 					floatingEl.value,
 				)
 				if (focusableElements.length > 0) {
-					focusableElements[0].focus()
+					focusableElements[0].focus({
+						preventScroll: true,
+					})
 				}
 			})
 		}
@@ -286,9 +288,13 @@
 					document.activeElement as HTMLElement,
 				)
 				if (activeElementIndex < focusableElements.length - 1) {
-					focusableElements[activeElementIndex + 1].focus()
+					focusableElements[activeElementIndex + 1].focus({
+						preventScroll: true,
+					})
 				} else {
-					focusableElements[0].focus()
+					focusableElements[0].focus({
+						preventScroll: true,
+					})
 				}
 			}
 		})
@@ -306,9 +312,13 @@
 					document.activeElement as HTMLElement,
 				)
 				if (activeElementIndex > 0) {
-					focusableElements[activeElementIndex - 1].focus()
+					focusableElements[activeElementIndex - 1].focus({
+						preventScroll: true,
+					})
 				} else {
-					focusableElements[focusableElements.length - 1].focus()
+					focusableElements[focusableElements.length - 1].focus({
+						preventScroll: true,
+					})
 				}
 			}
 		})

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

package/src/stories/Tooltip/Tooltip.test.ts

@@ -18,7 +18,9 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	}
 
 	// check if tooltip is visible after focus
-	await parentElement.focus()
+	await parentElement.focus({
+		preventScroll: true,
+	})
 	await sleep(1200)
 	await expect(window.getComputedStyle(element)).toHaveProperty(
 		'opacity',