array component
This commit is contained in:
michael shanks
parent
bf7afe369d
commit
b715b2a842
|
|
@ -33,23 +33,24 @@ export let navWidth = "50px";
|
|||
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
background-color: var(--white);
|
||||
margin:0;
|
||||
}
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
background-color: var(--white);
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex: 0 1 auto;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
.nav {
|
||||
flex: 0 1 auto;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -55,7 +55,7 @@ export const getStore = () => {
|
|||
hasAppPackage: false,
|
||||
accessLevels: [],
|
||||
currentNode: null,
|
||||
libraries:null,
|
||||
libraries:null
|
||||
};
|
||||
|
||||
const store = writable(initial);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ import PropsView from "./PropsView.svelte";
|
|||
import IconButton from "../common/IconButton.svelte";
|
||||
import { getComponentInfo } from "./pagesParsing/createProps";
|
||||
import { store } from "../builderStore";
|
||||
import { cloneDeep } from "lodash/fp";
|
||||
import {
|
||||
cloneDeep,
|
||||
isUndefined
|
||||
} from "lodash/fp";
|
||||
import { fade, slide } from 'svelte/transition';
|
||||
|
||||
export let propertyName = "";
|
||||
|
|
@ -29,9 +32,13 @@ const onSubComponentGoBack = () => {
|
|||
editingSubComponentProps = null;
|
||||
}
|
||||
|
||||
const onEditComponentProp = (propName) => {
|
||||
editingSubComponentName = propName;
|
||||
editingSubComponentProps = instanceProps[propName];
|
||||
const onEditComponentProp = (propName, arrayIndex, arrayPropName) => {
|
||||
editingSubComponentName = isUndefined(arrayIndex)
|
||||
? propName
|
||||
: `${propName}[${arrayIndex}].${arrayPropName}`;
|
||||
editingSubComponentProps = isUndefined(arrayIndex)
|
||||
? instanceProps[propName]
|
||||
: instanceProps[propName][arrayIndex][arrayPropName];
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export let props = emptyProps();
|
|||
export let onValueChanged = () => {};
|
||||
export let onComponentChosen = () => {};
|
||||
export let onEdit = () => {};
|
||||
export let label = ""
|
||||
export let label = "";
|
||||
export let disabled = false;
|
||||
|
||||
const CHOOSE_COMPONENT = "choose_component";
|
||||
|
|
|
|||
|
|
@ -10,6 +10,24 @@ import {
|
|||
import { pipe } from "../common/core";
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName"
|
||||
import { afterUpdate } from 'svelte';
|
||||
import { getRootComponent } from "./pagesParsing/getRootComponent";
|
||||
|
||||
if(!window.budibaseIframeConnector) {
|
||||
window.budibaseIframeConnector = {
|
||||
initialiseComponent(props, htmlElement) {
|
||||
const rootComponent = getRootComponent(
|
||||
props._component, allComponents);
|
||||
|
||||
const {componentName, libName} = splitName(
|
||||
rootComponent.name);
|
||||
|
||||
new (libraries[libName][componentName])({
|
||||
target: htmlElement,
|
||||
props: {...props, _app: window.budibaseIframeConnector}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let component;
|
||||
let stylesheetLinks = "";
|
||||
|
|
@ -18,6 +36,9 @@ let props;
|
|||
let componentLibraryUrl = "";
|
||||
let rootComponentName = "";
|
||||
let iframe;
|
||||
let libraries;
|
||||
let allComponents;
|
||||
|
||||
|
||||
store.subscribe(s => {
|
||||
const {componentName, libName} = splitName(
|
||||
|
|
@ -31,6 +52,8 @@ store.subscribe(s => {
|
|||
join("\n")
|
||||
]);
|
||||
componentLibraryUrl = makeLibraryUrl(s.appname, libName);
|
||||
libraries = s.libraries;
|
||||
allComponents = s.allComponents;
|
||||
});
|
||||
|
||||
/*
|
||||
|
|
@ -65,7 +88,7 @@ const iframeLoaded = () => {
|
|||
const componentClass = module['${rootComponentName}'];
|
||||
const instance = new componentClass({
|
||||
target: document.body,
|
||||
props: JSON.parse('${JSON.stringify(props)}')
|
||||
props: {...${JSON.stringify(props)}, _app: window.parent.budibaseIframeConnector}
|
||||
}) ;
|
||||
})
|
||||
|
||||
|
|
@ -92,9 +115,4 @@ const iframeLoaded = () => {
|
|||
grid-column-start: middle;
|
||||
}
|
||||
|
||||
#comonent-container-mock {
|
||||
position:fixed;
|
||||
left: -2000px
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -111,9 +111,14 @@ const showDialog = () => {
|
|||
UIkit.modal(modalElement).show();
|
||||
}
|
||||
|
||||
const onEditComponentProp = (propName) => {
|
||||
editingComponentInstance = component.props[propName];
|
||||
editingComponentInstancePropName = propName;
|
||||
const onEditComponentProp = (propName, arrayIndex, arrayPropName) => {
|
||||
|
||||
editingComponentInstance = isUndefined(arrayIndex)
|
||||
? component.props[propName]
|
||||
: component.props[propName][arrayIndex][arrayPropName];
|
||||
editingComponentInstancePropName = isUndefined(arrayIndex)
|
||||
? propName
|
||||
: `${propName}[${arrayIndex}].${arrayPropName}`;
|
||||
}
|
||||
|
||||
const componentInstanceCancelEdit = () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
<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 label = "";
|
||||
let elementErrors = {};
|
||||
|
||||
$: {
|
||||
const elArray = [];
|
||||
for(let elProp in propDef.elementDefinition) {
|
||||
if(elProp === "_component") continue;
|
||||
elArray.push({
|
||||
...propDef.elementDefinition[elProp],
|
||||
____name: elProp
|
||||
});
|
||||
}
|
||||
elementDefinitionArray = elArray;
|
||||
label = propDef.____name;
|
||||
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>
|
||||
{label}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -4,6 +4,7 @@ import Checkbox from "../common/Checkbox.svelte";
|
|||
import Textbox from "../common/Textbox.svelte";
|
||||
import Dropdown from "../common/Dropdown.svelte";
|
||||
import ComponentPropSelector from "./ComponentPropSelector.svelte";
|
||||
import PropArraySelector from "./PropArraySelector.svelte";
|
||||
|
||||
export let errors = [];
|
||||
export let setProp = () => {};
|
||||
|
|
@ -44,6 +45,11 @@ const setComponentProp = (props) => {
|
|||
onEdit={onEditComponent}
|
||||
onComponentChosen={onEditComponent}
|
||||
onValueChanged={setComponentProp}/>
|
||||
{:else if propDef.type === "array"}
|
||||
<PropArraySelector parentProps={props}
|
||||
{propDef}
|
||||
onValueChanged={setComponentProp}
|
||||
onEditComponentProp={onEditComponent}/>
|
||||
{:else}
|
||||
<Textbox label={propDef.____name}
|
||||
text={props[propDef.____name]}
|
||||
|
|
|
|||
|
|
@ -100,8 +100,8 @@ const validate = (finalProps) => {
|
|||
const fieldHasError = (propName) =>
|
||||
some(e => e.propName === propName)(errors);
|
||||
|
||||
const onEditComponent = (propName) => () => {
|
||||
onEditComponentProp(propName);
|
||||
const onEditComponent = (propName) => (arrayIndex, arrayPropName) => {
|
||||
onEditComponentProp(propName, arrayIndex, arrayPropName);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -111,14 +111,13 @@ const onEditComponent = (propName) => () => {
|
|||
<form class="uk-form-stacked">
|
||||
{#each propsDefinitions as propDef, index}
|
||||
|
||||
<PropControl {errors}
|
||||
{setProp}
|
||||
{fieldHasError}
|
||||
{propDef}
|
||||
{props}
|
||||
{index}
|
||||
onEditComponent={onEditComponent(propDef.____name)}
|
||||
disabled={false} />
|
||||
<PropControl {setProp}
|
||||
{fieldHasError}
|
||||
{propDef}
|
||||
{props}
|
||||
{index}
|
||||
onEditComponent={onEditComponent(propDef.____name)}
|
||||
disabled={false} />
|
||||
|
||||
{/each}
|
||||
|
||||
|
|
@ -135,13 +134,12 @@ const onEditComponent = (propName) => () => {
|
|||
{#if inheritedExpanded}
|
||||
{#each inheritedPropsDefinitions as propDef, index}
|
||||
|
||||
<PropControl {errors}
|
||||
{setProp}
|
||||
{fieldHasError}
|
||||
{propDef}
|
||||
{props}
|
||||
{index}
|
||||
disabled={true} />
|
||||
<PropControl {setProp}
|
||||
{fieldHasError}
|
||||
{propDef}
|
||||
{props}
|
||||
{index}
|
||||
disabled={true} />
|
||||
|
||||
{/each}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -148,6 +148,11 @@ export const createProps = (componentName, propsDefinition, derivedFromProps) =>
|
|||
});
|
||||
}
|
||||
|
||||
export const createArrayElementProps = (arrayPropName, elementDefinition) =>
|
||||
createProps(
|
||||
`#element#${arrayPropName}`,
|
||||
elementDefinition);
|
||||
|
||||
const parsePropDef = propDef => {
|
||||
const error = message => ({error:message, propDef});
|
||||
|
||||
|
|
@ -174,6 +179,9 @@ const parsePropDef = propDef => {
|
|||
return propDef.default;
|
||||
}
|
||||
|
||||
export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
|
||||
`${parentComponentName}:${arrayPropName}`;
|
||||
|
||||
/*
|
||||
Allowed propDefOptions
|
||||
- type: string, bool, number, array
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { isRootComponent } from "./searchComponents";
|
||||
import { find } from "lodash/fp";
|
||||
|
||||
export const getRootComponent = (componentName, allComponents) => {
|
||||
const component = find(c => c.name === componentName)(allComponents);
|
||||
|
||||
if(isRootComponent(component)) return component;
|
||||
|
||||
return getRootComponent(component.inherits, allComponents);
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
import { types } from "./types";
|
||||
import { createProps } from "./createProps";
|
||||
import {
|
||||
createProps,
|
||||
arrayElementComponentName
|
||||
} from "./createProps";
|
||||
import { isString } from "util";
|
||||
import {
|
||||
includes,
|
||||
|
|
@ -138,7 +141,7 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
|
|||
if(propDef.type === "array") {
|
||||
let index = 0;
|
||||
for(let arrayItem of propValue) {
|
||||
arrayItem._component = `${props._component}:${propDefName}`
|
||||
arrayItem._component = arrayElementComponentName(props._component, propDefName);
|
||||
const arrayErrs = validateProps(
|
||||
propDef.elementDefinition,
|
||||
arrayItem,
|
||||
|
|
|
|||
|
|
@ -41,20 +41,7 @@
|
|||
"children": [],
|
||||
"validationRules": [],
|
||||
"nodeId": 2,
|
||||
"indexes": [
|
||||
{
|
||||
"name": "Some index",
|
||||
"type": "index",
|
||||
"map": "return {...record};",
|
||||
"filter": "",
|
||||
"indexType": "ancestor",
|
||||
"getShardName": "",
|
||||
"getSortKey": "record.id",
|
||||
"aggregateGroups": [],
|
||||
"allowedRecordNodeIds": [],
|
||||
"nodeId": 3
|
||||
}
|
||||
],
|
||||
"indexes": [],
|
||||
"allidsShardFactor": 1,
|
||||
"collectionName": "invoices",
|
||||
"isSingle": false
|
||||
|
|
@ -62,7 +49,22 @@
|
|||
],
|
||||
"validationRules": [],
|
||||
"nodeId": 1,
|
||||
"indexes": [],
|
||||
"indexes": [
|
||||
{
|
||||
"name": "customer_invoices",
|
||||
"type": "index",
|
||||
"map": "return {...record};",
|
||||
"filter": "",
|
||||
"indexType": "ancestor",
|
||||
"getShardName": "",
|
||||
"getSortKey": "record.id",
|
||||
"aggregateGroups": [],
|
||||
"allowedRecordNodeIds": [
|
||||
2
|
||||
],
|
||||
"nodeId": 5
|
||||
}
|
||||
],
|
||||
"allidsShardFactor": 64,
|
||||
"collectionName": "customers",
|
||||
"isSingle": false
|
||||
|
|
@ -83,6 +85,20 @@
|
|||
1
|
||||
],
|
||||
"nodeId": 4
|
||||
},
|
||||
{
|
||||
"name": "everyones_invoices",
|
||||
"type": "index",
|
||||
"map": "return {...record};",
|
||||
"filter": "",
|
||||
"indexType": "ancestor",
|
||||
"getShardName": "",
|
||||
"getSortKey": "record.id",
|
||||
"aggregateGroups": [],
|
||||
"allowedRecordNodeIds": [
|
||||
2
|
||||
],
|
||||
"nodeId": 6
|
||||
}
|
||||
],
|
||||
"nodeId": 0
|
||||
|
|
@ -107,12 +123,20 @@
|
|||
[
|
||||
[
|
||||
[
|
||||
{
|
||||
"name": "output_to_file",
|
||||
"behaviourSource": "main",
|
||||
"behaviourName": "outputToFile",
|
||||
"initialOptions": {}
|
||||
}
|
||||
[
|
||||
[
|
||||
[
|
||||
[
|
||||
{
|
||||
"name": "output_to_file",
|
||||
"behaviourSource": "main",
|
||||
"behaviourName": "outputToFile",
|
||||
"initialOptions": {}
|
||||
}
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "Mikes Panel",
|
||||
"description": "",
|
||||
"inherits": "./standard-components/stackpanel",
|
||||
"props": {
|
||||
"children": [
|
||||
{
|
||||
"_component": "Mikes Panel:children",
|
||||
"control": {
|
||||
"_component": "Primary Button",
|
||||
"contentText": "Button",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-primary",
|
||||
"disabled": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"_component": "Mikes Panel:children",
|
||||
"control": {
|
||||
"_component": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"_component": "Mikes Panel",
|
||||
"children[0].control": {
|
||||
"_component": "Primary Button",
|
||||
"contentText": "yeo",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-primary",
|
||||
"disabled": false
|
||||
},
|
||||
"direction": "vertical",
|
||||
"height": "200px",
|
||||
"width": "200px"
|
||||
},
|
||||
"tags": [
|
||||
"div",
|
||||
"container",
|
||||
"layout",
|
||||
"panel"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "Random Button",
|
||||
"description": "",
|
||||
"inherits": "./standard-components/button",
|
||||
"props": {
|
||||
"contentComponent": {
|
||||
"_component": "./standard-components/button",
|
||||
"contentText": "Inner Button",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "default",
|
||||
"disabled": false
|
||||
}
|
||||
},
|
||||
"tags": [
|
||||
"button"
|
||||
]
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"description": "",
|
||||
"inherits": "./standard-components/button",
|
||||
"props": {
|
||||
"className": "btn btn-success",
|
||||
"className": "btn btn-primary",
|
||||
"_component": "Success Button"
|
||||
},
|
||||
"tags": [
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
"inherits": "./standard-components/login",
|
||||
"props": {
|
||||
"usernameLabel": "User",
|
||||
"_component": "login_screen"
|
||||
"_component": "login_screen",
|
||||
"passwordLabel": "Secret"
|
||||
},
|
||||
"tags": [
|
||||
"login",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "mikes",
|
||||
"description": "",
|
||||
"inherits": "./standard-components/stackpanel",
|
||||
"props": {
|
||||
"children": [
|
||||
{
|
||||
"_component": "undefined:children",
|
||||
"control": {
|
||||
"_component": "Primary Button",
|
||||
"contentText": "Button",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-primary",
|
||||
"disabled": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"_component": "mikes"
|
||||
},
|
||||
"tags": [
|
||||
"div",
|
||||
"container",
|
||||
"layout",
|
||||
"panel"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "schpanel",
|
||||
"description": "",
|
||||
"inherits": "./standard-components/stackpanel",
|
||||
"props": {
|
||||
"children": [
|
||||
{
|
||||
"_component": "undefined:children",
|
||||
"control": {
|
||||
"_component": "Primary Button",
|
||||
"contentText": "Button",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-primary",
|
||||
"disabled": false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"tags": [
|
||||
"div",
|
||||
"container",
|
||||
"layout",
|
||||
"panel"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
{
|
||||
"name": "yeeeeo",
|
||||
"description": "",
|
||||
"inherits": "./standard-components/stackpanel",
|
||||
"props": {
|
||||
"children": [
|
||||
{
|
||||
"_component": "yeeeeo:children",
|
||||
"control": {
|
||||
"_component": "Primary Button",
|
||||
"contentText": "Button",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "btn btn-primary",
|
||||
"disabled": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"_component": "yeeeeo:children",
|
||||
"control": {
|
||||
"_component": "Random Button",
|
||||
"contentText": "Button",
|
||||
"contentComponent": {
|
||||
"_component": "./standard-components/button",
|
||||
"contentText": "Inner Button",
|
||||
"contentComponent": {
|
||||
"_component": ""
|
||||
},
|
||||
"className": "default",
|
||||
"disabled": false
|
||||
},
|
||||
"className": "default",
|
||||
"disabled": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"_component": "yeeeeo",
|
||||
"height": "400px",
|
||||
"width": "400px",
|
||||
"direction": "vertical",
|
||||
"itemContainerClass": "",
|
||||
"containerClass": ""
|
||||
},
|
||||
"tags": [
|
||||
"div",
|
||||
"container",
|
||||
"layout",
|
||||
"panel"
|
||||
]
|
||||
}
|
||||
|
|
@ -66,5 +66,28 @@
|
|||
"className": {"type": "string", "default": "default"}
|
||||
},
|
||||
"tags": ["form"]
|
||||
},
|
||||
"stackpanel": {
|
||||
"importPath": "stackpanel",
|
||||
"name": "StackPanel",
|
||||
"desciption": "Layout elements in a stack, either horizontally or vertically",
|
||||
"props" : {
|
||||
"direction": {
|
||||
"type": "options",
|
||||
"options": ["horizontal", "vertical"],
|
||||
"default":"horizontal"
|
||||
},
|
||||
"children": {
|
||||
"type":"array",
|
||||
"elementDefinition": {
|
||||
"control":"component"
|
||||
}
|
||||
},
|
||||
"width": {"type":"string","default":"auto"},
|
||||
"height": {"type":"string","default":"auto"},
|
||||
"containerClass":"string",
|
||||
"itemContainerClass":"string"
|
||||
},
|
||||
"tags": ["div", "container", "layout", "panel"]
|
||||
}
|
||||
}
|
||||
|
|
@ -4,12 +4,21 @@ export let disabled = false;
|
|||
export let contentText;
|
||||
export let contentComponent;
|
||||
|
||||
export let _app;
|
||||
let contentComponentContainer;
|
||||
|
||||
$:{
|
||||
if(_app && contentComponentContainer)
|
||||
_app.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<button class={className} {disabled} on:click>
|
||||
{#if contentComponent && contentComponent._component}
|
||||
{contentComponent}
|
||||
<div bind:this={contentComponentContainer}>
|
||||
</div>
|
||||
{:else if contentText}
|
||||
{contentText}
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let direction = "horizontal";
|
||||
export let children = [];
|
||||
export let width = "auto";
|
||||
export let height = "auto";
|
||||
export let containerClass="";
|
||||
export let itemContainerClass="";
|
||||
|
||||
|
||||
export let _app;
|
||||
|
||||
let htmlElements = {};
|
||||
|
||||
onMount(() => {
|
||||
if(_app && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_app.initialiseComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div class="root {containerClass}"
|
||||
style="width: {width}; height: {height}">
|
||||
{#each children as child, index}
|
||||
<div class={direction}>
|
||||
<div class="{itemContainerClass}"
|
||||
bind:this={htmlElements[index]}>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.horizontal {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -4,12 +4,21 @@ export let disabled = false;
|
|||
export let contentText;
|
||||
export let contentComponent;
|
||||
|
||||
export let _app;
|
||||
let contentComponentContainer;
|
||||
|
||||
$:{
|
||||
if(_app && contentComponentContainer)
|
||||
_app.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<button class={className} {disabled} on:click>
|
||||
{#if contentComponent && contentComponent._component}
|
||||
{contentComponent}
|
||||
<div bind:this={contentComponentContainer}>
|
||||
</div>
|
||||
{:else if contentText}
|
||||
{contentText}
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<script>
|
||||
export let className = "default";
|
||||
export let disabled = false;
|
||||
export let contentText;
|
||||
export let contentComponent;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<button class={className} {disabled} on:click>
|
||||
{#if contentComponent && contentComponent._component}
|
||||
{contentComponent}
|
||||
{:else if contentText}
|
||||
{contentText}
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.default {
|
||||
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:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.default:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script>
|
||||
export let className = "default";
|
||||
export let disabled = false;
|
||||
export let contentText;
|
||||
export let contentComponent;
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<button class={className} {disabled} on:click>
|
||||
{#if contentComponent && contentComponent._component}
|
||||
{contentComponent}
|
||||
{:else if contentText}
|
||||
{contentText}
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.default {
|
||||
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:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.default:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,41 +1,42 @@
|
|||
main.svelte-j8mzr7{height:100%;width:100%;font-family:"Lato", Helvetica, Arial, sans-serif}
|
||||
.root.svelte-fkeby9{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-fkeby9{flex:0 0 auto;height:25px;background:white;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);padding:5px;width:100%}.content.svelte-fkeby9{flex:1 1 auto;width:100%;height:100px}.content.svelte-fkeby9>div.svelte-fkeby9{height:100%;width:100%}.topnavitem.svelte-fkeby9{cursor:pointer;color:var(--slate);padding:0px 15px}.topnavitem.svelte-fkeby9:hover{color:var(--secondary75)}.active.svelte-fkeby9{color:var(--secondary100)}
|
||||
.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-uaf5ep{height:100%;display:flex}.content.svelte-uaf5ep{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-uaf5ep{flex:0 1 auto;width:300px;height:100%}
|
||||
button.svelte-4po3k2{border-style:none;background-color:rgba(0,0,0,0);cursor:pointer;outline:none}button.svelte-4po3k2:hover{color:var(--hovercolor)}button.svelte-4po3k2:active{outline:none}
|
||||
.root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
|
||||
.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%}
|
||||
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-7rfkdx{border-radius:var(--borderradiusall)}.border-left.svelte-7rfkdx{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-7rfkdx{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-7rfkdx{border-radius:0}button.svelte-7rfkdx{border-style:solid;padding:7px 15px;cursor:pointer}.primary.svelte-7rfkdx{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-7rfkdx:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-7rfkdx:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-7rfkdx:hover{background-color:var(--primary10)}.primary-outline.svelte-7rfkdx:pressed{background-color:var(--primary25)}.secondary.svelte-7rfkdx{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-7rfkdx:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-7rfkdx:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-7rfkdx:hover{background-color:var(--secondary10)}.secondary-outline.svelte-7rfkdx:pressed{background-color:var(--secondary25)}.success.svelte-7rfkdx{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-7rfkdx:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-7rfkdx:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-7rfkdx:hover{background-color:var(--success10)}.success-outline.svelte-7rfkdx:pressed{background-color:var(--success25)}.deletion.svelte-7rfkdx{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-7rfkdx:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-7rfkdx:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-7rfkdx{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-7rfkdx:hover{background-color:var(--deletion10)}.deletion-outline.svelte-7rfkdx:pressed{background-color:var(--deletion25)}
|
||||
.root.svelte-1dih19s{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%}.ui-nav.svelte-1dih19s{grid-column-start:uiNav;background-color:var(--primary10);height:100%}.properties-pane.svelte-1dih19s{grid-column-start:properties;background-color:var(--primary10);height:100%}.pages-list-container.svelte-1dih19s{padding-top:20px}.nav-group-header.svelte-1dih19s{font-size:10pt;padding-left:10px}.nav-items-container.svelte-1dih19s{padding-top:10px}.nav-group-header.svelte-1dih19s{display:grid;grid-template-columns:[icon] auto [title] 1fr [button] auto;padding:10px 2px 0px 7px}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(1){padding:0px 7px 0px 0px;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1dih19s>span.svelte-1dih19s:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--slate)}.nav-group-header.svelte-1dih19s>div.svelte-1dih19s:nth-child(3):hover{color:var(--primary75)}
|
||||
h4.svelte-o0id5a{margin-top:20px}
|
||||
.root.svelte-1py90dy{height:100%;background-color:var(--primary10)}.items-root.svelte-1py90dy{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-1py90dy{flex:1 1 auto}.hierarchy-title-row.svelte-1py90dy{padding:15px 7px;font-size:12pt;display:flex;font-weight:bold}.hierarchy-title.svelte-1py90dy{flex:auto 1 1}.space-filler.svelte-1py90dy{flex:1 1 auto}
|
||||
.root.svelte-zzs4qg{padding:10px}
|
||||
.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
|
||||
.root.svelte-apja7r{height:100%;position:relative}.actions-header.svelte-apja7r{flex:0 1 auto}.node-view.svelte-apja7r{overflow-y:auto;flex:1 1 auto}
|
||||
h1.svelte-2ukyrk{font-size:1.2em}
|
||||
.root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
|
||||
.root.svelte-zy9ybu{height:100%;background-color:var(--primary10)}.items-root.svelte-zy9ybu{display:flex;flex-direction:column;max-height:100%;height:10px}.hierarchy.svelte-zy9ybu{flex:1 1 auto}.hierarchy-title-row.svelte-zy9ybu{padding:15px 7px;font-size:12pt;display:flex;font-weight:bold}.hierarchy-title.svelte-zy9ybu{flex:auto 1 1}.space-filler.svelte-zy9ybu{flex:1 1 auto}
|
||||
.root.svelte-1qmjs65{padding:10px}.edit-button.svelte-1qmjs65{cursor:pointer;color:var(--white)}tr.svelte-1qmjs65:hover .edit-button.svelte-1qmjs65{color:var(--secondary75)}
|
||||
.root.svelte-183dehm{height:100%;border-style:solid;border-color:var(--lightslate);border-width:0px 0px 0px 1px}.padding.svelte-183dehm{padding:0px 5px 0px 10px}.title.svelte-183dehm{background-color:white;padding:3px;display:grid;grid-template-columns:[name] 1fr [actions] auto}.title.svelte-183dehm>div.svelte-183dehm:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-183dehm>div.svelte-183dehm:nth-child(2){grid-column-start:actions}.section-header.svelte-183dehm{font-style:italic;color:var(--slate);border-style:solid;border-color:var(--lightslate);border-width:0px 0px 1px 0px}.section-header.svelte-183dehm{vertical-align:middle;margin-top:20px}
|
||||
.root.svelte-ffb307{padding-bottom:10px;padding-left:10px;font-size:16px;color:var(--secondary50)}.hierarchy-item.svelte-ffb307{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-ffb307:hover{color:var(--secondary75)}.component.svelte-ffb307{margin-left:5px}.selected.svelte-ffb307{color:var(--primary100)}.title.svelte-ffb307{margin-left:10px}
|
||||
.component-preview.svelte-3nuv7g{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-3nuv7g{grid-row-start:middle;grid-column-start:middle}
|
||||
h1.svelte-2ukyrk{font-size:1.2em}
|
||||
.section-container.svelte-1t0x31f{padding:15px;border-style:dotted;border-width:1px;border-color:var(--lightslate);border-radius:2px}.section-container.svelte-1t0x31f:nth-child(1){margin-bottom:15px}.row-text.svelte-1t0x31f{margin-right:15px;color:var(--primary100)}input.svelte-1t0x31f{margin-right:15px}p.svelte-1t0x31f>span.svelte-1t0x31f{margin-left:30px}.header.svelte-1t0x31f{display:grid;grid-template-columns:[title] 1fr [icon] auto}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(1){grid-column-start:title}.header.svelte-1t0x31f>div.svelte-1t0x31f:nth-child(2){grid-column-start:icon}
|
||||
.component-preview.svelte-1jir83x{display:grid;grid-template-rows:[top] 1fr [middle] auto [bottom] 1fr;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-column-start:preview;height:100%}.component-container.svelte-1jir83x{grid-row-start:middle;grid-column-start:middle}
|
||||
.root.svelte-zzs4qg{padding:10px}
|
||||
.root.svelte-1cnqtw{color:var(--secondary50)}.hierarchy-item.svelte-1cnqtw{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1cnqtw:hover{color:var(--secondary75)}.component.svelte-1cnqtw{margin-left:5px}.currentfolder.svelte-1cnqtw{color:var(--secondary100)}.selected.svelte-1cnqtw{color:var(--primary100)}.title.svelte-1cnqtw{margin-left:10px}
|
||||
.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
|
||||
.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
|
||||
.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
|
||||
.root.svelte-1bn4xbe{display:block;font-size:12pt;width:100%;cursor:pointer}.title.svelte-1bn4xbe{padding-top:5px;padding-right:5px;padding-bottom:5px;color:var(--secondary100)}.title.svelte-1bn4xbe:hover{background-color:var(--secondary10)}.active.svelte-1bn4xbe{background-color:var(--primary10)}
|
||||
.dropdown-background.svelte-179p8ge{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-179p8ge{cursor:pointer;z-index:1}.dropdown-content.svelte-179p8ge{position:absolute;background-color:var(--white);min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;font-weight:normal;border-style:solid;border-width:1px;border-color:var(--secondary10)}.dropdown-content.svelte-179p8ge:not(:focus){display:none}.action-row.svelte-179p8ge{padding:7px 10px;cursor:pointer}.action-row.svelte-179p8ge:hover{background-color:var(--primary100);color:var(--white)}
|
||||
.root.svelte-d6wwkb{display:flex}.root.svelte-d6wwkb:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-d6wwkb:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-d6wwkb:not(:first-child):not(:last-child){border-radius:0}
|
||||
.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
|
||||
.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
|
||||
.root.svelte-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
|
||||
.root.svelte-1q40nqm{display:block;font-size:13pt;width:100%;cursor:pointer}.title.svelte-1q40nqm{font:var(--bodytext);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-1q40nqm:hover{background-color:var(--secondary10)}
|
||||
.root.svelte-kswv5p{height:100%;padding:15px}.fields-table.svelte-kswv5p{margin:10px;border-collapse:collapse}.add-field-button.svelte-kswv5p{margin-left:15px;cursor:pointer}.edit-button.svelte-kswv5p{cursor:pointer;color:var(--white)}.edit-button.svelte-kswv5p:hover{color:var(--secondary75)}th.svelte-kswv5p{text-align:left}td.svelte-kswv5p{padding:5px 30px 5px 0px;margin:0}thead.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-kswv5p>tr.svelte-kswv5p{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-kswv5p>tr.svelte-kswv5p:hover{background-color:var(--primary10)}tbody.svelte-kswv5p>tr:hover .edit-button.svelte-kswv5p{color:var(--secondary75)}.index-container.svelte-kswv5p{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-kswv5p{color:var(--slate)}.index-name.svelte-kswv5p{font-weight:bold;color:var(--primary100)}.index-container.svelte-kswv5p code.svelte-kswv5p{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-kswv5p{margin-top:7px}
|
||||
.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
|
||||
.root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
|
||||
.component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
|
||||
.info-text.svelte-um9cf7{font-size:0.8em;color:var(--slate)}
|
||||
.nav-item.svelte-1y614ns{padding:7px;font-size:12pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1y614ns:hover{background-color:var(--primary10)}.active.svelte-1y614ns{background-color:var(--primary10)}
|
||||
.root.svelte-1tilbnf{padding:5px;top:0;width:100%}
|
||||
.component.svelte-13tuzj8{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-13tuzj8:hover{background-color:var(--primary10)}.component.svelte-13tuzj8>.title.svelte-13tuzj8{font-size:13pt;color:var(--secondary100)}.component.svelte-13tuzj8>.description.svelte-13tuzj8{font-size:10pt;color:var(--primary75);font-style:italic}
|
||||
.edit-button.svelte-9z4fqi{cursor:pointer;color:var(--white)}tr.svelte-9z4fqi:hover .edit-button.svelte-9z4fqi{color:var(--secondary75)}
|
||||
.root.svelte-1sxai5n{font-size:10pt}.padding.svelte-1sxai5n{padding:0 10px}.inherited-title.svelte-1sxai5n{margin-top:40px;display:grid;grid-template-columns:[name] 1fr [actions] auto;border-style:solid;border-width:0px 0px 1px 0px;border-color:var(--lightslate);font-style:italic}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(1){grid-column-start:name;color:var(--slate)}.inherited-title.svelte-1sxai5n>div.svelte-1sxai5n:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
|
||||
.title.svelte-1pp53c5{padding:3px;background-color:white;color:var(--secondary100);border-style:solid;border-width:1px 0 0 0;border-color:var(--lightslate)}.title.svelte-1pp53c5>span.svelte-1pp53c5{margin-left:10px}
|
||||
.root.svelte-1bn4xbe{display:block;font-size:12pt;width:100%;cursor:pointer}.title.svelte-1bn4xbe{padding-top:5px;padding-right:5px;padding-bottom:5px;color:var(--secondary100)}.title.svelte-1bn4xbe:hover{background-color:var(--secondary10)}.active.svelte-1bn4xbe{background-color:var(--primary10)}
|
||||
.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
|
||||
.edit-button.svelte-neetem{cursor:pointer;color:var(--white)}tr.svelte-neetem:hover .edit-button.svelte-neetem{color:var(--secondary75)}
|
||||
textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
|
||||
input.svelte-66516k{margin-right:7px}
|
||||
.error-container.svelte-jwy920{padding:10px;border-style:solid;border-color:var(--deletion100);border-radius:var(--borderradiusall);background:var(--deletion75)}.error-row.svelte-jwy920{padding:5px 0px}
|
||||
textarea.svelte-1ooq0hh{padding:3px;background:var(--darkslate);color:var(--white);font-family:'Courier New', Courier, monospace;width:95%;height:100px}
|
||||
.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
|
||||
.root.svelte-woqcuf{display:grid;grid-template-columns:[name] 1fr [actions] auto}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(1){grid-column-start:name;color:var(--secondary50)}.root.svelte-woqcuf>div.svelte-woqcuf:nth-child(2){grid-column-start:actions}.selectedname.svelte-woqcuf{font-weight:bold;color:var(--secondary)}
|
||||
.root.svelte-w5on8s{padding:3px 5px 7px 10px;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary25)}
|
||||
.root.svelte-bv289q{padding:10px}.option-container.svelte-bv289q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
|
||||
.addelement-container.svelte-jliz3p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-jliz3p:hover{background-color:var(--primary25)}.item-container.svelte-jliz3p{padding-left:3px;background:var(--secondary10)}
|
||||
textarea.svelte-1wfv4cc{width:300px;height:200px}
|
||||
.nav-item.svelte-1y614ns{padding:7px;font-size:12pt;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1y614ns:hover{background-color:var(--primary10)}.active.svelte-1y614ns{background-color:var(--primary10)}
|
||||
|
||||
/*# sourceMappingURL=bundle.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -12,3 +12,4 @@ module.exports = () => ({
|
|||
dev:true,
|
||||
customizeMaster: appDefinition => appDefinition
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue