Completed MD Datatable and General Tidyup

packages/materialdesign-components/components.json

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

packages/materialdesign-components/package.json

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

packages/materialdesign-components/src/Button.svelte

@@ -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>

packages/materialdesign-components/src/Button/Button.svelte

@@ -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"])

packages/materialdesign-components/src/Button/index.js

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

packages/materialdesign-components/src/Checkbox/index.js

@@ -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";
 

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

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

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

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

packages/materialdesign-components/src/Datatable/_style.scss

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

packages/materialdesign-components/src/Datatable/index.js

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

packages/materialdesign-components/src/H1.svelte

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

packages/materialdesign-components/src/Radiobutton/index.js

@@ -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";

packages/materialdesign-components/src/Test/TestApp.svelte

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

packages/materialdesign-components/src/Test/props.js

@@ -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: [],
+  },
 }

packages/materialdesign-components/src/Test/testComponents.js

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

packages/materialdesign-components/src/Textfield/Textfield.svelte

@@ -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"])
 

packages/materialdesign-components/src/Textfield/index.js

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

packages/materialdesign-components/src/Typography/index.js

@@ -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";

packages/materialdesign-components/src/index.js

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