NodeSelector

Wrapper for Sitevision input components used for selecting nodes.

Props

| Prop | Type | Description | | ------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------- | --- | | id | string | Input ID, generated automatically if not provided.
Default: generateId() | | name | string | Name attribute for the selector.
Default: undefined | | label | string | Field label.
Default: undefined | | description | string | Description for the node selector, displayed below the input field.
Default: undefined | | type | string | Type of the selector.
Values: 'page' 'file' 'image' 'user' 'content-node' 'link'
Default: 'page' | | required | boolean | Whether the field is required.
Default: false | | disabled | boolean | Whether the field is disabled.
Default: false | | | removable | boolean | Whether the selected value can be removed.
Default: false | | show | boolean | Show and hide the component without re-rendering.
Default: true | | selectable | Array<any> | Filter for selectable node types.
Default: [] | | value | string | Value associated with the selector.
Default: '' |

For tags-selector use TagSelector.

Example

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

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

Advanced

NOT RECOMENDED

Usually the usage of name is enough for 99% of use cases.

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

  const { values } = $props();

  values = {
    page: '',
    ...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>Some text.</p>
</NodeSelector>

Label

Slot for content in the label element.

Svelte 5

<NodeSelector name="page" type="page">
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</NodeSelector>

Svelte 4

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

Description

Slot for content in the description element to be used instead of the prop when HTML formatting is needed.

Svelte 5

<NodeSelector name="page" type="page">
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</NodeSelector>

Svelte 4

<NodeSelector name="page" type="page">
  <svelte:fragment slot="description">
    Custom <strong>description</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']}
/>