ListSelector

Wrapper for Sitevision list components

Props

// Input ID, generated if no property is provided, for component initialization and input label.
export let id = generateId();
// Name is always required here since SiteVision uses this to initialize the component.
export let name;
// Field label
export let label;
// List component type.
export let type = 'page';
// Used if bound to value, falls back to provided values object when name attribute is used.
export let value = [];
// If list is required.
export let required = false;
// If list is disabled.
export let disabled = false;
// If list is sortable, since Sitevision 9.1.
export let sortable = false;
// Show and hide compoment without re-rendering.
export let show = true;
// Selectable types
export let selectable = [];

Type

Possible values for type:

• page
• file
• image
• user
• userfield

For tags-selector use TagSelector.

Example

Standard

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

<Panel heading="Inställningar">
  <ListSelector name="pages" type="page" label="Sidor" />
</Panel>

Advanced

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

  const values = {
    pages: '',
    ...window.CONFIG_VALUES
  };

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <ListSelector name="pages" bind:value={values.pages} label="Sidor" />
</Panel>

Slots

Default

Default slot after list.

<ListSelector name="pages" type="page" label="Sidor" />
  <p class="help-block">Some helpful text.</p>
</ListSelector>

Label

Slot for content in the label element.

<ListSelector name="pages" type="page-list" />
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</InputField>

Type prop shorthand (since 1.3.0)

You can omnit the -list suffix for the type prop.

<ListSelector name="pages" type="page" label="Sidor" />

Selectable types

Filter what types should be selectable. See available types here: https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#Listtypes

Accepts an Array or String.

<ListSelector
  name="pages"
  type="page-list"
  label="Sidor"
  selectable="sv:page"
  selectable={['sv:page', 'sv:sitePage']}
/>