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

Completed MD Datatable and General Tidyup

This commit is contained in:
Conor_Mack 2020-02-18 15:05:09 +00:00
parent c17f6bb2a5
commit 79363ec6d1
21 changed files with 186 additions and 157 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",

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

@ -41,7 +41,7 @@
"gitHead": "115189f72a850bfb52b65ec61d932531bf327072", "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
"dependencies": { "dependencies": {
"@material/checkbox": "^4.0.0", "@material/checkbox": "^4.0.0",
"@material/data-table": "^5.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

57
packages/materialdesign-components/src/Datatable/Datatable.svelte
View File

@ -1,8 +1,9 @@
<script> <script>
import { onMount, setContext } from "svelte" import { onMount, setContext } from "svelte"
import { MDCDataTable } from "@material/data-table" import { MDCDataTable } from "@material/data-table"
import DatatableRow from "./DatatableRow.svelte" import Row from "./DatatableRow.svelte"
import DatatableCell from "./DatatableCell.svelte" import Cell from "./DatatableCell.svelte"
import { Button } from "../Button"
import ClassBuilder from "../ClassBuilder.js" import ClassBuilder from "../ClassBuilder.js"
const cb = new ClassBuilder("data-table") const cb = new ClassBuilder("data-table")
@ -20,25 +21,47 @@
}) })
</script> </script>
<div class={cb.block()}> <div bind:this={datatable} class={cb.build()}>
<table class={cb.elem`table`} aria-label="Material Design Datatable"> <table class={cb.elem`table`} aria-label="Material Design Datatable">
<thead> <thead>
<DatatableRow isHeader> <Row isHeader>
<DatatableCell isHeader>Id</DatatableCell> <Cell isHeader>Id</Cell>
<DatatableCell isHeader>First Name</DatatableCell> <Cell isHeader>First Name</Cell>
<DatatableCell isHeader>Second Name</DatatableCell> <Cell isHeader>Second Name</Cell>
<DatatableCell isHeader>Gender</DatatableCell> <Cell isHeader>Gender</Cell>
<DatatableCell isHeader>Address</DatatableCell> <Cell isHeader>Address</Cell>
</DatatableRow> <Cell isHeader>Actions</Cell>
</Row>
</thead> </thead>
<tbody class={cb.elem`content`}> <tbody class={cb.elem`content`}>
<DatatableRow> <Row>
<DatatableCell numeric>123456</DatatableCell> <Cell>123456</Cell>
<DatatableCell>Conor</DatatableCell> <Cell>Conor</Cell>
<DatatableCell>McKeown</DatatableCell> <Cell>McKeown</Cell>
<DatatableCell>Male</DatatableCell> <Cell>Male</Cell>
<DatatableCell>1 Cool Street</DatatableCell> <Cell>1 Cool Street</Cell>
</DatatableRow> <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> </tbody>
</table> </table>
</div> </div>

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

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

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

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

2
packages/materialdesign-components/src/Datatable/index.js
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"