RepositoryNodeSelector

Component for selecting one or multiple nodes from a repository, is using CustomSelector.

Props

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

Types

All repositories that are children to the site are valid types, some are more useful than others.

Available types

Following types are available, not all are useful though.

Useful

• alias - Alias Repository.
• named-reference - Named Reference Repository.
• rss-feed - RSS Feed Repository.
• rating-type - Rating Type Repository.
• responsive-breakpoint - Responsive Breakpoint Repository.
• role - Role Repository.
• site-cookie - Site Cookie Repository.
• tag-group - Tag Group Repository.
• tag - Tag Repository.
• user-field - User Field Repository.

Do not use

• color - Color Repository, use <DropdownSelector type="color" /> instead.
• file - File Repository, use <NodeSelector type="file" /> instead.
• font - Font Repository, use <DropdownSelector type="font" /> instead.
• image - Image Repository, use <NodeSelector type="image" /> instead.
• index - Index Repository, use <DropdownSelector type="search-index" /> instead.
• metadata - Metadata Definition Template Repository, use <DropdownSelector type="metadata" /> instead.
• oAuth2 - OAuth2 Configuration Repository, use <DropdownSelector type="oauth2-configuration" /> instead.
• page - Page Repository, use <NodeSelector type="page" /> instead.
• principal - Principal Repository, use <NodeSelector type="user" /> instead.
• template - Template Repository, use <DropdownSelector type="template" /> instead.

Other

• addon - Addon Repository.
• data-store - Data Store Repository.
• decoration - Decoration Repository.
• default-image - Default Image Repository.
• externaltopicintegration - ExternalTopicIntegration Repository.
• icon - Icon Repository.
• list-style - List Style Repository.
• module-element-draft - Module Element Draft Repository.
• module-element - Module Element Repository.
• restApp - RestApp Repository.
• topic - Topic Repository.
• webApp - WebApp Repository.

App context

To be able to use this component app context must be created in config/index.js.
The options are fetched using the REST-API and the site name is needed for building the URL.

import router from '@sitevision/api/common/router';
import { createAppContext } from '@soleil-se/config-svelte/server';

router.get('/', (req, res) => {
  createAppContext(res);
});

Example

Standard

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

<Panel heading="Inställningar">
  <RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group" />
  <RepositoryNodeSelector name="cookies" label="Cookies" type="site-cookie" multiple />
</Panel>

Advanced

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

  export let values;

  values = {
    tagGroup: '',
    ...values
  }

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <RepositoryNodeSelector label="Tag group" type="tag-group" bind:value={values.tagGroup} />
</Panel>

Slots

Default

Default slot after selector.

<RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group">
  <p class="help-block">Some helpful text.</p>
</RepositoryNodeSelector>

Label

Slot for content in the label element.

<RepositoryNodeSelector name="tagGroup" type="tag-group">
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</RepositoryNodeSelector>