fixup! feat: add NcFormBoxSelectNative

Author: ShGKme

src/components/NcFormBox/NcFormBoxItem.vue

@@ -33,6 +33,8 @@ const {
 	class?: VueClassType
 	/** Interactive item classes */
 	itemClasses?: VueClassType
+	/** Disable clickable overlay from the interactive item element to manually implement */
+	pure?: boolean
 }>()
 
 defineEmits<{
@@ -52,7 +54,15 @@ const slots = defineSlots<{
 		descriptionId?: string
 	}>
 	/** Icon content */
-	icon?: Slot
+	icon?: Slot<{
+		/** IDRef of the description element if present */
+		descriptionId?: string
+	}>
+	/** Extra content slot for additional overlays */
+	extra?: Slot<{
+		/** IDRef of the description element if present */
+		descriptionId?: string
+	}>
 }>()
 
 const { formBoxItemClass } = useNcFormBox()
@@ -75,15 +85,15 @@ const hasDescription = () => !!description || !!slots.description
 		<span :class="$style.formBoxItem__content">
 			<component
 				:is="tag"
-				:class="[$style.formBoxItem__element, itemClasses]"
+				:class="[$style.formBoxItem__element, itemClasses, { [$style.formBoxItem__element_clickable]: !pure }]"
 				v-bind="$attrs"
 				@click="$emit('click', $event)">
 				<slot :description-id>
 					{{ label || '⚠️ Label is missing' }}
 				</slot>
 			</component>
 			<span v-if="hasDescription()" :id="descriptionId" :class="$style.formBoxItem__description">
-				<slot name="description">
+				<slot name="description" :description-id>
 					{{ description }}
 				</slot>
 			</span>
@@ -93,6 +103,7 @@ const hasDescription = () => !!description || !!slots.description
 				⚠️ Icon is missing
 			</slot>
 		</span>
+		<slot name="extra" :description-id />
 	</div>
 </template>
 
@@ -169,7 +180,7 @@ const hasDescription = () => !!description || !!slots.description
 
 // A trick for accessibility:
 // make entire component clickable while internally splitting the interactive item and the description
-.formBoxItem__element::after {
+.formBoxItem__element_clickable::after {
 	content: '';
 	position: absolute;
 	inset: 0;

src/components/NcFormBoxSelectNative/NcFormBoxSelectNative.vue

@@ -4,9 +4,11 @@
   -->
 
 <script setup lang="ts" generic="T extends string">
-import { computed, useId, useTemplateRef } from 'vue'
-import IconUnfoldMoreHorizontal from 'vue-material-design-icons/UnfoldMoreHorizontal.vue'
+import { mdiUnfoldMoreHorizontal } from '@mdi/js'
+import { computed } from 'vue'
 import NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
+import { createElementId } from '../../utils/createElementId.ts'
 
 /** Selected value */
 const modelValue = defineModel<T>({ required: true })
@@ -27,8 +29,7 @@ const {
 	disabled?: boolean
 }>()
 
-const selectId = useId()
-const selectElement = useTemplateRef('select')
+const selectId = createElementId()
 const selectedLabel = computed(() => options.find((option) => option.value === modelValue.value)?.label)
 </script>
 
@@ -39,15 +40,16 @@ const selectedLabel = computed(() => options.find((option) => option.value === m
 		:label
 		:description="selectedLabel"
 		:disabled
-		inverted-accent
-		@click.prevent="selectElement!.showPicker() /* Not available in old Safari */">
-		<template #icon="{ descriptionId }">
-			<IconUnfoldMoreHorizontal :size="20" />
+		pure
+		inverted-accent>
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiUnfoldMoreHorizontal" inline />
+		</template>
+		<template #extra="{ descriptionId }">
 			<select
 				:id="selectId"
-				ref="select"
 				v-model="modelValue"
-				class="hidden-select"
+				:class="$style.hiddenSelect"
 				:aria-describedby="descriptionId">
 				<option v-for="option in options" :key="option.value" :value="option.value">
 					{{ option.label }}
@@ -58,19 +60,15 @@ const selectedLabel = computed(() => options.find((option) => option.value === m
 </template>
 
 <!-- TODO: module -->
-<style scoped>
-.hidden-select {
+<style lang="scss" module>
+.hiddenSelect {
 	position: absolute;
 	inset: 0;
 	margin: 0;
 	height: auto;
+	cursor: pointer;
 	/* TODO: does it work well cross-browser? */
 	opacity: 0;
-	pointer-events: none;
-
-	option {
-		pointer-events: all;
-	}
 }
 </style>