83 lines
No EOL
2 KiB
Svelte
83 lines
No EOL
2 KiB
Svelte
<script lang="ts">
|
|
let { handler = () => {}, type = "button", files = $bindable() } = $props();
|
|
|
|
let file_list = $state();
|
|
|
|
$effect(() => {
|
|
// FileList -> Array[File]
|
|
if (file_list) {
|
|
let f_list: Array<File> = [];
|
|
for (let file of file_list)
|
|
f_list.push(file);
|
|
files = f_list;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if type == "button"}
|
|
<button class="plus round" style="height: 32px;" onclick={handler}>+</button>
|
|
{:else if type == "image"}
|
|
<label class="plus round" style="height: 48px; display: inline-block;">+
|
|
<input accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/>
|
|
</label>
|
|
{:else}
|
|
<label class="file-plus rounded">Загрузить файл
|
|
<input style="display: none" bind:files={file_list} multiple type="file"/>
|
|
</label>
|
|
{/if}
|
|
|
|
<style>
|
|
/* Кнопка "плюс" */
|
|
.plus {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: x-large;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.file-plus {
|
|
font-size: larger;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
align-content: center;
|
|
width: 100%;
|
|
height: 3rem;
|
|
border: 0.15rem dashed;
|
|
display: block;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.plus {
|
|
background-color: #5C8DC0;
|
|
color: white;
|
|
}
|
|
|
|
.file-plus {
|
|
background: none;
|
|
border-color: #5C8DC0;
|
|
color: #5C8DC0;
|
|
}
|
|
|
|
.plus:hover {
|
|
background-color: #567aa1;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.plus {
|
|
background-color: #2791FF;
|
|
color: white;
|
|
}
|
|
|
|
.file-plus {
|
|
background: none;
|
|
border-color: #2791FF;
|
|
color: #2791FF;
|
|
}
|
|
|
|
.plus:hover {
|
|
background-color: #2c7dd4;
|
|
}
|
|
}
|
|
</style> |