diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte index 7b7880e2ff..6142352280 100644 --- a/packages/materialdesign-components/src/Button/Button.svelte +++ b/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] diff --git a/packages/materialdesign-components/src/Card/CardBody.svelte b/packages/materialdesign-components/src/Card/CardBody.svelte index 08cb549e06..6be83a319e 100644 --- a/packages/materialdesign-components/src/Card/CardBody.svelte +++ b/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) -
+
diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte index ba9cfcf40c..9a6c6119fb 100644 --- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte +++ b/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} />
@@ -123,8 +124,7 @@ {id} disabled={isDisabled} {isChecked} - on:change={changed} - on:click={handleOnClick} /> + on:change={changed} />
{ _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 }) }) diff --git a/packages/materialdesign-components/src/Common/ItemStore.js b/packages/materialdesign-components/src/Common/ItemStore.js index 0024304bee..316caa02c0 100644 --- a/packages/materialdesign-components/src/Common/ItemStore.js +++ b/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]) diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte index 4adf2df37e..bfc250ede6 100644 --- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte +++ b/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 @@
{ 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", { diff --git a/packages/materialdesign-components/src/Menu/Menu.svelte b/packages/materialdesign-components/src/Menu/Menu.svelte index 8439128208..ba63b32ebf 100644 --- a/packages/materialdesign-components/src/Menu/Menu.svelte +++ b/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) { diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte index 65f54d95e7..64ea7b980e 100644 --- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte +++ b/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} />
diff --git a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte index ffe97ad6d8..631a63fe20 100644 --- a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte +++ b/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) }) diff --git a/packages/materialdesign-components/src/Select/Select.svelte b/packages/materialdesign-components/src/Select/Select.svelte index c8bbc2bd7e..bfea68ead4 100644 --- a/packages/materialdesign-components/src/Select/Select.svelte +++ b/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() diff --git a/packages/materialdesign-components/src/Slider/Slider.svelte b/packages/materialdesign-components/src/Slider/Slider.svelte index 02193510dd..e45cfda2b4 100644 --- a/packages/materialdesign-components/src/Slider/Slider.svelte +++ b/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)
console.log('SLIDER VAL', e.detail.value)}> + on:MDCSlider:input={e => handleChange(e.detail.value)} + on:MDCSlider:change={e => handleChange(e.detail.value)}>
@@ -63,57 +70,3 @@
- - - - diff --git a/packages/materialdesign-components/src/Switch/Switch.svelte b/packages/materialdesign-components/src/Switch/Switch.svelte index c98d384859..34d6c14a0b 100644 --- a/packages/materialdesign-components/src/Switch/Switch.svelte +++ b/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 } diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index d839988147..2012a81593 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/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, ], diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index 75244cf0c8..b09f5e528b 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/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: [ diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte index 36c4618df3..ace20dbf3f 100644 --- a/packages/materialdesign-components/src/Textfield/Textfield.svelte +++ b/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) }