Various examples
This page gives you some examples what can be done and how.
Multiselect
Example how multiselect can be implemented.
<script>
const svg_checked = `<svg>...</svg>`;
const svg_empty = `<svg>...</svg>`;
function svgRenderer(opt, isSelected, _input) {
return `<div class="inlined">${opt.$selected ? svg_checked : svg_empty}<span>${opt.text}</span></div>`;
}
</script>
<Svelecte
multiple
renderer={svgRenderer}
collapseSelection="always"
clearable
keepSelectionInList={true}
searchProps={{skipSort: true}}
></Svelecte><script>
const svg_checked = `<svg>...</svg>`;
const svg_empty = `<svg>...</svg>`;
function svgRenderer(opt, isSelected, _input) {
return `<div class="inlined">${opt.$selected ? svg_checked : svg_empty}<span>${opt.text}</span></div>`;
}
</script>
<Svelecte
multiple
renderer={svgRenderer}
collapseSelection="always"
clearable
keepSelectionInList={true}
searchProps={{skipSort: true}}
></Svelecte>Custom option snippet
Simple example of using snippet instead of render function for dropdown item rendering. Default snippet implementation correctly handles highlighted search. Custom snippet has no ability to do that.
If you need to keep highlighting feature use render function for custom option rendering.
<script>
import Svelecte from 'svelecte@next';
let options = [
{id: '1', text: 'option X'},
{id: '2', text: 'option Y'},
{id: '3', text: 'option Z'}
];
</script>
{#snippet option(item)}
<div>
{item.$selected ? '👌' : '👉'} {item.text} {item.$selected ? '✅' : '☑️'}
</div>
{/snippet}
<Svelecte {options} closeAfterSelect={false} value={'1'} {option} /><script>
import Svelecte from 'svelecte@next';
let options = [
{id: '1', text: 'option X'},
{id: '2', text: 'option Y'},
{id: '3', text: 'option Z'}
];
</script>
{#snippet option(item)}
<div>
{item.$selected ? '👌' : '👉'} {item.text} {item.$selected ? '✅' : '☑️'}
</div>
{/snippet}
<Svelecte {options} closeAfterSelect={false} value={'1'} {option} />Dependent selects
This functionality is not strictly related to remote fetch, but it’s typical how it’s used. Just set parentValue and
you’re done. If you require parentValue in your fetch URL, just use [parent] placeholder.
<script>
let parentValue;
let value;
</script>
<Svelecte {options} bind:parentValue clearable />
<Svelecte {parentValue} bind:value fetch="/api/[parent]?search=[query]" /><script>
let parentValue;
let value;
</script>
<Svelecte {options} bind:parentValue clearable />
<Svelecte {parentValue} bind:value fetch="/api/[parent]?search=[query]" />Drag & Drop
You can add support for drag & drop reordering by adding svelte-dnd-action library
Reorder selection by dragging: red,blue,purple
<script>
import Svelecte from 'svelecte@next';
import { dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode } from 'svelte-dnd-action';
/** my example has no 'id' property */
overrideItemIdKeyNameBeforeInitialisingDndZones('value');
// rest of code ...
</script>
<Svelecte {options} bind:value={value} multiple {dndzone} placeholder="Re-order selected items by dragging" /><script>
import Svelecte from 'svelecte@next';
import { dndzone, overrideItemIdKeyNameBeforeInitialisingDndZones, setDebugMode } from 'svelte-dnd-action';
/** my example has no 'id' property */
overrideItemIdKeyNameBeforeInitialisingDndZones('value');
// rest of code ...
</script>
<Svelecte {options} bind:value={value} multiple {dndzone} placeholder="Re-order selected items by dragging" />Custom element
Svelecte can be used outside svelte projects. Almost every commonly used property should be available. Also dependend selects are possible with custom elements. I have used it successfully in Vue and PHP projects myself.
Check the source and look for <el-svelecte /> element.
<script>
import { registerAsCustomElement } from 'svelecte/component';
registerAsCustomElement('el-svelecte');
</script>
<el-svelecte options="json_stringified_object_array"></el-svelecte><script>
import { registerAsCustomElement } from 'svelecte/component';
registerAsCustomElement('el-svelecte');
</script>
<el-svelecte options="json_stringified_object_array"></el-svelecte>Most of properties is supported with one change: parentValue.
You define parent attribute instead. It represents html id attribute of parent select.
This attribute should be defined on child svelecte element.
Native <select> element can be used as “anchor element”, which will serve as underlying element for Svelecte component.
Svelecte component can inherit required, multiple and disabled properties from <select> element and in case options property is not set, it can extract option list from <option> elements.
<select id="my_select" name="form_select" required>
<option>...</option>
</select>
<el-svelecte placeholder="Pick an item"/> <select id="my_select" name="form_select" required>
<option>...</option>
</select>
<el-svelecte placeholder="Pick an item"/>