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

package/src/components/VvCombobox/VvCombobox.vue

@@ -1,16 +1,21 @@
 <script lang="ts">
 	export default {
 		name: 'VvCombobox',
+		components: { VvDropdown, VvDropdownOption },
 	}
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
-	import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+	import type { Ref } from 'vue'
+	import { VvComboboxProps, VvComboboxEvents } from '@/components/VvCombobox'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
+	import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+	import VvDropdownOption from '@/components/VvDropdown/VvDropdownOption.vue'
 	import VvSelect from '@/components/VvSelect/VvSelect.vue'
+	import VvBadge from '@/components/VvBadge/VvBadge.vue'
 	import HintSlotFactory from '@/components/common/HintSlot'
-	import { VvComboboxProps, VvComboboxEvents } from '@/components/VvCombobox'
+	import type { Option } from '@/types/generic'
+	import { DropdownRole } from '@/constants'
 
 	// props, emit and slots
 	const props = defineProps(VvComboboxProps)
@@ -21,21 +26,74 @@
 	const { HintSlot } = HintSlotFactory(props, slots)
 
 	// template ref
-	const dropdown = ref()
-	const inputSearch = ref()
+	const inputEl: Ref<HTMLElement | null> = ref(null)
+	const inputSearchEl: Ref<HTMLElement | null> = ref(null)
+	const wrapperEl: Ref<HTMLElement | null> = ref(null)
 
 	// focus
-	const { focused } = useComponentFocus(dropdown, emit)
+	const { focused } = useComponentFocus(inputEl, emit)
+	const { focused: focusedWithin } = useFocusWithin(wrapperEl)
 
-	// data
-	const hasId = computed(() => String(props.id || nanoid()))
+	watch(focused, (newValue) => {
+		if (!props.autoOpen) {
+			return
+		}
+		if (newValue && !expanded.value) {
+			expand()
+			return
+		}
+		if (!newValue && expanded.value && !focusedWithin.value) {
+			collapse()
+		}
+	})
+
+	watch(focusedWithin, (newValue) => {
+		if (!focused.value && !newValue && expanded.value) {
+			collapse()
+		}
+	})
+
+	// search
 	const searchText = ref('')
 	const debouncedSearchText = refDebounced(
 		searchText,
 		Number(props.debounceSearch),
 	)
-	const dropdownOpen = ref(false)
+	watch(debouncedSearchText, () =>
+		emit('change:search', debouncedSearchText.value),
+	)
+
+	// expanded
+	const expanded = ref(false)
+	const toggleExpanded = () => {
+		if (props.disabled || props.readonly) return
+		expanded.value = !expanded.value
+	}
+	const expand = () => {
+		if (props.disabled || props.readonly || expanded.value) return
+		expanded.value = true
+	}
+	const collapse = () => {
+		if (props.disabled || props.readonly || !expanded.value) return
+		expanded.value = false
+	}
+	watch(expanded, (newValue) => {
+		if (searchable.value) {
+			nextTick(() => {
+				if (newValue) {
+					if (inputSearchEl.value) {
+						inputSearchEl.value.focus()
+					}
+					return
+				}
+				searchText.value = ''
+			})
+		}
+	})
+
+	// data
 	const {
+		id,
 		icon,
 		iconPosition,
 		modifiers,
@@ -45,15 +103,16 @@
 		valid,
 		invalid,
 		floating,
+		searchable,
 	} = toRefs(props)
-
-	// emit on change search text
-	watch(debouncedSearchText, () =>
-		emit('change:search', debouncedSearchText.value),
-	)
+	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
+	const hasDropdownId = computed(() => `${hasId.value}-dropdown`)
+	const hasSearchId = computed(() => `${hasId.value}-search`)
+	const hasLabelId = computed(() => `${hasId.value}-label`)
 
 	// icons
-	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
+	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
 		icon,
 		iconPosition,
 	)
@@ -67,26 +126,30 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-select', {
+	const bemCssClasses = useBemModifiers(
+		'vv-select',
 		modifiers,
-		disabled,
-		loading,
-		readonly,
-		iconLeft: hasIconLeft,
-		iconRight: hasIconRight,
-		valid,
-		invalid,
-		dirty: isDirty,
-		focus: focused,
-		floating,
-	})
+		computed(() => ({
+			disabled: disabled.value,
+			loading: loading.value,
+			readonly: readonly.value,
+			'icon-before': Boolean(hasIconBefore.value),
+			'icon-after': Boolean(hasIconAfter.value),
+			valid: valid.value,
+			invalid: invalid.value,
+			dirty: isDirty.value,
+			focus: focused.value,
+			floating: floating.value,
+		})),
+	)
 
 	// current options, filtered or prop options
 	const hasOptions = computed(() =>
 		props.searchable ? filteredOptions.value : props.options,
 	)
 
