From 4067912ce09205f271e4b324ca4645463049bf9f Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 28 Sep 2023 03:07:10 +0200
Subject: [PATCH] Refactoring: include 'label' section into Checkbox

---
 src/UI/Base/Checkbox.svelte            | 14 +++++-----
 src/UI/BigComponents/Filterview.svelte | 36 ++++++++++++--------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/UI/Base/Checkbox.svelte b/src/UI/Base/Checkbox.svelte
index 010992df9..92de427ac 100644
--- a/src/UI/Base/Checkbox.svelte
+++ b/src/UI/Base/Checkbox.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import { UIEventSource } from "../../Logic/UIEventSource.js"
+  import type { Writable } from "svelte/store";
 
   /**
    * For some stupid reason, it is very hard to bind inputs
    */
-  export let selected: UIEventSource<boolean>
-  let _c: boolean = selected.data ?? true
-  $: selected.setData(_c)
+  export let selected: Writable<boolean>;
+  let _c: boolean = selected.data ?? true;
+  $: selected.set(_c);
 </script>
-
-<input type="checkbox" bind:checked={_c} />
+<label class="no-image-background flex gap-1">
+  <input bind:checked={_c} type="checkbox" />
+  <slot />
+</label>
diff --git a/src/UI/BigComponents/Filterview.svelte b/src/UI/BigComponents/Filterview.svelte
index e4f3e234d..7ed9c26c4 100644
--- a/src/UI/BigComponents/Filterview.svelte
+++ b/src/UI/BigComponents/Filterview.svelte
@@ -55,27 +55,26 @@
 
 {#if filteredLayer.layerDef.name}
   <div bind:this={mainElem} class="mb-1.5">
-    <label class="no-image-background flex gap-1">
-      <Checkbox selected={isDisplayed} />
-      <If condition={filteredLayer.isDisplayed}>
-        <ToSvelte
-          construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}
-        />
-        <ToSvelte
-          slot="else"
-          construct={() =>
+      <Checkbox selected={isDisplayed} >
+        <If condition={filteredLayer.isDisplayed}>
+          <ToSvelte
+            construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}
+          />
+          <ToSvelte
+            slot="else"
+            construct={() =>
             layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background opacity-50")}
-        />
-      </If>
+          />
+        </If>
 
-      {filteredLayer.layerDef.name}
+        {filteredLayer.layerDef.name}
 
-      {#if $zoomlevel < layer.minzoom}
+        {#if $zoomlevel < layer.minzoom}
         <span class="alert">
           <Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer} />
         </span>
-      {/if}
-    </label>
+        {/if}
+      </Checkbox>
 
     {#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
       <div id="subfilters" class="ml-4 flex flex-col gap-y-1">
@@ -83,10 +82,9 @@
           <div>
             <!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields -->
             {#if filter.options.length === 1 && filter.options[0].fields.length === 0}
-              <label>
-                <Checkbox selected={getBooleanStateFor(filter)} />
-                {filter.options[0].question}
-              </label>
+                <Checkbox selected={getBooleanStateFor(filter)} >
+                  {filter.options[0].question}
+                </Checkbox>
             {/if}
 
             {#if filter.options.length === 1 && filter.options[0].fields.length > 0}