LinkSelector

Custom panel component for selecting a link.

DEPRECATED

Since Sitevision 9.1 a new type of node selector is avaliable for selecting links.
NodeSelector should be used instead of this component.

<NodeSelector label="Link" type="link" name="link" />

A sv:link will be returned.

import appData from '@sitevision/api/server/appData';

const uri = appData.get('link', 'rawURI');
const newWindow = appData.get('link', 'openInNewWindow');

AppData

If used with standard name all values will be prefixed with the name property provided to the component. For example if name="link" the values will be available as linkValue, linkType and linkNewWindow.

import appData from '@sitevision/api/server/appData';

const getLink = () => ({
  value: appData.get('linkValue', 'URI'),
  type: appData.get('linkType'),
  newWindow: appData.get('linkNewWindow'),
});

Props

// Panel heading
export let heading;
// If SiteVision default functions for getting and setting config is used name must be set.
export let name;
// If control is disabled.
export let disabled = false;
// If control is required.
export let required = false;
// Show and hide compoment without re-rendering.
export let show = true;
// What types of links to be selectable, must provide at least one.
export let types = ['internal', 'external', 'file', 'mail', 'tel'];
// Used if bound to value.
export let value;

Slots

Top and bottom slots before and after link selector.

<LinkSelector
  name="link"
  heading="Knapp"
  disabled={!showLink}
>
  <svelte:fragment slot="top">
    <Checkbox
      name="showLink"
      bind:value={showLink}
      label="Visa knapp"
    />
    <InputField
      name="linkText"
      required
      label="Text"
      disabled={!showLink}
    />
  </svelte:fragment>
  <svelte:fragment slot="bottom">
    <p class="help-block">Hjälptext...</p>
  </svelte:fragment>
</LinkSelector>

Example

Standard

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

<LinkSelector name="link" heading="Länk" />
<LinkSelector name="file" heading="Fil" types={['file']} />

Advanced

<script>
  import { LinkSelector } from '@soleil-se/config-svelte';
  import { pluckPrefix, addPrefix, onSave } from '@soleil-se/config-svelte/utils';

  // Plucks object properties with keys prefixed with 'link' and removes the prefix.
  // { linkType, linkValue, linkNewWindow } -> { type, value, newWindow }
  let link = pluckPrefix('link');

  // Prefixes keys in an object
  // { type, value, newWindow } -> { linkType, linkValue, linkNewWindow }
  onSave(() => addPrefix('link', link)))

</script>

<LinkSelector bind:value={link} heading="Länk" />