@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/src/components/VvDialog/index.ts

@@ -1,10 +1,27 @@
+import { IdProps } from '@/props'
+
 export const VvDialogEvents = ['open', 'close', 'update:modelValue']
 
 export const VvDialogProps = {
-	id: { type: String, required: true },
+	...IdProps,
+	/**
+	 * Dialog title
+	 */
 	title: String,
+	/**
+	 * Show / hide dialog programmatically
+	 */
 	modelValue: Boolean,
+	/**
+	 * Dialog transition
+	 */
 	transition: { type: String, default: 'fade-block' },
+	/**
+	 * Dialog size
+	 */
 	size: String,
+	/**
+	 * Close dialog on click outside
+	 */
 	autoClose: { type: Boolean, default: true },
 }

package/src/components/VvDropdown/VvDropdown.vue

@@ -1,127 +1,376 @@
 <script lang="ts">
 	export default {
 		name: 'VvDropdown',
+		inheritAttrs: false,
 	}
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
+	import type { Ref } from 'vue'
+	import {
+		useFloating,
+		offset,
+		flip,
+		autoUpdate,
+		shift,
+		autoPlacement,
+		arrow,
+		size,
+	} from '@floating-ui/vue'
 	import { VvDropdownProps } from '@/components/VvDropdown'
-	import type { Option } from '@/types/generic'
+	import type {
+		AutoPlacementOptions,
+		FlipOptions,
+		OffsetOptions,
+		ShiftOptions,
+		SizeOptions,
+	} from '@/types/floating-ui'
 
-	// props, emit
+	// props, emit and attrs
 	const props = defineProps(VvDropdownProps)
 	const emit = defineEmits(['update:modelValue'])
+	const { id } = toRefs(props)
+	const hasId = useUniqueId(id)
+	const attrs = useAttrs()
+	const maxWidth = ref('auto')
+	const maxHeight = ref('auto')
 
-	// data
-	const hasId = computed(() => String(props.id || nanoid()))
-	const { modifiers, disabled } = toRefs(props)
+	// template elements
+	const localReferenceEl = ref<HTMLElement | null>(null)
+	const floatingEl: Ref<HTMLElement | null> = ref(null)
+	const arrowEl = ref<HTMLElement | null>(null)
+	const listEl = ref<HTMLUListElement | null>(null)
+	const referenceEl = computed({
+		get: () => props.reference ?? localReferenceEl.value,
+		set: (newValue) => {
+			localReferenceEl.value = newValue
+		},
+	})
 
