This commit is contained in:
Martin McKeaveney 2020-05-04 17:17:03 +01:00
commit 5648eae275
21 changed files with 487 additions and 281 deletions

View File

@ -74,6 +74,7 @@ export const getStore = () => {
store.moveUpComponent = moveUpComponent(store) store.moveUpComponent = moveUpComponent(store)
store.moveDownComponent = moveDownComponent(store) store.moveDownComponent = moveDownComponent(store)
store.copyComponent = copyComponent(store) store.copyComponent = copyComponent(store)
store.getPathToComponent = getPathToComponent(store)
store.addTemplatedComponent = addTemplatedComponent(store) store.addTemplatedComponent = addTemplatedComponent(store)
store.setMetadataProp = setMetadataProp(store) store.setMetadataProp = setMetadataProp(store)
return store return store
@ -553,6 +554,38 @@ const copyComponent = store => component => {
}) })
} }
const getPathToComponent = store => component => {
// Gets all the components to needed to construct a path.
const tempStore = get(store)
let pathComponents = []
let parent = component;
let root = false
while (!root) {
parent = getParent(tempStore.currentPreviewItem.props, parent)
if (!parent) {
root = true
} else {
pathComponents.push(parent)
}
}
// Remove root entry since it's the screen or page layout.
// Reverse array since we need the correct order of the IDs
const reversedComponents = pathComponents.reverse().slice(1)
// Add component
const allComponents = [...reversedComponents, component]
// Map IDs
const IdList = allComponents.map(c => c._id)
// Construct ID Path:
const path = IdList.join('/')
return path
}
const getParent = (rootProps, child) => { const getParent = (rootProps, child) => {
let parent let parent
walkProps(rootProps, (p, breakWalk) => { walkProps(rootProps, (p, breakWalk) => {

View File

@ -0,0 +1,71 @@
<script>
import { onMount, beforeUpdate, afterUpdate } from "svelte"
export let value = null
export let onChanged = () => {}
export let swatches = []
let picker
let cp = null
function getRecentColors() {
let colorStore = localStorage.getItem("bb:recentColors")
if (!!colorStore) {
swatches = JSON.parse(colorStore)
}
}
function setRecentColor(color) {
if (swatches.length >= 15) {
swatches.splice(0, 1)
picker.removeSwatch(0)
}
if (!swatches.includes(color)) {
swatches = [...swatches, color]
picker.addSwatch(color)
localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
}
}
function createPicker() {
picker = Pickr.create({
el: cp,
theme: "nano",
default: value || "#000000",
swatches,
closeWithKey: "Escape",
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
input: true,
save: true,
},
},
})
}
afterUpdate(() => {
picker.setColor(value)
})
onMount(() => {
getRecentColors()
createPicker()
picker.on("save", (colour, instance) => {
let color = colour.toHEXA().toString()
onChanged(color)
setRecentColor(color)
picker.hide()
})
})
</script>
<div bind:this={cp} class="color-picker" />

View File

@ -1,4 +1,5 @@
<script> <script>
import { params, goto } from "@sveltech/routify"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte" import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp" import { last, sortBy, map, trimCharsStart, trimChars, join } from "lodash/fp"
@ -15,15 +16,12 @@
const joinPath = join("/") const joinPath = join("/")
const normalizedName = name => const normalizedName = name =>
pipe( pipe(name, [
name, trimCharsStart("./"),
[ trimCharsStart("~/"),
trimCharsStart("./"), trimCharsStart("../"),
trimCharsStart("~/"), trimChars(" "),
trimCharsStart("../"), ])
trimChars(" "),
]
)
const lastPartOfName = c => { const lastPartOfName = c => {
if (!c) return "" if (!c) return ""
@ -47,6 +45,11 @@
componentToDelete = component componentToDelete = component
confirmDeleteDialog.show() confirmDeleteDialog.show()
} }
const changeScreen = screen => {
store.setCurrentScreen(screen.title)
$goto(`./:page/${screen.title}`)
}
</script> </script>
<div class="root"> <div class="root">
@ -55,7 +58,7 @@
<div <div
class="budibase__nav-item component" class="budibase__nav-item component"
class:selected={$store.currentComponentInfo._id === screen.component.props._id} class:selected={$store.currentComponentInfo._id === screen.component.props._id}
on:click|stopPropagation={() => store.setCurrentScreen(screen.title)}> on:click|stopPropagation={() => changeScreen(screen)}>
<span <span
class="icon" class="icon"
@ -76,7 +79,6 @@
<ComponentsHierarchyChildren <ComponentsHierarchyChildren
components={screen.component.props._children} components={screen.component.props._children}
currentComponent={$store.currentComponentInfo} currentComponent={$store.currentComponentInfo}
onSelect={store.selectComponent}
onDeleteComponent={confirmDeleteComponent} onDeleteComponent={confirmDeleteComponent}
onMoveUpComponent={store.moveUpComponent} onMoveUpComponent={store.moveUpComponent}
onMoveDownComponent={store.moveDownComponent} onMoveDownComponent={store.moveDownComponent}

View File

@ -1,4 +1,6 @@
<script> <script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { last } from "lodash/fp" import { last } from "lodash/fp"
import { pipe } from "components/common/core"; import { pipe } from "components/common/core";
import { import {
@ -28,11 +30,22 @@
return onMoveDownComponent(c) return onMoveDownComponent(c)
} }
} }
const selectComponent = component => {
// Set current component
store.selectComponent(component)
// Get ID path
const path = store.getPathToComponent(component)
// Go to correct URL
$goto(`./:page/:screen/${path}`)
}
</script> </script>
<ul> <ul>
{#each components as component, index (component._id)} {#each components as component, index (component._id)}
<li on:click|stopPropagation={() => onSelect(component)}> <li on:click|stopPropagation={() => selectComponent(component)}>
<div <div
class="budibase__nav-item item" class="budibase__nav-item item"
class:selected={currentComponent === component} class:selected={currentComponent === component}

View File

@ -1,4 +1,5 @@
<script> <script>
import { goto } from "@sveltech/routify"
// import { tick } from "svelte" // import { tick } from "svelte"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte" import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
@ -34,6 +35,11 @@
componentToDelete = component componentToDelete = component
confirmDeleteDialog.show() confirmDeleteDialog.show()
} }
const setCurrentScreenToLayout = () => {
store.setScreenType("page")
$goto("./:page/page-layout")
}
</script> </script>
<div class="pagelayoutSection"> <div class="pagelayoutSection">
@ -41,7 +47,7 @@
<div <div
class="budibase__nav-item root" class="budibase__nav-item root"
class:selected={$store.currentComponentInfo._id === _layout.component.props._id} class:selected={$store.currentComponentInfo._id === _layout.component.props._id}
on:click|stopPropagation={() => store.setScreenType('page')}> on:click|stopPropagation={setCurrentScreenToLayout}>
<span <span
class="icon" class="icon"
class:rotate={$store.currentPreviewItem.name !== _layout.title}> class:rotate={$store.currentPreviewItem.name !== _layout.title}>
@ -57,9 +63,9 @@
{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
<ComponentsHierarchyChildren <ComponentsHierarchyChildren
thisComponent={_layout.component.props}
components={_layout.component.props._children} components={_layout.component.props._children}
currentComponent={$store.currentComponentInfo} currentComponent={$store.currentComponentInfo}
onSelect={store.selectComponent}
onDeleteComponent={confirmDeleteComponent} onDeleteComponent={confirmDeleteComponent}
onMoveUpComponent={store.moveUpComponent} onMoveUpComponent={store.moveUpComponent}
onMoveDownComponent={store.moveDownComponent} onMoveDownComponent={store.moveDownComponent}
@ -75,23 +81,19 @@
onOk={() => store.deleteComponent(componentToDelete)} /> onOk={() => store.deleteComponent(componentToDelete)} />
<style> <style>
.components-nav-page { .components-nav-page {
font-size: 13px; font-size: 13px;
color: #000333; color: #000333;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 20px; padding-left: 20px;
font-weight: 600; font-weight: 600;
opacity: 0.4; opacity: 0.4;
letter-spacing: 1px; letter-spacing: 1px;
} }
.pagelayoutSection {
margin: 20px 0px 20px 0px;
}
.root {
.pagelayoutSection {
margin: 20px 0px 20px 0px;
} }
.title { .title {
margin-left: 10px; margin-left: 10px;

View File

@ -1,4 +1,5 @@
<script> <script>
import { params, goto } from "@sveltech/routify"
import { store } from "builderStore" import { store } from "builderStore"
import getIcon from "components/common/icon" import getIcon from "components/common/icon"
import { CheckIcon } from "components/common/Icons" import { CheckIcon } from "components/common/Icons"
@ -19,7 +20,12 @@
}, },
] ]
store.setCurrentPage("main") store.setCurrentPage($params.page ? $params.page : "main")
const changePage = id => {
store.setCurrentPage(id)
$goto(`./${id}/page-layout`)
}
</script> </script>
<div class="root"> <div class="root">
@ -27,14 +33,14 @@
{#each pages as { title, id }} {#each pages as { title, id }}
<li> <li>
<span class="icon"> <span class="icon">
{#if id === $store.currentPageName} {#if id === $params.page}
<CheckIcon /> <CheckIcon />
{/if} {/if}
</span> </span>
<button <button
class:active={id === $store.currentPageName} class:active={id === $params.page}
on:click={() => store.setCurrentPage(id)}> on:click={() => changePage(id)}>
{title} {title}
</button> </button>
</li> </li>

View File

@ -3,6 +3,7 @@
import Input from "../common/Input.svelte" import Input from "../common/Input.svelte"
import PropertyCascader from "./PropertyCascader" import PropertyCascader from "./PropertyCascader"
import { isBinding, getBinding, setBinding } from "../common/binding" import { isBinding, getBinding, setBinding } from "../common/binding"
import Colorpicker from "../common/Colorpicker.svelte"
export let value = "" export let value = ""
export let onChanged = () => {} export let onChanged = () => {}
@ -36,6 +37,8 @@
{/if} {/if}
{/each} {/each}
</select> </select>
{:else if type === 'colour'}
<Colorpicker {onChanged} {value} />
{:else} {:else}
<PropertyCascader {onChanged} {value} /> <PropertyCascader {onChanged} {value} />
{/if} {/if}

View File

@ -1,233 +0,0 @@
<script>
import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
import PageLayout from "./PageLayout.svelte"
import PagesList from "./PagesList.svelte"
import { store } from "builderStore"
import IconButton from "components/common/IconButton.svelte"
import NewScreen from "./NewScreen.svelte"
import AppPreview from "./AppPreview"
import PageView from "./PageView.svelte"
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp"
import { AddIcon } from "components/common/Icons"
let newScreenPicker
let confirmDeleteDialog
let componentToDelete = ""
const newScreen = () => {
newScreenPicker.show()
}
const confirmDeleteComponent = component => {
componentToDelete = component
confirmDeleteDialog.show()
}
const lastPartOfName = c => (c ? last(c.split("/")) : "")
</script>
<div class="root">
<div class="ui-nav">
<div class="pages-list-container">
<div class="nav-header">
<span class="navigator-title">Navigator</span>
<div class="border-line" />
<span class="components-nav-page">Pages</span>
</div>
<div class="nav-items-container">
<PagesList />
</div>
</div>
<div class="border-line" />
<PageLayout layout={$store.pages[$store.currentPageName]} />
<div class="border-line" />
<div class="components-list-container">
<div class="nav-group-header">
<span class="components-nav-header" style="margin-top: 0;">
Screens
</span>
<div>
<button on:click={newScreen}>
<AddIcon />
</button>
</div>
</div>
<div class="nav-items-container">
<ComponentsHierarchy screens={$store.screens} />
</div>
</div>
</div>
<div class="preview-pane">
<AppPreview />
</div>
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
<div class="components-pane">
<ComponentsPaneSwitcher />
</div>
{/if}
</div>
<NewScreen bind:this={newScreenPicker} />
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Delete"
body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
okText="Delete Component"
onOk={() => store.deleteComponent(componentToDelete)} />
<style>
button {
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
width: 20px;
padding-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.root {
display: grid;
grid-template-columns: 275px 1fr 275px;
height: 100%;
width: 100%;
background: #fafafa;
}
@media only screen and (min-width: 1800px) {
.root {
display: grid;
grid-template-columns: 300px 1fr 300px;
height: 100%;
width: 100%;
background: #fafafa;
}
}
.ui-nav {
grid-column: 1;
background-color: var(--white);
height: calc(100vh - 49px);
padding: 0;
overflow: scroll;
display: flex;
flex-direction: column;
}
.preview-pane {
grid-column: 2;
margin: 40px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
}
.components-pane {
grid-column: 3;
background-color: var(--white);
min-height: 0px;
overflow-y: scroll;
}
.components-nav-page {
font-size: 13px;
color: #000333;
text-transform: uppercase;
padding-left: 20px;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.components-nav-header {
font-size: 13px;
color: #000333;
text-transform: uppercase;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.nav-header {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.nav-items-container {
padding: 1rem 0rem 0rem 0rem;
}
.nav-group-header {
display: flex;
padding: 0px 20px 0px 20px;
font-size: 0.9rem;
font-weight: bold;
justify-content: space-between;
align-items: center;
}
.nav-group-header > div:nth-child(1) {
padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom;
grid-column-start: icon;
margin-right: 5px;
}
.nav-group-header > span:nth-child(3) {
margin-left: 5px;
vertical-align: bottom;
grid-column-start: title;
margin-top: auto;
}
.nav-group-header > div:nth-child(3) {
vertical-align: bottom;
grid-column-start: button;
cursor: pointer;
color: var(--primary75);
}
.nav-group-header > div:nth-child(3):hover {
color: var(--primary75);
}
.navigator-title {
font-size: 14px;
color: var(--secondary100);
font-weight: 600;
text-transform: uppercase;
padding: 0 20px 20px 20px;
line-height: 1rem !important;
letter-spacing: 1px;
}
.border-line {
border-bottom: 1px solid #d8d8d8;
}
.components-list-container {
padding: 20px 0px 0 0;
}
</style>

View File

@ -96,4 +96,4 @@ export const TYPE_MAP = {
event: { event: {
default: [], default: [],
} }
}; };

View File

@ -15,6 +15,8 @@
<link rel='stylesheet' href='/_builder/bundle.css'> <link rel='stylesheet' href='/_builder/bundle.css'>
<link rel='stylesheet' href='/_builder/fonts.css'> <link rel='stylesheet' href='/_builder/fonts.css'>
<link rel='stylesheet' href="/_builder/uikit.min.css"> <link rel='stylesheet' href="/_builder/uikit.min.css">
<link rel='stylesheet' href="/_builder/nano.min.css">
<script src='/_builder/pickr.min.js'></script>
</head> </head>
<body id="app"> <body id="app">

View File

@ -0,0 +1,51 @@
<script>
import { onMount } from "svelte"
import { params, leftover } from "@sveltech/routify"
import { store } from "builderStore"
// Get any leftover params not caught by Routifys params store.
const componentIds = $leftover.split("/").filter(id => id !== "")
// It's a screen, set it to that screen
if ($params.screen !== "page-layout") {
store.setCurrentScreen($params.screen)
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
// Get the correct screen children.
const screenChildren = $store.pages[$params.page]._screens.find(
screen => screen.name === $params.screen
).props._children
findComponent(componentIds, screenChildren)
}
} else {
// It's a page, so set the screentype to page.
store.setScreenType("page")
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
findComponent(componentIds, $store.pages[$params.page].props._children)
}
}
// Find Component with ID and continue
function findComponent(ids, children) {
// Setup stuff
let componentToSelect
let currentChildren = children
// Loop through each ID
ids.forEach(id => {
// Find ID and select it
componentToSelect = currentChildren.find(child => child._id === id)
// Update childrens array to selected components children
currentChildren = componentToSelect._children
})
// Select Component!
store.selectComponent(componentToSelect)
}
</script>
<slot />

View File

@ -0,0 +1,8 @@
<script>
import { params } from "@sveltech/routify"
import { store } from "builderStore"
store.setCurrentPage($params.page)
</script>
<slot />

View File

@ -2,6 +2,19 @@
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { onMount } from "svelte" import { onMount } from "svelte"
import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte"
import IconButton from "components/common/IconButton.svelte"
import NewScreen from "components/userInterface/NewScreen.svelte"
import CurrentItemPreview from "components/userInterface/CurrentItemPreview.svelte"
import SettingsView from "components/userInterface/SettingsView.svelte"
import PageView from "components/userInterface/PageView.svelte"
import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp"
import { AddIcon } from "components/common/Icons"
$: instances = $store.appInstances $: instances = $store.appInstances
$: views = $store.hierarchy.indexes $: views = $store.hierarchy.indexes
@ -15,6 +28,230 @@
await selectDatabase($store.appInstances[0]) await selectDatabase($store.appInstances[0])
} }
}) })
let newScreenPicker
let confirmDeleteDialog
let componentToDelete = ""
const newScreen = () => {
newScreenPicker.show()
}
let settingsView
const settings = () => {
settingsView.show()
}
const confirmDeleteComponent = component => {
componentToDelete = component
confirmDeleteDialog.show()
}
const lastPartOfName = c => (c ? last(c.split("/")) : "")
</script> </script>
<div class="root">
<div class="ui-nav">
<div class="pages-list-container">
<div class="nav-header">
<span class="navigator-title">Navigator</span>
<div class="border-line" />
<span class="components-nav-page">Pages</span>
</div>
<div class="nav-items-container">
<PagesList />
</div>
</div>
<div class="border-line" />
<PageLayout layout={$store.pages[$store.currentPageName]} />
<div class="border-line" />
<div class="components-list-container">
<div class="nav-group-header">
<span class="components-nav-header" style="margin-top: 0;">
Screens
</span>
<div>
<button on:click={newScreen}>
<AddIcon />
</button>
</div>
</div>
<div class="nav-items-container">
<ComponentsHierarchy screens={$store.screens} />
</div>
</div>
</div>
<div class="preview-pane">
<CurrentItemPreview />
</div>
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
<div class="components-pane">
<ComponentsPaneSwitcher />
</div>
{/if}
</div>
<NewScreen bind:this={newScreenPicker} />
<SettingsView bind:this={settingsView} />
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Delete"
body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
okText="Delete Component"
onOk={() => store.deleteComponent(componentToDelete)} />
<slot /> <slot />
<style>
button {
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;
width: 20px;
padding-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.root {
display: grid;
grid-template-columns: 275px 1fr 275px;
height: 100%;
width: 100%;
background: #fafafa;
}
@media only screen and (min-width: 1800px) {
.root {
display: grid;
grid-template-columns: 300px 1fr 300px;
height: 100%;
width: 100%;
background: #fafafa;
}
}
.ui-nav {
grid-column: 1;
background-color: var(--white);
height: calc(100vh - 49px);
padding: 0;
overflow: scroll;
display: flex;
flex-direction: column;
}
.preview-pane {
grid-column: 2;
margin: 40px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
}
.components-pane {
grid-column: 3;
background-color: var(--white);
min-height: 0px;
overflow-y: scroll;
}
.components-nav-page {
font-size: 13px;
color: #000333;
text-transform: uppercase;
padding-left: 20px;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.components-nav-header {
font-size: 13px;
color: #000333;
text-transform: uppercase;
margin-top: 20px;
font-weight: 600;
opacity: 0.4;
letter-spacing: 1px;
}
.nav-header {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.nav-items-container {
padding: 1rem 0rem 0rem 0rem;
}
.nav-group-header {
display: flex;
padding: 0px 20px 0px 20px;
font-size: 0.9rem;
font-weight: bold;
justify-content: space-between;
align-items: center;
}
.nav-group-header > div:nth-child(1) {
padding: 0rem 0.5rem 0rem 0rem;
vertical-align: bottom;
grid-column-start: icon;
margin-right: 5px;
}
.nav-group-header > span:nth-child(3) {
margin-left: 5px;
vertical-align: bottom;
grid-column-start: title;
margin-top: auto;
}
.nav-group-header > div:nth-child(3) {
vertical-align: bottom;
grid-column-start: button;
cursor: pointer;
color: var(--primary75);
}
.nav-group-header > div:nth-child(3):hover {
color: var(--primary75);
}
.navigator-title {
font-size: 14px;
color: var(--secondary100);
font-weight: 600;
text-transform: uppercase;
padding: 0 20px 20px 20px;
line-height: 1rem !important;
letter-spacing: 1px;
}
.border-line {
border-bottom: 1px solid #d8d8d8;
}
.components-list-container {
padding: 20px 0px 0 0;
}
</style>

View File

@ -1,5 +1,6 @@
<script> <script>
import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte" import { goto } from "@sveltech/routify"
$goto("../main")
</script> </script>
<UserInterfaceRoot /> <!-- routify:options index=false -->

View File

@ -3,5 +3,7 @@ myapps/
.env .env
/builder/* /builder/*
!/builder/assets/ !/builder/assets/
!/builder/pickr.min.js
!/builder/nano.min.css
public/ public/
db/dev.db/ db/dev.db/

1
packages/server/builder/nano.min.css vendored Normal file

File diff suppressed because one or more lines are too long

3
packages/server/builder/pickr.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -12,10 +12,10 @@
"props": { "props": {
"logoUrl": "string", "logoUrl": "string",
"title": "string", "title": "string",
"backgroundColor": "string", "backgroundColor": "colour",
"color": "string", "color": "colour",
"borderWidth": "string", "borderWidth": "string",
"borderColor": "string", "borderColor": "colour",
"borderStyle": "string" "borderStyle": "string"
} }
}, },
@ -30,8 +30,8 @@
"className": "string", "className": "string",
"disabled": "bool", "disabled": "bool",
"onClick": "event", "onClick": "event",
"background": "string", "background": "colour",
"color": "string", "color": "colour",
"border": "string", "border": "string",
"padding": "string", "padding": "string",
"hoverColor": "string", "hoverColor": "string",
@ -167,6 +167,7 @@
"children": false, "children": false,
"props": { "props": {
"text": "string", "text": "string",
"color": "colour",
"fontFamily": { "fontFamily": {
"type": "options", "type": "options",
"default": "initial", "default": "initial",
@ -182,8 +183,7 @@
"Lucida Sans Unicode" "Lucida Sans Unicode"
] ]
}, },
"fontSize": "string", "fontSize": "string",
"color": "string",
"textAlign": { "textAlign": {
"type": "options", "type": "options",
"default": "inline", "default": "inline",
@ -258,7 +258,8 @@
"description": "A HTML icon tag", "description": "A HTML icon tag",
"props": { "props": {
"icon": "string", "icon": "string",
"fontSize": "string" "fontSize": "string",
"color": "colour"
} }
}, },
"link": { "link": {
@ -267,8 +268,8 @@
"url": "string", "url": "string",
"openInNewTab": "bool", "openInNewTab": "bool",
"text": "string", "text": "string",
"color": "string", "color": "colour",
"hoverColor": "string", "hoverColor": "colour",
"underline": "bool", "underline": "bool",
"fontSize": "string", "fontSize": "string",
"fontFamily": { "fontFamily": {
@ -355,6 +356,7 @@
"description": "An HTML H1 - H6 tag", "description": "An HTML H1 - H6 tag",
"props": { "props": {
"className": "string", "className": "string",
"color":"colour",
"text": "string", "text": "string",
"type": { "type": {
"type": "options", "type": "options",

View File

@ -5,11 +5,13 @@
export let _bb export let _bb
export let text = "" export let text = ""
export let fontFamily = "" export let fontFamily = ""
export let color = ""
let containerElement let containerElement
$: containerElement && !text && _bb.attachChildren(containerElement) $: containerElement && !text && _bb.attachChildren(containerElement)
$: style = buildStyle({ "font-family": fontFamily }) $: style = buildStyle({ "font-family": fontFamily, color })
// $: console.log("HEADING", color)
</script> </script>
{#if type === 'h1'} {#if type === 'h1'}