CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 01:28:51 +13:00
Code Issues Projects Releases Wiki Activity

Merge branch 'data-form'

Browse source
This commit is contained in:
Michael Shanks 2020-06-03 23:14:12 +01:00
commit db1242ce9e
2 changed files with 91 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/standard-components/src/Button.svelte
View file

@ -17,7 +17,7 @@
<button <button
bind:this={theButton} bind:this={theButton}
class={className} class="default"
disabled={disabled || false} disabled={disabled || false}
on:click={clickHandler}> on:click={clickHandler}>
{#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if} {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
@ -25,23 +25,21 @@
<style> <style>
.default { .default {
font-family: inherit; align-items: center;
font-size: inherit; font-family: Inter;
padding: 0.4em; font-size: 16px;
margin: 0 0 0.5em 0; padding: 0px 16px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #ccc; border-radius: 4px;
border-radius: 2px;
color: #000333;
outline: none; outline: none;
} height: 40px;
cursor: pointer;
.default:active { transition: all 0.2s ease 0s;
background-color: #f9f9f9; overflow: hidden;
} outline: none;
user-select: none;
.default:focus { white-space: nowrap;
border-color: #666; text-align: center;
} }
.border { .border {

83
packages/standard-components/src/DataForm.svelte
View file

@ -58,24 +58,95 @@
} }
</script> </script>
<form class="uk-form" on:submit|preventDefault> <form class="form" on:submit|preventDefault>
<h4>{modelDef.name}</h4> <div class="form-content">
<div>
{#each fields as field} {#each fields as field}
<div class="uk-margin"> <div class="form-item">
<label class="form-label" for="form-stacked-text">{field}</label> <label class="form-label" for="form-stacked-text">{field}</label>
<input <input
class="uk-input" class="input"
placeholder={field}
type={schema[field].type === 'string' ? 'text' : schema[field].type} type={schema[field].type === 'string' ? 'text' : schema[field].type}
on:change={handleInput(field)} /> on:change={handleInput(field)} />
</div> </div>
<hr />
{/each} {/each}
<div class="button-block">
<button on:click={save}>Submit Form</button>
</div>
</div> </div>
<button on:click={save}>SAVE</button>
</form> </form>
<style> <style>
.form {
align-items: center;
width: 100%;
}
.form-content {
margin-bottom: 20px;
justify-content: space-between;
align-items: baseline;
}
.input {
width: 600px;
height: 40px;
border-radius: 5px;
border: 1px solid #e6e6e6;
padding: 6px 12px 6px 12px;
font-size: 16px;
}
.form-item {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.form-label { .form-label {
font-weight: bold; font-weight: bold;
margin-bottom: 8px;
}
hr {
border: 1px solid #fafafa;
margin: 20px 0px;
}
hr:nth-last-child(2) {
border: 1px solid #fff;
margin: 20px 0px;
}
.button-block {
display: flex;
justify-content: flex-end;
}
button {
font-family: Inter;
font-size: 16px;
padding: 0.4em;
box-sizing: border-box;
border-radius: 4px;
color: white;
background-color: #393c44;
outline: none;
width: 300px;
height: 40px;
cursor: pointer;
transition: all 0.2s ease 0s;
overflow: hidden;
outline: none;
user-select: none;
white-space: nowrap;
text-align: center;
}
button:hover {
background-color: white;
border-color: #393c44;
color: #393c44;
} }
</style> </style>