Spaces:
Running
Running
File size: 1,886 Bytes
b7a4f8b a0c4974 b7a4f8b cd932aa db436f7 a0c4974 cd932aa db436f7 a0c4974 db436f7 a0c4974 cd932aa a0c4974 cd932aa aa0792f cd932aa a0c4974 cd932aa a0c4974 cd932aa a0c4974 cd932aa b7a4f8b cd932aa b7a4f8b 52ec402 cd932aa 1a96959 cd932aa dc3ebef cd932aa 52ec402 cd932aa 52ec402 b7a4f8b |
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>
|