@volverjs/ui-vue 0.0.8-beta.7 → 0.0.8-beta.8

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'
@@ -133,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,
@@ -366,11 +375,13 @@
 		</label>
 		<div ref="wrapperEl" class="vv-select__wrapper">
 			<VvDropdown
+				ref="dropdownEl"
 				v-model="expanded"
 				v-bind="dropdownProps"
 				:role="DropdownRole.listbox"
 				@after-expand="onAfterExpand"
 				@after-collapse="onAfterCollapse"
+				@click="$event.stopPropagation()"
 			>
 				<template
 					v-if="searchable || $slots['dropdown::before']"
@@ -563,9 +574,16 @@
 						</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"
+						/>
+					</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(() => {
@@ -344,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 = () => {
@@ -380,6 +403,7 @@
 			ref="floatingEl"
 			:style="dropdownPlacement"
 			:class="bemCssClasses"
+			@click="hide()"
 		>
 			<div
 				v-if="props.arrow"

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