# RepositoryNodeSelector

Component for selecting one or multiple nodes from a repository, is using [CustomSelector](/packages/config-svelte/components/customselector).

![RepositoryNodeSelector1](/_astro/RepositoryNodeSelector1.CLvmq5N1_ZBCWH2.webp) ![RepositoryNodeSelector2](/_astro/RepositoryNodeSelector2.Dc-nXYaX_1uq2uH.webp)

## Props

| Prop          | Type      | Description                                                          |
| ------------- | --------- | -------------------------------------------------------------------- |
| `id`          | `string`  | Unique identifier for the component. **Default:** `generateId()`     |
| `label`       | `string`  | Label for the selector. **Required.**                                |
| `name`        | `string`  | Name attribute for the selector. **Default:** `undefined`            |
| `searchable`  | `boolean` | If the selector should be searchable. **Default:** `false`           |
| `required`    | `boolean` | If the field is required. **Default:** `false`                       |
| `disabled`    | `boolean` | If the field is disabled. **Default:** `false`                       |
| `multiple`    | `boolean` | If multiple selections are allowed. **Default:** `false`             |
| `show`        | `boolean` | Show or hide the component without re-rendering. **Default:** `true` |
| `value`       | `string`  | Bound value for the selector. **Default:** `''`                      |
| `type`        | `string`  | Type of repository to select from. **Default:** `undefined`          |
| `description` | `string`  | Description text displayed below the input field.                    |

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

**config/index.js**

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


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

## Example

```svelte
<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**

:::danger\[NOT RECOMENDED] Usually the usage of `name` is enough for 99% of use cases.

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

```svelte
<RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group">
  <p>Some text</p>
</RepositoryNodeSelector>
```

### Label

Slot for content in the label element.

* Svelte 5

  ```svelte
  <RepositoryNodeSelector name="tagGroup" type="tag-group">
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </RepositoryNodeSelector>
  ```

* Svelte 4

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

### Description

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

* Svelte 5

  ```svelte
  <RepositoryNodeSelector name="tagGroup" type="tag-group">
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </RepositoryNodeSelector>
  ```

* Svelte 4

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