110 lines
3.1 KiB
Svelte
110 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { ResourceService, VariableService } from '$lib/gen'
|
|
import { workspaceStore } from '$lib/stores'
|
|
import { copyToClipboard, truncate } from '$lib/utils'
|
|
import { ClipboardCopy, Expand } from 'lucide-svelte'
|
|
import Drawer from './common/drawer/Drawer.svelte'
|
|
import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
|
|
import Tooltip from './Tooltip.svelte'
|
|
import { Button, DrawerContent } from './common'
|
|
|
|
interface Props {
|
|
value: any
|
|
}
|
|
|
|
let { value }: Props = $props()
|
|
let jsonViewer: Drawer | undefined = $state()
|
|
let jsonViewerContent: any | undefined = $state()
|
|
|
|
function isString(value: any) {
|
|
return typeof value === 'string' || value instanceof String
|
|
}
|
|
|
|
async function getResource(path: string) {
|
|
jsonViewerContent = await ResourceService.getResourceValue({
|
|
workspace: $workspaceStore!,
|
|
path
|
|
})
|
|
}
|
|
|
|
async function getVariable(path: string) {
|
|
jsonViewerContent = await VariableService.getVariableValue({
|
|
workspace: $workspaceStore!,
|
|
path
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<Drawer bind:this={jsonViewer} size="800px">
|
|
<DrawerContent title="Argument Details" on:close={jsonViewer.closeDrawer}>
|
|
{#snippet actions()}
|
|
<Button
|
|
on:click={() => copyToClipboard(JSON.stringify(jsonViewerContent, null, 4))}
|
|
variant="subtle"
|
|
unifiedSize="md"
|
|
startIcon={{ icon: ClipboardCopy }}
|
|
>
|
|
Copy
|
|
</Button>
|
|
{/snippet}
|
|
{#if isString(jsonViewerContent)}
|
|
<pre class="text-xs whitespace-pre-wrap">{jsonViewerContent}</pre>
|
|
{:else}
|
|
<ObjectViewer pureViewer json={jsonViewerContent} />
|
|
{/if}
|
|
</DrawerContent>
|
|
</Drawer>
|
|
|
|
{#if value == undefined || value == null}
|
|
<span class="text-primary">null</span>
|
|
{:else if value === '<function call>'}
|
|
{'<function call>'}<Tooltip
|
|
>The arg was none and the default argument of the script is a function call, hence the actual
|
|
value used for this arg was the output of the script's function call for this arg</Tooltip
|
|
>
|
|
{:else if isString(value) && value.startsWith('$res:')}
|
|
<button
|
|
class="text-xs text-accent"
|
|
onclick={async () => {
|
|
await getResource(value.substring('$res:'.length))
|
|
jsonViewer?.toggleDrawer()
|
|
}}>{value}</button
|
|
>
|
|
{:else if isString(value) && value.startsWith('$var:')}
|
|
<button
|
|
class="text-xs text-accent"
|
|
onclick={async () => {
|
|
await getVariable(value.substring('$res:'.length))
|
|
jsonViewer?.toggleDrawer()
|
|
}}>{value}</button
|
|
>
|
|
{:else if typeof value !== 'object'}
|
|
<span>
|
|
{truncate(JSON.stringify(value), 80)}
|
|
{#if JSON.stringify(value).length > 80}
|
|
<button
|
|
class="text-xs text-accent"
|
|
onclick={() => {
|
|
jsonViewerContent = value
|
|
jsonViewer?.toggleDrawer()
|
|
}}>See expanded</button
|
|
>
|
|
{/if}
|
|
</span>
|
|
{:else}
|
|
<div class="relative">
|
|
{#if JSON.stringify(value).length > 120}
|
|
<button
|
|
class="text-xs absolute top-0 right-8 text-primary"
|
|
onclick={() => {
|
|
jsonViewerContent = value
|
|
jsonViewer?.toggleDrawer()
|
|
}}><Expand size={18} /></button
|
|
>
|
|
{/if}
|
|
<div class="max-h-60 overflow-auto" style="scrollbar-gutter: stable">
|
|
<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
|
|
</div>
|
|
</div>
|
|
{/if}
|