Updating material components to reference bb apis properly

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

@@ -6,6 +6,7 @@
 
   const cb = new ClassBuilder("button", ["primary", "medium", "text"])
 
+  export let _bb
   export let onClick
 
   export let variant = "text"
@@ -20,8 +21,6 @@
   export let text = ""
   export let disabled = false
 
-  export let _bb
-
   onMount(() => {
     let ctx = _bb.getContext("BBMD:button:context")
     extras = [ctx]

packages/materialdesign-components/src/Card/CardBody.svelte

@@ -2,9 +2,11 @@
   export let _bb
   export let onClick = () => {}
 
+  export let clicked = () => _bb.call(onClick)
+
   let cardBody
 
   $: cardBody && _bb.attachChildren(cardBody)
 </script>
 
-<div bind:this={cardBody} class="mdc-card__primary-action" on:click={onClick} />
+<div bind:this={cardBody} class="mdc-card__primary-action" on:click={clicked} />

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

@@ -6,7 +6,7 @@
   import { MDCCheckbox } from "@material/checkbox"
   import { generate } from "shortid"
 
-  export let onClick = item => {}
+  export let onChange = item => {}
 
   export let _bb
 
@@ -59,13 +59,15 @@
   function changed(e) {
     const val = e.target.checked
     checked = val
+    handleOnClick()
     if (_bb.isBound(_bb.props.checked)) {
       _bb.setStateFromBinding(_bb.props.checked, val)
     }
   }
 
   function handleOnClick() {
-    let item = { _id, label, value }
+    let item = { _id, checked, label, value }
+
     if (context === "checkboxgroup") {
       let idx = selectedItems.getItemIdx($selectedItems, _id)
       if (idx > -1) {
@@ -73,9 +75,8 @@
       } else {
         selectedItems.addItem(item)
       }
-    } else {
-      onClick(item)
     }
+    _bb.call(onChange, item)
   }
 
   $: isChecked =
@@ -101,7 +102,6 @@
         {id}
         disabled={isDisabled}
         {isChecked}
-        on:click={handleOnClick}
         on:change={changed} />
       <div class={cb.elem`background`}>
         <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
@@ -123,8 +123,7 @@
       {id}
       disabled={isDisabled}
       {isChecked}
-      on:change={changed}
-      on:click={handleOnClick} />
+      on:change={changed} />
     <div class={cb.elem`background`}>
       <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
         <path

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

@@ -15,10 +15,17 @@
 
   export let disabled = false
   export let alignEnd = false
+  export let value = []
 
   onMount(() => {
     _bb.setContext("BBMD:input:context", "checkboxgroup")
-    selectedItemsStore = createItemsStore(() => onChange($selectedItemsStore))
+    selectedItemsStore = createItemsStore(() => {
+      value = $selectedItemsStore
+      if (_bb.isBound(_bb.props.value)) {
+        _bb.setStateFromBinding(_bb.props.value, value)
+      }
+      _bb.call(onChange, value)
+    }, value)
     _bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore)
     _bb.setContext("BBMD:checkbox:props", { alignEnd, disabled })
   })

packages/materialdesign-components/src/Common/ItemStore.js

@@ -1,7 +1,7 @@
 import { writable } from "svelte/store"
 
-function createItemsStore(componentOnSelect) {
-    const { subscribe, set, update } = writable([])
+function createItemsStore(componentOnSelect, initialState = []) {
+    const { subscribe, set, update } = writable(initialState)
 
     function addItem(item) {
         update(items => {

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

@@ -38,11 +38,31 @@
     }
   })
 
+  function handleSelect(date) {
+    if (_bb.isBound(_bb.props.date)) {
+      _bb.setStateFromBinding(_bb.props.date, date)
+    }
+    _bb.call(onSelect, date)
+  }
+
   function selectDate(dayOfMonth) {
     let month = getMonth(navDate)
     let year = getYear(navDate)
     date = new Date(year, month, dayOfMonth)
-    onSelect(date)
+    handleSelect(date)
+  }
+
+  function dateFieldChange(value) {
+    const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
+    if (isDate.test(value)) {
+      const [year, month, day] = value.split("/").reverse()
+      if (month > 0 && month <= 12 && (day > 0 && day <= 31)) {
+        date = new Date(year, month - 1, day)
+        navDate = date
+        openCalendar(true)
+        handleSelect(date)
+      }
+    }
   }
 
   function addMonth() {
@@ -57,19 +77,6 @@
     instance.open = isOpen === undefined ? !instance.open : isOpen
   }
 
-  function textFieldChange(value) {
-    const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
-    if (isDate.test(value)) {
-      const [year, month, day] = value.split("/").reverse()
-      if (month > 0 && month <= 12 && (day > 0 && day <= 31)) {
-        date = new Date(year, month - 1, day)
-        navDate = date
-        openCalendar(true)
-        onSelect(date)
-      }
-    }
-  }
-
   $: dateMonthEnds = endOfMonth(navDate).getDate()
   $: dateMonthBegins = startOfMonth(navDate).getDay()
   $: dayStart = dateMonthBegins + 1 //1 = sunday
@@ -92,7 +99,7 @@
 <div class="mdc-menu-surface--anchor">
   <Textfield
     {label}
-    onChange={textFieldChange}
+    onChange={dateFieldChange}
     value={selectedDate}
     trailingIcon={true}
     useIconButton={true}

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

@@ -26,7 +26,7 @@
 
   function onButtonClick() {
     open = !open
-    onClick()
+    _bb.call(onClick)
   }
 
   $: isToggleButton = !!icon && !!onIcon

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

@@ -17,6 +17,7 @@
   export let singleSelection = false
   export let variant = "one-line"
   export let inputElement = null
+  export let value = []
 
   let selectedItemsStore
 
@@ -25,7 +26,13 @@
   onMount(() => {
     let ctx = getContext("BBMD:list:context")
 
-    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    selectedItemsStore = createItemsStore(() => {
+      value = $selectedItemsStore
+      if (_bb.isBound(_bb.props.value)) {
+        _bb.setStateFromBinding(_bb.props.value, value)
+      }
+      _bb.call(onSelect, value)
+    }, value)
     _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
     _bb.setContext("BBMD:list:props", {

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

@@ -24,7 +24,14 @@
     _bb.setContext("BBMD:list:context", "menu")
     _bb.setContext("BBMD:list:props", { singleSelection: true })
 
-    selectedItemsStore = createItemsStore(() => onSelect($selectedItemsStore))
+    selectedItemsStore = createItemsStore(() => {
+      let value =
+        $selectedItemsStore && $selectedItemsStore.length > 0
+          ? $selectedItemsStore[0]
+          : ""
+
+      _bb.call(onSelect, value)
+    })
     _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
     if (!!menu) {

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

@@ -46,7 +46,7 @@
     if (context === "radiobuttongroup") {
       selectedItems.addSingleItem(item)
     } else {
-      onClick(item)
+      _bb.call(onClick, item)
     }
   }
 
@@ -106,7 +106,7 @@
       {name}
       {checked}
       disabled={isDisabled}
-      on:click={onClick} />
+      on:click={handleOnClick} />
     <div class={cb.elem`background`}>
       <div class={cb.elem`outer-circle`} />
       <div class={cb.elem`inner-circle`} />

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

@@ -13,6 +13,9 @@
   export let fullwidth = false
   export let alignEnd = false
   export let disabled = false
+  export let value = []
+
+  $: safeValue = Array.isArray(value) ? value : [value]
 
   let selectedItemsStore
   let selected = null
@@ -20,7 +23,13 @@
 
   onMount(() => {
     _bb.setContext("BBMD:input:context", "radiobuttongroup")
-    selectedItemsStore = createItemStore(() => onChange($selectedItemsStore))
+    selectedItemsStore = createItemStore(() => {
+      value = $selectedItemsStore
+      if (_bb.isBound(_bb.props.value)) {
+        _bb.setStateFromBinding(_bb.props.value, value)
+      }
+      _bb.call(onChange, value)
+    }, safeValue)
     _bb.setContext("BBMD:radiobutton:props", { name, disabled, alignEnd })
     _bb.setContext("BBMD:radiobutton:selectedItemsStore", selectedItemsStore)
   })

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

@@ -30,21 +30,22 @@
   export let persistent = false
   export let value = ""
 
+  $: safeValue = Array.isArray(value) ? value : [value]
+
   onMount(() => {
     _bb.setContext("BBMD:list:props", { singleSelection: true })
-    _bb.setContext("BBMD:list:addItem", i => listItems = [...listItems, i])
+    _bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
 
     selectedItemsStore = createItemsStore(() => {
-
-      const v = $selectedItemsStore && $selectedItemsStore.length > 0
-                ? $selectedItemsStore[0].value
-                : "";
+      const v =
+        $selectedItemsStore && $selectedItemsStore.length > 0
+          ? $selectedItemsStore[0].value
+          : ""
 
       value = v
       _bb.setStateFromBinding(_bb.props.value, v)
       _bb.call(onSelect, v)
-      
-    })
+    }, safeValue)
     _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
     _helperId = generate()
@@ -58,10 +59,8 @@
     }
   })
 
-
   $: useNotchedOutline = variant === "outlined"
   $: selectList && _bb.attachChildren(selectList)
-  
 
   $: modifiers = { variant, disabled, required, noLabel: !label }
   $: props = { modifiers }
@@ -69,8 +68,6 @@
   $: if (value !== undefined && instance && listItems.length > 0) {
     instance.selectedIndex = listItems.findIndex(i => i.value === value)
   }
-  
-
 </script>
 
 <div bind:this={select} id={_helperId} class={selectClass}>

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

@@ -8,6 +8,7 @@
   let slider
   let instance
 
+  export let _bb
   export let variant = "continuous" //or discrete
   export let showTicks = false
   export let min = 0
@@ -17,6 +18,14 @@
   export let label = ""
   export let disabled = false
 
+  function handleChange(val) {
+    value = val
+    if (_bb.isBound(_bb.props.value)) {
+      _bb.setStateFromBinding(_bb.props.value, value)
+    }
+    _bb.call(onChange, val)
+  }
+
   onMount(() => {
     let s = MDCSlider.attachTo(slider)
     return () => instance.destroy()
@@ -28,16 +37,12 @@
     }
   }
 
-  $: instance && console.log("instance dot value: ", instance.value)
-
   $: isDiscrete = variant === "discrete"
   $: displayMarkers = isDiscrete && showTicks
 
   $: modifiers = { variant, displayMarkers }
   $: props = { modifiers }
   $: sliderCls = cb.build({ props })
-
-  $: console.log("VALUE", value)
 </script>
 
 <div
@@ -49,7 +54,8 @@
   aria-valuemax="100"
   aria-valuenow="0"
   aria-label="Select Value"
-  on:MDCSlider:change={e => console.log('SLIDER VAL', e.detail.value)}>
+  on:MDCSlider:input={e => handleChange(e.detail.value)}
+  on:MDCSlider:change={e => handleChange(e.detail.value)}>
   <div class="mdc-slider__track-container">
     <div class="mdc-slider__track" />
   </div>
@@ -63,57 +69,3 @@
     <div class="mdc-slider__focus-ring" />
   </div>
 </div>
-
-<!-- 
-<div
-  bind:this={slider}
-  class={sliderCls}
-  tabindex="0"
-  role="slider"
-  aria-valuemin={min}
-  aria-valuemax={max}
-  aria-valuenow={value}
-  data-step={step}
-  aria-label={label}
-  on:MDCSlider:input={e => console.log('INPUT', e.detail.value)}
-  on:MDCSlider:change={e => console.log('CHANGE', e.detail.value)}
-  aria-disabled={disabled}>
-  <div class="mdc-slider__track-container">
-    {#if displayMarkers}
-      <div class="mdc-slider__track-container">
-        <div class="mdc-slider__track" />
-        <div class="mdc-slider__track-marker-container" />
-      </div>
-    {:else}
-      <div class="mdc-slider__track" />
-    {/if}
-  </div>
-  <div class="mdc-slider__thumb-container">
-    {#if isDiscrete}
-      <div class="mdc-slider__pin">
-        <span class="mdc-slider__pin-value-marker" />
-      </div>
-    {/if}
-    <svg class="mdc-slider__thumb" width="21" height="21">
-      <circle cx="10.5" cy="10.5" r="7.875" />
-    </svg>
-    <div class="mdc-slider__focus-ring" />
-  </div>
-</div> -->
-
-<!-- <div class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
-     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
-     aria-label="Select Value">
-  <div class="mdc-slider__track-container">
-    <div class="mdc-slider__track"></div>
-  </div>
-  <div class="mdc-slider__thumb-container">
-    <div class="mdc-slider__pin">
-      <span class="mdc-slider__pin-value-marker"></span>
-    </div>
-    <svg class="mdc-slider__thumb" width="21" height="21">
-      <circle cx="10.5" cy="10.5" r="7.875"></circle>
-    </svg>
-    <div class="mdc-slider__focus-ring"></div>
-  </div>
-</div> -->

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

@@ -15,7 +15,10 @@
 
   function handleChange() {
     checked = !checked
-    onChange(checked)
+    if (_bb.isBound(_bb.props.checked)) {
+      _bb.setStateFromBinding(_bb.props.checked, checked)
+    }
+    _bb.call(onChange, checked)
   }
 
   $: modifiers = { disabled, checked }

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

@@ -33,17 +33,7 @@
       const page = {
         props: {
           _component: "testcomponents/rootComponent",
-          _children: [
-            BodyBoundToStore,
-            Textfield,
-            Select,
-            Radiobutton,
-            Radiobuttongroup,
-            DatePicker,
-            IconButton,
-            Switch,
-            Slider,
-          ],
+          _children: [Checkbox],
         },
       }
       _appPromise.then(initialise => {

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

@@ -79,7 +79,7 @@ export const props = {
     id: "test-check",
     alignEnd: true,
     label: "Check Yo Self",
-    onClick: () => alert`Before ya reck yo'self`,
+    onChange: item => console.log(item),
   },
   Checkboxgroup: {
     _component: "@budibase/materialdesign-components/Checkboxgroup",

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

@@ -18,6 +18,7 @@
   let tfInstance = null
 
   onMount(() => {
+    debugger
     if (!!tf) tfInstance = new MDCTextField(tf)
     return () => {
       !!tfInstance && tf.tfInstance && tf.tfInstance.destroy()
@@ -97,11 +98,10 @@
   function changed(e) {
     const val = e.target.value
     value = val
-    onChange(value)
-    // if (_bb.isBound(_bb.props.value)) {
-    //   _bb.setStateFromBinding(_bb.props.value, val)
-    // }
-    // _bb.call(onChange, val)
+    if (_bb.isBound(_bb.props.value)) {
+      _bb.setStateFromBinding(_bb.props.value, val)
+    }
+    _bb.call(onChange, val)
   }
 </script>