forked from tsai/budibase
Conor Mack
7 years ago
74 changed files with 68056 additions and 5870 deletions
@ -1,114 +0,0 @@ |
|||||
<script> |
|
||||
|
|
||||
import PropsView from "./PropsView.svelte"; |
|
||||
import IconButton from "../common/IconButton.svelte"; |
|
||||
import { getComponentInfo } from "./pagesParsing/createProps"; |
|
||||
import { store } from "../builderStore"; |
|
||||
import { |
|
||||
cloneDeep, |
|
||||
isUndefined |
|
||||
} from "lodash/fp"; |
|
||||
import { fade, slide } from 'svelte/transition'; |
|
||||
|
|
||||
export let title = ""; |
|
||||
export let onGoBack = () => {}; |
|
||||
export let instanceProps = {}; |
|
||||
export let onPropsChanged = () => {}; |
|
||||
|
|
||||
|
|
||||
let editingSubComponentName; |
|
||||
let editingSubComponentProps; |
|
||||
let editingSubComponentArrayIndex; |
|
||||
let editingSubComponentArrayPropName; |
|
||||
let editingSubComponentTitle; |
|
||||
let allComponents; |
|
||||
|
|
||||
store.subscribe(s => { |
|
||||
allComponents = s.allComponents; |
|
||||
}) |
|
||||
|
|
||||
$: componentInfo = getComponentInfo( |
|
||||
allComponents, instanceProps._component); |
|
||||
|
|
||||
const onSubComponentGoBack = () => { |
|
||||
editingSubComponentName = null; |
|
||||
editingSubComponentProps = null; |
|
||||
} |
|
||||
|
|
||||
const onEditComponentProp = (propName, arrayIndex, arrayPropName) => { |
|
||||
editingSubComponentName = propName; |
|
||||
editingSubComponentTitle = isUndefined(arrayIndex) |
|
||||
? propName |
|
||||
: `${propName}[${arrayIndex}].${arrayPropName}`; |
|
||||
editingSubComponentProps = isUndefined(arrayIndex) |
|
||||
? instanceProps[propName] |
|
||||
: instanceProps[propName][arrayIndex][arrayPropName]; |
|
||||
editingSubComponentArrayIndex = arrayIndex; |
|
||||
editingSubComponentArrayPropName = arrayPropName; |
|
||||
}; |
|
||||
|
|
||||
|
|
||||
const onSubComponentPropsChanged = (subProps) => { |
|
||||
const newProps = cloneDeep(instanceProps); |
|
||||
if(isUndefined(editingSubComponentArrayIndex)) { |
|
||||
newProps[editingSubComponentName] = subProps; |
|
||||
} else { |
|
||||
newProps[editingSubComponentName] |
|
||||
[editingSubComponentArrayIndex] |
|
||||
[editingSubComponentArrayPropName] = subProps; |
|
||||
} |
|
||||
|
|
||||
instanceProps = newProps; |
|
||||
onPropsChanged(newProps); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
const propsChanged = newProps => { |
|
||||
instanceProps = newProps; |
|
||||
onPropsChanged(newProps); |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div> |
|
||||
|
|
||||
<div class="title"> |
|
||||
<IconButton icon="chevron-left" |
|
||||
on:click={onGoBack}/> |
|
||||
<span>{title}</span> |
|
||||
</div> |
|
||||
|
|
||||
{#if editingSubComponentName} |
|
||||
<div in:slide={{delay: 250, duration: 300}} |
|
||||
out:fade> |
|
||||
<svelte:self onPropsChanged={onSubComponentPropsChanged} |
|
||||
onGoBack={onSubComponentGoBack} |
|
||||
instanceProps={editingSubComponentProps} |
|
||||
title={editingSubComponentTitle} /> |
|
||||
</div> |
|
||||
{:else} |
|
||||
<PropsView {instanceProps} |
|
||||
{componentInfo} |
|
||||
onPropsChanged={propsChanged} |
|
||||
{onEditComponentProp} /> |
|
||||
{/if} |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.title { |
|
||||
padding:3px; |
|
||||
background-color: white; |
|
||||
color: var(--secondary100); |
|
||||
border-style:solid; |
|
||||
border-width: 1px 0 0 0; |
|
||||
border-color: var(--lightslate); |
|
||||
} |
|
||||
|
|
||||
.title > span { |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,139 +0,0 @@ |
|||||
<script> |
|
||||
import { |
|
||||
last |
|
||||
} from "lodash/fp"; |
|
||||
import IconButton from "../common/IconButton.svelte"; |
|
||||
import ComponentSelector from "./ComponentSelector.svelte"; |
|
||||
import Button from "../common/Button.svelte"; |
|
||||
import ButtonGroup from "../common/ButtonGroup.svelte"; |
|
||||
import UIkit from "uikit"; |
|
||||
import { |
|
||||
getComponentInfo |
|
||||
} from "./pagesParsing/createProps"; |
|
||||
import { store } from "../builderStore"; |
|
||||
|
|
||||
const emptyProps = () => ({_component:""}) |
|
||||
|
|
||||
export let props = emptyProps(); |
|
||||
export let onValueChanged = () => {}; |
|
||||
export let onComponentChosen = () => {}; |
|
||||
export let onEdit = () => {}; |
|
||||
export let disabled = false; |
|
||||
|
|
||||
const CHOOSE_COMPONENT = "choose_component"; |
|
||||
const CLEAR_COMPONENT = "clear_component"; |
|
||||
|
|
||||
let allComponents; |
|
||||
let modalElement; |
|
||||
let modalAction; |
|
||||
|
|
||||
store.subscribe(s => { |
|
||||
allComponents = s.allComponents; |
|
||||
}); |
|
||||
|
|
||||
$: componentSelected = props._component.length > 0; |
|
||||
$: shortName = last(props._component.split("/")); |
|
||||
|
|
||||
const chooseComponent = () => { |
|
||||
modalAction = CHOOSE_COMPONENT; |
|
||||
showDialog(); |
|
||||
} |
|
||||
|
|
||||
const clearComponent = () => { |
|
||||
modalAction = CLEAR_COMPONENT; |
|
||||
showDialog(); |
|
||||
} |
|
||||
|
|
||||
const componentChosen = (component) => { |
|
||||
const componentInfo = getComponentInfo(allComponents, component.name); |
|
||||
props = componentInfo.fullProps; |
|
||||
onValueChanged(props); |
|
||||
onComponentChosen(); |
|
||||
hideDialog(); |
|
||||
} |
|
||||
|
|
||||
const hideDialog = () => { |
|
||||
UIkit.modal(modalElement).hide(); |
|
||||
} |
|
||||
|
|
||||
const showDialog = () => { |
|
||||
UIkit.modal(modalElement).show(); |
|
||||
} |
|
||||
|
|
||||
const confirmClearComponent = () => { |
|
||||
props = emptyProps(); |
|
||||
onValueChanged(emptyProps()); |
|
||||
hideDialog(); |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
|
|
||||
<div class="root uk-form-controls"> |
|
||||
<div class:selectedname={componentSelected}> |
|
||||
{componentSelected ? shortName : "(none)"} |
|
||||
</div> |
|
||||
<div> |
|
||||
{#if !disabled && componentSelected} |
|
||||
<IconButton icon="edit" |
|
||||
on:click={() => onEdit()}/> |
|
||||
|
|
||||
<IconButton icon="trash" |
|
||||
on:click={() => clearComponent()} /> |
|
||||
{:else if !disabled && !componentSelected} |
|
||||
<IconButton icon="plus" |
|
||||
on:click={() => chooseComponent()} /> |
|
||||
{/if} |
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div bind:this={modalElement} uk-modal> |
|
||||
<div class="uk-modal-dialog" uk-overflow-auto> |
|
||||
|
|
||||
{#if modalAction === CHOOSE_COMPONENT} |
|
||||
<div class="uk-modal-body"> |
|
||||
<ComponentSelector onComponentChosen={componentChosen} |
|
||||
allowGenerators={false} /> |
|
||||
</div> |
|
||||
{:else if modalAction === CLEAR_COMPONENT} |
|
||||
<div class="uk-modal-body"> |
|
||||
Clear this component ? |
|
||||
</div> |
|
||||
<div class="uk-modal-footer"> |
|
||||
<ButtonGroup> |
|
||||
<Button grouped |
|
||||
on:click={hideDialog} |
|
||||
color="secondary" >Cancel</Button> |
|
||||
<Button grouped |
|
||||
on:click={confirmClearComponent}>OK</Button> |
|
||||
</ButtonGroup> |
|
||||
</div> |
|
||||
{/if} |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
.root { |
|
||||
display: grid; |
|
||||
grid-template-columns: [name] 1fr [actions] auto; |
|
||||
} |
|
||||
|
|
||||
.root > div:nth-child(1) { |
|
||||
grid-column-start: name; |
|
||||
color: var(--secondary50); |
|
||||
} |
|
||||
|
|
||||
.root > div:nth-child(2) { |
|
||||
grid-column-start: actions; |
|
||||
} |
|
||||
|
|
||||
.selectedname { |
|
||||
font-weight: bold; |
|
||||
color: var(--secondary); |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -0,0 +1,142 @@ |
|||||
|
<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"; |
||||
|
|
||||
|
let componentLibraries=[]; |
||||
|
|
||||
|
const addRootComponent = (c, all) => { |
||||
|
const { libName } = splitName(c.name); |
||||
|
let group = find(r => r.libName === libName)(all); |
||||
|
|
||||
|
if(!group) { |
||||
|
group = { |
||||
|
libName, |
||||
|
components: [], |
||||
|
generators: [] |
||||
|
}; |
||||
|
|
||||
|
all.push(group); |
||||
|
} |
||||
|
|
||||
|
group.components.push(c) |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
const onComponentChosen = (component) => { |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
store.subscribe(s => { |
||||
|
|
||||
|
const newComponentLibraries = []; |
||||
|
|
||||
|
for(let comp of sortBy(["name"])(s.components)) { |
||||
|
addRootComponent( |
||||
|
comp, |
||||
|
newComponentLibraries); |
||||
|
} |
||||
|
|
||||
|
componentLibraries = newComponentLibraries; |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
{#each componentLibraries as lib} |
||||
|
<div class="library-header"> |
||||
|
{lib.libName} |
||||
|
</div> |
||||
|
|
||||
|
<div class="library-container"> |
||||
|
|
||||
|
|
||||
|
<div class="inner-header"> |
||||
|
Components |
||||
|
</div> |
||||
|
|
||||
|
{#each lib.components as component} |
||||
|
|
||||
|
<div class="component" |
||||
|
on:click={() => onComponentChosen(component)}> |
||||
|
<div class="name"> |
||||
|
{splitName(component.name).componentName} |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
{component.description} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/each} |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
{/each} |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
.root { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.library-header { |
||||
|
font-size: 1.1em; |
||||
|
border-color: var(--primary25); |
||||
|
border-width: 1px 0px; |
||||
|
border-style: solid; |
||||
|
background-color: var(--primary10); |
||||
|
padding: 5px 0; |
||||
|
flex: 0 0 auto; |
||||
|
} |
||||
|
|
||||
|
.library-container { |
||||
|
padding: 0 0 10px 10px; |
||||
|
flex: 1 1 auto; |
||||
|
min-height: 0px; |
||||
|
} |
||||
|
|
||||
|
.inner-header { |
||||
|
font-size: 0.9em; |
||||
|
font-weight: bold; |
||||
|
margin-top: 7px; |
||||
|
margin-bottom: 3px; |
||||
|
} |
||||
|
|
||||
|
.component { |
||||
|
padding: 2px 0px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.component:hover { |
||||
|
background-color: var(--lightslate); |
||||
|
} |
||||
|
|
||||
|
.component > .name { |
||||
|
color: var(--secondary100); |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.component > .description { |
||||
|
font-size: 0.8em; |
||||
|
color: var(--secondary75); |
||||
|
display: inline-block; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
<script> |
||||
|
import EditComponentProps from "./EditComponentProps.svelte"; |
||||
|
import ComponentsList from "./ComponentsList.svelte"; |
||||
|
|
||||
|
let selected="properties"; |
||||
|
|
||||
|
const isSelected = tab => |
||||
|
selected === tab; |
||||
|
|
||||
|
const selectTab = tab => |
||||
|
selected = tab; |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
|
||||
|
<div class="switcher"> |
||||
|
|
||||
|
<button |
||||
|
class:selected={selected==="properties"} |
||||
|
on:click={() => selectTab("properties")}> |
||||
|
Properties |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
class:selected={selected==="components"} |
||||
|
on:click={() => selectTab("components")}> |
||||
|
Components |
||||
|
</button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="panel"> |
||||
|
{#if selected==="properties"} |
||||
|
<EditComponentProps /> |
||||
|
{/if} |
||||
|
|
||||
|
{#if selected==="components"} |
||||
|
<ComponentsList /> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
.root { |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.switcher { |
||||
|
flex: 0 0 auto; |
||||
|
} |
||||
|
|
||||
|
.switcher > button { |
||||
|
display: inline-block; |
||||
|
background-color: rgba(0,0,0,0); |
||||
|
border-style: solid; |
||||
|
border-color: var(--slate); |
||||
|
margin: 5px; |
||||
|
padding: 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.switcher > .selected { |
||||
|
background-color: red; |
||||
|
} |
||||
|
|
||||
|
.panel { |
||||
|
flex: 1 1 auto; |
||||
|
height: 0px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -1,161 +0,0 @@ |
|||||
<script> |
|
||||
import { store } from "../builderStore"; |
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName"; |
|
||||
import { |
|
||||
getIndexNodes, getRecordNodes, getIndexSchema, pipe |
|
||||
} from "../common/core"; |
|
||||
import { |
|
||||
map, some, filter |
|
||||
} from "lodash/fp"; |
|
||||
import Button from "../common/Button.svelte"; |
|
||||
import { componentDependencies } from "./pagesParsing/findDependencies"; |
|
||||
import { rename } from "./pagesParsing/renameComponent"; |
|
||||
import { getExactComponent } from "./pagesParsing/searchComponents"; |
|
||||
export let generator; |
|
||||
export let onConfirmGenerate; |
|
||||
|
|
||||
let libName; |
|
||||
let componentName; |
|
||||
let libs; |
|
||||
let existingComponents; |
|
||||
let _generator; |
|
||||
let components; |
|
||||
let generateParameter; |
|
||||
let allGeneratedComponents; |
|
||||
let selectedComponents = []; |
|
||||
|
|
||||
store.subscribe(s => { |
|
||||
libs = s.generatorLibraries; |
|
||||
generateParameter = { |
|
||||
indexes: getIndexNodes(s.hierarchy), |
|
||||
records: getRecordNodes(s.hierarchy), |
|
||||
helpers: { |
|
||||
indexSchema: getIndexSchema(s.hierarchy) |
|
||||
} |
|
||||
} |
|
||||
existingComponents = s.allComponents; |
|
||||
}); |
|
||||
|
|
||||
const componentExists = name => |
|
||||
getExactComponent(existingComponents, name); |
|
||||
|
|
||||
const componentsWithDependencies = () => { |
|
||||
|
|
||||
const cmp = map(c => { |
|
||||
const dependants = componentDependencies( |
|
||||
{}, [...selectedComponents, ...existingComponents], c); |
|
||||
const exists = componentExists(c.name); |
|
||||
return { |
|
||||
dependants: dependants.dependantComponents, |
|
||||
component:c, |
|
||||
error: exists ? "a component by this name already exists" : "" |
|
||||
}; |
|
||||
})(allGeneratedComponents); |
|
||||
components = cmp; |
|
||||
} |
|
||||
|
|
||||
$ : { |
|
||||
if(generator && generator !== _generator) { |
|
||||
_generator = generator; |
|
||||
|
|
||||
const sp = splitName(generator.name); |
|
||||
libName = sp.libName; |
|
||||
componentName = sp.componentName; |
|
||||
|
|
||||
allGeneratedComponents = libs[libName][componentName](generateParameter); |
|
||||
selectedComponents = |
|
||||
filter(c => !componentExists(c.name))(allGeneratedComponents); |
|
||||
componentsWithDependencies(); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
const onSelectedChanged = component => ev => { |
|
||||
const newselectedComponents = filter(c => c.name !== component.component.name)( |
|
||||
selectedComponents); |
|
||||
if(ev.target.checked) { |
|
||||
newselectedComponents.push(component.component); |
|
||||
} |
|
||||
|
|
||||
selectedComponents = newselectedComponents; |
|
||||
componentsWithDependencies(); |
|
||||
} |
|
||||
|
|
||||
const onNameChanged = component => ev => { |
|
||||
const newname = ev.target.value; |
|
||||
const oldname = component.component.name; |
|
||||
const result = rename({}, allGeneratedComponents, oldname, newname); |
|
||||
component.error = result.error || ""; |
|
||||
allGeneratedComponents = [...result.allComponents]; |
|
||||
selectedComponents = map(s => { |
|
||||
if(s.name === oldname) s.name = newname; |
|
||||
return s; |
|
||||
})(selectedComponents); |
|
||||
componentsWithDependencies(); |
|
||||
} |
|
||||
|
|
||||
const isComponentSelected = component => |
|
||||
some(c => c.name === component.component.name)(selectedComponents); |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
{#each components as c} |
|
||||
|
|
||||
<div class="component"> |
|
||||
|
|
||||
<div class="uk-inline"> |
|
||||
<input type="checkbox" |
|
||||
disabled={c.dependants.length > 0} |
|
||||
class="uk-checkbox" |
|
||||
checked={isComponentSelected(c)} |
|
||||
on:change={onSelectedChanged(c)}> |
|
||||
<input type="text" |
|
||||
value={c.component.name} |
|
||||
on:change={onNameChanged(c)} |
|
||||
class="uk-input title {c.error ? 'uk-form-danger' : ''}"> |
|
||||
{#if isComponentSelected(c)} |
|
||||
<span class="error">{c.error}</span> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<div class="description"> |
|
||||
{c.component.description} |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
{/each} |
|
||||
|
|
||||
<div class="button-container"> |
|
||||
<Button on:click={() => onConfirmGenerate(selectedComponents)}>Add Components</Button> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
.component { |
|
||||
padding: 5px 0; |
|
||||
} |
|
||||
|
|
||||
.component .title { |
|
||||
width: 300px |
|
||||
} |
|
||||
|
|
||||
.component > .description { |
|
||||
font-size: 0.8em; |
|
||||
color: var(--secondary75); |
|
||||
} |
|
||||
|
|
||||
.button-container { |
|
||||
text-align: right; |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
|
|
||||
.error { |
|
||||
font-size: 10pt; |
|
||||
color: red; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,120 +0,0 @@ |
|||||
<script> |
|
||||
import IconButton from "../common/IconButton.svelte"; |
|
||||
import { |
|
||||
createArrayElementProps |
|
||||
} from "./pagesParsing/createProps"; |
|
||||
import PropControl from "./PropControl.svelte"; |
|
||||
import { |
|
||||
some, |
|
||||
cloneDeep, |
|
||||
} from "lodash/fp"; |
|
||||
import { validateProps } from "./pagesParsing/validateProps"; |
|
||||
|
|
||||
export let parentProps; |
|
||||
export let propDef; |
|
||||
export let onValueChanged; |
|
||||
export let onValidate = () => {}; |
|
||||
export let onEditComponentProp = () => {}; |
|
||||
|
|
||||
let value = []; |
|
||||
let elementDefinitionArray; |
|
||||
let elementErrors = {}; |
|
||||
|
|
||||
$: { |
|
||||
const elArray = []; |
|
||||
for(let elProp in propDef.elementDefinition) { |
|
||||
if(elProp === "_component") continue; |
|
||||
elArray.push({ |
|
||||
...propDef.elementDefinition[elProp], |
|
||||
____name: elProp |
|
||||
}); |
|
||||
} |
|
||||
elementDefinitionArray = elArray; |
|
||||
value = parentProps[propDef.____name]; |
|
||||
} |
|
||||
|
|
||||
const addElement = () => { |
|
||||
const newElement = createArrayElementProps( |
|
||||
propDef.____name, |
|
||||
propDef.elementDefinition).props; |
|
||||
|
|
||||
value = [...value, newElement]; |
|
||||
onValueChanged(value); |
|
||||
} |
|
||||
|
|
||||
const validate = (index, elementProps) => { |
|
||||
elementErrors[index] = validateProps( |
|
||||
propDef.elementDefinition, elementProps, [], true); |
|
||||
onValidate(elementErrors[index]); |
|
||||
return elementErrors[index].length === 0; |
|
||||
} |
|
||||
|
|
||||
const setProp = (index) => (name, propValue) => { |
|
||||
const newValue = cloneDeep(value); |
|
||||
const newProps = cloneDeep(newValue[index]); |
|
||||
newProps[name] = propValue; |
|
||||
newValue[index] = newProps; |
|
||||
value = newValue; |
|
||||
|
|
||||
if(validate(index, newProps)) |
|
||||
onValueChanged(newValue); |
|
||||
|
|
||||
} |
|
||||
|
|
||||
let fieldHasError = index => propName => |
|
||||
some(e => e.propName === propName)(elementErrors[index]); |
|
||||
|
|
||||
const onEditComponent = (index, propName) => () => { |
|
||||
onEditComponentProp(index, propName); |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="root"> |
|
||||
|
|
||||
|
|
||||
<div class="item-container"> |
|
||||
{#each value as item, index} |
|
||||
|
|
||||
<div class="item-inner-container"> |
|
||||
{#each elementDefinitionArray as propDef} |
|
||||
<PropControl setProp={setProp(index)} |
|
||||
fieldHasError={fieldHasError(index)} |
|
||||
{propDef} |
|
||||
props={item} |
|
||||
{index} |
|
||||
onEditComponent={onEditComponent(index, propDef.____name)} |
|
||||
disabled={false} /> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
{/each} |
|
||||
|
|
||||
<div class="addelement-container" |
|
||||
on:click={addElement}> |
|
||||
<IconButton icon="plus" |
|
||||
size="12"/> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
.addelement-container { |
|
||||
cursor: pointer; |
|
||||
padding: 3px 0px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.addelement-container:hover { |
|
||||
background-color: var(--primary25); |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.item-container { |
|
||||
padding-left: 3px; |
|
||||
background: var(--secondary10); |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,10 +1,10 @@ |
|||||
import { isRootComponent } from "./searchComponents"; |
import { isRootComponent } from "./searchComponents"; |
||||
import { find } from "lodash/fp"; |
import { find } from "lodash/fp"; |
||||
|
|
||||
export const getRootComponent = (componentName, allComponents) => { |
export const getRootComponent = (componentName, components) => { |
||||
const component = find(c => c.name === componentName)(allComponents); |
const component = find(c => c.name === componentName)(components); |
||||
|
|
||||
if(isRootComponent(component)) return component; |
if(isRootComponent(component)) return component; |
||||
|
|
||||
return getRootComponent(component.inherits, allComponents); |
return getRootComponent(component.props._component, components); |
||||
} |
} |
||||
@ -1,44 +1,50 @@ |
|||||
import { expandPropsDefinition } from "../src/userInterface/pagesParsing/types"; |
import { expandComponentDefinition } from "../src/userInterface/pagesParsing/types"; |
||||
|
|
||||
const propDef = { |
const componentDef = () => ({ |
||||
label: "string", |
name: "comp", |
||||
width: {type:"number"}, |
props: { |
||||
color: {type:"string", required:true}, |
label: "string", |
||||
child: "component", |
width: {type:"number"}, |
||||
navitems: { |
color: {type:"string", required:true}, |
||||
type: "array", |
|
||||
elementDefinition: { |
|
||||
name: {type:"string"}, |
|
||||
height: "number" |
|
||||
} |
|
||||
} |
} |
||||
} |
}) |
||||
|
|
||||
describe("expandPropDefintion", () => { |
describe("expandPropDefintion", () => { |
||||
|
|
||||
it("should expand property defined as string, into default for that type", () => { |
it("should expand property defined as string, into default for that type", () => { |
||||
|
|
||||
const result = expandPropsDefinition(propDef); |
const result = expandComponentDefinition(componentDef()); |
||||
|
|
||||
expect(result.label.type).toBe("string"); |
expect(result.props.label.type).toBe("string"); |
||||
expect(result.label.required).toBe(false); |
expect(result.props.label.required).toBe(false); |
||||
}); |
}); |
||||
|
|
||||
it("should add members to property defined as object, when members do not exist", () => { |
it("should add members to property defined as object, when members do not exist", () => { |
||||
|
|
||||
const result = expandPropsDefinition(propDef); |
const result = expandComponentDefinition(componentDef()); |
||||
expect(result.width.required).toBe(false); |
expect(result.props.width.required).toBe(false); |
||||
}); |
}); |
||||
|
|
||||
it("should not override existing memebers", () => { |
it("should not override existing memebers", () => { |
||||
|
|
||||
const result = expandPropsDefinition(propDef); |
const result = expandComponentDefinition(componentDef()); |
||||
expect(result.color.required).toBe(true); |
expect(result.props.color.required).toBe(true); |
||||
}); |
}); |
||||
|
|
||||
it("should also expand out elementdefinition of array", () => { |
it("should set children=true when not included", () => { |
||||
const result = expandPropsDefinition(propDef); |
const result = expandComponentDefinition(componentDef()); |
||||
expect(result.navitems.elementDefinition.height.type).toBe("number"); |
expect(result.children).toBe(true); |
||||
}) |
}); |
||||
|
|
||||
|
it("should not change children when specified", () => { |
||||
|
const c = componentDef(); |
||||
|
c.children = false; |
||||
|
const result = expandComponentDefinition(c); |
||||
|
expect(result.children).toBe(false); |
||||
|
|
||||
|
c.children = true; |
||||
|
const result2 = expandComponentDefinition(c); |
||||
|
expect(result2.children).toBe(true); |
||||
|
}); |
||||
|
|
||||
}) |
}) |
||||
@ -1,79 +0,0 @@ |
|||||
import { |
|
||||
searchAllComponents, |
|
||||
getExactComponent, |
|
||||
getAncestorProps |
|
||||
} from "../src/userInterface/pagesParsing/searchComponents"; |
|
||||
import { |
|
||||
rename |
|
||||
} from "../src/userInterface/pagesParsing/renameComponent"; |
|
||||
import { allComponents } from "./testData"; |
|
||||
|
|
||||
describe("rename component", () => { |
|
||||
it("should change the name of the component, duh", () => { |
|
||||
|
|
||||
const components = allComponents(); |
|
||||
|
|
||||
const result = rename({}, components, "PrimaryButton", "MainButton"); |
|
||||
|
|
||||
const newComponent = getExactComponent(result.allComponents, "MainButton"); |
|
||||
const oldComponent = getExactComponent(result.allComponents, "Primary"); |
|
||||
expect(oldComponent).toBeUndefined(); |
|
||||
expect(newComponent).toBeDefined(); |
|
||||
expect(newComponent.name).toBe("MainButton"); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
it("should chnge name on inherits", () => { |
|
||||
|
|
||||
const components = allComponents(); |
|
||||
|
|
||||
const result = rename({}, components, "common/SmallTextbox", "common/TinyTextbox"); |
|
||||
|
|
||||
const passwordTextbox = getExactComponent(result.allComponents, "common/PasswordBox"); |
|
||||
expect(passwordTextbox.inherits).toBe("common/TinyTextbox"); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
it("should change name of nested _components", () => { |
|
||||
const components = allComponents(); |
|
||||
const result = rename({}, components, "PrimaryButton", "MainButton"); |
|
||||
|
|
||||
const buttonGroup = getExactComponent(result.allComponents, "ButtonGroup"); |
|
||||
expect(buttonGroup.props.header._component).toBe("MainButton"); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
it("should change name of nested _components inside arrays", () => { |
|
||||
const components = allComponents(); |
|
||||
const result = rename({}, components, "PrimaryButton", "MainButton"); |
|
||||
|
|
||||
const buttonGroup = getExactComponent(result.allComponents, "ButtonGroup"); |
|
||||
expect(buttonGroup.props.children[0].control._component).toBe("MainButton"); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
|
|
||||
it("should change name of page appBody", () => { |
|
||||
const components = allComponents(); |
|
||||
const pages = { |
|
||||
main: { |
|
||||
appBody: "PrimaryButton" |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const result = rename(pages, components, "PrimaryButton", "MainButton"); |
|
||||
expect(result.pages.main.appBody).toBe("MainButton"); |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
it("should return a list of changed components", () => { |
|
||||
const components = allComponents(); |
|
||||
const result = rename({}, components, "PrimaryButton", "MainButton"); |
|
||||
|
|
||||
expect(result.changedComponents).toEqual(["ButtonGroup"]); |
|
||||
|
|
||||
const result2 = rename({}, components, "common/SmallTextbox", "common/TinyTextBox"); |
|
||||
expect(result2.changedComponents).toEqual(["common/PasswordBox"]); |
|
||||
|
|
||||
}); |
|
||||
}) |
|
||||
@ -0,0 +1,61 @@ |
|||||
|
import { |
||||
|
getExactComponent |
||||
|
} from "../src/userInterface/pagesParsing/searchComponents"; |
||||
|
import { |
||||
|
rename |
||||
|
} from "../src/userInterface/pagesParsing/renameScreen"; |
||||
|
import { componentsAndScreens } from "./testData"; |
||||
|
|
||||
|
describe("rename component", () => { |
||||
|
it("should change the name of the component, duh", () => { |
||||
|
|
||||
|
const {screens} = componentsAndScreens(); |
||||
|
|
||||
|
const result = rename({}, screens, "PrimaryButton", "MainButton"); |
||||
|
|
||||
|
const newComponent = getExactComponent(result.screens, "MainButton"); |
||||
|
const oldComponent = getExactComponent(result.screens, "Primary"); |
||||
|
expect(oldComponent).toBeUndefined(); |
||||
|
expect(newComponent).toBeDefined(); |
||||
|
expect(newComponent.name).toBe("MainButton"); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
/* this may be usefull if we have user defined components |
||||
|
it("should change name of nested _components", () => { |
||||
|
const {screens} = componentsAndScreens(); |
||||
|
const result = rename({}, screens, "PrimaryButton", "MainButton"); |
||||
|
|
||||
|
const buttonGroup = getExactComponent(result.screens, "ButtonGroup"); |
||||
|
expect(buttonGroup.props.header[0]._component).toBe("MainButton"); |
||||
|
|
||||
|
}); |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
it("should change name of page appBody", () => { |
||||
|
const {screens} = componentsAndScreens(); |
||||
|
const pages = { |
||||
|
main: { |
||||
|
appBody: "PrimaryButton" |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const result = rename(pages, screens, "PrimaryButton", "MainButton"); |
||||
|
expect(result.pages.main.appBody).toBe("MainButton"); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
/* this may be usefull if we have user defined components |
||||
|
it("should return a list of changed components", () => { |
||||
|
const {screens} = componentsAndScreens(); |
||||
|
const result = rename({}, screens, "PrimaryButton", "MainButton"); |
||||
|
|
||||
|
expect(result.changedScreens).toEqual(["ButtonGroup"]); |
||||
|
|
||||
|
const result2 = rename({}, screens, "common/SmallTextbox", "common/TinyTextBox"); |
||||
|
expect(result2.changedScreens).toEqual(["Field"]); |
||||
|
|
||||
|
}); |
||||
|
*/ |
||||
|
}) |
||||
@ -1,98 +1,102 @@ |
|||||
|
|
||||
export const allComponents = () => ([ |
export const componentsAndScreens = () => ({ |
||||
{ |
components: [ |
||||
name: "budibase-components/TextBox", |
{ |
||||
tags: ["Text", "input"], |
name: "budibase-components/TextBox", |
||||
props: { |
tags: ["Text", "input"], |
||||
size: {type:"options", options:["small", "medium", "large"]}, |
children: false, |
||||
isPassword: "bool", |
props: { |
||||
placeholder: "string", |
size: {type:"options", options:["small", "medium", "large"]}, |
||||
label:"string" |
isPassword: "bool", |
||||
} |
placeholder: "string", |
||||
}, |
label:"string" |
||||
{ |
|
||||
name: "budibase-components/Button", |
|
||||
tags: ["input"], |
|
||||
props: { |
|
||||
size: {type:"options", options:["small", "medium", "large"]}, |
|
||||
css: "string", |
|
||||
content: "component", |
|
||||
contentText: "string" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
name: "budibase-components/div", |
|
||||
tags: ["input"], |
|
||||
props: { |
|
||||
width: "number", |
|
||||
header : "component", |
|
||||
children: { |
|
||||
type:"array", |
|
||||
elementDefinition: { |
|
||||
control: "component" |
|
||||
} |
|
||||
} |
} |
||||
|
}, |
||||
|
{ |
||||
|
name: "budibase-components/Button", |
||||
|
tags: ["input"], |
||||
|
children: true, |
||||
|
props: { |
||||
|
size: {type:"options", options:["small", "medium", "large"]}, |
||||
|
css: "string", |
||||
|
contentText: "string" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name: "budibase-components/div", |
||||
|
tags: ["input"], |
||||
|
props: { |
||||
|
width: "number", |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
name:"budibase-components/RecordView", |
||||
|
tags: ["record"], |
||||
|
props: { |
||||
|
data: "state" |
||||
|
} |
||||
} |
} |
||||
}, |
], |
||||
{ |
screens: [ |
||||
name:"budibase-components/RecordView", |
{ |
||||
tags: ["record"], |
name: "common/SmallTextbox", |
||||
props: { |
props: { |
||||
data: "state" |
_component: "budibase-components/TextBox", |
||||
} |
size: "small" |
||||
}, |
} |
||||
{ |
}, |
||||
inherits:"budibase-components/TextBox", |
|
||||
name: "common/SmallTextbox", |
{ |
||||
props: { |
name: "common/PasswordBox", |
||||
size: "small" |
tags: ["mask"], |
||||
} |
props: { |
||||
}, |
_component: "budibase-components/TextBox", |
||||
|
isPassword: true, |
||||
{ |
size: "small" |
||||
inherits:"common/SmallTextbox", |
} |
||||
name: "common/PasswordBox", |
}, |
||||
tags: ["mask"], |
|
||||
props: { |
|
||||
isPassword: true |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
inherits:"budibase-components/Button", |
|
||||
name:"PrimaryButton", |
|
||||
props: { |
|
||||
css:"btn-primary" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
inherits:"budibase-components/div", |
|
||||
name:"ButtonGroup", |
|
||||
props: { |
|
||||
|
|
||||
width: 100, |
{ |
||||
header: { |
name:"PrimaryButton", |
||||
_component: "PrimaryButton" |
props: { |
||||
}, |
_component:"budibase-components/Button", |
||||
children: [ |
css:"btn-primary" |
||||
{ |
} |
||||
control: { |
}, |
||||
_component: "PrimaryButton", |
|
||||
|
{ |
||||
|
name:"ButtonGroup", |
||||
|
props: { |
||||
|
_component:"budibase-components/div", |
||||
|
width: 100, |
||||
|
_children: [ |
||||
|
{ |
||||
|
_component: "budibase-components/Button", |
||||
contentText: "Button 1" |
contentText: "Button 1" |
||||
} |
}, |
||||
}, |
{ |
||||
{ |
_component: "budibase-components/Button", |
||||
control: { |
|
||||
_component: "PrimaryButton", |
|
||||
contentText: "Button 2" |
contentText: "Button 2" |
||||
|
}, |
||||
|
{ |
||||
|
_component: "budibase-components/TextBox", |
||||
|
isPassword: true, |
||||
|
size: "small" |
||||
} |
} |
||||
}, |
] |
||||
{ |
} |
||||
control: { |
}, |
||||
_component: "common/PasswordBox", |
|
||||
|
{ |
||||
|
name:"Field", |
||||
|
props: { |
||||
|
_component:"budibase-components/div", |
||||
|
_children:[ |
||||
|
{ |
||||
|
_component: "common/SmallTextbox" |
||||
} |
} |
||||
} |
] |
||||
] |
} |
||||
} |
}, |
||||
} |
] |
||||
|
}); |
||||
]) |
|
||||
File diff suppressed because one or more lines are too long
@ -1,49 +1,46 @@ |
|||||
main.svelte-15fmzor{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif} |
main.svelte-15fmzor{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif} |
||||
.root.svelte-y7jhgd{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-y7jhgd{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-y7jhgd{flex:1 1 auto;width:100%;height:100px}.content.svelte-y7jhgd>div.svelte-y7jhgd{height:100%;width:100%}.topnavitem.svelte-y7jhgd{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-y7jhgd:hover{color:var(--secondary75);font-weight:600}.active.svelte-y7jhgd{color:var(--primary100);font-weight:900} |
|
||||
.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-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-y7jhgd{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-y7jhgd{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-y7jhgd{flex:1 1 auto;width:100%;height:100px}.content.svelte-y7jhgd>div.svelte-y7jhgd{height:100%;width:100%}.topnavitem.svelte-y7jhgd{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-y7jhgd:hover{color:var(--secondary75);font-weight:600}.active.svelte-y7jhgd{color:var(--primary100);font-weight:900} |
||||
button.svelte-bxuckr{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-bxuckr:hover{color:var(--hovercolor)}button.svelte-bxuckr:active{outline:none} |
button.svelte-bxuckr{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-bxuckr:hover{color:var(--hovercolor)}button.svelte-bxuckr:active{outline:none} |
||||
.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)} |
.border-normal.svelte-vnon4v{border-radius:var(--borderradiusall)}.border-left.svelte-vnon4v{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-vnon4v{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-vnon4v{border-radius:0}button.svelte-vnon4v{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-vnon4v{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-vnon4v:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-vnon4v:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-vnon4v:hover{background-color:var(--primary10)}.primary-outline.svelte-vnon4v:pressed{background-color:var(--primary25)}.secondary.svelte-vnon4v{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-vnon4v:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-vnon4v:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-vnon4v:hover{background-color:var(--secondary10)}.secondary-outline.svelte-vnon4v:pressed{background-color:var(--secondary25)}.success.svelte-vnon4v{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-vnon4v:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-vnon4v:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-vnon4v:hover{background-color:var(--success10)}.success-outline.svelte-vnon4v:pressed{background-color:var(--success25)}.deletion.svelte-vnon4v{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-vnon4v:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-vnon4v:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-vnon4v{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-vnon4v:hover{background-color:var(--deletion10)}.deletion-outline.svelte-vnon4v:pressed{background-color:var(--deletion25)} |
||||
|
.root.svelte-17zel0b{display:grid;grid-template-columns:250px 1fr 300px;height:100%;width:100%}.ui-nav.svelte-17zel0b{grid-column:1;background-color:var(--secondary5);height:100%}.preview-pane.svelte-17zel0b{grid-column:2}.components-pane.svelte-17zel0b{grid-column:3;background-color:var(--secondary5);min-height:0px;overflow-y:hidden}.pages-list-container.svelte-17zel0b{padding-top:2rem}.components-nav-header.svelte-17zel0b{font-size:.9rem}.nav-group-header.svelte-17zel0b{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-17zel0b{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-17zel0b{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-17zel0b>div.svelte-17zel0b:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-17zel0b>span.svelte-17zel0b:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-17zel0b>div.svelte-17zel0b:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-17zel0b>div.svelte-17zel0b:nth-child(3):hover{color:var(--primary75)} |
||||
.root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%} |
.root.svelte-q8uz1n{height:100%;display:flex}.content.svelte-q8uz1n{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-q8uz1n{flex:0 1 auto;width:300px;height:100%} |
||||
.root.svelte-rjo9m0{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-rjo9m0{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-rjo9m0{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-rjo9m0{padding-top:2rem}.components-nav-header.svelte-rjo9m0{font-size:.9rem}.nav-group-header.svelte-rjo9m0{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-rjo9m0{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-rjo9m0{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-rjo9m0>span.svelte-rjo9m0:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-rjo9m0>div.svelte-rjo9m0:nth-child(3):hover{color:var(--primary75)} |
.root.svelte-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px} |
||||
|
.uk-modal-dialog.svelte-91ta29{border-radius:.3rem} |
||||
|
.root.svelte-1r2dipt{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1r2dipt{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1r2dipt:hover{color:var(--secondary)}.component.svelte-1r2dipt{margin-left:5px}.currentfolder.svelte-1r2dipt{color:var(--secondary100)}.selected.svelte-1r2dipt{color:var(--primary100);font-weight:bold}.title.svelte-1r2dipt{margin-left:10px} |
||||
|
.root.svelte-r1aen3{height:100%;display:flex;flex-direction:column;border-style:solid;border-width:1px 0 0 0;border-color:var(--slate)}.title.svelte-r1aen3{padding:1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-r1aen3>div.svelte-r1aen3:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-r1aen3>div.svelte-r1aen3:nth-child(2){grid-column-start:actions}.component-props-container.svelte-r1aen3{flex:1 1 auto;overflow-y:auto} |
||||
|
.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon} |
||||
|
.root.svelte-18ccx5u{display:flex;flex-direction:column}.library-header.svelte-18ccx5u{font-size:1.1em;border-color:var(--primary25);border-width:1px 0px;border-style:solid;background-color:var(--primary10);padding:5px 0;flex:0 0 auto}.library-container.svelte-18ccx5u{padding:0 0 10px 10px;flex:1 1 auto;min-height:0px}.inner-header.svelte-18ccx5u{font-size:0.9em;font-weight:bold;margin-top:7px;margin-bottom:3px}.component.svelte-18ccx5u{padding:2px 0px;cursor:pointer}.component.svelte-18ccx5u:hover{background-color:var(--lightslate)}.component.svelte-18ccx5u>.name.svelte-18ccx5u{color:var(--secondary100);display:inline-block}.component.svelte-18ccx5u>.description.svelte-18ccx5u{font-size:0.8em;color:var(--secondary75);display:inline-block;margin-left:10px} |
||||
|
h1.svelte-11kb98w{font-size:1.2em} |
||||
|
.component-container.svelte-12kdu9y{grid-row-start:middle;grid-column-start:middle;position:relative;overflow:hidden;padding-top:56.25%;margin:auto}.component-container.svelte-12kdu9y iframe.svelte-12kdu9y{border:0;height:100%;left:0;position:absolute;top:0;width:100%} |
||||
h4.svelte-sqtlby{margin-top:20px} |
h4.svelte-sqtlby{margin-top:20px} |
||||
.root.svelte-wfv60d{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-wfv60d{flex:0 1 auto}.node-view.svelte-wfv60d{overflow-y:auto;flex:1 1 auto} |
.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt} |
||||
.items-root.svelte-19lmivt{display:flex;flex-direction:column;max-height:100%;height:100%;background-color:var(--secondary5)}.nav-group-header.svelte-19lmivt{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-19lmivt{flex:auto 1 1}.hierarchy.svelte-19lmivt{display:flex;flex-direction:column;flex:1 0 auto;height:100px}.hierarchy-items-container.svelte-19lmivt{flex:1 1 auto;overflow-y:auto} |
.items-root.svelte-19lmivt{display:flex;flex-direction:column;max-height:100%;height:100%;background-color:var(--secondary5)}.nav-group-header.svelte-19lmivt{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:2rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-19lmivt>div.svelte-19lmivt:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-19lmivt{flex:auto 1 1}.hierarchy.svelte-19lmivt{display:flex;flex-direction:column;flex:1 0 auto;height:100px}.hierarchy-items-container.svelte-19lmivt{flex:1 1 auto;overflow-y:auto} |
||||
|
.root.svelte-wfv60d{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-wfv60d{flex:0 1 auto}.node-view.svelte-wfv60d{overflow-y:auto;flex:1 1 auto} |
||||
.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem} |
.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem} |
||||
.root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto} |
.root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto} |
||||
.root.svelte-117bbrk{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-117bbrk{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-117bbrk:hover{color:var(--secondary100)}.component.svelte-117bbrk{margin-left:5px}.selected.svelte-117bbrk{color:var(--primary100);font-weight:bold}.title.svelte-117bbrk{margin-left:10px} |
|
||||
h1.svelte-16jkjx9{font-size:1.2em} |
|
||||
.root.svelte-1r2dipt{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1r2dipt{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1r2dipt:hover{color:var(--secondary)}.component.svelte-1r2dipt{margin-left:5px}.currentfolder.svelte-1r2dipt{color:var(--secondary100)}.selected.svelte-1r2dipt{color:var(--primary100);font-weight:bold}.title.svelte-1r2dipt{margin-left:10px} |
|
||||
.uk-modal-dialog.svelte-vwwrf9{border-radius:.3rem} |
|
||||
.root.svelte-1abif7s{height:100%;display:flex;flex-direction:column}.padding.svelte-1abif7s{padding:1rem 1rem 0rem 1rem}.info-text.svelte-1abif7s{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-1abif7s{padding:2rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-1abif7s>div.svelte-1abif7s:nth-child(2){grid-column-start:actions}.section-header.svelte-1abif7s{display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary50);font-size:.9rem;font-weight:bold;vertical-align:middle}.component-props-container.svelte-1abif7s{flex:1 1 auto;overflow-y:auto} |
|
||||
.root.svelte-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt} |
|
||||
.section-container.svelte-yk1mmr{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-yk1mmr:nth-child(1){margin-bottom:15px}.row-text.svelte-yk1mmr{margin-right:15px;color:var(--primary100)}input.svelte-yk1mmr{margin-right:15px}p.svelte-yk1mmr>span.svelte-yk1mmr{margin-left:30px}.header.svelte-yk1mmr{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(1){grid-column-start:title}.header.svelte-yk1mmr>div.svelte-yk1mmr:nth-child(2){grid-column-start:icon} |
|
||||
.component-container.svelte-teqoiq{grid-row-start:middle;grid-column-start:middle;position:relative;overflow:hidden;padding-top:56.25%;margin:auto}.component-container.svelte-teqoiq iframe.svelte-teqoiq{border:0;height:100%;left:0;position:absolute;top:0;width:100%} |
|
||||
.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0} |
.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0} |
||||
.edit-button.svelte-zm41av{cursor:pointer;color:var(--secondary25)}.title.svelte-zm41av{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-zm41av{font-weight:500;font-size:.9rem}tr.svelte-zm41av:hover .edit-button.svelte-zm41av{color:var(--secondary75)} |
.library-header.svelte-chhyel{font-size:1.1em;border-color:var(--primary25);border-width:1px 0px;border-style:solid;background-color:var(--primary10);padding:5px 0}.library-container.svelte-chhyel{padding:0 0 10px 10px}.inner-header.svelte-chhyel{font-size:0.9em;font-weight:bold;margin-top:7px;margin-bottom:3px}.component.svelte-chhyel{padding:2px 0px;cursor:pointer}.component.svelte-chhyel:hover{background-color:var(--lightslate)}.component.svelte-chhyel>.name.svelte-chhyel{color:var(--secondary100);display:inline-block}.component.svelte-chhyel>.description.svelte-chhyel{font-size:0.8em;color:var(--secondary75);display:inline-block;margin-left:10px} |
||||
|
.info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)} |
||||
|
.root.svelte-t6vms4{font-size:10pt;width:100%}.form-root.svelte-t6vms4{display:flex;flex-wrap:wrap}.prop-container.svelte-t6vms4{flex:1 1 auto;min-width:250px} |
||||
|
.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{background-color:var(--primary10)} |
||||
.dropdown-background.svelte-11ifkop{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-11ifkop{cursor:pointer;z-index:1}.dropdown-content.svelte-11ifkop{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-11ifkop:not(:focus){display:none}.action-row.svelte-11ifkop{padding:7px 10px;cursor:pointer}.action-row.svelte-11ifkop:hover{background-color:var(--primary100);color:var(--white)} |
.dropdown-background.svelte-11ifkop{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-11ifkop{cursor:pointer;z-index:1}.dropdown-content.svelte-11ifkop{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-11ifkop:not(:focus){display:none}.action-row.svelte-11ifkop{padding:7px 10px;cursor:pointer}.action-row.svelte-11ifkop:hover{background-color:var(--primary100);color:var(--white)} |
||||
.edit-button.svelte-lhfdtn{cursor:pointer;color:var(--secondary25)}tr.svelte-lhfdtn:hover .edit-button.svelte-lhfdtn{color:var(--secondary75)}.title.svelte-lhfdtn{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-lhfdtn{font-weight:500;font-size:.9rem} |
|
||||
.root.svelte-17ju2r{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-17ju2r{padding-top:.5rem;padding-right:.5rem}.title.svelte-17ju2r:hover{background-color:var(--secondary10)}.active.svelte-17ju2r{background-color:var(--primary10)} |
.root.svelte-17ju2r{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-17ju2r{padding-top:.5rem;padding-right:.5rem}.title.svelte-17ju2r:hover{background-color:var(--secondary10)}.active.svelte-17ju2r{background-color:var(--primary10)} |
||||
.nav-item.svelte-1i5jqm7{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1i5jqm7:hover{background-color:var(--primary10)}.active.svelte-1i5jqm7{background-color:var(--primary10)} |
|
||||
.root.svelte-18xd5y3{height:100%;padding:2rem}.settings-title.svelte-18xd5y3{font-weight:700}.title.svelte-18xd5y3{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-18xd5y3{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-18xd5y3{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-18xd5y3{cursor:pointer}.edit-button.svelte-18xd5y3{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-18xd5y3:hover{cursor:pointer;color:var(--secondary75)}th.svelte-18xd5y3{text-align:left}td.svelte-18xd5y3{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-18xd5y3{font-size:14px;font-weight:500}thead.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-18xd5y3>tr.svelte-18xd5y3{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-18xd5y3>tr.svelte-18xd5y3:hover{background-color:var(--primary10)}tbody.svelte-18xd5y3>tr:hover .edit-button.svelte-18xd5y3{color:var(--secondary75)}.index-container.svelte-18xd5y3{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-18xd5y3{color:var(--slate)}.index-name.svelte-18xd5y3{font-weight:bold;color:var(--primary100)}.index-container.svelte-18xd5y3 code.svelte-18xd5y3{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-18xd5y3{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px} |
|
||||
.root.svelte-ehsf0i{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-ehsf0i{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-ehsf0i:hover{background-color:var(--secondary10)} |
.root.svelte-ehsf0i{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-ehsf0i{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-ehsf0i:hover{background-color:var(--secondary10)} |
||||
|
.edit-button.svelte-zm41av{cursor:pointer;color:var(--secondary25)}.title.svelte-zm41av{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-zm41av{font-weight:500;font-size:.9rem}tr.svelte-zm41av:hover .edit-button.svelte-zm41av{color:var(--secondary75)} |
||||
|
.edit-button.svelte-lhfdtn{cursor:pointer;color:var(--secondary25)}tr.svelte-lhfdtn:hover .edit-button.svelte-lhfdtn{color:var(--secondary75)}.title.svelte-lhfdtn{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-lhfdtn{font-weight:500;font-size:.9rem} |
||||
.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right} |
.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right} |
||||
.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-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px} |
||||
.info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)} |
.root.svelte-1hs1zh2{height:100%;padding:2rem}.settings-title.svelte-1hs1zh2{font-weight:700}.title.svelte-1hs1zh2{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-1hs1zh2{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-1hs1zh2{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-1hs1zh2{cursor:pointer}.edit-button.svelte-1hs1zh2{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-1hs1zh2:hover{cursor:pointer;color:var(--secondary75)}th.svelte-1hs1zh2{text-align:left}td.svelte-1hs1zh2{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-1hs1zh2{font-size:14px;font-weight:500}thead.svelte-1hs1zh2>tr.svelte-1hs1zh2{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-1hs1zh2>tr.svelte-1hs1zh2{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-1hs1zh2>tr.svelte-1hs1zh2:hover{background-color:var(--primary10)}tbody.svelte-1hs1zh2>tr:hover .edit-button.svelte-1hs1zh2{color:var(--secondary75)}.index-container.svelte-1hs1zh2{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-1hs1zh2{color:var(--slate)}.index-name.svelte-1hs1zh2{font-weight:bold;color:var(--primary100)}.index-container.svelte-1hs1zh2 code.svelte-1hs1zh2{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-1hs1zh2{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-1hs1zh2{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px} |
||||
.library-header.svelte-chhyel{font-size:1.1em;border-color:var(--primary25);border-width:1px 0px;border-style:solid;background-color:var(--primary10);padding:5px 0}.library-container.svelte-chhyel{padding:0 0 10px 10px}.inner-header.svelte-chhyel{font-size:0.9em;font-weight:bold;margin-top:7px;margin-bottom:3px}.component.svelte-chhyel{padding:2px 0px;cursor:pointer}.component.svelte-chhyel:hover{background-color:var(--lightslate)}.component.svelte-chhyel>.name.svelte-chhyel{color:var(--secondary100);display:inline-block}.component.svelte-chhyel>.description.svelte-chhyel{font-size:0.8em;color:var(--secondary75);display:inline-block;margin-left:10px} |
|
||||
.component.svelte-3sgo90{padding:5px 0}.component.svelte-3sgo90 .title.svelte-3sgo90{width:300px |
|
||||
}.component.svelte-3sgo90>.description.svelte-3sgo90{font-size:0.8em;color:var(--secondary75)}.button-container.svelte-3sgo90{text-align:right;margin-top:20px}.error.svelte-3sgo90{font-size:10pt;color:red} |
|
||||
.root.svelte-47ohpz{font-size:10pt}.padding.svelte-47ohpz{padding:0 10px}.inherited-title.svelte-47ohpz{padding:1rem 1rem 1rem 1rem;display:grid;grid-template-columns:[name] 1fr [actions] auto;color:var(--secondary100);font-size:.9rem;font-weight:bold}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-47ohpz>div.svelte-47ohpz:nth-child(2){grid-column-start:actions;color:var(--secondary100)} |
|
||||
.title.svelte-dhe1ge{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-dhe1ge>span.svelte-dhe1ge{margin-left:10px} |
|
||||
.root.svelte-16sjty9{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-16sjty9{padding:1rem}.option-container.svelte-16sjty9{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px} |
|
||||
input.svelte-9fre0g{margin-right:7px} |
input.svelte-9fre0g{margin-right:7px} |
||||
|
.root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold} |
||||
.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px} |
.error-container.svelte-ole1mk{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-ole1mk{padding:5px 0px} |
||||
|
.root.svelte-16sjty9{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-16sjty9{padding:1rem}.option-container.svelte-16sjty9{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px} |
||||
textarea.svelte-di7k4b{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px} |
textarea.svelte-di7k4b{padding:3px;margin-top:5px;margin-bottom:10px;background:var(--lightslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px;border-radius:5px} |
||||
.root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold} |
|
||||
.root.svelte-ogh8o0{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-ogh8o0>div.svelte-ogh8o0:nth-child(2){grid-column-start:actions}.selectedname.svelte-ogh8o0{font-weight:bold;color:var(--secondary)} |
|
||||
textarea.svelte-1kv2xk7{width:300px;height:200px} |
|
||||
.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)} |
.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)} |
||||
.unbound-container.svelte-jubmd5{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-jubmd5>.svelte-jubmd5:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-jubmd5{display:flex}.bound-header.svelte-jubmd5>div.svelte-jubmd5:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-jubmd5{color:var(--secondary50)} |
.unbound-container.svelte-jubmd5{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-jubmd5>.svelte-jubmd5:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-jubmd5{display:flex}.bound-header.svelte-jubmd5>div.svelte-jubmd5:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-jubmd5{color:var(--secondary50)} |
||||
.addelement-container.svelte-199q8jr{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-199q8jr:hover{background-color:var(--primary25)}.item-container.svelte-199q8jr{padding-left:3px;background:var(--secondary10)} |
textarea.svelte-1kv2xk7{width:300px;height:200px} |
||||
.type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto} |
.type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto} |
||||
|
.root.svelte-rj4q22{height:100%;display:flex;flex-direction:column}.switcher.svelte-rj4q22{flex:0 0 auto}.switcher.svelte-rj4q22>button.svelte-rj4q22{display:inline-block;background-color:rgba(0,0,0,0);border-style:solid;border-color:var(--slate);margin:5px;padding:5px;cursor:pointer}.switcher.svelte-rj4q22>.selected.svelte-rj4q22{background-color:red}.panel.svelte-rj4q22{flex:1 1 auto;height:0px;overflow-y:auto} |
||||
|
|
||||
/*# sourceMappingURL=bundle.css.map */ |
/*# sourceMappingURL=bundle.css.map */ |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,13 +1,8 @@ |
|||||
#current_component.svelte-1xqz9vm{height:100%;width:100%} |
#current_component.svelte-uuhis1{height:100%;width:100%} |
||||
.root.svelte-10kw8to{display:grid} |
|
||||
.root.svelte-crnq0a{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-crnq0a{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-crnq0a{margin-bottom:20px |
.root.svelte-crnq0a{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-crnq0a{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-crnq0a{margin-bottom:20px |
||||
}.logo-container.svelte-crnq0a>img.svelte-crnq0a{max-width:100%}.login-button-container.svelte-crnq0a{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-crnq0a{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-crnq0a{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-crnq0a{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-crnq0a{grid-column-start:control;padding:5px 10px}.default-input.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default-button.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default-button.svelte-crnq0a:active{background-color:#ddd}.default-button.svelte-crnq0a:focus{border-color:#666} |
}.logo-container.svelte-crnq0a>img.svelte-crnq0a{max-width:100%}.login-button-container.svelte-crnq0a{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-crnq0a{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-crnq0a{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-crnq0a{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-crnq0a{grid-column-start:control;padding:5px 10px}.default-input.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default-button.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default-button.svelte-crnq0a:active{background-color:#ddd}.default-button.svelte-crnq0a:focus{border-color:#666} |
||||
.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%} |
|
||||
.panel.svelte-1nuhpxd:hover{background:var(--hoverBackground);color:var(--hoverColor)} |
|
||||
.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content} |
.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content} |
||||
.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc} |
.default.svelte-1smqkrd{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1smqkrd:active{background-color:#ddd}.default.svelte-1smqkrd:focus{border-color:#666}.border.svelte-1smqkrd{border:var(--border)}.color.svelte-1smqkrd{color:var(--color)}.background.svelte-1smqkrd{background:var(--background)}.hoverBorder.svelte-1smqkrd:hover{border:var(--hoverBorder)}.hoverColor.svelte-1smqkrd:hover{color:var(--hoverColor)}.hoverBack.svelte-1smqkrd:hover{background:var(--hoverBackground)} |
||||
.horizontal.svelte-osi0db{display:inline-block}.vertical.svelte-osi0db{display:block} |
|
||||
.default.svelte-181okpd{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-181okpd:active{background-color:#ddd}.default.svelte-181okpd:focus{border-color:#666}.border.svelte-181okpd{border:var(--border)}.color.svelte-181okpd{color:var(--color)}.background.svelte-181okpd{background:var(--background)}.hoverBorder.svelte-181okpd:hover{border:var(--hoverBorder)}.hoverColor.svelte-181okpd:hover{color:var(--hoverColor)}.hoverBack.svelte-181okpd:hover{background:var(--hoverBackground)} |
|
||||
.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer} |
.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer} |
||||
|
|
||||
/*# sourceMappingURL=bundle.css.map */ |
/*# sourceMappingURL=bundle.css.map */ |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,107 +1,19 @@ |
|||||
<script> |
<script> |
||||
|
|
||||
export let children = []; |
export let _children = []; |
||||
export let className=""; |
export let className=""; |
||||
export let data=[]; |
|
||||
export let dataItemComponent; |
|
||||
export let onLoad; |
export let onLoad; |
||||
|
|
||||
export let _bb; |
export let _bb; |
||||
|
|
||||
let rootDiv; |
let rootDiv; |
||||
let staticComponentsApplied=false; |
$:{ |
||||
let dataBoundComponents = []; |
if(_bb && rootDiv && _children && _children.length) |
||||
let previousData; |
_bb.hydrateChildren(_children, theButton); |
||||
let onLoadCalled = false; |
|
||||
let staticHtmlElements = {}; |
|
||||
|
|
||||
const hasData = () => |
|
||||
Array.isArray(data) && data.length > 0; |
|
||||
|
|
||||
const staticElementsInitialised = () => { |
|
||||
|
|
||||
if(!children) return false; |
|
||||
|
|
||||
if(children.filter(c => c.className).length === Object.keys(staticHtmlElements).length) |
|
||||
return true; |
|
||||
} |
|
||||
|
|
||||
const getStaticAnchor = (elementIndex) => { |
|
||||
const nextElements = Object.keys(staticHtmlElements).filter(k => k > elementIndex); |
|
||||
|
|
||||
return nextElements.length === 0 |
|
||||
? null |
|
||||
: staticHtmlElements[Math.min(...nextElements)]; |
|
||||
} |
|
||||
|
|
||||
$: { |
|
||||
|
|
||||
if(rootDiv) { |
|
||||
if(children && children.length > 0 |
|
||||
&& !staticComponentsApplied |
|
||||
&& staticElementsInitialised()) { |
|
||||
let index = 0; |
|
||||
for(let child of _bb.props.children) { |
|
||||
if(child.className) { |
|
||||
_bb.hydrateComponent( |
|
||||
child.component, |
|
||||
staticHtmlElements[index]); |
|
||||
} else { |
|
||||
const anchor = getStaticAnchor(index); |
|
||||
if(!anchor) { |
|
||||
_bb.appendComponent( |
|
||||
child.component, |
|
||||
rootDiv); |
|
||||
} else { |
|
||||
_bb.insertComponent( |
|
||||
child.component, |
|
||||
rootDiv, |
|
||||
anchor); |
|
||||
} |
|
||||
} |
|
||||
index += 1; |
|
||||
} |
|
||||
staticComponentsApplied = true; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
if(previousData !== data) { |
|
||||
|
|
||||
for(let c of dataBoundComponents) { |
|
||||
dataBoundComponents[c].$destroy(); |
|
||||
} |
|
||||
dataBoundComponents = []; |
|
||||
|
|
||||
|
|
||||
if(hasData()) { |
|
||||
let index = 0; |
|
||||
for(let dataItem of data) { |
|
||||
_bb.appendComponent( |
|
||||
_bb.props.dataItemComponent, |
|
||||
rootDiv, |
|
||||
dataItem |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) { |
|
||||
_bb.call(onLoad); |
|
||||
onLoadCalled = true; |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<div class="{className}" bind:this={rootDiv}> |
<div class="{className}" bind:this={rootDiv}> |
||||
{#each children as child, index} |
|
||||
{#if child.className} |
|
||||
<div class="{child.className}" |
|
||||
bind:this={staticHtmlElements[index]}> |
|
||||
</div> |
|
||||
{/if} |
|
||||
{/each} |
|
||||
</div> |
</div> |
||||
|
|
||||
|
|||||
@ -1,59 +0,0 @@ |
|||||
<script> |
|
||||
export let containerClass = ""; |
|
||||
export let formControls = []; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let htmlElements = {}; |
|
||||
let labels = {}; |
|
||||
|
|
||||
$ : { |
|
||||
let cIndex = 0; |
|
||||
for(let c of formControls) { |
|
||||
labels[cIndex] = c.label; |
|
||||
cIndex++; |
|
||||
} |
|
||||
|
|
||||
if(_bb && htmlElements) { |
|
||||
for(let el in htmlElements) { |
|
||||
_bb.hydrateComponent( |
|
||||
_bb.props.formControls[el].control, |
|
||||
htmlElements[el] |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="form-root {containerClass}"> |
|
||||
{#each formControls as child, index} |
|
||||
<div class="label">{labels[index]}</div> |
|
||||
<div class="control" |
|
||||
bind:this={htmlElements[index]}> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.form-root { |
|
||||
display: grid; |
|
||||
grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/ |
|
||||
} |
|
||||
|
|
||||
.label { |
|
||||
grid-column-start: label; |
|
||||
padding: 5px 10px; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
.control { |
|
||||
grid-column-start: control; |
|
||||
padding: 5px 10px; |
|
||||
} |
|
||||
.overflow { |
|
||||
grid-column-start: overflow; |
|
||||
} |
|
||||
.full-width { |
|
||||
width: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,62 +0,0 @@ |
|||||
<script> |
|
||||
import { onMount } from 'svelte' |
|
||||
import {buildStyle} from "./buildStyle"; |
|
||||
|
|
||||
export let gridTemplateRows =""; |
|
||||
export let gridTemplateColumns =""; |
|
||||
export let children = []; |
|
||||
export let containerClass=""; |
|
||||
export let itemContainerClass=""; |
|
||||
|
|
||||
/*"gridColumnStart":"string", |
|
||||
"gridColumnEnd":"string", |
|
||||
"gridRowStart":"string", |
|
||||
"gridRowEnd":"string"*/ |
|
||||
|
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let style=""; |
|
||||
let htmlElements = {}; |
|
||||
let isInitilised = false; |
|
||||
$ : { |
|
||||
if(!isInitilised && _bb && htmlElements && Object.keys(htmlElements).length > 0) { |
|
||||
for(let el in htmlElements) { |
|
||||
_bb.hydrateComponent( |
|
||||
_bb.props.children[el].component, |
|
||||
htmlElements[el] |
|
||||
); |
|
||||
} |
|
||||
isInitilised = true; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const childStyle = child => |
|
||||
buildStyle({ |
|
||||
"grid-column-start": child.gridColumnStart, |
|
||||
"grid-column-end": child.gridColumnEnd, |
|
||||
"grid-row-start": child.gridRowStart, |
|
||||
"grid-row-end": child.gridRowStart |
|
||||
}); |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="root {containerClass}" |
|
||||
style="grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};"> |
|
||||
{#each children as child, index} |
|
||||
<div class="{itemContainerClass}" |
|
||||
style={childStyle(child)} |
|
||||
bind:this={htmlElements[index]}> |
|
||||
</div> |
|
||||
{/each} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
.root { |
|
||||
display: grid; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,49 +0,0 @@ |
|||||
<script> |
|
||||
|
|
||||
export let condition; |
|
||||
export let thenComponent; |
|
||||
export let elseComponent; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let element; |
|
||||
let currentEvalResult=null; |
|
||||
let currentComponent; |
|
||||
let state; |
|
||||
|
|
||||
_bb.store.subscribe(s => { |
|
||||
state = s; |
|
||||
}) |
|
||||
|
|
||||
$: { |
|
||||
if(_bb && element && state) { |
|
||||
let result; |
|
||||
try { |
|
||||
let $store = state; |
|
||||
let $context = _bb.context; |
|
||||
result = !!(Function(`"use strict";return (function($store, $context) { return (${condition}); });`)()($store, $context)); |
|
||||
} catch(e) { |
|
||||
console.log("If condition eval error: " + e.message) |
|
||||
} |
|
||||
if(result !== currentEvalResult) { |
|
||||
currentEvalResult = result; |
|
||||
if(currentComponent) { |
|
||||
currentComponent.$destroy(); |
|
||||
} |
|
||||
|
|
||||
if(result) { |
|
||||
currentComponent = _bb.hydrateComponent( |
|
||||
_bb.props.thenComponent,element); |
|
||||
} else if(elseComponent && elseComponent._component) { |
|
||||
currentComponent = _bb.hydrateComponent( |
|
||||
_bb.props.elseComponent,element); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div bind:this={element}></div> |
|
||||
@ -1,74 +0,0 @@ |
|||||
<script> |
|
||||
import {buildStyle} from "./buildStyle"; |
|
||||
import cssVars from "./cssVars"; |
|
||||
|
|
||||
export let component=""; |
|
||||
export let text=""; |
|
||||
export let containerClass=""; |
|
||||
export let background=""; |
|
||||
export let border=""; |
|
||||
export let borderRadius=""; |
|
||||
export let font=""; |
|
||||
export let display=""; |
|
||||
export let textAlign=""; |
|
||||
export let color=""; |
|
||||
export let padding=""; |
|
||||
export let margin=""; |
|
||||
export let hoverBackground=""; |
|
||||
export let hoverColor=""; |
|
||||
export let onClick; |
|
||||
export let height; |
|
||||
export let width; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let styleVars; |
|
||||
let style=""; |
|
||||
let componentElement; |
|
||||
let componentInitialised=false; |
|
||||
|
|
||||
$: { |
|
||||
style=buildStyle({ |
|
||||
border, background, font, margin, |
|
||||
padding, display, color, height, width, |
|
||||
"text-align": textAlign, |
|
||||
"border-radius":borderRadius, |
|
||||
cursor: onClick ? "pointer" : "none" |
|
||||
}); |
|
||||
|
|
||||
if(_bb && component && componentElement && !componentInitialised) { |
|
||||
_bb.hydrateComponent(_bb.props.component, componentElement); |
|
||||
componentInitialised = true; |
|
||||
} |
|
||||
|
|
||||
styleVars = { |
|
||||
hoverBackground:hoverBackground || background, |
|
||||
hoverColor:hoverColor || color |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const clickHandler = () => { |
|
||||
if(onClick) { |
|
||||
_bb.call(onClick); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="{containerClass} panel" |
|
||||
style={style} |
|
||||
use:cssVars={styleVars} |
|
||||
bind:this={componentElement} |
|
||||
on:click={clickHandler}> |
|
||||
{component && component._component ? "" : text} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
.panel:hover { |
|
||||
background: var(--hoverBackground); |
|
||||
color: var(--hoverColor); |
|
||||
|
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,115 +0,0 @@ |
|||||
<script> |
|
||||
|
|
||||
import { emptyProps } from "./emptyProps"; |
|
||||
|
|
||||
export let direction = "horizontal"; |
|
||||
export let children = []; |
|
||||
export let width = "auto"; |
|
||||
export let height = "auto"; |
|
||||
export let containerClass=""; |
|
||||
export let itemContainerClass=""; |
|
||||
export let onLoad; |
|
||||
|
|
||||
export let data=[]; |
|
||||
export let dataItemComponent; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let staticHtmlElements = {}; |
|
||||
let staticComponents = {}; |
|
||||
let dataBoundElements = {}; |
|
||||
let dataBoundComponents = {}; |
|
||||
|
|
||||
let onLoadCalled = false; |
|
||||
|
|
||||
const hasDataBoundComponents = () => |
|
||||
Object.getOwnPropertyNames(dataBoundComponents).length > 0; |
|
||||
|
|
||||
const hasData = () => |
|
||||
Array.isArray(data) && data.length > 0; |
|
||||
|
|
||||
const hasStaticComponents = () => { |
|
||||
return Object.getOwnPropertyNames(staticComponents).length > 0; |
|
||||
} |
|
||||
|
|
||||
$: { |
|
||||
|
|
||||
if(staticHtmlElements) { |
|
||||
if(hasStaticComponents()) { |
|
||||
for(let c in staticComponents) { |
|
||||
staticComponents[c].$destroy(); |
|
||||
} |
|
||||
staticComponents = {}; |
|
||||
} |
|
||||
|
|
||||
for(let el in staticHtmlElements) { |
|
||||
staticComponents[el] = _bb.hydrateComponent( |
|
||||
_bb.props.children[el].control, |
|
||||
staticHtmlElements[el] |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
if(hasDataBoundComponents()) { |
|
||||
for(let c in dataBoundComponents) { |
|
||||
dataBoundComponents[c].$destroy(); |
|
||||
} |
|
||||
dataBoundComponents = {}; |
|
||||
} |
|
||||
|
|
||||
if(hasData()) { |
|
||||
let index = 0; |
|
||||
for(let d in dataBoundElements) { |
|
||||
_bb.hydrateComponent( |
|
||||
_bb.props.dataItemComponent, |
|
||||
dataBoundElements[d], |
|
||||
data[parseInt(d)] |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) { |
|
||||
_bb.call(onLoad); |
|
||||
onLoadCalled = true; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<div class="root {containerClass}" |
|
||||
style="width: {width}; height: {height}"> |
|
||||
|
|
||||
{#if children} |
|
||||
{#each children as child, index} |
|
||||
<div class={direction}> |
|
||||
<div class="{itemContainerClass}" |
|
||||
bind:this={staticHtmlElements[index]}> |
|
||||
</div> |
|
||||
</div> |
|
||||
{/each} |
|
||||
{/if} |
|
||||
|
|
||||
{#if data && data.length > 0} |
|
||||
{#each data as child, index} |
|
||||
<div class={direction}> |
|
||||
<div class="{itemContainerClass}" |
|
||||
bind:this={dataBoundElements[index]}> |
|
||||
</div> |
|
||||
</div> |
|
||||
{/each} |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
|
|
||||
.horizontal { |
|
||||
display:inline-block; |
|
||||
} |
|
||||
|
|
||||
.vertical { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -1,48 +0,0 @@ |
|||||
<script> |
|
||||
|
|
||||
export let value=""; |
|
||||
export let hideValue = false; |
|
||||
export let className = "default"; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let actualValue = ""; |
|
||||
|
|
||||
const onchange = (ev) => { |
|
||||
if(_bb) { |
|
||||
_bb.setStateFromBinding(_bb.props.value, ev.target.value); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
{#if hideValue} |
|
||||
<input class={className} |
|
||||
type="password" |
|
||||
value={value} |
|
||||
on:change={onchange}/> |
|
||||
{:else} |
|
||||
<input class={className} |
|
||||
type="text" |
|
||||
value={value} |
|
||||
on:change={onchange}/> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.default { |
|
||||
width: 100%; |
|
||||
font-family: inherit; |
|
||||
font-size: inherit; |
|
||||
padding: 0.4em; |
|
||||
margin: 0 0 0.5em 0; |
|
||||
box-sizing: border-box; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 2px; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.default:disabled { |
|
||||
color: #ccc; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue