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 { 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
@ -1,13 +1,8 @@ |
|||
#current_component.svelte-1xqz9vm{height:100%;width:100%} |
|||
.root.svelte-10kw8to{display:grid} |
|||
#current_component.svelte-uuhis1{height:100%;width:100%} |
|||
.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} |
|||
.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} |
|||
.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} |
|||
.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)} |
|||
.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)} |
|||
.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 */ |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,107 +1,19 @@ |
|||
<script> |
|||
|
|||
export let children = []; |
|||
export let _children = []; |
|||
export let className=""; |
|||
export let data=[]; |
|||
export let dataItemComponent; |
|||
export let onLoad; |
|||
|
|||
export let _bb; |
|||
|
|||
let rootDiv; |
|||
let staticComponentsApplied=false; |
|||
let dataBoundComponents = []; |
|||
let previousData; |
|||
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; |
|||
} |
|||
} |
|||
$:{ |
|||
if(_bb && rootDiv && _children && _children.length) |
|||
_bb.hydrateChildren(_children, theButton); |
|||
} |
|||
|
|||
|
|||
</script> |
|||
|
|||
<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> |
|||
|
|||
|
|||
@ -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