feat(filter): migrate plugin

examples/iceberg/components/IcebergMap.vue

@@ -30,6 +30,7 @@ import type { PolarContainer } from '@polar/polar'
 
 import { addPlugins, getStore, subscribe } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
+import pluginFilter from '@polar/polar/plugins/filter'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
@@ -56,6 +57,39 @@ watch(map, (map) => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 			menus: [
+				[
+					{
+						plugin: pluginFilter({
+							layers: {
+								6059: {
+									categories: [
+										{
+											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: [7],
+										pattern: 'YYYYMMDD',
+									},
+								},
+							},
+						}),
+					},
+				],
 				[
 					{
 						plugin: pluginLayerChooser({}),

examples/iceberg/stores/iceberg.ts

@@ -64,6 +64,12 @@ export const useIcebergStore = defineStore('iceberg', () => {
 					},
 				},
 			},
+			{
+				id: '6059',
+				visibility: true,
+				type: 'mask',
+				name: 'snowbox.layers.mml',
+			},
 		],
 		startCenter: [565874, 5934140],
 		layout: 'nineRegions',
@@ -92,6 +98,30 @@ export const useIcebergStore = defineStore('iceberg', () => {
 			displayComponent: true,
 			layoutTag: 'TOP_RIGHT',
 		},
+		markers: {
+			layers: [
+				{
+					id: '6059',
+					defaultStyle: {
+						stroke: '#FFFFFF',
+						fill: '#005CA9',
+					},
+					hoverStyle: {
+						stroke: '#46688E',
+						fill: '#8BA1B8',
+					},
+					selectionStyle: {
+						stroke: '#FFFFFF',
+						fill: '#E10019',
+					},
+					unselectableStyle: {
+						stroke: '#FFFFFF',
+						fill: '#333333',
+					},
+				},
+			],
+			clusterClickZoom: true,
+		},
 		pins: {
 			coordinateSources: [{ plugin: 'addressSearch', key: 'chosenAddress' }],
 			movable: 'drag',

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

@@ -8,6 +8,7 @@ import {
 	updateState,
 } from '@polar/polar'
 import pluginAddressSearch from '@polar/polar/plugins/addressSearch'
+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'
@@ -182,6 +183,30 @@ const map = await createMap(
 			{
 				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ß',
@@ -336,7 +361,6 @@ addPlugin(
 			},
 		],
 		menus: [
-			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginFullscreen({}),
@@ -345,6 +369,7 @@ addPlugin(
 					plugin: pluginLayerChooser({}),
 				},
 			],
+			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: {
@@ -355,6 +380,71 @@ addPlugin(
 					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: pluginGeoLocation({

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/PolarTemplate.ce.vue

@@ -0,0 +1,7 @@
+<template>
+	<slot />
+</template>
+
+<script setup lang="ts">
+// This can be used to render a container that does not emit a DOM element.
+</script>

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>