@volverjs/ui-vue 0.0.7 → 0.0.8-beta.10

package/src/components/VvAlert/VvAlert.vue

@@ -16,27 +16,45 @@
 
 <template>
 	<div v-bind="hasProps">
-		<div class="vv-alert__header">
+		<div
+			v-if="
+				$slots.header ||
+				$slots.title ||
+				$slots.close ||
+				$slots['title::before'] ||
+				$slots['title::after'] ||
+				title ||
+				dismissable ||
+				autoClose
+			"
+			class="vv-alert__header"
+		>
 			<VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
 			<!-- @slot Header slot -->
 			<slot name="header">
 				<!-- @slot Before title slot -->
 				<slot name="title::before" />
 				<strong :id="hasTitleId" class="vv-alert__title">
-					{{ title }}
+					<!-- @slot Title slot -->
+					<slot name="title">
+						{{ title }}
+					</slot>
 				</strong>
 				<!-- @slot After title slot -->
 				<slot name="title::after" />
 			</slot>
-			<button
-				v-if="dismissable || autoClose"
-				class="vv-alert__close"
-				type="button"
-				:aria-label="closeLabel"
-				@click.stop="close"
-			>
-				<div class="vv-alert__close-mask"></div>
-			</button>
+			<!-- @slot Close button slot -->
+			<slot name="close" v-bind="{ close }">
+				<button
+					v-if="dismissable || autoClose"
+					class="vv-alert__close"
+					type="button"
+					:aria-label="closeLabel"
+					@click.stop="close"
+				>
+					<div class="vv-alert__close-mask"></div>
+				</button>
+			</slot>
 		</div>
 		<div v-if="$slots.default || content" class="vv-alert__content">
 			<!-- @slot Content slot -->

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,7 +1,12 @@
 <script lang="ts">
 	export default {
 		name: 'VvCombobox',
-		components: { VvDropdown, VvDropdownOption, VvDropdownOptgroup },
+		components: {
+			VvDropdown,
+			VvDropdownOption,
+			VvDropdownOptgroup,
+			VvButton,
+		},
 	}
 </script>
 
@@ -14,6 +19,7 @@
 	import VvDropdownOptgroup from '../VvDropdown/VvDropdownOptgroup.vue'
 	import VvSelect from '../VvSelect/VvSelect.vue'
 	import VvBadge from '../VvBadge/VvBadge.vue'
+	import VvButton from '../VvButton/VvButton.vue'
 	import HintSlotFactory from '../common/HintSlot'
 	import type { Option } from '../../types/generic'
 	import { DropdownRole } from '../../constants'
@@ -101,7 +107,9 @@
 	const onAfterExpand = () => {
 		if (searchable.value) {
 			if (inputSearchEl.value) {
-				inputSearchEl.value.focus()
+				inputSearchEl.value.focus({
+					preventScroll: true,
+				})
 			}
 		}
 	}
@@ -131,6 +139,9 @@
 	const hasSearchId = computed(() => `${hasId.value}-search`)
 	const hasLabelId = computed(() => `${hasId.value}-label`)
 
+	// ref
+	const dropdownEl = ref()
+
 	// icons
 	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
 		icon,
@@ -297,34 +308,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
@@ -362,6 +375,7 @@
 		</label>
 		<div ref="wrapperEl" class="vv-select__wrapper">
 			<VvDropdown
+				ref="dropdownEl"
 				v-model="expanded"
 				v-bind="dropdownProps"
 				:role="DropdownRole.listbox"
@@ -559,9 +573,17 @@
 						</slot>
 					</VvDropdownOption>
 				</template>
-				<template v-if="$slots['dropdown::after']" #after>
+				<template #after>
 					<!-- @slot Slot after dropdown items -->
-					<slot name="dropdown::after" />
+					<slot name="dropdown::after">
+						<!-- Close button if dropdown custom position is enabled and floating-ui disabled -->
+						<VvButton
+							v-if="dropdownEl?.dropdownCustomPosition === 'true'"
+							label="Close"
+							modifiers="secondary"
+							@click="dropdownEl.hide()"
+						/>
+					</slot>
 				</template>
 			</VvDropdown>
 		</div>

package/src/components/VvCombobox/index.ts

