@volverjs/ui-vue 0.0.3-beta.3 → 0.0.3

package/src/components/VvCombobox/index.ts

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue'
 import {
 	ValidProps,
 	InvalidProps,
@@ -9,9 +10,10 @@ import {
 	OptionsProps,
 	IconProps,
 	TabindexProps,
-	FloatingProps,
+	FloatingLabelProps,
 	UnselectableProps,
 	IdNameProps,
+	DropdownProps,
 } from '@/props'
 
 export const VvComboboxEvents = [
@@ -33,8 +35,9 @@ export const VvComboboxProps = {
 	...ModifiersProps,
 	...OptionsProps,
 	...IconProps,
-	...FloatingProps,
+	...FloatingLabelProps,
 	...UnselectableProps,
+	...DropdownProps,
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -47,9 +50,25 @@ export const VvComboboxProps = {
 	 */
 	label: String,
 	/**
-	 * Label of "no results" options
+	 * Label for no search results
 	 */
-	labelNoResults: { type: String, default: 'No results' },
+	noResultsLabel: { type: String, default: 'No results' },
+	/**
+	 * Label for selected option hint
+	 */
+	selectedLabel: { type: String, default: 'Selected' },
+	/**
+	 * Label for deselect button
+	 */
+	deselectLabel: { type: String, default: 'Deselect' },
+	/**
+	 * Label for select option hint
+	 */
+	pressToSelectLabel: { type: String, default: 'Press enter to select' },
+	/**
+	 * Label for deselected option hint
+	 */
+	pressToDeselectLabel: { type: String, default: 'Press enter to remove' },
 	/**
 	 * Select input placeholder
 	 */
@@ -61,7 +80,10 @@ export const VvComboboxProps = {
 	/**
 	 * On searchable select is the input search placeholder
 	 */
-	searchPlaceholder: String,
+	searchPlaceholder: {
+		type: String,
+		default: 'Search...',
+	},
 	/**
 	 * The input search debounce time in ms
 	 */
@@ -85,4 +107,36 @@ export const VvComboboxProps = {
 	 * Show native select
 	 */
 	native: Boolean,
+	/**
+	 * Show badges
+	 */
+	badges: Boolean,
+	/**
+	 * Badge modifiers
+	 */
+	badgeModifiers: {
+		type: [String, Array] as PropType<string | Array<string>>,
+		default: 'action sm',
+	},
+	/**
+	 * Set dropdown width to the same as the trigger
+	 */
+	triggerWidth: {
+		...DropdownProps.triggerWidth,
+		default: true,
+	},
+	/**
+	 * Dropdown modifiers
+	 */
+	dropdownModifiers: {
+		type: [String, Array] as PropType<string | Array<string>>,
+	},
+	/**
+	 * Open dropdown on focus
+	 */
+	autoOpen: Boolean,
+	/**
+	 * Close dropdown on select (not multiple)
+	 */
+	autoClose: Boolean,
 }

package/src/components/VvDialog/VvDialog.vue

@@ -14,7 +14,7 @@
 	const emit = defineEmits(VvDialogEvents)
 
 	// data
-	const show = useVModel(props, 'modelValue', emit)
+	const isVisible = useVModel(props, 'modelValue', emit)
 	const htmlAttrIsOpen = ref(true)
 
 	// template ref
@@ -51,18 +51,26 @@
 	// methods
 	onClickOutside(modalWrapper, () => {
 		if (props.autoClose) {
-			show.value = false
+			isVisible.value = false
 		}
 	})
 
 	function closeDialog() {
-		show.value = false
+		isVisible.value = false
 	}
+
+	// keyboard
+	onKeyStroke('Escape', (e) => {
+		if (isVisible.value) {
+			e.preventDefault()
+			closeDialog()
+		}
+	})
 </script>
 
 <template>
 	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
-		<dialog v-show="show" v-bind="dialogAttrs" :class="dialogClass">
+		<dialog v-show="isVisible" v-bind="dialogAttrs" :class="dialogClass">
 			<article ref="modalWrapper" class="vv-dialog__wrapper">
 				<header v-if="$slots.header || title" class="vv-dialog__header">
 					<!-- @slot Header slot -->
@@ -72,9 +80,9 @@
 							type="button"
 							aria-label="Close"
 							class="vv-dialog__close"
-							@click.prevent="closeDialog"
+							@click.passive="closeDialog"
 						>
-							<vv-icon name="close" />
+							<VvIcon name="close" />
 						</button>
 					</slot>
 				</header>

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/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>