-	const { getOptionLabel, getOptionValue } = useOptions(props)
+	const { getOptionLabel, getOptionValue, getOptionDisabled } =
+		useOptions(props)
 
 	// options filtered by search text
 	const filteredOptions = computed(() => {
@@ -97,6 +160,25 @@
 		})
 	})
 
+	/**
+	 * Check if an option exist into modelValue array (multiple) or is equal to modelValue (single)
+	 * @param {String | Option} option
+	 */
+	function getOptionSelected(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)
+			)
+		}
+		// check if modelValue is equal to option or option value
+		return (
+			equals(option, props.modelValue) ||
+			equals(getOptionValue(option), props.modelValue)
+		)
+	}
+
 	/**
 	 * Compute the label to show to the user
 	 * Check if is multiple mode, object mode or "string" mode
@@ -113,47 +195,62 @@
 		)
 	})
 
-	const hasLabel = computed(() => {
+	const hasValue = computed(() => {
 		return selectedOptions.value
 			.map((option) => getOptionLabel(option))
 			.join(props.separator)
 	})
 
-	// close dropdown on click outside
-	onClickOutside(dropdown, () => {
-		dropdown.value.open = false
+	watch(selectedOptions, () => {
+		if (!props.multiple && props.autoClose) {
+			collapse()
+		}
 	})
 
-	// Function triggered on toggle dropdown (open/close)
-	function onToggle(event: Event) {
-		const target = event.target as HTMLDetailsElement
-		dropdownOpen.value = target.open
+	/**
+	 * Function triggered on click on input
+	 */
+	const onClickInput = () => {
+		props.autoOpen ? expand() : toggleExpanded()
 	}
 
 	/**
 	 * Function triggered on input of checkbox or radio (multple or single mode)
 	 * @param event on input event (checkbox or radio input)
 	 */
-	function onInput(value: typeof props.modelValue) {
-		// close dropdown in single mode
-		if (dropdown.value && !props.multiple) {
-			dropdown.value.open = false
+	const onInput = (option: string | Option) => {
+		if (props.disabled || props.readonly) {
+			return
 		}
-		emit('update:modelValue', value)
-	}
 
-	const dropdownProps = computed(() => ({
-		name: props.name,
-		options: hasOptions.value,
-		labelKey: props.labelKey,
-		valueKey: props.valueKey,
-		disabled: props.disabled,
-		labelNoResults: props.labelNoResults,
-		multiple: props.multiple,
-		maxValues: props.maxValues,
-		modelValue: props.modelValue,
-		unselectable: props.unselectable,
-	}))
+		const value = getOptionValue(option)
+
+		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
+					}
+				}
+				toReturn = contains(value, props.modelValue)
+					? removeFromList(value, props.modelValue)
+					: [...props.modelValue, value]
+			} else {
+				toReturn = [value as Option]
+			}
+		} else if (props.unselectable && value === props.modelValue) {
+			toReturn = undefined
+		}
+		emit('update:modelValue', toReturn)
+	}
 
 	const selectProps = computed(() => ({
 		id: hasId.value,
@@ -181,70 +278,202 @@
 		placeholder: props.placeholder,
 		modelValue: props.modelValue,
 	}))
+
+	const dropdownProps = computed(() => ({
+		id: hasDropdownId.value,
+		reference: wrapperEl.value,
+		placement: props.placement,
+		transitionName: props.transitionName,
+		offset: props.offset,
+		shift: props.shift,
+		flip: props.flip,
+		autoPlacement: props.autoPlacement,
+		arrow: props.arrow,
+		autoClose: props.autoClose,
+		autofocusFirst: searchable.value ? false : props.autofocusFirst,
+		triggerWidth: props.triggerWidth,
+		modifiers: props.dropdownModifiers,
+	}))
+
+	// slots
+	const slotProps = computed(() => ({
+		valid: props.valid,
+		invalid: props.invalid,
+		modelValue: props.modelValue,
+	}))
+
+	// computed
+	onKeyStroke([' ', 'Enter'], (e) => {
+		if (props.autoOpen) {
+			return
+		}
+		if (!expanded.value && focused.value) {
+			e.preventDefault()
+			e.stopImmediatePropagation()
+			toggleExpanded()
+		}
+	})
 </script>
 
 <template>
 	<div v-if="!native" :id="hasId" :class="bemCssClasses">
 		<label
 			v-if="label"
