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" |
|||
export { default as button } from "./Button.svelte" |
|||
export { default as Button } from "./Button.svelte" |
|||
|
|||
@ -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,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"; |
|||
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"; |
|||
|
|||
@ -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, |
|||
} |
|||
|
|||
@ -1,2 +1,2 @@ |
|||
import "./_index.scss" |
|||
export { default as textfield } from "./Textfield.svelte" |
|||
export { default as Textfield } from "./Textfield.svelte" |
|||
@ -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"; |
|||
|
|||
@ -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" |
|||
|
|||
|
|||
Loading…
Reference in new issue