-	// options
-	const { getOptionLabel, getOptionValue } = useOptions(props)
+	// floating ui
+	const middleware = computed(() => {
+		const toReturn = []
 
-	// styles
-	const { bemCssClasses: dropdownClasses } = useBemModifiers('vv-dropdown', {
-		modifiers,
-		disabled,
-	})
+		if (props.autoPlacement) {
+			if (typeof props.autoPlacement === 'boolean') {
+				toReturn.push(autoPlacement())
+			} else {
+				toReturn.push(
+					autoPlacement(props.autoPlacement as AutoPlacementOptions),
+				)
+			}
+		} else if (props.flip) {
+			if (typeof props.flip === 'boolean') {
+				toReturn.push(flip())
+			} else {
+				toReturn.push(flip(props.flip as FlipOptions))
+			}
+		}
 
-	/**
-	 * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
-	 * @param {String | Option} option
-	 */
-	function getChecked(option: string | Option) {
-		if (Array.isArray(props.modelValue)) {
-			// check if contain whole option or option value
-			return (
-				contains(option, props.modelValue) ||
-				contains(getOptionValue(option), props.modelValue)
-			)
+		if (props.shift) {
+			if (typeof props.shift === 'boolean') {
+				toReturn.push(shift())
+			} else {
+				toReturn.push(shift(props.shift as ShiftOptions))
+			}
+		}
+
+		if (props.size) {
+			const apply = ({
+				availableWidth,
+				availableHeight,
+			}: {
+				availableWidth: number
+				availableHeight: number
+			}) => {
+				maxWidth.value = `${availableWidth}px`
+				maxHeight.value = `${availableHeight}px`
+			}
+			if (typeof props.size === 'boolean') {
+				toReturn.push(
+					size({
+						apply,
+					}),
+				)
+			} else {
+				toReturn.push(
+					size({
+						...(props.size as SizeOptions),
+						apply,
+					}),
+				)
+			}
 		}
-		// check if modelValue is equal to option or option value
-		return (
-			equals(option, props.modelValue) ||
-			equals(getOptionValue(option), props.modelValue)
-		)
-	}
 
-	/**
-	 * Retrieve the disabled state of an option based on prop "disabled" or the disabled attribute
-	 * @param {String | Option} option
-	 */
-	function getDisabled(option: string | Option): boolean {
-		if (typeof option === 'string' || option.disabled === undefined) {
-			return disabled.value
+		if (props.offset) {
+			toReturn.push(offset(Number(props.offset)))
+
+			if (['string', 'number'].includes(typeof props.offset)) {
+				toReturn.push(offset(Number(props.offset)))
+			} else {
+				toReturn.push(offset(props.offset as OffsetOptions))
+			}
 		}
-		return option.disabled
-	}
 
-	/**
-	 * Function triggered on input of checkbox or radio (multple or single mode)
-	 * @param event on input event (checkbox or radio input)
-	 */
-	function onInput(value: string | Option) {
-		if (props.disabled) {
-			return
+		if (props.arrow) {
+			toReturn.push(
+				arrow({
+					element: arrowEl,
+				}),
+			)
+		}
+
+		return toReturn
+	})
+	const { x, y, strategy, middlewareData, placement } = useFloating(
+		referenceEl,
+		floatingEl,
+		{
+			whileElementsMounted: autoUpdate,
+			placement: props.placement,
+			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,
+	}))
+
+	// placement
+	const side = computed(() => placement.value.split('-')[0])
+	const staticSide = computed(
+		() =>
+			({
+				top: 'bottom',
+				right: 'left',
+				bottom: 'top',
+				left: 'right',
+			}[side.value] ?? 'bottom'),
+	)
+	const arrowPlacement = computed(() => {
+		if (['bottom', 'top'].includes(staticSide.value)) {
+			return {
+				right: `${middlewareData.value.arrow?.x ?? 0}px`,
+				[staticSide.value]: `${
+					-(arrowEl.value?.offsetWidth ?? 0) / 2
+				}px`,
+			}
 		}
+		return {
+			top: `${middlewareData.value.arrow?.y ?? 0}px`,
+			[staticSide.value]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`,
+		}
+	})
 
-		let toReturn: string | string[] | Option | Option[] | undefined = value
-		// Check multiple prop, override value with array and remove or add the value
-		if (props.multiple) {
-			// check maxValues prop and block check new values
-			if (Array.isArray(props.modelValue)) {
-				if (
-					props.maxValues !== undefined &&
-					props.maxValues >= 0 &&
-					props.modelValue?.length >= props.maxValues
-				) {
-					if (!contains(value, props.modelValue)) {
-						// maxValues reached
-						return
-					}
+	// visibility
+	const modelValue = useVModel(props, 'modelValue', emit)
+	const localModelValue = ref(false)
+	const expanded = computed({
+		get: () => modelValue.value ?? localModelValue.value,
+		set: (newValue) => {
+			if (modelValue.value === undefined) {
+				localModelValue.value = newValue
+				return
+			}
+			modelValue.value = newValue
+		},
+	})
+	const show = () => {
+		expanded.value = true
+	}
+	const hide = () => {
+		expanded.value = false
+	}
+	const toggle = () => {
+		expanded.value = !expanded.value
+	}
+	const init = (el: HTMLElement) => {
+		referenceEl.value = el
+	}
+	watch(expanded, (newValue) => {
+		if (newValue && props.autofocusFirst) {
+			nextTick(() => {
+				// focus first item
+				const focusableElements = getKeyboardFocusableElements(
+					floatingEl.value,
+				)
+				if (focusableElements.length > 0) {
+					focusableElements[0].focus()
 				}
-				toReturn = contains(value, props.modelValue)
-					? removeFromList(value, props.modelValue)
-					: [...props.modelValue, value]
-			} else {
-				toReturn = [value as Option]
+			})
+		}
+	})
+	onClickOutside(
+		floatingEl,
+		() => {
+			if (props.autoClose) {
+				expanded.value = false
 			}
-		} else if (props.unselectable && value === props.modelValue) {
-			toReturn = undefined
+		},
+		{ ignore: [referenceEl] },
+	)
+
+	// aria
+	const hasAriaLabelledby = computed(() => {
+		return referenceEl.value?.getAttribute('id') ?? undefined
+	})
+	const referenceAria = computed(() => ({
+		'aria-controls': hasId.value,
+		'aria-haspopup': true,
+		'aria-expanded': expanded.value,
+	}))
+
+	// provide to dropdown
+	const { component: VvDropdownTriggerProvider, bus } =
+		useProvideDropdownTrigger({
+			reference: referenceEl,
+			id: hasId,
+			expanded,
+			aria: referenceAria,
+		})
+	bus.on('click', toggle)
+
+	// provide top dropdown item
+	const { role, modifiers } = toRefs(props)
+	const { itemRole } = useProvideDropdownItem({ role, expanded })
+
+	// styles
+	const bemCssClasses = useBemModifiers(
+		'vv-dropdown',
+		modifiers,
+		computed(() => ({
+			arrow: props.arrow,
+		})),
+	)
+
+	// focus
+	const { focused } = useFocusWithin(floatingEl)
+	function getKeyboardFocusableElements(element: Element | null) {
+		if (!element) {
+			return []
 		}
-		emit('update:modelValue', toReturn)
+		return [
+			...element.querySelectorAll(
+				'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+			),
+		].filter(
+			(el) =>
+				!el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
+		) as HTMLElement[]
+	}
+	const focusNext = () => {
+		nextTick(() => {
+			if (focused.value) {
+				const focusableElements = getKeyboardFocusableElements(
+					floatingEl.value,
+				)
+				if (focusableElements.length === 0 || !document.activeElement) {
+					return
+				}
+				const activeElementIndex = focusableElements.indexOf(
+					document.activeElement as HTMLElement,
+				)
+				if (activeElementIndex < focusableElements.length - 1) {
+					focusableElements[activeElementIndex + 1].focus()
+				} else {
+					focusableElements[0].focus()
+				}
+			}
+		})
+	}
+	const focusPrev = () => {
+		nextTick(() => {
+			if (focused.value) {
+				const focusableElements = getKeyboardFocusableElements(
+					floatingEl.value,
+				)
+				if (focusableElements.length === 0 || !document.activeElement) {
+					return
+				}
+				const activeElementIndex = focusableElements.indexOf(
+					document.activeElement as HTMLElement,
+				)
+				if (activeElementIndex > 0) {
+					focusableElements[activeElementIndex - 1].focus()
+				} else {
+					focusableElements[focusableElements.length - 1].focus()
+				}
+			}
+		})
 	}
+
+	// keyboard
+	onKeyStroke('Escape', (e) => {
+		if (expanded.value) {
+			e.preventDefault()
+			hide()
+		}
+	})
+	onKeyStroke('ArrowDown', (e) => {
+		if (expanded.value && focused.value) {
+			e.preventDefault()
+			focusNext()
+		}
+	})
+	onKeyStroke('ArrowUp', (e) => {
+		if (expanded.value && focused.value) {
+			e.preventDefault()
+			focusPrev()
+		}
+	})
+	onKeyStroke([' ', 'Enter'], (e) => {
+		if (expanded.value && focused.value) {
+			e.preventDefault()
+			const activeElement = document.activeElement as HTMLElement
+			activeElement.click()
+		}
+	})
 </script>
 
 <template>
-	<ul :id="hasId" :class="dropdownClasses" role="listbox">
-		<li v-if="!options?.length" role="option">
-			<label>
-				{{ labelNoResults }}
-			</label>
-		</li>
-		<li
-			v-for="(option, index) in options"
-			:key="index"
-			role="option"
-			:aria-selected="getChecked(option)"
+	<VvDropdownTriggerProvider>
+		<slot
+			v-bind="{ init, show, hide, toggle, expanded, aria: referenceAria }"
+		/>
+	</VvDropdownTriggerProvider>
+	<Transition :name="transitionName">
+		<div
+			v-show="expanded"
+			ref="floatingEl"
+			:style="dropdownPlacement"
+			:class="bemCssClasses"
 		>
-			<label
-				:for="`dropdown-${index}-${hasId}`"
-				@click.prevent="onInput(getOptionValue(option))"
+			<div
+				v-if="props.arrow"
+				ref="arrowEl"
+				:style="arrowPlacement"
+				class="vv-dropdown__arrow"
+			></div>
+			<slot name="before" v-bind="{ expanded }" />
+			<ul
+				v-bind="attrs"
+				:id="hasId"
+				ref="listEl"
+				:tabindex="!expanded ? -1 : undefined"
+				:role="role"
+				:aria-labelledby="hasAriaLabelledby"
+				class="vv-dropdown__list"
 			>
-				<input
-					:id="`dropdown-${index}-${hasId}`"
-					:type="multiple ? 'checkbox' : 'radio'"
-					:value="getOptionValue(option)"
-					:checked="getChecked(option)"
-					:disabled="getDisabled(option)"
-					:name="name"
-					tabindex="-1"
-					aria-hidden="true"
+				<slot
+					name="items"
+					v-bind="{
+						role: itemRole,
+					}"
 				/>
-				{{ getOptionLabel(option) }}
-			</label>
-		</li>
-	</ul>
+			</ul>
+			<slot name="after" v-bind="{ expanded }" />
+		</div>
+	</Transition>
 </template>

package/src/components/VvDropdown/VvDropdownAction.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownAction',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvAction from '@/components/VvAction/VvAction.vue'
+	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+	import { ActionProps, ModifiersProps } from '@/props'
+
+	// props
+	const props = defineProps({
+		...ActionProps,
+		...ModifiersProps,
+	})
+
+	/**
+	 * @description Define component classes with BEM style.
+	 * @returns {Array} The component classes.
+	 */
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-dropdown-action', modifiers)
+</script>
+
+<template>
+	<VvDropdownItem>
+		<VvAction
+			v-bind="{
+				disabled,
+				pressed,
+				active,
+				type,
+				to,
+				href,
+				target,
+				rel,
+			}"
+			:class="bemCssClasses"
+		>
+			<slot />
+		</VvAction>
+	</VvDropdownItem>
+</template>

package/src/components/VvDropdown/VvDropdownItem.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownItem',
+	}
+</script>
+
+<script setup lang="ts">
+	const { role, expanded } = useInjectedDropdownItem()
+	const element = ref(null)
+	useProvideDropdownAction({ expanded })
+	const hovered = useElementHover(element)
+	const { focused } = useFocus(element)
+	const { focused: focusedWithin } = useFocusWithin(element)
+
+	// focus item on hover
+	watch(hovered, (newValue) => {
+		if (newValue) {
+			focused.value = true
+		}
+	})
+</script>
+
+<template>
+	<li
+		v-bind="{ role }"
+		ref="element"
+		class="vv-dropdown__item"
+		:class="{ 'focus-visible': focused || focusedWithin }"
+	>
+		<slot />
+	</li>
+</template>

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+	export default {
+		name: 'VvDropdownOption',
+	}
+</script>
+
+<script setup lang="ts">
+	import VvDropdownItem from '@/components/VvDropdown/VvDropdownItem.vue'
+	import {
+		DisabledProps,
+		ModifiersProps,
+		SelectedProps,
+		UnselectableProps,
+	} from '@/props'
+
+	// props
+	const props = defineProps({
+		...DisabledProps,
+		...SelectedProps,
+		...UnselectableProps,
+		...ModifiersProps,
+		deselectHintLabel: {
+			type: String,
+		},
+		selectHintLabel: {
+			type: String,
+		},
+		selectedHintLabel: {
+			type: String,
+		},
+	})
+
+	// style
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-dropdown-option',
+		modifiers,
+		computed(() => ({
+			disabled: props.disabled,
+			selected: props.selected,
+			unselectable: props.unselectable && props.selected,
+		})),
+	)
+</script>
+
+<template>
+	<VvDropdownItem
+		:class="bemCssClasses"
+		:tabindex="disabled ? -1 : 0"
+		:aria-selected="selected"
+		:aria-disabled="disabled"
+	>
+		<slot />
+		<span class="vv-dropdown-option__hint">
+			<slot name="hint" v-bind="{ disabled, selected, unselectable }">
+				<template v-if="selected">
+					{{ unselectable ? deselectHintLabel : selectedHintLabel }}
+				</template>
+				<template v-else-if="!disabled">
+					{{ selectHintLabel }}
+				</template>
+			</slot>
+		</span>
+	</VvDropdownItem>
+</template>

package/src/components/VvDropdown/index.ts

@@ -1,35 +1,32 @@
-import {
-	DisabledProps,
-	IdNameProps,
-	ModifiersProps,
-	OptionsProps,
-} from '@/props'
+import { DropdownProps, IdProps, ModifiersProps } from '@/props'
+import type { PropType } from 'vue'
+import { DropdownRole } from '@/constants'
 
 export const VvDropdownProps = {
-	...IdNameProps,
-	...OptionsProps,
-	...DisabledProps,
+	...IdProps,
 	...ModifiersProps,
+	...DropdownProps,
 	/**
-	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+	 * Show / hide dropdown programmatically
 	 */
 	modelValue: {
-		type: [String, Number, Boolean, Object, Array],
+		type: Boolean,
+		default: undefined,
 	},
 	/**
-	 * Label of "no results" options
+	 * Dropdown trigger element
 	 */
-	labelNoResults: { type: String, default: 'No results' },
-	/**
-	 * Manage modelValue as string[] or object[]
-	 */
-	multiple: Boolean,
-	/**
-	 * The max number of selected values
-	 */
-	maxValues: [Number, String],
+	reference: {
+		type: Object as PropType<HTMLElement | null>,
+		default: null,
+	},
 	/**
-	 * If true the input will be unselectable
+	 * Dropdown role
 	 */
-	unselectable: { type: Boolean, default: true },
+	role: {
+		type: String as PropType<DropdownRole>,
+		default: DropdownRole.menu,
+		validator: (value: DropdownRole) =>
+			Object.values(DropdownRole).includes(value),
+	},
 }