DropdownSelector

Wrapper component for Sitevision selects.

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

Props

export let id = generateId();
export let label; // Required
export let name = undefined;
export let type = 'metadata';
export let selectable = [];
export let required = false;
export let disabled = false;
export let show = true;
export let value = '';

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

<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.

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