new components

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 <thead>.",
+    "props": {}
+  },
+  "DatatableCell": {
+    "name": "DatatableCell",
+    "description": "Material Design <td>.",
+    "props": {}
+  },
+  "DatatableBody": {
+    "name": "DatatableBody",
+    "description": "Material Design <tbody>.",
+    "props": {}
+  },
+  "DatatableRow": {
+    "name": "DatatableRow",
+    "description": "Material Design <tr>.",
+    "props": {}
+  },
   "H1": {
     "name": "H1",
     "description": "Sets the font properties as Roboto Headline1",

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",

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 @@
 </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 class={cb.elem`table`} aria-label="Material Design Datatable" bind:this={tableElement}>
+    
   </table>
 </div>

packages/materialdesign-components/src/Datatable/DatatableBody.svelte

@@ -0,0 +1,15 @@
+<script>
+import { getContext } from "svelte"
+import ClassBuilder from "../ClassBuilder.js"
+
+export let _bb
+
+const cb = getContext("BBMD:data-table:cb")
+
+let tbody
+
+$: tbody && _bb.attachChildren(tbody)
+
+</script>
+
+<tbody bind:this={tbody} class={cb.elem`content`}></tbody>

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)
+
 </script>
 
 {#if isHeader}
-  <th class={cellClass} role="columnheader" scope="col">
+  <th class={cellClass} role="columnheader" scope="col" bind:this={element}>
     <slot />
   </th>
 {:else}
-  <td class={cellClass}>
+  <td class={cellClass} bind:this={element}>
     <slot />
   </td>
 {/if}

packages/materialdesign-components/src/Datatable/DatatableHead.svelte

@@ -0,0 +1,11 @@
+<script>
+
+export let _bb
+
+let thead
+
+$: thead && _bb.attachChildren(thead)
+
+</script>
+
+<thead bind:this={thead} class=className></thead>

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,6 +17,7 @@
   $: modifiers = { selected };
   $: props = { modifiers };
   $: rowClass = cb.build({ elementName, props });
+  $: row && _bb.attachChildren(row)
   
   function rowSelected() {
     selected = !selected;

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"

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)}) }`

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
           ],
         },
       }

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
 }

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,
 }

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

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"

packages/standard-components/components.json

@@ -137,6 +137,24 @@
 		},
 		"tags": ["div", "container"]
 	},
+	"link": {
+		"description": "an HTML anchor <a> tag",
+		"props": {
+			"url": "string",
+			"openInNewTab": "bool",
+			"text": "string"
+		}
+	},
+	"image": {
+		"description": "an HTML <img> 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. <div>, <header> etc",
@@ -178,5 +196,19 @@
 			}
 		},
 		"tags": []
+	},
+	"thead": {
+		"name": "TableHead",
+		"description": "an HTML <thead> tab",
+		"props" : {
+			"className":"string"
+		}
+	},
+	"tbody": {
+		"name": "TableBody",
+		"description": "an HTML <tbody> tab",
+		"props" : {
+			"className":"string"
+		}
 	}
 }

packages/standard-components/src/Image.svelte

@@ -0,0 +1,19 @@
+<script>
+
+import { buildStyle } from "./buildStyle"
+
+export let className = "";
+export let url = "";
+export let description = ""
+export let height
+export let width
+
+$: style = buildStyle({height, width})
+
+</script>
+
+
+<img class={className}
+     style={style}
+     src={url}
+     alt={description} >

packages/standard-components/src/Link.svelte

@@ -0,0 +1,18 @@
+<script>
+
+export let url = ""
+export let text = ""
+export let openInNewTab = false
+
+export let _bb
+
+let anchorElement
+
+$: anchorElement && !text && _bb.attachChildren(anchorElement)
+$: target = openInNewTab ? "_blank" : "_self"
+
+</script>
+
+<a href={url} bind:this={anchorElement} target={target}>{text}</a>
+
+

packages/standard-components/src/TableBody.svelte

@@ -0,0 +1,12 @@
+<script>
+
+export let className=""
+export let _bb
+
+let thead
+
+$: _bb.attachChildren(thead)
+
+</script>
+
+<tbody bind:this={thead} class=className></tbody>

packages/standard-components/src/TableHead.svelte

@@ -0,0 +1,12 @@
+<script>
+
+export let className=""
+export let _bb
+
+let thead
+
+$: _bb.attachChildren(thead)
+
+</script>
+
+<thead bind:this={thead} class=className></thead>

packages/standard-components/src/Text.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if isTag("none")}
-{text}
+<span>{text}</span>
 {:else if isTag("<b>")}
 <b class={className} {style}>{text}</b>
 {:else if isTag("<strong>")}

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"