mirror of https://github.com/Budibase/budibase.git
Conor_Mack
7 years ago
committed by
GitHub
GitHub
22 changed files with 245 additions and 130 deletions
@ -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> |
|
||||
@ -1,2 +1,2 @@ |
|||||
import "./_index.scss" |
import "./_index.scss" |
||||
export { default as button } from "./Button.svelte" |
export { default as Button } from "./Button.svelte" |
||||
|
|||||
@ -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,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> |
||||
@ -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} |
||||
@ -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> |
||||
@ -0,0 +1 @@ |
|||||
|
@import "@material/data-table/mdc-data-table"; |
||||
@ -0,0 +1,2 @@ |
|||||
|
import "./_style.scss"; |
||||
|
export { default as Datatable } from "./Datatable.svelte"; |
||||
@ -1,8 +0,0 @@ |
|||||
<script> |
|
||||
export let text = "" |
|
||||
export let className = "" |
|
||||
|
|
||||
export let _bb |
|
||||
</script> |
|
||||
|
|
||||
<h1 class={className}>{text}</h1> |
|
||||
@ -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"; |
||||
|
|||||
@ -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, |
||||
} |
} |
||||
|
|||||
@ -1,2 +1,2 @@ |
|||||
import "./_index.scss" |
import "./_index.scss" |
||||
export { default as textfield } from "./Textfield.svelte" |
export { default as Textfield } from "./Textfield.svelte" |
||||
@ -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"; |
||||
|
|||||
@ -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" |
||||
|
|
||||
|
|||||
Loading…
Reference in new issue