merge conflicts
This commit is contained in:
Martin McKeaveney
commit
ff73793b4c
|
|
@ -66,21 +66,24 @@
|
|||
}
|
||||
|
||||
.switcher > button {
|
||||
text-rendering: optimizeLegibility;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary60);
|
||||
background: rgba(0,0,0,0);
|
||||
font-weight: 500;
|
||||
color: var(--secondary40);
|
||||
margin-right: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.switcher > .selected {
|
||||
color: var(--secondary100);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
|
|||
|
|
@ -54,9 +54,7 @@
|
|||
const newValue = n => Array(n).fill("")
|
||||
</script>
|
||||
|
||||
<h3>Styles</h3>
|
||||
|
||||
<h4>Display</h4>
|
||||
<h3>Layout</h3>
|
||||
<div class="layout-pos">
|
||||
{#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
|
||||
<div class="grid">
|
||||
|
|
@ -87,7 +85,7 @@
|
|||
{/each}
|
||||
</div> -->
|
||||
|
||||
<h4>Spacing</h4>
|
||||
<h3>Spacing</h3>
|
||||
<div class="layout-spacing">
|
||||
{#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
|
||||
<div class="grid">
|
||||
|
|
@ -102,7 +100,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
|
||||
<h4>Size</h4>
|
||||
<h3>Size</h3>
|
||||
<div class="layout-layer">
|
||||
{#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
|
||||
<div class="grid">
|
||||
|
|
@ -117,7 +115,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
|
||||
<h4>Z-Index</h4>
|
||||
<h3>Order</h3>
|
||||
<div class="layout-layer">
|
||||
{#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
|
||||
<div class="grid">
|
||||
|
|
@ -144,10 +142,11 @@
|
|||
h4 {
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
color: #000333;
|
||||
opacity: 0.4;
|
||||
margin-bottom: 15px;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
|
@ -168,6 +167,6 @@
|
|||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 70px 1fr;
|
||||
grid-template-columns: 70px 2fr;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -160,8 +160,9 @@
|
|||
text-transform: uppercase;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.components-nav-header {
|
||||
|
|
@ -169,8 +170,9 @@
|
|||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
|
|
@ -220,10 +222,11 @@
|
|||
.navigator-title {
|
||||
font-size: 14px;
|
||||
color: var(--secondary100);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
padding: 0 20px 20px 20px;
|
||||
line-height: 1rem !important;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.border-line {
|
||||
|
|
|
|||
|
|
@ -111,6 +111,52 @@
|
|||
},
|
||||
"tags": []
|
||||
},
|
||||
"Card": {
|
||||
"name": "Card",
|
||||
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
|
||||
"props": {
|
||||
"width": "string",
|
||||
"height": "string",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["standard", "outlined"],
|
||||
"default": "standard"
|
||||
}
|
||||
}
|
||||
},
|
||||
"CardBody": {
|
||||
"name": "CardBody",
|
||||
"description": "A Material CardBody component. Contains the main content of a Material Card component",
|
||||
"props": {
|
||||
"onClick": "event"
|
||||
}
|
||||
},
|
||||
"CardImage": {
|
||||
"name": "CardImage",
|
||||
"description": "An image component for the Material Card component",
|
||||
"props": {
|
||||
"displayHorizontal": "bool",
|
||||
"url": "string",
|
||||
"title": "string",
|
||||
"subtitle": "string"
|
||||
}
|
||||
},
|
||||
"CardHeader": {
|
||||
"name": "CardHeader",
|
||||
"description": "Displays a icon, title and subtitle above main body of the Material Card component",
|
||||
"props": {
|
||||
"title": "string",
|
||||
"subtitle": "string",
|
||||
"icon": "string"
|
||||
}
|
||||
},
|
||||
"CardFooter": {
|
||||
"name": "CardFooter",
|
||||
"description": "Displays buttons / icon buttons as actions for the Material Card component",
|
||||
"props": {
|
||||
"padding": "string"
|
||||
}
|
||||
},
|
||||
"Checkbox": {
|
||||
"name": "Checkbox",
|
||||
"description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
|
||||
|
|
@ -357,6 +403,37 @@
|
|||
"persistent": "bool"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Switch": {
|
||||
"name": "Switch",
|
||||
"description": "A material design switch component",
|
||||
"props": {
|
||||
"alignEnd": "bool",
|
||||
"disabled": "bool",
|
||||
"checked": "bool",
|
||||
"label": "string",
|
||||
"id": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Slider": {
|
||||
"name": "Slider",
|
||||
"description": "A material design slider component",
|
||||
"props": {
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["continuous", "discrete"],
|
||||
"default": "continuous"
|
||||
},
|
||||
"showTicks": "bool",
|
||||
"min": "number",
|
||||
"max": "number",
|
||||
"value": "number",
|
||||
"step": "number",
|
||||
"label": "string",
|
||||
"disabled": "bool"
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,12 +17,15 @@
|
|||
"@material/button": "^4.0.0",
|
||||
"@material/checkbox": "^4.0.0",
|
||||
"@material/data-table": "4.0.0",
|
||||
"@material/dialog": "4.0.0",
|
||||
"@material/form-field": "^4.0.0",
|
||||
"@material/icon-button": "4.0.0",
|
||||
"@material/list": "4.0.0",
|
||||
"@material/menu": "4.0.0",
|
||||
"@material/radio": "^4.0.0",
|
||||
"@material/select": "4.0.0",
|
||||
"@material/slider": "4.0.0",
|
||||
"@material/switch": "4.0.0",
|
||||
"@material/textfield": "^4.0.0",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
|
|
@ -50,5 +53,7 @@
|
|||
"version": "0.0.27",
|
||||
"license": "MIT",
|
||||
"gitHead": "72a77a035eb7c1443b079bf93c29b3e5fe02094e",
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"@material/card": "4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { setContext, getContext } from "svelte"
|
||||
import { onMount } from "svelte"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
|
@ -22,14 +22,20 @@
|
|||
|
||||
export let _bb
|
||||
|
||||
onMount(() => {
|
||||
let ctx = _bb.getContext("BBMD:button:context")
|
||||
extras = [ctx]
|
||||
})
|
||||
|
||||
let extras = ""
|
||||
let modifiers = {}
|
||||
let customs = { size, colour }
|
||||
|
||||
if (!href) modifiers = { variant }
|
||||
|
||||
let props = { modifiers, customs }
|
||||
$: props = { modifiers, customs, extras }
|
||||
|
||||
let blockClasses = cb.build({ props })
|
||||
$: blockClasses = cb.build({ props })
|
||||
const labelClass = cb.elem("label")
|
||||
|
||||
const clicked = () => _bb.call(onClick)
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let icon = ""
|
||||
export let context = ""
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
let navDate = new Date()
|
||||
const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
|
||||
|
||||
export let _bb
|
||||
export let date = new Date()
|
||||
export let label = ""
|
||||
export let onSelect = selectedDate => {}
|
||||
|
|
@ -105,13 +106,13 @@
|
|||
<div class="calendar-container">
|
||||
<div class="month-picker">
|
||||
<div>
|
||||
<IconButton icon="chevron_left" onClick={subtractMonth} />
|
||||
<IconButton icon="chevron_left" {_bb} onClick={subtractMonth} />
|
||||
</div>
|
||||
<div class="centreText">
|
||||
<Body1 text={monthAndYear} />
|
||||
</div>
|
||||
<div>
|
||||
<IconButton icon="chevron_right" onClick={addMonth} />
|
||||
<IconButton icon="chevron_right" {_bb} onClick={addMonth} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="week-days">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
|
|
@ -15,6 +16,14 @@
|
|||
export let onIcon = "" //on state icon for toggle button
|
||||
export let size = "medium"
|
||||
|
||||
onMount(() => {
|
||||
let ctx = !!_bb ? _bb.getContext("BBMD:icon-button:context") : ""
|
||||
//It isn't possible to use context within nested components as they do not have their own _bb instance (has to be passed down from parent component). This allows context to be passed as props
|
||||
if (!context && !!ctx) {
|
||||
context = ctx
|
||||
}
|
||||
})
|
||||
|
||||
function onButtonClick() {
|
||||
open = !open
|
||||
onClick()
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -19,6 +19,10 @@
|
|||
Select,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
Card,
|
||||
Dialog,
|
||||
Switch,
|
||||
Slider,
|
||||
} = props
|
||||
|
||||
let currentComponent
|
||||
|
|
@ -30,7 +34,6 @@
|
|||
props: {
|
||||
_component: "testcomponents/rootComponent",
|
||||
_children: [
|
||||
Button,
|
||||
BodyBoundToStore,
|
||||
Textfield,
|
||||
Select,
|
||||
|
|
@ -38,6 +41,8 @@
|
|||
Radiobuttongroup,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
Switch,
|
||||
Slider,
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -210,11 +210,112 @@ export const props = {
|
|||
_component: "@budibase/materialdesign-components/DatePicker",
|
||||
_children: [],
|
||||
label: "Date of Admission",
|
||||
onSelect: date => console.log("SELECTED DATE", date)
|
||||
onSelect: date => console.log("SELECTED DATE", date),
|
||||
},
|
||||
IconButton: {
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
_children: [],
|
||||
icon: "calendar_today",
|
||||
},
|
||||
Card: {
|
||||
_id: "card",
|
||||
width: "400",
|
||||
_component: "@budibase/materialdesign-components/Card",
|
||||
_children: [
|
||||
{
|
||||
_id: "cardbody",
|
||||
_component: "@budibase/materialdesign-components/CardBody",
|
||||
onClick: () => alert`Hi`,
|
||||
_children: [
|
||||
{
|
||||
_id: "cardimage1",
|
||||
_component: "@budibase/materialdesign-components/CardImage",
|
||||
_children: [],
|
||||
displayHorizontal: true,
|
||||
url: "https://picsum.photos/350",
|
||||
title: "Our New World",
|
||||
subtitle: "Out now in cinemas",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/CardFooter",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Save",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Cancel",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
icon: "3d_rotation",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
icon: "accessibility",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
icon: "alarm_on",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
Dialog: {
|
||||
_component: "@budibase/materialdesign-components/Dialog",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogHeader",
|
||||
title: "Important Message",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogContent",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/H3",
|
||||
text: "An announcement from your service provider",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Body2",
|
||||
text:
|
||||
"All non-essential services will be shut down as of tomorrow. Please acknowledge that you have seen this message by confirming below.",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogActions",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Confirm",
|
||||
variant: "unelevated",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Cancel",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
Switch: {
|
||||
_component: "@budibase/materialdesign-components/Switch",
|
||||
label: "On / Off",
|
||||
checked: true,
|
||||
onChange: () => console.log("Switch Changed"),
|
||||
_children: [],
|
||||
},
|
||||
Slider: {
|
||||
_component: "@budibase/materialdesign-components/Slider",
|
||||
_children: [],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -21,3 +21,7 @@ export { Menu } from "./Menu"
|
|||
export { Select } from "./Select"
|
||||
export { DatePicker } from "./DatePicker"
|
||||
export { IconButton } from "./IconButton"
|
||||
export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
|
||||
export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
|
||||
export { Switch } from "./Switch"
|
||||
export { Slider } from "./Slider"
|
||||
|
|
|
|||
Loading…
Reference in New Issue