Merge pull request #175 from Conor-Mack/bugfix/md-reference-bb-apis

MD Components to Reference Budibase API's

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,16 @@
   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 }
+    debugger
     if (context === "checkboxgroup") {
       let idx = selectedItems.getItemIdx($selectedItems, _id)
       if (idx > -1) {
@@ -73,9 +76,8 @@
       } else {
         selectedItems.addItem(item)
       }
-    } else {
-      onClick(item)
     }
+    _bb.call(onChange, item)
   }
 
   $: isChecked =
@@ -101,7 +103,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 +124,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,18 @@
 
   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)
+      }
+      debugger
+      _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,16 +1,17 @@
 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 => {
+            return [...items, item]
+        })
+        if (componentOnSelect) {
+            componentOnSelect()
+        }
 
-  function addItem(item) {
-    update(items => {
-      return [...items, item]
-    })
-    if (componentOnSelect) {
-      componentOnSelect()
     }
-  }
 
   function addSingleItem(item) {
     set([item])

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[0]
+      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,6 +30,8 @@
   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]))
@@ -43,7 +45,8 @@
       value = v
       _bb.setStateFromBinding(_bb.props.value, v)
       _bb.call(onSelect, v)
-    })
+    }, safeValue)
+
     _bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
 
     _helperId = generate()

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

@@ -8,6 +8,8 @@
   let slider
   let instance
 
+  export let _bb
+  export let onChange = value => {}
   export let variant = "continuous" //or discrete
   export let showTicks = false
   export let min = 0
@@ -17,6 +19,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 +38,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 +55,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 +70,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

@@ -34,13 +34,18 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            BodyBoundToStore,
             Textfield,
-            Select,
+            Checkboxgroup,
             Radiobutton,
             Radiobuttongroup,
+            Datatable,
+            CustomersIndexTable,
+            Icon,
+            List,
+            Select,
             DatePicker,
             IconButton,
+            Card,
             Switch,
             Slider,
           ],

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

@@ -79,12 +79,11 @@ 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",
     label: "Whats your favourite?",
-    disabled: true,
     alignEnd: true,
     onChange: selectedItems => console.log(selectedItems),
     _children: [
@@ -117,7 +116,6 @@ 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: [

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

@@ -97,11 +97,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>