Handle Stimulus boolean and number values

Author: leonvogt

src/components/Stimulus/ValueEditor.svelte

@@ -1,9 +1,11 @@
 <script>
   import IconButton from "$uikit/IconButton.svelte"
+  const VALUE_TYPES = ["string", "number", "boolean", "null", "undefined"]
 
-  let { value, isEditing, onEdit, onSave, onCancel } = $props()
+  let { value, valueType, isEditing, onEdit, onSave, onCancel } = $props()
 
   let editValue = $state(value)
+  const type = VALUE_TYPES.includes(valueType) ? valueType : "string"
 
   const handleSubmit = (e) => {
     e.preventDefault()
@@ -23,12 +25,14 @@
 
 {#if isEditing}
   <form class="d-flex" onsubmit={handleSubmit}>
-    <wa-input size="extra-small" value={editValue} oninput={(e) => (editValue = e.target.value)}></wa-input>
+    <wa-input size="extra-small" value={editValue} {type} oninput={(e) => (editValue = e.target.value)}></wa-input>
     <wa-button class="small-icon-button" variant="neutral" appearance="plain" type="submit">
       <wa-icon name="check"></wa-icon>
     </wa-button>
   </form>
   <IconButton name="xmark" onclick={handleCancel}></IconButton>
+{:else if type === "boolean"}
+  <wa-switch checked={value} onchange={(e) => onSave(e.target.checked)}></wa-switch>
 {:else}
   {value}
   <IconButton name="pencil" onclick={handleEdit}></IconButton>

src/components/Stimulus/ValueTreeItem.svelte

@@ -37,14 +37,21 @@
           <wa-tree-item>
             <div class="d-flex code-value">
               <span class="code-key">{key}:</span>
-              <ValueEditor {value} isEditing={editingStates[key] || false} onEdit={() => handleEdit(key)} onSave={(newVal) => handleSave(key, newVal)} onCancel={() => handleCancel(key)} />
+              <ValueEditor {value} valueType={"string"} isEditing={editingStates[key] || false} onEdit={() => handleEdit(key)} onSave={(newVal) => handleSave(key, newVal)} onCancel={() => handleCancel(key)} />
             </div>
           </wa-tree-item>
         {/each}
       {:else}
         <span class="code-key">{valueObject.name}:</span>
         <div class="d-flex code-value">
-          <ValueEditor value={valueObject.value} isEditing={editingStates["main"] || false} onEdit={() => handleEdit(null)} onSave={(newVal) => handleSave(null, newVal)} onCancel={() => handleCancel(null)} />
+          <ValueEditor
+            value={valueObject.value}
+            valueType={valueObject.type}
+            isEditing={editingStates["main"] || false}
+            onEdit={() => handleEdit(null)}
+            onSave={(newVal) => handleSave(null, newVal)}
+            onCancel={() => handleCancel(null)}
+          />
         </div>
       {/if}
     </wa-tree-item>

src/uikit/webawesome.svelte.js

@@ -12,6 +12,7 @@ import "@awesome.me/webawesome/dist/components/spinner/spinner.js"
 import "@awesome.me/webawesome/dist/components/badge/badge.js"
 import "@awesome.me/webawesome/dist/components/tree/tree.js"
 import "@awesome.me/webawesome/dist/components/input/input.js"
+import "@awesome.me/webawesome/dist/components/switch/switch.js"
 
 // Set WebAwesome base path to point to the correct location of the WebAwesome icons
 import { setBasePath, registerIconLibrary } from "@awesome.me/webawesome/dist/webawesome.js"