Formatting and linting done
This commit is contained in:
parent
5f7186106e
commit
290b1cce14
|
@ -458,4 +458,4 @@ export default {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
const TYPE_MAP = {
|
const TYPE_MAP = {
|
||||||
string: "text",
|
string: "text",
|
||||||
boolean: "checkbox",
|
boolean: "checkbox",
|
||||||
number: "number"
|
number: "number",
|
||||||
}
|
}
|
||||||
|
|
||||||
let username
|
let username
|
||||||
|
@ -70,10 +70,10 @@
|
||||||
{#each fields as field}
|
{#each fields as field}
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="form-label" for="form-stacked-text">{field}</label>
|
<label class="form-label" for="form-stacked-text">{field}</label>
|
||||||
{#if schema[field].type === "string" && schema[field].constraints.inclusion}
|
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
|
||||||
<select on:blur={handleInput(field)}>
|
<select on:blur={handleInput(field)}>
|
||||||
{#each schema[field].constraints.inclusion as opt}
|
{#each schema[field].constraints.inclusion as opt}
|
||||||
<option>{opt}</option>
|
<option>{opt}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -156,45 +156,43 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
button:hover {
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
vertical-align: bottom;
|
|
||||||
position: relative;
|
|
||||||
top: -1px;
|
|
||||||
*overflow: hidden;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
select::-ms-expand {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
select {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
align-items: baseline;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 1em 1em;
|
|
||||||
border: 1px solid #eaeaea;
|
|
||||||
border-radius: 5px;
|
|
||||||
font: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
|
|
||||||
background-position: right 17px top 1.5em, right 10px top 1.5em;
|
|
||||||
background-size: 7px 7px, 7px 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: bottom;
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
*overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
select::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
align-items: baseline;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1em 1em;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
border-radius: 5px;
|
||||||
|
font: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
|
||||||
|
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
||||||
|
background-position: right 17px top 1.5em, right 10px top 1.5em;
|
||||||
|
background-size: 7px 7px, 7px 7px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
const TYPE_MAP = {
|
const TYPE_MAP = {
|
||||||
string: "text",
|
string: "text",
|
||||||
boolean: "checkbox",
|
boolean: "checkbox",
|
||||||
number: "number"
|
number: "number",
|
||||||
}
|
}
|
||||||
|
|
||||||
let username
|
let username
|
||||||
|
@ -52,6 +52,7 @@
|
||||||
newModel[field] = value
|
newModel[field] = value
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form class="form" on:submit|preventDefault>
|
<form class="form" on:submit|preventDefault>
|
||||||
<h1>{modelDef.name} Form</h1>
|
<h1>{modelDef.name} Form</h1>
|
||||||
<hr />
|
<hr />
|
||||||
|
@ -59,10 +60,10 @@
|
||||||
{#each fields as field}
|
{#each fields as field}
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<label class="form-label" for="form-stacked-text">{field}</label>
|
<label class="form-label" for="form-stacked-text">{field}</label>
|
||||||
{#if schema[field].type === "string" && schema[field].constraints.inclusion}
|
{#if schema[field].type === 'string' && schema[field].constraints.inclusion}
|
||||||
<select on:blur={handleInput(field)}>
|
<select on:blur={handleInput(field)}>
|
||||||
{#each schema[field].constraints.inclusion as opt}
|
{#each schema[field].constraints.inclusion as opt}
|
||||||
<option>{opt}</option>
|
<option>{opt}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -79,6 +80,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.form {
|
.form {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -135,37 +137,37 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||||
}
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type="checkbox"] {
|
||||||
transform: scale(2);
|
transform: scale(2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
select::-ms-expand {
|
select::-ms-expand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 1em 1em;
|
padding: 1em 1em;
|
||||||
border: 1px solid #eaeaea;
|
border: 1px solid #eaeaea;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
-ms-appearance: none;
|
-ms-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
|
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
|
||||||
background-position: right 17px top 1.5em, right 10px top 1.5em;
|
linear-gradient(135deg, currentColor 50%, transparent 50%);
|
||||||
background-size: 7px 7px, 7px 7px;
|
background-position: right 17px top 1.5em, right 10px top 1.5em;
|
||||||
}
|
background-size: 7px 7px, 7px 7px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
Loading…
Reference in New Issue