54 lines
1.6 KiB
Svelte
54 lines
1.6 KiB
Svelte
<script>
|
|
// import { listen } from '@tauri-apps/api/event';
|
|
import { open } from '@tauri-apps/plugin-dialog';
|
|
import { sep } from '@tauri-apps/api/path';
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
import Icon from './Icon.svelte';
|
|
|
|
|
|
export let value = {};
|
|
export let params = {};
|
|
let displayValue = value?.name || '';
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
async function chooseFile() {
|
|
let file = await open(params);
|
|
if (file) {
|
|
value = file;
|
|
displayValue = file.name;
|
|
dispatch('update', value);
|
|
}
|
|
}
|
|
|
|
function handleInput(evt) {
|
|
const segments = evt.target.value.split(sep());
|
|
const name = segments[segments.length - 1];
|
|
value = {name, path: evt.target.value};
|
|
}
|
|
|
|
// some day, figure out drag-and-drop
|
|
// let drag = null;
|
|
// listen('tauri://drag', e => drag = e);
|
|
// listen('tauri://drop', e => console.log(e));
|
|
// listen('tauri://drag-cancelled', e => console.log(e));
|
|
// listen('tauri://drop-over', e => console.log(e));
|
|
|
|
</script>
|
|
|
|
|
|
<div class="relative flex join has-[:focus]:outline outline-2 outline-offset-2 outline-base-content/20">
|
|
<button type="button" class="btn btn-neutral join-item" on:click={chooseFile}>
|
|
Choose file
|
|
</button>
|
|
<input
|
|
type="text"
|
|
class="join-item grow input input-bordered border-l-0 bg-transparent focus:outline-none"
|
|
value={displayValue}
|
|
on:input={handleInput}
|
|
on:change={() => dispatch('update', value)}
|
|
on:focus on:blur
|
|
>
|
|
</div>
|