File size: 1,952 Bytes
0bd62e5 |
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<script>
/**
* @type {{type: string; label: string; component:string}[]}
*/
export let app_info;
/**
* @type any[]
*/
export let request_data = [];
/**
*
* @param files {FileList|null}
* @param i {number}
*/
function handle_file(files, i) {
if (!files) return;
const _files = Array.from(files);
request_data[i] = files.length === 1 ? _files[0] : _files;
}
</script>
<h3>Request Inputs</h3>
{#each app_info as { type, label, component }, i}
{#if type === "string"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="text" bind:value={request_data[i]} />
</label>
{:else if type === "number"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="number" bind:value={request_data[i]} />
</label>
{:else if type === "boolean"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="checkbox" bind:value={request_data[i]} />
</label>
{:else if type === "number"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="number" bind:value={request_data[i]} />
</label>
{:else if type === "string[]"}
<label for="">
<span>{label} <code>{type} - comma separated list</code></span>
<input
type="text"
value={request_data[i]}
on:input={(e) =>
(request_data[i] = e.currentTarget.value
.split(",")
.map((v) => v.trim()))}
/>
</label>
{:else if ["Image", "Audio", "Video"].includes(component)}
<label for="">
<span>{label} <code>File</code></span>
<input
type="file"
on:input={(e) => handle_file(e.currentTarget.files, i)}
/>
</label>
{/if}
{/each}
<style>
label {
display: flex;
flex-direction: column;
gap: var(--size-1);
width: 100%;
}
input {
outline: none;
border-radius: 2px;
}
input:focus-visible {
border-color: var(--color-accent);
}
</style>
|