Merge branch 'master' of github.com:Budibase/budibase into couchdb-api
This commit is contained in:
commit
ff73cfba48
|
@ -22,6 +22,7 @@
|
|||
value={prop_value}
|
||||
type={prop_definition.type}
|
||||
options={prop_definition.options}
|
||||
styleBindingProperty={prop_definition.styleBindingProperty}
|
||||
onChanged={v => setProp(prop_name, v)} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -8,6 +8,9 @@
|
|||
export let onChanged = () => {}
|
||||
export let type = ""
|
||||
export let options = []
|
||||
export let styleBindingProperty = ""
|
||||
|
||||
$: bindOptionToStyle = !!styleBindingProperty
|
||||
</script>
|
||||
|
||||
<div class="unbound-container">
|
||||
|
@ -24,7 +27,13 @@
|
|||
{value}
|
||||
on:change={ev => onChanged(ev.target.value)}>
|
||||
{#each options || [] as option}
|
||||
<option value={option}>{option}</option>
|
||||
{#if bindOptionToStyle}
|
||||
<option style={`${styleBindingProperty}: ${option};`} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
{:else}
|
||||
<option value={option}>{option}</option>
|
||||
{/if}
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
|
|
|
@ -4,4 +4,4 @@ export { default as BasicCard } from "./BasicCard.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"
|
||||
export { default as CardImage } from "./CardImage.svelte"
|
|
@ -36,7 +36,22 @@
|
|||
"padding": "string",
|
||||
"hoverColor": "string",
|
||||
"hoverBackground": "string",
|
||||
"hoverBorder": "string"
|
||||
"hoverBorder": "string",
|
||||
"fontFamily": {
|
||||
"type": "options",
|
||||
"default": "initial",
|
||||
"styleBindingProperty": "font-family",
|
||||
"options": [
|
||||
"initial",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Arial",
|
||||
"Arial Black",
|
||||
"Comic Sans MS",
|
||||
"Impact",
|
||||
"Lucida Sans Unicode"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
|
@ -152,7 +167,21 @@
|
|||
"children": false,
|
||||
"props": {
|
||||
"text": "string",
|
||||
"font": "string",
|
||||
"fontFamily": {
|
||||
"type": "options",
|
||||
"default": "initial",
|
||||
"styleBindingProperty": "font-family",
|
||||
"options": [
|
||||
"initial",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Arial",
|
||||
"Arial Black",
|
||||
"Comic Sans MS",
|
||||
"Impact",
|
||||
"Lucida Sans Unicode"
|
||||
]
|
||||
},
|
||||
"fontSize": "string",
|
||||
"color": "string",
|
||||
"textAlign": {
|
||||
|
@ -241,7 +270,22 @@
|
|||
"color": "string",
|
||||
"hoverColor": "string",
|
||||
"underline": "bool",
|
||||
"fontSize": "string"
|
||||
"fontSize": "string",
|
||||
"fontFamily": {
|
||||
"type": "options",
|
||||
"default": "initial",
|
||||
"styleBindingProperty": "font-family",
|
||||
"options": [
|
||||
"initial",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Arial",
|
||||
"Arial Black",
|
||||
"Comic Sans MS",
|
||||
"Impact",
|
||||
"Lucida Sans Unicode"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"image": {
|
||||
|
@ -312,7 +356,7 @@
|
|||
"props": {
|
||||
"className": "string",
|
||||
"text": "string",
|
||||
"type": {
|
||||
"type": {
|
||||
"type": "options",
|
||||
"default": "h1",
|
||||
"options": [
|
||||
|
@ -323,6 +367,21 @@
|
|||
"h5",
|
||||
"h6"
|
||||
]
|
||||
},
|
||||
"fontFamily": {
|
||||
"type": "options",
|
||||
"default": "initial",
|
||||
"styleBindingProperty": "font-family",
|
||||
"options": [
|
||||
"initial",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Arial",
|
||||
"Arial Black",
|
||||
"Comic Sans MS",
|
||||
"Impact",
|
||||
"Lucida Sans Unicode"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tags": []
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
export let hoverColor
|
||||
export let hoverBackground
|
||||
export let hoverBorder
|
||||
export let fontFamily
|
||||
|
||||
export let _bb
|
||||
let theButton
|
||||
|
@ -39,6 +40,7 @@
|
|||
|
||||
buttonStyles = buildStyle({
|
||||
padding,
|
||||
"font-family": fontFamily,
|
||||
})
|
||||
|
||||
customClasses = createClasses({
|
||||
|
|
|
@ -1,23 +1,27 @@
|
|||
<script>
|
||||
import { buildStyle } from "./buildStyle.js"
|
||||
export let className = ""
|
||||
export let type
|
||||
export let _bb
|
||||
export let text = ""
|
||||
export let fontFamily = ""
|
||||
|
||||
let containerElement
|
||||
|
||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||
$: style = buildStyle({ "font-family": fontFamily })
|
||||
</script>
|
||||
|
||||
{#if type === 'h1'}
|
||||
<h1 class={className} bind:this={containerElement}>{text}</h1>
|
||||
<h1 class={className} {style} bind:this={containerElement}>{text}</h1>
|
||||
{:else if type === 'h2'}
|
||||
<h2 class={className} bind:this={containerElement}>{text}</h2>
|
||||
<h2 class={className} {style} bind:this={containerElement}>{text}</h2>
|
||||
{:else if type === 'h3'}
|
||||
<h3 class={className} bind:this={containerElement}>{text}</h3>
|
||||
<h3 class={className} {style} bind:this={containerElement}>{text}</h3>
|
||||
{:else if type === 'h4'}
|
||||
<h4 class={className} bind:this={containerElement}>{text}</h4>
|
||||
<h4 class={className} {style} bind:this={containerElement}>{text}</h4>
|
||||
{:else if type === 'h5'}
|
||||
<h5 class={className} bind:this={containerElement}>{text}</h5>
|
||||
<h5 class={className} {style} bind:this={containerElement}>{text}</h5>
|
||||
{:else if type === 'h6'}
|
||||
<h6 class={className} bind:this={containerElement}>{text}</h6>
|
||||
<h6 class={className} {style} bind:this={containerElement}>{text}</h6>
|
||||
{/if}
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
export let color
|
||||
export let hoverColor
|
||||
export let underline = false
|
||||
export let fontFamily
|
||||
export let fontSize
|
||||
|
||||
export let _bb
|
||||
|
@ -20,6 +21,7 @@
|
|||
color,
|
||||
textDecoration: underline ? "underline" : "none",
|
||||
fontSize,
|
||||
fontFamily,
|
||||
}
|
||||
$: classes = createClasses(cssVariables)
|
||||
</script>
|
||||
|
@ -49,4 +51,8 @@
|
|||
.fontSize {
|
||||
font-size: var(--fontSize);
|
||||
}
|
||||
|
||||
.fontFamily {
|
||||
font-family: var(--fontFamily);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
export let formattingTag = ""
|
||||
|
||||
export let font = ""
|
||||
export let fontFamily = ""
|
||||
export let fontSize = "1em"
|
||||
export let textAlign = ""
|
||||
export let verticalAlign = ""
|
||||
|
@ -17,11 +17,9 @@
|
|||
const isTag = tag => (formattingTag || "").indexOf(tag) > -1
|
||||
|
||||
$: style = buildStyle({
|
||||
font: `${fontSize} ${font}`,
|
||||
verticalAlign,
|
||||
"font-size": fontSize,
|
||||
"font-family": fontFamily,
|
||||
color,
|
||||
"text-align": textAlign,
|
||||
"vertical-align": verticalAlign,
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in New Issue