-			:id="`${hasId}-label`"
-			:for="searchable && dropdownOpen ? `${hasId}-input` : undefined"
+			:id="hasLabelId"
+			:for="searchable ? hasSearchId : undefined"
 		>
 			{{ label }}
 		</label>
-		<details
-			ref="dropdown"
-			class="vv-select__wrapper"
-			@click="disabled || readonly ? $event.preventDefault() : null"
-			@keyup.esc="dropdown.open = false"
-			@toggle="onToggle"
-		>
-			<!-- @slot Slot to replace left icon -->
-			<summary
-				class="vv-select__input"
-				:tabindex="hasTabindex"
-				@keyup.space="searchable ? $event.preventDefault() : null"
+		<div ref="wrapperEl" class="vv-select__wrapper">
+			<VvDropdown
+				v-model="expanded"
+				v-bind="dropdownProps"
+				:role="DropdownRole.listbox"
 			>
-				<slot name="before">
-					<VvIcon
-						v-if="hasIconLeft"
-						class="vv-select__icon-left"
-						v-bind="hasIcon"
-					/>
-				</slot>
-				<!-- #region search input -->
-				<template v-if="searchable && dropdownOpen">
+				<template
+					v-if="searchable || $slots['dropdown::before']"
+					#before
+				>
+					<!-- @slot Slot before dropdown items -->
+					<slot name="dropdown::before" />
 					<input
-						:id="`${hasId}-input`"
-						ref="inputSearch"
+						v-if="searchable"
+						v-show="expanded"
+						:id="hasSearchId"
+						ref="inputSearchEl"
 						v-model="searchText"
-						role="combobox"
+						aria-autocomplete="list"
+						:aria-controls="hasDropdownId"
+						:aria-labelledby="hasLabelId"
+						:aria-describedby="hasHintId"
+						autocomplete="off"
+						spellcheck="false"
 						type="search"
+						class="vv-dropdown__search"
 						:placeholder="searchPlaceholder"
 					/>
 				</template>
-				<!-- #endregion search input -->
-				<!-- #region label of selected value/s -->
-				<template v-else>
-					{{ hasLabel || placeholder }}
+				<template #default="{ aria }">
+					<div v-if="$slots.before" class="vv-select__input-before">
+						<!-- @slot Slot before input -->
+						<slot name="before" v-bind="slotProps" />
+					</div>
+					<div class="vv-select__inner">
+						<VvIcon
+							v-if="hasIconBefore"
+							class="vv-select__icon"
+							v-bind="hasIcon"
+						/>
+						<div
+							ref="inputEl"
+							v-bind="aria"
+							:aria-labelledby="hasLabelId"
+							class="vv-select__input"
+							role="combobox"
+							:tabindex="hasTabindex"
+							@click.passive="onClickInput"
+						>
+							<!-- @slot Slot for value customization -->
+							<slot
+								name="value"
+								v-bind="{ selectedOptions, onInput }"
+							>
+								<template v-if="hasValue">
+									<template v-if="!badges">
+										{{ hasValue }}
+									</template>
+									<VvBadge
+										v-for="(
+											option, index
+										) in selectedOptions"
+										v-else
+										:key="index"
+										:modifiers="badgeModifiers"
+										class="vv-select__badge"
+									>
+										{{ getOptionLabel(option) }}
+										<button
+											v-if="
+												unselectable &&
+												!readonly &&
+												!disabled
+											"
+											:aria-label="deselectActionLabel"
+											@click.stop="onInput(option)"
+										>
+											<VvIcon name="close" />
+										</button>
+									</VvBadge>
+								</template>
+								<template v-else>
+									{{ placeholder }}
+								</template>
+							</slot>
+						</div>
+						<VvIcon
+							v-if="hasIconAfter"
+							class="vv-select__icon vv-select__icon-after"
+							v-bind="hasIcon"
+						/>
+					</div>
+					<div v-if="$slots.after" class="vv-select__input-after">
+						<!-- @slot Slot after input -->
+						<slot name="after" v-bind="slotProps" />
+					</div>
 				</template>
