Spaces:
Running
Running
File size: 1,886 Bytes
801415b 28b9de2 801415b 69ec235 35abaee 28b9de2 69ec235 35abaee 28b9de2 35abaee 28b9de2 69ec235 28b9de2 69ec235 abb1488 69ec235 28b9de2 69ec235 28b9de2 69ec235 28b9de2 69ec235 801415b 69ec235 801415b 3833905 69ec235 4b3d936 69ec235 4ab53a5 69ec235 3833905 69ec235 3833905 801415b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<script lang="ts">
export let name: string;
export let value;
export let meta;
export let onChange;
const BOOLEAN = "<class 'bool'>";
</script>
<label class="param">
{#if meta?.type?.format === 'collapsed'}
<span class="param-name">{name.replace(/_/g, ' ')}</span>
<button class="collapsed-param form-control form-control-sm">
⋯
</button>
{:else if meta?.type?.format === 'textarea'}
<span class="param-name">{name.replace(/_/g, ' ')}</span>
<textarea class="form-control form-control-sm"
rows="6"
value={value}
on:change={(evt) => onChange(evt.currentTarget.value)}
/>
{:else if meta?.type?.enum}
<span class="param-name">{name.replace(/_/g, ' ')}</span>
<select class="form-select form-select-sm"
value={value || meta.type.enum[0]}
on:change={(evt) => onChange(evt.currentTarget.value)}
>
{#each meta.type.enum as option}
<option value={option}>{option}</option>
{/each}
</select>
{:else if meta?.type?.type === BOOLEAN}
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"
checked={value}
on:change={(evt) => onChange(evt.currentTarget.checked)}
/>
{name.replace(/_/g, ' ')}
</label>
{:else}
<span class="param-name">{name.replace(/_/g, ' ')}</span>
<input class="form-control form-control-sm"
value={value}
on:change={(evt) => onChange(evt.currentTarget.value)}
/>
{/if}
</label>
<style>
.param {
padding: 4px 8px 4px 8px;
display: block;
}
.param-name {
display: block;
font-size: 10px;
letter-spacing: 0.05em;
margin-left: 10px;
background: var(--bs-border-color);
width: fit-content;
padding: 2px 8px;
border-radius: 4px 4px 0 0;
}
.collapsed-param {
min-height: 20px;
line-height: 10px;
}
</style>
|