diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte index eb7939a784..ba9cfcf40c 100644 --- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte +++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte @@ -22,6 +22,7 @@ let instance = null let checkbox = null let selectedItems + let checkProps let context = _bb.getContext("BBMD:input:context") @@ -39,6 +40,7 @@ if (context === "checkboxgroup") { selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore") + checkProps = _bb.getContext("BBMD:checkbox:props") } }) @@ -80,18 +82,24 @@ 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 {#if context !== 'list-item'} - +
@@ -113,7 +121,7 @@ type="checkbox" class={cb.elem`native-control`} {id} - {disabled} + disabled={isDisabled} {isChecked} on:change={changed} on:click={handleOnClick} /> diff --git a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte index fe9359771d..3bcaf3cbd2 100644 --- a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte +++ b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte @@ -15,12 +15,12 @@ export let disabled = false export let alignEnd = false - let selectedItems = [] 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) diff --git a/packages/materialdesign-components/src/Common/Formfield.svelte b/packages/materialdesign-components/src/Common/Formfield.svelte index d019ac39a9..6ca9db9aba 100644 --- a/packages/materialdesign-components/src/Common/Formfield.svelte +++ b/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) diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte index 0ed0902322..65f54d95e7 100644 --- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte +++ b/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 } }) @@ -56,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 }) {#if context !== 'list-item'} - +
@@ -93,7 +105,7 @@ type="radio" {name} {checked} - {disabled} + disabled={isDisabled} on:click={onClick} />
diff --git a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte index b72c043e6a..ffe97ad6d8 100644 --- a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte +++ b/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)w - // } - $: alignRight = orientation === "column" && alignEnd $: radioItems && _bb.attachChildren(radioItems) diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index ebb478d858..baf3db4c81 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -28,20 +28,12 @@ props: { _component: "testcomponents/rootComponent", _children: [ - H1, - Overline, Button, BodyBoundToStore, Textfield, - Icon, - Datatable, - CustomersIndexTable, - List, Select, Radiobutton, Radiobuttongroup, - Checkbox, - Checkboxgroup, ], }, } diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index 5d01e1e43d..62d28cdef4 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -77,12 +77,15 @@ 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", label: "Whats your favourite?", + disabled: true, + alignEnd: true, onChange: selectedItems => console.log(selectedItems), _children: [ { @@ -114,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: [ {