refactor: polar select

src/components/PolarSelect.ce.vue

@@ -1,29 +1,28 @@
 <template>
 	<div class="kern-form-input">
-		<label v-if="label" class="kern-label" :for="id">
+		<label
+			:for="resolvedId"
+			class="kern-label"
+			:class="{ 'kern-sr-only': labelSrOnly }"
+		>
 			{{ label }}
 		</label>
-		<div class="kern-form-input__select-wrapper" :class="small ? 'small' : ''">
+		<div class="kern-form-input__select-wrapper" :class="{ small }">
 			<select
-				:id="id"
+				:id="resolvedId"
+				v-model="model"
 				class="kern-form-input__select"
-				:aria-label="ariaLabel"
 				:disabled
 				:required
-				:multiple
-				:value
-				@change="onChange"
 			>
 				<option v-if="defaultLabel" value="">{{ defaultLabel }}</option>
-				<!-- Intentional for straightforward API -->
-				<!-- eslint-disable-next-line vue/no-template-shadow -->
 				<option
-					v-for="{ value, label, ariaLabel } of options"
-					:key="value"
-					:value="value"
-					:aria-label="ariaLabel"
+					v-for="option of options"
+					:key="option.value"
+					:value="option.value"
+					:aria-label="option.ariaLabel"
 				>
-					{{ label }}
+					{{ option.label }}
 				</option>
 			</select>
 		</div>
@@ -33,55 +32,26 @@
 <script setup lang="ts">
 import { computed, useId } from 'vue'
 
-const props = withDefaults(
-	defineProps<{
-		label?: string
+const props = defineProps<{
+	options: {
+		value: string | number
+		label: string
 		ariaLabel?: string
-		defaultLabel?: string
-		value: string | string[]
-		options: {
-			value: string | number
-			label: string
-			ariaLabel?: string
-			[key: string]: unknown
-		}[]
-		disabled?: boolean
-		required?: boolean
-		multiple?: boolean
-		small?: boolean
-		id?: string
-	}>(),
-	{
-		label: '',
-		ariaLabel: undefined,
-		defaultLabel: '',
-		disabled: false,
-		required: false,
-		multiple: false,
-		small: false,
-		id: '',
-	}
-)
-
-const fallbackId = useId()
-
-const id = computed(() => props.id || fallbackId)
-
-const emit = defineEmits<{
-	(e: 'update:value', value: string | string[]): void
+		[key: string]: unknown
+	}[]
+	label?: string
+	labelSrOnly?: boolean
+	defaultLabel?: string
+	disabled?: boolean
+	required?: boolean
+	small?: boolean
+	id?: string
 }>()
+const model = defineModel<string>({ required: true })
 
-function onChange(event: Event) {
-	const target = event.target as HTMLSelectElement
-	if (props.multiple) {
-		const selected = Array.from(target.selectedOptions).map((opt) => opt.value)
-		emit('update:value', selected)
-	} else {
-		emit('update:value', target.value)
-	}
-}
+const fallbackId = useId()
+const resolvedId = computed(() => props.id || fallbackId)
 </script>
-
 <style scoped>
 .kern-form-input__select-wrapper.small {
 	height: var(--kern-metric-dimension-default);

src/plugins/addressSearch/components/AddressSearch.ce.vue

@@ -12,15 +12,15 @@
 			<!-- Mapping in template to guarantee update on language change-->
 			<PolarSelect
 				v-if="hasMultipleGroups"
-				:aria-label="$t(($) => $.groupSelector, { ns: PluginId })"
+				v-model="selectedGroupId"
+				:label="$t(($) => $.groupSelector, { ns: PluginId })"
+				:label-sr-only="true"
 				:options="
 					groupSelectOptions.map(({ groupId, text }) => ({
 						value: groupId,
 						label: $t(($) => $[text], { ns: PluginId }),
 					}))
 				"
-				:value="selectedGroupId"
-				@update:value="selectedGroupId = $event as string"
 			/>
 			<div class="polar-plugin-address-search-input-wrapper">
 				<span class="kern-icon kern-icon--search" aria-hidden="true" />

src/plugins/pointerPosition/components/PointerPosition.ce.vue

@@ -7,20 +7,17 @@
 		<span class="kern-icon kern-icon--point-scan" aria-hidden="true" />
 		<PolarSelect
 			v-if="availableProjections.length > 1"
-			:value="String(selectedProjection)"
+			v-model="selectedProjection"
 			:options="
 				availableProjections.map((projection) => ({
 					value: projection.code,
 					label: projection.code,
 					ariaLabel: projection.code,
 				}))
 			"
-			:aria-label="$t(($) => $.projectionSelect.label, { ns: PluginId })"
+			:label="$t(($) => $.projectionSelect.label, { ns: PluginId })"
+			:label-sr-only="true"
 			small
-			@update:value="
-				(value) =>
-					(selectedProjection = Array.isArray(value) ? value[0] : value)
-			"
 		/>
 		<small v-else>
 			{{ selectedProjection }}

src/plugins/pointerPosition/store.ts

@@ -38,12 +38,19 @@ export const usePointerPositionStore = defineStore(
 					}))
 		)
 
-		const currentEpsgSystem = computed(
-			() => availableProjections.value[selectedProjectionIndex.value]
-		)
+		const currentEpsgSystem = computed(() => {
+			const projection =
+				availableProjections.value[selectedProjectionIndex.value]
+			if (!projection) {
+				throw new Error(
+					'selectedProjectionIndex out of bounds. This should never happen.'
+				)
+			}
+			return projection
+		})
 
 		const selectedProjection = computed({
-			get: () => currentEpsgSystem.value?.code,
+			get: () => currentEpsgSystem.value.code,
 			set: (value) => {
 				const index = availableProjections.value.findIndex(
 					({ code }) => code === value
@@ -58,7 +65,7 @@ export const usePointerPositionStore = defineStore(
 
 		const formattedPointerPosition = computed(() =>
 			pointerPosition.value.length
-				? createStringXY(currentEpsgSystem.value?.decimals ?? 4)(
+				? createStringXY(currentEpsgSystem.value.decimals)(
 						transform(
 							pointerPosition.value,
 							coreStore.map.getView().getProjection().getCode(),

src/plugins/scale/components/ScaleWidget.ce.vue

@@ -11,11 +11,11 @@
 	>
 		<PolarSelect
 			v-if="showScaleSwitcher"
-			:value="zoomValue"
+			v-model="zoomValue"
 			:options="zoomOptions"
-			:aria-label="$t(($) => $.scaleSwitcher, { ns: PluginId })"
+			:label="$t(($) => $.scaleSwitcher, { ns: PluginId })"
+			:label-sr-only="true"
 			small
-			@update:value="setZoom"
 		/>
 		<span v-else class="scale-as-a-ratio">
 			{{ scaleToOne }}
@@ -45,11 +45,12 @@ const { layoutTag, scaleToOne, scaleWithUnit, showScaleSwitcher, zoomOptions } =
 
 const { layout, zoom } = storeToRefs(coreStore)
 
-const zoomValue = computed(() => `${Math.round(zoom.value)}`)
-
-function setZoom(value) {
-	zoom.value = Number(value)
-}
+const zoomValue = computed({
+	get: () => `${Math.round(zoom.value)}`,
+	set: (value: string) => {
+		zoom.value = Number(value)
+	},
+})
 </script>
 
 <style scoped>