@@ -132,6 +132,7 @@ export const VvComboboxProps = {
 	 */
 	dropdownModifiers: {
 		type: [String, Array] as PropType<string | string[]>,
+		default: 'mobile',
 	},
 	/**
 	 * Open dropdown on focus

package/src/components/VvDropdown/VvDropdown.vue

@@ -43,7 +43,7 @@
 
 	// template elements
 	const localReferenceEl = ref<HTMLElement | null>(null)
-	const floatingEl: Ref<HTMLElement | null> = ref(null)
+	const floatingEl: Ref = ref()
 	const arrowEl = ref<HTMLElement | null>(null)
 	const listEl = ref<HTMLUListElement | null>(null)
 	const referenceEl = computed({
@@ -53,6 +53,25 @@
 		},
 	})
 
+	// ref to store the value of css-var "--dropdown-custom-position"
+	const dropdownCustomPosition = ref()
+
+	// set dropdownCustomPosition value from css-var "--dropdown-custom-position"
+	const onChangeDropdownCustomPosition = () => {
+		dropdownCustomPosition.value = window
+			.getComputedStyle(floatingEl.value)
+			.getPropertyValue('--dropdown-custom-position')
+			?.trim()
+	}
+
+	// observe dropdown style for "--dropdown-custom-position" css var to disable floating-ui
+	onMounted(() => {
+		useMutationObserver(floatingEl.value, onChangeDropdownCustomPosition, {
+			attributeFilter: ['style'],
+			window,
+		})
+	})
+
 	// floating ui
 	const middleware = computed(() => {
 		const toReturn = []
@@ -138,17 +157,22 @@
 			middleware,
 		},
 	)
-	const dropdownPlacement = computed(() => ({
-		position: strategy.value,
-		top: `${y.value ?? 0}px`,
-		left: `${x.value ?? 0}px`,
-		maxWidth: maxWidth.value,
-		maxHeight: maxHeight.value,
-		width:
-			props.triggerWidth && referenceEl.value
-				? `${referenceEl.value.offsetWidth}px`
-				: undefined,
-	}))
+	const dropdownPlacement = computed(() => {
+		if (dropdownCustomPosition?.value === 'true') {
+			return {}
+		}
+		return {
+			position: strategy.value,
+			top: `${y.value ?? 0}px`,
+			left: `${x.value ?? 0}px`,
+			maxWidth: maxWidth.value,
+			maxHeight: maxHeight.value,
+			width:
+				props.triggerWidth && referenceEl.value
+					? `${referenceEl.value.offsetWidth}px`
+					: undefined,
+		}
+	})
 
 	// placement
 	const side = computed(() => placement.value.split('-')[0])
@@ -162,6 +186,9 @@
 			}[side.value] ?? 'bottom'),
 	)
 	const arrowPlacement = computed(() => {
+		if (dropdownCustomPosition?.value === 'true') {
+			return {}
+		}
 		if (['bottom', 'top'].includes(staticSide.value)) {
 			return {
 				right: `${middlewareData.value.arrow?.x ?? 0}px`,
@@ -201,7 +228,7 @@
 	const init = (el: HTMLElement) => {
 		referenceEl.value = el
 	}
-	defineExpose({ toggle, show, hide, init })
+	defineExpose({ toggle, show, hide, init, dropdownCustomPosition })
 	watch(expanded, (newValue) => {
 		if (newValue && props.autofocusFirst) {
 			nextTick(() => {
@@ -210,7 +237,9 @@
 					floatingEl.value,
 				)
 				if (focusableElements.length > 0) {
-					focusableElements[0].focus()
+					focusableElements[0].focus({
+						preventScroll: true,
+					})
 				}
 			})
 		}
@@ -286,9 +315,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 +339,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,
+					})
 				}
 			}
 		})
@@ -334,14 +371,10 @@
 		}
 	})
 	onKeyStroke([' ', 'Enter'], (e) => {
-		if (
-			expanded.value &&
-			focused.value &&
-			e.target !== document.activeElement
-		) {
-			e.preventDefault()
-			const activeElement = document.activeElement as HTMLElement
-			activeElement.click()
+		const htmlEl = e.target as HTMLElement
+
+		if (expanded.value && focused.value && htmlEl) {
+			htmlEl?.click()
 		}
 	})
 	const onTransitionBeforeEnter = () => {

package/src/components/VvDropdown/index.ts

@@ -1,11 +1,17 @@
 import type { PropType } from 'vue'
-import { DropdownProps, IdProps, ModifiersProps } from '../../props'
+import { DropdownProps, IdProps } from '../../props'
 import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
 	...IdProps,
-	...ModifiersProps,
 	...DropdownProps,
+	/**
+	 * Component BEM modifiers
+	 */
+	modifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+		default: 'mobile',
+	},
 	/**
 	 * Show / hide dropdown programmatically
 	 */

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/Alert/Alert.settings.ts

@@ -87,6 +87,16 @@ export const argTypes = {
 			},
 		},
 	},
+	close: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
 	default: {
 		control: {
 			type: 'text',

package/src/stories/Alert/Alert.test.ts

@@ -16,7 +16,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	const alertHeaderEl =
 		element.getElementsByClassName('vv-alert__header')?.[0]
-	const closeButton = alertHeaderEl?.lastChild as HTMLElement
+	const closeButtonEl = element.getElementsByClassName('vv-alert__close')?.[0]
 	const alertContentEl =
 		element.getElementsByClassName('vv-alert__content')?.[0]
 	const alertFooterEl =
@@ -32,14 +32,18 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	// dismissable
 	if (args.dismissable) {
 		expect(element).toHaveClass('vv-alert--dismissable')
-		expect(closeButton).toHaveClass('vv-alert__close')
+		expect(closeButtonEl).not.toBeUndefined()
 	}
 
 	// autoclose
 	if (args.autoClose) {
 		expect(element).toHaveClass('vv-alert--auto-close')
-		expect(closeButton).toHaveClass('vv-alert__close')
-		expect(closeButton.firstChild).toHaveClass('vv-alert__close-mask')
+		expect(closeButtonEl).not.toBeUndefined()
+		expect(closeButtonEl.firstChild).toHaveClass('vv-alert__close-mask')
+	}
+
+	if (!args.autoClose && !args.dismissable) {
+		expect(closeButtonEl).toBeUndefined()
 	}
 
 	// icon

package/src/stories/Combobox/Combobox.settings.ts

@@ -19,7 +19,28 @@ export const defaultArgs = {
 	...propsToObject(VvComboboxProps),
 	name: 'vv-combobox',
 	maxValues: undefined,
-	options: ['Option 1', 'Option 2', 'Option 3'],
+	options: [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7',
+		'Option 8',
+		'Option 9',
+		'Option 10',
+		'Option 11',
+		'Option 12',
+		'Option 13',
+		'Option 14',
+		'Option 15',
+		'Option 16',
+		'Option 17',
+		'Option 18',
+		'Option 19',
+		'Option 20',
+	],
 	placeholder: 'Select an option',
 	label: 'Combobox label',
 }

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