Solara

Solara-Kit · Sep 15, 2024 · cdf4078 · cdf4078
1 parent 07f6118
commit cdf4078
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/solara/lib/core/dashboard/brand/BrandDetailController.js b/solara/lib/core/dashboard/brand/BrandDetailController.js
@@ -234,6 +234,8 @@ class BrandDetailController {
             if (input.classList.contains('array-input')) {
                 const arrayItemsContainer = input.closest('.input-wrapper').querySelector('.array-items-container');
                 current[lastKey] = this.getArrayValue(arrayItemsContainer);
+            } else if (input.type === 'checkbox') {
+                current[lastKey] = input.checked;
             } else {
                 let value = input.value;
                 if (input.type === 'color') {

diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js
@@ -98,10 +98,12 @@ class BrandDetailView {
                 sectionElement.appendChild(this.createInputField(sectionItem, key, value, 'array'));
             } else if (typeof value === 'object' && value !== null) {
                 for (const [subKey, subValue] of Object.entries(value)) {
-                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, inputType));
+                    const subInputType = subValue === true || subValue === false ? 'boolean' : inputType;
+                    sectionElement.appendChild(this.createInputField(sectionItem, `${key}.${subKey}`, subValue, subInputType));
                 }
             } else {
-                sectionElement.appendChild(this.createInputField(sectionItem, key, value, inputType));
+                const fieldInputType = value === true || value === false ? 'boolean' : inputType;
+                sectionElement.appendChild(this.createInputField(sectionItem, key, value, fieldInputType));
             }
         }
     }
@@ -150,6 +152,24 @@ class BrandDetailView {
                 input.value = '';
             });
 
+        } else if (inputType === 'boolean') {
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.id = key;
+            checkbox.checked = value;
+
+            const checkboxLabel = document.createElement('label');
+            checkboxLabel.className = 'checkbox-label';
+            checkboxLabel.htmlFor = key;
+            checkboxLabel.textContent = value ? 'True' : 'False';
+
+            checkbox.addEventListener('change', () => {
+                checkboxLabel.textContent = checkbox.checked ? 'True' : 'False';
+                this.onSectionChanged(sectionItem, container.closest('.section'));
+            });
+
+            inputWrapper.appendChild(checkbox);
+            inputWrapper.appendChild(checkboxLabel);
         } else {
             const input = document.createElement('input');
             input.type = inputType;

diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html
@@ -116,18 +116,28 @@
             .input-group:hover {
                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
             }
+            .input-wrapper {
+                display: flex;
+                align-items: center;
+                flex-grow: 1;
+            }
+            .input-wrapper input[type="checkbox"] {
+                margin-right: 10px;
+                flex-grow: 0;
+            }
+            .checkbox-label {
+                flex-grow: 1;
+            }
+            .input-wrapper label[for] {
+                margin-right: 10px;
+            }
             label {
                 display: inline-block;
                 margin-right: 10px;
                 font-weight: bold;
                 min-width: 250px;
                 flex-shrink: 0;
             }
-            .input-wrapper {
-                display: flex;
-                align-items: center;
-                flex-grow: 1;
-            }
             input, select {
                 flex-grow: 1;
                 padding: 10px;