CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 19:41:03 +12:00
Code Issues Projects Releases Wiki Activity

standard-components - uses _children

Browse source
This commit is contained in:
Michael Shanks 2020-01-18 09:00:18 +00:00
parent eac855bb71
commit be6603b15a
22 changed files with 609 additions and 3035 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
packages/standard-components/components.json
View file

@ -28,12 +28,11 @@
}
},
"button" : {
"importPath": "button",
"name": "Button",
"description": "an html <button />",
"props": {
"contentText": { "type": "string", "default": "Button" },
"className": {"type": "string", "default": "default"},
"className": "string",
"disabled": "bool",
"onClick": "event",
"background": "string",
@ -47,7 +46,6 @@
"tags": ["button"]
},
"login" : {
"importPath": "Login",
"name": "Login Control",
"description": "A control that accepts username, password an also handles password resets",
"props" : {
@ -61,34 +59,7 @@
},
"tags": ["login", "credentials", "password", "logon"]
},
"form" : {
"importPath": "Form",
"name": "Form",
"description": "A form - allgned fields with labels",
"props" : {
"containerClass": "string",
"formControls": {
"type":"array",
"elementDefinition": {
"label": "string"
}
}
},
"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"]
},
"input" : {
"importPath": "Input",
"name": "Input",
"description": "An HTML input",
"props" : {
@ -103,14 +74,14 @@
"tel", "time", "week"],
"default":"text"
},
"className": {"type": "string", "default": "default"}
"className": "string"
},
"tags": ["form"]
},
"select" : {
"importPath": "Input",
"name": "Input",
"description": "An HTML input",
"children": false,
"props" : {
"value": "string",
"options": {
@ -120,64 +91,16 @@
"value":"string"
}
},
"className": {"type": "string", "default": "default"}
"className": "string"
},
"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"
},
"width": {"type":"string","default":"auto"},
"height": {"type":"string","default":"auto"},
"containerClass":"string",
"itemContainerClass":"string",
"data": "state",
"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": {
"gridColumnStart":"string",
"gridColumnEnd":"string",
"gridRowStart":"string",
"gridRowEnd":"string",
"justifySelf": {
"type":"options",
"options":["start", "center", "end", "stretch"],
"default":"stretch"
}
}
},
"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",
"children": false,
"props" : {
"value": "string",
"containerClass": "string",
"font": "string",
"color": "string",
"textAlign": {
@ -193,48 +116,11 @@
"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",
"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"]
},
"nav": {
"importPath": "Nav",
"name": "Nav",
"description": "A nav - a side bar of buttons that control the currently active component",
"props" : {
@ -246,12 +132,6 @@
"selectedItemBorder": "string",
"itemHoverBackground": {"type" :"string", "default":"gainsboro"},
"itemHoverColor": {"type" :"string", "default":"black"},
"items": {
"type": "array",
"elementDefinition" : {
"title": "string"
}
},
"selectedItem":"string",
"hideNavBar":"bool"
@ -259,7 +139,6 @@
"tags": ["nav", "navigation", "sidebar"]
},
"table": {
"importPath": "Table",
"name": "Table",
"description": "An HTML table",
"props" : {
@ -281,18 +160,10 @@
"tags": ["table"]
},
"div": {
"importPath": "Div",
"name": "Div",
"description": "An HTML div tag",
"props" : {
"children": {
"type":"array",
"elementDefinition": {
"className": "string"
}
},
"className":"string",
"data": "state",
"onLoad": "event"
},
"tags": ["div", "container", "layout"]

1
packages/standard-components/package.json
View file

@ -13,6 +13,7 @@
},
"devDependencies": {
"@budibase/client": "^0.0.15",
"@nx-js/compiler-util": "^2.0.0",
"fs-extra": "^8.1.0",
"lodash": "^4.17.15",
"npm-run-all": "^4.1.5",

9
packages/standard-components/public/bundle.css
View file

@ -1,13 +1,8 @@
#current_component.svelte-1xqz9vm{height:100%;width:100%}
.root.svelte-10kw8to{display:grid}
#current_component.svelte-uuhis1{height:100%;width:100%}
.root.svelte-crnq0a{height:100%;display:grid;grid-template-columns:[left] 1fr [middle] auto [right] 1fr;grid-template-rows:[top] 1fr [center] auto [bottom] 1fr}.content.svelte-crnq0a{grid-column-start:middle;grid-row-start:center;width:400px}.logo-container.svelte-crnq0a{margin-bottom:20px
}.logo-container.svelte-crnq0a>img.svelte-crnq0a{max-width:100%}.login-button-container.svelte-crnq0a{text-align:right;margin-top:20px}.incorrect-details-panel.svelte-crnq0a{margin-top:30px;padding:10px;border-style:solid;border-width:1px;border-color:maroon;border-radius:1px;text-align:center;color:maroon;background-color:mistyrose}.form-root.svelte-crnq0a{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-crnq0a{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-crnq0a{grid-column-start:control;padding:5px 10px}.default-input.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default-button.svelte-crnq0a{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default-button.svelte-crnq0a:active{background-color:#ddd}.default-button.svelte-crnq0a:focus{border-color:#666}
.form-root.svelte-m9d6ue{display:grid;grid-template-columns:[label] auto [control] 1fr}.label.svelte-m9d6ue{grid-column-start:label;padding:5px 10px;vertical-align:middle}.control.svelte-m9d6ue{grid-column-start:control;padding:5px 10px}.overflow.svelte-m9d6ue{grid-column-start:overflow}.full-width.svelte-m9d6ue{width:100%}
.panel.svelte-1nuhpxd:hover{background:var(--hoverBackground);color:var(--hoverColor)}
.root.svelte-aihwli{height:100%;width:100%;grid-template-columns:[navbar] auto [content] 1fr;display:grid}.navbar.svelte-aihwli{grid-column:navbar;background:var(--navBarBackground);border:var(--navBarBorder);color:var(--navBarColor)}.navitem.svelte-aihwli{padding:10px 17px;cursor:pointer}.navitem.svelte-aihwli:hover{background:var(--itemHoverBackground);color:var(--itemHoverColor)}.navitem.selected.svelte-aihwli{background:var(--selectedItemBackground);border:var(--selectedItemBorder);color:var(--selectedItemColor)}.content.svelte-aihwli{grid-column:content}
.default.svelte-1ec4wqj{width:100%;font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;width:100%}.default.svelte-1ec4wqj:disabled{color:#ccc}
.horizontal.svelte-osi0db{display:inline-block}.vertical.svelte-osi0db{display:block}
.default.svelte-181okpd{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-181okpd:active{background-color:#ddd}.default.svelte-181okpd:focus{border-color:#666}.border.svelte-181okpd{border:var(--border)}.color.svelte-181okpd{color:var(--color)}.background.svelte-181okpd{background:var(--background)}.hoverBorder.svelte-181okpd:hover{border:var(--hoverBorder)}.hoverColor.svelte-181okpd:hover{color:var(--hoverColor)}.hoverBack.svelte-181okpd:hover{background:var(--hoverBackground)}
.default.svelte-1smqkrd{font-family:inherit;font-size:inherit;padding:0.4em;margin:0 0 0.5em 0;box-sizing:border-box;border:1px solid #ccc;border-radius:2px;color:#333;background-color:#f4f4f4;outline:none}.default.svelte-1smqkrd:active{background-color:#ddd}.default.svelte-1smqkrd:focus{border-color:#666}.border.svelte-1smqkrd{border:var(--border)}.color.svelte-1smqkrd{color:var(--color)}.background.svelte-1smqkrd{background:var(--background)}.hoverBorder.svelte-1smqkrd:hover{border:var(--hoverBorder)}.hoverColor.svelte-1smqkrd:hover{color:var(--hoverColor)}.hoverBack.svelte-1smqkrd:hover{background:var(--hoverBackground)}
.table-default.svelte-h8rqk6{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse}.table-default.svelte-h8rqk6 .thead-default .th-default.svelte-h8rqk6{vertical-align:bottom;border-bottom:2px solid #dee2e6;font-weight:bold}.table-default.svelte-h8rqk6 .th-default.svelte-h8rqk6{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6;font-weight:normal}.th-default.svelte-h8rqk6{text-align:inherit}.table-default.svelte-h8rqk6 .tbody-default .tr-default.svelte-h8rqk6:hover{color:#212529;background-color:rgba(0,0,0,.075);cursor:pointer}
/*# sourceMappingURL=bundle.css.map */

22
packages/standard-components/public/bundle.css.map
View file

@ -3,28 +3,18 @@
"file": "bundle.css",
"sources": [
"..\\src\\Test\\TestApp.svelte",
"..\\src\\Grid.svelte",
"..\\src\\Login.svelte",
"..\\src\\Form.svelte",
"..\\src\\Panel.svelte",
"..\\src\\Nav.svelte",
"..\\src\\Textbox.svelte",
"..\\src\\StackPanel.svelte",
"..\\src\\Button.svelte",
"..\\src\\Table.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.table;\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\", JSON.stringify(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.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>\nimport {buildStyle} from \"./buildStyle\";\nimport cssVars from \"./cssVars\";\n\nexport let component=\"\";\nexport let text=\"\";\nexport let containerClass=\"\";\nexport let background=\"\";\nexport let border=\"\";\nexport let borderRadius=\"\";\nexport let font=\"\";\nexport let display=\"\";\nexport let textAlign=\"\";\nexport let color=\"\";\nexport let padding=\"\";\nexport let margin=\"\";\nexport let hoverBackground=\"\";\nexport let hoverColor=\"\";\nexport let onClick;\nexport let height;\nexport let width;\n\nexport let _bb;\n\nlet styleVars;\nlet style=\"\";\nlet componentElement;\nlet componentInitialised=false;\n\n$: {\n style=buildStyle({\n border, background, font, margin,\n padding, display, color, height, width,\n \"text-align\": textAlign,\n \"border-radius\":borderRadius,\n cursor: onClick ? \"pointer\" : \"none\"\n });\n\n if(_bb && component && componentElement && !componentInitialised) {\n _bb.hydrateComponent(component, componentElement);\n componentInitialised = true;\n }\n\n styleVars = {\n hoverBackground:hoverBackground || background, \n hoverColor:hoverColor || color\n }\n}\n\nconst clickHandler = () => {\n if(onClick) {\n _bb.call(onClick);\n }\n}\n\n</script>\n\n<div class=\"{containerClass} panel\" \n style={style}\n use:cssVars={styleVars}\n bind:this={componentElement}\n on:click={clickHandler}>\n {component && component._component ? \"\" : text}\n</div>\n\n<style>\n\n.panel:hover {\n background: var(--hoverBackground);\n color: var(--hoverColor);\n\n}\n\n</style>\n",
"<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\nconst onchange = (ev) => {\n\tif(_bb) {\n\t\t_bb.setStateFromBinding(_bb.bindings.value, ev.target.value);\n\t}\n}\n\n</script>\n\n{#if hideValue}\n<input class={className} \n\t type=\"password\" \n\t value={value} \n\t on:change={onchange}/>\n{:else}\n<input class={className} \n\t type=\"text\" \n\t value={value}\n\t on:change={onchange}/>\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>\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 _bb.call(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>\nimport cssVars from \"./cssVars\";\nimport {buildStyle} from \"./buildStyle\";\nexport let className = \"default\";\nexport let disabled = false;\nexport let contentText;\nexport let contentComponent;\nexport let onClick;\nexport let background;\nexport let color;\nexport let border;\nexport let padding;\nexport let hoverColor;\nexport let hoverBackground;\nexport let hoverBorder;\n\nexport let _bb;\nlet contentComponentContainer;\nlet cssVariables;\nlet buttonStyles;\n\nlet customHoverColorClass;\nlet customHoverBorderClass;\nlet customHoverBackClass;\n\nlet customClasses = \"\";\n\nconst createClasses = (classes) => {\n\tlet all = \"\";\n\tfor(let cls in classes) {\n\t\tif(classes[cls]) {\n\t\t\tall = all + \" \" + cls;\n\t\t}\n\t}\n\treturn all;\n}\n\t\n\n$:{\n\tif(_bb && contentComponentContainer && contentComponent._component)\n\t\t_bb.hydrateComponent(contentComponent, contentComponentContainer);\n\n\tcssVariables = {\n\t\thoverColor, hoverBorder,\n\t\thoverBackground,\n\t\tbackground, color, border,\n\t};\n\n\tbuttonStyles = buildStyle({\n\t\tpadding\n\t});\t\n\t\n\tcustomClasses = createClasses({\n\t\thoverColor, hoverBorder, hoverBackground,\n\t\tbackground, border, color\n\t});\n\t\n}\n\n\n\n\nconst clickHandler = () => {\n\t_bb.call(onClick);\n}\n\n</script>\n\n\n<button use:cssVars={cssVariables} \n\t\tclass=\"{className} {customClasses}\" \n\t\tdisabled={disabled || false} \n\t\ton:click={clickHandler} \n\t\tstyle={buttonStyles}>\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.border {\n\tborder: var(--border);\n}\n\n.color {\n\tcolor: var(--color);\n}\n\n.background {\n\tbackground: var(--background);\n}\n\n.hoverBorder:hover {\n\tborder: var(--hoverBorder);\n}\n\n.hoverColor:hover {\n\tcolor: var(--hoverColor);\n}\n\n.hoverBack:hover {\n\tbackground: var(--hoverBackground);\n}\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 _bb.call(onRowClick, row);\r\n}\r\n\r\nconst cellValue = (colIndex, row) => \r\n _bb.getStateOrValue(\r\n _bb.bindings.columns[colIndex].value\r\n , 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 {#if data}\r\n {#each data as row}\r\n <tr class={trClass}\r\n on:click={rowClickHandler(row)} >\r\n {#each columns as col, index}\r\n <th class={thClass}>{cellValue(index, row)}</th>\r\n {/each}\r\n </tr>\r\n {/each}\r\n {/if}\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>\r\nimport createApp from \"./createApp\";\r\nimport { props } from \"./props\";\r\n\r\nlet _bb;\r\n\r\nconst _appPromise = createApp();\r\n_appPromise.then(a => _bb = a);\r\n\r\nconst testProps = props.divWithAFewControls;\r\n\r\nlet currentComponent;\r\n\r\n$: {\r\n if(_bb && currentComponent) {\r\n _bb.hydrateChildren(testProps._children, currentComponent);\r\n }\r\n}\r\n\r\n\r\n\r\n</script>\r\n\r\n{#await _appPromise}\r\nloading\r\n{:then _bb}\r\n\r\n<div id=\"current_component\" bind:this={currentComponent}>\r\n</div>\r\n\r\n{/await}\r\n\r\n\r\n<style>\r\n#current_component {\r\n height: 100%;\r\n width: 100%;\r\n}\r\n</style>\r\n\r\n",
"<script>\n\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\", JSON.stringify(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>\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 hideNavBar=false;\r\nexport let selectedItem=\"\";\r\n\r\nexport let _children;\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(_children && _children.length > 0 && hasComponentElements()) {\r\n const currentSelectedItem = selectedIndex > 0\r\n ? _children[selectedIndex].title\r\n : \"\";\r\n if(selectedItem && currentSelectedItem !== selectedItem) {\r\n let i=0;\r\n for(let child of _children) {\r\n if(child.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.hydrateChildren(\r\n _children[index].children, 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 _children 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 _children as navItem, index}\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>\r\nimport cssVars from \"./cssVars\";\r\nimport {buildStyle} from \"./buildStyle\";\r\nexport let className = \"default\";\r\nexport let disabled = false;\r\nexport let contentText;\r\nexport let onClick;\r\nexport let background;\r\nexport let color;\r\nexport let border;\r\nexport let padding;\r\nexport let hoverColor;\r\nexport let hoverBackground;\r\nexport let hoverBorder;\r\nexport let _children;\r\n\r\nexport let _bb;\r\nlet theButton;\r\nlet cssVariables;\r\nlet buttonStyles;\r\n\r\nlet customHoverColorClass;\r\nlet customHoverBorderClass;\r\nlet customHoverBackClass;\r\n\r\nlet customClasses = \"\";\r\n\r\nconst createClasses = (classes) => {\r\n\tlet all = \"\";\r\n\tfor(let cls in classes) {\r\n\t\tif(classes[cls]) {\r\n\t\t\tall = all + \" \" + cls;\r\n\t\t}\r\n\t}\r\n\treturn all;\r\n}\r\n\r\n$:{\r\n\tif(_bb && theButton && _children && _children.length)\r\n\t\t_bb.hydrateChildren(_children, theButton);\r\n}\r\n\r\n$:{\r\n\tcssVariables = {\r\n\t\thoverColor, hoverBorder,\r\n\t\thoverBackground,\r\n\t\tbackground, color, border,\r\n\t};\r\n\r\n\tbuttonStyles = buildStyle({\r\n\t\tpadding\r\n\t});\t\r\n\t\r\n\tcustomClasses = createClasses({\r\n\t\thoverColor, hoverBorder, hoverBackground,\r\n\t\tbackground, border, color\r\n\t});\r\n}\r\n\r\n\r\n\r\n\r\nconst clickHandler = () => {\r\n\t_bb.call(onClick);\r\n}\r\n\r\n</script>\r\n\r\n\r\n<button bind:this={theButton}\r\n\t\tuse:cssVars={cssVariables} \r\n\t\tclass=\"{className} {customClasses}\" \r\n\t\tdisabled={disabled || false} \r\n\t\ton:click={clickHandler} \r\n\t\tstyle={buttonStyles}>\r\n {#if !_children || _children.length === 0}\r\n {contentText}\r\n {/if}\r\n</button>\r\n\r\n\r\n<style>\r\n\r\n.default {\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tpadding: 0.4em;\r\n\tmargin: 0 0 0.5em 0;\r\n\tbox-sizing: border-box;\r\n\tborder: 1px solid #ccc;\r\n\tborder-radius: 2px;\r\n\tcolor: #333;\r\n\tbackground-color: #f4f4f4;\r\n\toutline: none;\r\n}\r\n\r\n.default:active {\r\n\tbackground-color: #ddd;\r\n}\r\n\r\n.default:focus {\r\n\tborder-color: #666;\r\n}\r\n\r\n.border {\r\n\tborder: var(--border);\r\n}\r\n\r\n.color {\r\n\tcolor: var(--color);\r\n}\r\n\r\n.background {\r\n\tbackground: var(--background);\r\n}\r\n\r\n.hoverBorder:hover {\r\n\tborder: var(--hoverBorder);\r\n}\r\n\r\n.hoverColor:hover {\r\n\tcolor: var(--hoverColor);\r\n}\r\n\r\n.hoverBack:hover {\r\n\tbackground: var(--hoverBackground);\r\n}\r\n\r\n\r\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 _bb.call(onRowClick, row);\r\n}\r\n\r\nconst cellValue = (colIndex, row) => {\r\n const val = _bb.getStateOrValue(\r\n _bb.props.columns[colIndex].value\r\n , row)\r\n return val;\r\n}\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 {#if data}\r\n {#each data as row}\r\n <tr class={trClass}\r\n on:click={rowClickHandler(row)} >\r\n {#each columns as col, index}\r\n <th class={thClass}>{cellValue(index, row)}</th>\r\n {/each}\r\n </tr>\r\n {/each}\r\n {/if}\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>"
],
"names": [],
"mappings": "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"
"mappings": "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"
}

2758
packages/standard-components/public/bundle.js
View file

File diff suppressed because it is too large Load diff

2
packages/standard-components/public/bundle.js.map
View file

File diff suppressed because one or more lines are too long

96
packages/standard-components/src/Div.svelte
View file

@ -1,107 +1,19 @@
<script>
export let children = [];
export let _children = [];
export let className="";
export let data=[];
export let dataItemComponent;
export let onLoad;
export let _bb;
let rootDiv;
let staticComponentsApplied=false;
let dataBoundComponents = [];
let previousData;
let onLoadCalled = false;
let staticHtmlElements = {};
const hasData = () =>
Array.isArray(data) && data.length > 0;
const staticElementsInitialised = () => {
if(!children) return false;
if(children.filter(c => c.className).length === Object.keys(staticHtmlElements).length)
return true;
}
const getStaticAnchor = (elementIndex) => {
const nextElements = Object.keys(staticHtmlElements).filter(k => k > elementIndex);
return nextElements.length === 0
? null
: staticHtmlElements[Math.min(...nextElements)];
}
$: {
if(rootDiv) {
if(children && children.length > 0
&& !staticComponentsApplied
&& staticElementsInitialised()) {
let index = 0;
for(let child of _bb.props.children) {
if(child.className) {
_bb.hydrateChildren(
child.children,
staticHtmlElements[index]);
} else {
const anchor = getStaticAnchor(index);
if(!anchor) {
_bb.appendChildren(
child.children,
rootDiv);
} else {
_bb.insertChildren(
child.children,
rootDiv,
anchor);
}
}
index += 1;
}
staticComponentsApplied = true;
}
if(previousData !== data) {
for(let c of dataBoundComponents) {
dataBoundComponents[c].$destroy();
}
dataBoundComponents = [];
if(hasData()) {
let index = 0;
for(let dataItem of data) {
_bb.appendChildren(
_bb.props.dataItemComponent,
rootDiv,
dataItem
);
}
}
}
if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {
_bb.call(onLoad);
onLoadCalled = true;
}
}
$:{
if(_bb && rootDiv && _children && _children.length)
_bb.hydrateChildren(_children, theButton);
}
</script>
<div class="{className}" bind:this={rootDiv}>
{#each children as child, index}
{#if child.className}
<div class="{child.className}"
bind:this={staticHtmlElements[index]}>
</div>
{/if}
{/each}
</div>

59
packages/standard-components/src/Form.svelte
View file

@ -1,59 +0,0 @@
<script>
export let containerClass = "";
export let formControls = [];
export let _bb;
let htmlElements = {};
let labels = {};
$ : {
let cIndex = 0;
for(let c of formControls) {
labels[cIndex] = c.label;
cIndex++;
}
if(_bb && htmlElements) {
for(let el in htmlElements) {
_bb.hydrateChildren(
_bb.props.formControls[el].control,
htmlElements[el]
);
}
}
}
</script>
<div class="form-root {containerClass}">
{#each formControls as child, index}
<div class="label">{labels[index]}</div>
<div class="control"
bind:this={htmlElements[index]}>
</div>
{/each}
</div>
<style>
.form-root {
display: grid;
grid-template-columns: [label] auto [control] 1fr; /* [overflow] auto;*/
}
.label {
grid-column-start: label;
padding: 5px 10px;
vertical-align: middle;
}
.control {
grid-column-start: control;
padding: 5px 10px;
}
.overflow {
grid-column-start: overflow;
}
.full-width {
width: 100%;
}
</style>

62
packages/standard-components/src/Grid.svelte
View file

@ -1,62 +0,0 @@
<script>
import { onMount } from 'svelte'
import {buildStyle} from "./buildStyle";
export let gridTemplateRows ="";
export let gridTemplateColumns ="";
export let children = [];
export let containerClass="";
export let itemContainerClass="";
/*"gridColumnStart":"string",
"gridColumnEnd":"string",
"gridRowStart":"string",
"gridRowEnd":"string"*/
export let _bb;
let style="";
let htmlElements = {};
let isInitilised = false;
$ : {
if(!isInitilised && _bb && htmlElements && Object.keys(htmlElements).length > 0) {
for(let el in htmlElements) {
_bb.hydrateChildren(
_bb.props.children[el].component,
htmlElements[el]
);
}
isInitilised = true;
}
}
const childStyle = child =>
buildStyle({
"grid-column-start": child.gridColumnStart,
"grid-column-end": child.gridColumnEnd,
"grid-row-start": child.gridRowStart,
"grid-row-end": child.gridRowStart
});
</script>
<div class="root {containerClass}"
style="grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};">
{#each children as child, index}
<div class="{itemContainerClass}"
style={childStyle(child)}
bind:this={htmlElements[index]}>
</div>
{/each}
</div>
<style>
.root {
display: grid;
width: 100%;
height: 100%;
}
</style>

49
packages/standard-components/src/If.svelte
View file

@ -1,49 +0,0 @@
<script>
export let condition;
export let thenComponent;
export let elseComponent;
export let _bb;
let element;
let currentEvalResult=null;
let currentComponent;
let state;
_bb.store.subscribe(s => {
state = s;
})
$: {
if(_bb && element && state) {
let result;
try {
let $store = state;
let $context = _bb.context;
result = !!(Function(`"use strict";return (function($store, $context) { return (${condition}); });`)()($store, $context));
} catch(e) {
console.log("If condition eval error: " + e.message)
}
if(result !== currentEvalResult) {
currentEvalResult = result;
if(currentComponent) {
currentComponent.$destroy();
}
if(result) {
currentComponent = _bb.hydrateChildren(
_bb.props.thenComponent,element);
} else if(elseComponent && elseComponent._component) {
currentComponent = _bb.hydrateChildren(
_bb.props.elseComponent,element);
}
}
}
}
</script>
<div bind:this={element}></div>

22
packages/standard-components/src/Input.svelte
View file

@ -1,7 +1,7 @@
<script>
export let value="";
export let className = "default";
export let className = "";
export let type = "text";
export let _bb;
@ -20,23 +20,3 @@ const onchange = (ev) => {
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>

2
packages/standard-components/src/Login.svelte
View file

@ -1,7 +1,5 @@
<script>
import Textbox from "./Textbox.svelte";
import Form from "./Form.svelte";
import Button from "./Button.svelte";
export let usernameLabel = "Username";

17
packages/standard-components/src/Nav.svelte
View file

@ -9,10 +9,10 @@ export let selectedItemColor="";
export let selectedItemBorder="";
export let itemHoverBackground="";
export let itemHoverColor="";
export let items = [];
export let hideNavBar=false;
export let selectedItem="";
export let _children;
export let _bb;
let selectedIndex = -1;
@ -32,14 +32,14 @@ $: {
itemHoverBackground, itemHoverColor
};
if(items && items.length > 0 && hasComponentElements()) {
if(_children && _children.length > 0 && hasComponentElements()) {
const currentSelectedItem = selectedIndex > 0
? items[selectedIndex].title
? _children[selectedIndex].title
: "";
if(selectedItem && currentSelectedItem !== selectedItem) {
let i=0;
for(let item of items) {
if(item.title === selectedItem) {
for(let child of _children) {
if(child.title === selectedItem) {
onSelectItem(i)();
}
i++;
@ -54,7 +54,7 @@ const onSelectItem = (index) => () => {
selectedIndex = index;
if(!components[index]) {
const comp = _bb.hydrateChildren(
_bb.props.items[index].children, componentElements[index]);
_children[index].children, componentElements[index]);
components[index] = comp;
}
}
@ -65,7 +65,7 @@ const onSelectItem = (index) => () => {
<div class="root" use:cssVars={styleVars}>
{#if !hideNavBar}
<div class="navbar">
{#each items as navItem, index}
{#each _children as navItem, index}
<div class="navitem"
on:click={onSelectItem(index)}
class:selected={selectedIndex === index}>
@ -74,8 +74,7 @@ const onSelectItem = (index) => () => {
{/each}
</div>
{/if}
{#each items as navItem, index}
{#each _children as navItem, index}
<div class="content"
bind:this={componentElements[index]}>
</div>

74
packages/standard-components/src/Panel.svelte
View file

@ -1,74 +0,0 @@
<script>
import {buildStyle} from "./buildStyle";
import cssVars from "./cssVars";
export let children="";
export let text="";
export let containerClass="";
export let background="";
export let border="";
export let borderRadius="";
export let font="";
export let display="";
export let textAlign="";
export let color="";
export let padding="";
export let margin="";
export let hoverBackground="";
export let hoverColor="";
export let onClick;
export let height;
export let width;
export let _bb;
let styleVars;
let style="";
let componentElement;
let componentInitialised=false;
$: {
style=buildStyle({
border, background, font, margin,
padding, display, color, height, width,
"text-align": textAlign,
"border-radius":borderRadius,
cursor: onClick ? "pointer" : "none"
});
if(_bb && children && children.length > 0 && componentElement && !componentInitialised) {
_bb.hydrateChildren(_bb.props.children, componentElement);
componentInitialised = true;
}
styleVars = {
hoverBackground:hoverBackground || background,
hoverColor:hoverColor || color
}
}
const clickHandler = () => {
if(onClick) {
_bb.call(onClick);
}
}
</script>
<div class="{containerClass} panel"
style={style}
use:cssVars={styleVars}
bind:this={componentElement}
on:click={clickHandler}>
{children && children.length === 0 ? "" : text}
</div>
<style>
.panel:hover {
background: var(--hoverBackground);
color: var(--hoverColor);
}
</style>

22
packages/standard-components/src/Select.svelte
View file

@ -1,7 +1,7 @@
<script>
export let value="";
export let className = "default";
export let className = "";
export let type = "text";
export let options = [];
@ -25,23 +25,3 @@ const onchange = (ev) => {
<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>

115
packages/standard-components/src/StackPanel.svelte
View file

@ -1,115 +0,0 @@
<script>
import { emptyProps } from "./emptyProps";
export let direction = "horizontal";
export let children = [];
export let width = "auto";
export let height = "auto";
export let containerClass="";
export let itemContainerClass="";
export let onLoad;
export let data=[];
export let dataItemComponent;
export let _bb;
let staticHtmlElements = {};
let staticComponents = {};
let dataBoundElements = {};
let dataBoundComponents = {};
let onLoadCalled = false;
const hasDataBoundComponents = () =>
Object.getOwnPropertyNames(dataBoundComponents).length > 0;
const hasData = () =>
Array.isArray(data) && data.length > 0;
const hasStaticComponents = () => {
return Object.getOwnPropertyNames(staticComponents).length > 0;
}
$: {
if(staticHtmlElements) {
if(hasStaticComponents()) {
for(let c in staticComponents) {
staticComponents[c].$destroy();
}
staticComponents = {};
}
for(let el in staticHtmlElements) {
staticComponents[el] = _bb.hydrateChildren(
_bb.props.children[el].control,
staticHtmlElements[el]
);
}
}
if(hasDataBoundComponents()) {
for(let c in dataBoundComponents) {
dataBoundComponents[c].$destroy();
}
dataBoundComponents = {};
}
if(hasData()) {
let index = 0;
for(let d in dataBoundElements) {
_bb.hydrateChildren(
_bb.props.dataItemComponent,
dataBoundElements[d],
data[parseInt(d)]
);
}
}
if(!onLoadCalled && onLoad && !onLoad.isPlaceholder) {
_bb.call(onLoad);
onLoadCalled = true;
}
}
</script>
<div class="root {containerClass}"
style="width: {width}; height: {height}">
{#if children}
{#each children as child, index}
<div class={direction}>
<div class="{itemContainerClass}"
bind:this={staticHtmlElements[index]}>
</div>
</div>
{/each}
{/if}
{#if data && data.length > 0}
{#each data as child, index}
<div class={direction}>
<div class="{itemContainerClass}"
bind:this={dataBoundElements[index]}>
</div>
</div>
{/each}
{/if}
</div>
<style>
.horizontal {
display:inline-block;
}
.vertical {
display: block;
}
</style>

4
packages/standard-components/src/Test/TestApp.svelte
View file

@ -7,13 +7,13 @@ let _bb;
const _appPromise = createApp();
_appPromise.then(a => _bb = a);
const testProps = props.table;
const testProps = props.divWithAFewControls;
let currentComponent;
$: {
if(_bb && currentComponent) {
_bb.hydrateChildren(testProps, currentComponent);
_bb.hydrateChildren(testProps._children, currentComponent);
}
}

18
packages/standard-components/src/Test/createApp.js
View file

@ -1,12 +1,10 @@
import { writable } from "svelte/store";
import Login from "../Login.svelte";
import Grid from "../Grid.svelte";
import Form from "../Form.svelte";
import Textbox from "../Textbox.svelte";
import Input from "../Input.svelte";
import Text from "../Text.svelte";
import Nav from "../Nav.svelte";
import Panel from "../Panel.svelte";
import StackPanel from "../StackPanel.svelte";
import H1 from "../H1.svelte";
import Div from "../Div.svelte";
import Table from "../Table.svelte";
import Button from "../Button.svelte";
import { createApp } from "@budibase/client/src/createApp";
@ -16,15 +14,13 @@ export default async () => {
const componentLibraries = {
components : {
login : Login,
grid : Grid,
form : Form,
textbox : Textbox,
input : Input,
text: Text,
nav: Nav,
panel: Panel,
table: Table,
stackpanel: StackPanel,
button: Button
button: Button,
div: Div,
h1: H1
}
}

102
packages/standard-components/src/Test/props.js
View file

@ -1,6 +1,37 @@
export const props = {
divWithAFewControls : {
_component:"components/div",
_children: [
{
_component:"components/h1",
text: "This is an <h1> component"
},
{
_component:"components/text",
value: "Label for field"
},
{
_component:"components/input",
type:"text"
},
{
_component:"components/button",
_children: [
{
_component:"components/text",
value:"☢"
},
{
_component:"components/text",
value:"Click Me"
},
]
}
]
},
login: { _component:"components/login" },
form: {
@ -109,77 +140,6 @@ export const props = {
},
grid: {
_component: "components/grid",
gridTemplateColumns: "[left] auto [center] auto [right] auto",
gridTemplateRows: "[top] auto [middle] auto [bottom] auto",
children : [
{
control: {
_component: "components/text",
value: "1",
background: "blue",
textAlign:"center",
color: "white"
},
gridColumn: "left",
gridRow: "top"
},
{
control: {
_component: "components/text",
value: "2",
background: "red",
textAlign:"center",
color: "white",
padding: "10px"
},
gridColumn: "center",
gridRow: "middle"
},
{
control: {
_component: "components/text",
value: "3",
background: "yellow",
textAlign:"center",
color: "black"
},
gridColumn: "right",
gridRow: "bottom"
}
]
},
boundStackPanel: {
_component: "components/stackpanel",
direction: "horizontal",
children: [
{
control: {
_component: "components/text",
value: "STATIC"
}
}
],
data: {
"##bbstate":"people"
},
dataItemComponent: {
_component: "components/panel",
text: {
"##bbstate":"name",
"##bbsource":"context",
"##bbstatefallback": "balls to that"
},
padding: "10px",
border: "5px solid black",
margin: "10px",
hoverColor: "white",
hoverBackground: "black",
height:"200px",
weight:"200px"
}
},
hiddenNav: {
_component: "components/stackpanel",
children: [

1
packages/standard-components/src/Text.svelte
View file

@ -8,7 +8,6 @@ export let font="";
export let textAlign="";
export let verticalAlign=""
export let color="";
export let display="";
export let _bb;

48
packages/standard-components/src/Textbox.svelte
View file

@ -1,48 +0,0 @@
<script>
export let value="";
export let hideValue = false;
export let className = "default";
export let _bb;
let actualValue = "";
const onchange = (ev) => {
if(_bb) {
_bb.setStateFromBinding(_bb.props.value, ev.target.value);
}
}
</script>
{#if hideValue}
<input class={className}
type="password"
value={value}
on:change={onchange}/>
{:else}
<input class={className}
type="text"
value={value}
on:change={onchange}/>
{/if}
<style>
.default {
width: 100%;
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
width: 100%;
}
.default:disabled {
color: #ccc;
}
</style>

22
packages/standard-components/src/button.svelte
View file

@ -4,7 +4,6 @@ import {buildStyle} from "./buildStyle";
export let className = "default";
export let disabled = false;
export let contentText;
export let contentComponent;
export let onClick;
export let background;
export let color;
@ -13,9 +12,10 @@ export let padding;
export let hoverColor;
export let hoverBackground;
export let hoverBorder;
export let _children;
export let _bb;
let contentComponentContainer;
let theButton;
let cssVariables;
let buttonStyles;
@ -34,12 +34,13 @@ const createClasses = (classes) => {
}
return all;
}
$:{
if(_bb && contentComponentContainer && contentComponent._component)
_bb.hydrateChildren(_bb.props.contentComponent, contentComponentContainer);
if(_bb && theButton && _children && _children.length)
_bb.hydrateChildren(_children, theButton);
}
$:{
cssVariables = {
hoverColor, hoverBorder,
hoverBackground,
@ -54,7 +55,6 @@ $:{
hoverColor, hoverBorder, hoverBackground,
background, border, color
});
}
@ -67,18 +67,14 @@ const clickHandler = () => {
</script>
<button use:cssVars={cssVariables}
<button bind:this={theButton}
use:cssVars={cssVariables}
class="{className} {customClasses}"
disabled={disabled || false}
on:click={clickHandler}
style={buttonStyles}>
{#if contentComponent && contentComponent._component}
<div bind:this={contentComponentContainer}>
</div>
{:else if contentText}
{#if !_children || _children.length === 0}
{contentText}
{:else}
<slot />
{/if}
</button>