How to pass scope for Search from another file?

[ghost]

Hello, my application is divided into Components and Pages folders. Components folder contains files that are reusable. In this case, I use it to create Filter, Search, RowCount, etc from your example. One thing that I haven't been able to do is to use scope in SearchComponent where I define the scope from Pages.

For example, this is what I was trying to do:

SearchComponent:

<script>
    export let handler;
    export let scope;

    let value = '';
</script>

<input type="search" class="form-control search-input" bind:value on:input={() => handler.search(value, {scope})} placeholder="Search..." aria-label="Search">

ProductsPage:

<TableSearch {handler} scope="['system', 'brands']" />

But it doesn't work. Another thing that I've tried was:

SearchComponent:

<script>
    export let handler;
    export let scope;

    let value = '';
</script>

<input type="search" class="form-control search-input" bind:value on:input={() => handler.search(value, [{scope}])} placeholder="Search..." aria-label="Search">

ProductsPage:

<TableSearch {handler} scope="'system', 'brands'" />

But it doesn't work either.

If I hard coded it into SearchComponent, then it will work. But the thing is, I wanted to make the scope dynamic so it can work for different kind of Pages. How do I do that? Thank you.

[vincjo]

Hello, You can pass an array directly. scope variable is an array of string.

Something like:

<TableSearch {handler} scope={[ 'column1', 'column2' ]}/>

in TableSearch.svelte :

<script>
    export let handler;
    export let scope = null

    let value = '';
</script>

<input 
    type="search" 
    bind:value on:input={() => handler.search(value, scope)  
    placeholder="Search..."  
    aria-label="Search"
/>

[ghost]

@vincjo Nice! Thank you so much.