refactor(filter): use PolarInput

src/components/PolarInput.ce.vue

@@ -1,28 +1,26 @@
 <template>
 	<div class="kern-form-check">
 		<input
-			:id="`polar-${type}-${value}-${idSuffix}`"
+			:id="id"
 			v-model="model"
 			:class="`polar-input kern-form-check__${type}`"
 			:name="name"
 			:value="value"
 			:type="type"
-			:disabled="disabled"
+			:disabled
 		/>
-		<label
-			class="polar-input kern-label"
-			:for="`polar-${type}-${value}-${idSuffix}`"
-		>
+		<label class="polar-input kern-label" :for="id">
 			<slot />
 		</label>
 	</div>
 </template>
 
 <script setup lang="ts" generic="T extends 'checkbox' | 'radio'">
+import { useId } from 'vue'
+
 // NOTE: It is fine here that props is only used as a type in the script.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
-	idSuffix: string
 	name: string
 	type: T
 	value: string
@@ -31,6 +29,7 @@ const props = defineProps<{
 const model = defineModel<
 	typeof props.type extends 'checkbox' ? string[] : string
 >({ required: true })
+const id = useId()
 </script>
 
 <style scoped>

src/components/PolarInputGroup.ce.vue

@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="kern-fieldset">
-		<legend class="kern-label">
+		<legend class="kern-label" :class="{ 'kern-sr-only': legendSrOnly }">
 			{{ legend }}
 		</legend>
 		<div class="kern-fieldset__body">
@@ -12,6 +12,7 @@
 <script setup lang="ts">
 defineProps<{
 	legend: string
+	legendSrOnly?: boolean
 }>()
 </script>
 

src/plugins/filter/components/FilterCategory.ce.vue

@@ -1,7 +1,6 @@
 <template>
 	<FilterSection
-		v-for="(category, index) of filterStore.selectedLayerConfiguration
-			.categories"
+		v-for="(category, index) of filterStore.categories"
 		:key="index"
 		:title="
 			$t(
@@ -13,7 +12,18 @@
 			)
 		"
 	>
-		<div class="polar-filter-category-values">
+		<PolarInputGroup
+			legend-sr-only
+			:legend="
+				$t(
+					($) =>
+						$['layer'][filterStore.selectedLayerId]['category'][
+							category.targetProperty
+						]['title'],
+					{ ns: PluginId, defaultValue: category.targetProperty }
+				)
+			"
+		>
 			<KernButton
 				v-if="category.selectAll"
 				class="kern-btn--block kern-btn--tertiary"
@@ -22,28 +32,13 @@
 			>
 				{{ $t(($) => $.category.deselectAll, { ns: PluginId }) }}
 			</KernButton>
-			<component
-				:is="
-					coreStore.layout === 'standard'
-						? KernBlockButtonCheckbox
-						: KernCheckbox
-				"
+			<PolarInput
 				v-for="categoryValue of category.knownValues"
 				:key="flattenValue(categoryValue)"
-				:icon="typeof categoryValue !== 'string' && categoryValue.icon"
-				:model-value="
-					filterStore.getCategoryStatus(
-						category.targetProperty,
-						expandValue(categoryValue)
-					)
-				"
-				@update:model-value="
-					filterStore.setCategoryStatus(
-						category.targetProperty,
-						expandValue(categoryValue),
-						$event
-					)
-				"
+				v-model="category.selection"
+				type="checkbox"
+				:name="category.targetProperty"
+				:value="flattenValue(categoryValue)"
 			>
 				{{
 					$t(
@@ -54,23 +49,21 @@
 						{ ns: PluginId, defaultValue: flattenValue(categoryValue) }
 					)
 				}}
-			</component>
-		</div>
+			</PolarInput>
+		</PolarInputGroup>
 	</FilterSection>
 </template>
 
 <script setup lang="ts">
-import KernBlockButtonCheckbox from '@/components/kern/KernBlockButtonCheckbox.ce.vue'
 import KernButton from '@/components/kern/KernButton.ce.vue'
-import KernCheckbox from '@/components/kern/KernCheckbox.ce.vue'
-import { useCoreStore } from '@/core/stores'
+import PolarInput from '@/components/PolarInput.ce.vue'
+import PolarInputGroup from '@/components/PolarInputGroup.ce.vue'
 
 import { useFilterStore } from '../store'
 import { PluginId } from '../types'
-import { expandValue, flattenValue } from '../utils/flattenAndExpandValue'
+import { flattenValue } from '../utils/flattenAndExpandValue'
 import FilterSection from './FilterSection.ce.vue'
 
-const coreStore = useCoreStore()
 const filterStore = useFilterStore()
 </script>