diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json index f279bbc908..48fc769d26 100644 --- a/packages/materialdesign-components/package.json +++ b/packages/materialdesign-components/package.json @@ -42,6 +42,7 @@ "dependencies": { "@material/checkbox": "^4.0.0", "@material/form-field": "^4.0.0", + "@material/radio": "^4.0.0", "@material/textfield": "^4.0.0" } } diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte index 3a48c444df..7466e84be2 100644 --- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte +++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte @@ -5,11 +5,14 @@ import ClassBuilder from "../ClassBuilder.js"; import { MDCCheckbox } from "@material/checkbox"; + export let onClick = item => {}; + export let id = ""; export let label = ""; export let disabled = false; export let alignEnd = false; export let indeterminate = false; + export let checked = false; let instance = null; let checkbox = null; @@ -34,7 +37,13 @@
- +
+ import Checkbox from "./Checkbox.svelte"; + import Label from "../Common/Label.svelte"; + + 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)); + } + + + + +
+
+
+
+ {#each items as item, i} +
+ handleonChange(item)} /> +
+ {/each} +
+
diff --git a/packages/materialdesign-components/src/Checkbox/index.js b/packages/materialdesign-components/src/Checkbox/index.js index 3954d4062a..caea52aa35 100644 --- a/packages/materialdesign-components/src/Checkbox/index.js +++ b/packages/materialdesign-components/src/Checkbox/index.js @@ -1,2 +1,4 @@ import "./_style.scss"; export { default as checkbox } from "./Checkbox.svelte"; +export { default as checkboxgroup } from "./CheckboxGroup.svelte"; + diff --git a/packages/materialdesign-components/src/Common/Label.svelte b/packages/materialdesign-components/src/Common/Label.svelte new file mode 100644 index 0000000000..4767bdc8c4 --- /dev/null +++ b/packages/materialdesign-components/src/Common/Label.svelte @@ -0,0 +1,12 @@ + + + + +{text} diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte new file mode 100644 index 0000000000..194f849e94 --- /dev/null +++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte @@ -0,0 +1,50 @@ + + + +
+ +
+
+
+
+
+
+ diff --git a/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte new file mode 100644 index 0000000000..350251549f --- /dev/null +++ b/packages/materialdesign-components/src/Radiobutton/RadiobuttonGroup.svelte @@ -0,0 +1,80 @@ + + +
+
+
+
+ {#each items as item, i} +
+ handleOnClick(item)} /> +
+ {/each} +
+
+ + diff --git a/packages/materialdesign-components/src/Radiobutton/_style.scss b/packages/materialdesign-components/src/Radiobutton/_style.scss new file mode 100644 index 0000000000..453acf7352 --- /dev/null +++ b/packages/materialdesign-components/src/Radiobutton/_style.scss @@ -0,0 +1,2 @@ +@import "@material/form-field/mdc-form-field"; +@import "@material/radio/mdc-radio.scss"; diff --git a/packages/materialdesign-components/src/Radiobutton/index.js b/packages/materialdesign-components/src/Radiobutton/index.js new file mode 100644 index 0000000000..b2b861569c --- /dev/null +++ b/packages/materialdesign-components/src/Radiobutton/index.js @@ -0,0 +1,3 @@ +import "./_style.scss"; +export { default as radiobutton } from "./Radiobutton.svelte"; +export { default as radiobuttongroup } from "./RadiobuttonGroup.svelte"; diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index bac1c09bb7..f9b2317503 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -2,7 +2,17 @@ import createApp from "./createApp" import { props } from "./props" let _bb - const { h1, overline, button, textfield, checkbox } = props + const { + h1, + overline, + button, + textfield, + checkbox, + checkboxgroup, + radiobutton, + radiobuttongroup, + } = props + let currentComponent let _appPromise $: { @@ -11,11 +21,20 @@ const page = { props: { _component: "testcomponents/rootComponent", - _children: [h1, overline, button, textfield, checkbox], + _children: [ + h1, + overline, + button, + textfield, + checkbox, + checkboxgroup, + radiobutton, + radiobuttongroup, + ], }, } _appPromise.then(initialise => { - initialise(page, window.document.body, "") + initialise(page, currentComponent, "") }) } } diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index 1e77b2d112..9b244480c8 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -43,5 +43,36 @@ export const props = { _children: [], id: "test-check", 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" }, + ], + onChange: selectedItems => console.log(selectedItems), + }, + radiobutton: { + _component: "@budibase/materialdesign-components/radiobutton", + _children: [], + label: "Hi radio", + alignEnd: true, + onClick: () => alert`Roger That`, + }, + radiobuttongroup: { + _component: "@budibase/materialdesign-components/radiobuttongroup", + _children: [], + label: "Preferred method of contact: ", + orientation: "column", + items: [ + { label: "Email", value: 1 }, + { label: "Phone", value: 2 }, + { label: "Social Media", value: 3 }, + ], + onChange: selected => console.log(selected), } } diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js index 789fca51b8..c9991a8942 100644 --- a/packages/materialdesign-components/src/Test/testComponents.js +++ b/packages/materialdesign-components/src/Test/testComponents.js @@ -1,3 +1,23 @@ -import { H1, Overline, button, icon, checkbox, textfield } from "@BBMD" +import { + H1, + Overline, + button, + icon, + textfield, + checkbox, + checkboxgroup, + radiobutton, + radiobuttongroup, +} from "@BBMD" -export default {H1, Overline, button, icon, checkbox, textfield } +export default { + H1, + Overline, + button, + icon, + textfield, + checkbox, + checkboxgroup, + radiobutton, + radiobuttongroup, +} diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index 59de45221b..424c7d20a0 100644 --- a/packages/materialdesign-components/src/index.js +++ b/packages/materialdesign-components/src/index.js @@ -4,11 +4,6 @@ export { button } from "./Button" export { default as icon } from "./Icon.svelte" export { textfield } from "./Textfield" export * from "./Typography" -export { checkbox } from "./Checkbox" +export { checkbox, checkboxgroup } from "./Checkbox" +export { radiobutton, radiobuttongroup } from "./Radiobutton" -// import { Button } from "./Button"; -// import Icon from "./Icon.svelte"; -// import { Textfield } from "./Textfield"; -// export { Button, Icon, Textfield }; -// export * from "./Typography"; -// export { Checkbox } from "./Checkbox";