mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-22 01:40:29 +00:00
examples: add SvelteKit example (#5181)
This commit is contained in:
parent
469490cf8f
commit
30725ced4d
19 changed files with 383 additions and 713 deletions
13
examples/svelte-example/src/app.d.ts
vendored
Normal file
13
examples/svelte-example/src/app.d.ts
vendored
Normal 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 {}
|
||||
11
examples/svelte-example/src/app.html
Normal file
11
examples/svelte-example/src/app.html
Normal 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>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
})
|
||||
|
||||
export default app
|
||||
6
examples/svelte-example/src/routes/+layout.ts
Normal file
6
examples/svelte-example/src/routes/+layout.ts
Normal 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
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue