Svelecte

Various examples

This page gives you some examples what can be done and how.

Multiselect

Example how multiselect can be implemented.

3 selected 
<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 slot component

Simple example of using <slot> instead of render function for dropdown item rendering.

option X
<script>
	import Svelecte from 'svelecte'
	import Item from './Item.svelte';

	let options = [
    {id: '1', text: 'option X'},
    {id: '2', text: 'option Y'},
    {id: '3', text: 'option Z'}
	];
</script>

<Svelecte {options} closeAfterSelect={false} value={'1'}>
	<svelte:fragment slot="option" let:item>
		<Item {item} />
	</svelte:fragment>
</Svelecte>
<script>
	import Svelecte from 'svelecte'
	import Item from './Item.svelte';

	let options = [
    {id: '1', text: 'option X'},
    {id: '2', text: 'option Y'},
    {id: '3', text: 'option Z'}
	];
</script>

<Svelecte {options} closeAfterSelect={false} value={'1'}>
	<svelte:fragment slot="option" let:item>
		<Item {item} />
	</svelte:fragment>
</Svelecte>
// Item.svelte
<script>
	export let item
</script>

<div>
	{item.$selected ? '👌' : '👉'} {item.text} {item.$selected ? '✅' : '☑️'}
</div>
// Item.svelte
<script>
	export let item
</script>

<div>
	{item.$selected ? '👌' : '👉'} {item.text} {item.$selected ? '✅' : '☑️'}
</div>

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

Red
Blue
Purple
<script>
  import Svelecte from 'svelecte';
  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';
  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"/>
Made with Svelte ❤ by Martin Skocik.
♦
You can support me through GitHub.