8166330fc5
* all * all * all * all * fix * remove vite config * remove uncessary app.css * all * all * all * all * all
70 lines
1.9 KiB
Svelte
70 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
|
|
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
|
|
|
|
import { copyToClipboard } from '$lib/utils'
|
|
|
|
import { Highlight } from 'svelte-highlight'
|
|
import json from 'svelte-highlight/languages/json'
|
|
import { Button } from '../../common'
|
|
import type { App } from '../types'
|
|
import { Clipboard } from 'lucide-svelte'
|
|
import { yaml } from 'svelte-highlight/languages'
|
|
import YAML from 'yaml'
|
|
import Tabs from '$lib/components/common/tabs/Tabs.svelte'
|
|
import Tab from '$lib/components/common/tabs/Tab.svelte'
|
|
import HighlightTheme from '$lib/components/HighlightTheme.svelte'
|
|
|
|
let jsonViewerDrawer: Drawer
|
|
|
|
let app: App | undefined = undefined
|
|
|
|
let rawType: 'json' | 'yaml' = 'yaml'
|
|
|
|
export function open(app_l: App) {
|
|
app = app_l
|
|
jsonViewerDrawer?.toggleDrawer()
|
|
}
|
|
</script>
|
|
|
|
<HighlightTheme />
|
|
|
|
<Drawer bind:this={jsonViewerDrawer} size="800px">
|
|
<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
|
|
<div>
|
|
<Tabs bind:selected={rawType}>
|
|
<Tab value="yaml">YAML</Tab>
|
|
<Tab value="json">JSON</Tab>
|
|
<svelte:fragment slot="content">
|
|
<div class="relative pt-2">
|
|
<Button
|
|
on:click={() =>
|
|
copyToClipboard(
|
|
rawType === 'yaml'
|
|
? YAML.stringify(app ?? {})
|
|
: JSON.stringify(app ?? {}, null, 4)
|
|
)}
|
|
color="dark"
|
|
variant="border"
|
|
size="sm"
|
|
startIcon={{ icon: Clipboard }}
|
|
btnClasses="absolute top-2 right-2 w-min"
|
|
>
|
|
Copy content
|
|
</Button>
|
|
{#key rawType}
|
|
<Highlight
|
|
class="overflow-auto px-1 flex-1"
|
|
language={rawType === 'yaml' ? yaml : json}
|
|
code={rawType === 'yaml'
|
|
? YAML.stringify(app ?? {})
|
|
: JSON.stringify(app ?? {}, null, 4)}
|
|
/>
|
|
{/key}
|
|
</div>
|
|
</svelte:fragment>
|
|
</Tabs>
|
|
</div></DrawerContent
|
|
>
|
|
</Drawer>
|