feat(filter): migrate plugin

examples/iceberg/tsconfig.json

@@ -8,6 +8,7 @@
 		"types": [
 			"vitest/importMeta",
 			"vitest/jsdom",
+			"node",
 			"../../src/@types/vite-env.d.ts",
 			"../../src/@types/i18next.d.ts",
 			"../../src/@types/pinia.d.ts",

examples/snowbox/index.js

@@ -7,6 +7,7 @@
 	subscribe,
 	updateState,
 } from '@polar/polar'
+import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFooter from '@polar/polar/plugins/footer'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
@@ -73,7 +74,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -93,7 +94,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -173,20 +174,44 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
 			{
 				type: 'de',
 				resources: {
+					filter: {
+						layer: {
+							[reports]: {
+								category: {
+									skat: {
+										title: 'Schadensart',
+										knownValue: {
+											'1xx': 'Alle Wege- und Straßenschäden',
+											100: 'Wege und Straßen',
+											101: 'Schlagloch und Wegeschaden',
+											102: 'Verunreinigung und Vandalismus',
+										},
+									},
+									statu: {
+										title: 'Bearbeitungsstatus',
+										knownValue: {
+											todo: 'In Bearbeitung',
+											done: 'Abgeschlossen',
+										},
+									},
+								},
+							},
+						},
+					},
 					fullscreen: {
 						button: {
 							label_on: 'Mach groß',
@@ -293,7 +318,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -318,7 +343,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -344,6 +369,71 @@
 					icon: 'kern-icon-fill--share',
 				},
 			],
+			[
+				{
+					plugin: pluginFilter({
+						layers: {
+							[reports]: {
+								categories: [
+									{
+										targetProperty: 'skat',
+										knownValues: [
+											{
+												key: '100',
+												values: ['100'],
+												icon: 'kern-icon--road',
+											},
+											{
+												key: '101',
+												values: ['101'],
+												icon: 'kern-icon--remove-road',
+											},
+											{
+												key: '102',
+												values: ['102'],
+												icon: 'kern-icon--destruction',
+											},
+										],
+										selectAll: true,
+									},
+									{
+										targetProperty: 'skat',
+										knownValues: [
+											{
+												key: '1xx',
+												values: ['100', '101', '102'],
+												icon: 'kern-icon--road',
+											},
+										],
+										selectAll: true,
+									},
+									{
+										targetProperty: 'statu',
+										knownValues: [
+											{
+												key: 'todo',
+												values: ['In Bearbeitung'],
+												icon: 'kern-icon--assignment',
+											},
+											{
+												key: 'done',
+												values: ['abgeschlossen'],
+												icon: 'kern-icon--check',
+											},
+										],
+									},
+								],
+								time: {
+									targetProperty: 'start',
+									freeSelection: 'until',
+									last: [0, 7, 30],
+									pattern: 'YYYYMMDD',
+								},
+							},
+						},
+					}),
+				},
+			],
 			[
 				{
 					plugin: pluginLayerChooser({}),

src/architecture.spec.ts

@@ -33,7 +33,7 @@ describe('Architectural checks', () => {
 			.matchingPattern('^plugins/.*$')
 			.should()
 			.matchPattern(
-				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts)$'
+				'^plugins/[^/]+/((index|locales|store|types)\\.ts|utils/.*\\.ts|components/.*\\.spec\\.ts|stores/.*\\.ts)$'
 			)
 			.check()
 		expect(violations).toEqual([])

src/components/PolarCard.ce.vue

@@ -1,5 +1,5 @@
 <template>
-	<article class="kern-card kern-card--small">
+	<article class="kern-card kern-card--small" tabindex="-1">
 		<div class="kern-card__container">
 			<slot />
 		</div>

src/components/kern/KernBlockButton.ce.vue

@@ -0,0 +1,37 @@
+<template>
+	<button
+		class="kern-btn kern-btn--block kern-btn--tertiary"
+		@click="emit('click')"
+	>
+		<span
+			v-if="props.icon"
+			:class="{ 'kern-icon': true, [props.icon]: true }"
+			aria-hidden="true"
+		/>
+		<span class="kern-label">{{ props.label }}</span>
+	</button>
+</template>
+
+<script setup lang="ts">
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const emit = defineEmits<{
+	click: []
+}>()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+</style>

src/components/kern/KernBlockButtonCheckbox.ce.vue

@@ -0,0 +1,78 @@
+<template>
+	<input
+		:id="id"
+		v-model="model"
+		type="checkbox"
+		@keydown.prevent.enter="model = !model"
+		@focus="scrollVisible($event)"
+	/>
+	<label :for="id" class="kern-btn kern-btn--block kern-btn--tertiary">
+		<span
+			v-if="props.icon"
+			:class="{ 'kern-icon': true, [props.icon]: true }"
+			aria-hidden="true"
+		/>
+		<span class="kern-label">{{ props.label }}</span>
+	</label>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const id = useId()
+
+function scrollVisible(evt: FocusEvent) {
+	const target = evt.target as HTMLInputElement
+	const label = target.parentElement?.querySelector(`label[for="${target.id}"]`)
+	if (label?.scrollIntoView) {
+		label.scrollIntoView({
+			behavior: 'smooth',
+			block: 'nearest',
+			inline: 'nearest',
+		})
+	}
+}
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+label {
+	border: var(--kern-metric-border-width-default) solid transparent;
+}
+
+input[type='checkbox'] {
+	position: absolute;
+	height: 0;
+	clip-path: circle(0);
+
+	&:focus-visible + label {
+		padding: var(--kern-metric-space-none) var(--kern-metric-space-default);
+		border-radius: var(--kern-metric-border-radius-default);
+		box-shadow:
+			0 0 0 2px var(--kern-color-action-on-default),
+			0 0 0 4px var(--kern-color-action-focus-border-inside),
+			0 0 0 6px var(--kern-color-action-focus-border-outside);
+	}
+
+	&:checked + label {
+		border-color: var(--kern-color-action-default);
+	}
+}
+</style>

src/components/kern/KernBlockButtonRadioGroup.ce.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="radiogroup" role="radiogroup">
+		<template v-for="(item, idx) of props.items" :key="item.value">
+			<span
+				ref="radios"
+				role="radio"
+				:aria-checked="model === item.value"
+				:aria-labelledby="id + '*' + item.value"
+				tabindex="0"
+				:data-value="item.value"
+				@keydown.prevent.space="model = item.value"
+				@keydown.prevent.enter="model = item.value"
+				@focus="scrollVisible($event)"
+			/>
+			<label
+				:id="id + '*' + item.value"
+				class="kern-btn kern-btn--block kern-btn--tertiary"
+				@click.prevent="((model = item.value), radios?.[idx].focus())"
+			>
+				<span
+					v-if="item.icon"
+					:class="{ 'kern-icon': true, [item.icon]: true }"
+					aria-hidden="true"
+				/>
+				<span class="kern-label">{{ item.label }}</span>
+			</label>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useId, useTemplateRef } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	items: {
+		value: string
+		label: string
+		icon?: Icon | false
+	}[]
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const id = useId()
+
+const radios = useTemplateRef<HTMLInputElement>('radios')
+
+function scrollVisible(evt: FocusEvent) {
+	const target = evt.target as HTMLInputElement
+	const label = target.parentElement?.querySelector(
+		`label[id="${target.getAttribute('aria-labelledby')}"]`
+	)
+	if (label?.scrollIntoView) {
+		label.scrollIntoView({
+			behavior: 'smooth',
+			block: 'nearest',
+			inline: 'nearest',
+		})
+	}
+}
+</script>
+
+<style scoped>
+.radiogroup {
+	display: contents;
+}
+
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+label {
+	border: var(--kern-metric-border-width-default) solid transparent;
+}
+
+[role='radio'] {
+	position: absolute;
+	height: 0;
+	clip-path: circle(0);
+
+	&:focus-visible + label {
+		padding: var(--kern-metric-space-none) var(--kern-metric-space-default);
+		border-radius: var(--kern-metric-border-radius-default);
+		box-shadow:
+			0 0 0 2px var(--kern-color-action-on-default),
+			0 0 0 4px var(--kern-color-action-focus-border-inside),
+			0 0 0 6px var(--kern-color-action-focus-border-outside);
+	}
+
+	&[aria-checked='true'] + label {
+		border-color: var(--kern-color-action-default);
+	}
+}
+</style>

src/components/kern/KernCheckbox.ce.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="kern-form-check">
+		<input
+			:id="id"
+			v-model="model"
+			class="kern-form-check__checkbox"
+			type="checkbox"
+			@keydown.prevent.enter="model = !model"
+		/>
+		<label :for="id" class="kern-label">
+			{{ props.label }}
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+import type { Icon } from '@/core'
+
+const props = defineProps<{
+	icon?: Icon | false
+	label: string
+}>()
+
+const model = defineModel<boolean>({ required: true })
+
+const id = useId()
+</script>