examples: add SvelteKit example (#5181)

This commit is contained in:
Antoine du Hamel 2024-05-22 11:05:03 +03:00 committed by GitHub
parent 469490cf8f
commit 30725ced4d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 383 additions and 713 deletions

13
examples/svelte-example/src/app.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {}

View file

@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<app style="display: contents">%sveltekit.body%</app>
</body>
</html>

View file

@ -1,7 +0,0 @@
import App from './App.svelte'
const app = new App({
target: document.body,
})
export default app

View file

@ -0,0 +1,6 @@
import '@uppy/core/dist/style.min.css'
import '@uppy/dashboard/dist/style.min.css'
import '@uppy/drag-drop/dist/style.min.css'
import '@uppy/progress-bar/dist/style.min.css'
export const ssr = false

View file

@ -14,7 +14,7 @@
}
let uppy1 = createUppy()
let uppy2 = createUppy()
let uppy2 = createUppy()
let open = false;
let showInlineDashboard = true;
@ -31,7 +31,7 @@
Show Dashboard
</label>
{#if showInlineDashboard}
<Dashboard
<Dashboard
uppy={uppy1}
plugins={['Webcam']}
/>
@ -39,23 +39,23 @@
<h2>Modal Dashboard</h2>
<div>
<button on:click={() => open = true}>Show Dashboard</button>
<DashboardModal
uppy={uppy2}
open={open}
<DashboardModal
uppy={uppy2}
open={open}
props={{
onRequestCloseModal: () => open = false,
plugins: ['Webcam']
}}
}}
/>
</div>
<h2>Drag Drop Area</h2>
<DragDrop
<DragDrop
uppy={uppy1}
/>
<h2>Progress Bar</h2>
<ProgressBar
<ProgressBar
uppy={uppy1}
props={{
hideAfterFinish: false
@ -63,10 +63,6 @@
/>
</main>
<style global>
@import "@uppy/core/dist/style.min.css";
@import "@uppy/dashboard/dist/style.min.css";
@import "@uppy/drag-drop/dist/style.min.css";
@import "@uppy/progress-bar/dist/style.min.css";
input[type="checkbox"] {
user-select: none;
}