Merge branch 'workflow-v1' of github.com:Budibase/budibase into workflow-v1
This commit is contained in:
Michael Shanks
commit
2abda35443
92 changed files with 2687 additions and 1341 deletions
BIN
packages/builder/assets/banner-image.png
Normal file
BIN
packages/builder/assets/banner-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
31
packages/builder/assets/bb-logo.svg
Normal file
31
packages/builder/assets/bb-logo.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M117.33,128H10.67C4.78,128,0,123.22,0,117.33V10.67C0,4.78,4.78,0,10.67,0h106.67
|
||||
C123.22,0,128,4.78,128,10.67v106.67C128,123.22,123.22,128,117.33,128z"/>
|
||||
<g>
|
||||
<path class="st1" d="M75.94,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
|
||||
c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
|
||||
c-1.72,1.87-3.75,3.34-6.08,4.43C92.8,95.46,90.28,96,87.58,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H62.6V32H75.94z M92.74,75.5
|
||||
c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
|
||||
c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
|
||||
s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
|
||||
c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C92.51,77.77,92.74,76.66,92.74,75.5z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M34.67,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
|
||||
c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
|
||||
c-1.72,1.87-3.75,3.34-6.08,4.43C51.53,95.46,49.01,96,46.31,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H21.33V32H34.67z M51.47,75.5
|
||||
c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
|
||||
c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
|
||||
s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
|
||||
c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C51.24,77.77,51.47,76.66,51.47,75.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -82,4 +82,4 @@
|
|||
"svelte": "^3.0.0"
|
||||
},
|
||||
"gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,142 +1,54 @@
|
|||
import { pipe } from "components/common/core"
|
||||
import { filter, map, reduce, toPairs } from "lodash/fp"
|
||||
|
||||
const self = n => n
|
||||
const join_with = delimiter => a => a.join(delimiter)
|
||||
const empty_string_to_unset = s => (s.length ? s : "0")
|
||||
const add_suffix_if_number = suffix => s => {
|
||||
try {
|
||||
if (isNaN(s) || isNaN(parseFloat(s))) return s
|
||||
} catch (_) {
|
||||
return s
|
||||
}
|
||||
return s + suffix
|
||||
}
|
||||
|
||||
export const make_margin = values =>
|
||||
pipe(values, [
|
||||
map(empty_string_to_unset),
|
||||
map(add_suffix_if_number("px")),
|
||||
join_with(" "),
|
||||
])
|
||||
|
||||
const css_map = {
|
||||
templaterows: {
|
||||
name: "grid-template-rows",
|
||||
generate: self,
|
||||
},
|
||||
templatecolumns: {
|
||||
name: "grid-template-columns",
|
||||
generate: self,
|
||||
},
|
||||
align: {
|
||||
name: "align-items",
|
||||
generate: self,
|
||||
},
|
||||
justify: {
|
||||
name: "justify-content",
|
||||
generate: self,
|
||||
},
|
||||
direction: {
|
||||
name: "flex-direction",
|
||||
generate: self,
|
||||
},
|
||||
gridarea: {
|
||||
name: "grid-area",
|
||||
generate: make_margin,
|
||||
},
|
||||
gap: {
|
||||
name: "grid-gap",
|
||||
generate: n => `${n}px`,
|
||||
},
|
||||
columnstart: {
|
||||
name: "grid-column-start",
|
||||
generate: self,
|
||||
},
|
||||
columnend: {
|
||||
name: "grid-column-end",
|
||||
generate: self,
|
||||
},
|
||||
rowstart: {
|
||||
name: "grid-row-start",
|
||||
generate: self,
|
||||
},
|
||||
rowend: {
|
||||
name: "grid-row-end",
|
||||
generate: self,
|
||||
},
|
||||
padding: {
|
||||
name: "padding",
|
||||
generate: make_margin,
|
||||
},
|
||||
margin: {
|
||||
name: "margin",
|
||||
generate: make_margin,
|
||||
},
|
||||
zindex: {
|
||||
name: "z-index",
|
||||
generate: self,
|
||||
},
|
||||
height: {
|
||||
name: "height",
|
||||
generate: self,
|
||||
},
|
||||
width: {
|
||||
name: "width",
|
||||
generate: self,
|
||||
},
|
||||
}
|
||||
|
||||
export const generate_rule = ([name, values]) =>
|
||||
`${css_map[name].name}: ${css_map[name].generate(values)};`
|
||||
|
||||
const handle_grid = (acc, [name, value]) => {
|
||||
let tmp = []
|
||||
|
||||
if (name === "row" || name === "column") {
|
||||
if (value[0]) tmp.push([`${name}start`, value[0]])
|
||||
if (value[1]) tmp.push([`${name}end`, value[1]])
|
||||
return acc.concat(tmp)
|
||||
}
|
||||
|
||||
return acc.concat([[name, value]])
|
||||
}
|
||||
|
||||
const object_to_css_string = [
|
||||
toPairs,
|
||||
reduce(handle_grid, []),
|
||||
filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)),
|
||||
map(generate_rule),
|
||||
join_with("\n"),
|
||||
]
|
||||
|
||||
export const generate_css = ({ layout, position }) => {
|
||||
let _layout = pipe(layout, object_to_css_string)
|
||||
if (_layout.length) {
|
||||
_layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
|
||||
}
|
||||
|
||||
return {
|
||||
layout: _layout,
|
||||
position: pipe(position, object_to_css_string),
|
||||
}
|
||||
}
|
||||
|
||||
const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
|
||||
|
||||
export const generate_screen_css = component_array => {
|
||||
export const generate_screen_css = component_arr => {
|
||||
let styles = ""
|
||||
let emptyStyles = { layout: {}, position: {} }
|
||||
|
||||
for (let i = 0; i < component_array.length; i += 1) {
|
||||
const { _styles, _id, _children } = component_array[i]
|
||||
const { layout, position } = generate_css(_styles || emptyStyles)
|
||||
|
||||
styles += apply_class(_id, "pos", position) + "\n"
|
||||
styles += apply_class(_id, "lay", layout) + "\n"
|
||||
for (const { _styles, _id, _children, _component } of component_arr) {
|
||||
let [componentName] = _component.match(/[a-z]*$/)
|
||||
Object.keys(_styles).forEach(selector => {
|
||||
const cssString = generate_css(_styles[selector])
|
||||
if (cssString) {
|
||||
styles += apply_class(_id, componentName, cssString, selector)
|
||||
}
|
||||
})
|
||||
if (_children && _children.length) {
|
||||
styles += generate_screen_css(_children) + "\n"
|
||||
}
|
||||
}
|
||||
return styles.trim()
|
||||
}
|
||||
|
||||
export const generate_css = style => {
|
||||
let cssString = Object.entries(style).reduce((str, [key, value]) => {
|
||||
//TODO Handle arrays and objects here also
|
||||
if (typeof value === "string") {
|
||||
if (value) {
|
||||
return (str += `${key}: ${value};\n`)
|
||||
}
|
||||
} else if (Array.isArray(value)) {
|
||||
if (value.length > 0 && !value.every(v => v === "")) {
|
||||
return (str += `${key}: ${value
|
||||
.map(generate_array_styles)
|
||||
.join(" ")};\n`)
|
||||
}
|
||||
}
|
||||
}, "")
|
||||
|
||||
return (cssString || "").trim()
|
||||
}
|
||||
|
||||
export const generate_array_styles = item => {
|
||||
let safeItem = item === "" ? 0 : item
|
||||
let hasPx = new RegExp("px$")
|
||||
if (!hasPx.test(safeItem)) {
|
||||
return `${safeItem}px`
|
||||
} else {
|
||||
return safeItem
|
||||
}
|
||||
}
|
||||
|
||||
export const apply_class = (id, name = "element", styles, selector) => {
|
||||
if (selector === "normal") {
|
||||
return `.${name}-${id} {\n${styles}\n}`
|
||||
} else {
|
||||
let sel = selector === "selected" ? "::selection" : `:${selector}`
|
||||
return `.${name}-${id}${sel} {\n${styles}\n}`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,10 +140,11 @@ const _saveScreen = async (store, s, screen) => {
|
|||
return s
|
||||
}
|
||||
|
||||
const _saveScreenApi = (screen, s) =>
|
||||
const _saveScreenApi = (screen, s) => {
|
||||
api
|
||||
.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
|
||||
.then(() => _savePage(s))
|
||||
}
|
||||
|
||||
const createScreen = store => (screenName, route, layoutComponentName) => {
|
||||
store.update(state => {
|
||||
|
|
@ -278,7 +279,6 @@ const removeStylesheet = store => stylesheet => {
|
|||
|
||||
const _savePage = async s => {
|
||||
const page = s.pages[s.currentPageName]
|
||||
|
||||
await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
|
||||
page: { componentLibraries: s.pages.componentLibraries, ...page },
|
||||
uiFunctions: s.currentPageFunctions,
|
||||
|
|
@ -427,6 +427,7 @@ const setComponentStyle = store => (type, name, value) => {
|
|||
state.currentComponentInfo._styles = {}
|
||||
}
|
||||
state.currentComponentInfo._styles[type][name] = value
|
||||
|
||||
state.currentPreviewItem._css = generate_screen_css([
|
||||
state.currentPreviewItem.props,
|
||||
])
|
||||
|
|
|
|||
|
|
@ -36,9 +36,10 @@ const workflowActions = store => ({
|
|||
select: workflow => {
|
||||
store.update(state => {
|
||||
state.selectedWorkflowId = workflow._id
|
||||
state.selectedWorkflowBlock = null
|
||||
return state;
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export const getWorkflowStore = () => {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,78 @@
|
|||
<script>
|
||||
import { onMount, beforeUpdate, afterUpdate } from "svelte"
|
||||
import { onMount } from "svelte"
|
||||
// import { HsvPicker } from "svelte-color-picker"
|
||||
|
||||
export let value = null
|
||||
export let onChanged = () => {}
|
||||
export let swatches = []
|
||||
// export let initialValue = "#ffffff"
|
||||
export let onChange = color => {}
|
||||
export let open = false
|
||||
let value = "#ffffff"
|
||||
|
||||
let picker
|
||||
let cp = null
|
||||
let _justMounted = true //see onColorChange
|
||||
let pickerHeight = 275
|
||||
let colorPreview
|
||||
let pickerTopPosition = null
|
||||
|
||||
function rbgaToHexa({ r, g, b, a }) {
|
||||
r = r.toString(16)
|
||||
g = g.toString(16)
|
||||
b = b.toString(16)
|
||||
a = Math.round(a * 255).toString(16)
|
||||
|
||||
if (r.length == 1) r = "0" + r
|
||||
if (g.length == 1) g = "0" + g
|
||||
if (b.length == 1) b = "0" + b
|
||||
if (a.length == 1) a = "0" + a
|
||||
|
||||
return "#" + r + g + b + a
|
||||
}
|
||||
|
||||
function onColourChange(rgba) {
|
||||
value = rbgaToHexa(rgba.detail)
|
||||
|
||||
//Hack: so that color change doesn't fire onMount
|
||||
if (!_justMounted) {
|
||||
// onChange(value)
|
||||
}
|
||||
_justMounted = false
|
||||
}
|
||||
|
||||
function toggleColorpicker(isOpen) {
|
||||
if (isOpen) {
|
||||
const {
|
||||
y: previewYPosition,
|
||||
height: previewHeight,
|
||||
} = colorPreview.getBoundingClientRect()
|
||||
|
||||
let wiggleRoom = window.innerHeight - previewYPosition
|
||||
let displayTop = wiggleRoom < pickerHeight
|
||||
|
||||
if (displayTop) {
|
||||
pickerTopPosition = previewYPosition - (pickerHeight - window.scrollY)
|
||||
} else {
|
||||
pickerTopPosition = null
|
||||
}
|
||||
}
|
||||
open = isOpen
|
||||
}
|
||||
|
||||
$: style = open ? "display: block;" : "display: none;"
|
||||
$: pickerStyle = pickerTopPosition ? `top: ${pickerTopPosition}px;` : ""
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={colorPreview}
|
||||
on:click={() => toggleColorpicker(true)}
|
||||
class="color-preview"
|
||||
style={`background: ${value}`} />
|
||||
|
||||
<div class="colorpicker" {style}>
|
||||
<div class="overlay" on:click|self={() => toggleColorpicker(false)} />
|
||||
<div class="cp" style={pickerStyle}>
|
||||
<!-- <HsvPicker on:colorChange={onColourChange} startColor={value} /> -->
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
OLD LOCAL STORAGE OPTIONS. INCLUDING FOR ADDING LATER
|
||||
function getRecentColors() {
|
||||
let colorStore = localStorage.getItem("bb:recentColors")
|
||||
if (!!colorStore) {
|
||||
|
|
@ -25,47 +90,27 @@
|
|||
picker.addSwatch(color)
|
||||
localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
|
||||
}
|
||||
} -->
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* background: rgba(5, 5, 5, 0.25); */
|
||||
}
|
||||
|
||||
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,
|
||||
},
|
||||
},
|
||||
})
|
||||
.cp {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
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" />
|
||||
.color-preview {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
12
packages/builder/src/components/common/Icons/Apps.svelte
Normal file
12
packages/builder/src/components/common/Icons/Apps.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M7 11.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1 0-9 4.5
|
||||
4.5 0 0 1 0 9zm10-10a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 10a4.5 4.5 0 1 1
|
||||
0-9 4.5 4.5 0 0 1 0 9z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
15
packages/builder/src/components/common/Icons/Bug.svelte
Normal file
15
packages/builder/src/components/common/Icons/Bug.svelte
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M5.07 16A7.06 7.06 0 0 1 5
|
||||
15v-1H3v-2h2v-1c0-.34.024-.673.07-1H3V8h2.674a7.03 7.03 0 0 1
|
||||
2.84-3.072l-1.05-1.05L8.88 2.465l1.683 1.684a7.03 7.03 0 0 1 2.876
|
||||
0l1.683-1.684 1.415 1.415-1.05 1.05A7.03 7.03 0 0 1 18.326
|
||||
8H21v2h-2.07c.046.327.07.66.07 1v1h2v2h-2v1c0 .34-.024.673-.07
|
||||
1H21v2h-2.674a7 7 0 0 1-12.652 0H3v-2h2.07zM9 10v2h6v-2H9zm0 4v2h6v-2H9z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 561 B |
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 11a5 5 0 0 1 5 5v6H7v-6a5 5 0 0 1 5-5zm-6.712 3.006a6.983 6.983 0 0
|
||||
0-.28 1.65L5 16v6H2v-4.5a3.5 3.5 0 0 1 3.119-3.48l.17-.014zm13.424 0A3.501
|
||||
3.501 0 0 1 22 17.5V22h-3v-6c0-.693-.1-1.362-.288-1.994zM5.5 8a2.5 2.5 0 1 1
|
||||
0 5 2.5 2.5 0 0 1 0-5zm13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM12 2a4 4 0
|
||||
1 1 0 8 4 4 0 0 1 0-8z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 529 B |
|
|
@ -0,0 +1,14 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M14.121 10.48a1 1 0 0 0-1.414 0l-.707.706a2 2 0 1
|
||||
1-2.828-2.828l5.63-5.632a6.5 6.5 0 0 1 6.377 10.568l-2.108
|
||||
2.135-4.95-4.95zM3.161 4.468a6.503 6.503 0 0 1 8.009-.938L7.757 6.944a4 4 0
|
||||
0 0 5.513 5.794l.144-.137 4.243 4.242-4.243 4.243a2 2 0 0 1-2.828 0L3.16
|
||||
13.66a6.5 6.5 0 0 1 0-9.192z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 493 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1
|
||||
1zM8 7v2h8V7H8zm0 4v2h8v-2H8zm0 4v2h5v-2H8z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 309 B |
12
packages/builder/src/components/common/Icons/Email.svelte
Normal file
12
packages/builder/src/components/common/Icons/Email.svelte
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1
|
||||
1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555
|
||||
7.581-6.56-1.308-1.513-6.285 5.439z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
11
packages/builder/src/components/common/Icons/Hosting.svelte
Normal file
11
packages/builder/src/components/common/Icons/Hosting.svelte
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M7 20.981a6.5 6.5 0 0 1-2.936-12 8.001 8.001 0 0 1 15.872 0 6.5 6.5 0 0
|
||||
1-2.936 12V21H7v-.019zM13 13h3l-4-5-4 5h3v4h2v-4z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 316 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M13 16.938V19h5v2H6v-2h5v-2.062A8.001 8.001 0 0 1 4 9V3h16v6a8.001 8.001
|
||||
0 0 1-7 7.938zM1 5h2v4H1V5zm20 0h2v4h-2V5z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 310 B |
16
packages/builder/src/components/common/Icons/Twitter.svelte
Normal file
16
packages/builder/src/components/common/Icons/Twitter.svelte
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6
|
||||
4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874
|
||||
0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86
|
||||
3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21
|
||||
4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191
|
||||
1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9
|
||||
0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 689 B |
13
packages/builder/src/components/common/Icons/Updates.svelte
Normal file
13
packages/builder/src/components/common/Icons/Updates.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
|
||||
10zm4.82-4.924A7 7 0 0 0 9.032 5.658l.975 1.755A5 5 0 0 1 17 12h-3l2.82
|
||||
5.076zm-1.852 1.266l-.975-1.755A5 5 0 0 1 7 12h3L7.18 6.924a7 7 0 0 0 7.788
|
||||
11.418z"
|
||||
fill="rgba(128,129,146,1)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 428 B |
|
|
@ -19,3 +19,13 @@ export { default as AddIcon } from "./Add.svelte"
|
|||
export { default as JavaScriptIcon } from "./JavaScript.svelte"
|
||||
export { default as PreviewIcon } from "./Preview.svelte"
|
||||
export { default as SettingsIcon } from "./Settings.svelte"
|
||||
export { default as AppsIcon } from "./Apps.svelte"
|
||||
export { default as UpdatesIcon } from "./Updates.svelte"
|
||||
export { default as HostingIcon } from "./Hosting.svelte"
|
||||
export { default as DocumentationIcon } from "./Documentation.svelte"
|
||||
export { default as TutorialsIcon } from "./Tutorials.svelte"
|
||||
export { default as CommunityIcon } from "./Community.svelte"
|
||||
export { default as ContributionIcon } from "./Contribution.svelte"
|
||||
export { default as BugIcon } from "./Bug.svelte"
|
||||
export { default as EmailIcon } from "./Email.svelte"
|
||||
export { default as TwitterIcon } from "./Twitter.svelte"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
<script>
|
||||
export let value = ""
|
||||
export let width = ""
|
||||
|
||||
let style = { width }
|
||||
</script>
|
||||
|
||||
<input type="text" on:change bind:value />
|
||||
<input type="text" style={`width: ${width};`} on:change bind:value />
|
||||
|
||||
<style>
|
||||
input {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 500;
|
||||
color: #163057;
|
||||
color: var(--ink);
|
||||
line-height: 1.3;
|
||||
padding: 1em 2.6em 0.9em 1.4em;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
width: 164px;
|
||||
float: right;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
@ -21,7 +24,7 @@
|
|||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
height: 35px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,43 +2,58 @@
|
|||
import { onMount } from "svelte"
|
||||
|
||||
export let meta = []
|
||||
export let size = ""
|
||||
export let values = []
|
||||
export let label = ""
|
||||
export let value = [0, 0, 0, 0]
|
||||
export let type = "number"
|
||||
export let onStyleChanged = () => {}
|
||||
export let onChange = () => {}
|
||||
|
||||
let _values = values.map(v => v)
|
||||
|
||||
$: onStyleChanged(_values)
|
||||
function handleChange(val, idx) {
|
||||
value.splice(idx, 1, val)
|
||||
value = value
|
||||
onChange(value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="inputs {size}">
|
||||
{#each meta as { placeholder }, i}
|
||||
<input
|
||||
{type}
|
||||
{placeholder}
|
||||
value={values[i]}
|
||||
on:input={e => (_values[i] = e.target.value)} />
|
||||
{/each}
|
||||
<div class="input-container">
|
||||
<div class="label">{label}</div>
|
||||
<div class="inputs">
|
||||
{#each meta as { placeholder }, i}
|
||||
<input
|
||||
{type}
|
||||
placeholder={placeholder || ''}
|
||||
value={!value || value[i] === 0 ? '' : value[i]}
|
||||
on:change={e => handleChange(e.target.value || 0, i)} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.input-container {
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 83px;
|
||||
font-size: 13px;
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
margin: 0px 0px 0px 1px;
|
||||
text-align: center;
|
||||
color: var(--ink);
|
||||
opacity: 0.7;
|
||||
padding: 5px 10px;
|
||||
padding: 0px 4px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #dbdbdb;
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
|
|
@ -49,17 +64,11 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.small > input {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.small > input::placeholder {
|
||||
input::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,12 +81,10 @@
|
|||
|
||||
.hierarchy-title {
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
letter-spacing: 1px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-rendering: optimizeLegibility;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.hierarchy {
|
||||
|
|
|
|||
|
|
@ -125,12 +125,10 @@
|
|||
|
||||
.hierarchy-title {
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
letter-spacing: 1px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-rendering: optimizeLegibility;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.hierarchy {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,32 @@
|
|||
<script>
|
||||
import Button from "components/common/Button.svelte"
|
||||
export let apps
|
||||
|
||||
function myFunction() {
|
||||
var x = new Date(document.lastModified)
|
||||
document.getElementById("demo").innerHTML = x
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="inner">
|
||||
<img
|
||||
src="/_builder/assets/budibase-logo.png"
|
||||
class="logo"
|
||||
alt="budibase logo" />
|
||||
<div>
|
||||
<div>
|
||||
<h4 style="margin-bottom: 20px">Choose an Application</h4>
|
||||
<div class="app-section-title">Your Web Apps</div>
|
||||
{#each apps as app}
|
||||
<a href={`/_builder/${app._id}`} class="app-link">{app.name}</a>
|
||||
<div class="apps-card">
|
||||
<h3 class="app-title">{app.name}</h3>
|
||||
<p class="app-desc">
|
||||
A minimalist CRM which removes the noise and allows you to focus
|
||||
on your business.
|
||||
</p>
|
||||
<div class="card-footer">
|
||||
<div class="modified-date">Last Edited - 25th May 2020</div>
|
||||
<a href={`/_builder/${app._id}`} class="app-button">
|
||||
Open Web App
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,31 +35,68 @@
|
|||
|
||||
<style>
|
||||
.root {
|
||||
position: fixed;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
top: 20%;
|
||||
/*color: #333333;
|
||||
background-color: #fdfdfd;*/
|
||||
width: 100%;
|
||||
margin: 40px 80px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
.app-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 300px;
|
||||
margin-bottom: 40px;
|
||||
.apps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
}
|
||||
.apps-card {
|
||||
background-color: var(--white);
|
||||
padding: 20px;
|
||||
max-width: 400px;
|
||||
max-height: 150px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
}
|
||||
|
||||
.root :global(.option) {
|
||||
width: 250px;
|
||||
.app-button:hover {
|
||||
background-color: var(--grey-light);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-link {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
color: var(--ink-light);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modified-date {
|
||||
font-size: 14px;
|
||||
color: var(--ink-light);
|
||||
}
|
||||
|
||||
.app-button {
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
padding: 12px 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px var(--grey) solid;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,11 @@
|
|||
return props
|
||||
}
|
||||
|
||||
const getComponentTypeName = component => {
|
||||
let [componentName] = component._component.match(/[a-z]*$/)
|
||||
return componentName || "element"
|
||||
}
|
||||
|
||||
$: iframe &&
|
||||
console.log(
|
||||
iframe.contentDocument.head.insertAdjacentHTML(
|
||||
|
|
@ -60,7 +65,7 @@
|
|||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/container",
|
||||
_styles: { position: {}, layout: {} },
|
||||
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
|
||||
_id: "__screenslot__text",
|
||||
_code: "",
|
||||
className: "",
|
||||
|
|
@ -69,7 +74,12 @@
|
|||
_children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/text",
|
||||
_styles: { position: {}, layout: {} },
|
||||
_styles: {
|
||||
normal: {},
|
||||
hover: {},
|
||||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
_id: "__screenslot__text_2",
|
||||
_code: "",
|
||||
text: "content",
|
||||
|
|
@ -88,6 +98,8 @@
|
|||
appRootPath: "",
|
||||
}
|
||||
|
||||
$: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
|
||||
|
||||
$: selectedComponentId = $store.currentComponentInfo
|
||||
? $store.currentComponentInfo._id
|
||||
: ""
|
||||
|
|
@ -102,6 +114,7 @@
|
|||
srcdoc={iframeTemplate({
|
||||
styles,
|
||||
stylesheetLinks,
|
||||
selectedComponentType,
|
||||
selectedComponentId,
|
||||
frontendDefinition: JSON.stringify(frontendDefinition),
|
||||
currentPageFunctions: $store.currentPageFunctions,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default ({
|
||||
styles,
|
||||
stylesheetLinks,
|
||||
selectedComponentType,
|
||||
selectedComponentId,
|
||||
frontendDefinition,
|
||||
currentPageFunctions,
|
||||
|
|
@ -11,7 +12,7 @@ export default ({
|
|||
<style>
|
||||
${styles || ""}
|
||||
|
||||
.pos-${selectedComponentId} {
|
||||
.${selectedComponentType}-${selectedComponentId} {
|
||||
border: 2px solid #0055ff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
export let categories = []
|
||||
export let selectedCategory = {}
|
||||
export let onClick = category => {}
|
||||
</script>
|
||||
|
||||
<div class="tabs">
|
||||
{#each categories as category}
|
||||
<li
|
||||
on:click={() => onClick(category)}
|
||||
class:active={selectedCategory === category}>
|
||||
{category.name}
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tabs {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
li {
|
||||
color: var(--ink-lighter);
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { setContext, onMount } from "svelte"
|
||||
import PropsView from "./PropsView.svelte"
|
||||
import { store } from "builderStore"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
|
|
@ -13,23 +14,63 @@
|
|||
import LayoutEditor from "./LayoutEditor.svelte"
|
||||
import EventsEditor from "./EventsEditor"
|
||||
|
||||
let current_view = "props"
|
||||
let codeEditor
|
||||
import panelStructure from "./temporaryPanelStructure.js"
|
||||
import CategoryTab from "./CategoryTab.svelte"
|
||||
import DesignView from "./DesignView.svelte"
|
||||
import SettingsView from "./SettingsView.svelte"
|
||||
|
||||
let current_view = "design"
|
||||
let codeEditor
|
||||
let flattenedPanel = flattenComponents(panelStructure.categories)
|
||||
let categories = [
|
||||
{ value: "design", name: "Design" },
|
||||
{ value: "settings", name: "Settings" },
|
||||
{ value: "events", name: "Events" }
|
||||
]
|
||||
let selectedCategory = categories[0]
|
||||
|
||||
$: component = $store.currentComponentInfo
|
||||
$: originalName = component.name
|
||||
$: name =
|
||||
$store.currentView === "detail"
|
||||
? $store.currentPreviewItem.name
|
||||
: component._component
|
||||
$: description = component.description
|
||||
$: components = $store.components
|
||||
$: componentInstance = $store.currentComponentInfo
|
||||
$: componentDefinition = $store.components[componentInstance._component]
|
||||
$: componentPropDefinition =
|
||||
flattenedPanel.find(
|
||||
//use for getting controls for each component property
|
||||
c => c._component === componentInstance._component
|
||||
) || {}
|
||||
|
||||
$: panelDefinition = componentPropDefinition.properties
|
||||
? componentPropDefinition.properties[selectedCategory.value]
|
||||
: {}
|
||||
|
||||
// SCREEN PROPS =============================================
|
||||
$: screen_props =
|
||||
$store.currentFrontEndType === "page"
|
||||
? getProps($store.currentPreviewItem, ["name", "favicon"])
|
||||
: getProps($store.currentPreviewItem, ["name", "description", "route"])
|
||||
|
||||
const onStyleChanged = store.setComponentStyle
|
||||
const onPropChanged = store.setComponentProp
|
||||
|
||||
function walkProps(component, action) {
|
||||
action(component)
|
||||
if (component.children) {
|
||||
for (let child of component.children) {
|
||||
walkProps(child, action)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function flattenComponents(props) {
|
||||
const components = []
|
||||
props.forEach(comp =>
|
||||
walkProps(comp, c => {
|
||||
if ("_component" in c) {
|
||||
components.push(c)
|
||||
}
|
||||
})
|
||||
)
|
||||
return components
|
||||
}
|
||||
|
||||
function getProps(obj, keys) {
|
||||
return keys.map((key, i) => [key, obj[key], obj.props._id + i])
|
||||
|
|
@ -37,116 +78,35 @@
|
|||
</script>
|
||||
|
||||
<div class="root">
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class:selected={current_view === 'props'}
|
||||
on:click={() => (current_view = 'props')}>
|
||||
<PaintIcon />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class:selected={current_view === 'layout'}
|
||||
on:click={() => (current_view = 'layout')}>
|
||||
<LayoutIcon />
|
||||
</button>
|
||||
</li>
|
||||
{#if !component._component.startsWith('##')}
|
||||
<li>
|
||||
<button
|
||||
class:selected={current_view === 'code'}
|
||||
on:click={() => codeEditor && codeEditor.show()}>
|
||||
{#if component._code && component._code.trim().length > 0}
|
||||
<div class="button-indicator">
|
||||
<CircleIndicator />
|
||||
</div>
|
||||
{/if}
|
||||
<TerminalIcon />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class:selected={current_view === 'events'}
|
||||
on:click={() => (current_view = 'events')}>
|
||||
<EventsIcon />
|
||||
</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
<CategoryTab
|
||||
onClick={category => (selectedCategory = category)}
|
||||
{categories}
|
||||
{selectedCategory} />
|
||||
|
||||
<div class="component-props-container">
|
||||
|
||||
{#if current_view === 'props'}
|
||||
{#if $store.currentView === 'detail'}
|
||||
{#each screen_props as [k, v, id] (id)}
|
||||
<div class="detail-prop" for={k}>
|
||||
<label>{k}:</label>
|
||||
<input
|
||||
id={k}
|
||||
value={v}
|
||||
on:input={({ target }) => store.setMetadataProp(k, target.value)} />
|
||||
</div>
|
||||
{/each}
|
||||
<PropsView {component} {components} />
|
||||
{:else}
|
||||
<PropsView {component} {components} />
|
||||
{/if}
|
||||
{:else if current_view === 'layout'}
|
||||
<LayoutEditor {onStyleChanged} {component} />
|
||||
{:else if current_view === 'events'}
|
||||
<EventsEditor {component} {components} />
|
||||
{#if selectedCategory.value === 'design'}
|
||||
<DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
|
||||
{:else if selectedCategory.value === 'settings'}
|
||||
<SettingsView
|
||||
{componentInstance}
|
||||
{componentDefinition}
|
||||
{panelDefinition}
|
||||
onChange={onPropChanged} />
|
||||
{:else if selectedCategory.value === 'events'}
|
||||
<EventsEditor component={componentInstance} />
|
||||
{/if}
|
||||
|
||||
<CodeEditor
|
||||
bind:this={codeEditor}
|
||||
code={component._code}
|
||||
onCodeChanged={store.setComponentCode} />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.detail-prop {
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 70px 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.detail-prop label {
|
||||
word-wrap: break-word;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.6;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 30px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
border: 1px solid #dbdbdb;
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 0;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
border-color: #1e87f0;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.title > div:nth-child(1) {
|
||||
|
|
@ -159,55 +119,7 @@
|
|||
}
|
||||
|
||||
.component-props-container {
|
||||
margin-top: 10px;
|
||||
margin-top: 20px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
background: none;
|
||||
border-radius: 3px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
li button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
padding: 7px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li:nth-last-child(1) {
|
||||
margin-right: 0px;
|
||||
background: none;
|
||||
border-radius: 3px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
background: #f9f9f9 !important;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.button-indicator {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
color: var(--button-text);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import components from "./temporaryPanelStructure.js"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import CategoryTab from "./CategoryTab.svelte"
|
||||
import {
|
||||
find,
|
||||
sortBy,
|
||||
|
|
@ -36,15 +37,12 @@
|
|||
</script>
|
||||
|
||||
<div class="root">
|
||||
<ul class="tabs">
|
||||
{#each categories as category}
|
||||
<li
|
||||
on:click={() => (selectedCategory = category)}
|
||||
class:active={selectedCategory === category}>
|
||||
{category.name}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<CategoryTab
|
||||
onClick={category => (selectedCategory = category)}
|
||||
{selectedCategory}
|
||||
{categories} />
|
||||
|
||||
<div class="panel">
|
||||
<Tab
|
||||
list={selectedCategory}
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@
|
|||
<button
|
||||
class:selected={selected === COMPONENT_SELECTION_TAB}
|
||||
on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
|
||||
Components
|
||||
Add
|
||||
</button>
|
||||
|
||||
<button
|
||||
class:selected={selected === PROPERTIES_TAB}
|
||||
on:click={() => selectTab(PROPERTIES_TAB)}>
|
||||
Properties
|
||||
Edit
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
@ -54,33 +54,28 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
padding: 20px 20px;
|
||||
border-left: solid 1px #e8e8ef;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px;
|
||||
margin: 0px 20px 20px 0px;
|
||||
}
|
||||
|
||||
.switcher > button {
|
||||
text-rendering: optimizeLegibility;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
font-weight: 500;
|
||||
color: var(--secondary40);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ink-lighter);
|
||||
margin-right: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.switcher > .selected {
|
||||
color: var(--secondary100);
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<script>
|
||||
import PropertyGroup from "./PropertyGroup.svelte"
|
||||
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
||||
|
||||
export let panelDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let componentDefinition = {}
|
||||
export let onStyleChanged = () => {}
|
||||
|
||||
let selectedCategory = "normal"
|
||||
|
||||
const getProperties = name => panelDefinition[name]
|
||||
|
||||
function onChange(category) {
|
||||
selectedCategory = category
|
||||
}
|
||||
|
||||
const buttonProps = [
|
||||
{ value: "normal", text: "Normal" },
|
||||
{ value: "hover", text: "Hover" },
|
||||
{ value: "active", text: "Active" },
|
||||
{ value: "selected", text: "Selected" },
|
||||
]
|
||||
|
||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||
</script>
|
||||
|
||||
<div class="design-view-container">
|
||||
|
||||
<div class="design-view-state-categories">
|
||||
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
|
||||
</div>
|
||||
|
||||
<div class="design-view-property-groups">
|
||||
{#if propertyGroupNames.length > 0}
|
||||
{#each propertyGroupNames as groupName}
|
||||
<PropertyGroup
|
||||
name={groupName}
|
||||
properties={getProperties(groupName)}
|
||||
styleCategory={selectedCategory}
|
||||
{onStyleChanged}
|
||||
{componentDefinition}
|
||||
{componentInstance} />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="no-design">
|
||||
<span>This component does not have any design properties</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.design-view-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.design-view-state-categories {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
|
||||
.design-view-property-groups {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.no-design {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -25,16 +25,14 @@
|
|||
export const EVENT_TYPE = "event"
|
||||
|
||||
export let component
|
||||
export let components
|
||||
|
||||
let modalOpen = false
|
||||
let events = []
|
||||
let selectedEvent = null
|
||||
|
||||
$: {
|
||||
const componentDefinition = components[component._component]
|
||||
events = Object.keys(componentDefinition.props)
|
||||
.filter(propName => componentDefinition.props[propName] === EVENT_TYPE)
|
||||
events = Object.keys(component)
|
||||
.filter(propName => ["onChange", "onClick", "onLoad"].includes(propName))
|
||||
.map(propName => ({
|
||||
name: propName,
|
||||
handlers: component[propName] || [],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
export let value = ""
|
||||
export let text = ""
|
||||
export let icon = ""
|
||||
export let onClick = value => {}
|
||||
export let selected = false
|
||||
|
||||
$: useIcon = !!icon
|
||||
</script>
|
||||
|
||||
<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
|
||||
{#if useIcon}
|
||||
<i class={icon} />
|
||||
{:else}
|
||||
<span>{text}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.flatbutton {
|
||||
cursor: pointer;
|
||||
padding: 8px 4px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
color: var(--ink-light);
|
||||
border-radius: 5px;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: background 0.5s, color 0.5s ease;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #808192;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
|
||||
import FlatButton from "./FlatButton.svelte"
|
||||
export let buttonProps = []
|
||||
export let isMultiSelect = false
|
||||
export let value = []
|
||||
export let initialValue = ""
|
||||
export let onChange = selected => {}
|
||||
|
||||
onMount(() => {
|
||||
if (!value && !!initialValue) {
|
||||
value = initialValue
|
||||
}
|
||||
})
|
||||
|
||||
function onButtonClicked(v) {
|
||||
let val
|
||||
if (isMultiSelect) {
|
||||
if (value.includes(v)) {
|
||||
let idx = value.findIndex(i => i === v)
|
||||
val = [...value].splice(idx, 1)
|
||||
} else {
|
||||
val = [...value, v]
|
||||
}
|
||||
} else {
|
||||
val = v
|
||||
}
|
||||
onChange(val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flatbutton-group">
|
||||
{#each buttonProps as props}
|
||||
<div class="button-container">
|
||||
<FlatButton
|
||||
selected={value.includes(props.value)}
|
||||
onClick={onButtonClicked}
|
||||
{...props} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.flatbutton-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
export let value = ""
|
||||
export let onChange = value => {}
|
||||
export let options = []
|
||||
export let initialValue = ""
|
||||
export let styleBindingProperty = ""
|
||||
|
||||
const handleStyleBind = value =>
|
||||
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
|
||||
|
||||
$: isOptionsObject = options.every(o => typeof o === "object")
|
||||
|
||||
onMount(() => {
|
||||
if (!value && !!initialValue) {
|
||||
value = initialValue
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<select
|
||||
class="uk-select uk-form-small"
|
||||
{value}
|
||||
on:change={ev => onChange(ev.target.value)}>
|
||||
{#if isOptionsObject}
|
||||
{#each options as { value, label }}
|
||||
<option {...handleStyleBind(value || label)} value={value || label}>
|
||||
{label}
|
||||
</option>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each options as value}
|
||||
<option {...handleStyleBind(value)} {value}>{value}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<script>
|
||||
import { onMount, getContext } from "svelte"
|
||||
|
||||
export let label = ""
|
||||
export let control = null
|
||||
export let key = ""
|
||||
export let value
|
||||
export let props = {}
|
||||
export let onChange = () => {}
|
||||
|
||||
function handleChange(key, v) {
|
||||
if (v.target) {
|
||||
let val = props.valueKey ? v.target[props.valueKey] : v.target.value
|
||||
onChange(key, val)
|
||||
} else {
|
||||
onChange(key, v)
|
||||
}
|
||||
}
|
||||
|
||||
const safeValue = () => {
|
||||
return value === undefined && props.defaultValue !== undefined
|
||||
? props.defaultValue
|
||||
: value
|
||||
}
|
||||
|
||||
//Incase the component has a different value key name
|
||||
const handlevalueKey = value =>
|
||||
props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
|
||||
</script>
|
||||
|
||||
<div class="property-control">
|
||||
<div class="label">{label}</div>
|
||||
<div class="control">
|
||||
<svelte:component
|
||||
this={control}
|
||||
{...handlevalueKey(value)}
|
||||
on:change={val => handleChange(key, val)}
|
||||
onChange={val => handleChange(key, val)}
|
||||
{...props} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.property-control {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
margin: 8px 0px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 0 0 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
margin-right: auto;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.control {
|
||||
flex: 1;
|
||||
padding-left: 2px;
|
||||
max-width: 164px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script>
|
||||
import { excludeProps } from "./propertyCategories.js"
|
||||
import PropertyControl from "./PropertyControl.svelte"
|
||||
|
||||
export let name = ""
|
||||
export let styleCategory = "normal"
|
||||
export let properties = []
|
||||
export let componentInstance = {}
|
||||
export let onStyleChanged = () => {}
|
||||
|
||||
export let show = false
|
||||
|
||||
const capitalize = name => name[0].toUpperCase() + name.slice(1)
|
||||
|
||||
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
|
||||
$: style = componentInstance["_styles"][styleCategory] || {}
|
||||
</script>
|
||||
|
||||
<div class="property-group-container">
|
||||
<div class="property-group-name" on:click={() => (show = !show)}>
|
||||
<div class="icon">
|
||||
<i class={icon} />
|
||||
</div>
|
||||
<div class="name">{capitalize(name)}</div>
|
||||
</div>
|
||||
<div class="property-panel" class:show>
|
||||
|
||||
{#each properties as props}
|
||||
<PropertyControl
|
||||
label={props.label}
|
||||
control={props.control}
|
||||
key={props.key}
|
||||
value={style[props.key]}
|
||||
onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
|
||||
props={{ ...excludeProps(props, ['control', 'label']) }} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.property-group-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
background: var(--grey-light);
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 8px 12px;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.property-group-name {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
padding-top: 2px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.14px;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: 0 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.property-panel {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.show {
|
||||
overflow: auto;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
import PropertyControl from "./PropertyControl.svelte"
|
||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
||||
import Colorpicker from "../common/Colorpicker.svelte"
|
||||
import { excludeProps } from "./propertyCategories.js"
|
||||
|
||||
export let panelDefinition = []
|
||||
export let componentDefinition = {}
|
||||
export let componentInstance = {}
|
||||
export let onChange = () => {}
|
||||
|
||||
const propExistsOnComponentDef = prop => prop in componentDefinition.props
|
||||
|
||||
function handleChange(key, data) {
|
||||
data.target ? onChange(key, data.target.value) : onChange(key, data)
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if panelDefinition.length > 0}
|
||||
{#each panelDefinition as definition}
|
||||
{#if propExistsOnComponentDef(definition.key)}
|
||||
<PropertyControl
|
||||
control={definition.control}
|
||||
label={definition.label}
|
||||
key={definition.key}
|
||||
value={componentInstance[definition.key]}
|
||||
{onChange}
|
||||
props={{ ...excludeProps(definition, ['control', 'label']) }} />
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div>
|
||||
<span>This component does not have any settings.</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<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 CurrentItemPreview from "./CurrentItemPreview.svelte"
|
||||
import SettingsView from "./SettingsView.svelte"
|
||||
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()
|
||||
}
|
||||
|
||||
let settingsView
|
||||
const settings = () => {
|
||||
settingsView.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">
|
||||
<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)} />
|
||||
|
||||
<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 300px;
|
||||
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);
|
||||
height: 100vh;
|
||||
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>
|
||||
|
|
@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
|
|||
const props = {
|
||||
_id: uuid(),
|
||||
_component: componentDefinition._component,
|
||||
_styles: { position: {}, layout: {} },
|
||||
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
|
||||
_code: "",
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => {
|
|||
}
|
||||
|
||||
if (!props._styles) {
|
||||
props._styles = { layout: {}, position: {} }
|
||||
props._styles = { normal: {}, hover: {}, active: {}, selected: {} }
|
||||
}
|
||||
|
||||
return props
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
import Input from "../common/Input.svelte"
|
||||
import OptionSelect from "./OptionSelect.svelte"
|
||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
||||
// import Colorpicker from "../common/Colorpicker.svelte"
|
||||
/*
|
||||
TODO: Allow for default values for all properties
|
||||
*/
|
||||
|
||||
export const layout = [
|
||||
{
|
||||
label: "Direction",
|
||||
key: "flex-direction",
|
||||
control: OptionSelect,
|
||||
initialValue: "columnReverse",
|
||||
options: [
|
||||
{ label: "row" },
|
||||
{ label: "row-reverse", value: "rowReverse" },
|
||||
{ label: "column" },
|
||||
{ label: "column-reverse", value: "columnReverse" },
|
||||
],
|
||||
},
|
||||
{ label: "Justify", key: "justify-content", control: Input },
|
||||
{ label: "Align", key: "align-items", control: Input },
|
||||
{
|
||||
label: "Wrap",
|
||||
key: "flex-wrap",
|
||||
control: OptionSelect,
|
||||
options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
|
||||
},
|
||||
]
|
||||
|
||||
const spacingMeta = [
|
||||
{ placeholder: "T" },
|
||||
{ placeholder: "R" },
|
||||
{ placeholder: "B" },
|
||||
{ placeholder: "L" },
|
||||
]
|
||||
export const spacing = [
|
||||
{
|
||||
label: "Padding",
|
||||
key: "padding",
|
||||
control: InputGroup,
|
||||
meta: spacingMeta,
|
||||
},
|
||||
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
|
||||
]
|
||||
|
||||
export const size = [
|
||||
{ label: "Width", key: "width", control: Input },
|
||||
{ label: "Height", key: "height", control: Input },
|
||||
{ label: "Min W", key: "min-width", control: Input },
|
||||
{ label: "Min H", key: "min-height", control: Input },
|
||||
{ label: "Max W", key: "max-width", control: Input },
|
||||
{ label: "Max H", key: "max-height", control: Input },
|
||||
]
|
||||
|
||||
export const position = [
|
||||
{
|
||||
label: "Position",
|
||||
key: "position",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "static" },
|
||||
{ label: "relative" },
|
||||
{ label: "fixed" },
|
||||
{ label: "absolute" },
|
||||
{ label: "sticky" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const typography = [
|
||||
{
|
||||
label: "Font",
|
||||
key: "font-family",
|
||||
control: OptionSelect,
|
||||
defaultValue: "initial",
|
||||
options: [
|
||||
"initial",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Arial",
|
||||
"Arial Black",
|
||||
"Comic Sans MS",
|
||||
"Impact",
|
||||
"Lucida Sans Unicode",
|
||||
],
|
||||
styleBindingProperty: "font-family",
|
||||
},
|
||||
{
|
||||
label: "Weight",
|
||||
key: "font-weight",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "normal" },
|
||||
{ label: "bold" },
|
||||
{ label: "bolder" },
|
||||
{ label: "lighter" },
|
||||
],
|
||||
},
|
||||
{ label: "size", key: "font-size", defaultValue: "", control: Input },
|
||||
{ label: "Line H", key: "line-height", control: Input },
|
||||
{
|
||||
label: "Color",
|
||||
key: "color",
|
||||
control: OptionSelect,
|
||||
options: ["black", "white", "red", "blue", "green"],
|
||||
},
|
||||
{
|
||||
label: "align",
|
||||
key: "text-align",
|
||||
control: OptionSelect,
|
||||
options: ["initial", "left", "right", "center", "justify"],
|
||||
}, //custom
|
||||
{ label: "transform", key: "text-transform", control: Input }, //custom
|
||||
{ label: "style", key: "font-style", control: Input }, //custom
|
||||
]
|
||||
|
||||
export const background = [
|
||||
{
|
||||
label: "Background",
|
||||
key: "background",
|
||||
control: OptionSelect,
|
||||
options: ["black", "white", "red", "blue", "green"],
|
||||
},
|
||||
{ label: "Image", key: "image", control: Input }, //custom
|
||||
]
|
||||
|
||||
export const border = [
|
||||
{ label: "Radius", key: "border-radius", control: Input },
|
||||
{ label: "Width", key: "border-width", control: Input }, //custom
|
||||
{
|
||||
label: "Color",
|
||||
key: "border-color",
|
||||
control: OptionSelect,
|
||||
options: ["black", "white", "red", "blue", "green"],
|
||||
},
|
||||
{ label: "Style", key: "border-style", control: Input },
|
||||
]
|
||||
|
||||
export const effects = [
|
||||
{ label: "Opacity", key: "opacity", control: Input },
|
||||
{ label: "Rotate", key: "transform", control: Input }, //needs special control
|
||||
{ label: "Shadow", key: "box-shadow", control: Input },
|
||||
]
|
||||
|
||||
export const transitions = [
|
||||
{ label: "Property", key: "transition-property", control: Input },
|
||||
{ label: "Duration", key: "transition-timing-function", control: Input },
|
||||
{ label: "Ease", key: "transition-ease", control: Input },
|
||||
]
|
||||
|
||||
export const all = {
|
||||
layout,
|
||||
spacing,
|
||||
size,
|
||||
position,
|
||||
typography,
|
||||
background,
|
||||
border,
|
||||
effects,
|
||||
transitions,
|
||||
}
|
||||
|
||||
export function excludeProps(props, propsToExclude) {
|
||||
const modifiedProps = {}
|
||||
for (const prop in props) {
|
||||
if (!propsToExclude.includes(prop)) {
|
||||
modifiedProps[prop] = props[prop]
|
||||
}
|
||||
}
|
||||
return modifiedProps
|
||||
}
|
||||
|
|
@ -1,3 +1,9 @@
|
|||
import Input from "../common/Input.svelte"
|
||||
import OptionSelect from "./OptionSelect.svelte"
|
||||
import Checkbox from "../common/Checkbox.svelte"
|
||||
|
||||
import { all } from "./propertyCategories.js"
|
||||
|
||||
export default {
|
||||
categories: [
|
||||
{
|
||||
|
|
@ -20,6 +26,31 @@ export default {
|
|||
icon: "ri-layout-row-fill",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
key: "type",
|
||||
label: "Type",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "article" },
|
||||
{ label: "aside" },
|
||||
{ label: "details" },
|
||||
{ label: "div" },
|
||||
{ label: "figure" },
|
||||
{ label: "figcaption" },
|
||||
{ label: "footer" },
|
||||
{ label: "header" },
|
||||
{ label: "main" },
|
||||
{ label: "mark" },
|
||||
{ label: "nav" },
|
||||
{ label: "paragraph" },
|
||||
{ label: "summary" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Text",
|
||||
|
|
@ -32,13 +63,21 @@ export default {
|
|||
name: "Headline",
|
||||
description: "A component for displaying heading text",
|
||||
icon: "ri-heading",
|
||||
props: {
|
||||
type: {
|
||||
type: "options",
|
||||
options: ["h1", "h2", "h3", "h4", "h5", "h6"],
|
||||
default: "h1",
|
||||
},
|
||||
text: "string",
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
key: "text",
|
||||
label: "Text",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Type",
|
||||
control: OptionSelect,
|
||||
options: ["h1", "h2", "h3", "h4", "h5", "h6"],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -46,7 +85,34 @@ export default {
|
|||
name: "Paragraph",
|
||||
description: "A component for displaying paragraph text.",
|
||||
icon: "ri-paragraph",
|
||||
props: {},
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Text",
|
||||
key: "text",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Type",
|
||||
key: "type",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"none",
|
||||
"bold",
|
||||
"strong",
|
||||
"italic",
|
||||
"emphasis",
|
||||
"mark",
|
||||
"small",
|
||||
"del",
|
||||
"ins",
|
||||
"sub",
|
||||
"sup",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -62,21 +128,38 @@ export default {
|
|||
description:
|
||||
"A textfield component that allows the user to input text.",
|
||||
icon: "ri-edit-box-line",
|
||||
props: {},
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{ label: "Label", key: "label", control: Input },
|
||||
{
|
||||
label: "Type",
|
||||
key: "type",
|
||||
control: OptionSelect,
|
||||
options: ["text", "password"],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/checkbox",
|
||||
name: "Checkbox",
|
||||
description: "A selectable checkbox component",
|
||||
icon: "ri-checkbox-line",
|
||||
props: {},
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Label", key: "label", control: Input }],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/radiobutton",
|
||||
name: "Radiobutton",
|
||||
description: "A selectable radiobutton component",
|
||||
icon: "ri-radio-button-line",
|
||||
props: {},
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [{ label: "Label", key: "label", control: Input }],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/select",
|
||||
|
|
@ -84,7 +167,10 @@ export default {
|
|||
description:
|
||||
"A select component for choosing from different options",
|
||||
icon: "ri-file-list-line",
|
||||
props: {},
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -93,24 +179,51 @@ export default {
|
|||
name: "Button",
|
||||
description: "A basic html button that is ready for styling",
|
||||
icon: "ri-radio-button-fill",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: {
|
||||
design: {
|
||||
...all,
|
||||
},
|
||||
settings: [
|
||||
{ label: "Text", key: "text", control: Input },
|
||||
{
|
||||
label: "Disabled",
|
||||
key: "disabled",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/icon",
|
||||
name: "Icon",
|
||||
description: "A basic component for displaying icons",
|
||||
icon: "ri-sun-fill",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/link",
|
||||
name: "Link",
|
||||
description: "A basic link component for internal and external links",
|
||||
icon: "ri-link",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{ label: "Text", key: "text", control: Input },
|
||||
{ label: "Url", key: "url", control: Input },
|
||||
{
|
||||
label: "Open New Tab",
|
||||
key: "openInNewTab",
|
||||
valueKey: "checked",
|
||||
control: Checkbox,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -124,17 +237,16 @@ export default {
|
|||
description:
|
||||
"A basic card component that can contain content and actions.",
|
||||
icon: "ri-layout-bottom-line",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/login",
|
||||
name: "Login",
|
||||
description:
|
||||
"A component that automatically generates a login screen for your app.",
|
||||
icon: "ri-login-box-fill",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
{
|
||||
name: "Navigation Bar",
|
||||
|
|
@ -142,8 +254,8 @@ export default {
|
|||
description:
|
||||
"A component for handling the navigation within your app.",
|
||||
icon: "ri-navigation-fill",
|
||||
commonProps: {},
|
||||
children: [],
|
||||
properties: { design: { ...all } },
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -153,19 +265,17 @@ export default {
|
|||
children: [
|
||||
{
|
||||
name: "Table",
|
||||
_component: "@budibase/materialdesign-components/Datatable",
|
||||
description: "A component that generates a table from your data.",
|
||||
icon: "ri-archive-drawer-fill",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Form",
|
||||
name: "Form",
|
||||
description: "A component that generates a form from your data.",
|
||||
icon: "ri-file-edit-fill",
|
||||
commonProps: {},
|
||||
component: "@budibase/materialdesign-components/Form",
|
||||
properties: { design: { ...all } },
|
||||
_component: "@budibase/materialdesign-components/Form",
|
||||
template: {
|
||||
component: "@budibase/materialdesign-components/Form",
|
||||
description: "Form for saving a record",
|
||||
|
|
@ -178,7 +288,7 @@ export default {
|
|||
name: "DataTable",
|
||||
description: "A table for displaying data from the backend.",
|
||||
icon: "ri-archive-drawer-fill",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -186,7 +296,7 @@ export default {
|
|||
name: "DataForm",
|
||||
description: "Form stuff",
|
||||
icon: "ri-file-edit-fill",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -194,7 +304,7 @@ export default {
|
|||
_component: "@budibase/standard-components/datachart",
|
||||
description: "Shiny chart",
|
||||
icon: "ri-bar-chart-line",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -202,7 +312,7 @@ export default {
|
|||
_component: "@budibase/standard-components/datalist",
|
||||
description: "Shiny list",
|
||||
icon: "ri-file-list-line",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
|
|
@ -210,7 +320,7 @@ export default {
|
|||
_component: "@budibase/standard-components/datamap",
|
||||
description: "Shiny map",
|
||||
icon: "ri-map-pin-line",
|
||||
commonProps: {},
|
||||
properties: { design: { ...all } },
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
|
||||
:root {
|
||||
|
||||
--white: #FFFFFF;
|
||||
|
||||
--blue: #0055ff;
|
||||
--blue-light: #F1F4FC;
|
||||
--blue-dark: #2F4C9B;
|
||||
|
||||
--ink: #393C44;
|
||||
--ink-light: #808192;
|
||||
--ink-lighter: #ADAEC4;
|
||||
|
||||
--grey: #F2F2F2;
|
||||
--grey-light: #FBFBFB;
|
||||
--grey-dark: #E6E6E6;
|
||||
|
||||
--primary100: #0055ff;
|
||||
--primary80: rgba(0, 85, 255, 0.8);
|
||||
--primary60: #rgba(0, 85, 255, 0.6);
|
||||
|
|
@ -9,7 +24,7 @@
|
|||
--primary5: #rgba(0, 85, 255, 0.05);
|
||||
--primarydark: #0044cc;
|
||||
|
||||
--secondary100:#000333;
|
||||
--secondary100:#393C44;
|
||||
--secondary80: rgba(0, 3, 51, 0.8);
|
||||
--secondary60: rgba(0, 3, 51, 0.6);
|
||||
--secondary40: rgba(0, 3, 51, 0.4);
|
||||
|
|
@ -34,7 +49,7 @@
|
|||
--deletion10: #F2545B1A;
|
||||
--deletiondark: #CF4046;
|
||||
|
||||
--white: #FFFFFF;
|
||||
|
||||
--darkslate: #1a202c;
|
||||
--slate: #d8d8d8;
|
||||
--lightslate: #f9f9f9;
|
||||
|
|
@ -105,7 +120,7 @@ h3 {
|
|||
h4 {
|
||||
font-family: var(--fontbold);
|
||||
font-size: 18pt;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
|
|
|||
|
|
@ -10,18 +10,15 @@
|
|||
|
||||
<link rel='icon' type='image/png' href='/_builder/favicon.png'>
|
||||
<link rel='stylesheet' href='/_builder/global.css'>
|
||||
<link rel='stylesheet' href='/_builder/flowy.css'>
|
||||
<link rel='stylesheet' href='/_builder/codemirror.css'>
|
||||
<link rel='stylesheet' href='/_builder/budibase.css'>
|
||||
<link rel='stylesheet' href='/_builder/monokai.css'>
|
||||
<link rel='stylesheet' href='/_builder/bundle.css'>
|
||||
<link rel='stylesheet' href='/_builder/fonts.css'>
|
||||
<link rel='stylesheet' href="/_builder/uikit.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">
|
||||
</head>
|
||||
|
||||
<body id="app">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
|
||||
<script src='/_builder/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import "./global.css"
|
||||
import "./flowy.css";
|
||||
import "./fonts.css"
|
||||
import "./budibase.css"
|
||||
import "/assets/roboto-v20-latin-ext_latin-300"
|
||||
|
|
|
|||
|
|
@ -31,8 +31,9 @@
|
|||
<div class="topleftnav">
|
||||
<button class="home-logo">
|
||||
<img
|
||||
src="/_builder/assets/budibase-emblem-white.svg"
|
||||
alt="budibase icon" />
|
||||
src="/_builder/assets/bb-logo.svg"
|
||||
alt="budibase icon"
|
||||
on:click={() => $goto(`/`)} />
|
||||
</button>
|
||||
|
||||
<!-- This gets all indexable subroutes and sticks them in the top nav. -->
|
||||
|
|
@ -85,13 +86,14 @@
|
|||
|
||||
.top-nav {
|
||||
flex: 0 0 auto;
|
||||
height: 48px;
|
||||
background: #0d203b;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
padding: 0px 20px 0 20px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--grey);
|
||||
}
|
||||
|
||||
.content > div {
|
||||
|
|
@ -110,8 +112,8 @@
|
|||
|
||||
.topnavitem {
|
||||
cursor: pointer;
|
||||
color: rgb(255, 255, 255, 0.6);
|
||||
margin: 0px 10px;
|
||||
color: var(--ink-lighter);
|
||||
margin: 0px 00px 0px 20px;
|
||||
padding-top: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
|
|
@ -121,19 +123,19 @@
|
|||
}
|
||||
|
||||
.topnavitem:hover {
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
color: var(--ink-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.topnavitemright {
|
||||
cursor: pointer;
|
||||
color: rgb(255, 255, 255, 0.6);
|
||||
margin: 0px 5px;
|
||||
color: var(--ink-light);
|
||||
margin: 0px 20px 0px 0px;
|
||||
padding-top: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
|
|
@ -155,7 +157,8 @@
|
|||
cursor: pointer;
|
||||
outline: none;
|
||||
height: 40px;
|
||||
padding: 8px 10px 8px 0;
|
||||
padding: 0px 10px 8px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-logo:hover {
|
||||
|
|
@ -167,7 +170,7 @@
|
|||
}
|
||||
|
||||
.home-logo img {
|
||||
height: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
span:first-letter {
|
||||
text-transform: capitalize;
|
||||
|
|
|
|||
|
|
@ -37,4 +37,13 @@
|
|||
width: 275px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.nav {
|
||||
overflow: auto;
|
||||
flex: 0 1 auto;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,9 +54,7 @@
|
|||
|
||||
<div class="pages-list-container">
|
||||
<div class="nav-header">
|
||||
<span class="navigator-title">Navigator</span>
|
||||
<div class="border-line" />
|
||||
|
||||
<span class="navigator-title">Navigate</span>
|
||||
<span class="components-nav-page">Pages</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -129,18 +127,16 @@
|
|||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 275px 1fr 275px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 300px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,20 +155,16 @@
|
|||
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;
|
||||
color: var(--ink);
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
|
|
@ -182,8 +174,7 @@
|
|||
|
||||
.components-nav-header {
|
||||
font-size: 13px;
|
||||
color: #000333;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink);
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
|
|
@ -235,13 +226,10 @@
|
|||
}
|
||||
|
||||
.navigator-title {
|
||||
font-size: 14px;
|
||||
color: var(--secondary100);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
color: var(--ink);
|
||||
font-weight: bold;
|
||||
padding: 0 20px 20px 20px;
|
||||
line-height: 1rem !important;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.border-line {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export { default as BlockPanel } from "./BlockPanel.svelte";
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { backendUiStore, workflowStore } from "builderStore"
|
||||
import api from "builderStore/api"
|
||||
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte";
|
||||
|
||||
$: workflow = $workflowStore.workflows.find(
|
||||
wf => wf._id === $workflowStore.selectedWorkflowId
|
||||
)
|
||||
$: workflowBlock = $workflowStore.selectedWorkflowBlock
|
||||
|
||||
function deleteWorkflow() {
|
||||
workflowStore.actions.deleteWorkflow(workflow)
|
||||
}
|
||||
|
||||
function deleteWorkflowBlock() {
|
||||
// TODO: implement
|
||||
workflowStore.actions.deleteWorkflowBlock(workflowBlock)
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<span>Setup</span>
|
||||
</header>
|
||||
<div class="panel-body">
|
||||
{#if workflowBlock}
|
||||
<WorkflowBlockSetup {workflowBlock} />
|
||||
<button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
|
||||
Delete {workflowBlock.type}
|
||||
</button>
|
||||
{:else if $workflowStore.selectedWorkflowId}
|
||||
<label class="uk-form-label">Workflow: {workflow.name}</label>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">Name</label>
|
||||
<div class="uk-form-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="budibase__input"
|
||||
bind:value={workflow.name} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">User Access</label>
|
||||
Some User Access Stuff Here
|
||||
</div>
|
||||
<button class="delete-workflow-button hoverable" on:click={deleteWorkflow}>
|
||||
Delete Workflow
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
span:not(.selected) {
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--font);
|
||||
}
|
||||
|
||||
.delete-workflow-button {
|
||||
font-family: Roboto;
|
||||
width: 100%;
|
||||
border: solid 1px #f2f2f2;
|
||||
border-radius: 2px;
|
||||
background: var(--white);
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
export let workflowBlock
|
||||
$: workflowArgs = Object.keys(workflowBlock.args)
|
||||
</script>
|
||||
|
||||
<label class="uk-form-label">{workflowBlock.heading}: {workflowBlock.heading}</label>
|
||||
{#each workflowArgs as workflowArg}
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label">Name</label>
|
||||
<div class="uk-form-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="budibase__input"
|
||||
bind:value={workflowBlock.args[workflowArg]} />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as SetupPanel } from "./SetupPanel.svelte";
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { workflowStore, backendUiStore } from "builderStore"
|
||||
import Flowchart from "./svelte-flows/Flowchart.svelte"
|
||||
import api from "builderStore/api"
|
||||
|
||||
let canvas
|
||||
let workflow
|
||||
let uiTree
|
||||
let instanceId = $backendUiStore.selectedDatabase._id
|
||||
|
||||
$: workflow = $workflowStore.workflows.find(
|
||||
wf => wf._id === $workflowStore.selectedWorkflowId
|
||||
)
|
||||
|
||||
// Build a renderable UI Tree for the flowchart generator
|
||||
function buildUiTree(block, tree = []) {
|
||||
if (!block) return tree
|
||||
|
||||
tree.push({
|
||||
type: block.type,
|
||||
heading: block.actionId,
|
||||
args: block.args,
|
||||
body: JSON.stringify(block.args),
|
||||
})
|
||||
|
||||
return buildUiTree(block.next, tree)
|
||||
}
|
||||
|
||||
$: if (workflow) uiTree = workflow.definition ? buildUiTree(workflow.definition.next) : []
|
||||
|
||||
function onDelete(block) {
|
||||
// TODO finish
|
||||
workflowStore.actions.deleteWorkflowBlock(block);
|
||||
}
|
||||
|
||||
function onSelect(block) {
|
||||
workflowStore.update(state => {
|
||||
state.selectedWorkflowBlock = block
|
||||
return state
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<Flowchart
|
||||
blocks={uiTree}
|
||||
onSelect={onSelect}
|
||||
on:delete={onDelete}
|
||||
/>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
import FlowItem from "./FlowItem.svelte"
|
||||
|
||||
export let blocks = []
|
||||
export let onSelect
|
||||
</script>
|
||||
|
||||
<section class="canvas">
|
||||
{#each blocks as block, idx}
|
||||
<FlowItem onSelect={onSelect} {block} />
|
||||
{#if idx !== blocks.length - 1}
|
||||
<i class="ri-arrow-down-line"></i>
|
||||
{/if}
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.canvas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<script>
|
||||
export let onSelect
|
||||
export let block
|
||||
|
||||
function selectBlock() {
|
||||
onSelect(block);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="hoverable" on:click={selectBlock}>
|
||||
<header>{block.heading}</header>
|
||||
<hr />
|
||||
<p>{block.body}</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid black;
|
||||
width: 320px;
|
||||
padding: 20px;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s all;
|
||||
box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
|
||||
background-color: var(--font);
|
||||
font-size: 16px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
div:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default as WorkflowList } from "./WorkflowList.svelte";
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { WorkflowList } from "../";
|
||||
import WorkflowBlock from "./WorkflowBlock.svelte";
|
||||
import api from "builderStore/api"
|
||||
import blockDefinitions from "./blockDefinitions"
|
||||
import blockDefinitions from "../blockDefinitions"
|
||||
|
||||
const SUB_TABS = [
|
||||
{
|
||||
|
|
@ -14,8 +16,8 @@
|
|||
key: "ACTIONS",
|
||||
},
|
||||
{
|
||||
name: "Utilities",
|
||||
key: "UTILITIES",
|
||||
name: "Logic",
|
||||
key: "LOGIC",
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -23,13 +25,13 @@
|
|||
let definitions = []
|
||||
|
||||
$: definitions = Object.values(blockDefinitions[selectedTab])
|
||||
|
||||
function myAction(node) {
|
||||
console.log("ACTION FIRED", node);
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<span>Blocks</span>
|
||||
<span>Props</span>
|
||||
</header>
|
||||
<div class="subtabs">
|
||||
{#each SUB_TABS as tab}
|
||||
<span
|
||||
|
|
@ -42,38 +44,12 @@
|
|||
</div>
|
||||
<div id="blocklist">
|
||||
{#each definitions as blockDefinition}
|
||||
<div
|
||||
class="blockelem create-flowy noselect"
|
||||
data-name={blockDefinition.name}
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name="blockelemtype"
|
||||
class="blockelemtype"
|
||||
value="1" />
|
||||
<div class="blockin">
|
||||
<div class="blockico">
|
||||
<i class={blockDefinition.icon} />
|
||||
</div>
|
||||
<div class="blocktext">
|
||||
<p class="blocktitle">{blockDefinition.name}</p>
|
||||
<p class="blockdesc">{blockDefinition.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WorkflowBlock {blockDefinition} blockType={selectedTab} />
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.subtabs {
|
||||
margin-top: 27px;
|
||||
display: grid;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<script>
|
||||
import { workflowStore } from "builderStore";
|
||||
|
||||
export let blockType
|
||||
export let blockDefinition
|
||||
|
||||
function addBlockToWorkflow() {
|
||||
// TODO: store the block type in the DB as well
|
||||
workflowStore.actions.addBlockToWorkflow({ blockDefinition, blockType });
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="workflow-block hoverable" on:click={addBlockToWorkflow}>
|
||||
<div>
|
||||
<i class={blockDefinition.icon} />
|
||||
</div>
|
||||
<div class="workflow-text">
|
||||
<h4>{blockDefinition.name}</h4>
|
||||
<p>{blockDefinition.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.workflow-block {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.workflow-text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
background: var(--secondary);
|
||||
color: var(--dark-grey);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: var(--dark-grey);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
name,
|
||||
instanceId,
|
||||
})
|
||||
flowy.deleteBlocks();
|
||||
onClosed()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -23,17 +23,16 @@
|
|||
</script>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
Workflows
|
||||
<i on:click={newWorkflow} class="ri-add-circle-fill" />
|
||||
</header>
|
||||
<button class="new-workflow-button hoverable" on:click={newWorkflow}>
|
||||
Create New Workflow
|
||||
</button>
|
||||
<ul>
|
||||
{#each $workflowStore.workflows as workflow}
|
||||
<li
|
||||
class="workflow-item"
|
||||
class:selected={workflow._id === $workflowStore.selectedWorkflowId}
|
||||
on:click={() => workflowStore.actions.select(workflow)}>
|
||||
<i class="ri-stackshare-line" />
|
||||
<i class="ri-stackshare-line" class:live={workflow.live} />
|
||||
{workflow.name}
|
||||
</li>
|
||||
{/each}
|
||||
|
|
@ -41,16 +40,8 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--dark-grey);
|
||||
color: #adaec4;
|
||||
}
|
||||
|
||||
i:hover {
|
||||
|
|
@ -62,6 +53,10 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.live {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -72,6 +67,7 @@
|
|||
align-items: center;
|
||||
border-radius: 3px;
|
||||
height: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.workflow-item i {
|
||||
|
|
@ -87,4 +83,15 @@
|
|||
.workflow-item.selected {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.new-workflow-button {
|
||||
font-family: Roboto;
|
||||
width: 100%;
|
||||
border: solid 1px #f2f2f2;
|
||||
border-radius: 2px;
|
||||
background: var(--white);
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { backendUiStore, workflowStore } from "builderStore"
|
||||
import { WorkflowList, BlockList } from "./"
|
||||
import api from "builderStore/api"
|
||||
import blockDefinitions from "./blockDefinitions"
|
||||
|
||||
const WORKFLOW_TABS = [
|
||||
{
|
||||
name: "Workflows",
|
||||
key: "WORKFLOWS",
|
||||
},
|
||||
{
|
||||
name: "Add",
|
||||
key: "ADD",
|
||||
},
|
||||
]
|
||||
|
||||
let selectedTab = "WORKFLOWS"
|
||||
let definitions = []
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<span
|
||||
class="hoverable"
|
||||
class:selected={selectedTab === 'WORKFLOWS'}
|
||||
on:click={() => (selectedTab = 'WORKFLOWS')}>
|
||||
Workflows
|
||||
</span>
|
||||
{#if $workflowStore.selectedWorkflowId}
|
||||
<span
|
||||
class="hoverable"
|
||||
class:selected={selectedTab === 'ADD'}
|
||||
on:click={() => (selectedTab = 'ADD')}>
|
||||
Add
|
||||
</span>
|
||||
{/if}
|
||||
</header>
|
||||
{#if selectedTab === 'WORKFLOWS'}
|
||||
<WorkflowList />
|
||||
{:else if selectedTab === 'ADD'}
|
||||
<BlockList />
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
span:not(.selected) {
|
||||
color: var(--dark-grey);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
const ACTIONS = {
|
||||
SET_STATE: {
|
||||
name: "Update UI",
|
||||
name: "Update UI State",
|
||||
icon: "",
|
||||
description: "Update your User Interface with some data.",
|
||||
type: "CLIENT",
|
||||
|
|
@ -22,6 +22,24 @@ const ACTIONS = {
|
|||
icon: "ri-delete-bin-line",
|
||||
name: "Delete Record",
|
||||
type: "SERVER",
|
||||
},
|
||||
FIND_RECORD: {
|
||||
description: "Delete a record from your database.",
|
||||
icon: "ri-delete-bin-line",
|
||||
name: "Find Record",
|
||||
type: "SERVER",
|
||||
},
|
||||
CREATE_USER: {
|
||||
description: "Create a new user.",
|
||||
icon: "ri-user-add-fill",
|
||||
name: "Create User",
|
||||
type: "SERVER",
|
||||
},
|
||||
SEND_EMAIL: {
|
||||
description: "Send an email.",
|
||||
icon: "ri-mail-open-fill",
|
||||
name: "Send Email",
|
||||
type: "SERVER",
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -49,11 +67,17 @@ const TRIGGERS = {
|
|||
},
|
||||
};
|
||||
|
||||
const UTILITIES = {
|
||||
IFELSE: {
|
||||
name: "If/Else",
|
||||
const LOGIC = {
|
||||
FILTER: {
|
||||
name: "Filter",
|
||||
icon: "ri-git-branch-line",
|
||||
description: "Perform different actions based on a condition",
|
||||
description: "Filter any workflows which do not meet certain conditions.",
|
||||
type: "CLIENT"
|
||||
},
|
||||
DELAY: {
|
||||
name: "Delay",
|
||||
icon: "ri-git-branch-line",
|
||||
description: "Delay the workflow until an amount of time has passed.",
|
||||
type: "CLIENT"
|
||||
},
|
||||
}
|
||||
|
|
@ -61,5 +85,5 @@ const UTILITIES = {
|
|||
export default {
|
||||
ACTIONS,
|
||||
TRIGGERS,
|
||||
UTILITIES
|
||||
LOGIC
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { default as WorkflowPanel } from "./WorkflowPanel.svelte";
|
||||
export { default as BlockList } from "./BlockList/BlockList.svelte";
|
||||
export { default as WorkflowList } from "./WorkflowList/WorkflowList.svelte";
|
||||
|
|
@ -1,20 +1,18 @@
|
|||
<script>
|
||||
import { workflowStore } from "builderStore"
|
||||
import { WorkflowList } from "./WorkflowList"
|
||||
import { BlockPanel } from "./BlockPanel"
|
||||
import { WorkflowPanel } from "./WorkflowPanel"
|
||||
import { SetupPanel } from "./SetupPanel"
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="nav">
|
||||
<WorkflowList />
|
||||
<WorkflowPanel />
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
<div class="nav">
|
||||
{#if $workflowStore.selectedWorkflowId}
|
||||
<BlockPanel />
|
||||
{/if}
|
||||
<SetupPanel />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { workflowStore, backendUiStore } from "builderStore";
|
||||
import api from "builderStore/api";
|
||||
|
||||
let canvas
|
||||
let workflow
|
||||
let instanceId = $backendUiStore.selectedDatabase._id;
|
||||
|
||||
$: workflow = $workflowStore.workflows.find(wf => wf._id === $workflowStore.selectedWorkflowId)
|
||||
|
||||
// $: if (workflow && workflow.uiTree) flowy.import(workflow.uiTree);
|
||||
|
||||
onMount(() => {
|
||||
flowy(canvas, onGrab, onRelease, onSnap);
|
||||
});
|
||||
|
||||
function onGrab(block) {
|
||||
console.log(block);
|
||||
}
|
||||
|
||||
function onSnap(block, first, parent){
|
||||
workflow.uiTree = flowy.output();
|
||||
workflowStore.actions.update({ instanceId, workflow })
|
||||
return true;
|
||||
}
|
||||
|
||||
function onRelease() {
|
||||
}
|
||||
|
||||
// function onGrab(block) {
|
||||
// // When the user grabs a block
|
||||
// }
|
||||
// function onRelease() {
|
||||
// // When the user releases a block
|
||||
// console.log(flowy.output())
|
||||
// }
|
||||
// function onSnap(block, first, parent) {
|
||||
// console.log(flowy.output())
|
||||
// console.log(block, first, parent)
|
||||
// // When a block snaps with another one
|
||||
// }
|
||||
// function onRearrange(block, parent) {
|
||||
// console.log(block, parent)
|
||||
// // When a block is rearranged
|
||||
// }
|
||||
</script>
|
||||
|
||||
<section bind:this={canvas} class="canvas" />
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import WorkflowBuilder from "./flowy/WorkflowBuilder.svelte";
|
||||
import WorkflowBuilder from "./WorkflowBuilder/WorkflowBuilder.svelte";
|
||||
</script>
|
||||
|
||||
<WorkflowBuilder />
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import api from "builderStore/api";
|
||||
|
||||
class Orchestrator {
|
||||
set strategy(strategy) {
|
||||
this._stategy = strategy
|
||||
}
|
||||
|
||||
execute(workflow) {
|
||||
this._strategy.execute(workflow);
|
||||
}
|
||||
}
|
||||
|
||||
const ClientStrategy = {
|
||||
execute: function(workflow) {
|
||||
const block = workflow.next;
|
||||
const EXECUTE_WORKFLOW_URL = `api/${workflow.instanceId}/workflows/${workflow._id}`;
|
||||
|
||||
switch (block.type) {
|
||||
case "CLIENT":
|
||||
// fetch the workflow code from the server, then execute it here in the client
|
||||
// catch any errors
|
||||
// check against the conditions in the workflow
|
||||
// if everything is fine, recurse
|
||||
this.execute(workflow.next);
|
||||
break;
|
||||
case "SERVER":
|
||||
// hit the server endpoint and wait for the response
|
||||
// catch any errors
|
||||
// check against the conditions in the workflow
|
||||
// if everything is fine, recurse
|
||||
await api.post()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,21 @@
|
|||
import { store } from "builderStore"
|
||||
import AppList from "components/start/AppList.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import ActionButton from "components/common/ActionButton.svelte"
|
||||
import IconButton from "components/common/IconButton.svelte"
|
||||
import {
|
||||
SettingsIcon,
|
||||
AppsIcon,
|
||||
UpdatesIcon,
|
||||
HostingIcon,
|
||||
DocumentationIcon,
|
||||
TutorialsIcon,
|
||||
CommunityIcon,
|
||||
ContributionIcon,
|
||||
BugIcon,
|
||||
EmailIcon,
|
||||
TwitterIcon,
|
||||
} from "components/common/Icons/"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
|
||||
let promise = getApps()
|
||||
|
|
@ -19,23 +33,275 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
<div class="root">
|
||||
<div class="ui-nav">
|
||||
<div class="home-logo">
|
||||
<img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
|
||||
</div>
|
||||
{:then result}
|
||||
<AppList apps={result} />
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
</main>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Build</div>
|
||||
<div class="nav-item-home">
|
||||
<span class="nav-item-icon">
|
||||
<AppsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Apps</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Settings</div>
|
||||
</div>
|
||||
<a href="https://budibase.con/login" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<UpdatesIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Updates</div>
|
||||
</a>
|
||||
<a href="https://budibase.con/login" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<HostingIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Hosting</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Learn</div>
|
||||
<a href="https://docs.budibase.com/" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<DocumentationIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Documentation</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://docs.budibase.com/tutorial/quick-start"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<TutorialsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Tutorials</div>
|
||||
</a>
|
||||
<a href="https://forum.budibase.com/" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<CommunityIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Community</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Contact</div>
|
||||
<a
|
||||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<ContributionIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Contribute to our product</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/Budibase/budibase/issues"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<BugIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Report bug</div>
|
||||
</a>
|
||||
<a href="mailto:support@budibase.com" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Email</div>
|
||||
</a>
|
||||
<a href="https://twitter.com/budibase" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<TwitterIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Twitter</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="welcome">Welcome to Budibase</div>
|
||||
<div class="banner">
|
||||
<div class="banner-content">
|
||||
<div class="banner-header">
|
||||
Every accomplishment starts with a decision to try.
|
||||
</div>
|
||||
<button class="banner-button" type="button">
|
||||
<i class="ri-add-circle-fill" />
|
||||
Create New Web App
|
||||
</button>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<img src="/_builder/assets/banner-image.png" alt="Bannerimage" />
|
||||
</div>
|
||||
</div>
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{:then result}
|
||||
<AppList apps={result} />
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
main {
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 275px 1fr;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--grey-light);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.ui-nav {
|
||||
grid-column: 1;
|
||||
background-color: var(--white);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--grey-dark);
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.home-logo img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
margin: 20px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
cursor: pointer;
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 0px 0px 0px 12px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-item-home {
|
||||
cursor: pointer;
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 0px 0px 0px 12px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--blue-light);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: var(--grey-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-item::selection {
|
||||
background-color: var(--blue-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-item-title {
|
||||
font-size: 14px;
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.nav-item-icon {
|
||||
color: var(--ink-light);
|
||||
}
|
||||
|
||||
.welcome {
|
||||
margin: 60px 80px 0px 80px;
|
||||
font-size: 42px;
|
||||
color: var(--ink);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 20px 80px 40px 80px;
|
||||
background-image: linear-gradient(-45deg, #7f9ceb, #1d2f77);
|
||||
border-radius: 10px;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
padding: 60px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.banner-content {
|
||||
padding: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-header {
|
||||
font-size: 24px;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.banner-header {
|
||||
font-size: 36px;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.banner-image img {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
|
|
@ -45,4 +311,28 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner-button {
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
padding: 12px 20px;
|
||||
border-radius: 5px;
|
||||
border: 0px transparent solid;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ri-add-circle-fill {
|
||||
margin-right: 4px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.banner-button:hover {
|
||||
background-color: var(--grey);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,320 +1,55 @@
|
|||
import {
|
||||
generate_css,
|
||||
make_margin,
|
||||
generate_screen_css,
|
||||
generate_array_styles
|
||||
} from "../src/builderStore/generate_css.js"
|
||||
|
||||
describe("make_margin", () => {
|
||||
test("it should generate a valid rule", () => {
|
||||
expect(make_margin(["1", "1", "1", "1"])).toEqual("1px 1px 1px 1px")
|
||||
})
|
||||
|
||||
test("empty values should output 0", () => {
|
||||
expect(make_margin(["1", "1", "", ""])).toEqual("1px 1px 0px 0px")
|
||||
expect(make_margin(["1", "", "", "1"])).toEqual("1px 0px 0px 1px")
|
||||
expect(make_margin(["", "", "", ""])).toEqual("0px 0px 0px 0px")
|
||||
})
|
||||
})
|
||||
|
||||
describe("generate_css", () => {
|
||||
test("it should generate a valid css rule: grid-area", () => {
|
||||
expect(generate_css({ layout: { gridarea: ["", "", "", ""] } })).toEqual({
|
||||
layout: "",
|
||||
position: "",
|
||||
})
|
||||
|
||||
test("Check how partially empty arrays are handled", () => {
|
||||
expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"])
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: grid-gap", () => {
|
||||
expect(generate_css({ layout: { gap: "10" } })).toEqual({
|
||||
layout: "grid-gap: 10px;\ndisplay: grid;",
|
||||
position: "",
|
||||
})
|
||||
test("Check how array styles are output", () => {
|
||||
expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;")
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: column 1", () => {
|
||||
expect(generate_css({ position: { column: ["", ""] } })).toEqual({
|
||||
layout: "",
|
||||
position: "",
|
||||
})
|
||||
test("Check handling of an array with empty string values", () => {
|
||||
expect(generate_css({ padding: ["", "", "", ""] })).toBe("")
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: column 2", () => {
|
||||
expect(generate_css({ position: { column: ["1", ""] } })).toEqual({
|
||||
position: "grid-column-start: 1;",
|
||||
layout: "",
|
||||
})
|
||||
test("Check handling of an empty array", () => {
|
||||
expect(generate_css({ margin: [] })).toBe("")
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: column 3", () => {
|
||||
expect(generate_css({ position: { column: ["", "1"] } })).toEqual({
|
||||
position: "grid-column-end: 1;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: column 4", () => {
|
||||
expect(generate_css({ position: { column: ["1", "1"] } })).toEqual({
|
||||
position: "grid-column-start: 1;\ngrid-column-end: 1;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: row 1", () => {
|
||||
expect(generate_css({ position: { row: ["", ""] } })).toEqual({
|
||||
layout: "",
|
||||
position: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: row 2", () => {
|
||||
expect(generate_css({ position: { row: ["1", ""] } })).toEqual({
|
||||
position: "grid-row-start: 1;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: row 3", () => {
|
||||
expect(generate_css({ position: { row: ["", "1"] } })).toEqual({
|
||||
position: "grid-row-end: 1;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: row 4", () => {
|
||||
expect(generate_css({ position: { row: ["1", "1"] } })).toEqual({
|
||||
position: "grid-row-start: 1;\ngrid-row-end: 1;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: padding 1", () => {
|
||||
expect(
|
||||
generate_css({ position: { padding: ["1", "1", "1", "1"] } })
|
||||
).toEqual({
|
||||
position: "padding: 1px 1px 1px 1px;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: padding 2", () => {
|
||||
expect(generate_css({ position: { padding: ["1", "", "", "1"] } })).toEqual(
|
||||
{
|
||||
position: "padding: 1px 0px 0px 1px;",
|
||||
layout: "",
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: margin 1", () => {
|
||||
expect(
|
||||
generate_css({ position: { margin: ["1", "1", "1", "1"] } })
|
||||
).toEqual({
|
||||
position: "margin: 1px 1px 1px 1px;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: margin 2", () => {
|
||||
expect(generate_css({ position: { margin: ["1", "", "", "1"] } })).toEqual({
|
||||
position: "margin: 1px 0px 0px 1px;",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: z-index 1", () => {
|
||||
expect(generate_css({ position: { zindex: "" } })).toEqual({
|
||||
position: "",
|
||||
layout: "",
|
||||
})
|
||||
})
|
||||
|
||||
test("it should generate a valid css rule: z-index 2", () => {
|
||||
expect(generate_css({ position: { zindex: "1" } })).toEqual({
|
||||
position: "z-index: 1;",
|
||||
layout: "",
|
||||
})
|
||||
test("Check handling of valid font property", () => {
|
||||
expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;")
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
describe("generate_screen_css", () => {
|
||||
test("it should compile the css for a list of components", () => {
|
||||
const components = [
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 1,
|
||||
},
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 2,
|
||||
},
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 3,
|
||||
},
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 4,
|
||||
},
|
||||
]
|
||||
|
||||
const compiled = `.pos-1 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-1 {
|
||||
|
||||
}
|
||||
.pos-2 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-2 {
|
||||
|
||||
}
|
||||
.pos-3 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-3 {
|
||||
|
||||
}
|
||||
.pos-4 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-4 {
|
||||
|
||||
}`
|
||||
|
||||
expect(generate_screen_css(components)).toEqual(compiled)
|
||||
const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } }
|
||||
|
||||
test("Test generation of normal css styles", () => {
|
||||
expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}")
|
||||
})
|
||||
|
||||
test("it should compile the css for a list of components", () => {
|
||||
const components = [
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 1,
|
||||
_children: [
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 2,
|
||||
_children: [
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 3,
|
||||
_children: [
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 4,
|
||||
_children: [
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 5,
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 6,
|
||||
},
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 7,
|
||||
},
|
||||
{
|
||||
_styles: {
|
||||
layout: { gridarea: ["", "", "", ""] },
|
||||
position: { margin: ["1", "1", "1", "1"] },
|
||||
},
|
||||
_id: 8,
|
||||
},
|
||||
]
|
||||
const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } }
|
||||
|
||||
const compiled = `.pos-1 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-1 {
|
||||
|
||||
}
|
||||
.pos-2 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-2 {
|
||||
|
||||
}
|
||||
.pos-3 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-3 {
|
||||
|
||||
}
|
||||
.pos-4 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-4 {
|
||||
|
||||
}
|
||||
.pos-5 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-5 {
|
||||
|
||||
}
|
||||
.pos-6 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-6 {
|
||||
|
||||
}
|
||||
.pos-7 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-7 {
|
||||
|
||||
}
|
||||
.pos-8 {
|
||||
margin: 1px 1px 1px 1px;
|
||||
}
|
||||
.lay-8 {
|
||||
|
||||
}`
|
||||
|
||||
expect(generate_screen_css(components)).toEqual(compiled)
|
||||
test("Test generation of hover css styles", () => {
|
||||
expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}")
|
||||
})
|
||||
})
|
||||
|
||||
const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } }
|
||||
|
||||
test("Test generation of selection css styles", () => {
|
||||
expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}")
|
||||
})
|
||||
|
||||
const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } }
|
||||
|
||||
test.only("Testing handling of empty component styles", () => {
|
||||
expect(generate_screen_css([emptyComponent])).toBe("")
|
||||
})
|
||||
})
|
||||
|
|
@ -9,8 +9,10 @@
|
|||
"_id": 0,
|
||||
"type": "div",
|
||||
"_styles": {
|
||||
"layout": {},
|
||||
"position": {}
|
||||
"normal": {},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": ""
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
"_id": 1,
|
||||
"type": "div",
|
||||
"_styles": {
|
||||
"layout": {},
|
||||
"position": {}
|
||||
"normal": {},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": ""
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@
|
|||
"_id": 0,
|
||||
"type": "div",
|
||||
"_styles": {
|
||||
"layout": {},
|
||||
"position": {}
|
||||
"normal": {},
|
||||
"hover": {},
|
||||
"active": {},
|
||||
"selected": {}
|
||||
},
|
||||
"_code": ""
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import Orchestrator, { clientStrategy } from "./orchestrator";
|
|||
|
||||
|
||||
export const triggerWorkflow = api => ({ workflow }) => {
|
||||
console.log(workflow);
|
||||
const workflowOrchestrator = new Orchestrator(
|
||||
api,
|
||||
"inst_60dd510_700f7dc06735403e81d5af91072d7241"
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default class Orchestrator {
|
|||
// Execute a workflow from a running budibase app
|
||||
export const clientStrategy = {
|
||||
context: {},
|
||||
bindContextArgs: function(args) {
|
||||
bindContextArgs: function(args, api) {
|
||||
const mappedArgs = { ...args };
|
||||
|
||||
console.log("original args", args)
|
||||
|
|
@ -50,12 +50,16 @@ export const clientStrategy = {
|
|||
|
||||
// if the value is bound to state
|
||||
if (argValue.startsWith("$state")) {
|
||||
const path = argValue.match("$context.", "");
|
||||
// pass in the value from context
|
||||
mappedArgs[arg] = get(path, this.context);
|
||||
const path = argValue.replace("$state.", "");
|
||||
// pass in the value from state
|
||||
// TODO: not working
|
||||
mappedArgs[arg] = api.getState(path);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log(mappedArgs);
|
||||
|
||||
return Object.values(mappedArgs);
|
||||
},
|
||||
run: async function({ workflow, api, instanceId }) {
|
||||
|
|
@ -85,7 +89,7 @@ export const clientStrategy = {
|
|||
url: EXECUTE_WORKFLOW_URL,
|
||||
body: {
|
||||
action: block.actionId,
|
||||
args: block.args
|
||||
args: this.bindContextArgs(block.args, api)
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
|
|||
}
|
||||
}
|
||||
|
||||
htmlElement.classList.add(`lay-${treeNode.props._id}`)
|
||||
// htmlElement.classList.add(`lay-${treeNode.props._id}`)
|
||||
|
||||
const childNodes = []
|
||||
for (let childProps of treeNode.props._children) {
|
||||
|
|
|
|||
|
|
@ -35,8 +35,9 @@ export const prepareRenderComponent = ({
|
|||
thisNode.rootElement =
|
||||
htmlElement.children[htmlElement.children.length - 1]
|
||||
|
||||
let [componentName] = props._component.match(/[a-z]*$/)
|
||||
if (props._id && thisNode.rootElement) {
|
||||
thisNode.rootElement.classList.add(`pos-${props._id}`)
|
||||
thisNode.rootElement.classList.add(`${componentName}-${props._id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
packages/server/builder/assets/10-1.png
Normal file
BIN
packages/server/builder/assets/10-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
packages/server/builder/assets/banner-image.png
Normal file
BIN
packages/server/builder/assets/banner-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
31
packages/server/builder/assets/bb-logo.svg
Normal file
31
packages/server/builder/assets/bb-logo.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M117.33,128H10.67C4.78,128,0,123.22,0,117.33V10.67C0,4.78,4.78,0,10.67,0h106.67
|
||||
C123.22,0,128,4.78,128,10.67v106.67C128,123.22,123.22,128,117.33,128z"/>
|
||||
<g>
|
||||
<path class="st1" d="M75.94,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
|
||||
c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
|
||||
c-1.72,1.87-3.75,3.34-6.08,4.43C92.8,95.46,90.28,96,87.58,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H62.6V32H75.94z M92.74,75.5
|
||||
c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
|
||||
c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
|
||||
s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
|
||||
c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C92.51,77.77,92.74,76.66,92.74,75.5z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M34.67,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
|
||||
c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
|
||||
c-1.72,1.87-3.75,3.34-6.08,4.43C51.53,95.46,49.01,96,46.31,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H21.33V32H34.67z M51.47,75.5
|
||||
c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
|
||||
c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
|
||||
s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
|
||||
c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C51.24,77.77,51.47,76.66,51.47,75.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
BIN
packages/server/builder/assets/space.jpeg
Normal file
BIN
packages/server/builder/assets/space.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 241 KiB |
BIN
packages/server/builder/assets/space.jpg
Normal file
BIN
packages/server/builder/assets/space.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
|
|
@ -44,6 +44,7 @@
|
|||
"@budibase/client": "^0.0.32",
|
||||
"@budibase/core": "^0.0.32",
|
||||
"@koa/router": "^8.0.0",
|
||||
"@sendgrid/mail": "^7.1.1",
|
||||
"ajv": "^6.12.2",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"dotenv": "^8.2.0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
const sgMail = require('@sendgrid/mail');
|
||||
|
||||
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
|
||||
|
||||
module.exports = async function sendEmail(args) {
|
||||
|
||||
const msg = {
|
||||
to: args.to,
|
||||
from: args.from,
|
||||
subject: args.subject,
|
||||
text: args.text
|
||||
};
|
||||
|
||||
try {
|
||||
await sgMail.send(msg);
|
||||
return {
|
||||
success: true,
|
||||
err
|
||||
}
|
||||
} catch (err) {
|
||||
return {
|
||||
success: false,
|
||||
err
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@ exports.update = async function(ctx) {
|
|||
exports.fetch = async function(ctx) {
|
||||
const db = new CouchDB(ctx.params.instanceId)
|
||||
const response = await db.query(`database/by_type`, {
|
||||
type: "workflow",
|
||||
key: ["workflow"],
|
||||
include_docs: true,
|
||||
})
|
||||
ctx.body = response.rows.map(row => row.doc)
|
||||
|
|
|
|||
|
|
@ -194,6 +194,20 @@
|
|||
lodash "^4.17.13"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@budibase/client@^0.0.32":
|
||||
version "0.0.32"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
|
||||
integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
|
||||
dependencies:
|
||||
"@nx-js/compiler-util" "^2.0.0"
|
||||
bcryptjs "^2.4.3"
|
||||
deep-equal "^2.0.1"
|
||||
lodash "^4.17.15"
|
||||
lunr "^2.3.5"
|
||||
regexparam "^1.3.0"
|
||||
shortid "^2.2.8"
|
||||
svelte "^3.9.2"
|
||||
|
||||
"@budibase/core@^0.0.32":
|
||||
version "0.0.32"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
|
||||
|
|
@ -409,6 +423,30 @@
|
|||
resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
|
||||
integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
|
||||
|
||||
"@sendgrid/client@^7.1.1":
|
||||
version "7.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
|
||||
integrity sha512-V2BmOO81wHNmbTDwTJ07Olb9dWrj1G19xK4crwds68b9R0w05aOWDddZTvpn9mZnHwIJYqcZcBJuhdHDejuSHg==
|
||||
dependencies:
|
||||
"@sendgrid/helpers" "^7.0.1"
|
||||
axios "^0.19.2"
|
||||
|
||||
"@sendgrid/helpers@^7.0.1":
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@sendgrid/helpers/-/helpers-7.0.1.tgz#b97debc793ed3f9f56102e12c2a6d2bbbf0ffb78"
|
||||
integrity sha512-i/zsissq1upgdywtuJKysaplJJZC24GdtEKiJC1IRlXvBHzIjH4eU+rqUFO8h+hGji3UMURGgMFuLUXTUYvZ9w==
|
||||
dependencies:
|
||||
chalk "^2.0.1"
|
||||
deepmerge "^4.2.2"
|
||||
|
||||
"@sendgrid/mail@^7.1.1":
|
||||
version "7.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@sendgrid/mail/-/mail-7.1.1.tgz#26191594722d5961de1b61cd9c48fa9a69fd197b"
|
||||
integrity sha512-VXdJ9J6vBNMw+wMIGFRvms6EmV6pvoRHMWoLJGweHlsZDnvmK3rWUnnNaS3OdDQ3A8B5bMv2WKsEnHsMZ6iDUg==
|
||||
dependencies:
|
||||
"@sendgrid/client" "^7.1.1"
|
||||
"@sendgrid/helpers" "^7.0.1"
|
||||
|
||||
"@sindresorhus/is@^0.14.0":
|
||||
version "0.14.0"
|
||||
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
|
||||
|
|
@ -825,6 +863,11 @@ array-equal@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
|
||||
integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
|
||||
|
||||
array-filter@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
|
||||
integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
|
||||
|
||||
array-unique@^0.3.2:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
|
||||
|
|
@ -897,6 +940,13 @@ atomic-sleep@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
|
||||
integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
|
||||
|
||||
available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
|
||||
integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
|
||||
dependencies:
|
||||
array-filter "^1.0.0"
|
||||
|
||||
aws-sign2@~0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
|
||||
|
|
@ -907,6 +957,13 @@ aws4@^1.8.0:
|
|||
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
|
||||
integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
|
||||
|
||||
axios@^0.19.2:
|
||||
version "0.19.2"
|
||||
resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
|
||||
integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
|
||||
dependencies:
|
||||
follow-redirects "1.5.10"
|
||||
|
||||
babel-jest@^24.9.0:
|
||||
version "24.9.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
|
||||
|
|
@ -1567,6 +1624,13 @@ dateformat@^3.0.3:
|
|||
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
|
||||
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
|
||||
|
||||
debug@=3.1.0, debug@~3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
|
||||
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
|
||||
version "2.6.9"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
|
||||
|
|
@ -1588,13 +1652,6 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
|
|||
dependencies:
|
||||
ms "^2.1.1"
|
||||
|
||||
debug@~3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
|
||||
integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
|
||||
dependencies:
|
||||
ms "2.0.0"
|
||||
|
||||
decamelize@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
|
||||
|
|
@ -1612,6 +1669,26 @@ decompress-response@^3.3.0:
|
|||
dependencies:
|
||||
mimic-response "^1.0.0"
|
||||
|
||||
deep-equal@^2.0.1:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
|
||||
integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
|
||||
dependencies:
|
||||
es-abstract "^1.17.5"
|
||||
es-get-iterator "^1.1.0"
|
||||
is-arguments "^1.0.4"
|
||||
is-date-object "^1.0.2"
|
||||
is-regex "^1.0.5"
|
||||
isarray "^2.0.5"
|
||||
object-is "^1.1.2"
|
||||
object-keys "^1.1.1"
|
||||
object.assign "^4.1.0"
|
||||
regexp.prototype.flags "^1.3.0"
|
||||
side-channel "^1.0.2"
|
||||
which-boxed-primitive "^1.0.1"
|
||||
which-collection "^1.0.1"
|
||||
which-typed-array "^1.1.2"
|
||||
|
||||
deep-equal@~1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
|
||||
|
|
@ -1627,6 +1704,11 @@ deep-is@~0.1.3:
|
|||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
|
||||
integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
|
||||
|
||||
deepmerge@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
|
||||
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
|
||||
|
||||
defer-to-connect@^1.0.1:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
|
||||
|
|
@ -1965,7 +2047,7 @@ error-inject@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
|
||||
integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
|
||||
|
||||
es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
|
||||
es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
|
||||
version "1.17.5"
|
||||
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
|
||||
integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
|
||||
|
|
@ -1982,6 +2064,19 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
|
|||
string.prototype.trimleft "^2.1.1"
|
||||
string.prototype.trimright "^2.1.1"
|
||||
|
||||
es-get-iterator@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
|
||||
integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
|
||||
dependencies:
|
||||
es-abstract "^1.17.4"
|
||||
has-symbols "^1.0.1"
|
||||
is-arguments "^1.0.4"
|
||||
is-map "^2.0.1"
|
||||
is-set "^2.0.1"
|
||||
is-string "^1.0.5"
|
||||
isarray "^2.0.5"
|
||||
|
||||
es-to-primitive@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
|
||||
|
|
@ -2444,6 +2539,13 @@ flatted@^2.0.0:
|
|||
resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
|
||||
integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
|
||||
|
||||
follow-redirects@1.5.10:
|
||||
version "1.5.10"
|
||||
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
|
||||
integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
|
||||
dependencies:
|
||||
debug "=3.1.0"
|
||||
|
||||
for-in@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
|
||||
|
|
@ -2967,11 +3069,21 @@ is-accessor-descriptor@^1.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.0"
|
||||
|
||||
is-arguments@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
|
||||
integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
|
||||
|
||||
is-arrayish@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
|
||||
integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
|
||||
|
||||
is-bigint@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
|
||||
integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
|
||||
|
||||
is-binary-path@~2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
|
||||
|
|
@ -2979,6 +3091,11 @@ is-binary-path@~2.1.0:
|
|||
dependencies:
|
||||
binary-extensions "^2.0.0"
|
||||
|
||||
is-boolean-object@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
|
||||
integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
|
||||
|
||||
is-buffer@^1.1.5:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
|
||||
|
|
@ -3015,7 +3132,7 @@ is-data-descriptor@^1.0.0:
|
|||
dependencies:
|
||||
kind-of "^6.0.0"
|
||||
|
||||
is-date-object@^1.0.1:
|
||||
is-date-object@^1.0.1, is-date-object@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
|
||||
integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
|
||||
|
|
@ -3090,11 +3207,21 @@ is-installed-globally@^0.3.1:
|
|||
global-dirs "^2.0.1"
|
||||
is-path-inside "^3.0.1"
|
||||
|
||||
is-map@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
|
||||
integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
|
||||
|
||||
is-npm@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
|
||||
integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
|
||||
|
||||
is-number-object@^1.0.3:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
|
||||
integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
|
||||
|
||||
is-number@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
|
||||
|
|
@ -3131,11 +3258,21 @@ is-regex@^1.0.5:
|
|||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-set@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
|
||||
integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
|
||||
|
||||
is-stream@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
|
||||
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
|
||||
|
||||
is-string@^1.0.4, is-string@^1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
|
||||
integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
|
||||
|
||||
is-symbol@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
|
||||
|
|
@ -3152,11 +3289,31 @@ is-type-of@^1.0.0:
|
|||
is-class-hotfix "~0.0.6"
|
||||
isstream "~0.1.2"
|
||||
|
||||
is-typed-array@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
|
||||
integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
|
||||
dependencies:
|
||||
available-typed-arrays "^1.0.0"
|
||||
es-abstract "^1.17.4"
|
||||
foreach "^2.0.5"
|
||||
has-symbols "^1.0.1"
|
||||
|
||||
is-typedarray@^1.0.0, is-typedarray@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
|
||||
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
|
||||
|
||||
is-weakmap@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
|
||||
integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
|
||||
|
||||
is-weakset@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
|
||||
integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
|
||||
|
||||
is-windows@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
|
||||
|
|
@ -3182,6 +3339,11 @@ isarray@1.0.0, isarray@~1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
|
||||
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
|
||||
|
||||
isarray@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
|
||||
integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
|
||||
|
||||
isbinaryfile@^4.0.6:
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
|
||||
|
|
@ -4589,6 +4751,14 @@ object-inspect@^1.7.0:
|
|||
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
|
||||
integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
|
||||
|
||||
object-is@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
|
||||
integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
|
||||
dependencies:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.5"
|
||||
|
||||
object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
|
||||
|
|
@ -5310,6 +5480,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
|
|||
extend-shallow "^3.0.2"
|
||||
safe-regex "^1.1.0"
|
||||
|
||||
regexp.prototype.flags@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
|
||||
integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
|
||||
dependencies:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.0-next.1"
|
||||
|
||||
regexparam@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
|
||||
integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
|
||||
|
||||
regexpp@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
|
||||
|
|
@ -5638,6 +5821,14 @@ shortid@^2.2.8:
|
|||
dependencies:
|
||||
nanoid "^2.1.0"
|
||||
|
||||
side-channel@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
|
||||
integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
|
||||
dependencies:
|
||||
es-abstract "^1.17.0-next.1"
|
||||
object-inspect "^1.7.0"
|
||||
|
||||
signal-exit@^3.0.0, signal-exit@^3.0.2:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
|
||||
|
|
@ -6046,6 +6237,11 @@ supports-color@^7.1.0:
|
|||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
svelte@^3.9.2:
|
||||
version "3.22.3"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b"
|
||||
integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==
|
||||
|
||||
symbol-tree@^3.2.2:
|
||||
version "3.2.4"
|
||||
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
|
||||
|
|
@ -6526,11 +6722,44 @@ whatwg-url@^7.0.0:
|
|||
tr46 "^1.0.1"
|
||||
webidl-conversions "^4.0.2"
|
||||
|
||||
which-boxed-primitive@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
|
||||
integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
|
||||
dependencies:
|
||||
is-bigint "^1.0.0"
|
||||
is-boolean-object "^1.0.0"
|
||||
is-number-object "^1.0.3"
|
||||
is-string "^1.0.4"
|
||||
is-symbol "^1.0.2"
|
||||
|
||||
which-collection@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
|
||||
integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
|
||||
dependencies:
|
||||
is-map "^2.0.1"
|
||||
is-set "^2.0.1"
|
||||
is-weakmap "^2.0.1"
|
||||
is-weakset "^2.0.1"
|
||||
|
||||
which-module@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
|
||||
integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
|
||||
|
||||
which-typed-array@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
|
||||
integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
|
||||
dependencies:
|
||||
available-typed-arrays "^1.0.2"
|
||||
es-abstract "^1.17.5"
|
||||
foreach "^2.0.5"
|
||||
function-bind "^1.1.1"
|
||||
has-symbols "^1.0.1"
|
||||
is-typed-array "^1.1.3"
|
||||
|
||||
which@^1.2.9, which@^1.3.0:
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
"props": {
|
||||
"logoUrl": "string",
|
||||
"title": "string",
|
||||
"backgroundColor": "colour",
|
||||
"color": "colour",
|
||||
"backgroundColor": "string",
|
||||
"color": "string",
|
||||
"borderWidth": "string",
|
||||
"borderColor": "colour",
|
||||
"borderColor": "string",
|
||||
"borderStyle": "string"
|
||||
}
|
||||
},
|
||||
|
|
@ -23,35 +23,10 @@
|
|||
"name": "Button",
|
||||
"description": "an html <button />",
|
||||
"props": {
|
||||
"contentText": {
|
||||
"type": "string",
|
||||
"default": "Button"
|
||||
},
|
||||
"text": "string",
|
||||
"className": "string",
|
||||
"disabled": "bool",
|
||||
"onClick": "event",
|
||||
"background": "colour",
|
||||
"color": "colour",
|
||||
"border": "string",
|
||||
"padding": "string",
|
||||
"hoverColor": "string",
|
||||
"hoverBackground": "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"
|
||||
]
|
||||
}
|
||||
"onClick": "event"
|
||||
},
|
||||
"tags": [
|
||||
"layout"
|
||||
|
|
@ -167,58 +142,7 @@
|
|||
"children": false,
|
||||
"props": {
|
||||
"text": "string",
|
||||
"color": "colour",
|
||||
"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",
|
||||
"textAlign": {
|
||||
"type": "options",
|
||||
"default": "inline",
|
||||
"options": [
|
||||
"left",
|
||||
"center",
|
||||
"right"
|
||||
]
|
||||
},
|
||||
"verticalAlign": {
|
||||
"type": "options",
|
||||
"default": "inline",
|
||||
"options": [
|
||||
"top",
|
||||
"middle",
|
||||
"bottom"
|
||||
]
|
||||
},
|
||||
"formattingTag": {
|
||||
"type": "options",
|
||||
"default": "none",
|
||||
"options": [
|
||||
"none",
|
||||
"<b> - bold",
|
||||
"<strong> - important",
|
||||
"<i> - italic",
|
||||
"<em> - emphasized",
|
||||
"<mark> - marked text",
|
||||
"<small> - small",
|
||||
"<del> - deleted",
|
||||
"<ins> - inserted",
|
||||
"<sub> - subscript",
|
||||
"<sup> - superscript"
|
||||
]
|
||||
}
|
||||
"type": {"type": "string", "default": "none"}
|
||||
},
|
||||
"tags": [
|
||||
"div",
|
||||
|
|
@ -230,6 +154,7 @@
|
|||
"description": "A component that allows the user to input text.",
|
||||
"props": {
|
||||
"label": "string",
|
||||
"type": "string",
|
||||
"value": "string",
|
||||
"onchange": "event"
|
||||
}
|
||||
|
|
@ -259,7 +184,7 @@
|
|||
"props": {
|
||||
"icon": "string",
|
||||
"fontSize": "string",
|
||||
"color": "colour"
|
||||
"color": "string"
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
|
|
@ -328,8 +253,8 @@
|
|||
"url": "string",
|
||||
"openInNewTab": "bool",
|
||||
"text": "string",
|
||||
"color": "colour",
|
||||
"hoverColor": "colour",
|
||||
"color": "string",
|
||||
"hoverColor": "string",
|
||||
"underline": "bool",
|
||||
"fontSize": "string",
|
||||
"fontFamily": {
|
||||
|
|
@ -383,27 +308,8 @@
|
|||
"summary"
|
||||
],
|
||||
"default": "div"
|
||||
},
|
||||
"backgroundColor": "string",
|
||||
"color": "string",
|
||||
"borderWidth": "string",
|
||||
"borderColor": "string",
|
||||
"borderStyle": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
"none",
|
||||
"solid",
|
||||
"dotted",
|
||||
"dashed",
|
||||
"double",
|
||||
"groove",
|
||||
"ridge",
|
||||
"inset",
|
||||
"outset"
|
||||
],
|
||||
"default": "none"
|
||||
}
|
||||
},
|
||||
},
|
||||
"container": true,
|
||||
"tags": [
|
||||
"div",
|
||||
|
|
@ -416,7 +322,6 @@
|
|||
"description": "An HTML H1 - H6 tag",
|
||||
"props": {
|
||||
"className": "string",
|
||||
"color":"colour",
|
||||
"text": "string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
|
|
@ -429,21 +334,6 @@
|
|||
"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": []
|
||||
|
|
|
|||
|
|
@ -1,58 +1,15 @@
|
|||
<script>
|
||||
import { cssVars, createClasses } from "./cssVars"
|
||||
import { buildStyle } from "./buildStyle"
|
||||
export let className = "default"
|
||||
export let disabled = false
|
||||
export let contentText
|
||||
export let text
|
||||
export let onClick
|
||||
export let background
|
||||
export let color
|
||||
export let border
|
||||
export let padding
|
||||
export let hoverColor
|
||||
export let hoverBackground
|
||||
export let hoverBorder
|
||||
export let fontFamily
|
||||
|
||||
export let _bb
|
||||
let theButton
|
||||
let cssVariables
|
||||
let buttonStyles
|
||||
|
||||
let customHoverColorClass
|
||||
let customHoverBorderClass
|
||||
let customHoverBackClass
|
||||
|
||||
let customClasses = ""
|
||||
|
||||
$: if (_bb.props._children && _bb.props._children.length > 0)
|
||||
theButton && _bb.attachChildren(theButton)
|
||||
|
||||
$: {
|
||||
cssVariables = {
|
||||
hoverColor,
|
||||
hoverBorder,
|
||||
hoverBackground,
|
||||
background,
|
||||
color,
|
||||
border,
|
||||
}
|
||||
|
||||
buttonStyles = buildStyle({
|
||||
padding,
|
||||
"font-family": fontFamily,
|
||||
})
|
||||
|
||||
customClasses = createClasses({
|
||||
hoverColor,
|
||||
hoverBorder,
|
||||
hoverBackground,
|
||||
background,
|
||||
border,
|
||||
color,
|
||||
})
|
||||
}
|
||||
|
||||
const clickHandler = () => {
|
||||
_bb.call(onClick)
|
||||
}
|
||||
|
|
@ -60,15 +17,10 @@
|
|||
|
||||
<button
|
||||
bind:this={theButton}
|
||||
use:cssVars={cssVariables}
|
||||
class="{className}
|
||||
{customClasses}"
|
||||
class={className}
|
||||
disabled={disabled || false}
|
||||
on:click={clickHandler}
|
||||
style={buttonStyles}>
|
||||
{#if !_bb.props._children || _bb.props._children.length === 0}
|
||||
{contentText}
|
||||
{/if}
|
||||
on:click={clickHandler}>
|
||||
{#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,26 +4,12 @@
|
|||
export let className = ""
|
||||
export let onLoad
|
||||
export let type = "div"
|
||||
export let backgroundColor
|
||||
export let color
|
||||
export let borderWidth
|
||||
export let borderColor
|
||||
export let borderStyle
|
||||
export let _bb
|
||||
|
||||
let containerElement
|
||||
let hasLoaded
|
||||
let currentChildren
|
||||
|
||||
$: cssVariables = {
|
||||
backgroundColor,
|
||||
color,
|
||||
borderWidth,
|
||||
borderColor,
|
||||
borderStyle,
|
||||
}
|
||||
$: classes = `${createClasses(cssVariables)} ${className}`
|
||||
|
||||
$: {
|
||||
if (containerElement) {
|
||||
_bb.attachChildren(containerElement)
|
||||
|
|
@ -36,87 +22,29 @@
|
|||
</script>
|
||||
|
||||
{#if type === 'div'}
|
||||
<div
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<div bind:this={containerElement} />
|
||||
{:else if type === 'header'}
|
||||
<header
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<header bind:this={containerElement} />
|
||||
{:else if type === 'main'}
|
||||
<main
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<main bind:this={containerElement} />
|
||||
{:else if type === 'footer'}
|
||||
<footer
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<footer bind:this={containerElement} />
|
||||
{:else if type === 'aside'}
|
||||
<aside
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<aside bind:this={containerElement} />
|
||||
{:else if type === 'summary'}
|
||||
<summary
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<summary bind:this={containerElement} />
|
||||
{:else if type === 'details'}
|
||||
<details
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<details bind:this={containerElement} />
|
||||
{:else if type === 'article'}
|
||||
<article
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<article bind:this={containerElement} />
|
||||
{:else if type === 'nav'}
|
||||
<nav
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<nav bind:this={containerElement} />
|
||||
{:else if type === 'mark'}
|
||||
<mark
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<mark bind:this={containerElement} />
|
||||
{:else if type === 'figure'}
|
||||
<figure
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<figure bind:this={containerElement} />
|
||||
{:else if type === 'figcaption'}
|
||||
<figcaption
|
||||
class={classes}
|
||||
bind:this={containerElement}
|
||||
use:cssVars={cssVariables} />
|
||||
<figcaption bind:this={containerElement} />
|
||||
{:else if type === 'paragraph'}
|
||||
<p class={classes} bind:this={containerElement} use:cssVars={cssVariables} />
|
||||
<p bind:this={containerElement} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.backgroundColor {
|
||||
background-color: var(--backgroundColor);
|
||||
}
|
||||
|
||||
.color {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.borderColor {
|
||||
border-color: var(--borderColor);
|
||||
}
|
||||
|
||||
.borderWidth {
|
||||
border-width: var(--borderWidth);
|
||||
}
|
||||
|
||||
.borderStyle {
|
||||
border-style: var(--borderStyle);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,28 +2,25 @@
|
|||
import { buildStyle } from "./buildStyle.js"
|
||||
export let className = ""
|
||||
export let type
|
||||
export let _bb
|
||||
export let text = ""
|
||||
export let fontFamily = ""
|
||||
export let color = ""
|
||||
|
||||
export let _bb
|
||||
|
||||
let containerElement
|
||||
|
||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||
$: style = buildStyle({ "font-family": fontFamily, color })
|
||||
// $: console.log("HEADING", color)
|
||||
</script>
|
||||
|
||||
{#if type === 'h1'}
|
||||
<h1 class={className} {style} bind:this={containerElement}>{text}</h1>
|
||||
<h1 class={className} bind:this={containerElement}>{text}</h1>
|
||||
{:else if type === 'h2'}
|
||||
<h2 class={className} {style} bind:this={containerElement}>{text}</h2>
|
||||
<h2 class={className} bind:this={containerElement}>{text}</h2>
|
||||
{:else if type === 'h3'}
|
||||
<h3 class={className} {style} bind:this={containerElement}>{text}</h3>
|
||||
<h3 class={className} bind:this={containerElement}>{text}</h3>
|
||||
{:else if type === 'h4'}
|
||||
<h4 class={className} {style} bind:this={containerElement}>{text}</h4>
|
||||
<h4 class={className} bind:this={containerElement}>{text}</h4>
|
||||
{:else if type === 'h5'}
|
||||
<h5 class={className} {style} bind:this={containerElement}>{text}</h5>
|
||||
<h5 class={className} bind:this={containerElement}>{text}</h5>
|
||||
{:else if type === 'h6'}
|
||||
<h6 class={className} {style} bind:this={containerElement}>{text}</h6>
|
||||
<h6 class={className} bind:this={containerElement}>{text}</h6>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@
|
|||
export let url = ""
|
||||
export let text = ""
|
||||
export let openInNewTab = false
|
||||
export let color
|
||||
export let hoverColor
|
||||
export let underline = false
|
||||
export let fontFamily
|
||||
export let fontSize
|
||||
|
||||
export let _bb
|
||||
|
||||
|
|
@ -16,43 +11,12 @@
|
|||
|
||||
$: anchorElement && !text && _bb.attachChildren(anchorElement)
|
||||
$: target = openInNewTab ? "_blank" : "_self"
|
||||
$: cssVariables = {
|
||||
hoverColor,
|
||||
color,
|
||||
textDecoration: underline ? "underline" : "none",
|
||||
fontSize,
|
||||
fontFamily,
|
||||
}
|
||||
$: classes = createClasses(cssVariables)
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={url}
|
||||
bind:this={anchorElement}
|
||||
class={classes}
|
||||
{target}
|
||||
use:cssVars={cssVariables}>
|
||||
{text}
|
||||
</a>
|
||||
<a href={url} bind:this={anchorElement} {target}>{text}</a>
|
||||
|
||||
<style>
|
||||
.color {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.hoverColor:hover {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.textDecoration {
|
||||
text-decoration: var(--textDecoration);
|
||||
}
|
||||
|
||||
.fontSize {
|
||||
font-size: var(--fontSize);
|
||||
}
|
||||
|
||||
.fontFamily {
|
||||
font-family: var(--fontFamily);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,45 +4,35 @@
|
|||
export let text = ""
|
||||
export let className = ""
|
||||
|
||||
export let formattingTag = ""
|
||||
|
||||
export let fontFamily = ""
|
||||
export let fontSize = "1em"
|
||||
export let textAlign = ""
|
||||
export let verticalAlign = ""
|
||||
export let color = ""
|
||||
export let type = ""
|
||||
|
||||
export let _bb
|
||||
|
||||
const isTag = tag => (formattingTag || "").indexOf(tag) > -1
|
||||
|
||||
$: style = buildStyle({
|
||||
"font-size": fontSize,
|
||||
"font-family": fontFamily,
|
||||
color,
|
||||
})
|
||||
const isTag = tag => type === tag
|
||||
</script>
|
||||
|
||||
{#if isTag('none')}
|
||||
<span {style}>{text}</span>
|
||||
{:else if isTag('<b>')}
|
||||
<b class={className} {style}>{text}</b>
|
||||
{:else if isTag('<strong>')}
|
||||
<strong class={className} {style}>{text}</strong>
|
||||
{:else if isTag('<i>')}
|
||||
<i class={className} {style}>{text}</i>
|
||||
{:else if isTag('<em>')}
|
||||
<em class={className} {style}>{text}</em>
|
||||
{:else if isTag('<mark>')}
|
||||
<mark class={className} {style}>{text}</mark>
|
||||
{:else if isTag('<small>')}
|
||||
<small class={className} {style}>{text}</small>
|
||||
{:else if isTag('<del>')}
|
||||
<del class={className} {style}>{text}</del>
|
||||
{:else if isTag('<ins>')}
|
||||
<ins class={className} {style}>{text}</ins>
|
||||
{:else if isTag('<sub>')}
|
||||
<sub class={className} {style}>{text}</sub>
|
||||
{:else if isTag('<sup>')}
|
||||
<sup class={className} {style}>{text}</sup>
|
||||
{:else}{text}{/if}
|
||||
<span>{text}</span>
|
||||
{:else if isTag('bold')}
|
||||
<b class={className}>{text}</b>
|
||||
{:else if isTag('strong')}
|
||||
<strong class={className}>{text}</strong>
|
||||
{:else if isTag('italic')}
|
||||
<i class={className}>{text}</i>
|
||||
{:else if isTag('emphasis')}
|
||||
<em class={className}>{text}</em>
|
||||
{:else if isTag('mark')}
|
||||
<mark class={className}>{text}</mark>
|
||||
{:else if isTag('small')}
|
||||
<small class={className}>{text}</small>
|
||||
{:else if isTag('del')}
|
||||
<del class={className}>{text}</del>
|
||||
{:else if isTag('ins')}
|
||||
<ins class={className}>{text}</ins>
|
||||
{:else if isTag('sub')}
|
||||
<sub class={className}>{text}</sub>
|
||||
{:else if isTag('sup')}
|
||||
<sup class={className}>{text}</sup>
|
||||
{:else}
|
||||
<span>{text}</span>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Reference in a new issue