<script>
    import { createEventDispatcher } from 'svelte';
    import { open } from '@tauri-apps/plugin-dialog';
    import Setting from './Setting.svelte';

    export let title;
    export let value;

    const dispatch = createEventDispatcher();

    async function pickFile() {
        let file = await open();
        if (file) {
            value = file.path
        }
    }
</script>


<Setting {title}>
    <div slot="input">
        <input
            type="text"
            class="input input-sm input-bordered grow text-right"
            bind:value
            on:change={() => dispatch('update', {value})}
        >
        <button
            type="button"
            class="btn btn-sm btn-primary"
            on:click={pickFile}
        >Browse</button>
    </div>
    <slot name="description" slot="description"></slot>
</Setting>
