forked from skeletonlabs/skeleton
-
Notifications
You must be signed in to change notification settings - Fork 0
/
+page.svelte
66 lines (59 loc) · 2.24 KB
/
+page.svelte
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
<script lang="ts">
import DocsShell from '$docs/DocsShell/DocsShell.svelte';
import { DocsFeature, type DocsShellSettings } from '$docs/DocsShell/types';
import FileDropzone from '$lib/components/FileDropzone/FileDropzone.svelte';
import CodeBlock from '$lib/utilities/CodeBlock/CodeBlock.svelte';
// @ts-expect-error sveld import
import sveldFileDropzone from '$lib/components/FileDropzone/FileDropzone.svelte?raw&sveld';
// Docs Shell
const settings: DocsShellSettings = {
feature: DocsFeature.Component,
name: 'File Dropzone',
description: 'Allow upload of files with drag and drop.',
imports: ['FileDropzone'],
source: 'components/FileDropzone',
components: [{ sveld: sveldFileDropzone }],
restProps: 'input'
};
// Local
let files: FileList;
function onChange(e: any): void {
console.log('file data:', e);
}
</script>
<DocsShell {settings}>
<!-- Slot: Sandbox -->
<svelte:fragment slot="sandbox">
<section class="space-y-2">
<div class="card card-body grid grid-cols-1 xl:grid-cols-2 gap-4">
<label for="">
<span>Upload File</span>
<FileDropzone bind:files notes="Files should not exceed 5mb." on:change={onChange} required />
</label>
<label for="">
<span>Custom Message</span>
<FileDropzone bind:files on:change={onChange}><p>(message)</p></FileDropzone>
</label>
</div>
<div class="text-center"><code>Monitor your browser's console when adding files.</code></div>
</section>
</svelte:fragment>
<!-- Slot: Usage -->
<svelte:fragment slot="usage">
<div class="space-y-4">
<p>Uses <code>input[type='file']</code> to allow for all native input accessibility.</p>
<CodeBlock language="ts" code={`let files: FileList;`} />
<CodeBlock language="html" code={`<FileDropzone bind:files />`} />
</div>
<div class="space-y-4">
<h3>Notes</h3>
<p>Use the <code>notes</code> property to provide additional text information on a second line.</p>
<CodeBlock language="html" code={`<FileDropzone notes="Files should not exceed 5mb." />`} />
</div>
<div class="space-y-4">
<h3>Message</h3>
<p>Use the default slot to replace the default UI entirely.</p>
<CodeBlock language="html" code={`<FileDropzone>(message)</FileDropzone>`} />
</div>
</svelte:fragment>
</DocsShell>