forked from tsai/budibase
Michael Shanks
7 years ago
22 changed files with 1480 additions and 3906 deletions
@ -1,13 +1,8 @@ |
|||||
#current_component.svelte-1xqz9vm{height:100%;width:100%} |
#current_component.svelte-uuhis1{height:100%;width:100%} |
||||
.root.svelte-10kw8to{display:grid} |
|
||||
.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 |
.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} |
}.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} |
.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} |
.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)} |
||||
.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)} |
|
||||
.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} |
.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 */ |
/*# sourceMappingURL=bundle.css.map */ |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,107 +1,19 @@ |
|||||
<script> |
<script> |
||||
|
|
||||
export let children = []; |
export let _children = []; |
||||
export let className=""; |
export let className=""; |
||||
export let data=[]; |
|
||||
export let dataItemComponent; |
|
||||
export let onLoad; |
export let onLoad; |
||||
|
|
||||
export let _bb; |
export let _bb; |
||||
|
|
||||
let rootDiv; |
let rootDiv; |
||||
let staticComponentsApplied=false; |
$:{ |
||||
let dataBoundComponents = []; |
if(_bb && rootDiv && _children && _children.length) |
||||
let previousData; |
_bb.hydrateChildren(_children, theButton); |
||||
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; |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<div class="{className}" bind:this={rootDiv}> |
<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> |
</div> |
||||
|
|
||||
|
|||||
@ -1,59 +0,0 @@ |
|||||
<script> |
|
||||
export let containerClass = ""; |
|
||||
export let formControls = []; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let htmlElements = {}; |
|
||||
let labels = {}; |
|
||||
|
|
||||
$ : { |
|
||||
let cIndex = 0; |
|
||||
for(let c of formControls) { |
|
||||
labels[cIndex] = c.label; |
|
||||
cIndex++; |
|
||||
} |
|
||||
|
|
||||
if(_bb && htmlElements) { |
|
||||
for(let el in htmlElements) { |
|
||||
_bb.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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -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> |
|
||||
@ -1,48 +0,0 @@ |
|||||
<script> |
|
||||
|
|
||||
export let value=""; |
|
||||
export let hideValue = false; |
|
||||
export let className = "default"; |
|
||||
|
|
||||
export let _bb; |
|
||||
|
|
||||
let actualValue = ""; |
|
||||
|
|
||||
const onchange = (ev) => { |
|
||||
if(_bb) { |
|
||||
_bb.setStateFromBinding(_bb.props.value, ev.target.value); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
{#if hideValue} |
|
||||
<input class={className} |
|
||||
type="password" |
|
||||
value={value} |
|
||||
on:change={onchange}/> |
|
||||
{:else} |
|
||||
<input class={className} |
|
||||
type="text" |
|
||||
value={value} |
|
||||
on:change={onchange}/> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.default { |
|
||||
width: 100%; |
|
||||
font-family: inherit; |
|
||||
font-size: inherit; |
|
||||
padding: 0.4em; |
|
||||
margin: 0 0 0.5em 0; |
|
||||
box-sizing: border-box; |
|
||||
border: 1px solid #ccc; |
|
||||
border-radius: 2px; |
|
||||
width: 100%; |
|
||||
} |
|
||||
|
|
||||
.default:disabled { |
|
||||
color: #ccc; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue