forked from tsai/budibase
Martin McKeaveney
7 years ago
43 changed files with 756 additions and 39 deletions
@ -0,0 +1,34 @@ |
|||
<script> |
|||
import CardHeader from "./CardHeader.svelte" |
|||
import CardBody from "./CardBody.svelte" |
|||
import CardImage from "./CardImage.svelte" |
|||
import CardFooter from "./CardFooter.svelte" |
|||
import { H2, H6, Body2 } from "../Typography" |
|||
import { Button } from "../Button" |
|||
import { IconButton } from "../IconButton" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
export let width = "350px" |
|||
export let height = "auto" |
|||
export let variant = "standard" |
|||
|
|||
export let _bb |
|||
let card |
|||
|
|||
const cb = new ClassBuilder("card", ["standard"]) |
|||
|
|||
$: modifiers = { variant } |
|||
$: props = { modifiers } |
|||
$: cardClass = cb.build({ props }) |
|||
|
|||
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width |
|||
$: safeHeight = |
|||
height !== "auto" && !/px$/.test(height) ? `${width}px` : height |
|||
|
|||
$: card && _bb.attachChildren(card) |
|||
</script> |
|||
|
|||
<div |
|||
bind:this={card} |
|||
style={`width: ${safeWidth}; height: ${safeHeight}`} |
|||
class={cardClass} /> |
|||
@ -0,0 +1,10 @@ |
|||
<script> |
|||
export let _bb |
|||
export let onClick = () => {} |
|||
|
|||
let cardBody |
|||
|
|||
$: cardBody && _bb.attachChildren(cardBody) |
|||
</script> |
|||
|
|||
<div bind:this={cardBody} class="mdc-card__primary-action" on:click={onClick} /> |
|||
@ -0,0 +1,31 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
let cardFooter |
|||
export let _bb |
|||
export let padding = "5px" |
|||
|
|||
onMount(() => { |
|||
_bb.setContext( |
|||
"BBMD:icon-button:context", |
|||
"mdc-card__action mdc-card__action--icon" |
|||
) |
|||
_bb.setContext( |
|||
"BBMD:button:context", |
|||
"mdc-card__action mdc-card__action--button" |
|||
) |
|||
}) |
|||
|
|||
$: cardFooter && _bb.attachChildren(cardFooter) |
|||
</script> |
|||
|
|||
<div |
|||
bind:this={cardFooter} |
|||
style={`padding: ${padding}`} |
|||
class="mdc-card__actions bbmd-card__actions" /> |
|||
|
|||
<style> |
|||
.bbmd-card__actions { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
<script> |
|||
import { H6, Sub2 } from "../Typography" |
|||
import Icon from "../Common/Icon.svelte" |
|||
export let _bb |
|||
export let title = "" |
|||
export let subtitle = "" |
|||
export let icon = "" |
|||
|
|||
$: useIcon = !!icon |
|||
$: useSubtitle = !!subtitle |
|||
</script> |
|||
|
|||
<div class="card-header"> |
|||
{#if useIcon} |
|||
<div class="card-header__icon"> |
|||
<Icon {icon} /> |
|||
</div> |
|||
{/if} |
|||
<div class="card-header__title"> |
|||
<H6 text={title} /> |
|||
{#if useSubtitle} |
|||
<Sub2 text={subtitle} /> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.card-header { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.card-header__icon { |
|||
flex: 0; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.card-header__title { |
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
flex: 1; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,62 @@ |
|||
<script> |
|||
import { H6, Sub2 } from "../Typography" |
|||
export let _bb |
|||
export let displayHorizontal = false //aligns image on row with title and subtitle text |
|||
export let url = "" |
|||
export let title = "" |
|||
export let subtitle = "" |
|||
|
|||
$: useTitle = !!title |
|||
$: useSubTitle = !!subtitle |
|||
</script> |
|||
|
|||
{#if !displayHorizontal} |
|||
<div |
|||
class="my-card__media mdc-card__media mdc-card__media--16-9" |
|||
style={`background-image: url(${url})`}> |
|||
<div class="mdc-card__media-content bbmd-card-media__content"> |
|||
{#if useTitle} |
|||
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
|||
{#if useSubTitle} |
|||
<Sub2 text={subtitle} horizontalMargin={10} /> |
|||
{/if} |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{:else} |
|||
<div class="bbmd-card--horizontal"> |
|||
<div |
|||
class="mdc-card__media mdc-card__media mdc-card__media--square |
|||
bbmd-card--horizontal-image" |
|||
style={`background-image: url(${url})`} /> |
|||
<div class="bbmd-card--horizontal-text"> |
|||
{#if useTitle} |
|||
<H6 text={title} verticalMargin={0} horizontalMargin={10} /> |
|||
{#if useSubTitle} |
|||
<Sub2 text={subtitle} horizontalMargin={10} /> |
|||
{/if} |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
|
|||
<style> |
|||
.bbmd-card--horizontal { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
} |
|||
|
|||
.bbmd-card--horizontal-image { |
|||
flex: 0 0 110px; |
|||
} |
|||
|
|||
.bbmd-card--horizontal-text { |
|||
flex: 1; |
|||
padding: 10px 5px; |
|||
} |
|||
|
|||
.bbmd-card-media__content { |
|||
top: 125px; |
|||
color: white; |
|||
} |
|||
</style> |
|||
@ -0,0 +1 @@ |
|||
@import "@material/card/mdc-card.scss" |
|||
@ -0,0 +1,7 @@ |
|||
import "./_styles.scss" |
|||
export { default as Card } from "./Card.svelte" |
|||
export { default as CardBody } from "./CardBody.svelte" |
|||
export { default as CardFooter } from "./CardFooter.svelte" |
|||
export { default as CardHeader } from "./CardHeader.svelte" |
|||
export { default as CardImage } from "./CardImage.svelte" |
|||
|
|||
@ -0,0 +1,44 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { fade } from "svelte/transition" |
|||
import { MDCDialog } from "@material/dialog" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
let dialog |
|||
let dialogSurface |
|||
let instance |
|||
|
|||
export let _bb |
|||
// TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side |
|||
export let open = true |
|||
|
|||
onMount(() => { |
|||
instance = new MDCDialog(dialog) |
|||
return () => { |
|||
instance && instance.destroy() |
|||
} |
|||
}) |
|||
|
|||
$: dialogSurface && _bb.attachChildren(dialogSurface) |
|||
|
|||
$: { |
|||
if (open) { |
|||
instance && instance.open() |
|||
} else { |
|||
instance && instance.close() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<div bind:this={dialog} class="mdc-dialog"> |
|||
<div class="mdc-dialog__container"> |
|||
<div |
|||
bind:this={dialogSurface} |
|||
class="mdc-dialog__surface" |
|||
role="alertdialog" |
|||
aria-modal="true" |
|||
aria-labelledby="my-dialog-title" |
|||
aria-describedby="my-dialog-content" /> |
|||
</div> |
|||
<div class="mdc-dialog__scrim" on:click={() => (open = false)} /> |
|||
</div> |
|||
@ -0,0 +1,13 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
export let _bb |
|||
let dialogActions |
|||
|
|||
onMount(() => { |
|||
_bb.setContext("BBMD:button:context", "mdc-dialog__button") |
|||
}) |
|||
|
|||
$: dialogActions && _bb.attachChildren(dialogActions) |
|||
</script> |
|||
|
|||
<footer bind:this={dialogActions} class="mdc-dialog__actions" /> |
|||
@ -0,0 +1,11 @@ |
|||
<script> |
|||
let dialogContent |
|||
export let _bb |
|||
|
|||
$: dialogContent && _bb.attachChildren(dialogContent) |
|||
</script> |
|||
|
|||
<div |
|||
class="mdc-dialog__content" |
|||
bind:this={dialogContent} |
|||
id="my-dialog-content" /> |
|||
@ -0,0 +1,5 @@ |
|||
<script> |
|||
export let title = "" |
|||
</script> |
|||
|
|||
<h2 class="mdc-dialog__title" id="my-dialog-title">{title}</h2> |
|||
@ -0,0 +1 @@ |
|||
@import "@material/dialog/mdc-dialog.scss" |
|||
@ -0,0 +1,5 @@ |
|||
import "./_style.scss" |
|||
export { default as Dialog } from "./Dialog.svelte" |
|||
export { default as DialogActions } from "./DialogActions.svelte" |
|||
export { default as DialogContent } from "./DialogContent.svelte" |
|||
export { default as DialogHeader } from "./DialogHeader.svelte" |
|||
@ -0,0 +1,119 @@ |
|||
<script> |
|||
import { MDCSlider } from "@material/slider" |
|||
import { onMount } from "svelte" |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
|
|||
const cb = new ClassBuilder("slider", ["continuous"]) |
|||
|
|||
let slider |
|||
let instance |
|||
|
|||
export let variant = "continuous" //or discrete |
|||
export let showTicks = false |
|||
export let min = 0 |
|||
export let max = 100 |
|||
export let value = 1 |
|||
export let step = 1 |
|||
export let label = "" |
|||
export let disabled = false |
|||
|
|||
onMount(() => { |
|||
let s = MDCSlider.attachTo(slider) |
|||
return () => instance.destroy() |
|||
}) |
|||
|
|||
$: { |
|||
if (instance) { |
|||
instance.value = value |
|||
} |
|||
} |
|||
|
|||
$: instance && console.log("instance dot value: ", instance.value) |
|||
|
|||
$: isDiscrete = variant === "discrete" |
|||
$: displayMarkers = isDiscrete && showTicks |
|||
|
|||
$: modifiers = { variant, displayMarkers } |
|||
$: props = { modifiers } |
|||
$: sliderCls = cb.build({ props }) |
|||
|
|||
$: console.log("VALUE", value) |
|||
</script> |
|||
|
|||
<div |
|||
bind:this={slider} |
|||
class="mdc-slider mdc-slider--discrete" |
|||
tabindex="0" |
|||
role="slider" |
|||
aria-valuemin="0" |
|||
aria-valuemax="100" |
|||
aria-valuenow="0" |
|||
aria-label="Select Value" |
|||
on:MDCSlider:change={e => console.log('SLIDER VAL', e.detail.value)}> |
|||
<div class="mdc-slider__track-container"> |
|||
<div class="mdc-slider__track" /> |
|||
</div> |
|||
<div class="mdc-slider__thumb-container"> |
|||
<div class="mdc-slider__pin"> |
|||
<span class="mdc-slider__pin-value-marker" /> |
|||
</div> |
|||
<svg class="mdc-slider__thumb" width="21" height="21"> |
|||
<circle cx="10.5" cy="10.5" r="7.875" /> |
|||
</svg> |
|||
<div class="mdc-slider__focus-ring" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- |
|||
<div |
|||
bind:this={slider} |
|||
class={sliderCls} |
|||
tabindex="0" |
|||
role="slider" |
|||
aria-valuemin={min} |
|||
aria-valuemax={max} |
|||
aria-valuenow={value} |
|||
data-step={step} |
|||
aria-label={label} |
|||
on:MDCSlider:input={e => console.log('INPUT', e.detail.value)} |
|||
on:MDCSlider:change={e => console.log('CHANGE', e.detail.value)} |
|||
aria-disabled={disabled}> |
|||
<div class="mdc-slider__track-container"> |
|||
{#if displayMarkers} |
|||
<div class="mdc-slider__track-container"> |
|||
<div class="mdc-slider__track" /> |
|||
<div class="mdc-slider__track-marker-container" /> |
|||
</div> |
|||
{:else} |
|||
<div class="mdc-slider__track" /> |
|||
{/if} |
|||
</div> |
|||
<div class="mdc-slider__thumb-container"> |
|||
{#if isDiscrete} |
|||
<div class="mdc-slider__pin"> |
|||
<span class="mdc-slider__pin-value-marker" /> |
|||
</div> |
|||
{/if} |
|||
<svg class="mdc-slider__thumb" width="21" height="21"> |
|||
<circle cx="10.5" cy="10.5" r="7.875" /> |
|||
</svg> |
|||
<div class="mdc-slider__focus-ring" /> |
|||
</div> |
|||
</div> --> |
|||
|
|||
<!-- <div class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider" |
|||
aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" |
|||
aria-label="Select Value"> |
|||
<div class="mdc-slider__track-container"> |
|||
<div class="mdc-slider__track"></div> |
|||
</div> |
|||
<div class="mdc-slider__thumb-container"> |
|||
<div class="mdc-slider__pin"> |
|||
<span class="mdc-slider__pin-value-marker"></span> |
|||
</div> |
|||
<svg class="mdc-slider__thumb" width="21" height="21"> |
|||
<circle cx="10.5" cy="10.5" r="7.875"></circle> |
|||
</svg> |
|||
<div class="mdc-slider__focus-ring"></div> |
|||
</div> |
|||
</div> --> |
|||
@ -0,0 +1 @@ |
|||
@import "@material/slider/mdc-slider.scss" |
|||
@ -0,0 +1,2 @@ |
|||
import "./_style.scss" |
|||
export {default as Slider} from "./Slider.svelte" |
|||
@ -0,0 +1,41 @@ |
|||
<script> |
|||
import ClassBuilder from "../ClassBuilder.js" |
|||
import Formfield from "../Common/Formfield.svelte" |
|||
import Label from "../Common/Label.svelte" |
|||
export let onChange = checked => {} |
|||
|
|||
export let _bb |
|||
export let alignEnd = true |
|||
export let disabled = false |
|||
export let checked = false |
|||
export let label = "" |
|||
export let id = "my-switch-component" |
|||
|
|||
const cb = new ClassBuilder("switch") |
|||
|
|||
function handleChange() { |
|||
checked = !checked |
|||
onChange(checked) |
|||
} |
|||
|
|||
$: modifiers = { disabled, checked } |
|||
$: props = { modifiers } |
|||
$: switchCls = cb.build({ props }) |
|||
</script> |
|||
|
|||
<Formfield {_bb} {label} {alignEnd}> |
|||
<div class={switchCls} on:change={handleChange} style="margin: 0px 5px"> |
|||
<div class="mdc-switch__track" /> |
|||
<div class="mdc-switch__thumb-underlay"> |
|||
<div class="mdc-switch__thumb" /> |
|||
<input |
|||
type="checkbox" |
|||
{id} |
|||
class="mdc-switch__native-control" |
|||
role="switch" |
|||
aria-checked={checked} |
|||
{disabled} |
|||
{checked} /> |
|||
</div> |
|||
</div> |
|||
</Formfield> |
|||
@ -0,0 +1 @@ |
|||
@import "@material/switch/mdc-switch.scss"; |
|||
@ -0,0 +1,2 @@ |
|||
import "./_style.scss" |
|||
export { default as Switch } from "./Switch.svelte" |
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 0 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--body1">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--body1"> |
|||
{text} |
|||
</span> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 0 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--body2">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--body2"> |
|||
{text} |
|||
</span> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 0 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--caption">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--caption"> |
|||
{text} |
|||
</span> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h1 class="mdc-typography--headline1">{text}</h1> |
|||
<h1 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline1"> |
|||
{text} |
|||
</h1> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h2 class="mdc-typography--headline2">{text}</h2> |
|||
<h2 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline2"> |
|||
{text} |
|||
</h2> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h3 class="mdc-typography--headline3">{text}</h3> |
|||
<h3 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline3"> |
|||
{text} |
|||
</h3> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h4 class="mdc-typography--headline4">{text}</h4> |
|||
<h4 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline4"> |
|||
{text} |
|||
</h4> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h5 class="mdc-typography--headline5">{text}</h5> |
|||
<h5 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline5"> |
|||
{text} |
|||
</h5> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<h6 class="mdc-typography--headline6">{text}</h6> |
|||
<h6 |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--headline6"> |
|||
{text} |
|||
</h6> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 0 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--overline">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--overline"> |
|||
{text} |
|||
</span> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 0 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--subtitle1">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--subtitle1"> |
|||
{text} |
|||
</span> |
|||
|
|||
@ -1,5 +1,11 @@ |
|||
<script> |
|||
export let text = "" |
|||
export let verticalMargin = 5 |
|||
export let horizontalMargin = 0 |
|||
</script> |
|||
|
|||
<span class="mdc-typography--subtitle2">{text}</span> |
|||
<span |
|||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|||
class="mdc-typography--subtitle2"> |
|||
{text} |
|||
</span> |
|||
|
|||
Loading…
Reference in new issue