forked from tsai/budibase
Michael Shanks
7 years ago
62 changed files with 66599 additions and 1981 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 { find } from "lodash/fp"; |
|||
|
|||
export const getRootComponent = (componentName, allComponents) => { |
|||
const component = find(c => c.name === componentName)(allComponents); |
|||
export const getRootComponent = (componentName, components) => { |
|||
const component = find(c => c.name === componentName)(components); |
|||
|
|||
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"; |
|||
|
|||
const propDef = { |
|||
label: "string", |
|||
width: {type:"number"}, |
|||
color: {type:"string", required:true}, |
|||
child: "component", |
|||
navitems: { |
|||
type: "array", |
|||
elementDefinition: { |
|||
name: {type:"string"}, |
|||
height: "number" |
|||
} |
|||
import { expandComponentDefinition } from "../src/userInterface/pagesParsing/types"; |
|||
|
|||
const componentDef = () => ({ |
|||
name: "comp", |
|||
props: { |
|||
label: "string", |
|||
width: {type:"number"}, |
|||
color: {type:"string", required:true}, |
|||
} |
|||
} |
|||
}) |
|||
|
|||
describe("expandPropDefintion", () => { |
|||
|
|||
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.label.required).toBe(false); |
|||
expect(result.props.label.type).toBe("string"); |
|||
expect(result.props.label.required).toBe(false); |
|||
}); |
|||
|
|||
it("should add members to property defined as object, when members do not exist", () => { |
|||
|
|||
const result = expandPropsDefinition(propDef); |
|||
expect(result.width.required).toBe(false); |
|||
const result = expandComponentDefinition(componentDef()); |
|||
expect(result.props.width.required).toBe(false); |
|||
}); |
|||
|
|||
it("should not override existing memebers", () => { |
|||
|
|||
const result = expandPropsDefinition(propDef); |
|||
expect(result.color.required).toBe(true); |
|||
const result = expandComponentDefinition(componentDef()); |
|||
expect(result.props.color.required).toBe(true); |
|||
}); |
|||
|
|||
it("should also expand out elementdefinition of array", () => { |
|||
const result = expandPropsDefinition(propDef); |
|||
expect(result.navitems.elementDefinition.height.type).toBe("number"); |
|||
}) |
|||
it("should set children=true when not included", () => { |
|||
const result = expandComponentDefinition(componentDef()); |
|||
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 = () => ([ |
|||
{ |
|||
name: "budibase-components/TextBox", |
|||
tags: ["Text", "input"], |
|||
props: { |
|||
size: {type:"options", options:["small", "medium", "large"]}, |
|||
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" |
|||
} |
|||
export const componentsAndScreens = () => ({ |
|||
components: [ |
|||
{ |
|||
name: "budibase-components/TextBox", |
|||
tags: ["Text", "input"], |
|||
children: false, |
|||
props: { |
|||
size: {type:"options", options:["small", "medium", "large"]}, |
|||
isPassword: "bool", |
|||
placeholder: "string", |
|||
label:"string" |
|||
} |
|||
}, |
|||
{ |
|||
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" |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
name:"budibase-components/RecordView", |
|||
tags: ["record"], |
|||
props: { |
|||
data: "state" |
|||
} |
|||
}, |
|||
{ |
|||
inherits:"budibase-components/TextBox", |
|||
name: "common/SmallTextbox", |
|||
props: { |
|||
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: { |
|||
], |
|||
screens: [ |
|||
{ |
|||
name: "common/SmallTextbox", |
|||
props: { |
|||
_component: "budibase-components/TextBox", |
|||
size: "small" |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
name: "common/PasswordBox", |
|||
tags: ["mask"], |
|||
props: { |
|||
_component: "budibase-components/TextBox", |
|||
isPassword: true, |
|||
size: "small" |
|||
} |
|||
}, |
|||
|
|||
width: 100, |
|||
header: { |
|||
_component: "PrimaryButton" |
|||
}, |
|||
children: [ |
|||
{ |
|||
control: { |
|||
_component: "PrimaryButton", |
|||
{ |
|||
name:"PrimaryButton", |
|||
props: { |
|||
_component:"budibase-components/Button", |
|||
css:"btn-primary" |
|||
} |
|||
}, |
|||
|
|||
{ |
|||
name:"ButtonGroup", |
|||
props: { |
|||
_component:"budibase-components/div", |
|||
width: 100, |
|||
_children: [ |
|||
{ |
|||
_component: "budibase-components/Button", |
|||
contentText: "Button 1" |
|||
} |
|||
}, |
|||
{ |
|||
control: { |
|||
_component: "PrimaryButton", |
|||
}, |
|||
{ |
|||
_component: "budibase-components/Button", |
|||
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} |
|||
.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-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} |
|||
.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-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} |
|||
.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} |
|||
.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-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} |
|||
.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)} |
|||
.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)} |
|||
.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)} |
|||
.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-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)} |
|||
.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} |
|||
.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} |
|||
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} |
|||
.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} |
|||
.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)} |
|||
.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} |
|||
.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 */ |
|||
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
Loading…
Reference in new issue