DropdownSelector

Wrapper component for Sitevision selects.

Props

Prop	Type	Description
id	string	ID, generates automatically if nothing is passed. Default: generateId()
label	string	Label for the selector. Required. Default: undefined
description	string	Description for the selector, displayed below the label. Default: undefined
name	string	Name attribute for the selector. Default: undefined
type	string	Type of the selector. Default: 'metadata'
selectable	Array<any>	Filter for selectable types. Default: []
required	boolean	Whether the selector is required. Default: false
disabled	boolean	Disable the selector. Default: false
show	boolean	Show and hide the component without re-rendering. Default: true
value	string	Value associated with the selector. Default: ''

Type

Possible values for type:

• metadata
• template
• oauth2-configuration
• virtual-group
• search-index
• font
• color

For custom-selector use CustomSelector.

Example

Standard

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

<Panel heading="Inställningar">
  <DropdownSelector name="metadata" type="metadata" label="Metadata" />
</Panel>

Advanced

NOT RECOMENDED

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

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

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

  onSave(() => values);
</script>

<Panel heading="Inställningar">
  <DropdownSelector bind:value={values.metadata} type="metadata" label="Metadata" />
</Panel>

Type prop shorthand (since 1.3.0)

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

<DropdownSelector name="metadata" type="metadata" label="Metadata" />

Selectable types

❗ Since SiteVision 7.0 ❗

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

Accepts an Array or String.

<DropdownSelector
  name="metadata"
  type="metadata-selector"
  label="Metadata"
  selectable="sv:metadataLinkDefinition"
  selectable={['sv:metadataLinkDefinition', 'sv:metadataDateDefinition']}
/>

Slots

Default

Default slot after selector.

<DropdownSelector name="metadata" label="Metadata" {options} >
  <p class="help-block">Some helpful text.</p>
</CustomSelector>

Label

Slot for content in the label element.

Svelte 5

<DropdownSelector name="metadata" {options} >
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</DropdownSelector>

Svelte 4

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

Description

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

Svelte 5

<DropdownSelector name="metadata" {options} >
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</DropdownSelector>

Svelte 4

<DropdownSelector name="metadata" {options} >
  <svelte:fragment slot="description">
    Custom <strong>description</strong>
  </svelte:fragment>
</DropdownSelector>