iconograph-ui 1.5.4 → 1.5.6

package/example/src/routes/+page.svelte

@@ -13,6 +13,7 @@
     import SegmentedSwitchInput from "$lib/iconograph-ui/form/SegmentedSwitchInput.svelte"
     import Link from "$lib/iconograph-ui/display/Link.svelte";
     import SelectUserInput from "$lib/iconograph-ui/user/SelectUserInput.svelte";
+    import MultiSelect from "$lib/iconograph-ui/form/MultiSelect.svelte";
 
     let options = [{ key: "Value" }]
     let inputs = [
@@ -22,6 +23,7 @@
         { component: Input, props: { type: "email", name: "email", label: "Email"}, value: "test@example.com" },
         { component: SexeChoiceInput, props: { name: "sexe", label: "Sexe" } },
         { component: CustomInput, props: { name: "color", label: "Couleur" } },
+        { component: MultiSelect, props: { name: "multiselect", label: "Fruits", options: { APPLE: 'Pomme', BANANA: 'Banane' } }, }
     ];
 
     let button = {

package/index.js

@@ -23,6 +23,7 @@ import DateStr from "./lib/display/DateStr.svelte";
 import Field from "./lib/display/Field.svelte";
 import Link from "./lib/display/Link.svelte";
 import ActionButton from "./lib/form/ActionButton.svelte";
+import MultiSelect from "./lib/form/MultiSelect.svelte";
 
 export {
     Button,
@@ -49,5 +50,6 @@ export {
     Field,
     Link,
     ActionButton,
+    MultiSelect,
     addNotification,
 };

package/lib/form/FlexForm.svelte

@@ -14,8 +14,8 @@
 
     function setDeep(obj, path, value) {
         let keys = path
-            .replace(/\]/g, '')   // supprime les `]`
-            .split(/\[/);         // découpe sur `[`
+            .replace(/\]/g, '')
+            .split(/\[/);
 
         let current = obj;
         keys.forEach((k, i) => {
@@ -33,11 +33,12 @@
         let body = {};
 
         inputs.forEach(i => {
+            if (i.props.stringify)
+                i.value = JSON.stringify(i.value);
             setDeep(body, i.props.name, i.value);
         });
 
         console.log(body);
-        //await timeout(500);
 
         const response = await fetch(uri, {
 			method: 'POST',

package/lib/form/MultiSelect.svelte

@@ -0,0 +1,53 @@
+<script>
+    export let name;
+    export let value = [];
+    export let options = {};
+    export let required = false;
+
+    function toggleSelection(key) {
+        if (value.includes(key))
+            value = value.filter(v => v !== key);
+        else
+            value = [...value, key];
+    }
+
+    $: entries = Object.entries(options);
+</script>
+
+<div class="multi-checkbox">
+    {#each entries as [key, label]}
+        <label class="option">
+            <input type="checkbox" name={name} value={key} checked={value.includes(key)}
+                on:change={() => toggleSelection(key)} />
+            {label}
+        </label>
+    {/each}
+</div>
+
+<style>
+    .multi-checkbox {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+    }
+    .option {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 12px 16px;
+        border-radius: 100px;
+        background-color: var(--theme-input-bg-color, #ebebed);
+        border: var(--theme-input-border, none);
+        font-size: 14px;
+        line-height: 16px;
+        font-weight: 400;
+        font-family: var(--theme-text-font);
+        color: var(--theme-input-text-font);
+    }
+    input[type="checkbox"] {
+        transform: scale(1.1);
+        cursor: pointer;
+        margin-right: 8px;
+        background-color: transparent;
+    }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "iconograph-ui",
-    "version": "1.5.4",
+    "version": "1.5.6",
     "description": "A Svelte Kit components library",
     "main": "./index.js",
     "svelte": "./index.js",