CustomSelector

Wrapper component for Sitevision Custom selector.

Props

export let id = generateId();
export let label; // Required
export let name = undefined;
export let placeholder;
export let options = [];
export let searchable = false;
export let removable = true;
export let required = false;
export let disabled = false;
export let multiple = false;
export let show = true;
export let value = '';

Example

Standard

<script>
  import { Panel, CustomSelector } from '@soleil-se/config-svelte';

  const options = [
    { label: 'Värde 1', value: 'value1' },
    { label: 'Värde 2', value: 'value2' },
    { label: 'Värde 3', value: 'value3' },
  ];
</script>

<Panel heading="Inställningar">
  <CustomSelector name="custom" label="Custom selector" {options} />
</Panel>

Advanced

<script>
  import { Panel, CustomSelector } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';

  export let values;

  values = {
    custom: '',
    ...values
  }

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <CustomSelector label="Custom selector" {options} bind:value={values.custom} />
</Panel>

Slots

Default

Default slot after selector.

<CustomSelector name="custom" label="Custom selector" {options} >
  <p class="help-block">Some helpful text.</p>
</CustomSelector>

Label

Slot for content in the label element.

<CustomSelector name="custom" {options} >
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</CustomSelector>

Option

Option slot for custom templating.
The option is available as slot prop.

<script>
  import { Panel, CustomSelector } from '@soleil-se/config-svelte';

  const options = [
    { label: 'Värde 1', value: 'value1', type: 'Typ 1' },
    { label: 'Värde 2', value: 'value2', type: 'Typ 2' },
    { label: 'Värde 3', value: 'value3', type: 'Typ 3' },
  ];
</script>

<Panel>
  <CustomSelector name="custom" label="Custom selector" {options} >
    <span slot="option" let:option>{option.label} ({option.type})</span>
  </CustomSelector>
</Panel>