Checkboxgroup with builder specific logic

packages/materialdesign-components/src/Checkbox/Checkbox.svelte

@@ -4,33 +4,42 @@
   import { fieldStore } from "../Common/FormfieldStore.js"
   import ClassBuilder from "../ClassBuilder.js"
   import { MDCCheckbox } from "@material/checkbox"
+  import { generate } from "shortid"
 
   export let onClick = item => {}
 
   export let _bb
 
   export let id = ""
+  export let value = null
   export let label = ""
   export let disabled = false
   export let alignEnd = false
   export let indeterminate = false
   export let checked = false
 
+  let _id
   let instance = null
   let checkbox = null
+  let selectedItems
+
   let context = _bb.getContext("BBMD:input:context")
 
   onMount(() => {
+    _id = generate()
+
     if (!!checkbox) {
       instance = new MDCCheckbox(checkbox)
       instance.indeterminate = indeterminate
       if (context !== "list-item") {
-        //TODO: Fix this connected to Formfield context issue
         let fieldStore = _bb.getContext("BBMD:field-element")
-        if(fieldStore)
+        if (fieldStore) fieldStore.setInput(instance)
-          fieldStore.setInput(instance)
       }
     }
+
+    if (context === "checkboxgroup") {
+      selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore")
+    }
   })
 
   let extras = null
@@ -52,6 +61,25 @@
       _bb.setStateFromBinding(_bb.props.checked, val)
     }
   }
+
+  function handleOnClick() {
+    let item = { _id, label, value }
+    if (context === "checkboxgroup") {
+      let idx = selectedItems.getItemIdx($selectedItems, _id)
+      if (idx > -1) {
+        selectedItems.removeItem(_id)
+      } else {
+        selectedItems.addItem(item)
+      }
+    } else {
+      onClick(item)
+    }
+  }
+
+  $: isChecked =
+    context === "checkboxgroup"
+      ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
+      : checked
 </script>
 
 <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
@@ -64,8 +92,8 @@
         class={cb.elem`native-control`}
         {id}
         {disabled}
-        {checked}
+        {isChecked}
-        on:click={onClick}
+        on:click={handleOnClick}
         on:change={changed} />
       <div class={cb.elem`background`}>
         <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
@@ -86,9 +114,9 @@
       class={cb.elem`native-control`}
       {id}
       {disabled}
-      {checked}
+      {isChecked}
       on:change={changed}
-      on:click={onClick} />
+      on:click={handleOnClick} />
     <div class={cb.elem`background`}>
       <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
         <path

packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte

@@ -1,26 +1,29 @@
 <script>
+  import { onMount } from "svelte"
   import Checkbox from "./Checkbox.svelte"
   import Label from "../Common/Label.svelte"
+  import createItemsStore from "../Common/ItemStore.js"
 
+  let selectedItemsStore
+  let checkItems
+
+  export let _bb
   export let label = ""
   export let orientation = "row"
   export let fullwidth = false
   export let onChange = selectedItems => {}
 
-  export let items = []
-
   export let disabled = false
   export let alignEnd = false
   let selectedItems = []
 
-  function handleonChange(item) {
+  onMount(() => {
-    if (!!item.checked) {
+    _bb.setContext("BBMD:input:context", "checkboxgroup")
-      item.checked = !item.checked
+    selectedItemsStore = createItemsStore(() => onChange($selectedItemsStore))
-    } else {
+    _bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore)
-      item.checked = true
+  })
-    }
+
-    onChange(items.filter(i => i.checked))
+  $: checkItems && _bb.attachChildren(checkItems)
-  }
 </script>
 
 <div class="checkbox-group">
@@ -28,18 +31,7 @@
     <Label text={label} bold />
   </div>
   <div class={`checkbox-group__boxes ${orientation}`}>
-    {#each items as item, i}
+    <div bind:this={checkItems} class:fullwidth />
-      <div class:fullwidth>
-        <Checkbox
-          id={`${item.label}-${i}`}
-          {disabled}
-          {alignEnd}
-          indeterminate={item.indeterminate || false}
-          label={item.label}
-          checked={item.checked || false}
-          onClick={() => handleonChange(item)} />
-      </div>
-    {/each}
   </div>
 </div>
 

packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte

@@ -45,7 +45,6 @@
     if (context === "radiobuttongroup") {
       selectedItems.addSingleItem(item)
     } else {
-      debugger
       onClick(item)
     }
   }

packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte

@@ -29,7 +29,7 @@
   //   item.checked = true
   //   selected = item
   //   items = items
-  //   onChange(selected)
+  //   onChange(selected)w
   // }
 
   $: alignRight = orientation === "column" && alignEnd

packages/materialdesign-components/src/Test/TestApp.svelte

@@ -40,6 +40,8 @@
             Select,
             Radiobutton,
             Radiobuttongroup,
+            Checkbox,
+            Checkboxgroup,
           ],
         },
       }

packages/materialdesign-components/src/Test/props.js

@@ -82,14 +82,26 @@ export const props = {
   },
   Checkboxgroup: {
     _component: "@budibase/materialdesign-components/Checkboxgroup",
-    _children: [],
     label: "Whats your favourite?",
-    items: [
-      { label: "Currys", indeterminate: true },
-      { label: "Chips", checked: true },
-      { label: "Pasties" },
-    ],
     onChange: selectedItems => console.log(selectedItems),
+    _children: [
+      {
+        _component: "@budibase/materialdesign-components/Checkbox",
+        _children: [],
+        label: "Currys",
+        indeterminate: true,
+      },
+      {
+        _component: "@budibase/materialdesign-components/Checkbox",
+        _children: [],
+        label: "Chips",
+      },
+      {
+        _component: "@budibase/materialdesign-components/Checkbox",
+        _children: [],
+        label: "Pasties",
+      },
+    ],
   },
   Radiobutton: {
     _component: "@budibase/materialdesign-components/Radiobutton",
@@ -188,5 +200,5 @@ export const props = {
         value: "2",
       },
     ],
-  },
+  }
 }