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

@@ -6,6 +6,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'
@@ -65,7 +66,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -85,7 +86,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -165,20 +166,43 @@
 						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: {
+											100: 'Wege und Straßen',
+											101: 'Schlagloch und Wegeschaden',
+											102: 'Verunreinigung und Vandalismus',
+										},
+									},
+									statu: {
+										title: 'Bearbeitungsstatus',
+										knownValue: {
+											'In Bearbeitung': 'In Bearbeitung',
+											abgeschlossen: 'Abgeschlossen',
+										},
+									},
+								},
+							},
+						},
+					},
 					fullscreen: {
 						button: {
 							label_on: 'Mach groß',
@@ -261,7 +285,7 @@
 				key: 'coordinate',
 			},
 		],
 		// TODO: Check if this works when addressSearch is implemented
 		addressTarget: {
 			plugin: 'addressSearch',
 			key: 'selectResult',
@@ -286,7 +310,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginGeoLocation({
@@ -312,6 +336,55 @@
 					icon: 'kern-icon-fill--share',
 				},
 			],
+			[
+				{
+					plugin: pluginFilter({
+						layers: {
+							[reports]: {
+								categories: [
+									{
+										targetProperty: 'skat',
+										knownValues: [
+											{
+												value: '100',
+												icon: 'kern-icon--road',
+											},
+											{
+												value: '101',
+												icon: 'kern-icon--remove-road',
+											},
+											{
+												value: '102',
+												icon: 'kern-icon--destruction',
+											},
+										],
+										selectAll: true,
+									},
+									{
+										targetProperty: 'statu',
+										knownValues: [
+											{
+												value: 'In Bearbeitung',
+												icon: 'kern-icon--assignment',
+											},
+											{
+												value: 'abgeschlossen',
+												icon: 'kern-icon--check',
+											},
+										],
+									},
+								],
+								time: {
+									targetProperty: 'start',
+									freeSelection: 'until',
+									last: [0, 7, 30],
+									pattern: 'YYYYMMDD',
+								},
+							},
+						},
+					}),
+				},
+			],
 			[
 				{
 					plugin: pluginLayerChooser({}),

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,46 @@
+<template>
+	<input :id="id" v-model="model" type="checkbox" />
+	<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()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+input[type='checkbox'] {
+	display: none;
+
+	&:checked + label {
+		border: var(--kern-metric-border-width-default) solid
+			var(--kern-color-action-default);
+	}
+}
+</style>

src/components/kern/KernBlockButtonRadioGroup.ce.vue

@@ -0,0 +1,60 @@
+<template>
+	<template v-for="item of props.items" :key="item.value">
+		<input
+			:id="id + '*' + item.value"
+			v-model="model"
+			type="radio"
+			:name="id"
+			:value="item.value"
+		/>
+		<label
+			:for="id + '*' + item.value"
+			class="kern-btn kern-btn--block kern-btn--tertiary"
+		>
+			<span
+				v-if="item.icon"
+				:class="{ 'kern-icon': true, [item.icon]: true }"
+				aria-hidden="true"
+			/>
+			<span class="kern-label">{{ item.label }}</span>
+		</label>
+	</template>
+</template>
+
+<script setup lang="ts">
+import { useId } 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()
+</script>
+
+<style scoped>
+.kern-btn--tertiary {
+	background-color: #edf1fa;
+	justify-content: left;
+
+	.kern-label {
+		text-decoration: none;
+	}
+}
+
+input[type='radio'] {
+	display: none;
+
+	&:checked + label {
+		border: var(--kern-metric-border-width-default) solid
+			var(--kern-color-action-default);
+	}
+}
+</style>

src/components/kern/KernDatePicker.ce.vue

@@ -0,0 +1,29 @@
+<template>
+	<input
+		v-model="inputModel"
+		type="date"
+		class="kern-form-input__input"
+		:min="dateToString(props.min ?? null)"
+		:max="dateToString(props.max ?? null)"
+	/>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { dateToString, stringToDate } from '@/lib/dateUtils'
+
+const props = defineProps<{
+	min?: Date
+	max?: Date
+}>()
+
+const model = defineModel<Date | null>({ required: true })
+
+const inputModel = computed({
+	get: () => dateToString(model.value),
+	set: (value) => {
+		model.value = stringToDate(value)
+	},
+})
+</script>

src/components/kern/KernDateRangePicker.ce.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="range-picker">
+		<KernDatePicker v-model="start" v-bind="props" />
+		–
+		<KernDatePicker v-model="end" v-bind="props" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import KernDatePicker from './KernDatePicker.ce.vue'
+
+const props = defineProps<{
+	min?: Date
+	max?: Date
+}>()
+
+const start = defineModel<Date | null>('start', { required: true })
+const end = defineModel<Date | null>('end', { required: true })
+</script>
+
+<style scoped>
+.range-picker {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin: 0.3em 0;
+}
+</style>

src/core/types/plugin.ts

@@ -1,6 +1,9 @@
 import type { SetupStoreDefinition } from 'pinia'
 import type { Component } from 'vue'
 
+import type { PluginId as FilterPluginId } from '@/plugins/filter'
+import type { resourcesEn as FilterResources } from '@/plugins/filter/locales'
+import type { useFilterStore as FilterStore } from '@/plugins/filter/store'
 import type { PluginId as FooterPluginId } from '@/plugins/footer'
 import type { resourcesEn as FooterResources } from '@/plugins/footer/locales'
 import type { useFooterStore as FooterStore } from '@/plugins/footer/store'
@@ -29,6 +32,7 @@ import type { useToastStore as ToastStore } from '@/plugins/toast/store'
 
 import type { NineLayoutTag } from '../utils/NineLayoutTag'
 import type { Locale } from './locales'
+import type { Icon } from './theme'
 
 export interface PluginOptions {
 	displayComponent?: boolean
@@ -81,6 +85,7 @@ export type PolarPluginStore<
 
 /** @internal */
 export type BundledPluginId =
+	| typeof FilterPluginId
 	| typeof FooterPluginId
 	| typeof FullscreenPluginId
 	| typeof GeoLocationPluginId
@@ -102,6 +107,7 @@ type GetPluginStore<
 
 /** @internal */
 export type BundledPluginStores<T extends BundledPluginId> =
+	| GetPluginStore<T, typeof FilterPluginId, typeof FilterStore>
 	| GetPluginStore<T, typeof FooterPluginId, typeof FooterStore>
 	| GetPluginStore<T, typeof FullscreenPluginId, typeof FullscreenStore>
 	| GetPluginStore<T, typeof GeoLocationPluginId, typeof GeoLocationStore>
@@ -124,6 +130,7 @@ type GetPluginResources<
 
 /** @internal */
 export type BundledPluginLocaleResources<T extends BundledPluginId> =
+	| GetPluginResources<T, typeof FilterPluginId, typeof FilterResources>
 	| GetPluginResources<T, typeof FooterPluginId, typeof FooterResources>
 	| GetPluginResources<T, typeof FullscreenPluginId, typeof FullscreenResources>
 	| GetPluginResources<
@@ -175,7 +182,7 @@ export interface PluginContainer {
 	 * Icon class for the plugin.
 	 * This icon will be used as the default for rendering in menus.
 	 */
-	icon?: string
+	icon?: Icon
 
 	/**
 	 * Whether the plugin is independently rendered.

src/core/types/theme.ts

@@ -41,7 +41,7 @@ export type Color = { oklch: OklchColor } | { rgba: RgbaColor } | string
 /**
  * An icon.
  */
-export type Icon = `kern-icon--${string}`
+export type Icon = `kern-icon--${string}` | `kern-icon-fill--${string}`
 
 /**
  * A theme for the POLAR map client.

src/lib/dateUtils.ts

@@ -0,0 +1,16 @@
+export function dateToString(date: Date | null) {
+	if (date === null) {
+		return ''
+	}
+	return [date.getFullYear(), date.getMonth() + 1, date.getDate()]
+		.map((v) => v.toString().padStart(2, '0'))
+		.join('-')
+}
+
+export function stringToDate(date: string) {
+	if (date.length === 0) {
+		return null
+	}
+	const [y, m, d] = date.split('-')
+	return new Date(Number(y), Number(m) - 1, Number(d))
+}