diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index 4abcb7aee4..c0e79c511c 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -1,5 +1,11 @@ { "_lib": "./dist/index.js", + "_templates": { + "indexDatatable": { + "description": "Datatable based on an Index", + "component": "Datatable" + } + }, "Body1": { "name": "Body1", "description": "Sets the font properties as Roboto Body 1", @@ -61,6 +67,26 @@ "props": {}, "tags": [] }, + "DatatableHead": { + "name": "DatatableHead", + "description": "Material Design .", + "props": {} + }, + "DatatableCell": { + "name": "DatatableCell", + "description": "Material Design .", + "props": {} + }, + "DatatableBody": { + "name": "DatatableBody", + "description": "Material Design .", + "props": {} + }, + "DatatableRow": { + "name": "DatatableRow", + "description": "Material Design .", + "props": {} + }, "H1": { "name": "H1", "description": "Sets the font properties as Roboto Headline1", diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json index a93b5602a7..22a172766f 100644 --- a/packages/materialdesign-components/package.json +++ b/packages/materialdesign-components/package.json @@ -13,6 +13,7 @@ }, "devDependencies": { "@budibase/client": "^0.0.16", + "@budibase/standard-components": "^0.0.16", "@material/button": "^4.0.0", "@nx-js/compiler-util": "^2.0.0", "bcryptjs": "^2.4.3", diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte index 7021feafe0..9c179e2eb9 100644 --- a/packages/materialdesign-components/src/Datatable/Datatable.svelte +++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte @@ -6,14 +6,27 @@ import { Button } from "../Button" import ClassBuilder from "../ClassBuilder.js" + export let _bb + const cb = new ClassBuilder("data-table") setContext("BBMD:data-table:cb", cb) let datatable = null let instance = null + let tableElement + let initialied = false + + $: { + if(tableElement && datatable && !initialied) { + const children = _bb.attachChildren(tableElement) + if(children.length > 0) { + instance = new MDCDataTable(datatable) + initialied = true + } + } + } onMount(() => { - if (!!datatable) instance = new MDCDataTable(datatable) return () => { !!instance && instance.destroy() instance = null @@ -22,46 +35,7 @@
- - - - Id - First Name - Second Name - Gender - Address - Actions - - - - - 123456 - Conor - McKeown - Male - 1 Cool Street - - +
+
diff --git a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte new file mode 100644 index 0000000000..409d4828eb --- /dev/null +++ b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte index beb078d7cb..3cea365f99 100644 --- a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte +++ b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte @@ -3,6 +3,7 @@ export let isHeader = false export let numeric = false + export let _bb const cb = getContext("BBMD:data-table:cb") @@ -10,14 +11,18 @@ let modifiers = { numeric } let props = { modifiers } let cellClass = cb.build({ elementName, props }) + let element + + $: element && _bb.attachChildren(element) + {#if isHeader} - + {:else} - + {/if} diff --git a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte new file mode 100644 index 0000000000..f50a5cca0e --- /dev/null +++ b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte index 6ad16f94d6..08b0fd1040 100644 --- a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte +++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte @@ -3,6 +3,9 @@ export let onSelect = () => {}; export let isHeader = false; + + export let _bb + let row = null; let selected = false; @@ -14,7 +17,8 @@ $: modifiers = { selected }; $: props = { modifiers }; $: rowClass = cb.build({ elementName, props }); - + $: row && _bb.attachChildren(row) + function rowSelected() { selected = !selected; onSelect(); diff --git a/packages/materialdesign-components/src/Datatable/index.js b/packages/materialdesign-components/src/Datatable/index.js index 2be32d546f..69dd1e759e 100644 --- a/packages/materialdesign-components/src/Datatable/index.js +++ b/packages/materialdesign-components/src/Datatable/index.js @@ -1,2 +1,6 @@ -import "./_style.scss"; -export { default as Datatable } from "./Datatable.svelte"; +import "./_style.scss" +export { default as Datatable } from "./Datatable.svelte" +export { default as DatatableCell } from "./DatatableCell.svelte" +export { default as DatatableHead } from "./DatatableHead.svelte" +export { default as DatatableBody } from "./DatatableBody.svelte" +export { default as DatatableRow } from "./DatatableRow.svelte" diff --git a/packages/materialdesign-components/src/Templates/indexDatatable.js b/packages/materialdesign-components/src/Templates/indexDatatable.js new file mode 100644 index 0000000000..145e3f5eea --- /dev/null +++ b/packages/materialdesign-components/src/Templates/indexDatatable.js @@ -0,0 +1,69 @@ +export default ({ indexes, helpers }) => + indexes.map(i => ({ + name: `Table based on index: ${i.name} `, + props: tableProps(i, helpers.indexSchema(i)), + })) + +const tableProps = (index, indexSchema) => ({ + _component: "@budibase/materialdesign-components/Datatable", + _children: [ + { + _component: "@budibase/materialdesign-components/DatatableHead", + _children: [ + { + _component: "@budibase/materialdesign-components/DatatableRow", + isHeader: true, + _children: columnHeaders(indexSchema), + }, + ], + }, + { + _component: "@budibase/materialdesign-components/DatatableBody", + _children: [ + { + _code: rowCode(index), + _component: "@budibase/materialdesign-components/DatatableRow", + _children: dataCells(index, indexSchema), + }, + ], + }, + ], +}) + +const columnHeaders = indexSchema => + indexSchema.map(col => ({ + _component: "@budibase/materialdesign-components/DatatableCell", + isHeader: true, + _children: [ + { + _component: "@budibase/standard-components/text", + type: "none", + text: col.name, + }, + ], + })) + +const dataCells = (index, indexSchema) => + indexSchema.map(col => ({ + _component: "@budibase/materialdesign-components/DatatableCell", + _children: [ + { + _component: "@budibase/standard-components/text", + type: "none", + text: { + "##bbstate": `${dataItem(index)}.${col.name}`, + "##bbstatefallback": "", + "##bbsource": "context", + }, + }, + ], + })) + +const dataItem = index => `${index.name}_item` +const dataCollection = index => `store.${index.name}` +const rowCode = index => + ` +if (!${dataCollection(index)}) return + +for (let ${dataItem(index)} of ${dataCollection(index)}) + render( { ${dataItem(index)}) }` diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index bdca2e72b0..229f5293e9 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -12,6 +12,7 @@ Radiobutton, Radiobuttongroup, Datatable, + CustomersIndexTable, } = props let currentComponent @@ -32,6 +33,7 @@ Radiobutton, Radiobuttongroup, Datatable, + CustomersIndexTable ], }, } diff --git a/packages/materialdesign-components/src/Test/createApp.js b/packages/materialdesign-components/src/Test/createApp.js index d9a491a8af..8cea5c1268 100644 --- a/packages/materialdesign-components/src/Test/createApp.js +++ b/packages/materialdesign-components/src/Test/createApp.js @@ -2,23 +2,24 @@ import { createApp } from "@budibase/client/src/createApp" import components from "./testComponents" import packageJson from "../../package.json" import { rootComponent } from "./rootComponent" +import * as standardcomponents from "@budibase/standard-components/src/index" + export default async props => { delete components._lib const componentLibraries = {} componentLibraries[packageJson.name] = components componentLibraries["testcomponents"] = { - rootComponent: rootComponent(window) + rootComponent: rootComponent(window), } + componentLibraries["@budibase/standard-components"] = standardcomponents const appDef = { hierarchy: {}, actions: {} } const user = { name: "yeo", permissions: [] } const { initialisePage } = createApp( - window.document, componentLibraries, { appRootPath: "" }, appDef, user, - {}, - [] + {} ) return initialisePage -} \ No newline at end of file +} diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index a94c171537..43da839f65 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -1,3 +1,24 @@ +import indexDatatable from "../Templates/indexDatatable" + +const templateOptions = { + indexes: [ + { + name: "customers", + }, + ], + helpers: { + indexSchema: index => { + const field = name => ({ name }) + if (index.name === "customers") + return [ + field("id"), + field("surname"), + field("forname"), + field("address"), + ] + }, + }, +} export const props = { H1: { @@ -80,4 +101,6 @@ export const props = { _component: "@budibase/materialdesign-components/Datatable", _children: [], }, + + CustomersIndexTable: indexDatatable(templateOptions)[0].props, } diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js index 7ac56d181d..3b0a914e71 100644 --- a/packages/materialdesign-components/src/Test/testComponents.js +++ b/packages/materialdesign-components/src/Test/testComponents.js @@ -1,25 +1,3 @@ -import { - H1, - Overline, - Button, - Icon, - Textfield, - Checkbox, - Checkboxgroup, - Radiobutton, - Radiobuttongroup, - Datatable, -} from "@BBMD" +import * as components from "@BBMD" -export default { - H1, - Overline, - Button, - Icon, - Textfield, - Checkbox, - Checkboxgroup, - Radiobutton, - Radiobuttongroup, - Datatable, -} +export default components diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index c5c98ba0cb..92bdf2ca8e 100644 --- a/packages/materialdesign-components/src/index.js +++ b/packages/materialdesign-components/src/index.js @@ -1,4 +1,4 @@ -import "@material/theme/mdc-theme.scss"; +import "@material/theme/mdc-theme.scss" export { Button } from "./Button" export { default as Icon } from "./Common/Icon.svelte" @@ -7,5 +7,11 @@ export * from "./Typography" export { Checkbox, Checkboxgroup } from "./Checkbox" export { Radiobutton, Radiobuttongroup } from "./Radiobutton" export { default as Label } from "./Common/Label.svelte" -export { Datatable } from "./Datatable" - +export { + Datatable, + DatatableHead, + DatatableBody, + DatatableCell, + DatatableRow, +} from "./Datatable" +export { default as indexDatatable } from "./Templates/indexDatatable" diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 537a11103d..d5e8320b93 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -137,6 +137,24 @@ }, "tags": ["div", "container"] }, + "link": { + "description": "an HTML anchor tag", + "props": { + "url": "string", + "openInNewTab": "bool", + "text": "string" + } + }, + "image": { + "description": "an HTML tag", + "props": { + "url": "string", + "className": "string", + "description": "string", + "height": "string", + "width": "string" + } + }, "container": { "name": "Container", "description": "An element that contains and lays out other elements. e.g.
,
etc", @@ -178,5 +196,19 @@ } }, "tags": [] + }, + "thead": { + "name": "TableHead", + "description": "an HTML tab", + "props" : { + "className":"string" + } + }, + "tbody": { + "name": "TableBody", + "description": "an HTML tab", + "props" : { + "className":"string" + } } } \ No newline at end of file diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte new file mode 100644 index 0000000000..d7ea125a92 --- /dev/null +++ b/packages/standard-components/src/Image.svelte @@ -0,0 +1,19 @@ + + + +{description} \ No newline at end of file diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte new file mode 100644 index 0000000000..9c48d1c302 --- /dev/null +++ b/packages/standard-components/src/Link.svelte @@ -0,0 +1,18 @@ + + +{text} + + diff --git a/packages/standard-components/src/TableBody.svelte b/packages/standard-components/src/TableBody.svelte new file mode 100644 index 0000000000..2302cc8fff --- /dev/null +++ b/packages/standard-components/src/TableBody.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/TableHead.svelte b/packages/standard-components/src/TableHead.svelte new file mode 100644 index 0000000000..b958bd2c85 --- /dev/null +++ b/packages/standard-components/src/TableHead.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index 43cd8f1708..c8d8a245bf 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -29,7 +29,7 @@ {#if isTag("none")} -{text} +{text} {:else if isTag("")} {text} {:else if isTag("")} diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index 3d512cb252..7d9a3d04a7 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -7,3 +7,5 @@ export { default as option } from "./Option.svelte" export { default as button } from "./Button.svelte" export { default as login } from "./Login.svelte" export { default as saveRecordButton } from "./Templates/saveRecordButton" +export { default as link } from "./Link.svelte" +export { default as image } from "./Image.svelte"