MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #107 from Conor-Mack/feature/md-datatable 

Completed MD Datatable and General Tidyup
This commit is contained in:
Conor_Mack 2020-02-18 15:08:27 +00:00 committed by GitHub
parent 56c25fee90 39ad8fdfdd
commit c5931ae3cb
22 changed files with 245 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/materialdesign-components/components.json
View File

@ -1,24 +1,24 @@
{ {
"_lib": "./dist/index.js", "_lib": "./dist/index.js",
"_generators": {}, "_generators": {},
"body1": { "Body1": {
"name": "body1", "name": "Body1",
"description": "Sets the font properties as Roboto Body 1", "description": "Sets the font properties as Roboto Body 1",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"body2": { "Body2": {
"name": "body2", "name": "Body2",
"description": "Sets the font properties as Roboto Body 2", "description": "Sets the font properties as Roboto Body 2",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"button": { "Button": {
"name": "button", "name": "Button",
"description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.", "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
"props": { "props": {
"onClick": "event", "onClick": "event",
@ -34,16 +34,16 @@
}, },
"tags": [] "tags": []
}, },
"caption": { "Caption": {
"name": "caption", "name": "Caption",
"description": "Sets the font properties as Roboto Caption", "description": "Sets the font properties as Roboto Caption",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"checkbox": { "Checkbox": {
"name": "checkbox", "name": "Checkbox",
"description": "A Material Design checkbox. Supports aligning label before or after checkbox.", "description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
"props": { "props": {
"onClick": "event", "onClick": "event",
@ -56,72 +56,78 @@
}, },
"tags": [] "tags": []
}, },
"h1": { "Datatable": {
"name": "h1", "name": "Datatable",
"description": "A Material Design component to represent tabular data.",
"props": {},
"tags": []
},
"H1": {
"name": "H1",
"description": "Sets the font properties as Roboto Headline1", "description": "Sets the font properties as Roboto Headline1",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"h2": { "H2": {
"name": "h2", "name": "H2",
"description": "Sets the font properties as Roboto Headline2", "description": "Sets the font properties as Roboto Headline2",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"h3": { "H3": {
"name": "h3", "name": "H3",
"description": "Sets the font properties as Roboto Headline3", "description": "Sets the font properties as Roboto Headline3",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"h4": { "H4": {
"name": "h4", "name": "H4",
"description": "Sets the font properties as Roboto Headline4", "description": "Sets the font properties as Roboto Headline4",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"h5": { "H5": {
"name": "h5", "name": "H5",
"description": "Sets the font properties as Roboto Headline5", "description": "Sets the font properties as Roboto Headline5",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"h6": { "H6": {
"name": "h6", "name": "H6",
"description": "Sets the font properties as Roboto Headline6", "description": "Sets the font properties as Roboto Headline6",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"label": { "Label": {
"name": "label", "name": "Label",
"description": "A simple label component that displays its text in the standard Roboto Material Design font", "description": "A simple label component that displays its text in the standard Roboto Material Design font",
"props": { "props": {
"bold": "bool" "bold": "bool"
}, },
"tags": [] "tags": []
}, },
"overline": { "Overline": {
"name": "overline", "name": "Overline",
"description": "Sets the font properties as Roboto Overline", "description": "Sets the font properties as Roboto Overline",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"radiobutton": { "Radiobutton": {
"name": "radiobutton", "name": "Radiobutton",
"description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.", "description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.",
"props": { "props": {
"onClick": "event", "onClick": "event",
@ -135,24 +141,24 @@
}, },
"tags": [] "tags": []
}, },
"sub1": { "Sub1": {
"name": "sub1", "name": "Sub1",
"description": "Sets the font properties as Roboto Subtitle1", "description": "Sets the font properties as Roboto Subtitle1",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"sub2": { "Sub2": {
"name": "sub2", "name": "Sub2",
"description": "Sets the font properties as Roboto Subtitle2", "description": "Sets the font properties as Roboto Subtitle2",
"props": { "props": {
"text": "string" "text": "string"
}, },
"tags": [] "tags": []
}, },
"textfield": { "Textfield": {
"name": "textfield", "name": "Textfield",
"description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.", "description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
"props": { "props": {
"onChange": "event", "onChange": "event",

1
packages/materialdesign-components/package.json
View File

@ -41,6 +41,7 @@
"gitHead": "115189f72a850bfb52b65ec61d932531bf327072", "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
"dependencies": { "dependencies": {
"@material/checkbox": "^4.0.0", "@material/checkbox": "^4.0.0",
"@material/data-table": "4.0.0",
"@material/form-field": "^4.0.0", "@material/form-field": "^4.0.0",
"@material/radio": "^4.0.0", "@material/radio": "^4.0.0",
"@material/textfield": "^4.0.0" "@material/textfield": "^4.0.0"

12
packages/materialdesign-components/src/Button.svelte
View File

@ -1,12 +0,0 @@
<script>
import "@material/button/mdc-button.scss"
export let raised = false
let c = raised ? "mdc-button mdc-button--raised" : "mdc-button"
</script>
<button class={c}>
<div class="mdc-button__ripple" />
<span class="mdc-button__label">Button</span>
</button>

4
packages/materialdesign-components/src/Button/Button.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { setContext, getContext } from "svelte" import { setContext, getContext } from "svelte"
import Icon from "../Icon.svelte" import Icon from "../Common/Icon.svelte"
import ripple from "../Ripple.js" import ripple from "../Common/Ripple.js"
import ClassBuilder from "../ClassBuilder.js" import ClassBuilder from "../ClassBuilder.js"
const cb = new ClassBuilder("button", ["primary", "medium"]) const cb = new ClassBuilder("button", ["primary", "medium"])

2
packages/materialdesign-components/src/Button/index.js
View File

@ -1,2 +1,2 @@
import "./_index.scss" import "./_index.scss"
export { default as button } from "./Button.svelte" export { default as Button } from "./Button.svelte"

4
packages/materialdesign-components/src/Checkbox/index.js
View File

@ -1,4 +1,4 @@
import "./_style.scss"; import "./_style.scss";
export { default as checkbox } from "./Checkbox.svelte"; export { default as Checkbox } from "./Checkbox.svelte";
export { default as checkboxgroup } from "./CheckboxGroup.svelte"; export { default as Checkboxgroup } from "./CheckboxGroup.svelte";

0
packages/materialdesign-components/src/Icon.svelte → packages/materialdesign-components/src/Common/Icon.svelte
View File

0
packages/materialdesign-components/src/Ripple.js → packages/materialdesign-components/src/Common/Ripple.js
View File

67
packages/materialdesign-components/src/Datatable/Datatable.svelte Normal file
View File

@ -0,0 +1,67 @@
<script>
import { onMount, setContext } from "svelte"
import { MDCDataTable } from "@material/data-table"
import Row from "./DatatableRow.svelte"
import Cell from "./DatatableCell.svelte"
import { Button } from "../Button"
import ClassBuilder from "../ClassBuilder.js"
const cb = new ClassBuilder("data-table")
setContext("BBMD:data-table:cb", cb)
let datatable = null
let instance = null
onMount(() => {
if (!!datatable) instance = new MDCDataTable(datatable)
return () => {
!!instance && instance.destroy()
instance = null
}
})
</script>
<div bind:this={datatable} class={cb.build()}>
<table class={cb.elem`table`} aria-label="Material Design Datatable">
<thead>
<Row isHeader>
<Cell isHeader>Id</Cell>
<Cell isHeader>First Name</Cell>
<Cell isHeader>Second Name</Cell>
<Cell isHeader>Gender</Cell>
<Cell isHeader>Address</Cell>
<Cell isHeader>Actions</Cell>
</Row>
</thead>
<tbody class={cb.elem`content`}>
<Row>
<Cell>123456</Cell>
<Cell>Conor</Cell>
<Cell>McKeown</Cell>
<Cell>Male</Cell>
<Cell>1 Cool Street</Cell>
<Cell>
<Button
text="Select"
variant="unelevated"
colour="secondary"
size="small" />
</Cell>
</Row>
<Row>
<Cell>789101</Cell>
<Cell>Joe</Cell>
<Cell>Bloggs</Cell>
<Cell>Male</Cell>
<Cell>2 Cool Street</Cell>
<Cell>
<Button
text="Select"
variant="unelevated"
colour="secondary"
size="small" />
</Cell>
</Row>
</tbody>
</table>
</div>

23
packages/materialdesign-components/src/Datatable/DatatableCell.svelte Normal file
View File

@ -0,0 +1,23 @@
<script>
import { getContext } from "svelte"
export let isHeader = false
export let numeric = false
const cb = getContext("BBMD:data-table:cb")
let elementName = isHeader ? "header-cell" : "cell"
let modifiers = { numeric }
let props = { modifiers }
let cellClass = cb.build({ elementName, props })
</script>
{#if isHeader}
<th class={cellClass} role="columnheader" scope="col">
<slot />
</th>
{:else}
<td class={cellClass}>
<slot />
</td>
{/if}

26
packages/materialdesign-components/src/Datatable/DatatableRow.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import { getContext } from "svelte";
export let onSelect = () => {};
export let isHeader = false;
let row = null;
let selected = false;
const cb = getContext("BBMD:data-table:cb");
let elementName = isHeader ? "header-row" : "row";
let modifiers = {};
$: modifiers = { selected };
$: props = { modifiers };
$: rowClass = cb.build({ elementName, props });
function rowSelected() {
selected = !selected;
onSelect();
}
</script>
<tr bind:this={row} class={rowClass} on:click={rowSelected}>
<slot />
</tr>

1
packages/materialdesign-components/src/Datatable/_style.scss Normal file
View File

@ -0,0 +1 @@
@import "@material/data-table/mdc-data-table";

2
packages/materialdesign-components/src/Datatable/index.js Normal file
View File

@ -0,0 +1,2 @@
import "./_style.scss";
export { default as Datatable } from "./Datatable.svelte";

8
packages/materialdesign-components/src/H1.svelte
View File

@ -1,8 +0,0 @@
<script>
export let text = ""
export let className = ""
export let _bb
</script>
<h1 class={className}>{text}</h1>

4
packages/materialdesign-components/src/Radiobutton/index.js
View File

@ -1,3 +1,3 @@
import "./_style.scss"; import "./_style.scss";
export { default as radiobutton } from "./Radiobutton.svelte"; export { default as Radiobutton } from "./Radiobutton.svelte";
export { default as radiobuttongroup } from "./RadiobuttonGroup.svelte"; export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte";

34
packages/materialdesign-components/src/Test/TestApp.svelte
View File

@ -3,14 +3,15 @@
import { props } from "./props" import { props } from "./props"
let _bb let _bb
const { const {
h1, H1,
overline, Overline,
button, Button,
textfield, Textfield,
checkbox, Checkbox,
checkboxgroup, Checkboxgroup,
radiobutton, Radiobutton,
radiobuttongroup, Radiobuttongroup,
Datatable,
} = props } = props
let currentComponent let currentComponent
@ -22,14 +23,15 @@
props: { props: {
_component: "testcomponents/rootComponent", _component: "testcomponents/rootComponent",
_children: [ _children: [
h1, H1,
overline, Overline,
button, Button,
textfield, Textfield,
checkbox, Checkbox,
checkboxgroup, Checkboxgroup,
radiobutton, Radiobutton,
radiobuttongroup, Radiobuttongroup,
Datatable,
], ],
}, },
} }

42
packages/materialdesign-components/src/Test/props.js
View File

@ -1,17 +1,17 @@
export const props = { export const props = {
h1: { H1: {
_component: "@budibase/materialdesign-components/h1", _component: "@budibase/materialdesign-components/H1",
_children: [], _children: [],
text: "Im a big header", text: "Im a big header",
}, },
overline: { Overline: {
_component: "@budibase/materialdesign-components/overline", _component: "@budibase/materialdesign-components/Overline",
_children: [], _children: [],
text: "Im a wee overline", text: "Im a wee overline",
}, },
button: { Button: {
_component: "@budibase/materialdesign-components/button", _component: "@budibase/materialdesign-components/Button",
_children: [], _children: [],
variant: "raised", variant: "raised",
colour: "secondary", colour: "secondary",
@ -24,13 +24,13 @@ export const props = {
disabled: false, disabled: false,
onClick: () => alert`Button Clicked`, onClick: () => alert`Button Clicked`,
}, },
icon: { Icon: {
_component: "@budibase/materialdesign-components/icon", _component: "@budibase/materialdesign-components/Icon",
_children: [], _children: [],
icon: "", icon: "",
}, },
textfield: { Textfield: {
_component: "@budibase/materialdesign-components/textfield", _component: "@budibase/materialdesign-components/Textfield",
_children: [], _children: [],
label: "First", label: "First",
colour: "secondary", colour: "secondary",
@ -39,15 +39,15 @@ export const props = {
helperText: "Add Surname", helperText: "Add Surname",
onChange: text => console.log("Text: ", text), onChange: text => console.log("Text: ", text),
}, },
checkbox: { Checkbox: {
_component: "@budibase/materialdesign-components/checkbox", _component: "@budibase/materialdesign-components/Checkbox",
_children: [], _children: [],
id: "test-check", id: "test-check",
label: "Check Yo Self", label: "Check Yo Self",
onClick: () => alert`Before ya reck yo'self`, onClick: () => alert`Before ya reck yo'self`,
}, },
checkboxgroup: { Checkboxgroup: {
_component: "@budibase/materialdesign-components/checkboxgroup", _component: "@budibase/materialdesign-components/Checkboxgroup",
_children: [], _children: [],
label: "Whats your favourite?", label: "Whats your favourite?",
items: [ items: [
@ -57,15 +57,15 @@ export const props = {
], ],
onChange: selectedItems => console.log(selectedItems), onChange: selectedItems => console.log(selectedItems),
}, },
radiobutton: { Radiobutton: {
_component: "@budibase/materialdesign-components/radiobutton", _component: "@budibase/materialdesign-components/Radiobutton",
_children: [], _children: [],
label: "Hi radio", label: "Hi radio",
alignEnd: true, alignEnd: true,
onClick: () => alert`Roger That`, onClick: () => alert`Roger That`,
}, },
radiobuttongroup: { Radiobuttongroup: {
_component: "@budibase/materialdesign-components/radiobuttongroup", _component: "@budibase/materialdesign-components/Radiobuttongroup",
_children: [], _children: [],
label: "Preferred method of contact: ", label: "Preferred method of contact: ",
orientation: "column", orientation: "column",
@ -75,5 +75,9 @@ export const props = {
{ label: "Social Media", value: 3 }, { label: "Social Media", value: 3 },
], ],
onChange: selected => console.log(selected), onChange: selected => console.log(selected),
} },
Datatable: {
_component: "@budibase/materialdesign-components/Datatable",
_children: [],
},
} }

30
packages/materialdesign-components/src/Test/testComponents.js
View File

@ -1,23 +1,25 @@
import { import {
H1, H1,
Overline, Overline,
button, Button,
icon, Icon,
textfield, Textfield,
checkbox, Checkbox,
checkboxgroup, Checkboxgroup,
radiobutton, Radiobutton,
radiobuttongroup, Radiobuttongroup,
Datatable,
} from "@BBMD" } from "@BBMD"
export default { export default {
H1, H1,
Overline, Overline,
button, Button,
icon, Icon,
textfield, Textfield,
checkbox, Checkbox,
checkboxgroup, Checkboxgroup,
radiobutton, Radiobutton,
radiobuttongroup, Radiobuttongroup,
Datatable,
} }

2
packages/materialdesign-components/src/Textfield/Textfield.svelte
View File

@ -8,7 +8,7 @@
import FloatingLabel from "../Common/FloatingLabel.svelte" import FloatingLabel from "../Common/FloatingLabel.svelte"
import HelperText from "./HelperText.svelte" import HelperText from "./HelperText.svelte"
import CharacterCounter from "./CharacterCounter.svelte" import CharacterCounter from "./CharacterCounter.svelte"
import Icon from "../Icon.svelte" import Icon from "../Common/Icon.svelte"
const cb = new ClassBuilder("text-field", ["primary", "medium"]) const cb = new ClassBuilder("text-field", ["primary", "medium"])

2
packages/materialdesign-components/src/Textfield/index.js
View File

@ -1,2 +1,2 @@
import "./_index.scss" import "./_index.scss"
export { default as textfield } from "./Textfield.svelte" export { default as Textfield } from "./Textfield.svelte"

24
packages/materialdesign-components/src/Typography/index.js
View File

@ -1,13 +1,13 @@
import "./_style.scss"; import "./_style.scss";
export { default as body1 } from "./Body1.svelte"; export { default as Body1 } from "./Body1.svelte";
export { default as body2 } from "./Body2.svelte"; export { default as Body2 } from "./Body2.svelte";
export { default as caption } from "./Caption.svelte"; export { default as Caption } from "./Caption.svelte";
export { default as h1 } from "./H1.svelte"; export { default as H1 } from "./H1.svelte";
export { default as h2 } from "./H2.svelte"; export { default as H2 } from "./H2.svelte";
export { default as h3 } from "./H3.svelte"; export { default as H3 } from "./H3.svelte";
export { default as h4 } from "./H4.svelte"; export { default as H4 } from "./H4.svelte";
export { default as h5 } from "./H5.svelte"; export { default as H5 } from "./H5.svelte";
export { default as h6 } from "./H6.svelte"; export { default as H6 } from "./H6.svelte";
export { default as overline } from "./Overline.svelte"; export { default as Overline } from "./Overline.svelte";
export { default as sub1 } from "./Sub1.svelte"; export { default as Sub1 } from "./Sub1.svelte";
export { default as sub2 } from "./Sub2.svelte"; export { default as Sub2 } from "./Sub2.svelte";

13
packages/materialdesign-components/src/index.js
View File

@ -1,10 +1,11 @@
import "@material/theme/mdc-theme.scss"; import "@material/theme/mdc-theme.scss";
export { button } from "./Button" export { Button } from "./Button"
export { default as icon } from "./Icon.svelte" export { default as Icon } from "./Common/Icon.svelte"
export { textfield } from "./Textfield" export { Textfield } from "./Textfield"
export * from "./Typography" export * from "./Typography"
export { checkbox, checkboxgroup } from "./Checkbox" export { Checkbox, Checkboxgroup } from "./Checkbox"
export { radiobutton, radiobuttongroup } from "./Radiobutton" export { Radiobutton, Radiobuttongroup } from "./Radiobutton"
export { label } from "./Common/Label.svelte" export { default as Label } from "./Common/Label.svelte"
export { Datatable } from "./Datatable"