-				<!-- #endregion label of selected value/s -->
-				<slot name="after">
-					<VvIcon
-						v-if="hasIconRight"
-						class="vv-select__icon-right"
-						v-bind="hasIcon"
-					/>
-				</slot>
-			</summary>
-			<!-- @slot Slot to replace right icon -->
-			<VvDropdown
-				:id="`${hasId}-dropdown`"
-				v-bind="dropdownProps"
-				@update:model-value="onInput"
-			/>
-		</details>
-		<HintSlot class="vv-select__hint" />
+				<template #items>
+					<template v-if="filteredOptions.length">
+						<VvDropdownOption
+							v-for="(option, index) in filteredOptions"
+							v-bind="{
+								disabled: getOptionDisabled(option),
+								selected: getOptionSelected(option),
+								unselectable,
+								deselectHintLabel,
+								selectHintLabel,
+								selectedHintLabel,
+							}"
+							:key="index"
+							class="vv-dropdown-option"
+							@click.passive="onInput(option)"
+						>
+							<!-- @slot Slot for option customization -->
+							<slot
+								name="option"
+								v-bind="{
+									option,
+									selectedOptions,
+									selected: getOptionSelected(option),
+									disabled: getOptionDisabled(option),
+								}"
+							>
+								{{ getOptionLabel(option) }}
+							</slot>
+						</VvDropdownOption>
+					</template>
+					<VvDropdownOption
+						v-else-if="!options.length"
+						modifiers="inert"
+					>
+						<!-- @slot Slot for no options available -->
+						<slot name="no-options">
+							{{ noOptionsLabel }}
+						</slot>
+					</VvDropdownOption>
+					<VvDropdownOption v-else modifiers="inert">
+						<!-- @slot Slot for no results available -->
+						<slot name="no-results">
+							{{ noResultsLabel }}
+						</slot>
+					</VvDropdownOption>
+				</template>
+				<template v-if="$slots['dropdown::after']" #after>
+					<!-- @slot Slot after dropdown items -->
+					<slot name="dropdown::after" />
+				</template>
+			</VvDropdown>
+		</div>
+		<HintSlot :id="hasHintId" class="vv-select__hint" />
 	</div>
 	<VvSelect
 		v-else

package/src/components/VvCombobox/index.ts

@@ -1,3 +1,4 @@
+import type { PropType } from 'vue'
 import {
 	ValidProps,
 	InvalidProps,
@@ -9,9 +10,11 @@ import {
 	OptionsProps,
 	IconProps,
 	TabindexProps,
-	FloatingProps,
+	FloatingLabelProps,
 	UnselectableProps,
 	IdNameProps,
+	DropdownProps,
+	LabelProps,
 } from '@/props'
 
 export const VvComboboxEvents = [
@@ -33,8 +36,10 @@ export const VvComboboxProps = {
 	...ModifiersProps,
 	...OptionsProps,
 	...IconProps,
-	...FloatingProps,
+	...FloatingLabelProps,
 	...UnselectableProps,
+	...DropdownProps,
+	...LabelProps,
 	/**
 	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
 	 */
@@ -43,13 +48,29 @@ export const VvComboboxProps = {
 		default: undefined,
 	},
 	/**
-	 * Select input label
+	 * Label for no search results
 	 */
-	label: String,
+	noResultsLabel: { type: String, default: 'No results' },
 	/**
-	 * Label of "no results" options
+	 * Label for no options	available
 	 */
-	labelNoResults: { type: String, default: 'No results' },
+	noOptionsLabel: { type: String, default: 'No options available' },
+	/**
+	 * Label for selected option hint
+	 */
+	selectedHintLabel: { type: String, default: 'Selected' },
+	/**
+	 * Label for deselect action button
+	 */
+	deselectActionLabel: { type: String, default: 'Deselect' },
+	/**
+	 * Label for select option hint
+	 */
+	selectHintLabel: { type: String, default: 'Press enter to select' },
+	/**
+	 * Label for deselected option hint
+	 */
+	deselectHintLabel: { type: String, default: 'Press enter to remove' },
 	/**
 	 * Select input placeholder
 	 */
@@ -61,7 +82,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 +109,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>