File size: 2,062 Bytes
0ad74ed |
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 88 89 90 91 |
<script>
import Spinner from "./Spinner.svelte";
import Warning from "./Warning.svelte";
import Success from "./Success.svelte";
/**
* @type {{data: any[]}}
*/
export let response_data = { data: [] };
/**
* @type {{type: string; label: string; component:string}[]}
*/
export let app_info;
/**
* @type {"pending" | "error" | "complete" | "generating" | 'idle'}
*/
export let status = "idle";
</script>
<div>
<div class="heading-wrap">
<h3>Response Outputs</h3>
{#if status === "pending" || status === "generating"}
<Spinner />
{:else if status === "error"}
<Warning />
{:else if status === "complete"}
<Success />
{/if}
</div>
{#each app_info as { type, label, component }, i}
{#if type === "string"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="text" disabled value={response_data.data[i] || ""} />
</label>
{:else if type === "number"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="number" disabled value={response_data.data[i] || ""} />
</label>
{:else if type === "boolean"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="checkbox" disabled value={response_data.data[i] || ""} />
</label>
{:else if type === "number"}
<label for="">
<span>{label} <code>{type}</code></span>
<input type="number" disabled value={response_data.data[i] || ""} />
</label>
{:else if type === "string[]"}
<label for="">
<span>{label} <code>{type} - comma separated list</code></span>
<input type="text" disabled value={response_data.data[i] || ""} />
</label>
{/if}
{/each}
<h4>JSON</h4>
<pre><code
>{JSON.stringify(
response_data.data.length ? response_data : {},
null,
2
)}</code
></pre>
</div>
<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);
}
.heading-wrap {
display: flex;
}
</style>
|