48 builder frontend 2 (#70)
* Implement collapsing component hierarchy. * Save screen when adding new components. * Allow creation of nested child components. * Fix level-based indentation of hierarchy. * Rename updateComponentProps to setComponentProps * Save layout information to the disk. * Cleanup: switch to autosubscriptions to prevent memory leaks, remove unused imports. * Remove unused css. * Fix incorrect subscription.
This commit is contained in:
pngwn
Michael Shanks
parent
6cb523478d
commit
6aa6c4d433
24 changed files with 1022 additions and 1208 deletions
|
|
@ -4,7 +4,7 @@ import {
|
|||
import {
|
||||
filter, cloneDeep, sortBy,
|
||||
map, last, keys, concat, keyBy,
|
||||
find, isEmpty, reduce, values
|
||||
find, isEmpty, reduce, values, isEqual
|
||||
} from "lodash/fp";
|
||||
import {
|
||||
pipe, getNode, validate,
|
||||
|
|
@ -93,8 +93,8 @@ export const getStore = () => {
|
|||
store.createGeneratedComponents = createGeneratedComponents(store);
|
||||
store.addChildComponent = addChildComponent(store);
|
||||
store.selectComponent = selectComponent(store);
|
||||
store.updateComponentProp = updateComponentProp(store);
|
||||
|
||||
store.setComponentProp = setComponentProp(store);
|
||||
store.setComponentStyle = setComponentStyle(store);
|
||||
return store;
|
||||
}
|
||||
|
||||
|
|
@ -456,6 +456,10 @@ const _saveScreen = (store, s, screen) => {
|
|||
return s;
|
||||
}
|
||||
|
||||
const _save = (appname, screen, store, s) =>
|
||||
api.post(`/_builder/api/${appname}/screen`, screen)
|
||||
.then(() => savePackage(store, s));
|
||||
|
||||
const createScreen = store => (screenName, layoutComponentName) => {
|
||||
store.update(s => {
|
||||
const newComponentInfo = getNewComponentInfo(
|
||||
|
|
@ -597,8 +601,6 @@ const addComponentLibrary = store => async lib => {
|
|||
|
||||
return s;
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
const removeComponentLibrary = store => lib => {
|
||||
|
|
@ -701,17 +703,31 @@ const addChildComponent = store => component => {
|
|||
const newComponent = getNewComponentInfo(
|
||||
s.components, component);
|
||||
|
||||
const children = s.currentFrontEndItem.props._children;
|
||||
let children = s.currentComponentInfo.component ?
|
||||
s.currentComponentInfo.component.props._children :
|
||||
s.currentComponentInfo._children;
|
||||
|
||||
const component_definition = Object.assign(
|
||||
cloneDeep(newComponent.fullProps), {
|
||||
_component: component,
|
||||
_layout: {}
|
||||
})
|
||||
|
||||
s.currentFrontEndItem.props._children =
|
||||
children ?
|
||||
children.concat(component_definition) :
|
||||
[component_definition];
|
||||
if (children) {
|
||||
if (s.currentComponentInfo.component) {
|
||||
s.currentComponentInfo.component.props._children = children.concat(component_definition);
|
||||
} else {
|
||||
s.currentComponentInfo._children = children.concat(component_definition)
|
||||
}
|
||||
} else {
|
||||
if (s.currentComponentInfo.component) {
|
||||
s.currentComponentInfo.component.props._children = [component_definition];
|
||||
} else {
|
||||
s.currentComponentInfo._children = [component_definition]
|
||||
}
|
||||
}
|
||||
|
||||
_saveScreen(store, s, s.currentFrontEndItem);
|
||||
|
||||
return s;
|
||||
})
|
||||
|
|
@ -725,7 +741,7 @@ const selectComponent = store => component => {
|
|||
|
||||
}
|
||||
|
||||
const updateComponentProp = store => (name, value) => {
|
||||
const setComponentProp = store => (name, value) => {
|
||||
store.update(s => {
|
||||
const current_component = s.currentComponentInfo;
|
||||
s.currentComponentInfo[name] = value;
|
||||
|
|
@ -733,5 +749,18 @@ const updateComponentProp = store => (name, value) => {
|
|||
s.currentComponentInfo = current_component;
|
||||
return s;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const setComponentStyle = store => (name, value) => {
|
||||
store.update(s => {
|
||||
if (!s.currentComponentInfo._layout) {
|
||||
s.currentComponentInfo._layout = {};
|
||||
}
|
||||
s.currentComponentInfo._layout[name] = value;
|
||||
|
||||
// save without messing with the store
|
||||
_save(s.appname, s.currentFrontEndItem, store, s)
|
||||
|
||||
return s;
|
||||
})
|
||||
}
|
||||
|
|
|
|||
4
packages/builder/src/common/Icons/ArrowDown.svelte
Normal file
4
packages/builder/src/common/Icons/ArrowDown.svelte
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path fill="currentColor" d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 228 B |
|
|
@ -3,3 +3,4 @@ export { default as PaintIcon } from './Paint.svelte';
|
|||
export { default as TerminalIcon } from './Terminal.svelte';
|
||||
export { default as InputIcon } from './Input.svelte';
|
||||
export { default as ImageIcon } from './Image.svelte';
|
||||
export { default as ArrowDownIcon } from './ArrowDown.svelte';
|
||||
|
|
|
|||
|
|
@ -2,11 +2,19 @@
|
|||
export let meta = [];
|
||||
export let size = '';
|
||||
export let values = [];
|
||||
export let onStyleChanged = () => {};
|
||||
|
||||
let _values = values.map(v => v);
|
||||
|
||||
$: onStyleChanged(_values);
|
||||
</script>
|
||||
|
||||
<div class="inputs {size}">
|
||||
{#each meta as { placeholder }, i}
|
||||
<input type="number" placeholder="{placeholder}" bind:value={values[i]}/>
|
||||
<input type="number"
|
||||
placeholder="{placeholder}"
|
||||
value={values[i]}
|
||||
on:input={(e) => _values[i] = e.target.value} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,58 +1,22 @@
|
|||
<script>
|
||||
import PropsView from "./PropsView.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
|
||||
import CodeEditor from './CodeEditor.svelte';
|
||||
import LayoutEditor from './LayoutEditor.svelte';
|
||||
|
||||
import PropsView from "./PropsView.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import { pipe } from "../common/core";
|
||||
import {
|
||||
getScreenInfo
|
||||
} from "./pagesParsing/createProps";
|
||||
import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
|
||||
import CodeEditor from './CodeEditor.svelte';
|
||||
import LayoutEditor from './LayoutEditor.svelte';
|
||||
let current_view = 'props';
|
||||
|
||||
import {
|
||||
cloneDeep,
|
||||
join,
|
||||
split,
|
||||
map,
|
||||
keys,
|
||||
isUndefined,
|
||||
last
|
||||
} from "lodash/fp";
|
||||
import { assign } from "lodash";
|
||||
$: component = $store.currentComponentInfo;
|
||||
$: originalName = component.name;
|
||||
$: name = component.name;
|
||||
$: description = component.description;
|
||||
$: componentInfo = $store.currentComponentInfo;
|
||||
$: components = $store.components;
|
||||
|
||||
let component;
|
||||
let name = "";
|
||||
let description = "";
|
||||
let tagsString = "";
|
||||
let nameInvalid = "";
|
||||
let componentInfo = {};
|
||||
let modalElement
|
||||
let propsValidationErrors = [];
|
||||
let originalName="";
|
||||
let components;
|
||||
let ignoreStore = false;
|
||||
|
||||
// $: shortName = last(name.split("/"));
|
||||
|
||||
store.subscribe(s => {
|
||||
if(ignoreStore) return;
|
||||
component = s.currentComponentInfo;
|
||||
if(!component) return;
|
||||
originalName = component.name;
|
||||
name = component.name;
|
||||
description = component.description;
|
||||
tagsString = join(", ")(component.tags);
|
||||
componentInfo = s.currentComponentInfo;
|
||||
components = s.components;
|
||||
});
|
||||
|
||||
const onPropsChanged = store.updateComponentProp;
|
||||
|
||||
let current_view = 'props';
|
||||
const onPropChanged = store.setComponentProp;
|
||||
const onStyleChanged = store.setComponentStyle;
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -78,9 +42,9 @@ let current_view = 'props';
|
|||
<div class="component-props-container">
|
||||
|
||||
{#if current_view === 'props'}
|
||||
<PropsView {componentInfo} {components} {onPropsChanged} />
|
||||
<PropsView {componentInfo} {components} {onPropChanged} />
|
||||
{:else if current_view === 'layout'}
|
||||
<LayoutEditor />
|
||||
<LayoutEditor {onStyleChanged} {componentInfo}/>
|
||||
{:else}
|
||||
<CodeEditor />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,27 @@
|
|||
<script>
|
||||
|
||||
import { searchAllComponents } from "./pagesParsing/searchComponents";
|
||||
import { store } from "../builderStore";
|
||||
import { searchAllComponents } from "./pagesParsing/searchComponents";
|
||||
import { store } from "../builderStore";
|
||||
|
||||
export let onComponentChosen = () => {};
|
||||
export let onComponentChosen = () => {};
|
||||
|
||||
let components = [];
|
||||
let phrase = "";
|
||||
let phrase = "";
|
||||
|
||||
store.subscribe(s => {
|
||||
components = s.components;
|
||||
});
|
||||
|
||||
$: filteredComponents =
|
||||
!phrase
|
||||
? []
|
||||
: searchAllComponents(components, phrase);
|
||||
components = $store.components;
|
||||
|
||||
$: filteredComponents =
|
||||
!phrase
|
||||
? []
|
||||
: searchAllComponents(components, phrase);
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
||||
<form class="uk-search uk-search-large">
|
||||
<span uk-search-icon></span>
|
||||
<input class="uk-search-input"
|
||||
type="search"
|
||||
placeholder="Based on component..."
|
||||
<input class="uk-search-input"
|
||||
type="search"
|
||||
placeholder="Based on component..."
|
||||
bind:value={phrase}>
|
||||
</form>
|
||||
|
||||
|
|
@ -65,4 +61,4 @@ $: filteredComponents =
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,66 @@
|
|||
<script>
|
||||
import {
|
||||
isRootComponent
|
||||
} from "./pagesParsing/searchComponents"
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import { store } from "../builderStore";
|
||||
import {
|
||||
groupBy, keys, find, sortBy
|
||||
} from "lodash/fp";
|
||||
import { pipe } from "../common/core";
|
||||
import {
|
||||
isRootComponent
|
||||
} from "./pagesParsing/searchComponents"
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import { store } from "../builderStore";
|
||||
import { find, sortBy } from "lodash/fp";
|
||||
|
||||
export let onComponentChosen;
|
||||
export let onGeneratorChosen;
|
||||
export let allowGenerators;
|
||||
export let onComponentChosen;
|
||||
export let onGeneratorChosen;
|
||||
export let allowGenerators;
|
||||
|
||||
let screens=[];
|
||||
let componentLibraries=[];
|
||||
let screens = [];
|
||||
let componentLibraries=[];
|
||||
|
||||
const addRootComponent = (c, all, isGenerator) => {
|
||||
const { libName } = splitName(c.name);
|
||||
let group = find(r => r.libName === libName)(all);
|
||||
const addRootComponent = (c, all, isGenerator) => {
|
||||
const { libName } = splitName(c.name);
|
||||
let group = find(r => r.libName === libName)(all);
|
||||
|
||||
if(!group) {
|
||||
group = {
|
||||
libName,
|
||||
components: [],
|
||||
generators: []
|
||||
};
|
||||
if(!group) {
|
||||
group = {
|
||||
libName,
|
||||
components: [],
|
||||
generators: []
|
||||
};
|
||||
|
||||
all.push(group);
|
||||
}
|
||||
|
||||
if(isGenerator) {
|
||||
group.generators.push(c)
|
||||
} else {
|
||||
group.components.push(c)
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
store.subscribe(s => {
|
||||
|
||||
const newComponentLibraries = [];
|
||||
const newscreens = [];
|
||||
|
||||
for(let comp of sortBy(["name"])(s.components)) {
|
||||
if(isRootComponent(comp)) {
|
||||
addRootComponent(
|
||||
comp,
|
||||
newComponentLibraries,
|
||||
false);
|
||||
} else {
|
||||
newscreens.push(comp);
|
||||
all.push(group);
|
||||
}
|
||||
}
|
||||
|
||||
for(let generator of s.generators) {
|
||||
addRootComponent(
|
||||
generator,
|
||||
newComponentLibraries,
|
||||
true);
|
||||
}
|
||||
if(isGenerator) {
|
||||
group.generators.push(c)
|
||||
} else {
|
||||
group.components.push(c)
|
||||
}
|
||||
|
||||
screens = sortBy(["name"])(newscreens);
|
||||
componentLibraries = newComponentLibraries;
|
||||
});
|
||||
};
|
||||
|
||||
$: {
|
||||
|
||||
const newComponentLibraries = [];
|
||||
const newscreens = [];
|
||||
|
||||
for(let comp of sortBy(["name"])($store.components)) {
|
||||
if(isRootComponent(comp)) {
|
||||
addRootComponent(
|
||||
comp,
|
||||
newComponentLibraries,
|
||||
false);
|
||||
} else {
|
||||
newscreens.push(comp);
|
||||
}
|
||||
}
|
||||
|
||||
for(let generator of $store.generators) {
|
||||
addRootComponent(
|
||||
generator,
|
||||
newComponentLibraries,
|
||||
true);
|
||||
}
|
||||
|
||||
screens = sortBy(["name"])(newscreens);
|
||||
componentLibraries = newComponentLibraries;
|
||||
};
|
||||
</script>
|
||||
|
||||
{#each componentLibraries as lib}
|
||||
|
|
|
|||
|
|
@ -1,90 +1,79 @@
|
|||
<script>
|
||||
import ComponentsHierarchyChildren from './ComponentsHierarchyChildren.svelte';
|
||||
import ComponentsHierarchyChildren from './ComponentsHierarchyChildren.svelte';
|
||||
|
||||
import {
|
||||
last,
|
||||
sortBy,
|
||||
filter,
|
||||
map,
|
||||
uniqWith,
|
||||
isEqual,
|
||||
trimCharsStart,
|
||||
trimChars,
|
||||
join,
|
||||
includes
|
||||
} from "lodash/fp";
|
||||
import {
|
||||
last,
|
||||
sortBy,
|
||||
map,
|
||||
trimCharsStart,
|
||||
trimChars,
|
||||
join,
|
||||
} from "lodash/fp";
|
||||
|
||||
import { pipe } from "../common/core";
|
||||
import getIcon from "../common/icon";
|
||||
import { store } from "../builderStore";
|
||||
import { pipe } from "../common/core";
|
||||
import { store } from "../builderStore";
|
||||
import { ArrowDownIcon } from '../common/Icons/'
|
||||
|
||||
export let components = []
|
||||
export let components = []
|
||||
|
||||
const joinPath = join("/");
|
||||
const joinPath = join("/");
|
||||
|
||||
const normalizedName = name => pipe(name, [
|
||||
trimCharsStart("./"),
|
||||
trimCharsStart("~/"),
|
||||
trimCharsStart("../"),
|
||||
trimChars(" ")
|
||||
]);
|
||||
|
||||
const lastPartOfName = (c) =>
|
||||
last(c.name ? c.name.split("/") : c._component.split("/"))
|
||||
|
||||
const expandFolder = folder => {
|
||||
const expandedFolder = {...folder};
|
||||
if(expandedFolder.isExpanded) {
|
||||
expandedFolder.isExpanded = false;
|
||||
expandedFolders = filter(f => f.name !== folder.name)(expandedFolders);
|
||||
} else {
|
||||
expandedFolder.isExpanded = true;
|
||||
expandedFolders.push(folder.name);
|
||||
}
|
||||
const newFolders = [...subfolders];
|
||||
newFolders.splice(
|
||||
newFolders.indexOf(folder),
|
||||
1,
|
||||
expandedFolder);
|
||||
subfolders = newFolders;
|
||||
|
||||
}
|
||||
|
||||
const isComponentSelected = (type, current,c) =>
|
||||
type==="screen"
|
||||
&& current
|
||||
&& current.name === c.name
|
||||
|
||||
const isFolderSelected = (current, folder) =>
|
||||
isInSubfolder(current, folder)
|
||||
|
||||
|
||||
|
||||
$: _components =
|
||||
pipe(components, [
|
||||
map(c => ({component: c, title:lastPartOfName(c)})),
|
||||
sortBy("title")
|
||||
const normalizedName = name => pipe(name, [
|
||||
trimCharsStart("./"),
|
||||
trimCharsStart("~/"),
|
||||
trimCharsStart("../"),
|
||||
trimChars(" ")
|
||||
]);
|
||||
|
||||
function select_component(screen, component) {
|
||||
store.setCurrentScreen(screen);
|
||||
store.selectComponent(component);
|
||||
}
|
||||
const lastPartOfName = (c) =>
|
||||
last(c.name ? c.name.split("/") : c._component.split("/"))
|
||||
|
||||
const isComponentSelected = (current, comp) =>
|
||||
current &&
|
||||
current.component &&
|
||||
comp.component &&
|
||||
current.component.name === comp.component.name
|
||||
|
||||
const isFolderSelected = (current, folder) =>
|
||||
isInSubfolder(current, folder)
|
||||
|
||||
$: _components =
|
||||
pipe(components, [
|
||||
map(c => ({component: c, title:lastPartOfName(c)})),
|
||||
sortBy("title")
|
||||
]);
|
||||
|
||||
function select_component(screen, component) {
|
||||
store.setCurrentScreen(screen);
|
||||
store.selectComponent(component);
|
||||
}
|
||||
|
||||
const isScreenSelected = component =>
|
||||
component.component &&
|
||||
$store.currentFrontEndItem &&
|
||||
component.component.name === $store.currentFrontEndItem.name;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
||||
|
||||
{#each _components as component}
|
||||
<div class="hierarchy-item component"
|
||||
class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
|
||||
on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
|
||||
<div class="hierarchy-item component"
|
||||
class:selected={isComponentSelected($store.currentComponentInfo, component)}
|
||||
on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
|
||||
|
||||
<span class="title">{component.title}</span>
|
||||
</div>
|
||||
{#if component.component.props && component.component.props._children}
|
||||
<span class="icon" style="transform: rotate({isScreenSelected(component) ? 0 : -90}deg);">
|
||||
{#if component.component.props && component.component.props._children}
|
||||
<ArrowDownIcon />
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="title">{component.title}</span>
|
||||
</div>
|
||||
|
||||
{#if isScreenSelected(component) && component.component.props && component.component.props._children}
|
||||
<ComponentsHierarchyChildren components={component.component.props._children}
|
||||
currentComponent={$store.currentComponentInfo}
|
||||
onSelect={child => select_component(component.component.name, child)} />
|
||||
{/if}
|
||||
{/each}
|
||||
|
|
@ -102,9 +91,10 @@ function select_component(screen, component) {
|
|||
.hierarchy-item {
|
||||
cursor: pointer;
|
||||
padding: 11px 7px;
|
||||
|
||||
margin: 5px 0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hierarchy-item:hover {
|
||||
|
|
@ -112,12 +102,6 @@ function select_component(screen, component) {
|
|||
background: #fafafa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.currentfolder {
|
||||
color: var(--secondary100);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
background: var(--background-button)!important;
|
||||
|
|
@ -127,5 +111,10 @@ function select_component(screen, component) {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
transition: 0.2s;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,55 @@
|
|||
import { pipe } from "../common/core";
|
||||
|
||||
export let components = [];
|
||||
export let currentComponent;
|
||||
export let onSelect = () => {};
|
||||
export let level = 0;
|
||||
|
||||
|
||||
const capitalise = s => s.substring(0,1).toUpperCase() + s.substring(1);
|
||||
const get_name = s => last(s.split('/'));
|
||||
const get_capitalised_name = name => pipe(name, [get_name,capitalise]);
|
||||
</script>
|
||||
|
||||
{#each components as component}
|
||||
<ul>
|
||||
<li on:click|stopPropagation={() => onSelect(component)}>
|
||||
{get_capitalised_name(component._component)}
|
||||
<ul>
|
||||
{#each components as component}
|
||||
<li on:click|stopPropagation={() => onSelect(component)}>
|
||||
<span class="item"
|
||||
class:selected={currentComponent === component}
|
||||
style="padding-left: {level * 20 + 67}px">
|
||||
{get_capitalised_name(component._component)}
|
||||
</span>
|
||||
|
||||
{#if component._children}
|
||||
<svelte:self components={component._children}/>
|
||||
<svelte:self components={component._children}
|
||||
{currentComponent}
|
||||
{onSelect}
|
||||
level={level + 1}/>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
{/each}
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: 11px 67px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
background: var(--background-button)!important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,43 @@
|
|||
<script>
|
||||
import {
|
||||
isRootComponent
|
||||
} from "./pagesParsing/searchComponents"
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import { store } from "../builderStore";
|
||||
import {
|
||||
groupBy, keys, find, sortBy
|
||||
} from "lodash/fp";
|
||||
import { pipe } from "../common/core";
|
||||
import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import { store } from "../builderStore";
|
||||
import { find, sortBy } from "lodash/fp";
|
||||
import { ImageIcon, InputIcon, LayoutIcon } from '../common/Icons/';
|
||||
|
||||
let componentLibraries=[];
|
||||
let componentLibraries = [];
|
||||
let current_view = 'text';
|
||||
|
||||
const addRootComponent = (c, all) => {
|
||||
const { libName } = splitName(c.name);
|
||||
let group = find(r => r.libName === libName)(all);
|
||||
const addRootComponent = (c, all) => {
|
||||
const { libName } = splitName(c.name);
|
||||
let group = find(r => r.libName === libName)(all);
|
||||
|
||||
if(!group) {
|
||||
group = {
|
||||
libName,
|
||||
components: [],
|
||||
generators: []
|
||||
};
|
||||
if(!group) {
|
||||
group = {
|
||||
libName,
|
||||
components: [],
|
||||
generators: []
|
||||
};
|
||||
|
||||
all.push(group);
|
||||
all.push(group);
|
||||
}
|
||||
|
||||
group.components.push(c)
|
||||
|
||||
};
|
||||
|
||||
const onComponentChosen = store.addChildComponent;
|
||||
|
||||
$: {
|
||||
const newComponentLibraries = [];
|
||||
|
||||
for(let comp of sortBy(["name"])($store.components)) {
|
||||
addRootComponent(
|
||||
comp,
|
||||
newComponentLibraries);
|
||||
}
|
||||
|
||||
componentLibraries = newComponentLibraries;
|
||||
}
|
||||
|
||||
group.components.push(c)
|
||||
|
||||
};
|
||||
|
||||
const onComponentChosen = store.addChildComponent;
|
||||
|
||||
store.subscribe(s => {
|
||||
|
||||
const newComponentLibraries = [];
|
||||
|
||||
for(let comp of sortBy(["name"])(s.components)) {
|
||||
addRootComponent(
|
||||
comp,
|
||||
newComponentLibraries);
|
||||
}
|
||||
|
||||
componentLibraries = newComponentLibraries;
|
||||
});
|
||||
|
||||
let current_view = 'text';
|
||||
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -115,13 +106,6 @@ let current_view = 'text';
|
|||
min-height: 0px;
|
||||
}
|
||||
|
||||
.inner-header {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.component {
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
|
|
@ -147,13 +131,6 @@ let current_view = 'text';
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.component > .description {
|
||||
font-size: 0.8em;
|
||||
color: var(--secondary75);
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
<script>
|
||||
import ComponentPanel from "./ComponentPanel.svelte";
|
||||
import ComponentsList from "./ComponentsList.svelte";
|
||||
import ComponentPanel from "./ComponentPanel.svelte";
|
||||
import ComponentsList from "./ComponentsList.svelte";
|
||||
|
||||
let selected="properties";
|
||||
|
||||
const isSelected = tab =>
|
||||
selected === tab;
|
||||
|
||||
const selectTab = tab =>
|
||||
selected = tab;
|
||||
let selected="properties";
|
||||
|
||||
const isSelected = tab =>
|
||||
selected === tab;
|
||||
|
||||
const selectTab = tab =>
|
||||
selected = tab;
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
|
|||
|
|
@ -1,41 +1,25 @@
|
|||
<script>
|
||||
import { store } from "../builderStore";
|
||||
import { makeLibraryUrl } from "../builderStore/loadComponentLibraries";
|
||||
import {
|
||||
last, split, map, join
|
||||
} from "lodash/fp";
|
||||
import { pipe } from "../common/core";
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName"
|
||||
import { afterUpdate } from 'svelte';
|
||||
import { getRootComponent } from "./pagesParsing/getRootComponent";
|
||||
import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
|
||||
import { store } from "../builderStore";
|
||||
import { map, join } from "lodash/fp";
|
||||
import { pipe } from "../common/core";
|
||||
import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy";
|
||||
|
||||
$: hasComponent = !!$store.currentFrontEndItem;
|
||||
|
||||
let hasComponent=false;
|
||||
let stylesheetLinks = "";
|
||||
let appDefinition = {};
|
||||
|
||||
store.subscribe(s => {
|
||||
hasComponent = !!s.currentFrontEndItem;
|
||||
|
||||
stylesheetLinks = pipe(s.pages.stylesheets, [
|
||||
$: stylesheetLinks = pipe($store.pages.stylesheets, [
|
||||
map(s => `<link rel="stylesheet" href="${s}"/>`),
|
||||
join("\n")
|
||||
]);
|
||||
appDefinition = {
|
||||
componentLibraries: s.loadLibraryUrls(),
|
||||
|
||||
$: appDefinition = {
|
||||
componentLibraries: $store.loadLibraryUrls(),
|
||||
props: buildPropsHierarchy(
|
||||
s.components,
|
||||
s.screens,
|
||||
s.currentFrontEndItem),
|
||||
hierarchy: s.hierarchy,
|
||||
$store.components,
|
||||
$store.screens,
|
||||
$store.currentFrontEndItem),
|
||||
hierarchy: $store.hierarchy,
|
||||
appRootPath: ""
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -52,7 +36,6 @@ store.subscribe(s => {
|
|||
window["##BUDIBASE_APPDEFINITION##"] = ${JSON.stringify(appDefinition)};
|
||||
import('/_builder/budibase-client.esm.mjs')
|
||||
.then(module => {
|
||||
console.log(module, window);
|
||||
module.loadBudibase({ window, localStorage });
|
||||
})
|
||||
</script>
|
||||
|
|
@ -73,23 +56,21 @@ store.subscribe(s => {
|
|||
|
||||
|
||||
<style>
|
||||
.component-container {
|
||||
grid-row-start: middle;
|
||||
grid-column-start: middle;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.component-container {
|
||||
grid-row-start: middle;
|
||||
grid-column-start: middle;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.component-container iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.component-container iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,31 @@
|
|||
<script>
|
||||
import PropsView from "./PropsView.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
|
||||
|
||||
import PropsView from "./PropsView.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import UIkit from "uikit";
|
||||
import { pipe } from "../common/core";
|
||||
import {
|
||||
getScreenInfo
|
||||
} from "./pagesParsing/createProps";
|
||||
import Button from "../common/Button.svelte";
|
||||
import ButtonGroup from "../common/ButtonGroup.svelte";
|
||||
import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
|
||||
import {
|
||||
cloneDeep,
|
||||
join,
|
||||
split,
|
||||
last
|
||||
} from "lodash/fp";
|
||||
import { assign } from "lodash";
|
||||
|
||||
import {
|
||||
cloneDeep,
|
||||
join,
|
||||
split,
|
||||
map,
|
||||
keys,
|
||||
isUndefined,
|
||||
last
|
||||
} from "lodash/fp";
|
||||
import { assign } from "lodash";
|
||||
$: component = $store.currentFrontEndItem;
|
||||
$: componentInfo = $store.currentComponentInfo;
|
||||
$: components = $store.components;
|
||||
|
||||
let component;
|
||||
let name = "";
|
||||
let description = "";
|
||||
let tagsString = "";
|
||||
let nameInvalid = "";
|
||||
let componentInfo;
|
||||
let modalElement
|
||||
let propsValidationErrors = [];
|
||||
let originalName="";
|
||||
let components;
|
||||
let ignoreStore = false;
|
||||
|
||||
$: shortName = last(name.split("/"));
|
||||
|
||||
store.subscribe(s => {
|
||||
if(ignoreStore) return;
|
||||
component = s.currentFrontEndItem;
|
||||
if(!component) return;
|
||||
originalName = component.name;
|
||||
name = component.name;
|
||||
description = component.description;
|
||||
tagsString = join(", ")(component.tags);
|
||||
componentInfo = s.currentComponentInfo;
|
||||
components = s.components;
|
||||
});
|
||||
|
||||
const updateComponent = doChange => {
|
||||
const newComponent = cloneDeep(component);
|
||||
doChange(newComponent);
|
||||
component = newComponent;
|
||||
componentInfo = getScreenInfo(components, newComponent);
|
||||
}
|
||||
|
||||
const onPropsChanged = newProps => {
|
||||
updateComponent(newComponent =>
|
||||
assign(newComponent.props, newProps));
|
||||
}
|
||||
const updateComponent = doChange =>
|
||||
doChange(cloneDeep(component));
|
||||
|
||||
const onPropsChanged = newProps => {
|
||||
updateComponent(newComponent =>
|
||||
assign(newComponent.props, newProps));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -74,74 +37,54 @@ const onPropsChanged = newProps => {
|
|||
</ul>
|
||||
|
||||
<div class="component-props-container">
|
||||
|
||||
|
||||
<PropsView
|
||||
{componentInfo}
|
||||
{onPropsChanged} />
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
.title > div:nth-child(1) {
|
||||
grid-column-start: name;
|
||||
color: var(--secondary100);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: [name] 1fr [actions] auto;
|
||||
color: var(--secondary100);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.title > div:nth-child(2) {
|
||||
grid-column-start: actions;
|
||||
}
|
||||
|
||||
.title > div:nth-child(1) {
|
||||
grid-column-start: name;
|
||||
color: var(--secondary100);
|
||||
}
|
||||
.component-props-container {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.title > div:nth-child(2) {
|
||||
grid-column-start: actions;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.component-props-container {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 20px;
|
||||
background: none;
|
||||
border-radius: 5px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
li button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: lightblue;
|
||||
}
|
||||
li {
|
||||
margin-right: 20px;
|
||||
background: none;
|
||||
border-radius: 5px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
li button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,39 @@
|
|||
<script>
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import EventSelector from "./EventSelector.svelte";
|
||||
import {
|
||||
filter
|
||||
} from "lodash/fp";
|
||||
import {EVENT_TYPE_MEMBER_NAME} from "../common/eventHandlers";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import EventSelector from "./EventSelector.svelte";
|
||||
import {
|
||||
filter
|
||||
} from "lodash/fp";
|
||||
import {EVENT_TYPE_MEMBER_NAME} from "../common/eventHandlers";
|
||||
|
||||
export let parentProps;
|
||||
export let propDef;
|
||||
export let onValueChanged;
|
||||
export let onValidate = () => {};
|
||||
export let parentProps;
|
||||
export let propDef;
|
||||
export let onValueChanged;
|
||||
|
||||
let events = [];
|
||||
let elementErrors = {};
|
||||
$: events = parentProps[propDef.____name];
|
||||
|
||||
$: {
|
||||
events = parentProps[propDef.____name];
|
||||
}
|
||||
const addHandler = () => {
|
||||
const newHandler = {parameters:{}};
|
||||
newHandler[EVENT_TYPE_MEMBER_NAME] = "";
|
||||
events = [...events, newHandler];
|
||||
onValueChanged(events);
|
||||
}
|
||||
|
||||
const addHandler = () => {
|
||||
const newHandler = {parameters:{}};
|
||||
newHandler[EVENT_TYPE_MEMBER_NAME] = "";
|
||||
events = [...events, newHandler];
|
||||
onValueChanged(events);
|
||||
}
|
||||
const onEventHandlerChanged = (oldEvent) => (newEvent) => {
|
||||
const indexOfOldEvent = events.indexOf(oldEvent);
|
||||
const newEvents = [...events];
|
||||
newEvents.splice(
|
||||
events.indexOf(oldEvent),
|
||||
1,
|
||||
newEvent);
|
||||
events = newEvents;
|
||||
onValueChanged(events);
|
||||
}
|
||||
|
||||
const onEventHandlerChanged = (oldEvent) => (newEvent) => {
|
||||
const indexOfOldEvent = events.indexOf(oldEvent);
|
||||
const newEvents = [...events];
|
||||
newEvents.splice(
|
||||
events.indexOf(oldEvent),
|
||||
1,
|
||||
newEvent);
|
||||
events = newEvents;
|
||||
onValueChanged(events);
|
||||
}
|
||||
|
||||
const removeHandler = (index) => () => {
|
||||
events = filter(e => e !== events[index])(events);
|
||||
onValueChanged(events);
|
||||
}
|
||||
const removeHandler = (index) => () => {
|
||||
events = filter(e => e !== events[index])(events);
|
||||
onValueChanged(events);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -67,32 +61,28 @@ const removeHandler = (index) => () => {
|
|||
|
||||
|
||||
<style>
|
||||
.addelement-container {
|
||||
cursor: pointer;
|
||||
padding: 3px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.addelement-container {
|
||||
cursor: pointer;
|
||||
padding: 3px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
.addelement-container:hover {
|
||||
background-color: var(--primary25);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.control-container {
|
||||
padding-left: 3px;
|
||||
background: var(--secondary10);
|
||||
}
|
||||
|
||||
.addelement-container:hover {
|
||||
background-color: var(--primary25);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
.control-container {
|
||||
padding-left: 3px;
|
||||
background: var(--secondary10);
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 60%;
|
||||
margin: 10px auto;
|
||||
border-style:solid;
|
||||
border-width: 1px 0 0 0;
|
||||
border-color: var(--primary25);
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 60%;
|
||||
margin: 10px auto;
|
||||
border-style:solid;
|
||||
border-width: 1px 0 0 0;
|
||||
border-color: var(--primary25);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,67 @@
|
|||
<script>
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import StateBindingControl from "./StateBindingControl.svelte";
|
||||
import {
|
||||
find, map, keys, reduce, keyBy
|
||||
} from "lodash/fp";
|
||||
import { pipe, userWithFullAccess } from "../common/core";
|
||||
import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers";
|
||||
import { store } from "../builderStore";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import StateBindingControl from "./StateBindingControl.svelte";
|
||||
import {
|
||||
find, map, keys, reduce, keyBy
|
||||
} from "lodash/fp";
|
||||
import { pipe, userWithFullAccess } from "../common/core";
|
||||
import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers";
|
||||
import { store } from "../builderStore";
|
||||
|
||||
export let event;
|
||||
export let onChanged;
|
||||
export let onRemoved;
|
||||
export let event;
|
||||
export let onChanged;
|
||||
export let onRemoved;
|
||||
|
||||
let events;
|
||||
let eventType;
|
||||
let parameters = [];
|
||||
let eventType;
|
||||
let parameters = [];
|
||||
|
||||
store.subscribe(s => {
|
||||
events = allHandlers(
|
||||
{hierarchy: s.hierarchy},
|
||||
|
||||
$: events = allHandlers(
|
||||
{hierarchy: $store.hierarchy},
|
||||
userWithFullAccess({
|
||||
hierarchy: s.hierarchy,
|
||||
actions: keyBy("name")(s.actions)
|
||||
actions: keyBy("name")($store.actions)
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
$: {
|
||||
if(event) {
|
||||
eventType = event[EVENT_TYPE_MEMBER_NAME];
|
||||
parameters = pipe(event.parameters, [
|
||||
keys,
|
||||
map(k => ({name:k, value:event.parameters[k]}))
|
||||
]);
|
||||
} else {
|
||||
eventType = "";
|
||||
parameters = [];
|
||||
}
|
||||
}
|
||||
|
||||
const eventChanged = (type, parameters) => {
|
||||
const paramsAsObject = reduce(
|
||||
(obj, p) => {
|
||||
obj[p.name] = p.value;
|
||||
return obj;
|
||||
$: if(event) {
|
||||
eventType = event[EVENT_TYPE_MEMBER_NAME];
|
||||
parameters = pipe(event.parameters, [
|
||||
keys,
|
||||
map(k => ({name:k, value:event.parameters[k]}))
|
||||
]);
|
||||
} else {
|
||||
eventType = "";
|
||||
parameters = [];
|
||||
}
|
||||
, {}
|
||||
)(parameters)
|
||||
|
||||
const ev = {};
|
||||
ev[EVENT_TYPE_MEMBER_NAME]=type;
|
||||
ev.parameters = paramsAsObject;
|
||||
const eventChanged = (type, parameters) => {
|
||||
const paramsAsObject = reduce(
|
||||
(obj, p) => {
|
||||
obj[p.name] = p.value;
|
||||
return obj;
|
||||
}
|
||||
, {}
|
||||
)(parameters)
|
||||
|
||||
onChanged(ev);
|
||||
}
|
||||
const ev = {};
|
||||
ev[EVENT_TYPE_MEMBER_NAME]=type;
|
||||
ev.parameters = paramsAsObject;
|
||||
|
||||
const eventTypeChanged = (ev) => {
|
||||
const eType = find(e => e.name === ev.target.value)(events);
|
||||
const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
|
||||
eventChanged(eType.name, emptyParameters);
|
||||
}
|
||||
onChanged(ev);
|
||||
}
|
||||
|
||||
const onParameterChanged = index => val => {
|
||||
const newparameters = [...parameters];
|
||||
newparameters[index].value = val;
|
||||
eventChanged(eventType, newparameters);
|
||||
}
|
||||
const eventTypeChanged = (ev) => {
|
||||
const eType = find(e => e.name === ev.target.value)(events);
|
||||
const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
|
||||
eventChanged(eType.name, emptyParameters);
|
||||
}
|
||||
|
||||
const onParameterChanged = index => val => {
|
||||
const newparameters = [...parameters];
|
||||
newparameters[index].value = val;
|
||||
eventChanged(eventType, newparameters);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -77,35 +73,33 @@ const onParameterChanged = index => val => {
|
|||
{/each}
|
||||
</select>
|
||||
|
||||
<IconButton icon="trash"
|
||||
size="12"
|
||||
<IconButton icon="trash"
|
||||
size="12"
|
||||
on:click={onRemoved}/>
|
||||
|
||||
</div>
|
||||
|
||||
{#if parameters}
|
||||
{#each parameters as p, index}
|
||||
{#each parameters as p, index}
|
||||
|
||||
<div>
|
||||
{p.name}
|
||||
</div>
|
||||
<StateBindingControl onChanged={onParameterChanged(index)}
|
||||
value={p.value} />
|
||||
<div>
|
||||
{p.name}
|
||||
</div>
|
||||
<StateBindingControl onChanged={onParameterChanged(index)}
|
||||
value={p.value} />
|
||||
|
||||
{/each}
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.type-selector-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.type-selector-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.type-selector {
|
||||
border-color: var(--primary50);
|
||||
border-radius: 2px;
|
||||
width: 50px;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
.type-selector {
|
||||
border-color: var(--primary50);
|
||||
border-radius: 2px;
|
||||
width: 50px;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,8 @@
|
|||
<script>
|
||||
import InputGroup from '../common/Inputs/InputGroup.svelte';
|
||||
|
||||
let grid_values = ['', '', '', ''];
|
||||
let column_values = ['', ''];
|
||||
let row_values = ['', ''];
|
||||
let gap_values = [''];
|
||||
let margin_values = ['', '', '', ''];
|
||||
let padding_values = ['', '', '', ''];
|
||||
let zindex_values = [''];
|
||||
export let onStyleChanged = () => {};
|
||||
export let componentInfo;
|
||||
|
||||
const tbrl = [
|
||||
{ placeholder: 'T' },
|
||||
|
|
@ -22,6 +17,27 @@
|
|||
]
|
||||
|
||||
const single = [{ placeholder: '' }];
|
||||
|
||||
|
||||
$: layout = componentInfo._layout;
|
||||
|
||||
$: positions = {
|
||||
gridarea: ['Grid Area', tbrl, 'small'],
|
||||
column: ['Column', se],
|
||||
row: ['Row', se],
|
||||
gap: ['Gap', single],
|
||||
};
|
||||
|
||||
$: spacing = {
|
||||
margin: ['Margin', tbrl, 'small'],
|
||||
padding: ['Padding', tbrl, 'small']
|
||||
};
|
||||
|
||||
$: zindex = {
|
||||
zindex: ['Z-Index', single]
|
||||
}
|
||||
|
||||
const newValue = n => Array(n).fill('');
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -30,48 +46,41 @@
|
|||
<h4>Positioning</h4>
|
||||
|
||||
<div class="layout-pos">
|
||||
<div class="grid">
|
||||
<h5>Grid Area:</h5>
|
||||
<InputGroup meta={tbrl} bind:values={grid_values} size="small"/>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<h5>Column:</h5>
|
||||
<InputGroup meta={se} bind:values={column_values} />
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<h5>Row:</h5>
|
||||
<InputGroup meta={se} bind:values={row_values} />
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<h5>Gap:</h5>
|
||||
<InputGroup meta={single} bind:values={gap_values} />
|
||||
</div>
|
||||
{#each Object.entries(positions) as [key, [name, meta, size]]}
|
||||
<div class="grid">
|
||||
<h5>Grid Area:</h5>
|
||||
<InputGroup onStyleChanged={_value => onStyleChanged(key, _value)}
|
||||
values={layout[key] || newValue(meta.length)}
|
||||
{meta}
|
||||
{size} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<h4>Spacing</h4>
|
||||
|
||||
<div class="layout-spacing">
|
||||
<div class="grid">
|
||||
<h5>Margin:</h5>
|
||||
<InputGroup meta={tbrl} bind:values={margin_values} size="small"/>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<h5>Padding:</h5>
|
||||
<InputGroup meta={tbrl} bind:values={padding_values} size="small"/>
|
||||
</div>
|
||||
{#each Object.entries(spacing) as [key, [name, meta, size]]}
|
||||
<div class="grid">
|
||||
<h5>Grid Area:</h5>
|
||||
<InputGroup onStyleChanged={_value => onStyleChanged(key, _value)}
|
||||
values={layout[key] || newValue(meta.length)}
|
||||
{meta}
|
||||
{size} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<h4>Z-Index</h4>
|
||||
|
||||
<div class="layout-layer">
|
||||
<div class="grid">
|
||||
<h5>Z-Index:</h5>
|
||||
<InputGroup meta={single} bind:values={zindex_values}/>
|
||||
</div>
|
||||
{#each Object.entries(zindex) as [key, [name, meta, size]]}
|
||||
<div class="grid">
|
||||
<h5>Grid Area:</h5>
|
||||
<InputGroup onStyleChanged={_value => onStyleChanged(key, _value)}
|
||||
values={layout[key] || newValue(meta.length)}
|
||||
{meta}
|
||||
{size} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -112,5 +121,4 @@
|
|||
.grid {
|
||||
grid-template-columns: 70px 1fr;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,64 @@
|
|||
<script>
|
||||
import ComponentSelector from "./ComponentSelector.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import PropsView from "./PropsView.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import ButtonGroup from "../common/ButtonGroup.svelte";
|
||||
import { pipe } from "../common/core";
|
||||
import UIkit from "uikit";
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents";
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
|
||||
import ComponentSelector from "./ComponentSelector.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import PropsView from "./PropsView.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import ButtonGroup from "../common/ButtonGroup.svelte";
|
||||
import { pipe } from "../common/core";
|
||||
import UIkit from "uikit";
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents";
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
|
||||
import {
|
||||
find, filter, some, map, includes
|
||||
} from "lodash/fp";
|
||||
import { assign } from "lodash";
|
||||
import {
|
||||
find, filter, some, map, includes
|
||||
} from "lodash/fp";
|
||||
import { assign } from "lodash";
|
||||
|
||||
|
||||
export const show = () => {
|
||||
UIkit.modal(componentSelectorModal).show();
|
||||
}
|
||||
export const show = () => {
|
||||
UIkit.modal(componentSelectorModal).show();
|
||||
}
|
||||
|
||||
let componentSelectorModal;
|
||||
let layoutComponents;
|
||||
let layoutComponent;
|
||||
let screens;
|
||||
let name="";
|
||||
let saveAttempted=false;
|
||||
let componentSelectorModal;
|
||||
let layoutComponents;
|
||||
let layoutComponent;
|
||||
let screens;
|
||||
let name="";
|
||||
let saveAttempted=false;
|
||||
|
||||
store.subscribe(s => {
|
||||
layoutComponents = pipe(s.components, [
|
||||
filter(c => c.container),
|
||||
map(c => ({name:c.name, ...splitName(c.name)}))
|
||||
]);
|
||||
store.subscribe(s => {
|
||||
layoutComponents = pipe(s.components, [
|
||||
filter(c => c.container),
|
||||
map(c => ({name:c.name, ...splitName(c.name)}))
|
||||
]);
|
||||
|
||||
layoutComponent = layoutComponent
|
||||
? find(c => c.name === layoutComponent.name)(layoutComponents)
|
||||
: layoutComponents[0];
|
||||
layoutComponent = layoutComponent
|
||||
? find(c => c.name === layoutComponent.name)(layoutComponents)
|
||||
: layoutComponents[0];
|
||||
|
||||
screens = s.screens;
|
||||
});
|
||||
screens = s.screens;
|
||||
});
|
||||
|
||||
const save = () => {
|
||||
saveAttempted = true;
|
||||
const save = () => {
|
||||
saveAttempted = true;
|
||||
|
||||
const isValid = name.length > 0
|
||||
&& !screenNameExists(name)
|
||||
&& layoutComponent;
|
||||
const isValid = name.length > 0
|
||||
&& !screenNameExists(name)
|
||||
&& layoutComponent;
|
||||
|
||||
if(!isValid) return;
|
||||
if(!isValid) return;
|
||||
|
||||
store.createScreen(name, layoutComponent.name);
|
||||
UIkit.modal(componentSelectorModal).hide();
|
||||
}
|
||||
store.createScreen(name, layoutComponent.name);
|
||||
UIkit.modal(componentSelectorModal).hide();
|
||||
}
|
||||
|
||||
const cancel = () => {
|
||||
UIkit.modal(componentSelectorModal).hide();
|
||||
}
|
||||
const cancel = () => {
|
||||
UIkit.modal(componentSelectorModal).hide();
|
||||
}
|
||||
|
||||
const screenNameExists = (name) =>
|
||||
some(s => s.name.toLowerCase() === name.toLowerCase())(screens)
|
||||
const screenNameExists = (name) =>
|
||||
some(s => s.name.toLowerCase() === name.toLowerCase())(screens)
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -106,27 +105,7 @@ const screenNameExists = (name) =>
|
|||
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
.component-option {
|
||||
border-style: solid;
|
||||
border-color: var(--slate);
|
||||
border-width: 0 0 1px 0;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.component-option:hover {
|
||||
background-color: var(--lightslate);
|
||||
}
|
||||
|
||||
.component-name {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.lib-name {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:1.2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,36 @@
|
|||
<script>
|
||||
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents";
|
||||
import { pipe } from "../common/core";
|
||||
import {
|
||||
filter, find, concat
|
||||
} from "lodash/fp";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import { store } from "../builderStore";
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents";
|
||||
import { pipe } from "../common/core";
|
||||
import {
|
||||
filter, find, concat
|
||||
} from "lodash/fp";
|
||||
|
||||
let entryComponent;
|
||||
let title = "";
|
||||
let components = [];
|
||||
let page={};
|
||||
const notSeletedComponent = {name:"(none selected)"};
|
||||
const notSeletedComponent = {name:"(none selected)"};
|
||||
|
||||
store.subscribe(s => {
|
||||
page = s.pages[s.currentPageName];
|
||||
if(!page) return;
|
||||
title = page.index.title;
|
||||
components = pipe(s.components, [
|
||||
filter(s => !isRootComponent(s)),
|
||||
$: page = $store.pages[$store.currentPageName];
|
||||
$: title = page.index.title;
|
||||
$: components = pipe($store.components, [
|
||||
filter(store => !isRootComponent($store)),
|
||||
concat([notSeletedComponent])
|
||||
]);
|
||||
entryComponent = find(c => c.name === page.appBody)(components);
|
||||
if(!entryComponent) entryComponent = notSeletedComponent;
|
||||
});
|
||||
$: entryComponent = find(c => c.name === page.appBody)(components) || notSeletedComponent;
|
||||
|
||||
const save = () => {
|
||||
if(!title || !entryComponent || entryComponent === notSeletedComponent) return;
|
||||
const page = {
|
||||
index: {
|
||||
title
|
||||
},
|
||||
appBody: entryComponent.name,
|
||||
|
||||
const save = () => {
|
||||
if(!title || !entryComponent || entryComponent === notSeletedComponent) return;
|
||||
const page = {
|
||||
index: {
|
||||
title
|
||||
},
|
||||
appBody: entryComponent.name,
|
||||
}
|
||||
store.savePage(page);
|
||||
}
|
||||
store.savePage(page);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -61,11 +53,11 @@ const save = () => {
|
|||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
padding: 15px;
|
||||
}
|
||||
.help-text {
|
||||
color: var(--slate);
|
||||
font-size: 10pt;
|
||||
}
|
||||
</style>
|
||||
.root {
|
||||
padding: 15px;
|
||||
}
|
||||
.help-text {
|
||||
color: var(--slate);
|
||||
font-size: 10pt;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
<script>
|
||||
import { store } from "../builderStore";
|
||||
import getIcon from "../common/icon";
|
||||
import { store } from "../builderStore";
|
||||
import getIcon from "../common/icon";
|
||||
|
||||
const getPage = (s, name) => {
|
||||
const props = s.pages[name];
|
||||
return ({name, props});
|
||||
}
|
||||
const getPage = (s, name) => {
|
||||
const props = s.pages[name];
|
||||
return ({name, props});
|
||||
}
|
||||
|
||||
const pages = [{
|
||||
title: 'Main',
|
||||
id: 'main'
|
||||
}, {
|
||||
title: 'Login',
|
||||
id: 'unauthenticated'
|
||||
}]
|
||||
|
||||
store.setCurrentPage('main')
|
||||
const pages = [{
|
||||
title: 'Main',
|
||||
id: 'main'
|
||||
}, {
|
||||
title: 'Login',
|
||||
id: 'unauthenticated'
|
||||
}]
|
||||
|
||||
store.setCurrentPage('main')
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -31,46 +30,44 @@ store.setCurrentPage('main')
|
|||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.root {
|
||||
padding-bottom: 10px;
|
||||
font-size: .9rem;
|
||||
color: var(--secondary50);
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.root {
|
||||
padding-bottom: 10px;
|
||||
font-size: .9rem;
|
||||
color: var(--secondary50);
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: 1em 2.6em 0.9em 1.4em;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: none;
|
||||
color: var(--primary100);
|
||||
}
|
||||
select {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
line-height: 1.3;
|
||||
padding: 1em 2.6em 0.9em 1.4em;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: .5em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: none;
|
||||
color: var(--primary100);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,25 @@
|
|||
<script>
|
||||
import Checkbox from "../common/Checkbox.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import StateBindingControl from "./StateBindingControl.svelte";
|
||||
|
||||
import Checkbox from "../common/Checkbox.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import EventListSelector from "./EventListSelector.svelte";
|
||||
import StateBindingControl from "./StateBindingControl.svelte";
|
||||
export let setProp = () => {};
|
||||
export let index;
|
||||
export let prop_name;
|
||||
export let prop_value;
|
||||
export let prop_type = {};
|
||||
|
||||
export let setProp = () => {};
|
||||
export let disabled;
|
||||
export let index;
|
||||
export let prop_name;
|
||||
export let prop_value;
|
||||
export let prop_type = {};
|
||||
|
||||
$: isOdd = (index % 2 !== 0);
|
||||
|
||||
const setComponentProp = (props) => {
|
||||
setProp(propDef.____name, props);
|
||||
}
|
||||
$: isOdd = (index % 2 !== 0);
|
||||
|
||||
const setComponentProp = (props) => {
|
||||
setProp(propDef.____name, props);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="root" >
|
||||
|
||||
{#if prop_type === "event"}
|
||||
|
||||
<!-- <h5>{prop_name}</h5>
|
||||
<EventListSelector parentProps={props}
|
||||
{propDef}
|
||||
onValueChanged={setComponentProp} /> -->
|
||||
|
||||
{:else }
|
||||
{#if prop_type !== "event" }
|
||||
|
||||
<h5>{prop_name}</h5>
|
||||
<StateBindingControl value={prop_value}
|
||||
|
|
@ -40,27 +28,24 @@ const setComponentProp = (props) => {
|
|||
onChanged={v => setProp(prop_name, v)}/>
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 70px 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 70px 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.6;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #163057;
|
||||
opacity: 0.6;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,32 @@
|
|||
<script>
|
||||
import { some, includes, filter } from "lodash/fp";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import PropControl from "./PropControl.svelte";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
|
||||
import {
|
||||
keys, map, some, includes,
|
||||
cloneDeep, isEqual, sortBy,
|
||||
filter, difference
|
||||
} from "lodash/fp";
|
||||
import { pipe } from "../common/core";
|
||||
import { getInstanceProps } from "./pagesParsing/createProps";
|
||||
import Checkbox from "../common/Checkbox.svelte";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import PropControl from "./PropControl.svelte";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
export let componentInfo;
|
||||
export let onPropChanged = () => {};
|
||||
export let components;
|
||||
|
||||
export let componentInfo;
|
||||
export let instanceProps = null;
|
||||
export let onPropsChanged = () => {};
|
||||
export let components;
|
||||
let errors = [];
|
||||
let props = {};
|
||||
|
||||
let errors = [];
|
||||
let props = {};
|
||||
let propsDefinitions = [];
|
||||
let isInstance = false;
|
||||
const props_to_ignore = ['_component','_children', '_layout'];
|
||||
|
||||
const props_to_ignore = ['_component','_children', '_layout'];
|
||||
$: propDefs = componentInfo && Object.entries(componentInfo).filter(([name])=> !props_to_ignore.includes(name));
|
||||
|
||||
$: propDefs = componentInfo && Object.entries(componentInfo).filter(([name])=> !props_to_ignore.includes(name));
|
||||
function find_type(prop_name) {
|
||||
if(!componentInfo._component) return;
|
||||
return components.find(({name}) => name === componentInfo._component).props[prop_name];
|
||||
}
|
||||
|
||||
function find_type(prop_name) {
|
||||
if(!componentInfo._component) return;
|
||||
return components.find(({name}) => name === componentInfo._component).props[prop_name];
|
||||
}
|
||||
|
||||
let setProp = (name, value) => {
|
||||
onPropsChanged(name, value);
|
||||
}
|
||||
|
||||
const fieldHasError = (propName) =>
|
||||
some(e => e.propName === propName)(errors);
|
||||
let setProp = (name, value) => {
|
||||
onPropChanged(name, value);
|
||||
}
|
||||
|
||||
const fieldHasError = (propName) =>
|
||||
some(e => e.propName === propName)(errors);
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -65,20 +53,18 @@ const fieldHasError = (propName) =>
|
|||
|
||||
|
||||
<style>
|
||||
.root {
|
||||
font-size:10pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.root {
|
||||
font-size:10pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-root {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prop-container {
|
||||
flex: 1 1 auto;
|
||||
min-width: 250px;
|
||||
}
|
||||
.form-root {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prop-container {
|
||||
flex: 1 1 auto;
|
||||
min-width: 250px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,46 @@
|
|||
<script>
|
||||
import { store } from "../builderStore";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import { libraryDependencies } from "./pagesParsing/findDependencies";
|
||||
import UIkit from "uikit";
|
||||
|
||||
import { store } from "../builderStore";
|
||||
import Textbox from "../common/Textbox.svelte";
|
||||
import Button from "../common/Button.svelte";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import { libraryDependencies } from "./pagesParsing/findDependencies";
|
||||
import UIkit from "uikit";
|
||||
let addNewLib = "";
|
||||
let addNewStylesheet = "";
|
||||
let modalElement;
|
||||
|
||||
let addNewLib = "";
|
||||
let addNewStylesheet = "";
|
||||
let addComponentError = "";
|
||||
let modalElement;
|
||||
let components;
|
||||
$: components = $store.components;
|
||||
|
||||
store.subscribe(s => {
|
||||
components = s.components;
|
||||
})
|
||||
const removeLibrary = lib => {
|
||||
const dependencies = libraryDependencies(components, lib);
|
||||
if(dependencies.length > 0) return;
|
||||
store.removeComponentLibrary(lib);
|
||||
}
|
||||
|
||||
const removeLibrary = lib => {
|
||||
const dependencies = libraryDependencies(components, lib);
|
||||
if(dependencies.length > 0) return;
|
||||
store.removeComponentLibrary(lib);
|
||||
}
|
||||
const addLib = () => {
|
||||
store.addComponentLibrary(addNewLib)
|
||||
.then(() => {
|
||||
addNewLib = "";
|
||||
});
|
||||
}
|
||||
|
||||
const addLib = () => {
|
||||
store.addComponentLibrary(addNewLib)
|
||||
.then(() => {
|
||||
addNewLib = "";
|
||||
});
|
||||
}
|
||||
const removeStylesheet = stylesheet => {
|
||||
store.removeStylesheet(stylesheet);
|
||||
}
|
||||
|
||||
const removeStylesheet = stylesheet => {
|
||||
store.removeStylesheet(stylesheet);
|
||||
}
|
||||
const addStylesheet = () => {
|
||||
if(addNewStylesheet)
|
||||
store.addStylesheet(addNewStylesheet);
|
||||
}
|
||||
|
||||
const addStylesheet = () => {
|
||||
if(addNewStylesheet)
|
||||
store.addStylesheet(addNewStylesheet);
|
||||
}
|
||||
|
||||
export const close = () => {
|
||||
UIkit.modal(modalElement).hide();
|
||||
}
|
||||
|
||||
export const show = () => {
|
||||
UIkit.modal(modalElement).show();
|
||||
}
|
||||
export const close = () => {
|
||||
UIkit.modal(modalElement).hide();
|
||||
}
|
||||
|
||||
export const show = () => {
|
||||
UIkit.modal(modalElement).show();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={modalElement} id="new-component-modal" uk-modal>
|
||||
|
|
@ -65,7 +59,7 @@ export const show = () => {
|
|||
<div class="section-container">
|
||||
<p>Component Libraries
|
||||
<span>
|
||||
<input bind:value={addNewLib} />
|
||||
<input bind:value={addNewLib} />
|
||||
<Button color="primary-outline"
|
||||
on:click={addLib}>Add</Button>
|
||||
</span>
|
||||
|
|
@ -73,17 +67,17 @@ export const show = () => {
|
|||
{#each $store.pages.componentLibraries as lib}
|
||||
<div>
|
||||
<span class="row-text">{lib}</span>
|
||||
<IconButton icon="x"
|
||||
<IconButton icon="x"
|
||||
on:click={() => removeLibrary(lib)}/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section-container">
|
||||
<p>Stylesheets
|
||||
<span>
|
||||
<input bind:value={addNewStylesheet} />
|
||||
<input bind:value={addNewStylesheet} />
|
||||
<Button color="primary-outline"
|
||||
on:click={addStylesheet} >Add</Button>
|
||||
</span>
|
||||
|
|
@ -91,55 +85,53 @@ export const show = () => {
|
|||
{#each $store.pages.stylesheets as stylesheet}
|
||||
<div>
|
||||
<span class="row-text">{stylesheet}</span>
|
||||
<IconButton icon="x"
|
||||
<IconButton icon="x"
|
||||
on:click={() => removeStylesheet(stylesheet)}/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section-container {
|
||||
padding: 15px;
|
||||
border-style: dotted;
|
||||
border-width: 1px;
|
||||
border-color: var(--lightslate);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
padding: 15px;
|
||||
border-style: dotted;
|
||||
border-width: 1px;
|
||||
border-color: var(--lightslate);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-container:nth-child(1) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section-container:nth-child(1) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.row-text {
|
||||
margin-right: 15px;
|
||||
color: var(--primary100);
|
||||
}
|
||||
|
||||
.row-text {
|
||||
margin-right: 15px;
|
||||
color: var(--primary100);
|
||||
}
|
||||
input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
p > span {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
p > span {
|
||||
margin-left: 30px;
|
||||
}
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: [title] 1fr [icon] auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: [title] 1fr [icon] auto;
|
||||
}
|
||||
.header > div:nth-child(1) {
|
||||
grid-column-start: title;
|
||||
}
|
||||
|
||||
.header > div:nth-child(1) {
|
||||
grid-column-start: title;
|
||||
}
|
||||
|
||||
.header > div:nth-child(2) {
|
||||
grid-column-start: icon;
|
||||
}
|
||||
|
||||
</style>
|
||||
.header > div:nth-child(2) {
|
||||
grid-column-start: icon;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,145 +1,130 @@
|
|||
<script>
|
||||
import {
|
||||
isString
|
||||
} from "lodash/fp";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import {
|
||||
isBinding, getBinding, setBinding
|
||||
} from "../common/binding";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import {
|
||||
isBinding, getBinding, setBinding
|
||||
} from "../common/binding";
|
||||
|
||||
export let value="";
|
||||
export let onChanged= () => {};
|
||||
export let type="";
|
||||
export let options=[];
|
||||
export let value="";
|
||||
export let onChanged= () => {};
|
||||
export let type="";
|
||||
export let options=[];
|
||||
|
||||
let isBound=false;
|
||||
let bindingPath="";
|
||||
let bindingFallbackValue="";
|
||||
let bindingSource="store";
|
||||
let isExpanded = false;
|
||||
let forceIsBound = false;
|
||||
let canOnlyBind = false;
|
||||
let isBound=false;
|
||||
let bindingPath="";
|
||||
let bindingFallbackValue="";
|
||||
let bindingSource="store";
|
||||
let isExpanded = false;
|
||||
let forceIsBound = false;
|
||||
let canOnlyBind = false;
|
||||
|
||||
$: {
|
||||
canOnlyBind = type === "state";
|
||||
if(!forceIsBound && canOnlyBind)
|
||||
forceIsBound = true;
|
||||
$: {
|
||||
canOnlyBind = type === "state";
|
||||
if(!forceIsBound && canOnlyBind)
|
||||
forceIsBound = true;
|
||||
|
||||
isBound= forceIsBound || isBinding(value);
|
||||
isBound= forceIsBound || isBinding(value);
|
||||
|
||||
if(isBound) {
|
||||
const binding = getBinding(value);
|
||||
bindingPath= binding.path;
|
||||
bindingFallbackValue= binding.fallback;
|
||||
bindingSource = binding.source || "store";
|
||||
} else {
|
||||
bindingPath="";
|
||||
bindingFallbackValue="";
|
||||
bindingSource="store";
|
||||
if(isBound) {
|
||||
const binding = getBinding(value);
|
||||
bindingPath= binding.path;
|
||||
bindingFallbackValue= binding.fallback;
|
||||
bindingSource = binding.source || "store";
|
||||
} else {
|
||||
bindingPath="";
|
||||
bindingFallbackValue="";
|
||||
bindingSource="store";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const clearBinding = () => {
|
||||
forceIsBound = false;
|
||||
onChanged("");
|
||||
}
|
||||
|
||||
const bind = (path, fallback, source) => {
|
||||
if(!path) {
|
||||
clearBinding("");
|
||||
return;
|
||||
const clearBinding = () => {
|
||||
forceIsBound = false;
|
||||
onChanged("");
|
||||
}
|
||||
const binding = setBinding({path, fallback, source});
|
||||
onChanged(binding);
|
||||
}
|
||||
|
||||
const setBindingPath = ev => {
|
||||
forceIsBound = canOnlyBind;
|
||||
bind(ev.target.value, bindingFallbackValue, bindingSource)
|
||||
}
|
||||
const bind = (path, fallback, source) => {
|
||||
if(!path) {
|
||||
clearBinding("");
|
||||
return;
|
||||
}
|
||||
const binding = setBinding({path, fallback, source});
|
||||
onChanged(binding);
|
||||
}
|
||||
|
||||
const setBindingFallback = ev => {
|
||||
bind(bindingPath, ev.target.value, bindingSource);
|
||||
}
|
||||
const setBindingPath = ev => {
|
||||
forceIsBound = canOnlyBind;
|
||||
bind(ev.target.value, bindingFallbackValue, bindingSource)
|
||||
}
|
||||
|
||||
const setBindingSource = ev => {
|
||||
bind(bindingPath, bindingFallbackValue, ev.target.value);
|
||||
}
|
||||
const setBindingFallback = ev => {
|
||||
bind(bindingPath, ev.target.value, bindingSource);
|
||||
}
|
||||
|
||||
// const makeBinding = () => {
|
||||
// forceIsBound=true;
|
||||
// isExpanded=true;
|
||||
// }
|
||||
const setBindingSource = ev => {
|
||||
bind(bindingPath, bindingFallbackValue, ev.target.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{#if isBound}
|
||||
<div>
|
||||
<div class="bound-header">
|
||||
<div>{isExpanded ? "" : bindingPath}</div>
|
||||
<IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
|
||||
size="12"
|
||||
on:click={() => isExpanded=!isExpanded}/>
|
||||
{#if !canOnlyBind}
|
||||
<IconButton icon="trash"
|
||||
size="12"
|
||||
on:click={clearBinding}/>
|
||||
<div>
|
||||
<div class="bound-header">
|
||||
<div>{isExpanded ? "" : bindingPath}</div>
|
||||
<IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
|
||||
size="12"
|
||||
on:click={() => isExpanded=!isExpanded}/>
|
||||
{#if !canOnlyBind}
|
||||
<IconButton icon="trash"
|
||||
size="12"
|
||||
on:click={clearBinding}/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div>
|
||||
<div class="binding-prop-label">Binding Path</div>
|
||||
<input class="uk-input uk-form-small"
|
||||
value={bindingPath}
|
||||
on:change={setBindingPath} >
|
||||
<div class="binding-prop-label">Fallback Value</div>
|
||||
<input class="uk-input uk-form-small"
|
||||
value={bindingFallbackValue}
|
||||
on:change={setBindingFallback} >
|
||||
<div class="binding-prop-label">Binding Source</div>
|
||||
<select class="uk-select uk-form-small"
|
||||
value={bindingSource}
|
||||
on:change={setBindingSource}>
|
||||
|
||||
<option>store</option>
|
||||
<option>context</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div>
|
||||
<div class="binding-prop-label">Binding Path</div>
|
||||
<input class="uk-input uk-form-small"
|
||||
value={bindingPath}
|
||||
on:change={setBindingPath} >
|
||||
<div class="binding-prop-label">Fallback Value</div>
|
||||
<input class="uk-input uk-form-small"
|
||||
value={bindingFallbackValue}
|
||||
on:change={setBindingFallback} >
|
||||
<div class="binding-prop-label">Binding Source</div>
|
||||
<select class="uk-select uk-form-small"
|
||||
value={bindingSource}
|
||||
on:change={setBindingSource}>
|
||||
|
||||
<option>store</option>
|
||||
<option>context</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<div class="unbound-container">
|
||||
<div class="unbound-container">
|
||||
|
||||
{#if type === "bool"}
|
||||
{#if type === "bool"}
|
||||
<div>
|
||||
<IconButton icon={value == true ? "check-square" : "square"}
|
||||
size="19"
|
||||
on:click={() => onChanged(!value)} />
|
||||
</div>
|
||||
{:else if type === "options"}
|
||||
<select class="uk-select uk-form-small"
|
||||
value={value}
|
||||
on:change={ev => onChanged(ev.target.value)}>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else}
|
||||
<input on:change={ev => onChanged(ev.target.value)}
|
||||
bind:value={value}
|
||||
style="flex: 1 0 auto;" />
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<IconButton icon={value == true ? "check-square" : "square"}
|
||||
size="19"
|
||||
on:click={() => onChanged(!value)} />
|
||||
</div>
|
||||
|
||||
{:else if type === "options"}
|
||||
|
||||
<select class="uk-select uk-form-small"
|
||||
value={value}
|
||||
on:change={ev => onChanged(ev.target.value)}>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
{:else}
|
||||
|
||||
<input on:change={ev => onChanged(ev.target.value)}
|
||||
bind:value={value}
|
||||
style="flex: 1 0 auto;" />
|
||||
|
||||
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,25 @@
|
|||
<script>
|
||||
import ComponentsHierarchy from "./ComponentsHierarchy.svelte";
|
||||
import PagesList from "./PagesList.svelte"
|
||||
import { store } from "../builderStore";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import Modal from "../common/Modal.svelte";
|
||||
import NewComponent from "./NewComponent.svelte";
|
||||
import CurrentItemPreview from "./CurrentItemPreview.svelte";
|
||||
import SettingsView from "./SettingsView.svelte";
|
||||
import PageView from "./PageView.svelte";
|
||||
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte";
|
||||
|
||||
import ComponentsHierarchy from "./ComponentsHierarchy.svelte";
|
||||
import PagesList from "./PagesList.svelte"
|
||||
import { store } from "../builderStore";
|
||||
import getIcon from "../common/icon";
|
||||
import { isComponent } from "./pagesParsing/searchComponents";
|
||||
import IconButton from "../common/IconButton.svelte";
|
||||
import Modal from "../common/Modal.svelte";
|
||||
import NewComponent from "./NewComponent.svelte";
|
||||
import CurrentItemPreview from "./CurrentItemPreview.svelte";
|
||||
import SettingsView from "./SettingsView.svelte";
|
||||
import PageView from "./PageView.svelte";
|
||||
import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte";
|
||||
let newComponentPicker;
|
||||
|
||||
let newComponentPicker;
|
||||
const newComponent = () => {
|
||||
newComponentPicker.show();
|
||||
}
|
||||
|
||||
let settingsView;
|
||||
const settings = () => {
|
||||
settingsView.show();
|
||||
}
|
||||
const newComponent = () => {
|
||||
newComponentPicker.show();
|
||||
}
|
||||
|
||||
let settingsView;
|
||||
const settings = () => {
|
||||
settingsView.show();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
|
@ -44,11 +41,6 @@ const settings = () => {
|
|||
|
||||
<span class="components-nav-header">Screens</span>
|
||||
<div>
|
||||
<!-- <IconButton icon="settings"
|
||||
size="14px"
|
||||
on:click={settings}/> -->
|
||||
<!-- <IconButton icon="plus"
|
||||
on:click={newComponent}/> -->
|
||||
<button on:click={newComponent}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -61,16 +53,16 @@ const settings = () => {
|
|||
|
||||
<div class="preview-pane">
|
||||
{#if $store.currentFrontEndType === "screen"}
|
||||
<CurrentItemPreview />
|
||||
<CurrentItemPreview />
|
||||
{:else if $store.currentFrontEndType === "page"}
|
||||
<PageView />
|
||||
<PageView />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $store.currentFrontEndType === "screen"}
|
||||
<div class="components-pane">
|
||||
<ComponentsPaneSwitcher />
|
||||
</div>
|
||||
<div class="components-pane">
|
||||
<ComponentsPaneSwitcher />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
|
@ -81,109 +73,108 @@ const settings = () => {
|
|||
|
||||
|
||||
<style>
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: var(--background-button);
|
||||
button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: var(--background-button);
|
||||
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
padding-bottom: 10px;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
padding-bottom: 10px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--button-text);
|
||||
}
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--button-text);
|
||||
}
|
||||
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 290px 1fr 300px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
}
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: 290px 1fr 300px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.ui-nav {
|
||||
grid-column: 1;
|
||||
background-color: var(--secondary5);
|
||||
height: 100%;
|
||||
padding: 0 1.5rem 0rem 1.5rem
|
||||
}
|
||||
.ui-nav {
|
||||
grid-column: 1;
|
||||
background-color: var(--secondary5);
|
||||
height: 100%;
|
||||
padding: 0 1.5rem 0rem 1.5rem
|
||||
}
|
||||
|
||||
.preview-pane {
|
||||
grid-column: 2;
|
||||
margin: 80px 60px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0px 6px rgba(0,0,0,0.05)
|
||||
}
|
||||
.preview-pane {
|
||||
grid-column: 2;
|
||||
margin: 80px 60px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0px 6px rgba(0,0,0,0.05)
|
||||
}
|
||||
|
||||
.components-pane {
|
||||
grid-column: 3;
|
||||
background-color: var(--secondary5);
|
||||
min-height: 0px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.components-pane {
|
||||
grid-column: 3;
|
||||
background-color: var(--secondary5);
|
||||
min-height: 0px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.components-nav-header {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.components-nav-header {
|
||||
font-size: 0.75rem;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
font-size: .9rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.nav-group-header {
|
||||
font-size: .9rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-items-container {
|
||||
padding: 1rem 0rem 0rem 0rem;
|
||||
}
|
||||
.nav-items-container {
|
||||
padding: 1rem 0rem 0rem 0rem;
|
||||
}
|
||||
|
||||
.nav-group-header {
|
||||
display: flex;
|
||||
padding: 2rem 0 0 0;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-group-header {
|
||||
display: flex;
|
||||
padding: 2rem 0 0 0;
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-group-header>div:nth-child(1) {
|
||||
padding: 0rem .5rem 0rem 0rem;
|
||||
vertical-align: bottom;
|
||||
grid-column-start: icon;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav-group-header>div:nth-child(1) {
|
||||
padding: 0rem .5rem 0rem 0rem;
|
||||
vertical-align: bottom;
|
||||
grid-column-start: icon;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.nav-group-header>span:nth-child(2) {
|
||||
margin-left:5px;
|
||||
vertical-align: bottom;
|
||||
grid-column-start: title;
|
||||
margin-top:auto;
|
||||
}
|
||||
.nav-group-header>span:nth-child(2) {
|
||||
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) {
|
||||
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 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
.nav-group-header>div:nth-child(3):hover {
|
||||
color: var(--primary75);
|
||||
}
|
||||
|
||||
.navigator-title {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue