CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 22:40:39 +12:00
Code Issues Projects Releases Wiki Activity

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

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

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

@ -41,6 +41,7 @@
"gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
"dependencies": {
"@material/checkbox": "^4.0.0",
"@material/data-table": "4.0.0",
"@material/form-field": "^4.0.0",
"@material/radio": "^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>
import { setContext, getContext } from "svelte"
import Icon from "../Icon.svelte"
import ripple from "../Ripple.js"
import Icon from "../Common/Icon.svelte"
import ripple from "../Common/Ripple.js"
import ClassBuilder from "../ClassBuilder.js"
const cb = new ClassBuilder("button", ["primary", "medium"])

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

@ -1,2 +1,2 @@
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";
export { default as checkbox } from "./Checkbox.svelte";
export { default as checkboxgroup } from "./CheckboxGroup.svelte";
export { default as Checkbox } from "./Checkbox.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";
export { default as radiobutton } from "./Radiobutton.svelte";
export { default as radiobuttongroup } from "./RadiobuttonGroup.svelte";
export { default as Radiobutton } from "./Radiobutton.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"
let _bb
const {
h1,
overline,
button,
textfield,
checkbox,
checkboxgroup,
radiobutton,
radiobuttongroup,
H1,
Overline,
Button,
Textfield,
Checkbox,
Checkboxgroup,
Radiobutton,
Radiobuttongroup,
Datatable,
} = props
let currentComponent
@ -22,14 +23,15 @@
props: {
_component: "testcomponents/rootComponent",
_children: [
h1,
overline,
button,
textfield,
checkbox,
checkboxgroup,
radiobutton,
radiobuttongroup,
H1,
Overline,
Button,
Textfield,
Checkbox,
Checkboxgroup,
Radiobutton,
Radiobuttongroup,
Datatable,
],
},
}

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

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

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

@ -8,7 +8,7 @@
import FloatingLabel from "../Common/FloatingLabel.svelte"
import HelperText from "./HelperText.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"])

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

@ -1,2 +1,2 @@
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";
export { default as body1 } from "./Body1.svelte";
export { default as body2 } from "./Body2.svelte";
export { default as caption } from "./Caption.svelte";
export { default as h1 } from "./H1.svelte";
export { default as h2 } from "./H2.svelte";
export { default as h3 } from "./H3.svelte";
export { default as h4 } from "./H4.svelte";
export { default as h5 } from "./H5.svelte";
export { default as h6 } from "./H6.svelte";
export { default as overline } from "./Overline.svelte";
export { default as sub1 } from "./Sub1.svelte";
export { default as sub2 } from "./Sub2.svelte";
export { default as Body1 } from "./Body1.svelte";
export { default as Body2 } from "./Body2.svelte";
export { default as Caption } from "./Caption.svelte";
export { default as H1 } from "./H1.svelte";
export { default as H2 } from "./H2.svelte";
export { default as H3 } from "./H3.svelte";
export { default as H4 } from "./H4.svelte";
export { default as H5 } from "./H5.svelte";
export { default as H6 } from "./H6.svelte";
export { default as Overline } from "./Overline.svelte";
export { default as Sub1 } from "./Sub1.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";
export { button } from "./Button"
export { default as icon } from "./Icon.svelte"
export { textfield } from "./Textfield"
export { Button } from "./Button"
export { default as Icon } from "./Common/Icon.svelte"
export { Textfield } from "./Textfield"
export * from "./Typography"
export { checkbox, checkboxgroup } from "./Checkbox"
export { radiobutton, radiobuttongroup } from "./Radiobutton"
export { label } from "./Common/Label.svelte"
export { Checkbox, Checkboxgroup } from "./Checkbox"
export { Radiobutton, Radiobuttongroup } from "./Radiobutton"
export { default as Label } from "./Common/Label.svelte"
export { Datatable } from "./Datatable"