Event bindings with context, array binding, Table component...
This commit is contained in:
Michael Shanks
parent
d3a0f2698c
commit
cb6fe94584
|
|
@ -2,8 +2,10 @@ import {
|
|||
isString
|
||||
} from "lodash/fp";
|
||||
|
||||
export const BB_STATE_BINDINGPATH = "##bbstate";
|
||||
export const BB_STATE_FALLBACK = "##bbstatefallback";
|
||||
import {
|
||||
BB_STATE_BINDINGPATH, BB_STATE_FALLBACK,
|
||||
BB_STATE_BINDINGSOURCE
|
||||
} from "@budibase/client/src/state/isState";
|
||||
|
||||
export const isBinding = value =>
|
||||
!isString(value)
|
||||
|
|
@ -11,15 +13,17 @@ export const isBinding = value =>
|
|||
&& isString(value[BB_STATE_BINDINGPATH])
|
||||
&& value[BB_STATE_BINDINGPATH].length > 0;
|
||||
|
||||
export const setBinding = ({path, fallback}, binding={} ) => {
|
||||
export const setBinding = ({path, fallback, source}, binding={} ) => {
|
||||
if(isNonEmptyString(path)) binding[BB_STATE_BINDINGPATH] = path;
|
||||
if(isNonEmptyString(fallback)) binding[BB_STATE_FALLBACK] = fallback;
|
||||
binding[BB_STATE_BINDINGSOURCE] = source || "store";
|
||||
return binding
|
||||
}
|
||||
|
||||
export const getBinding = binding => ({
|
||||
path: binding[BB_STATE_BINDINGPATH] || "",
|
||||
fallback: binding[BB_STATE_FALLBACK] || ""
|
||||
fallback: binding[BB_STATE_FALLBACK] || "",
|
||||
source: binding[BB_STATE_BINDINGSOURCE] || "store"
|
||||
});
|
||||
|
||||
const isNonEmptyString = s => isString(s) && s.length > 0;
|
||||
|
|
@ -15,19 +15,27 @@ export let options=[];
|
|||
let isBound=false;
|
||||
let bindingPath="";
|
||||
let bindingFallbackValue="";
|
||||
let bindingSource="store";
|
||||
let isExpanded = false;
|
||||
let forceIsBound = false;
|
||||
let canOnlyBind = false;
|
||||
|
||||
$: {
|
||||
canOnlyBind = type === "state";
|
||||
if(!forceIsBound && canOnlyBind)
|
||||
forceIsBound = true;
|
||||
|
||||
isBound= forceIsBound || isBinding(value);
|
||||
|
||||
if(isBound) {
|
||||
const binding = getBinding(value);
|
||||
bindingPath= binding.path;
|
||||
bindingFallbackValue= binding.fallback;
|
||||
bindingSource = binding.source || "store";
|
||||
} else {
|
||||
bindingPath="";
|
||||
bindingFallbackValue="";
|
||||
bindingSource="store";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,24 +44,27 @@ const clearBinding = () => {
|
|||
onChanged("");
|
||||
}
|
||||
|
||||
const bind = (path, fallback) => {
|
||||
const bind = (path, fallback, source) => {
|
||||
if(!path) {
|
||||
clearBinding("");
|
||||
return;
|
||||
}
|
||||
const binding = setBinding({path, fallback});
|
||||
const binding = setBinding({path, fallback, source});
|
||||
onChanged(binding);
|
||||
}
|
||||
|
||||
const setBindingPath = ev => {
|
||||
forceIsBound = false;
|
||||
bind(ev.target.value, bindingFallbackValue)
|
||||
forceIsBound = canOnlyBind;
|
||||
bind(ev.target.value, bindingFallbackValue, bindingSource)
|
||||
}
|
||||
|
||||
const setBindingFallback = ev => {
|
||||
bind(bindingPath, ev.target.value);
|
||||
bind(bindingPath, ev.target.value, bindingSource);
|
||||
}
|
||||
|
||||
const setBindingSource = ev => {
|
||||
bind(bindingPath, bindingFallbackValue, ev.target.value);
|
||||
}
|
||||
|
||||
const makeBinding = () => {
|
||||
forceIsBound=true;
|
||||
|
|
@ -69,9 +80,11 @@ const makeBinding = () => {
|
|||
<IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
|
||||
size="12"
|
||||
on:click={() => isExpanded=!isExpanded}/>
|
||||
{#if !canOnlyBind}
|
||||
<IconButton icon="trash"
|
||||
size="12"
|
||||
on:click={clearBinding}/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div>
|
||||
|
|
@ -83,6 +96,15 @@ const makeBinding = () => {
|
|||
<input class="uk-input uk-form-small"
|
||||
value={bindingFallbackValue}
|
||||
on:change={setBindingFallback} >
|
||||
<div class="binding-prop-label">Binding Source</div>
|
||||
<select class="uk-select uk-form-small"
|
||||
value={bindingSource}
|
||||
on:change={setBindingSource}>
|
||||
|
||||
<option>store</option>
|
||||
<option>context</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ import {
|
|||
EVENT_TYPE_MEMBER_NAME
|
||||
} from "../../common/eventHandlers";
|
||||
|
||||
import {
|
||||
isBound, BB_STATE_BINDINGPATH
|
||||
} from "@budibase/client/src/state/isState";
|
||||
|
||||
const defaultDef = typeName => () => ({
|
||||
type: typeName,
|
||||
required:false,
|
||||
|
|
@ -61,6 +65,11 @@ const isEvent = e =>
|
|||
const isEventList = e =>
|
||||
isArray(e) && every(isEvent)(e);
|
||||
|
||||
const emptyState = () => {
|
||||
const s = {};
|
||||
s[BB_STATE_BINDINGPATH] = "";
|
||||
return s;
|
||||
}
|
||||
|
||||
export const types = {
|
||||
string: propType(() => "", isString, defaultDef("string")),
|
||||
|
|
@ -70,5 +79,6 @@ export const types = {
|
|||
options: propType(() => "", isString, defaultDef("options")),
|
||||
component: propType(() => ({_component:""}), isComponent, defaultDef("component")),
|
||||
asset: propType(() => "", isString, defaultDef("asset")),
|
||||
event: propType(() => [], isEventList, defaultDef("event"))
|
||||
event: propType(() => [], isEventList, defaultDef("event")),
|
||||
state: propType(() => emptyState(), isBound, defaultDef("state"))
|
||||
};
|
||||
|
|
@ -73,8 +73,7 @@ export const recursivelyValidate = (rootProps, getComponent, stack=[]) => {
|
|||
const childArrayErrors = pipe(propsDefArray, [
|
||||
filter(d => d.type === "array"),
|
||||
map(d => pipe(rootProps[d.name], [
|
||||
map(elementProps => pipe(elementProps._component, [
|
||||
getComponentPropsDefinition,
|
||||
map(elementProps => pipe(d.elementDefinition, [
|
||||
getPropsDefArray,
|
||||
arr => validateChildren(
|
||||
arr,
|
||||
|
|
@ -99,11 +98,11 @@ const expandPropDef = propDef => {
|
|||
}
|
||||
|
||||
|
||||
export const validateProps = (propsDefinition, props, stack=[], isFinal=true) => {
|
||||
export const validateProps = (propsDefinition, props, stack=[], isFinal=true, isArrayElement=false) => {
|
||||
|
||||
const errors = [];
|
||||
|
||||
if(isFinal && !props._component) {
|
||||
if(isFinal && !props._component && !isArrayElement) {
|
||||
makeError(errors, "_component", stack)("Component is not set");
|
||||
return errors;
|
||||
// this would break everything else anyway
|
||||
|
|
@ -149,7 +148,8 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) =>
|
|||
propDef.elementDefinition,
|
||||
arrayItem,
|
||||
[...stack, `${propDefName}[${index}]`],
|
||||
isFinal
|
||||
isFinal,
|
||||
true
|
||||
)
|
||||
for(let arrErr of arrayErrs) {
|
||||
errors.push(arrErr);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ describe("buildPropsHierarchy", () => {
|
|||
const button1 = primaryButtonProps();
|
||||
button1.contentText = "Button 1";
|
||||
expect(allprops.children[0]).toEqual({
|
||||
_component: "children[0]",
|
||||
_component: "children#array_element#",
|
||||
control: button1
|
||||
});
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ describe("buildPropsHierarchy", () => {
|
|||
const button2 = primaryButtonProps();
|
||||
button2.contentText = "Button 2";
|
||||
expect(allprops.children[1]).toEqual({
|
||||
_component: "children[1]",
|
||||
_component: "children#array_element#",
|
||||
control: button2
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import {
|
||||
createProps,
|
||||
createPropsAndDefinition
|
||||
} from "../src/userInterface/pagesParsing/createProps";
|
||||
import {
|
||||
keys, some
|
||||
} from "lodash/fp";
|
||||
import { allComponents } from "./testData";
|
||||
import {
|
||||
BB_STATE_BINDINGPATH
|
||||
} from "@budibase/client/src/state/isState";
|
||||
|
||||
describe("createDefaultProps", () => {
|
||||
|
||||
|
|
@ -115,6 +116,18 @@ describe("createDefaultProps", () => {
|
|||
expect(props.onClick).toEqual([]);
|
||||
});
|
||||
|
||||
it("should create a object with empty state when prop def is 'state' ", () => {
|
||||
const propDef = {
|
||||
data: "state"
|
||||
};
|
||||
|
||||
const { props, errors } = createProps("some_component",propDef);
|
||||
|
||||
expect(errors).toEqual([]);
|
||||
expect(props.data[BB_STATE_BINDINGPATH]).toBeDefined();
|
||||
expect(props.data[BB_STATE_BINDINGPATH]).toBe("");
|
||||
});
|
||||
|
||||
it("should create a object with single empty component props, when prop definition is 'component' ", () => {
|
||||
const propDef = {
|
||||
content: "component"
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@ describe("getAncestorProps", () => {
|
|||
|
||||
expect(result).toEqual([
|
||||
components[0].props,
|
||||
{...components[3].props},
|
||||
{...components[4].props}
|
||||
{...components[4].props},
|
||||
{...components[5].props}
|
||||
]);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,6 +34,13 @@ export const allComponents = () => ([
|
|||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name:"budibase-components/RecordView",
|
||||
tags: ["record"],
|
||||
props: {
|
||||
data: "state"
|
||||
}
|
||||
},
|
||||
{
|
||||
inherits:"budibase-components/TextBox",
|
||||
name: "common/SmallTextbox",
|
||||
|
|
@ -41,6 +48,7 @@ export const allComponents = () => ([
|
|||
size: "small"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
inherits:"common/SmallTextbox",
|
||||
name: "common/PasswordBox",
|
||||
|
|
|
|||
|
|
@ -4,8 +4,12 @@ import {
|
|||
} from "lodash/fp";
|
||||
import {writable} from "svelte/store";
|
||||
import { $ } from "./core/common";
|
||||
import { setupBinding } from "./state/stateBinding";
|
||||
import {
|
||||
setupBinding
|
||||
} from "./state/stateBinding";
|
||||
import { createCoreApi } from "./core";
|
||||
import { getStateOrValue } from "./state/getState";
|
||||
|
||||
|
||||
export const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
|
|
@ -19,7 +23,7 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
|
||||
const component = new (componentLibraries[libName][componentName])({
|
||||
target: htmlElement,
|
||||
props: {...initialProps, _app},
|
||||
props: {...initialProps, _bb},
|
||||
hydrate:true
|
||||
});
|
||||
|
||||
|
|
@ -32,12 +36,20 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
_bbuser: user
|
||||
});
|
||||
|
||||
const _app = {
|
||||
|
||||
let globalState = null;
|
||||
store.subscribe(s => {
|
||||
globalState = s;
|
||||
});
|
||||
|
||||
const _bb = {
|
||||
initialiseComponent,
|
||||
store
|
||||
store,
|
||||
getStateOrValue: (prop, currentContext) =>
|
||||
getStateOrValue(globalState, prop, currentContext)
|
||||
};
|
||||
|
||||
return _app;
|
||||
return _bb;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,14 @@ import {
|
|||
isUndefined,
|
||||
isObject
|
||||
} from "lodash/fp";
|
||||
import {
|
||||
isBound,BB_STATE_BINDINGPATH, BB_STATE_FALLBACK, takeStateFromStore
|
||||
} from "./isState";
|
||||
|
||||
export const getState = (s, path, fallback) => {
|
||||
|
||||
if(!path || path.length === 0) return fallback;
|
||||
|
||||
const pathParts = path.split(".");
|
||||
const safeGetPath = (obj, currentPartIndex=0) => {
|
||||
|
||||
|
|
@ -31,4 +36,14 @@ export const getState = (s, path, fallback) => {
|
|||
|
||||
|
||||
return safeGetPath(s);
|
||||
}
|
||||
|
||||
export const getStateOrValue = (globalState, prop, currentContext) => {
|
||||
if(!isBound(prop)) return prop;
|
||||
|
||||
const stateToUse = takeStateFromStore(prop)
|
||||
? globalState
|
||||
: currentContext;
|
||||
|
||||
return getState(stateToUse, prop[BB_STATE_BINDINGPATH], prop[BB_STATE_FALLBACK]);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export const BB_STATE_BINDINGPATH = "##bbstate";
|
||||
export const BB_STATE_BINDINGSOURCE = "##bbsource";
|
||||
export const BB_STATE_FALLBACK = "##bbstatefallback";
|
||||
|
||||
export const isBound = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
|
||||
export const takeStateFromStore = (prop) =>
|
||||
prop[BB_STATE_BINDINGSOURCE] === undefined
|
||||
|| prop[BB_STATE_BINDINGSOURCE] === "store";
|
||||
|
|
@ -5,6 +5,8 @@ import {
|
|||
|
||||
export const setState = (store, path, value) => {
|
||||
|
||||
if(!path || path.length === 0) return;
|
||||
|
||||
const pathParts = path.split(".");
|
||||
const safeSetPath = (obj, currentPartIndex=0) => {
|
||||
|
||||
|
|
|
|||
|
|
@ -6,110 +6,166 @@ import {
|
|||
getState
|
||||
} from "./getState";
|
||||
|
||||
export const BB_STATE_BINDINGPATH = "##bbstate";
|
||||
export const BB_STATE_FALLBACK = "##bbstatefallback";
|
||||
import {
|
||||
isBound, takeStateFromStore,
|
||||
BB_STATE_FALLBACK, BB_STATE_BINDINGPATH
|
||||
} from "./isState";
|
||||
|
||||
const doNothing = () => {};
|
||||
export const setupBinding = (store, props, coreApi) => {
|
||||
export const setupBinding = (store, rootProps, coreApi) => {
|
||||
|
||||
const initialProps = {...props};
|
||||
const boundProps = [];
|
||||
const componentEventHandlers = [];
|
||||
const rootInitialProps = {...rootProps};
|
||||
|
||||
for(let propName in props) {
|
||||
const val = initialProps[propName];
|
||||
|
||||
if(isState(val)) {
|
||||
const getBindings = (props, initialProps) => {
|
||||
|
||||
const binding = stateBinding(val);
|
||||
const fallback = stateFallback(val);
|
||||
const boundProps = [];
|
||||
const componentEventHandlers = [];
|
||||
const boundArrays = [];
|
||||
|
||||
boundProps.push({
|
||||
stateBinding:binding,
|
||||
fallback, propName
|
||||
});
|
||||
|
||||
initialProps[propName] = fallback;
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
const handlers = { propName, handlers:[] };
|
||||
componentEventHandlers.push(handlers);
|
||||
for(let propName in props) {
|
||||
|
||||
for(let e of val) {
|
||||
handlers.handlers.push({
|
||||
handlerType: e[EVENT_TYPE_MEMBER_NAME],
|
||||
parameters: e.parameters
|
||||
})
|
||||
if(propName === "_component") continue;
|
||||
|
||||
const val = initialProps[propName];
|
||||
|
||||
if(isBound(val) && takeStateFromStore(val)) {
|
||||
|
||||
const binding = stateBinding(val);
|
||||
const fallback = stateFallback(val);
|
||||
|
||||
boundProps.push({
|
||||
stateBinding:binding,
|
||||
fallback, propName
|
||||
});
|
||||
|
||||
initialProps[propName] = fallback;
|
||||
} else if(isEventType(val)) {
|
||||
|
||||
const handlers = { propName, handlers:[] };
|
||||
componentEventHandlers.push(handlers);
|
||||
|
||||
for(let e of val) {
|
||||
handlers.handlers.push({
|
||||
handlerType: e[EVENT_TYPE_MEMBER_NAME],
|
||||
parameters: e.parameters
|
||||
})
|
||||
}
|
||||
|
||||
initialProps[propName] = doNothing;
|
||||
} else if(Array.isArray(val)) {
|
||||
const arrayOfBindings = [];
|
||||
for(let element of val){
|
||||
arrayOfBindings.push(getBindings(element, {...element}));
|
||||
}
|
||||
|
||||
boundArrays.push({
|
||||
arrayOfBindings,
|
||||
propName
|
||||
});
|
||||
}
|
||||
|
||||
initialProps[propName] = doNothing;
|
||||
}
|
||||
|
||||
|
||||
return {boundProps, componentEventHandlers, boundArrays, initialProps};
|
||||
}
|
||||
|
||||
const bind = (component) => {
|
||||
|
||||
if(boundProps.length === 0 && componentEventHandlers.length === 0) return;
|
||||
|
||||
const bind = (rootBindings) => (component) => {
|
||||
|
||||
if(rootBindings.boundProps.length === 0
|
||||
&& rootBindings.componentEventHandlers.length === 0
|
||||
&& rootBindings.boundArrays.length === 0) return;
|
||||
|
||||
const handlerTypes = eventHandlers(store, coreApi);
|
||||
|
||||
const unsubscribe = store.subscribe(s => {
|
||||
const newProps = {};
|
||||
const unsubscribe = store.subscribe(rootState => {
|
||||
|
||||
|
||||
for(let boundProp of boundProps) {
|
||||
const val = getState(
|
||||
s,
|
||||
boundProp.stateBinding,
|
||||
boundProp.fallback);
|
||||
const getPropsFromBindings = (s, bindings) => {
|
||||
|
||||
if(val === undefined && newProps[boundProp.propName] !== undefined) {
|
||||
delete newProps[boundProp.propName];
|
||||
}
|
||||
|
||||
if(val !== undefined) {
|
||||
newProps[boundProp.propName] = val;
|
||||
}
|
||||
}
|
||||
|
||||
for(let boundHandler of componentEventHandlers) {
|
||||
|
||||
const closuredHandlers = [];
|
||||
for(let h of boundHandler.handlers) {
|
||||
const parameters = {};
|
||||
for(let pname in h.parameters) {
|
||||
const p = h.parameters[pname];
|
||||
parameters[pname] = isState(p)
|
||||
? getState(
|
||||
s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
|
||||
: p;
|
||||
|
||||
}
|
||||
const handlerType = handlerTypes[h.handlerType];
|
||||
closuredHandlers.push(() => handlerType.execute(parameters));
|
||||
}
|
||||
|
||||
newProps[boundHandler.propName] = async () => {
|
||||
for(let runHandler of closuredHandlers) {
|
||||
await runHandler();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
const {boundProps, componentEventHandlers, boundArrays} = bindings;
|
||||
const newProps = {...bindings.initialProps};
|
||||
|
||||
for(let boundProp of boundProps) {
|
||||
const val = getState(
|
||||
s,
|
||||
boundProp.stateBinding,
|
||||
boundProp.fallback);
|
||||
|
||||
component.$set(newProps);
|
||||
if(val === undefined && newProps[boundProp.propName] !== undefined) {
|
||||
delete newProps[boundProp.propName];
|
||||
}
|
||||
|
||||
if(val !== undefined) {
|
||||
newProps[boundProp.propName] = val;
|
||||
}
|
||||
}
|
||||
|
||||
for(let boundHandler of componentEventHandlers) {
|
||||
|
||||
const closuredHandlers = [];
|
||||
for(let h of boundHandler.handlers) {
|
||||
const handlerType = handlerTypes[h.handlerType];
|
||||
closuredHandlers.push((context) => {
|
||||
|
||||
const parameters = {};
|
||||
for(let pname in h.parameters) {
|
||||
const p = h.parameters[pname];
|
||||
parameters[pname] =
|
||||
!isBound(p)
|
||||
? p
|
||||
: takeStateFromStore(p)
|
||||
? getState(
|
||||
s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
|
||||
: getState(
|
||||
context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
|
||||
|
||||
}
|
||||
handlerType.execute(parameters)
|
||||
});
|
||||
}
|
||||
|
||||
newProps[boundHandler.propName] = async (context) => {
|
||||
for(let runHandler of closuredHandlers) {
|
||||
await runHandler(context);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
for(let boundArray of boundArrays) {
|
||||
let index = 0;
|
||||
if(!newProps[boundArray.propName])
|
||||
newProps[boundArray.propName] = [];
|
||||
for(let bindings of boundArray.arrayOfBindings){
|
||||
newProps[boundArray.propName][index] = getPropsFromBindings(
|
||||
s,
|
||||
bindings);
|
||||
index++;
|
||||
}
|
||||
}
|
||||
|
||||
return newProps;
|
||||
|
||||
}
|
||||
|
||||
const rootNewProps = getPropsFromBindings(rootState, rootBindings);
|
||||
|
||||
component.$set(rootNewProps);
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}
|
||||
|
||||
const bindings = getBindings(rootProps, rootInitialProps);
|
||||
|
||||
return {
|
||||
initialProps, bind
|
||||
initialProps:rootInitialProps, bind:bind(bindings)
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
const isState = (prop) => prop[BB_STATE_BINDINGPATH] !== undefined;
|
||||
const stateBinding = (prop) => prop[BB_STATE_BINDINGPATH];
|
||||
const stateFallback = (prop) => prop[BB_STATE_FALLBACK];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import {
|
||||
setupBinding,
|
||||
BB_STATE_BINDINGPATH,
|
||||
BB_STATE_FALLBACK
|
||||
setupBinding
|
||||
} from "../src/state/stateBinding";
|
||||
import {
|
||||
BB_STATE_BINDINGPATH,
|
||||
BB_STATE_FALLBACK,
|
||||
BB_STATE_BINDINGSOURCE
|
||||
} from "../src/state/isState";
|
||||
import { EVENT_TYPE_MEMBER_NAME } from "../src/state/eventHandlers";
|
||||
import {writable} from "svelte/store";
|
||||
import { isFunction } from "lodash/fp";
|
||||
|
|
@ -71,6 +74,59 @@ describe("setupBinding", () => {
|
|||
|
||||
});
|
||||
|
||||
it("should update bound array props when updated ", () => {
|
||||
|
||||
const {component, store, props} = testSetup();
|
||||
|
||||
const {bind} = testSetupBinding(store, props, component);
|
||||
bind(component);
|
||||
|
||||
store.update(s => {
|
||||
s.FirstName = "Bobby";
|
||||
s.LastName = "Thedog";
|
||||
s.Customer = {
|
||||
Name: "ACME inc",
|
||||
Address: ""
|
||||
};
|
||||
s.addressToSet = "123 Main Street";
|
||||
s.ArrayVal1 = "item 1 - version 1";
|
||||
s.ArrayVal2 = "item 2 - version 1";
|
||||
s.ArrayVal3 = "inner array item";
|
||||
return s;
|
||||
});
|
||||
|
||||
expect(component.props.arrayWithInnerBinding[0].innerBound).toBe("item 1 - version 1");
|
||||
expect(component.props.arrayWithInnerBinding[1].innerBound).toBe("item 2 - version 1");
|
||||
expect(component.props.arrayWithInnerBinding[0].innerUnbound).toBe("not bound 1");
|
||||
expect(component.props.arrayWithInnerBinding[1].innerUnbound).toBe("not bound 2");
|
||||
|
||||
});
|
||||
|
||||
it("should update bound nested (2nd level) array props when updated ", () => {
|
||||
|
||||
const {component, store, props} = testSetup();
|
||||
|
||||
const {bind} = testSetupBinding(store, props, component);
|
||||
bind(component);
|
||||
|
||||
store.update(s => {
|
||||
s.FirstName = "Bobby";
|
||||
s.LastName = "Thedog";
|
||||
s.Customer = {
|
||||
Name: "ACME inc",
|
||||
Address: ""
|
||||
};
|
||||
s.addressToSet = "123 Main Street";
|
||||
s.ArrayVal1 = "item 1 - version 1";
|
||||
s.ArrayVal2 = "item 2 - version 1";
|
||||
s.ArrayVal3 = "inner array item";
|
||||
return s;
|
||||
});
|
||||
|
||||
expect(component.props.arrayWithInnerBinding[2].innerArray[0].innerInnerBound).toBe("inner array item");
|
||||
|
||||
});
|
||||
|
||||
it("should update event handlers on state change", () => {
|
||||
|
||||
const {component, store, props} = testSetup();
|
||||
|
|
@ -92,6 +148,30 @@ describe("setupBinding", () => {
|
|||
|
||||
});
|
||||
|
||||
it("event handlers should recognise context state", () => {
|
||||
|
||||
const {component, store, props} = testSetup();
|
||||
|
||||
const {bind} = testSetupBinding(store, props, component);
|
||||
bind(component);
|
||||
|
||||
expect(component.props.boundToEventOutput).toBe("initial address");
|
||||
component.props.eventBoundUsingContext({addressOverride: "Overridden Address"});
|
||||
expect(component.props.boundToEventOutput).toBe("Overridden Address");
|
||||
|
||||
store.update(s => {
|
||||
s.addressToSet = "123 Main Street"
|
||||
return s;
|
||||
});
|
||||
|
||||
component.props.eventBound();
|
||||
expect(component.props.boundToEventOutput).toBe("123 Main Street");
|
||||
|
||||
component.props.eventBoundUsingContext({addressOverride: "Overridden Address"});
|
||||
expect(component.props.boundToEventOutput).toBe("Overridden Address");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
const testSetupBinding = (store, props, component) => {
|
||||
const setup = setupBinding(store, props);
|
||||
|
|
@ -109,10 +189,11 @@ const testSetup = () => {
|
|||
}
|
||||
|
||||
|
||||
const binding = (path, fallback) => {
|
||||
const binding = (path, fallback, source) => {
|
||||
const b = {};
|
||||
b[BB_STATE_BINDINGPATH] = path;
|
||||
b[BB_STATE_FALLBACK] = fallback;
|
||||
b[BB_STATE_BINDINGSOURCE] = source || "store";
|
||||
return b;
|
||||
};
|
||||
|
||||
|
|
@ -134,6 +215,29 @@ const testSetup = () => {
|
|||
path: "Customer.Address",
|
||||
value: binding("addressToSet", "event fallback address")
|
||||
})
|
||||
],
|
||||
eventBoundUsingContext: [
|
||||
event("Set State", {
|
||||
path: "Customer.Address",
|
||||
value: binding("addressOverride", "", "context")
|
||||
})
|
||||
],
|
||||
arrayWithInnerBinding: [
|
||||
{
|
||||
innerBound: binding("ArrayVal1"),
|
||||
innerUnbound: "not bound 1"
|
||||
},
|
||||
{
|
||||
innerBound: binding("ArrayVal2"),
|
||||
innerUnbound: "not bound 2"
|
||||
},
|
||||
{
|
||||
innerArray: [
|
||||
{
|
||||
innerInnerBound: binding("ArrayVal3")
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,47 @@
|
|||
main.svelte-24wuof{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}.settings.svelte-24wuof{position:absolute;bottom:25px;right:25px}
|
||||
.root.svelte-jymnqv{position:fixed;margin:0 auto;text-align:center;top:20%;width:100%}.inner.svelte-jymnqv{display:inline-block;margin:auto}.logo.svelte-jymnqv{width:300px;margin-bottom:40px}.root.svelte-jymnqv .option{width:250px}.app-link.svelte-jymnqv{margin-top:10px;display:block}
|
||||
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-kmbqdt{height:100%;width:100%;display:flex;flex-direction:column}.top-nav.svelte-kmbqdt{flex:0 0 auto;height:25px;background:white;padding:5px;width:100%}.content.svelte-kmbqdt{flex:1 1 auto;width:100%;height:100px}.content.svelte-kmbqdt>div.svelte-kmbqdt{height:100%;width:100%}.topnavitem.svelte-kmbqdt{cursor:pointer;color:var(--secondary50);padding:0px 15px;font-weight:600;font-size:.9rem}.topnavitem.svelte-kmbqdt:hover{color:var(--secondary75);font-weight:600}.active.svelte-kmbqdt{color:var(--primary100);font-weight:900}
|
||||
.border-normal.svelte-p1bw3l{border-radius:var(--borderradiusall)}.border-left.svelte-p1bw3l{border-radius:var(--borderradius) 0 0 var(--borderradius)}.border-right.svelte-p1bw3l{border-radius:0 var(--borderradius) var(--borderradius) 0}.border-middle.svelte-p1bw3l{border-radius:0}button.svelte-p1bw3l{border-style:solid;padding:7.5px 15px;cursor:pointer;margin:5px;border-radius:5px}.primary.svelte-p1bw3l{background-color:var(--primary100);border-color:var(--primary100);color:var(--white)}.primary.svelte-p1bw3l:hover{background-color:var(--primary75);border-color:var(--primary75)}.primary.svelte-p1bw3l:active{background-color:var(--primarydark);border-color:var(--primarydark)}.primary-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--primary100);color:var(--primary100)}.primary-outline.svelte-p1bw3l:hover{background-color:var(--primary10)}.primary-outline.svelte-p1bw3l:pressed{background-color:var(--primary25)}.secondary.svelte-p1bw3l{background-color:var(--secondary100);border-color:var(--secondary100);color:var(--white)}.secondary.svelte-p1bw3l:hover{background-color:var(--secondary75);border-color:var(--secondary75)}.secondary.svelte-p1bw3l:pressed{background-color:var(--secondarydark);border-color:var(--secondarydark)}.secondary-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--secondary100);color:var(--secondary100)}.secondary-outline.svelte-p1bw3l:hover{background-color:var(--secondary10)}.secondary-outline.svelte-p1bw3l:pressed{background-color:var(--secondary25)}.success.svelte-p1bw3l{background-color:var(--success100);border-color:var(--success100);color:var(--white)}.success.svelte-p1bw3l:hover{background-color:var(--success75);border-color:var(--success75)}.success.svelte-p1bw3l:pressed{background-color:var(--successdark);border-color:var(--successdark)}.success-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--success100);color:var(--success100)}.success-outline.svelte-p1bw3l:hover{background-color:var(--success10)}.success-outline.svelte-p1bw3l:pressed{background-color:var(--success25)}.deletion.svelte-p1bw3l{background-color:var(--deletion100);border-color:var(--deletion100);color:var(--white)}.deletion.svelte-p1bw3l:hover{background-color:var(--deletion75);border-color:var(--deletion75)}.deletion.svelte-p1bw3l:pressed{background-color:var(--deletiondark);border-color:var(--deletiondark)}.deletion-outline.svelte-p1bw3l{background-color:var(--white);border-color:var(--deletion100);color:var(--deletion100)}.deletion-outline.svelte-p1bw3l:hover{background-color:var(--deletion10)}.deletion-outline.svelte-p1bw3l:pressed{background-color:var(--deletion25)}
|
||||
.root.svelte-1nqai3b{display:grid;grid-template-columns:[uiNav] 250px [preview] auto [properties] 300px;height:100%;width:100%;overflow-y:auto}.ui-nav.svelte-1nqai3b{grid-column-start:uiNav;background-color:var(--secondary5);height:100%}.properties-pane.svelte-1nqai3b{grid-column-start:properties;background-color:var(--secondary5);height:100%;overflow-y:hidden}.pages-list-container.svelte-1nqai3b{padding-top:2rem}.components-nav-header.svelte-1nqai3b{font-size:.9rem}.nav-group-header.svelte-1nqai3b{font-size:.9rem;padding-left:1rem}.nav-items-container.svelte-1nqai3b{padding:1rem 1rem 0rem 1rem}.nav-group-header.svelte-1nqai3b{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-1nqai3b>div.svelte-1nqai3b:nth-child(1){padding:0rem .5rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1nqai3b>span.svelte-1nqai3b:nth-child(2){margin-left:5px;vertical-align:bottom;grid-column-start:title;margin-top:auto}.nav-group-header.svelte-1nqai3b>div.svelte-1nqai3b:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-1nqai3b>div.svelte-1nqai3b:nth-child(3):hover{color:var(--primary75)}
|
||||
.root.svelte-tavaga{height:100%;display:flex}.content.svelte-tavaga{flex:1 1 auto;height:100%;background-color:var(--white);margin:0}.nav.svelte-tavaga{flex:0 1 auto;width:300px;height:100%}
|
||||
.root.svelte-1kpw258{color:var(--secondary50);font-size:.9rem;font-weight:bold}.hierarchy-item.svelte-1kpw258{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1kpw258:hover{color:var(--secondary)}.component.svelte-1kpw258{margin-left:5px}.currentfolder.svelte-1kpw258{color:var(--secondary100)}.selected.svelte-1kpw258{color:var(--primary100);font-weight:bold}.title.svelte-1kpw258{margin-left:10px}
|
||||
.root.svelte-1jxca3{padding-bottom:10px;padding-left:10px;font-size:.9rem;color:var(--secondary50);font-weight:bold}.hierarchy-item.svelte-1jxca3{cursor:pointer;padding:5px 0px}.hierarchy-item.svelte-1jxca3:hover{color:var(--secondary100)}.component.svelte-1jxca3{margin-left:5px}.selected.svelte-1jxca3{color:var(--primary100);font-weight:bold}.title.svelte-1jxca3{margin-left:10px}
|
||||
.uk-modal-dialog.svelte-91ta29{border-radius:.3rem}
|
||||
.root.svelte-arxsah{height:100%;display:flex;flex-direction:column}.padding.svelte-arxsah{padding:1rem 1rem 0rem 1rem}.info-text.svelte-arxsah{color:var(--secondary100);font-size:.8rem !important;font-weight:bold}.title.svelte-arxsah{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-arxsah>div.svelte-arxsah:nth-child(1){grid-column-start:name;color:var(--secondary100)}.title.svelte-arxsah>div.svelte-arxsah:nth-child(2){grid-column-start:actions}.section-header.svelte-arxsah{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-arxsah{flex:1 1 auto;overflow-y:auto}
|
||||
.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}
|
||||
h1.svelte-2ukyrk{font-size:1.2em}
|
||||
h4.svelte-o0id5a{margin-top:20px}
|
||||
.root.svelte-85bkcq{height:100%;position:relative}.actions-header.svelte-85bkcq{flex:0 1 auto}.node-view.svelte-85bkcq{overflow-y:auto;flex:1 1 auto}
|
||||
.root.svelte-is81a4{padding:15px}.help-text.svelte-is81a4{color:var(--slate);font-size:10pt}
|
||||
.root.svelte-1hx5jh5{height:100%;background-color:var(--secondary5)}.items-root.svelte-1hx5jh5{display:flex;flex-direction:column;max-height:100%;height:1rem}.nav-group-header.svelte-1hx5jh5{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-1hx5jh5>div.svelte-1hx5jh5:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1hx5jh5>div.svelte-1hx5jh5:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-1hx5jh5>div.svelte-1hx5jh5:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-1hx5jh5{flex:auto 1 1}.space-filler.svelte-1hx5jh5{flex:1 1 auto}
|
||||
.root.svelte-12v04h3{height:100%;position:relative;padding:1.5rem}.actions-header.svelte-12v04h3{flex:0 1 auto}.node-view.svelte-12v04h3{overflow-y:auto;flex:1 1 auto}
|
||||
.component-preview.svelte-1rf8xuh{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-1rf8xuh{grid-row-start:middle;grid-column-start:middle}
|
||||
.root.svelte-v4l1v4{height:100%;position:relative;padding:1.5rem}
|
||||
.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}
|
||||
.info-text.svelte-sphuh4{font-size:0.7rem;color:var(--secondary50)}
|
||||
.root.svelte-1hs1zh2{height:100%;padding:2rem}.settings-title.svelte-1hs1zh2{font-weight:700}.title.svelte-1hs1zh2{margin:3rem 0rem 0rem 0rem;font-weight:700}.recordkey.svelte-1hs1zh2{font-size:14px;font-weight:600;color:var(--primary100)}.fields-table.svelte-1hs1zh2{margin:1rem 1rem 0rem 0rem;border-collapse:collapse}.add-field-button.svelte-1hs1zh2{cursor:pointer}.edit-button.svelte-1hs1zh2{cursor:pointer;color:var(--secondary25)}.edit-button.svelte-1hs1zh2:hover{cursor:pointer;color:var(--secondary75)}th.svelte-1hs1zh2{text-align:left}td.svelte-1hs1zh2{padding:1rem 5rem 1rem 0rem;margin:0;font-size:14px;font-weight:500}.field-label.svelte-1hs1zh2{font-size:14px;font-weight:500}thead.svelte-1hs1zh2>tr.svelte-1hs1zh2{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--secondary75);margin-bottom:20px}tbody.svelte-1hs1zh2>tr.svelte-1hs1zh2{border-width:0px 0px 1px 0px;border-style:solid;border-color:var(--primary10)}tbody.svelte-1hs1zh2>tr.svelte-1hs1zh2:hover{background-color:var(--primary10)}tbody.svelte-1hs1zh2>tr:hover .edit-button.svelte-1hs1zh2{color:var(--secondary75)}.index-container.svelte-1hs1zh2{border-style:solid;border-width:0 0 1px 0;border-color:var(--secondary25);padding:10px;margin-bottom:5px}.index-label.svelte-1hs1zh2{color:var(--slate)}.index-name.svelte-1hs1zh2{font-weight:bold;color:var(--primary100)}.index-container.svelte-1hs1zh2 code.svelte-1hs1zh2{margin:0;display:inline;background-color:var(--primary10);color:var(--secondary100);padding:3px}.index-field-row.svelte-1hs1zh2{margin:1rem 0rem 0rem 0rem}.no-indexes.svelte-1hs1zh2{margin:1rem 0rem 0rem 0rem;font-family:var(--fontnormal);font-size:14px}
|
||||
.root.svelte-69mcqc{display:block;font-size:.9rem;width:100%;cursor:pointer;font-weight:bold}.title.svelte-69mcqc{font:var(--fontblack);padding-top:10px;padding-right:5px;padding-bottom:10px;color:var(--secondary100)}.title.svelte-69mcqc:hover{background-color:var(--secondary10)}
|
||||
.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}
|
||||
.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}
|
||||
.dropdown-background.svelte-rq5j5s{position:fixed;top:0;left:0;width:100vw;height:100vh}.root.svelte-rq5j5s{cursor:pointer;z-index:1}.dropdown-content.svelte-rq5j5s{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-rq5j5s:not(:focus){display:none}.action-row.svelte-rq5j5s{padding:7px 10px;cursor:pointer}.action-row.svelte-rq5j5s:hover{background-color:var(--primary100);color:var(--white)}
|
||||
.root.svelte-1fkfoam{height:100%;padding:15px}.allowed-records.svelte-1fkfoam{margin:20px 0px}.allowed-records.svelte-1fkfoam>span.svelte-1fkfoam{margin-right:30px}
|
||||
.root.svelte-14rrb31{display:block;font-size:.9rem;width:100%;cursor:pointer;color:var(--secondary50);font-weight:500}.title.svelte-14rrb31{padding-top:.5rem;padding-right:.5rem}.title.svelte-14rrb31:hover{background-color:var(--secondary10)}.active.svelte-14rrb31{background-color:var(--primary10)}
|
||||
.root.svelte-1bzmaa6{font-size:10pt}.padding.svelte-1bzmaa6{padding:0 10px}.inherited-title.svelte-1bzmaa6{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-1bzmaa6>div.svelte-1bzmaa6:nth-child(1){grid-column-start:name;color:var(--secondary50)}.inherited-title.svelte-1bzmaa6>div.svelte-1bzmaa6:nth-child(2){grid-column-start:actions;color:var(--secondary100)}
|
||||
.root.svelte-1qdntd{padding:1.5rem;width:100%;align-items:right}
|
||||
.edit-button.svelte-p55po4{cursor:pointer;color:var(--secondary25)}tr.svelte-p55po4:hover .edit-button.svelte-p55po4{color:var(--secondary75)}.title.svelte-p55po4{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-p55po4{font-weight:500;font-size:.9rem}
|
||||
.nav-item.svelte-1vytvi5{padding:1.5rem 1rem 0rem 1rem;font-size:.9rem;font-weight:bold;cursor:pointer;flex:0 0 auto}.nav-item.svelte-1vytvi5:hover{background-color:var(--primary10)}.active.svelte-1vytvi5{background-color:var(--primary10)}
|
||||
.edit-button.svelte-vqv7kc{cursor:pointer;color:var(--secondary25)}.title.svelte-vqv7kc{margin:3rem 0rem 0rem 0rem;font-weight:700}.table-content.svelte-vqv7kc{font-weight:500;font-size:.9rem}tr.svelte-vqv7kc:hover .edit-button.svelte-vqv7kc{color:var(--secondary75)}
|
||||
.root.svelte-97do09{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-97do09{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
|
||||
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}
|
||||
.root.svelte-15cha7q{padding:2rem;border-radius:2rem}.uk-grid-small.svelte-15cha7q{padding:1rem}.option-container.svelte-15cha7q{border-style:dotted;border-width:1px;border-color:var(--primary75);padding:3px;margin-right:5px}
|
||||
textarea.svelte-1iox4u1{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-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)}
|
||||
textarea.svelte-1wfv4cc{width:300px;height:200px}
|
||||
.unbound-container.svelte-1pzt3a0{display:flex;margin:.5rem 0rem .5rem 0rem}.unbound-container.svelte-1pzt3a0>.svelte-1pzt3a0:nth-child(1){width:auto;flex:1 0 auto;font-size:0.8rem;color:var(--secondary100);border-radius:.2rem}.bound-header.svelte-1pzt3a0{display:flex}.bound-header.svelte-1pzt3a0>div.svelte-1pzt3a0:nth-child(1){flex:1 0 auto;width:30px;color:var(--secondary50);padding-left:5px}.binding-prop-label.svelte-1pzt3a0{color:var(--secondary50)}
|
||||
main.svelte-15fmzor{height:100%;width:100%;font-family:"Roboto", Helvetica, Arial, sans-serif}.settings.svelte-15fmzor{position:absolute;bottom:25px;right:25px}
|
||||
.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}
|
||||
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}
|
||||
.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%}
|
||||
.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-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)}
|
||||
h4.svelte-sqtlby{margin-top:20px}
|
||||
.root.svelte-1q89a1w{height:100%;background-color:var(--secondary5)}.items-root.svelte-1q89a1w{display:flex;flex-direction:column;max-height:100%;height:1rem}.nav-group-header.svelte-1q89a1w{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-1q89a1w>div.svelte-1q89a1w:nth-child(1){padding:0rem .7rem 0rem 0rem;vertical-align:bottom;grid-column-start:icon;margin-right:5px}.nav-group-header.svelte-1q89a1w>div.svelte-1q89a1w:nth-child(3){vertical-align:bottom;grid-column-start:button;cursor:pointer;color:var(--primary75)}.nav-group-header.svelte-1q89a1w>div.svelte-1q89a1w:nth-child(3):hover{color:var(--primary75)}.hierarchy-title.svelte-1q89a1w{flex:auto 1 1}.space-filler.svelte-1q89a1w{flex:1 1 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-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}
|
||||
.root.svelte-nd1yft{height:100%;position:relative;padding:1.5rem}
|
||||
.uk-modal-dialog.svelte-vwwrf9{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}
|
||||
h1.svelte-16jkjx9{font-size:1.2em}
|
||||
.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}
|
||||
.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-1ersoxu{padding:15px}.help-text.svelte-1ersoxu{color:var(--slate);font-size:10pt}
|
||||
.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-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)}
|
||||
.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)}
|
||||
.root.svelte-x3bf9z{display:flex}.root.svelte-x3bf9z:last-child{border-radius:0 var(--borderradius) var(--borderradius) 0}.root.svelte-x3bf9z:first-child{border-radius:var(--borderradius) 0 0 var(--borderradius)}.root.svelte-x3bf9z:not(:first-child):not(:last-child){border-radius:0}
|
||||
.root.svelte-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}
|
||||
.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)}
|
||||
.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-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-pq2tmv{height:100%;padding:15px}.allowed-records.svelte-pq2tmv{margin:20px 0px}.allowed-records.svelte-pq2tmv>span.svelte-pq2tmv{margin-right:30px}
|
||||
.root.svelte-wgyofl{padding:1.5rem;width:100%;align-items:right}
|
||||
.component.svelte-qxar5p{padding:5px;border-style:solid;border-width:0 0 1px 0;border-color:var(--lightslate);cursor:pointer}.component.svelte-qxar5p:hover{background-color:var(--primary10)}.component.svelte-qxar5p>.title.svelte-qxar5p{font-size:13pt;color:var(--secondary100)}.component.svelte-qxar5p>.description.svelte-qxar5p{font-size:10pt;color:var(--primary75);font-style:italic}
|
||||
.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)}
|
||||
.info-text.svelte-1gx0gkl{font-size:0.7rem;color:var(--secondary50)}
|
||||
.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}
|
||||
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-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}
|
||||
.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}
|
||||
input.svelte-9fre0g{margin-right:7px}
|
||||
.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)}
|
||||
.root.svelte-1v0yya9{padding:1rem 1rem 0rem 1rem}.prop-label.svelte-1v0yya9{font-size:0.8rem;color:var(--secondary100);font-weight:bold}
|
||||
textarea.svelte-1kv2xk7{width:300px;height:200px}
|
||||
.addelement-container.svelte-r1ft9p{cursor:pointer;padding:3px 0px;text-align:center}.addelement-container.svelte-r1ft9p:hover{background-color:var(--primary25);margin-top:5px}.control-container.svelte-r1ft9p{padding-left:3px;background:var(--secondary10)}.separator.svelte-r1ft9p{width:60%;margin:10px auto;border-style:solid;border-width:1px 0 0 0;border-color:var(--primary25)}
|
||||
.addelement-container.svelte-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)}
|
||||
.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)}
|
||||
.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)}
|
||||
.type-selector-container.svelte-1b6pj9u{display:flex}.type-selector.svelte-1b6pj9u{border-color:var(--primary50);border-radius:2px;width:50px;flex:1 0 auto}
|
||||
|
||||
/*# 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
File diff suppressed because one or more lines are too long
|
|
@ -183,5 +183,27 @@
|
|||
|
||||
},
|
||||
"tags": ["nav", "navigation", "sidebar"]
|
||||
},
|
||||
"table": {
|
||||
"importPath": "Table",
|
||||
"name": "Table",
|
||||
"desciption": "An HTML table",
|
||||
"props" : {
|
||||
"data": "state",
|
||||
"columns": {
|
||||
"type": "array",
|
||||
"elementDefinition" : {
|
||||
"title": "string",
|
||||
"value": "string"
|
||||
}
|
||||
},
|
||||
"onRowClick":"event",
|
||||
"tableClass": {"type":"string", "default":"table-default"},
|
||||
"theadClass": {"type":"string", "default":"thead-default"},
|
||||
"tbodyClass": {"type":"string", "default":"tbody-default"},
|
||||
"trClass": {"type":"string", "default":"tr-default"},
|
||||
"thClass": {"type":"string", "default":"th-default"}
|
||||
},
|
||||
"tags": ["table"]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
#current_component.svelte-1xqz9vm{height:100%;width:100%}
|
||||
.root.svelte-1oto99m{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-1oto99m{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-1oto99m{margin-bottom:20px
|
||||
}.logo-container.svelte-1oto99m>img.svelte-1oto99m{max-width:100%}.login-button-container.svelte-1oto99m{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-1oto99m{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-1oto99m{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-1oto99m{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-1oto99m{grid-column-start:control;padding:5px 10px}
|
||||
.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}
|
||||
.root.svelte-10kw8to{display:grid}
|
||||
.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}
|
||||
.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%}
|
||||
.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}
|
||||
.default.svelte-1q8lga0{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-1q8lga0:active{background-color:#ddd}.default.svelte-1q8lga0:focus{border-color:#666}
|
||||
|
||||
/*# sourceMappingURL=bundle.css.map */
|
||||
|
|
@ -4,21 +4,23 @@
|
|||
"sources": [
|
||||
"..\\src\\Test\\TestApp.svelte",
|
||||
"..\\src\\Login.svelte",
|
||||
"..\\src\\Textbox.svelte",
|
||||
"..\\src\\Grid.svelte",
|
||||
"..\\src\\Nav.svelte",
|
||||
"..\\src\\Textbox.svelte",
|
||||
"..\\src\\Form.svelte",
|
||||
"..\\src\\Table.svelte",
|
||||
"..\\src\\Button.svelte"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _app;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _app = a);\n\nconst testProps = props.nav;\n\nlet currentComponent;\n\n$: {\n if(_app && currentComponent) {\n _app.initialiseComponent(testProps, currentComponent);\n }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _app}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n height: 100%;\n width: 100%;\n}\n</style>\n\n",
|
||||
"<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nexport let _app;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n busy = true;\n authenticate(username, password)\n .then(r => {\n busy = false;\n if(r.status === 200) {\n return r.json();\n } else {\n incorrect = true;\n return;\n }\n })\n .then(user => {\n if(user) {\n localStorage.setItem(\"budibase:user\", user);\n location.reload();\n }\n })\n}\n\n</script>\n\n<div class=\"root\">\n\n <div class=\"content\">\n\n {#if logo}\n <div class=\"logo-container\">\n <img src={logo} alt=\"logo\"/>\n </div>\n {/if}\n\n <div class=\"form-root\">\n <div class=\"label\">\n {usernameLabel}\n </div>\n <div class=\"control\">\n <Textbox bind:value={username} />\n </div>\n <div class=\"label\">\n {passwordLabel}\n </div>\n <div class=\"control\">\n <Textbox bind:value={password} hideValue=true />\n </div>\n </div>\n\n <div class=\"login-button-container\">\n <Button disabled={busy} \n on:click={login}\n class={buttonClass}>\n {loginButtonLabel}\n </Button>\n </div>\n\n {#if incorrect}\n <div class=\"incorrect-details-panel\">\n Incorrect username or password\n </div>\n {/if}\n\n </div>\n\n</div>\n\n<style>\n\n.root {\n height: 100%;\n display:grid;\n grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n grid-column-start: middle;\n grid-row-start: center;\n width: 400px;\n}\n\n.logo-container {\n margin-bottom: 20px\n}\n\n.logo-container > img {\n max-width: 100%;\n}\n\n.login-button-container {\n text-align: right;\n margin-top: 20px;\n}\n\n.incorrect-details-panel {\n margin-top: 30px;\n padding: 10px;\n border-style: solid;\n border-width: 1px;\n border-color: maroon;\n border-radius: 1px;\n text-align: center;\n color: maroon;\n background-color: mistyrose;\n}\n\n.form-root {\n display: grid;\n grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n grid-column-start: label;\n padding: 5px 10px;\n vertical-align: middle;\n}\n.control {\n grid-column-start: control;\n padding: 5px 10px;\n}\n\n</style>",
|
||||
"<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _app;\n\nlet actualValue = \"\";\n$: {\n\tif(_app && value._isstate) {\n\t\t_app.store.subscribe(s => {\n\t\t\tactualValue = _app.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_app && value._isstate) {\n\t\t_app.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t type=\"password\" \n\t value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n border-radius: 2px;\n width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
|
||||
"<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _app;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n if(_app && htmlElements) {\r\n for(let el in htmlElements) {\r\n _app.initialiseComponent(\r\n children[el].control,\r\n htmlElements[el]\r\n );\r\n }\r\n }\r\n}\r\n\r\nconst childStyle = child => \r\n buildStyle({\r\n \"grid-column-start\": child.gridColumnStart,\r\n \"grid-column-end\": child.gridColumnEnd,\r\n \"grid-column\": child.gridColumn,\r\n \"grid-row-start\": child.gridRowStart,\r\n \"grid-row-end\": child.gridRowStart,\r\n \"grid-row\": child.gridRow,\r\n });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n {#each children as child, index}\r\n <div class=\"{itemContainerClass}\"\r\n style={childStyle(child)}\r\n bind:this={htmlElements[index]}>\r\n </div>\r\n {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n display: grid;\r\n}\r\n\r\n</style>",
|
||||
"<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = []\r\n\r\nexport let _app;\r\n\r\nlet selectedIndex;\r\nlet contentElement;\r\n\r\n$: styleVars = {\r\n navBarBackground, navBarBorder,\r\n navBarColor, selectedItemBackground,\r\n selectedItemColor, selectedItemBorder,\r\n itemHoverBackground, itemHoverColor\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n selectedIndex = index;\r\n _app.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n <div class=\"navbar\">\r\n {#each items as navItem, index}\r\n <div class=\"navitem\"\r\n on:click={onSelectItem(index)}\r\n class:selected={selectedIndex === index}>\r\n {navItem.title}\r\n </div>\r\n {/each}\r\n </div>\r\n <div class=\"content\"\r\n bind:this={contentElement}>\r\n </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n height: 100%;\r\n width:100%;\r\n grid-template-columns: [navbar] auto [content] 1fr;\r\n display: grid;\r\n}\r\n\r\n.navbar {\r\n grid-column: navbar;\r\n background: var(--navBarBackground);\r\n border: var(--navBarBorder);\r\n color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n padding: 10px 17px;\r\n cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n background: var(--itemHoverBackground);\r\n color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n background: var(--selectedItemBackground);\r\n border: var(--selectedItemBorder);\r\n color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
|
||||
"<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _app;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n let cIndex = 0;\n for(let c of formControls) {\n labels[cIndex] = c.label;\n cIndex++;\n }\n\n if(_app && htmlElements) {\n for(let el in htmlElements) {\n _app.initialiseComponent(\n formControls[el].control,\n htmlElements[el]\n );\n }\n }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n {#each formControls as child, index}\n <div class=\"label\">{labels[index]}</div>\n <div class=\"control\"\n bind:this={htmlElements[index]}>\n </div>\n {/each}\n</div>\n\n<style>\n.form-root {\n display: grid;\n grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n grid-column-start: label;\n padding: 5px 10px;\n vertical-align: middle;\n}\n.control {\n grid-column-start: control;\n padding: 5px 10px;\n}\n.overflow {\n grid-column-start: overflow;\n}\n.full-width {\n width: 100%;\n}\n</style>",
|
||||
"<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _app;\nlet contentComponentContainer;\n\n$:{\n\tif(_app && contentComponentContainer && contentComponent._component)\n\t\t_app.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n\nconst clickHandler = () => {\n\tif(onClick) onClick();\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={clickHandler}>\n {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n {:else if contentText}\n {contentText}\n {:else}\n <slot />\n {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>"
|
||||
"<script>\nimport createApp from \"./createApp\";\nimport { props } from \"./props\";\n\nlet _bb;\n\nconst _appPromise = createApp();\n_appPromise.then(a => _bb = a);\n\nconst testProps = props.table;\n\nlet currentComponent;\n\n$: {\n if(_bb && currentComponent) {\n _bb.initialiseComponent(testProps, currentComponent);\n }\n}\n\n\n\n</script>\n\n{#await _appPromise}\nloading\n{:then _bb}\n\n<div id=\"current_component\" bind:this={currentComponent}>\n</div>\n\n{/await}\n\n\n<style>\n#current_component {\n height: 100%;\n width: 100%;\n}\n</style>\n\n",
|
||||
"<script>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\nimport { authenticate } from \"./api\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\n\nconst login = () => {\n busy = true;\n authenticate(username, password)\n .then(r => {\n busy = false;\n if(r.status === 200) {\n return r.json();\n } else {\n incorrect = true;\n return;\n }\n })\n .then(user => {\n if(user) {\n localStorage.setItem(\"budibase:user\", user);\n location.reload();\n }\n })\n}\n\n</script>\n\n<div class=\"root\">\n\n <div class=\"content\">\n\n {#if logo}\n <div class=\"logo-container\">\n <img src={logo} alt=\"logo\"/>\n </div>\n {/if}\n\n <div class=\"form-root\">\n <div class=\"label\">\n {usernameLabel}\n </div>\n <div class=\"control\">\n <Textbox bind:value={username} />\n </div>\n <div class=\"label\">\n {passwordLabel}\n </div>\n <div class=\"control\">\n <Textbox bind:value={password} hideValue=true />\n </div>\n </div>\n\n <div class=\"login-button-container\">\n <Button disabled={busy} \n on:click={login}\n class={buttonClass}>\n {loginButtonLabel}\n </Button>\n </div>\n\n {#if incorrect}\n <div class=\"incorrect-details-panel\">\n Incorrect username or password\n </div>\n {/if}\n\n </div>\n\n</div>\n\n<style>\n\n.root {\n height: 100%;\n display:grid;\n grid-template-columns: [left] 1fr [middle] auto [right] 1fr;\n grid-template-rows: [top] 1fr [center] auto [bottom] 1fr;\n}\n\n.content {\n grid-column-start: middle;\n grid-row-start: center;\n width: 400px;\n}\n\n.logo-container {\n margin-bottom: 20px\n}\n\n.logo-container > img {\n max-width: 100%;\n}\n\n.login-button-container {\n text-align: right;\n margin-top: 20px;\n}\n\n.incorrect-details-panel {\n margin-top: 30px;\n padding: 10px;\n border-style: solid;\n border-width: 1px;\n border-color: maroon;\n border-radius: 1px;\n text-align: center;\n color: maroon;\n background-color: mistyrose;\n}\n\n.form-root {\n display: grid;\n grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n grid-column-start: label;\n padding: 5px 10px;\n vertical-align: middle;\n}\n.control {\n grid-column-start: control;\n padding: 5px 10px;\n}\n\n</style>",
|
||||
"<script>\r\nimport { onMount } from 'svelte'\r\nimport {buildStyle} from \"./buildStyle\";\r\n\r\nexport let gridTemplateRows =\"\";\r\nexport let gridTemplateColumns =\"\";\r\nexport let children = [];\r\nexport let width = \"auto\";\r\nexport let height = \"auto\";\r\nexport let containerClass=\"\";\r\nexport let itemContainerClass=\"\";\r\n\r\n/*\"gridColumnStart\":\"string\",\r\n\"gridColumnEnd\":\"string\",\r\n\"gridRowStart\":\"string\",\r\n\"gridRowEnd\":\"string\"*/\r\n\r\n\r\nexport let _bb;\r\n\r\nlet style=\"\";\r\nlet htmlElements = {};\r\n\r\n$ : {\r\n if(_bb && htmlElements) {\r\n for(let el in htmlElements) {\r\n _bb.initialiseComponent(\r\n children[el].control,\r\n htmlElements[el]\r\n );\r\n }\r\n }\r\n}\r\n\r\nconst childStyle = child => \r\n buildStyle({\r\n \"grid-column-start\": child.gridColumnStart,\r\n \"grid-column-end\": child.gridColumnEnd,\r\n \"grid-column\": child.gridColumn,\r\n \"grid-row-start\": child.gridRowStart,\r\n \"grid-row-end\": child.gridRowStart,\r\n \"grid-row\": child.gridRow,\r\n });\r\n\r\n</script>\r\n\r\n<div class=\"root {containerClass}\"\r\n style=\"width: {width}; height: {height}; grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};\">\r\n {#each children as child, index}\r\n <div class=\"{itemContainerClass}\"\r\n style={childStyle(child)}\r\n bind:this={htmlElements[index]}>\r\n </div>\r\n {/each}\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n display: grid;\r\n}\r\n\r\n</style>",
|
||||
"<script>\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let navBarBackground = \"\";\r\nexport let navBarBorder=\"\";\r\nexport let navBarColor=\"\";\r\nexport let selectedItemBackground=\"\";\r\nexport let selectedItemColor=\"\";\r\nexport let selectedItemBorder=\"\";\r\nexport let itemHoverBackground=\"\";\r\nexport let itemHoverColor=\"\";\r\nexport let items = []\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex;\r\nlet contentElement;\r\n\r\n$: styleVars = {\r\n navBarBackground, navBarBorder,\r\n navBarColor, selectedItemBackground,\r\n selectedItemColor, selectedItemBorder,\r\n itemHoverBackground, itemHoverColor\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n selectedIndex = index;\r\n _bb.initialiseComponent(items[index].component, contentElement);\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n <div class=\"navbar\">\r\n {#each items as navItem, index}\r\n <div class=\"navitem\"\r\n on:click={onSelectItem(index)}\r\n class:selected={selectedIndex === index}>\r\n {navItem.title}\r\n </div>\r\n {/each}\r\n </div>\r\n <div class=\"content\"\r\n bind:this={contentElement}>\r\n </div>\r\n</div>\r\n\r\n<style>\r\n\r\n.root {\r\n height: 100%;\r\n width:100%;\r\n grid-template-columns: [navbar] auto [content] 1fr;\r\n display: grid;\r\n}\r\n\r\n.navbar {\r\n grid-column: navbar;\r\n background: var(--navBarBackground);\r\n border: var(--navBarBorder);\r\n color: var(--navBarColor);\r\n}\r\n\r\n.navitem {\r\n padding: 10px 17px;\r\n cursor: pointer;\r\n}\r\n\r\n.navitem:hover {\r\n background: var(--itemHoverBackground);\r\n color: var(--itemHoverColor);\r\n}\r\n\r\n.navitem.selected {\r\n background: var(--selectedItemBackground);\r\n border: var(--selectedItemBorder);\r\n color: var(--selectedItemColor);\r\n}\r\n\r\n.content {\r\n grid-column: content;\r\n}\r\n\r\n</style>\r\n\r\n",
|
||||
"<script>\n\nexport let value=\"\";\nexport let hideValue = false;\nexport let className = \"default\";\n\nexport let _bb;\n\nlet actualValue = \"\";\n$: {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.subscribe(s => {\n\t\t\tactualValue = _bb.store.getValue(s, value);\n\t\t});\n\t}\n}\n\nconst onchange = (ev) => {\n\tif(_bb && value._isstate) {\n\t\t_bb.store.setValue(value, ev.target.value);\n\t} else if(!value._isstate) {\n\t\tactualValue = ev.target.value;\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t type=\"password\" \n\t value={actualValue} on:change/>\n{:else}\n<input class={className} type=\"text\" value={actualValue}/>\n{/if}\n\n<style>\n.default {\n width: 100%;\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n border-radius: 2px;\n width: 100%;\n}\n\n.default:disabled {\n\tcolor: #ccc;\n}\n\n</style>",
|
||||
"<script>\nexport let containerClass = \"\";\nexport let formControls = [];\n\nexport let _bb;\n\nlet htmlElements = {};\nlet labels = {};\n\n$ : {\n let cIndex = 0;\n for(let c of formControls) {\n labels[cIndex] = c.label;\n cIndex++;\n }\n\n if(_bb && htmlElements) {\n for(let el in htmlElements) {\n _bb.initialiseComponent(\n formControls[el].control,\n htmlElements[el]\n );\n }\n }\n}\n\n</script>\n\n<div class=\"form-root {containerClass}\">\n {#each formControls as child, index}\n <div class=\"label\">{labels[index]}</div>\n <div class=\"control\"\n bind:this={htmlElements[index]}>\n </div>\n {/each}\n</div>\n\n<style>\n.form-root {\n display: grid;\n grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/\n}\n\n.label {\n grid-column-start: label;\n padding: 5px 10px;\n vertical-align: middle;\n}\n.control {\n grid-column-start: control;\n padding: 5px 10px;\n}\n.overflow {\n grid-column-start: overflow;\n}\n.full-width {\n width: 100%;\n}\n</style>",
|
||||
"<script>\r\n\r\nexport let columns=[];\r\nexport let data=\"\";\r\nexport let tableClass=\"\";\r\nexport let theadClass=\"\";\r\nexport let tbodyClass=\"\";\r\nexport let trClass=\"\";\r\nexport let thClass=\"\";\r\nexport let onRowClick;\r\n\r\nexport let _bb;\r\n\r\nconst rowClickHandler = (row) => () => {\r\n onRowClick(row);\r\n}\r\n\r\n</script>\r\n\r\n <table class={tableClass}>\r\n <thead class={theadClass}>\r\n <tr class={trClass}>\r\n {#each columns as col}\r\n <th class={thClass}>{col.title}</th>\r\n {/each}\r\n </tr>\r\n </thead>\r\n <tbody class={tbodyClass}>\r\n {#each data as row}\r\n <tr class={trClass}\r\n on:click={rowClickHandler(row)} >\r\n {#each columns as col}\r\n <th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>\r\n {/each}\r\n </tr>\r\n {/each}\r\n </tbody>\r\n</table> \r\n\r\n<style>\r\n\r\n.table-default {\r\n width: 100%;\r\n margin-bottom: 1rem;\r\n color: #212529;\r\n border-collapse: collapse;\r\n}\r\n\r\n.table-default .thead-default .th-default {\r\n vertical-align: bottom;\r\n border-bottom: 2px solid #dee2e6;\r\n font-weight: bold;\r\n}\r\n\r\n.table-default .th-default {\r\n padding: .75rem;\r\n vertical-align: top;\r\n border-top: 1px solid #dee2e6;\r\n font-weight: normal;\r\n}\r\n\r\n.th-default {\r\n text-align: inherit;\r\n}\r\n\r\n.table-default .tbody-default .tr-default:hover {\r\n color: #212529;\r\n background-color: rgba(0,0,0,.075);\r\n cursor: pointer;\r\n}\r\n\r\n</style>",
|
||||
"<script>\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick = () => {};\n\nexport let _bb;\nlet contentComponentContainer;\n\n$:{\n\tif(_bb && contentComponentContainer && contentComponent._component)\n\t\t_bb.initialiseComponent(contentComponent, contentComponentContainer);\n}\n\n\nconst clickHandler = () => {\n\tif(onClick) onClick();\n}\n\n</script>\n\n\n<button class={className} {disabled} on:click={clickHandler}>\n {#if contentComponent && contentComponent._component}\n\t<div bind:this={contentComponentContainer}>\n\t</div>\n {:else if contentText}\n {contentText}\n {:else}\n <slot />\n {/if}\n</button>\n\n\n<style>\n\n.default {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\n.default:active {\n\tbackground-color: #ddd;\n}\n\n.default:focus {\n\tborder-color: #666;\n}\n\n</style>"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "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"
|
||||
"mappings": "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"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -2,7 +2,7 @@
|
|||
export let containerClass = "";
|
||||
export let formControls = [];
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let htmlElements = {};
|
||||
let labels = {};
|
||||
|
|
@ -14,9 +14,9 @@ $ : {
|
|||
cIndex++;
|
||||
}
|
||||
|
||||
if(_app && htmlElements) {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_app.initialiseComponent(
|
||||
_bb.initialiseComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@ export let itemContainerClass="";
|
|||
"gridRowEnd":"string"*/
|
||||
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let style="";
|
||||
let htmlElements = {};
|
||||
|
||||
$ : {
|
||||
if(_app && htmlElements) {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_app.initialiseComponent(
|
||||
_bb.initialiseComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export let loginRedirect = "";
|
|||
export let logo = "";
|
||||
export let buttonClass = "";
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let username = "";
|
||||
let password = "";
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export let itemHoverBackground="";
|
|||
export let itemHoverColor="";
|
||||
export let items = []
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let selectedIndex;
|
||||
let contentElement;
|
||||
|
|
@ -25,7 +25,7 @@ $: styleVars = {
|
|||
|
||||
const onSelectItem = (index) => () => {
|
||||
selectedIndex = index;
|
||||
_app.initialiseComponent(items[index].component, contentElement);
|
||||
_bb.initialiseComponent(items[index].component, contentElement);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export let textAlign="";
|
|||
export let color="";
|
||||
export let padding="";
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let style="";
|
||||
let componentElement;
|
||||
|
|
@ -26,8 +26,8 @@ $: {
|
|||
"border-radius":borderRadius
|
||||
});
|
||||
|
||||
if(_app && component) {
|
||||
_app.initialiseComponent(component, componentElement);
|
||||
if(_bb && component) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@ export let containerClass="";
|
|||
export let itemContainerClass="";
|
||||
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let htmlElements = {};
|
||||
|
||||
onMount(() => {
|
||||
if(_app && htmlElements) {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_app.initialiseComponent(
|
||||
_bb.initialiseComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
<script>
|
||||
|
||||
export let columns=[];
|
||||
export let data="";
|
||||
export let tableClass="";
|
||||
export let theadClass="";
|
||||
export let tbodyClass="";
|
||||
export let trClass="";
|
||||
export let thClass="";
|
||||
export let onRowClick;
|
||||
|
||||
export let _bb;
|
||||
|
||||
const rowClickHandler = (row) => () => {
|
||||
onRowClick(row);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<table class={tableClass}>
|
||||
<thead class={theadClass}>
|
||||
<tr class={trClass}>
|
||||
{#each columns as col}
|
||||
<th class={thClass}>{col.title}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class={tbodyClass}>
|
||||
{#each data as row}
|
||||
<tr class={trClass}
|
||||
on:click={rowClickHandler(row)} >
|
||||
{#each columns as col}
|
||||
<th class={thClass}>{_bb.getStateOrValue(col.value, row)}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
|
||||
.table-default {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
color: #212529;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-default .thead-default .th-default {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table-default .th-default {
|
||||
padding: .75rem;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dee2e6;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.th-default {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.table-default .tbody-default .tr-default:hover {
|
||||
color: #212529;
|
||||
background-color: rgba(0,0,0,.075);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -2,18 +2,18 @@
|
|||
import createApp from "./createApp";
|
||||
import { props } from "./props";
|
||||
|
||||
let _app;
|
||||
let _bb;
|
||||
|
||||
const _appPromise = createApp();
|
||||
_appPromise.then(a => _app = a);
|
||||
_appPromise.then(a => _bb = a);
|
||||
|
||||
const testProps = props.nav;
|
||||
const testProps = props.table;
|
||||
|
||||
let currentComponent;
|
||||
|
||||
$: {
|
||||
if(_app && currentComponent) {
|
||||
_app.initialiseComponent(testProps, currentComponent);
|
||||
if(_bb && currentComponent) {
|
||||
_bb.initialiseComponent(testProps, currentComponent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ $: {
|
|||
|
||||
{#await _appPromise}
|
||||
loading
|
||||
{:then _app}
|
||||
{:then _bb}
|
||||
|
||||
<div id="current_component" bind:this={currentComponent}>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import Textbox from "../Textbox.svelte";
|
|||
import Text from "../Text.svelte";
|
||||
import Nav from "../Nav.svelte";
|
||||
import Panel from "../Panel.svelte";
|
||||
import Table from "../Table.svelte";
|
||||
import { createApp } from "@budibase/client/src/createApp";
|
||||
|
||||
export default async () => {
|
||||
|
|
@ -18,13 +19,24 @@ export default async () => {
|
|||
textbox : Textbox,
|
||||
text: Text,
|
||||
nav: Nav,
|
||||
panel: Panel
|
||||
panel: Panel,
|
||||
table: Table
|
||||
}
|
||||
}
|
||||
|
||||
const appDef = {hierarchy:{}, actions:{}};
|
||||
const user = {name:"yeo", permissions:[]};
|
||||
|
||||
return createApp(componentLibraries, appDef, user);
|
||||
var app = createApp(componentLibraries, appDef, user);
|
||||
app.store.update(s => {
|
||||
s.people = [
|
||||
{name:"bob", address: "123 Main Street", status: "Open"},
|
||||
{name:"poppy", address: "456 Side Road", status: "Closed"},
|
||||
{name:"Oscar", address: "678 Dodgy Alley", status: "Open"},
|
||||
];
|
||||
return s;
|
||||
})
|
||||
|
||||
return app;
|
||||
|
||||
}
|
||||
|
|
@ -56,6 +56,59 @@ export const props = {
|
|||
]
|
||||
},
|
||||
|
||||
table: {
|
||||
_component:"components/table",
|
||||
columns: [
|
||||
{
|
||||
title: {
|
||||
"##bbstate":"NameColumnName",
|
||||
"##bbsource":"store",
|
||||
"##bbstatefallback": "Name"
|
||||
},
|
||||
value: {
|
||||
"##bbstate":"name",
|
||||
"##bbsource":"context"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
value: {
|
||||
"##bbstate":"address",
|
||||
"##bbsource":"context"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
value: {
|
||||
"##bbstate":"status",
|
||||
"##bbsource":"context"
|
||||
}
|
||||
}
|
||||
],
|
||||
data: {
|
||||
"##bbstate":"people"
|
||||
},
|
||||
onRowClick: [
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "NameColumnName",
|
||||
value: {
|
||||
"##bbstate":"name",
|
||||
"##bbsource":"context",
|
||||
"##bbstatefallback": "balls to that"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
tableClass: "table-default",
|
||||
theadClass: "thead-default",
|
||||
tbodyClass: "tbody-default",
|
||||
trClass: "tr-default",
|
||||
thClass: "th-default"
|
||||
|
||||
},
|
||||
|
||||
grid: {
|
||||
_component: "components/grid",
|
||||
gridTemplateColumns: "[left] auto [center] auto [right] auto",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export let verticalAlign=""
|
|||
export let color="";
|
||||
export let display="";
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let style="";
|
||||
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@ export let value="";
|
|||
export let hideValue = false;
|
||||
export let className = "default";
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
|
||||
let actualValue = "";
|
||||
$: {
|
||||
if(_app && value._isstate) {
|
||||
_app.store.subscribe(s => {
|
||||
actualValue = _app.store.getValue(s, value);
|
||||
if(_bb && value._isstate) {
|
||||
_bb.store.subscribe(s => {
|
||||
actualValue = _bb.store.getValue(s, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const onchange = (ev) => {
|
||||
if(_app && value._isstate) {
|
||||
_app.store.setValue(value, ev.target.value);
|
||||
if(_bb && value._isstate) {
|
||||
_bb.store.setValue(value, ev.target.value);
|
||||
} else if(!value._isstate) {
|
||||
actualValue = ev.target.value;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ export let contentText;
|
|||
export let contentComponent;
|
||||
export let onClick = () => {};
|
||||
|
||||
export let _app;
|
||||
export let _bb;
|
||||
let contentComponentContainer;
|
||||
|
||||
$:{
|
||||
if(_app && contentComponentContainer && contentComponent._component)
|
||||
_app.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue