component preview with stylesheeets

This commit is contained in:
michael shanks 2019-08-20 08:24:07 +01:00
parent 573f274f89
commit 5f0d8ce638
9 changed files with 211 additions and 252 deletions

View File

@ -508,14 +508,6 @@ const removeComponentLibrary = store => lib => {
const addStylesheet = store => stylesheet => {
store.update(s => {
s.pages.stylesheets.push(stylesheet);
const styles = document.createElement('link');
styles.rel = 'stylesheet';
styles.type = 'text/css';
styles.media = 'screen';
styles.href = stylesheet;
document.getElementsByTagName('head')[0].appendChild(styles);
savePackage(store, s);
return s;
})
@ -554,14 +546,14 @@ const savePackage = (store, s) => {
hierarchy:s.hierarchy,
triggers:s.triggers,
actions: groupBy("name")(s.actions),
pages:s.pages,
mainUi: s.mainUi,
unauthenticatedUi: s.unauthenticatedUi
};
const data = {
appDefinition,
accessLevels:s.accessLevels
accessLevels:s.accessLevels,
pages:s.pages,
}
api.post(`/_builder/api/${s.appname}/appPackage`, data);

View File

@ -2,39 +2,57 @@
import { store } from "../builderStore";
import {
last,
split
split,
map,
join
} from "lodash/fp";
import { pipe } from "../common/core";
import { splitName } from "./pagesParsing/splitRootComponentName"
import { afterUpdate } from 'svelte';
let component;
let stylesheetLinks = "";
let componentHtml = "";
store.subscribe(s => {
const {componentName, libName} = splitName(
s.currentComponentInfo.rootComponent.name);
component = s.libraries[libName][componentName];
stylesheetLinks = pipe(s.pages.stylesheets, [
map(s => `<link rel="stylesheet" href="${s}"/>`),
join("\n")
])
});
afterUpdate(() => {
componentHtml = document.getElementById("comonent-container-mock").innerHTML
});
</script>
<div class="component-preview" >
<div class="component-container">
<iframe title="componentPreview">
<iframe title="componentPreview"
srcdoc={`<html>
<head>
{#each $store.pages.stylesheets as stylesheet}
<link rel="stylesheet" href="{stylesheet}"/>
{/each}
${stylesheetLinks}
</head>
<body>
<svelte:component this={component} {...$store.currentComponentInfo.fullProps}/>
${componentHtml}
</body>
</html>`}>
</iframe>
</div>
</div>
<div id="comonent-container-mock">
<svelte:component this={component} {...$store.currentComponentInfo.fullProps}/>
</div>
<style>
.component-preview {
@ -50,4 +68,9 @@ store.subscribe(s => {
grid-column-start: middle;
}
#comonent-container-mock {
position:fixed;
left: -2000px
}
</style>

View File

@ -74,7 +74,10 @@
}
],
"actions": {
"output_to_file": [
"undefined": [
[
[
[
{
"name": "output_to_file",
"behaviourSource": "main",
@ -82,27 +85,8 @@
"initialOptions": {}
}
]
},
"pages": {
"main": {
"index": {},
"appBody": "./main.app.json"
},
"unauthenticated": {
"index": {
"_component": "budibase-components/indexHtml",
"title": "Test App 1 - Login",
"customScripts": [
"MyCustomComponents.js"
]
},
"appBody": "./unauthenticated.app.json"
},
"componentLibraries": [
"./standard-components"
],
"stylesheets": [
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
]
]
},
"mainUi": {},

View File

@ -3,7 +3,7 @@
"description": "",
"inherits": "./standard-components/button",
"props": {
"className": "btn btn-secondary",
"className": "btn btn-primary",
"_component": "Primary Button",
"disabled": false
},

View File

@ -1,20 +1,22 @@
{
"main" : {
"index" : {
"main": {
"index": {},
"appBody": "./main.app.json"
},
"appBody" : "./main.app.json"
},
"unauthenticated" : {
"index" : {
"unauthenticated": {
"index": {
"_component": "budibase-components/indexHtml",
"title": "Test App 1 - Login",
"customScripts": [
"MyCustomComponents.js"
]
},
"appBody" : "./unauthenticated.app.json"
"appBody": "./unauthenticated.app.json"
},
"componentLibraries": ["./standard-components"],
"stylesheets": []
"componentLibraries": [
"./standard-components"
],
"stylesheets": [
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
]
}

View File

@ -2,38 +2,39 @@ main.svelte-j8mzr7{height:100%;width:100%;font-family:"Lato", Helvetica, Arial,
.root.svelte-e4n7zy{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-e4n7zy{display:inline-block;margin:auto}.logo.svelte-e4n7zy{width:300px;margin-bottom:40px}.root.svelte-e4n7zy .option{width:250px}.app-link.svelte-e4n7zy{margin-top:10px;display:block}
.root.svelte-i0dstr{height:100%}.content.svelte-i0dstr{position:fixed;height:100%;background-color:var(--white);margin:0}
.border-normal.svelte-7rfkdx{border-radius:var(--borderradiusall)}.border-left.svelte-7rfkdx{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-7rfkdx{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-7rfkdx{border-radius:0}button.svelte-7rfkdx{border-style:solid;padding:7px 15px;cursor:pointer}.primary.svelte-7rfkdx{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-7rfkdx:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-7rfkdx:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-7rfkdx:hover{background-color:var(--primary10)}.primary-outline.svelte-7rfkdx:pressed{background-color:var(--primary25)}.secondary.svelte-7rfkdx{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-7rfkdx:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-7rfkdx:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-7rfkdx:hover{background-color:var(--secondary10)}.secondary-outline.svelte-7rfkdx:pressed{background-color:var(--secondary25)}.success.svelte-7rfkdx{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-7rfkdx:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-7rfkdx:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-7rfkdx:hover{background-color:var(--success10)}.success-outline.svelte-7rfkdx:pressed{background-color:var(--success25)}.deletion.svelte-7rfkdx{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-7rfkdx:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-7rfkdx:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-7rfkdx:hover{background-color:var(--deletion10)}.deletion-outline.svelte-7rfkdx:pressed{background-color:var(--deletion25)}
.root.svelte-ui57a{display:flex;height:100%;position:relative}.hierarchy.svelte-ui57a{flex:0 1 auto;background-color:var(--primary10);overflow-y:auto;height:100%}.node-container.svelte-ui57a{flex:1 1 auto;display:flex;flex-direction:column}.actions-header.svelte-ui57a{flex:0 1 auto}.node-view.svelte-ui57a{overflow-y:auto;flex:1 1 auto}.hierarchy-title-row.svelte-ui57a{padding:15px 7px;font-size:11pt;display:flex;font-weight:bold}.hierarchy-title.svelte-ui57a{flex:auto 1 1}
.nav.svelte-lgepe1{height:100%;position:fixed;left:0px;background-color:var(--secondary100);color:var(--darkslate)}.nav.svelte-lgepe1>img.svelte-lgepe1{width:100%;margin-bottom:30px;margin-top:5px;margin-left:0px}
h4.svelte-o0id5a{margin-top:20px}
.root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
.nav.svelte-lgepe1{height:100%;position:fixed;left:0px;background-color:var(--secondary100);color:var(--darkslate)}.nav.svelte-lgepe1>img.svelte-lgepe1{width:100%;margin-bottom:30px;margin-top:5px;margin-left:0px}
.root.svelte-ui57a{display:flex;height:100%;position:relative}.hierarchy.svelte-ui57a{flex:0 1 auto;background-color:var(--primary10);overflow-y:auto;height:100%}.node-container.svelte-ui57a{flex:1 1 auto;display:flex;flex-direction:column}.actions-header.svelte-ui57a{flex:0 1 auto}.node-view.svelte-ui57a{overflow-y:auto;flex:1 1 auto}.hierarchy-title-row.svelte-ui57a{padding:15px 7px;font-size:11pt;display:flex;font-weight:bold}.hierarchy-title.svelte-ui57a{flex:auto 1 1}
.root.svelte-zzs4qg{padding:10px}
.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
.dropdown-background.svelte-179p8ge{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-179p8ge{cursor:pointer;z-index:1}.dropdown-content.svelte-179p8ge{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-179p8ge:not(:focus){display:none}.action-row.svelte-179p8ge{padding:7px 10px;cursor:pointer}.action-row.svelte-179p8ge:hover{background-color:var(--primary100);color:var(--white)}
.root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
.nav-item.svelte-5cf6ht{padding:0px 5px;display:block;padding:10px;color:var(--slate);cursor:pointer}.inner.svelte-5cf6ht{padding:0px 20px 10px 0px;display:inline-block;width:100%}.nav-item.svelte-5cf6ht:hover{background-color:var(--primary25)}.icon.svelte-5cf6ht{font-size:0.9em;display:inline-block;position:relative;top:5px;margin-right:5px;width:100%}.active.svelte-5cf6ht>div.svelte-5cf6ht{background-color:var(--primary10);color:var(--secondary100)}.active.svelte-5cf6ht>div.svelte-5cf6ht:hover{background-color:var(--slate);color:var(--secondary100)}.active.svelte-5cf6ht{background-color:white}
.root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
.root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
.component-preview.svelte-1d56h9p{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1d56h9p{grid-row-start:middle;grid-column-start:middle}#comonent-container-mock.svelte-1d56h9p{position:fixed;left:-2000px
}
.root.svelte-xai2hc{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-xai2hc{padding:0px 5px 0px 10px}.title.svelte-xai2hc{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-xai2hc>div.svelte-xai2hc:nth-child(2){grid-column-start:actions}.section-header.svelte-xai2hc{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-xai2hc{vertical-align:middle;margin-top:20px}
button.svelte-4po3k2{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-4po3k2:hover{color:var(--hovercolor)}button.svelte-4po3k2:active{outline:none}
.nav-item.svelte-5cf6ht{padding:0px 5px;display:block;padding:10px;color:var(--slate);cursor:pointer}.inner.svelte-5cf6ht{padding:0px 20px 10px 0px;display:inline-block;width:100%}.nav-item.svelte-5cf6ht:hover{background-color:var(--primary25)}.icon.svelte-5cf6ht{font-size:0.9em;display:inline-block;position:relative;top:5px;margin-right:5px;width:100%}.active.svelte-5cf6ht>div.svelte-5cf6ht{background-color:var(--primary10);color:var(--secondary100)}.active.svelte-5cf6ht>div.svelte-5cf6ht:hover{background-color:var(--slate);color:var(--secondary100)}.active.svelte-5cf6ht{background-color:white}
.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
h1.svelte-2ukyrk{font-size:1.2em}
.dropdown-background.svelte-179p8ge{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-179p8ge{cursor:pointer;z-index:1}.dropdown-content.svelte-179p8ge{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-179p8ge:not(:focus){display:none}.action-row.svelte-179p8ge{padding:7px 10px;cursor:pointer}.action-row.svelte-179p8ge:hover{background-color:var(--primary100);color:var(--white)}
.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
.section-container.svelte-1t0x31f{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-1t0x31f:nth-child(1){margin-bottom:15px}.row-text.svelte-1t0x31f{margin-right:15px;color:var(--primary100)}input.svelte-1t0x31f{margin-right:15px}p.svelte-1t0x31f>span.svelte-1t0x31f{margin-left:30px}.header.svelte-1t0x31f{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(1){grid-column-start:title}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(2){grid-column-start:icon}
.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
.root.svelte-d6wwkb{display:flex}.root.svelte-d6wwkb:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-d6wwkb:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-d6wwkb:not(:first-child):not(:last-child){border-radius:0}
.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
.error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
.root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
.title.svelte-1pp53c5{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-1pp53c5>span.svelte-1pp53c5{margin-left:10px}
.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
.component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
input.svelte-66516k{margin-right:7px}
.title.svelte-1pp53c5{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-1pp53c5>span.svelte-1pp53c5{margin-left:10px}
textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
.error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
textarea.svelte-1wfv4cc{width:300px;height:200px}
input.svelte-66516k{margin-right:7px}
.root.svelte-woqcuf{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(2){grid-column-start:actions}.selectedname.svelte-woqcuf{font-weight:bold;color:var(--secondary)}
.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
.component-preview.svelte-1rf8xuh{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1rf8xuh{grid-row-start:middle;grid-column-start:middle}
.section-container.svelte-1t0x31f{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-1t0x31f:nth-child(1){margin-bottom:15px}.row-text.svelte-1t0x31f{margin-right:15px;color:var(--primary100)}input.svelte-1t0x31f{margin-right:15px}p.svelte-1t0x31f>span.svelte-1t0x31f{margin-left:30px}.header.svelte-1t0x31f{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(1){grid-column-start:title}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(2){grid-column-start:icon}
textarea.svelte-1wfv4cc{width:300px;height:200px}
/*# sourceMappingURL=bundle.css.map */

File diff suppressed because one or more lines are too long

View File

@ -256,6 +256,9 @@
function onMount(fn) {
get_current_component().$$.on_mount.push(fn);
}
function afterUpdate(fn) {
get_current_component().$$.after_update.push(fn);
}
// TODO figure out if we still want to support
// shorthand events, or if we want to implement
// a real bubbling mechanism
@ -28770,14 +28773,6 @@
const addStylesheet = store => stylesheet => {
store.update(s => {
s.pages.stylesheets.push(stylesheet);
const styles = document.createElement('link');
styles.rel = 'stylesheet';
styles.type = 'text/css';
styles.media = 'screen';
styles.href = stylesheet;
document.getElementsByTagName('head')[0].appendChild(styles);
savePackage(store, s);
return s;
});
@ -28816,14 +28811,14 @@
hierarchy:s.hierarchy,
triggers:s.triggers,
actions: fp_45("name")(s.actions),
pages:s.pages,
mainUi: s.mainUi,
unauthenticatedUi: s.unauthenticatedUi
};
const data = {
appDefinition,
accessLevels:s.accessLevels
accessLevels:s.accessLevels,
pages:s.pages,
};
api$1.post(`/_builder/api/${s.appname}/appPackage`, data);
@ -56900,52 +56895,8 @@
const file$w = "src\\userInterface\\CurrentItemPreview.svelte";
function get_each_context$b(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.stylesheet = list[i];
return child_ctx;
}
// (26:20) {#each $store.pages.stylesheets as stylesheet}
function create_each_block$b(ctx) {
var link, link_href_value;
return {
c: function create() {
link = element("link");
attr(link, "rel", "stylesheet");
attr(link, "href", link_href_value = ctx.stylesheet);
add_location(link, file$w, 26, 20, 665);
},
m: function mount(target, anchor) {
insert(target, link, anchor);
},
p: function update(changed, ctx) {
if ((changed.$store) && link_href_value !== (link_href_value = ctx.stylesheet)) {
attr(link, "href", link_href_value);
}
},
d: function destroy(detaching) {
if (detaching) {
detach(link);
}
}
};
}
function create_fragment$v(ctx) {
var div1, div0, iframe, head, t, body, current;
var each_value = ctx.$store.pages.stylesheets;
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$b(get_each_context$b(ctx, each_value, i));
}
var div1, div0, iframe, iframe_srcdoc_value, t, div2, current;
var switch_instance_spread_levels = [
ctx.$store.currentComponentInfo.fullProps
@ -56973,23 +56924,27 @@
div1 = element("div");
div0 = element("div");
iframe = element("iframe");
head = element("head");
for (var i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}
t = space();
body = element("body");
div2 = element("div");
if (switch_instance) switch_instance.$$.fragment.c();
add_location(head, file$w, 24, 16, 569);
add_location(body, file$w, 29, 16, 781);
attr(iframe, "title", "componentPreview");
add_location(iframe, file$w, 22, 8, 515);
attr(div0, "class", "component-container svelte-1rf8xuh");
add_location(div0, file$w, 21, 4, 472);
attr(div1, "class", "component-preview svelte-1rf8xuh");
add_location(div1, file$w, 20, 0, 434);
attr(iframe, "srcdoc", iframe_srcdoc_value = `<html>
<head>
${ctx.stylesheetLinks}
</head>
<body>
${ctx.componentHtml}
</body>
</html>`);
add_location(iframe, file$w, 38, 8, 881);
attr(div0, "class", "component-container svelte-1d56h9p");
add_location(div0, file$w, 37, 4, 838);
attr(div1, "class", "component-preview svelte-1d56h9p");
add_location(div1, file$w, 36, 0, 800);
attr(div2, "id", "comonent-container-mock");
attr(div2, "class", "svelte-1d56h9p");
add_location(div2, file$w, 52, 0, 1195);
},
l: function claim(nodes) {
@ -57000,42 +56955,27 @@
insert(target, div1, anchor);
append(div1, div0);
append(div0, iframe);
append(iframe, head);
for (var i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(head, null);
}
append(iframe, t);
append(iframe, body);
insert(target, t, anchor);
insert(target, div2, anchor);
if (switch_instance) {
mount_component(switch_instance, body, null);
mount_component(switch_instance, div2, null);
}
current = true;
},
p: function update(changed, ctx) {
if (changed.$store) {
each_value = ctx.$store.pages.stylesheets;
if ((!current || changed.stylesheetLinks || changed.componentHtml) && iframe_srcdoc_value !== (iframe_srcdoc_value = `<html>
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$b(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block$b(child_ctx);
each_blocks[i].c();
each_blocks[i].m(head, null);
}
}
for (; i < each_blocks.length; i += 1) {
each_blocks[i].d(1);
}
each_blocks.length = each_value.length;
<head>
${ctx.stylesheetLinks}
</head>
<body>
${ctx.componentHtml}
</body>
</html>`)) {
attr(iframe, "srcdoc", iframe_srcdoc_value);
}
var switch_instance_changes = changed.$store ? get_spread_update(switch_instance_spread_levels, [
@ -57057,7 +56997,7 @@
switch_instance.$$.fragment.c();
transition_in(switch_instance.$$.fragment, 1);
mount_component(switch_instance, body, null);
mount_component(switch_instance, div2, null);
} else {
switch_instance = null;
}
@ -57083,10 +57023,10 @@
d: function destroy(detaching) {
if (detaching) {
detach(div1);
detach(t);
detach(div2);
}
destroy_each(each_blocks, detaching);
if (switch_instance) destroy_component(switch_instance);
}
};
@ -57101,15 +57041,32 @@
let component;
let stylesheetLinks = "";
let componentHtml = "";
store.subscribe(s => {
const {componentName, libName} = splitName(
s.currentComponentInfo.rootComponent.name);
$$invalidate('component', component = s.libraries[libName][componentName]);
$$invalidate('stylesheetLinks', stylesheetLinks = pipe(s.pages.stylesheets, [
fp_7(s => `<link rel="stylesheet" href="${s}"/>`),
fp_39("\n")
]));
});
return { component, $store };
afterUpdate(() => {
$$invalidate('componentHtml', componentHtml = document.getElementById("comonent-container-mock").innerHTML);
});
return {
component,
stylesheetLinks,
componentHtml,
$store
};
}
class CurrentItemPreview extends SvelteComponentDev {
@ -57141,7 +57098,7 @@
const file$x = "src\\userInterface\\SettingsView.svelte";
function get_each_context$c(ctx, list, i) {
function get_each_context$b(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.stylesheet = list[i];
return child_ctx;
@ -57259,7 +57216,7 @@
}
// (91:16) {#each $store.pages.stylesheets as stylesheet}
function create_each_block$c(ctx) {
function create_each_block$b(ctx) {
var div, span, t0_value = ctx.stylesheet, t0, t1, t2, current;
function click_handler_1() {
@ -57364,7 +57321,7 @@
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$c(get_each_context$c(ctx, each_value, i));
each_blocks[i] = create_each_block$b(get_each_context$b(ctx, each_value, i));
}
const out_1 = i => transition_out(each_blocks[i], 1, 1, () => {
@ -57536,13 +57493,13 @@
each_value = ctx.$store.pages.stylesheets;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$c(ctx, each_value, i);
const child_ctx = get_each_context$b(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
transition_in(each_blocks[i], 1);
} else {
each_blocks[i] = create_each_block$c(child_ctx);
each_blocks[i] = create_each_block$b(child_ctx);
each_blocks[i].c();
transition_in(each_blocks[i], 1);
each_blocks[i].m(div4, null);
@ -58108,7 +58065,7 @@
const file$z = "src\\actionsAndTriggers\\ActionView.svelte";
function get_each_context$d(ctx, list, i) {
function get_each_context$c(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.option = list[i];
return child_ctx;
@ -58136,7 +58093,7 @@
}
// (89:12) {#each initialOptions as option}
function create_each_block$d(ctx) {
function create_each_block$c(ctx) {
var span1, t0_value = ctx.option.key, t0, t1, t2_value = ctx.option.value, t2, t3, span0, raw_value = getIcon("trash-2"), dispose;
function click_handler() {
@ -58374,7 +58331,7 @@
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$d(get_each_context$d(ctx, each_value, i));
each_blocks[i] = create_each_block$c(get_each_context$c(ctx, each_value, i));
}
var buttongroup = new ButtonGroup({
@ -58519,12 +58476,12 @@
each_value = ctx.initialOptions;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$d(ctx, each_value, i);
const child_ctx = get_each_context$c(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block$d(child_ctx);
each_blocks[i] = create_each_block$c(child_ctx);
each_blocks[i].c();
each_blocks[i].m(div1, null);
}
@ -58764,7 +58721,7 @@
const file$A = "src\\actionsAndTriggers\\Actions.svelte";
function get_each_context$e(ctx, list, i) {
function get_each_context$d(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.action = list[i];
return child_ctx;
@ -58802,7 +58759,7 @@
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$e(get_each_context$e(ctx, each_value, i));
each_blocks[i] = create_each_block$d(get_each_context$d(ctx, each_value, i));
}
return {
@ -58867,12 +58824,12 @@
each_value = ctx.$store.actions;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$e(ctx, each_value, i);
const child_ctx = get_each_context$d(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block$e(child_ctx);
each_blocks[i] = create_each_block$d(child_ctx);
each_blocks[i].c();
each_blocks[i].m(tbody, null);
}
@ -58896,7 +58853,7 @@
}
// (54:8) {#each $store.actions as action}
function create_each_block$e(ctx) {
function create_each_block$d(ctx) {
var tr, td0, t0_value = ctx.action.name, t0, t1, td1, t2_value = ctx.action.behaviourSource, t2, t3, td2, t4_value = ctx.action.behaviourName, t4, t5, td3, raw0_value = ctx.getDefaultOptionsHtml(ctx.action.initialOptions), t6, td4, span0, raw1_value = getIcon("edit"), t7, span1, raw2_value = getIcon("trash"), t8, dispose;
function click_handler() {
@ -59806,7 +59763,7 @@
const file$C = "src\\actionsAndTriggers\\Triggers.svelte";
function get_each_context$f(ctx, list, i) {
function get_each_context$e(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.trigger = list[i];
return child_ctx;
@ -59844,7 +59801,7 @@
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$f(get_each_context$f(ctx, each_value, i));
each_blocks[i] = create_each_block$e(get_each_context$e(ctx, each_value, i));
}
return {
@ -59909,12 +59866,12 @@
each_value = ctx.$store.triggers;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$f(ctx, each_value, i);
const child_ctx = get_each_context$e(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block$f(child_ctx);
each_blocks[i] = create_each_block$e(child_ctx);
each_blocks[i].c();
each_blocks[i].m(tbody, null);
}
@ -59938,7 +59895,7 @@
}
// (44:8) {#each $store.triggers as trigger}
function create_each_block$f(ctx) {
function create_each_block$e(ctx) {
var tr, td0, t0_value = ctx.trigger.eventName, t0, t1, td1, t2_value = ctx.trigger.actionName, t2, t3, td2, t4_value = ctx.trigger.condition, t4, t5, td3, t6_value = ctx.trigger.optionsCreator, t6, t7, td4, span0, raw0_value = getIcon("edit"), t8, span1, raw1_value = getIcon("trash"), t9, dispose;
function click_handler() {
@ -60710,14 +60667,14 @@
const file$E = "src\\accessLevels\\AccessLevelView.svelte";
function get_each_context$g(ctx, list, i) {
function get_each_context$f(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.permission = list[i];
return child_ctx;
}
// (79:8) {#each permissionMatrix as permission}
function create_each_block$g(ctx) {
function create_each_block$f(ctx) {
var div, t, current;
var checkbox = new Checkbox({
@ -60919,7 +60876,7 @@
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$g(get_each_context$g(ctx, each_value, i));
each_blocks[i] = create_each_block$f(get_each_context$f(ctx, each_value, i));
}
const out = i => transition_out(each_blocks[i], 1, 1, () => {
@ -60991,13 +60948,13 @@
each_value = ctx.permissionMatrix;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$g(ctx, each_value, i);
const child_ctx = get_each_context$f(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
transition_in(each_blocks[i], 1);
} else {
each_blocks[i] = create_each_block$g(child_ctx);
each_blocks[i] = create_each_block$f(child_ctx);
each_blocks[i].c();
transition_in(each_blocks[i], 1);
each_blocks[i].m(form, null);
@ -61247,7 +61204,7 @@
const file$F = "src\\accessLevels\\AccessLevelsRoot.svelte";
function get_each_context$h(ctx, list, i) {
function get_each_context$g(ctx, list, i) {
const child_ctx = Object.create(ctx);
child_ctx.level = list[i];
return child_ctx;
@ -61355,7 +61312,7 @@
var each_blocks = [];
for (var i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block$h(get_each_context$h(ctx, each_value, i));
each_blocks[i] = create_each_block$g(get_each_context$g(ctx, each_value, i));
}
return {
@ -61408,12 +61365,12 @@
each_value = ctx.$store.accessLevels;
for (var i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context$h(ctx, each_value, i);
const child_ctx = get_each_context$g(ctx, each_value, i);
if (each_blocks[i]) {
each_blocks[i].p(changed, child_ctx);
} else {
each_blocks[i] = create_each_block$h(child_ctx);
each_blocks[i] = create_each_block$g(child_ctx);
each_blocks[i].c();
each_blocks[i].m(tbody, null);
}
@ -61437,7 +61394,7 @@
}
// (68:8) {#each $store.accessLevels as level}
function create_each_block$h(ctx) {
function create_each_block$g(ctx) {
var tr, td0, t0_value = ctx.level.name, t0, t1, td1, t2_value = ctx.getPermissionsString(ctx.level.permissions), t2, t3, td2, span0, raw0_value = getIcon("edit"), t4, span1, raw1_value = getIcon("trash"), t5, dispose;
function click_handler() {

File diff suppressed because one or more lines are too long