NodeSelector

Wrapper for Sitevision input components used for selecting nodes.

• Props
  • Type
• Example
  • Standard
  • Advanced
• Slots
• Type prop shorthand (since 1.3.0)
• Selectable node types

Props

export let id = generateId();
export let label;
export let type = 'page';
export let name;
export let required = false;
export let disabled = false;
export let readonly = false;
export let removable = false;
export let show = true;
export let selectable = [];
export let value = '';

Type

Possible values for type:

• page - default
• file
• image
• user
• content-node
• link

For tags-selector use TagSelector.

Example

Standard

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

<Panel heading="Inställningar">
  <NodeSelector
    name="page"
    type="page"
    label="Sida"
  />
</Panel>

Advanced

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

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

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <NodeSelector bind:value={values.page} label="Page" type="page" />
</Panel>

Slots

Default

Default slot after selector.

<NodeSelector name="page" label="Page" type="page" />
  <p class="help-block">Some helpful text.</p>
</NodeSelector>

Label

Slot for content in the label element.

<NodeSelector name="page" type="page" />
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</NodeSelector>

Type prop shorthand (since 1.3.0)

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

<NodeSelector name="page" type="page" label="Sida" />

Selectable node types

❗ Since SiteVision 7.0 ❗

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

Accepts an Array or String.

<NodeSelector
  name="page"
  type="page"
  label="Sida"
  selectable="sv:page"
  selectable={['sv:page', 'sv:sitePage']}
/>