bootstra components - backup before comonen control flow
This commit is contained in:
Michael Shanks
parent
f787633fc7
commit
6f83fd19a3
|
|
@ -27,41 +27,6 @@
|
|||
"description": "Generate a table based on an index"
|
||||
}
|
||||
},
|
||||
"button" : {
|
||||
"importPath": "button",
|
||||
"name": "Button",
|
||||
"description": "an html <button />",
|
||||
"props": {
|
||||
"contentText": { "type": "string", "default": "Button" },
|
||||
"contentComponent": "component",
|
||||
"className": {"type": "string", "default": "default"},
|
||||
"disabled": "bool",
|
||||
"onClick": "event",
|
||||
"background": "string",
|
||||
"color": "string",
|
||||
"border": "string",
|
||||
"padding": "string",
|
||||
"hoverColor": "string",
|
||||
"hoverBackground": "string",
|
||||
"hoverBorder": "string"
|
||||
},
|
||||
"tags": ["button"]
|
||||
},
|
||||
"login" : {
|
||||
"importPath": "Login",
|
||||
"name": "Login Control",
|
||||
"description": "A control that accepts username, password an also handles password resets",
|
||||
"props" : {
|
||||
"logo": "asset",
|
||||
"loginRedirect": "string",
|
||||
"usernameLabel": {"type":"string", "default": "Username"},
|
||||
"passwordLabel": {"type":"string", "default": "Password"},
|
||||
"loginButtonLabel": {"type":"string", "default": "Login"},
|
||||
"buttonClass": "string",
|
||||
"inputClass": "string"
|
||||
},
|
||||
"tags": ["login", "credentials", "password", "logon"]
|
||||
},
|
||||
"form" : {
|
||||
"importPath": "Form",
|
||||
"name": "Form",
|
||||
|
|
@ -72,137 +37,16 @@
|
|||
"type":"array",
|
||||
"elementDefinition": {
|
||||
"label": "string",
|
||||
"control":"component"
|
||||
}
|
||||
}
|
||||
},
|
||||
"tags": ["form"]
|
||||
},
|
||||
"textbox" : {
|
||||
"importPath": "Textbox",
|
||||
"name": "Textbox",
|
||||
"description": "An input type=text or password",
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"hideValue": "bool",
|
||||
"className": {"type": "string", "default": "default"}
|
||||
},
|
||||
"tags": ["form"]
|
||||
},
|
||||
"stackpanel": {
|
||||
"importPath": "StackPanel",
|
||||
"name": "StackPanel",
|
||||
"description": "Layout elements in a stack, either horizontally or vertically",
|
||||
"props" : {
|
||||
"direction": {
|
||||
"type": "options",
|
||||
"options": ["horizontal", "vertical"],
|
||||
"default":"horizontal"
|
||||
},
|
||||
"children": {
|
||||
"type":"array",
|
||||
"elementDefinition": {
|
||||
"control":"component"
|
||||
}
|
||||
},
|
||||
"width": {"type":"string","default":"auto"},
|
||||
"height": {"type":"string","default":"auto"},
|
||||
"containerClass":"string",
|
||||
"itemContainerClass":"string",
|
||||
"data": "state",
|
||||
"dataItemComponent": "component",
|
||||
"onLoad": "event"
|
||||
},
|
||||
"tags": ["div", "container", "layout", "panel"]
|
||||
},
|
||||
"grid": {
|
||||
"importPath": "Grid",
|
||||
"name": "Grid",
|
||||
"description": "CSS Grid layout ",
|
||||
"props" : {
|
||||
"gridTemplateRows": "string",
|
||||
"gridTemplateColumns": "string",
|
||||
"children": {
|
||||
"type":"array",
|
||||
"elementDefinition": {
|
||||
"control":"component",
|
||||
"gridColumn":"string",
|
||||
"gridRow":"string",
|
||||
"gridColumnStart":"string",
|
||||
"gridColumnEnd":"string",
|
||||
"gridRowStart":"string",
|
||||
"gridRowEnd":"string"
|
||||
"controlPosition": {
|
||||
"type":"options",
|
||||
"options": ["Before Label","After Label"],
|
||||
"default": "After Label"
|
||||
}
|
||||
}
|
||||
},
|
||||
"width": {"type":"string","default":"auto"},
|
||||
"height": {"type":"string","default":"auto"},
|
||||
"containerClass":"string",
|
||||
"itemContainerClass":"string"
|
||||
},
|
||||
"tags": ["div", "container", "layout", "panel", "grid"]
|
||||
},
|
||||
"text": {
|
||||
"importPath": "Text",
|
||||
"name": "Text",
|
||||
"description": "stylable block of text",
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"containerClass": "string",
|
||||
"font": "string",
|
||||
"color": "string",
|
||||
"textAlign": {
|
||||
"type": "options",
|
||||
"default":"inline",
|
||||
"options": [
|
||||
"left", "center", "right"
|
||||
]
|
||||
},
|
||||
"verticalAlign": {
|
||||
"type": "options",
|
||||
"default":"inline",
|
||||
"options": [
|
||||
"top", "middle", "bottom"
|
||||
]
|
||||
},
|
||||
"display": {
|
||||
"type": "options",
|
||||
"default":"inline",
|
||||
"options": [
|
||||
"inline", "block", "inline-block"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tags": ["div", "container"]
|
||||
},
|
||||
"panel": {
|
||||
"importPath": "Panel",
|
||||
"name": "Panel",
|
||||
"description": "A stylable div with a component inside",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"component": "component",
|
||||
"containerClass": "string",
|
||||
"background": "string",
|
||||
"border": "string",
|
||||
"borderRadius":"string",
|
||||
"font": "string",
|
||||
"color": "string",
|
||||
"padding": "string",
|
||||
"margin": "string",
|
||||
"hoverColor": "string",
|
||||
"hoverBackground": "string",
|
||||
"height":"string",
|
||||
"width":"string",
|
||||
"onClick": "event",
|
||||
"display": {
|
||||
"type": "options",
|
||||
"default":"inline",
|
||||
"options": [
|
||||
"inline", "block", "inline-block"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tags": ["div", "container"]
|
||||
"tags": ["form"]
|
||||
},
|
||||
"nav": {
|
||||
"importPath": "Nav",
|
||||
|
|
@ -229,27 +73,5 @@
|
|||
|
||||
},
|
||||
"tags": ["nav", "navigation", "sidebar"]
|
||||
},
|
||||
"table": {
|
||||
"importPath": "Table",
|
||||
"name": "Table",
|
||||
"description": "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"]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
export let containerClass = "";
|
||||
export let formControls = [];
|
||||
|
||||
export let _bb;
|
||||
|
||||
let htmlElements = {};
|
||||
let labelElements = {};
|
||||
let labels = {};
|
||||
let isInitialised = false;
|
||||
|
||||
$ : {
|
||||
|
||||
if(_bb && htmlElements && !isInitialised) {
|
||||
|
||||
let cIndex = 0;
|
||||
for(let c of formControls) {
|
||||
labels[cIndex] = c.label;
|
||||
cIndex++;
|
||||
}
|
||||
|
||||
for(let el in htmlElements) {
|
||||
if(formControls[el].control.controlPosition === "Before Label") {
|
||||
_bb.insertComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el],
|
||||
labelElements[el]);
|
||||
} else {
|
||||
_bb.appendComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]);
|
||||
}
|
||||
}
|
||||
isInitialised = true;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form>
|
||||
{#each formControls as child, index}
|
||||
<div class="form-group" bind:this={htmlElements[index]}>
|
||||
<label bind:this={labelElements[index]}>{labels[index]}</label>
|
||||
</div>
|
||||
{/each}
|
||||
</form>
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ $: {
|
|||
const onSelectItem = (index) => () => {
|
||||
selectedIndex = index;
|
||||
if(!components[index]) {
|
||||
const comp = _bb.initialiseComponent(
|
||||
const comp = _bb.hydrateComponent(
|
||||
items[index].component, componentElements[index]);
|
||||
components[index] = comp;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ let currentComponent;
|
|||
|
||||
$: {
|
||||
if(_bb && currentComponent) {
|
||||
_bb.initialiseComponent(testProps, currentComponent);
|
||||
_bb.hydrateComponent(testProps, currentComponent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ export const buttons = () => [
|
|||
}
|
||||
},
|
||||
{
|
||||
name: "common/Secondary Button",
|
||||
description: "Bootstrap primary button",
|
||||
name: "common/Default Button",
|
||||
description: "Bootstrap default button",
|
||||
inherits: "@budibase/standard-components/button",
|
||||
props: {
|
||||
className: "btn btn-primary"
|
||||
className: "btn"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import {headers} from "./headersGenerator";
|
||||
|
||||
export const forms = ({records, indexes}) =>
|
||||
[...headers({records, indexes}),
|
||||
...records.map(root)];
|
||||
|
||||
const root = record => ({
|
||||
name: `${record.name} Form`,
|
||||
description: `Control for creating/updating '${record.nodeKey()}' `,
|
||||
inherits: "@budibase/standard-components/div",
|
||||
props: {
|
||||
direction: "vertical",
|
||||
children: [
|
||||
{
|
||||
control: {
|
||||
_component: "@budibase/standard-components/H3",
|
||||
text: `Edit ${record.name}`,
|
||||
}
|
||||
},
|
||||
form(record),
|
||||
saveCancelButtons(record)
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const form = record => ({
|
||||
control: {
|
||||
_component: "@budibase/standard-components/form",
|
||||
formControls:
|
||||
record.fields.map(f => ({
|
||||
label: f.label,
|
||||
control: {
|
||||
_component: "@budibase/standard-components/input",
|
||||
value: {
|
||||
"##bbstate":`current${record.name}.${f.name}`,
|
||||
"##bbsource":"store"
|
||||
}
|
||||
}
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
const formControl = (record, field) => {
|
||||
if(field.type === "string" && field.typeOptions.values && values.typeOptions.length > 0) {
|
||||
return ({
|
||||
_component: "@budibase/standard-components/select",
|
||||
options: field.typeOptions.values.map(v => ({id:v, value:v})),
|
||||
value: {
|
||||
"##bbstate":`current${record.name}.${f.name}`,
|
||||
"##bbsource":"store"
|
||||
},
|
||||
className: "form-control"
|
||||
});
|
||||
} else {
|
||||
return ({
|
||||
_component: "@budibase/standard-components/input",
|
||||
value: {
|
||||
"##bbstate":`current${record.name}.${f.name}`,
|
||||
"##bbsource":"store"
|
||||
},
|
||||
className: "form-control",
|
||||
type: field.type === "string" ? "text"
|
||||
: field.type === "datetime" ? "date"
|
||||
: field.type === "number" ? "number"
|
||||
: "text"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const saveCancelButtons = (record) => ({
|
||||
control: {
|
||||
_component: "@budibase/standard-components/stackpanel",
|
||||
direction: "horizontal",
|
||||
children: [
|
||||
paddedPanelForButton({
|
||||
_component: "common/Primary Button",
|
||||
contentText: `Save ${record.name}`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Save Record",
|
||||
parameters: {
|
||||
statePath: `current${record.name}`,
|
||||
}
|
||||
}
|
||||
]
|
||||
}),
|
||||
paddedPanelForButton({
|
||||
_component: "common/Default Button",
|
||||
contentText: `Cancel`,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Save Record",
|
||||
parameters: {
|
||||
statePath: `current${record.name}`,
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const paddedPanelForButton = (button) => ({
|
||||
control: {
|
||||
_component: "@budibase/standard-components/panel",
|
||||
padding: "20px",
|
||||
component: button
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -10,7 +10,30 @@ export const indexTableProps = (index, helpers) => ({
|
|||
},
|
||||
tableClass: "table table-hover",
|
||||
theadClass: "thead-dark",
|
||||
columns: helpers.indexSchema(index).map(column)
|
||||
columns: helpers.indexSchema(index).map(column),
|
||||
onRowClick: [
|
||||
{
|
||||
"##eventHandlerType": "Load Record",
|
||||
parameters: {
|
||||
recordKey: {
|
||||
"##bbstate": "key",
|
||||
"##bbsource": "context"
|
||||
},
|
||||
statePath: {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
}
|
||||
},
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "currentView",
|
||||
value: {
|
||||
"##bbstate": "type",
|
||||
"##bbsource": "context"
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export const getIndexTableName = (index) =>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,21 @@ const findIndexForRecord = (indexes, record) => {
|
|||
return noMap[0];
|
||||
}
|
||||
|
||||
const component = (recordAndIndex) => {
|
||||
_component: ""
|
||||
}
|
||||
const component = (recordAndIndex) => ({
|
||||
_component: "@budibase/standard-components/div",
|
||||
className: "p-3",
|
||||
children: [
|
||||
{
|
||||
component: {
|
||||
_component: "@budibase/standard-components/H2",
|
||||
text: recordAndIndex.record.collectionName
|
||||
}
|
||||
},
|
||||
{
|
||||
component: {
|
||||
_component: getIndexTableName(recordAndIndex.index)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
})
|
||||
|
|
@ -15,7 +15,7 @@ import { isBound } from "./state/isState";
|
|||
|
||||
export const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
const _initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context, anchor=null) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -43,7 +43,8 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
const component = new (componentLibraries[libName][componentName])({
|
||||
target: htmlElement,
|
||||
props: componentProps,
|
||||
hydrate: hydrate
|
||||
hydrate,
|
||||
anchor
|
||||
});
|
||||
|
||||
bind(component);
|
||||
|
|
@ -93,8 +94,10 @@ export const createApp = (componentLibraries, appDefinition, user) => {
|
|||
}
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
initialiseComponent: initialiseComponent(context, true),
|
||||
appendComponent: initialiseComponent(context, false),
|
||||
hydrateComponent: _initialiseComponent(context, true),
|
||||
appendComponent: _initialiseComponent(context, false),
|
||||
insertComponent: (props, htmlElement, anchor, context) =>
|
||||
_initialiseComponent(context, false)(props, htmlElement, context, anchor),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const loadBudibase = async (componentLibraries, props) => {
|
|||
}
|
||||
|
||||
const _app = createApp(componentLibraries, appDefinition, user);
|
||||
_app.initialiseComponent(
|
||||
_app.hydrateComponent(
|
||||
props,
|
||||
document.body);
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ export const getState = (s, path, fallback) => {
|
|||
|
||||
if(!path || path.length === 0) return fallback;
|
||||
|
||||
if(path === "$") return s;
|
||||
|
||||
const pathParts = path.split(".");
|
||||
const safeGetPath = (obj, currentPartIndex=0) => {
|
||||
|
||||
|
|
|
|||
|
|
@ -130,16 +130,12 @@ export const setupBinding = (store, rootProps, coreApi, context, rootPath) => {
|
|||
for(let pname in h.parameters) {
|
||||
const p = h.parameters[pname];
|
||||
parameters[pname] =
|
||||
!isBound(p)
|
||||
? p
|
||||
: takeStateFromStore(p)
|
||||
? getState(
|
||||
!isBound(p) ? p
|
||||
: takeStateFromStore(p) ? getState(
|
||||
s, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
|
||||
: takeStateFromEventParameters(p)
|
||||
? getState(
|
||||
: takeStateFromEventParameters(p) ? getState(
|
||||
eventContext, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
|
||||
: takeStateFromContext(p)
|
||||
? getState(
|
||||
: takeStateFromContext(p) ? getState(
|
||||
context, p[BB_STATE_BINDINGPATH], p[BB_STATE_FALLBACK])
|
||||
: p[BB_STATE_FALLBACK];
|
||||
|
||||
|
|
|
|||
|
|
@ -639,7 +639,7 @@ const clickHandler = () => {
|
|||
$$self.$$.update = ($$dirty = { _bb: 1, contentComponentContainer: 1, contentComponent: 1 }) => {
|
||||
if ($$dirty._bb || $$dirty.contentComponentContainer || $$dirty.contentComponent) { {
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
} }
|
||||
};
|
||||
|
||||
|
|
@ -1068,7 +1068,7 @@ let labels = {};
|
|||
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -1736,7 +1736,7 @@ const childStyle = child =>
|
|||
if ($$dirty._bb || $$dirty.htmlElements || $$dirty.children) { {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -2130,7 +2130,7 @@ const hasStaticComponents = () => {
|
|||
}
|
||||
|
||||
for(let el in staticHtmlElements) {
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.initialiseComponent(
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
staticHtmlElements[el]
|
||||
), staticComponents);
|
||||
|
|
@ -2147,7 +2147,7 @@ const hasStaticComponents = () => {
|
|||
|
||||
if(hasData()) {
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
|
|
@ -2395,7 +2395,7 @@ let contentElement;
|
|||
|
||||
const onSelectItem = (index) => () => {
|
||||
$$invalidate('selectedIndex', selectedIndex = index);
|
||||
_bb.initialiseComponent(items[index].component, contentElement);
|
||||
_bb.hydrateComponent(items[index].component, contentElement);
|
||||
};
|
||||
|
||||
function div1_binding($$value) {
|
||||
|
|
@ -2570,7 +2570,7 @@ let componentElement;
|
|||
}));
|
||||
|
||||
if(_bb && component) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
}
|
||||
|
||||
$$invalidate('styleVars', styleVars = {
|
||||
|
|
|
|||
|
|
@ -639,7 +639,7 @@ const clickHandler = () => {
|
|||
$$self.$$.update = ($$dirty = { _bb: 1, contentComponentContainer: 1, contentComponent: 1 }) => {
|
||||
if ($$dirty._bb || $$dirty.contentComponentContainer || $$dirty.contentComponent) { {
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
} }
|
||||
};
|
||||
|
||||
|
|
@ -1068,7 +1068,7 @@ let labels = {};
|
|||
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -1736,7 +1736,7 @@ const childStyle = child =>
|
|||
if ($$dirty._bb || $$dirty.htmlElements || $$dirty.children) { {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -2130,7 +2130,7 @@ const hasStaticComponents = () => {
|
|||
}
|
||||
|
||||
for(let el in staticHtmlElements) {
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.initialiseComponent(
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
staticHtmlElements[el]
|
||||
), staticComponents);
|
||||
|
|
@ -2147,7 +2147,7 @@ const hasStaticComponents = () => {
|
|||
|
||||
if(hasData()) {
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
|
|
@ -2395,7 +2395,7 @@ let contentElement;
|
|||
|
||||
const onSelectItem = (index) => () => {
|
||||
$$invalidate('selectedIndex', selectedIndex = index);
|
||||
_bb.initialiseComponent(items[index].component, contentElement);
|
||||
_bb.hydrateComponent(items[index].component, contentElement);
|
||||
};
|
||||
|
||||
function div1_binding($$value) {
|
||||
|
|
@ -2570,7 +2570,7 @@ let componentElement;
|
|||
}));
|
||||
|
||||
if(_bb && component) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
}
|
||||
|
||||
$$invalidate('styleVars', styleVars = {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20365,7 +20365,7 @@ var app = (function (exports) {
|
|||
|
||||
const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
const hydrateComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -20443,8 +20443,8 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
initialiseComponent: initialiseComponent(context, true),
|
||||
appendComponent: initialiseComponent(context, false),
|
||||
hydrateComponent: hydrateComponent(context, true),
|
||||
appendComponent: hydrateComponent(context, false),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
@ -20502,7 +20502,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const _app = createApp(componentLibraries, appDefinition, user);
|
||||
_app.initialiseComponent(
|
||||
_app.hydrateComponent(
|
||||
props,
|
||||
document.body);
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -639,7 +639,7 @@ const clickHandler = () => {
|
|||
$$self.$$.update = ($$dirty = { _bb: 1, contentComponentContainer: 1, contentComponent: 1 }) => {
|
||||
if ($$dirty._bb || $$dirty.contentComponentContainer || $$dirty.contentComponent) { {
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
} }
|
||||
};
|
||||
|
||||
|
|
@ -1068,7 +1068,7 @@ let labels = {};
|
|||
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -1736,7 +1736,7 @@ const childStyle = child =>
|
|||
if ($$dirty._bb || $$dirty.htmlElements || $$dirty.children) { {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -2130,7 +2130,7 @@ const hasStaticComponents = () => {
|
|||
}
|
||||
|
||||
for(let el in staticHtmlElements) {
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.initialiseComponent(
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
staticHtmlElements[el]
|
||||
), staticComponents);
|
||||
|
|
@ -2147,7 +2147,7 @@ const hasStaticComponents = () => {
|
|||
|
||||
if(hasData()) {
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
|
|
@ -2395,7 +2395,7 @@ let contentElement;
|
|||
|
||||
const onSelectItem = (index) => () => {
|
||||
$$invalidate('selectedIndex', selectedIndex = index);
|
||||
_bb.initialiseComponent(items[index].component, contentElement);
|
||||
_bb.hydrateComponent(items[index].component, contentElement);
|
||||
};
|
||||
|
||||
function div1_binding($$value) {
|
||||
|
|
@ -2570,7 +2570,7 @@ let componentElement;
|
|||
}));
|
||||
|
||||
if(_bb && component) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
}
|
||||
|
||||
$$invalidate('styleVars', styleVars = {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20365,7 +20365,7 @@ var app = (function (exports) {
|
|||
|
||||
const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
const hydrateComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -20443,8 +20443,8 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
initialiseComponent: initialiseComponent(context, true),
|
||||
appendComponent: initialiseComponent(context, false),
|
||||
hydrateComponent: hydrateComponent(context, true),
|
||||
appendComponent: hydrateComponent(context, false),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
@ -20502,7 +20502,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const _app = createApp(componentLibraries, appDefinition, user);
|
||||
_app.initialiseComponent(
|
||||
_app.hydrateComponent(
|
||||
props,
|
||||
document.body);
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -639,7 +639,7 @@ const clickHandler = () => {
|
|||
$$self.$$.update = ($$dirty = { _bb: 1, contentComponentContainer: 1, contentComponent: 1 }) => {
|
||||
if ($$dirty._bb || $$dirty.contentComponentContainer || $$dirty.contentComponent) { {
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
} }
|
||||
};
|
||||
|
||||
|
|
@ -1068,7 +1068,7 @@ let labels = {};
|
|||
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -1736,7 +1736,7 @@ const childStyle = child =>
|
|||
if ($$dirty._bb || $$dirty.htmlElements || $$dirty.children) { {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -2130,7 +2130,7 @@ const hasStaticComponents = () => {
|
|||
}
|
||||
|
||||
for(let el in staticHtmlElements) {
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.initialiseComponent(
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
staticHtmlElements[el]
|
||||
), staticComponents);
|
||||
|
|
@ -2147,7 +2147,7 @@ const hasStaticComponents = () => {
|
|||
|
||||
if(hasData()) {
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
|
|
@ -2395,7 +2395,7 @@ let contentElement;
|
|||
|
||||
const onSelectItem = (index) => () => {
|
||||
$$invalidate('selectedIndex', selectedIndex = index);
|
||||
_bb.initialiseComponent(items[index].component, contentElement);
|
||||
_bb.hydrateComponent(items[index].component, contentElement);
|
||||
};
|
||||
|
||||
function div1_binding($$value) {
|
||||
|
|
@ -2570,7 +2570,7 @@ let componentElement;
|
|||
}));
|
||||
|
||||
if(_bb && component) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
}
|
||||
|
||||
$$invalidate('styleVars', styleVars = {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20365,7 +20365,7 @@ var app = (function (exports) {
|
|||
|
||||
const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
const hydrateComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -20443,8 +20443,8 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
initialiseComponent: initialiseComponent(context, true),
|
||||
appendComponent: initialiseComponent(context, false),
|
||||
hydrateComponent: hydrateComponent(context, true),
|
||||
appendComponent: hydrateComponent(context, false),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
@ -20502,7 +20502,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const _app = createApp(componentLibraries, appDefinition, user);
|
||||
_app.initialiseComponent(
|
||||
_app.hydrateComponent(
|
||||
props,
|
||||
document.body);
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20365,7 +20365,7 @@ var app = (function (exports) {
|
|||
|
||||
const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
const hydrateComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -20443,8 +20443,8 @@ var app = (function (exports) {
|
|||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
initialiseComponent: initialiseComponent(context, true),
|
||||
appendComponent: initialiseComponent(context, false),
|
||||
hydrateComponent: hydrateComponent(context, true),
|
||||
appendComponent: hydrateComponent(context, false),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
@ -20502,7 +20502,7 @@ var app = (function (exports) {
|
|||
}
|
||||
|
||||
const _app = createApp(componentLibraries, appDefinition, user);
|
||||
_app.initialiseComponent(
|
||||
_app.hydrateComponent(
|
||||
props,
|
||||
document.body);
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20362,7 +20362,7 @@ const createCoreApi = (appDefinition, user) => {
|
|||
|
||||
const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
const hydrateComponent = (parentContext, hydrate) => (props, htmlElement, context) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -20440,8 +20440,8 @@ const createApp = (componentLibraries, appDefinition, user) => {
|
|||
};
|
||||
|
||||
const bb = (bindings, context) => ({
|
||||
initialiseComponent: initialiseComponent(context, true),
|
||||
appendComponent: initialiseComponent(context, false),
|
||||
hydrateComponent: hydrateComponent(context, true),
|
||||
appendComponent: hydrateComponent(context, false),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
@ -20499,7 +20499,7 @@ const loadBudibase = async (componentLibraries, props) => {
|
|||
}
|
||||
|
||||
const _app = createApp(componentLibraries, appDefinition, user);
|
||||
_app.initialiseComponent(
|
||||
_app.hydrateComponent(
|
||||
props,
|
||||
document.body);
|
||||
|
||||
|
|
|
|||
|
|
@ -89,6 +89,43 @@
|
|||
},
|
||||
"tags": ["form"]
|
||||
},
|
||||
"input" : {
|
||||
"importPath": "Input",
|
||||
"name": "Input",
|
||||
"description": "An HTML input",
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"type": {
|
||||
"type":"options",
|
||||
"options":[
|
||||
"text", "password", "checkbox", "color",
|
||||
"date", "datetime-local", "email",
|
||||
"file", "hidden", "image", "month", "number",
|
||||
"radio", "range", "reset", "search", "submit",
|
||||
"tel", "time", "week"],
|
||||
"default":"text"
|
||||
},
|
||||
"className": {"type": "string", "default": "default"}
|
||||
},
|
||||
"tags": ["form"]
|
||||
},
|
||||
"select" : {
|
||||
"importPath": "Input",
|
||||
"name": "Input",
|
||||
"description": "An HTML input",
|
||||
"props" : {
|
||||
"value": "string",
|
||||
"options": {
|
||||
"type" : "array",
|
||||
"elementDefinition" : {
|
||||
"id":"string",
|
||||
"value":"string"
|
||||
}
|
||||
},
|
||||
"className": {"type": "string", "default": "default"}
|
||||
},
|
||||
"tags": ["form"]
|
||||
},
|
||||
"stackpanel": {
|
||||
"importPath": "StackPanel",
|
||||
"name": "StackPanel",
|
||||
|
|
@ -269,5 +306,65 @@
|
|||
"onLoad": "event"
|
||||
},
|
||||
"tags": ["div", "container", "layout"]
|
||||
},
|
||||
"h1": {
|
||||
"importPath": "h1",
|
||||
"name": "H1",
|
||||
"description": "An HTML H1 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"h2": {
|
||||
"importPath": "h2",
|
||||
"name": "H2",
|
||||
"description": "An HTML H2 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"h3": {
|
||||
"importPath": "h3",
|
||||
"name": "H3",
|
||||
"description": "An HTML H3 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"h4": {
|
||||
"importPath": "h4",
|
||||
"name": "H4",
|
||||
"description": "An HTML H4 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"h5": {
|
||||
"importPath": "h5",
|
||||
"name": "H5",
|
||||
"description": "An HTML H5 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": ["div", "container", "layout"]
|
||||
},
|
||||
"h6": {
|
||||
"importPath": "h6",
|
||||
"name": "H6",
|
||||
"description": "An HTML H6 tag",
|
||||
"props" : {
|
||||
"text": "string",
|
||||
"className":"string"
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -14,16 +14,16 @@
|
|||
"..\\src\\Button.svelte"
|
||||
],
|
||||
"sourcesContent": [
|
||||
"<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.hiddenNav;\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>\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>\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.hiddenNav;\n\nlet currentComponent;\n\n$: {\n if(_bb && currentComponent) {\n _bb.hydrateComponent(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>\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.hydrateComponent(\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>\n\nimport Textbox from \"./Textbox.svelte\";\nimport Form from \"./Form.svelte\";\nimport Button from \"./Button.svelte\";\n\nexport let usernameLabel = \"Username\";\nexport let passwordLabel = \"Password\";\nexport let loginButtonLabel = \"Login\";\nexport let loginRedirect = \"\";\nexport let logo = \"\";\nexport let buttonClass = \"\";\nexport let inputClass=\"\"\n\nexport let _bb;\n\nlet username = \"\";\nlet password = \"\";\nlet busy = false;\nlet incorrect = false;\nlet _logo = \"\";\nlet _buttonClass = \"\";\nlet _inputClass = \"\";\n\n$: {\n _logo = _bb.relativeUrl(logo);\n _buttonClass = buttonClass || \"default-button\";\n _inputClass = inputClass || \"default-input\";\n}\n\nconst login = () => {\n busy = true;\n _bb.api.post(\"/api/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 <input bind:value={username} type=\"text\" class={_inputClass}/>\n </div>\n <div class=\"label\">\n {passwordLabel}\n </div>\n <div class=\"control\">\n <input bind:value={password} type=\"password\" class={_inputClass}/>\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.default-input {\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-button {\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-button:active {\n\tbackground-color: #ddd;\n}\n\n.default-button:focus {\n\tborder-color: #666;\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\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\nexport let hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex = -1;\r\nlet styleVars={};\r\nlet components = {};\r\nlet componentElements = {}\r\n\r\n\r\nconst hasComponentElements = () => \r\n Object.getOwnPropertyNames(componentElements).length > 0;\r\n\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\n if(items && items.length > 0 && hasComponentElements()) {\r\n const currentSelectedItem = selectedIndex > 0\r\n ? items[selectedIndex].title\r\n : \"\";\r\n if(selectedItem && currentSelectedItem !== selectedItem) {\r\n let i=0;\r\n for(let item of items) {\r\n if(item.title === selectedItem) {\r\n onSelectItem(i)();\r\n }\r\n i++;\r\n }\r\n } else if(!currentSelectedItem) {\r\n onSelectItem(0);\r\n }\r\n }\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n selectedIndex = index;\r\n if(!components[index]) {\r\n const comp = _bb.initialiseComponent(\r\n items[index].component, componentElements[index]);\r\n components[index] = comp; \r\n }\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n {#if !hideNavBar}\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 {/if}\r\n {#each items as navItem, index}\r\n\r\n <div class=\"content\"\r\n bind:this={componentElements[index]}>\r\n </div>\r\n {/each}\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 _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.hydrateComponent(\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\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\nexport let hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _bb;\r\n\r\nlet selectedIndex = -1;\r\nlet styleVars={};\r\nlet components = {};\r\nlet componentElements = {}\r\n\r\n\r\nconst hasComponentElements = () => \r\n Object.getOwnPropertyNames(componentElements).length > 0;\r\n\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\n if(items && items.length > 0 && hasComponentElements()) {\r\n const currentSelectedItem = selectedIndex > 0\r\n ? items[selectedIndex].title\r\n : \"\";\r\n if(selectedItem && currentSelectedItem !== selectedItem) {\r\n let i=0;\r\n for(let item of items) {\r\n if(item.title === selectedItem) {\r\n onSelectItem(i)();\r\n }\r\n i++;\r\n }\r\n } else if(!currentSelectedItem) {\r\n onSelectItem(0);\r\n }\r\n }\r\n}\r\n\r\nconst onSelectItem = (index) => () => {\r\n selectedIndex = index;\r\n if(!components[index]) {\r\n const comp = _bb.hydrateComponent(\r\n items[index].component, componentElements[index]);\r\n components[index] = comp; \r\n }\r\n}\r\n\r\n\r\n</script>\r\n\r\n<div class=\"root\" use:cssVars={styleVars}>\r\n {#if !hideNavBar}\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 {/if}\r\n {#each items as navItem, index}\r\n\r\n <div class=\"content\"\r\n bind:this={componentElements[index]}>\r\n </div>\r\n {/each}\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>\r\nimport {buildStyle} from \"./buildStyle\";\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let component=\"\";\r\nexport let text=\"\";\r\nexport let containerClass=\"\";\r\nexport let background=\"\";\r\nexport let border=\"\";\r\nexport let borderRadius=\"\";\r\nexport let font=\"\";\r\nexport let display=\"\";\r\nexport let textAlign=\"\";\r\nexport let color=\"\";\r\nexport let padding=\"\";\r\nexport let margin=\"\";\r\nexport let hoverBackground=\"\";\r\nexport let hoverColor=\"\";\r\nexport let onClick;\r\nexport let height;\r\nexport let width;\r\n\r\nexport let _bb;\r\n\r\nlet styleVars;\r\nlet style=\"\";\r\nlet componentElement;\r\n\r\n$: {\r\n style=buildStyle({\r\n border, background, font, margin,\r\n padding, display, color, height, width,\r\n \"text-align\": textAlign,\r\n \"border-radius\":borderRadius,\r\n cursor: onClick ? \"pointer\" : \"none\"\r\n });\r\n\r\n if(_bb && component) {\r\n _bb.initialiseComponent(component, componentElement);\r\n }\r\n\r\n styleVars = {\r\n hoverBackground:hoverBackground || background, \r\n hoverColor:hoverColor || color\r\n }\r\n}\r\n\r\nconst clickHandler = () => {\r\n if(onClick) onClick();\r\n}\r\n\r\n</script>\r\n\r\n<div class=\"{containerClass} panel\" \r\n style={style}\r\n use:cssVars={styleVars}\r\n this:bind={componentElement}\r\n on:click={clickHandler}>\r\n {component && component._component ? \"\" : text}\r\n</div>\r\n\r\n<style>\r\n\r\n.panel:hover {\r\n background: var(--hoverBackground);\r\n color: var(--hoverColor);\r\n\r\n}\r\n\r\n</style>\r\n",
|
||||
"<script>\n\nimport { emptyProps } from \"./emptyProps\";\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\nexport let onLoad;\n\nexport let data=[];\nexport let dataItemComponent;\n\nexport let _bb;\n\nlet staticHtmlElements = {};\nlet staticComponents = {};\nlet dataBoundElements = {};\nlet dataBoundComponents = {};\n\nlet onLoadCalled = false;\n\nconst hasDataBoundComponents = () => \n Object.getOwnPropertyNames(dataBoundComponents).length > 0;\n\nconst hasData = () => \n Array.isArray(data) && data.length > 0;\n\nconst hasStaticComponents = () => {\n return Object.getOwnPropertyNames(staticComponents).length > 0;\n}\n\n$: {\n\n if(staticHtmlElements) {\n if(hasStaticComponents()) {\n for(let c in staticComponents) {\n staticComponents[c].$destroy();\n }\n staticComponents = {};\n }\n\n for(let el in staticHtmlElements) {\n staticComponents[el] = _bb.initialiseComponent(\n children[el].control,\n staticHtmlElements[el]\n );\n }\n }\n \n\n if(hasDataBoundComponents()) {\n for(let c in dataBoundComponents) {\n dataBoundComponents[c].$destroy();\n }\n dataBoundComponents = {};\n }\n\n if(hasData()) {\n let index = 0;\n for(let d in dataBoundElements) {\n _bb.initialiseComponent(\n dataItemComponent,\n dataBoundElements[d],\n data[parseInt(d)]\n );\n }\n }\n\n if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {\n onLoad();\n onLoadCalled = true;\n }\n}\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n style=\"width: {width}; height: {height}\">\n\n {#if children}\n {#each children as child, index}\n <div class={direction}>\n <div class=\"{itemContainerClass}\"\n bind:this={staticHtmlElements[index]}>\n </div>\n </div>\n {/each}\n {/if}\n\n {#if data && data.length > 0}\n {#each data as child, index}\n <div class={direction}>\n <div class=\"{itemContainerClass}\"\n bind:this={dataBoundElements[index]}>\n </div>\n </div>\n {/each}\n {/if}\n</div>\n\n<style>\n\n.horizontal {\n display:inline-block;\n}\n\n.vertical {\n display: block;\n}\n\n</style>",
|
||||
"<script>\r\nimport {buildStyle} from \"./buildStyle\";\r\nimport cssVars from \"./cssVars\";\r\n\r\nexport let component=\"\";\r\nexport let text=\"\";\r\nexport let containerClass=\"\";\r\nexport let background=\"\";\r\nexport let border=\"\";\r\nexport let borderRadius=\"\";\r\nexport let font=\"\";\r\nexport let display=\"\";\r\nexport let textAlign=\"\";\r\nexport let color=\"\";\r\nexport let padding=\"\";\r\nexport let margin=\"\";\r\nexport let hoverBackground=\"\";\r\nexport let hoverColor=\"\";\r\nexport let onClick;\r\nexport let height;\r\nexport let width;\r\n\r\nexport let _bb;\r\n\r\nlet styleVars;\r\nlet style=\"\";\r\nlet componentElement;\r\n\r\n$: {\r\n style=buildStyle({\r\n border, background, font, margin,\r\n padding, display, color, height, width,\r\n \"text-align\": textAlign,\r\n \"border-radius\":borderRadius,\r\n cursor: onClick ? \"pointer\" : \"none\"\r\n });\r\n\r\n if(_bb && component) {\r\n _bb.hydrateComponent(component, componentElement);\r\n }\r\n\r\n styleVars = {\r\n hoverBackground:hoverBackground || background, \r\n hoverColor:hoverColor || color\r\n }\r\n}\r\n\r\nconst clickHandler = () => {\r\n if(onClick) onClick();\r\n}\r\n\r\n</script>\r\n\r\n<div class=\"{containerClass} panel\" \r\n style={style}\r\n use:cssVars={styleVars}\r\n this:bind={componentElement}\r\n on:click={clickHandler}>\r\n {component && component._component ? \"\" : text}\r\n</div>\r\n\r\n<style>\r\n\r\n.panel:hover {\r\n background: var(--hoverBackground);\r\n color: var(--hoverColor);\r\n\r\n}\r\n\r\n</style>\r\n",
|
||||
"<script>\n\nimport { emptyProps } from \"./emptyProps\";\n\nexport let direction = \"horizontal\";\nexport let children = [];\nexport let width = \"auto\";\nexport let height = \"auto\";\nexport let containerClass=\"\";\nexport let itemContainerClass=\"\";\nexport let onLoad;\n\nexport let data=[];\nexport let dataItemComponent;\n\nexport let _bb;\n\nlet staticHtmlElements = {};\nlet staticComponents = {};\nlet dataBoundElements = {};\nlet dataBoundComponents = {};\n\nlet onLoadCalled = false;\n\nconst hasDataBoundComponents = () => \n Object.getOwnPropertyNames(dataBoundComponents).length > 0;\n\nconst hasData = () => \n Array.isArray(data) && data.length > 0;\n\nconst hasStaticComponents = () => {\n return Object.getOwnPropertyNames(staticComponents).length > 0;\n}\n\n$: {\n\n if(staticHtmlElements) {\n if(hasStaticComponents()) {\n for(let c in staticComponents) {\n staticComponents[c].$destroy();\n }\n staticComponents = {};\n }\n\n for(let el in staticHtmlElements) {\n staticComponents[el] = _bb.hydrateComponent(\n children[el].control,\n staticHtmlElements[el]\n );\n }\n }\n \n\n if(hasDataBoundComponents()) {\n for(let c in dataBoundComponents) {\n dataBoundComponents[c].$destroy();\n }\n dataBoundComponents = {};\n }\n\n if(hasData()) {\n let index = 0;\n for(let d in dataBoundElements) {\n _bb.hydrateComponent(\n dataItemComponent,\n dataBoundElements[d],\n data[parseInt(d)]\n );\n }\n }\n\n if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {\n onLoad();\n onLoadCalled = true;\n }\n}\n\n\n</script>\n\n<div class=\"root {containerClass}\"\n style=\"width: {width}; height: {height}\">\n\n {#if children}\n {#each children as child, index}\n <div class={direction}>\n <div class=\"{itemContainerClass}\"\n bind:this={staticHtmlElements[index]}>\n </div>\n </div>\n {/each}\n {/if}\n\n {#if data && data.length > 0}\n {#each data as child, index}\n <div class={direction}>\n <div class=\"{itemContainerClass}\"\n bind:this={dataBoundElements[index]}>\n </div>\n </div>\n {/each}\n {/if}\n</div>\n\n<style>\n\n.horizontal {\n display:inline-block;\n}\n\n.vertical {\n display: block;\n}\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>"
|
||||
"<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.hydrateComponent(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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"
|
||||
|
|
|
|||
|
|
@ -1047,7 +1047,7 @@ var app = (function () {
|
|||
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -1393,7 +1393,7 @@ var app = (function () {
|
|||
$$self.$$.update = ($$dirty = { _bb: 1, contentComponentContainer: 1, contentComponent: 1 }) => {
|
||||
if ($$dirty._bb || $$dirty.contentComponentContainer || $$dirty.contentComponent) { {
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
} }
|
||||
};
|
||||
|
||||
|
|
@ -2258,7 +2258,7 @@ var app = (function () {
|
|||
if ($$dirty._bb || $$dirty.htmlElements || $$dirty.children) { {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
@ -2925,7 +2925,7 @@ var app = (function () {
|
|||
const onSelectItem = (index) => () => {
|
||||
$$invalidate('selectedIndex', selectedIndex = index);
|
||||
if(!components[index]) {
|
||||
const comp = _bb.initialiseComponent(
|
||||
const comp = _bb.hydrateComponent(
|
||||
items[index].component, componentElements[index]);
|
||||
components[index] = comp;
|
||||
}
|
||||
|
|
@ -3288,7 +3288,7 @@ var app = (function () {
|
|||
}));
|
||||
|
||||
if(_bb && component) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
}
|
||||
|
||||
$$invalidate('styleVars', styleVars = {
|
||||
|
|
@ -3983,7 +3983,7 @@ var app = (function () {
|
|||
}
|
||||
|
||||
for(let el in staticHtmlElements) {
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.initialiseComponent(
|
||||
$$invalidate('staticComponents', staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
staticHtmlElements[el]
|
||||
), staticComponents);
|
||||
|
|
@ -4000,7 +4000,7 @@ var app = (function () {
|
|||
|
||||
if(hasData()) {
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
|
|
@ -24910,7 +24910,7 @@ var app = (function () {
|
|||
|
||||
const createApp = (componentLibraries, appDefinition, user) => {
|
||||
|
||||
const initialiseComponent = (parentContext) => (props, htmlElement, context) => {
|
||||
const hydrateComponent = (parentContext) => (props, htmlElement, context) => {
|
||||
|
||||
const {componentName, libName} = splitName(props._component);
|
||||
|
||||
|
|
@ -24963,7 +24963,7 @@ var app = (function () {
|
|||
};
|
||||
|
||||
const bb = () => ({
|
||||
initialiseComponent: initialiseComponent(),
|
||||
hydrateComponent: hydrateComponent(),
|
||||
store,
|
||||
relativeUrl,
|
||||
api,
|
||||
|
|
@ -24977,7 +24977,7 @@ var app = (function () {
|
|||
if(!context) return bbRoot;
|
||||
const bbCxt = bb();
|
||||
bbCxt.context = context;
|
||||
bbCxt.initialiseComponent=initialiseComponent(context);
|
||||
bbCxt.hydrateComponent=hydrateComponent(context);
|
||||
return bbCxt;
|
||||
};
|
||||
|
||||
|
|
@ -25463,7 +25463,7 @@ var app = (function () {
|
|||
$$self.$$.update = ($$dirty = { _bb: 1, currentComponent: 1 }) => {
|
||||
if ($$dirty._bb || $$dirty.currentComponent) { {
|
||||
if(_bb && currentComponent) {
|
||||
_bb.initialiseComponent(testProps, currentComponent);
|
||||
_bb.hydrateComponent(testProps, currentComponent);
|
||||
}
|
||||
} }
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -16,7 +16,7 @@ $ : {
|
|||
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
formControls[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ let htmlElements = {};
|
|||
$ : {
|
||||
if(_bb && htmlElements) {
|
||||
for(let el in htmlElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
children[el].control,
|
||||
htmlElements[el]
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export let text="";
|
||||
export let className=""
|
||||
|
||||
export let _bb;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1 class={className}>
|
||||
{text}
|
||||
</h1>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export let text="";
|
||||
export let className=""
|
||||
|
||||
export let _bb;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1 class={className}>
|
||||
{text}
|
||||
</h1>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export let text="";
|
||||
export let className=""
|
||||
|
||||
export let _bb;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h3 class={className}>
|
||||
{text}
|
||||
</h3>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export let text="";
|
||||
export let className=""
|
||||
|
||||
export let _bb;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h4 class={className}>
|
||||
{text}
|
||||
</h4>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
export let text="";
|
||||
export let className=""
|
||||
|
||||
export let _bb;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h6 class={className}>
|
||||
{text}
|
||||
</h6>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import {buildStyle} from "./buildStyle";
|
||||
|
||||
export let text="";
|
||||
export let className=""
|
||||
|
||||
export let _bb;
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<h1 class={className}>
|
||||
{text}
|
||||
</h1>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
|
||||
export let value="";
|
||||
export let className = "default";
|
||||
export let type = "text";
|
||||
|
||||
export let _bb;
|
||||
|
||||
let actualValue = "";
|
||||
|
||||
const onchange = (ev) => {
|
||||
if(_bb) {
|
||||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<input class={className}
|
||||
type={type}
|
||||
value={value}
|
||||
on:change={onchange}/>
|
||||
|
||||
|
||||
<style>
|
||||
.default {
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -53,7 +53,7 @@ $: {
|
|||
const onSelectItem = (index) => () => {
|
||||
selectedIndex = index;
|
||||
if(!components[index]) {
|
||||
const comp = _bb.initialiseComponent(
|
||||
const comp = _bb.hydrateComponent(
|
||||
items[index].component, componentElements[index]);
|
||||
components[index] = comp;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ $: {
|
|||
});
|
||||
|
||||
if(_bb && component && componentElement && !componentInitialised) {
|
||||
_bb.initialiseComponent(component, componentElement);
|
||||
_bb.hydrateComponent(component, componentElement);
|
||||
componentInitialised = true;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
<script>
|
||||
|
||||
export let value="";
|
||||
export let className = "default";
|
||||
export let type = "text";
|
||||
export let options = [];
|
||||
|
||||
export let _bb;
|
||||
|
||||
let actualValue = "";
|
||||
|
||||
const onchange = (ev) => {
|
||||
if(_bb) {
|
||||
_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<select class={className}
|
||||
value={value}
|
||||
on:change={onchange}>
|
||||
{#each options as opt}
|
||||
<option id={opt.id ? opt.id : opt.value}>{opt.value}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
|
||||
<style>
|
||||
.default {
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -43,7 +43,7 @@ $: {
|
|||
}
|
||||
|
||||
for(let el in staticHtmlElements) {
|
||||
staticComponents[el] = _bb.initialiseComponent(
|
||||
staticComponents[el] = _bb.hydrateComponent(
|
||||
children[el].control,
|
||||
staticHtmlElements[el]
|
||||
);
|
||||
|
|
@ -61,7 +61,7 @@ $: {
|
|||
if(hasData()) {
|
||||
let index = 0;
|
||||
for(let d in dataBoundElements) {
|
||||
_bb.initialiseComponent(
|
||||
_bb.hydrateComponent(
|
||||
dataItemComponent,
|
||||
dataBoundElements[d],
|
||||
data[parseInt(d)]
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ let currentComponent;
|
|||
|
||||
$: {
|
||||
if(_bb && currentComponent) {
|
||||
_bb.initialiseComponent(testProps, currentComponent);
|
||||
_bb.hydrateComponent(testProps, currentComponent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const createClasses = (classes) => {
|
|||
|
||||
$:{
|
||||
if(_bb && contentComponentContainer && contentComponent._component)
|
||||
_bb.initialiseComponent(contentComponent, contentComponentContainer);
|
||||
_bb.hydrateComponent(contentComponent, contentComponentContainer);
|
||||
|
||||
cssVariables = {
|
||||
hoverColor, hoverBorder,
|
||||
|
|
|
|||
Loading…
Reference in New Issue