From c0b1259e458dff8879a70b4fc5ffdf36986197cf Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Wed, 7 Aug 2024 02:29:31 +0400
Subject: [PATCH] Added select and checkboxes fields

---
 src/components/ui/forms/CheckboxField.svelte | 12 +++++++
 src/components/ui/forms/SelectField.svelte   | 34 ++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/ui/forms/CheckboxField.svelte
 create mode 100644 src/components/ui/forms/SelectField.svelte

diff --git a/src/components/ui/forms/CheckboxField.svelte b/src/components/ui/forms/CheckboxField.svelte
new file mode 100644
index 0000000..fd42593
--- /dev/null
+++ b/src/components/ui/forms/CheckboxField.svelte
@@ -0,0 +1,12 @@
+<script>
+    /** @type {string|undefined} */
+    export let name = undefined;
+
+    /** @type {boolean} */
+    export let checked;
+</script>
+
+<input type="checkbox" {name} bind:checked={checked}>
+<span>
+    <slot></slot>
+</span>
diff --git a/src/components/ui/forms/SelectField.svelte b/src/components/ui/forms/SelectField.svelte
new file mode 100644
index 0000000..cd815c3
--- /dev/null
+++ b/src/components/ui/forms/SelectField.svelte
@@ -0,0 +1,34 @@
+<script>
+    /**
+     * @type {string[]|Record<string, string>}
+     */
+    export let options = [];
+
+    /** @type {string|undefined} */
+    export let name = undefined;
+
+    /** @type {string|undefined} */
+    export let id = undefined;
+
+    /** @type {string|undefined} */
+    export let value = undefined;
+
+    /** @type {Record<string, string>} */
+    const optionPairs = {};
+
+    if (Array.isArray(options)) {
+        for (let option of options) {
+            optionPairs[option] = option;
+        }
+    } else if (options && typeof options === 'object') {
+        Object.keys(options).forEach((key) => {
+            optionPairs[key] = options[key];
+        })
+    }
+</script>
+
+<select {name} {id} bind:value={value}>
+    {#each Object.entries(optionPairs) as [value, label]}
+        <option {value}>{label}</option>
+    {/each}
+</select>