feat(filter): migrate plugin

Author: oeninghe-dataport

examples/snowbox/index.js

@@ -6,6 +6,7 @@ import {
 	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'
@@ -178,6 +179,29 @@ const map = await createMap(
 			{
 				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ß',
@@ -311,6 +335,55 @@ addPlugin(
 					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>
+		<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,45 @@
+<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>
+		<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,59 @@
+<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>
+			<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,28 @@
+<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

@@ -4,6 +4,10 @@ import type { NineLayoutTag } from '../utils/NineLayoutTag'
 import type { Locale } from './locales'
 import type { Icon } from './theme'
 
+import type { PluginId as FilterPluginId } from '@/plugins/filter'
+import type { useFilterStore as FilterStore } from '@/plugins/filter/store'
+import type { resourcesEn as FilterResources } from '@/plugins/filter/locales'
+
 import type { PluginId as FooterPluginId } from '@/plugins/footer'
 import type { useFooterStore as FooterStore } from '@/plugins/footer/store'
 import type { resourcesEn as FooterResources } from '@/plugins/footer/locales'
@@ -89,6 +93,7 @@ export type PolarPluginStore<
 
 /** @internal */
 export type BundledPluginId =
+	| typeof FilterPluginId
 	| typeof FooterPluginId
 	| typeof FullscreenPluginId
 	| typeof GeoLocationPluginId
@@ -110,6 +115,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>
@@ -132,6 +138,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<

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))
+}

src/lib/invisibleStyle.ts

@@ -32,3 +32,25 @@ export const isInvisible = (feature: Feature) =>
  */
 export const isVisible = (feature: Feature) =>
 	feature.getStyle() !== InvisibleStyle
+
+/**
+ * Hides a feature.
+ *
+ * @param feature - The feature to hide.
+ */
+export const hideFeature = (feature: Feature) => {
+	if (isVisible(feature)) {
+		feature.setStyle(InvisibleStyle)
+	}
+}
+
+/**
+ * Shows a feature.
+ *
+ * @param feature - The feature to show.
+ */
+export const showFeature = (feature: Feature) => {
+	if (isInvisible(feature)) {
+		feature.setStyle()
+	}
+}