Merge branch 'master' of github.com:Budibase/budibase

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

@@ -4,33 +4,44 @@
   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 checkProps
+
   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)
-          fieldStore.setInput(instance)
+        if (fieldStore) fieldStore.setInput(instance)
       }
     }
+
+    if (context === "checkboxgroup") {
+      selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore")
+      checkProps = _bb.getContext("BBMD:checkbox:props")
+    }
   })
 
   let extras = null
@@ -52,20 +63,45 @@
       _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
+
+  $: isAlignedEnd =
+    context === "checkboxgroup" && !!checkProps ? checkProps.alignEnd : alignEnd
+
+  $: isDisabled =
+    context === "checkboxgroup" && !!checkProps ? checkProps.disabled : disabled
 </script>
 
 <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
 
 {#if context !== 'list-item'}
-  <Formfield {label} {id} {alignEnd}>
+  <Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
     <div bind:this={checkbox} class={blockClass}>
       <input
         type="checkbox"
         class={cb.elem`native-control`}
         {id}
-        {disabled}
-        {checked}
-        on:click={onClick}
+        disabled={isDisabled}
+        {isChecked}
+        on:click={handleOnClick}
         on:change={changed} />
       <div class={cb.elem`background`}>
         <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
@@ -85,10 +121,10 @@
       type="checkbox"
       class={cb.elem`native-control`}
       {id}
-      {disabled}
-      {checked}
+      disabled={isDisabled}
+      {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) {
-    if (!!item.checked) {
-      item.checked = !item.checked
-    } else {
-      item.checked = true
-    }
-    onChange(items.filter(i => i.checked))
-  }
+  onMount(() => {
+    _bb.setContext("BBMD:input:context", "checkboxgroup")
+    selectedItemsStore = createItemsStore(() => onChange($selectedItemsStore))
+    _bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore)
+    _bb.setContext("BBMD:checkbox:props", { alignEnd, disabled })
+  })
+
+  $: 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 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 bind:this={checkItems} class:fullwidth />
   </div>
 </div>
 

packages/materialdesign-components/src/Common/Formfield.svelte

@@ -17,15 +17,14 @@
 
   let formField = null
 
-  let modifiers = { alignEnd }
-  let props = { modifiers }
+  $: modifiers = { alignEnd }
+  $: props = { modifiers }
 
-  let blockClasses = cb.build({ props })
+  $: blockClasses = cb.build({ props })
 
   onMount(() => {
     if (!!formField) fieldStore.set(new MDCFormField(formField))
-    //TODO: Fix this, _bb is coming back undefined
-    // _bb.setContext("BBMD:field-element", fieldStore)
+    _bb.setContext("BBMD:field-element", fieldStore)
   })
 
   onDestroy(unsubscribe)

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

@@ -20,6 +20,7 @@
   let instance = null
   let radiobtn = null
   let selectedItems
+  let radioProps
 
   let context = _bb.getContext("BBMD:input:context")
 
@@ -35,8 +36,8 @@
     }
     if (context === "radiobuttongroup") {
       selectedItems = _bb.getContext("BBMD:radiobutton:selectedItemsStore")
-      let props = _bb.getContext("BBMD:radiobutton:props")
-      name = props.name
+      radioProps = _bb.getContext("BBMD:radiobutton:props")
+      name = radioProps.name
     }
   })
 
@@ -45,7 +46,6 @@
     if (context === "radiobuttongroup") {
       selectedItems.addSingleItem(item)
     } else {
-      debugger
       onClick(item)
     }
   }
@@ -57,19 +57,30 @@
   }
 
   const cb = new ClassBuilder("radio")
-  let modifiers = { disabled }
-  let props = { modifiers, extras }
-
-  const blockClass = cb.build({ props })
 
   $: isChecked =
     context === "radiobuttongroup"
       ? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
       : checked
+
+  $: isAlignedEnd =
+    context === "radiobuttongroup" && !!radioProps
+      ? radioProps.alignEnd
+      : alignEnd
+
+  $: isDisabled =
+    context === "radiobuttongroup" && !!radioProps
+      ? radioProps.disabled
+      : disabled
+
+  $: modifiers = { disabled: isDisabled }
+  $: props = { modifiers, extras }
+
+  $: blockClass = cb.build({ props })
 </script>
 
 {#if context !== 'list-item'}
-  <Formfield {id} {label} {alignEnd}>
+  <Formfield {id} {_bb} {label} alignEnd={isAlignedEnd}>
     <div class={blockClass}>
       <input
         {id}
@@ -77,7 +88,7 @@
         type="radio"
         {name}
         {checked}
-        {disabled}
+        disabled={isDisabled}
         on:click={handleOnClick} />
       <div class={cb.elem`background`}>
         <div class={cb.elem`outer-circle`} />
@@ -94,7 +105,7 @@
       type="radio"
       {name}
       {checked}
-      {disabled}
+      disabled={isDisabled}
       on:click={onClick} />
     <div class={cb.elem`background`}>
       <div class={cb.elem`outer-circle`} />

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

@@ -12,6 +12,7 @@
   export let orientation = "row"
   export let fullwidth = false
   export let alignEnd = false
+  export let disabled = false
 
   let selectedItemsStore
   let selected = null
@@ -20,18 +21,10 @@
   onMount(() => {
     _bb.setContext("BBMD:input:context", "radiobuttongroup")
     selectedItemsStore = createItemStore(() => onChange($selectedItemsStore))
-    _bb.setContext("BBMD:radiobutton:props", { name })
+    _bb.setContext("BBMD:radiobutton:props", { name, disabled, alignEnd })
     _bb.setContext("BBMD:radiobutton:selectedItemsStore", selectedItemsStore)
   })
 
-  // function handleOnClick(item) {
-  //   if (!!selected) selected.checked = false
-  //   item.checked = true
-  //   selected = item
-  //   items = items
-  //   onChange(selected)
-  // }
-
   $: alignRight = orientation === "column" && alignEnd
   $: radioItems && _bb.attachChildren(radioItems)
 </script>

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

@@ -28,15 +28,9 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            H1,
-            Overline,
             Button,
             BodyBoundToStore,
             Textfield,
-            Icon,
-            Datatable,
-            CustomersIndexTable,
-            List,
             Select,
             Radiobutton,
             Radiobuttongroup,

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

@@ -77,19 +77,34 @@ export const props = {
     _component: "@budibase/materialdesign-components/Checkbox",
     _children: [],
     id: "test-check",
+    alignEnd: true,
     label: "Check Yo Self",
     onClick: () => alert`Before ya reck yo'self`,
   },
   Checkboxgroup: {
     _component: "@budibase/materialdesign-components/Checkboxgroup",
-    _children: [],
     label: "Whats your favourite?",
-    items: [
-      { label: "Currys", indeterminate: true },
-      { label: "Chips", checked: true },
-      { label: "Pasties" },
-    ],
+    disabled: true,
+    alignEnd: true,
     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",
@@ -102,6 +117,8 @@ export const props = {
     _component: "@budibase/materialdesign-components/Radiobuttongroup",
     label: "Preferred method of contact: ",
     orientation: "column",
+    disabled: true,
+    alignEnd: true,
     onChange: selected => console.log("Radiobutton Group", selected),
     _children: [
       {
@@ -188,5 +205,5 @@ export const props = {
         value: "2",
       },
     ],
-  },
+  }
 }