Modal

Component for displaying configuration in a modal window.

[[toc]]

Props

export let title; // Modal title text, required.
export let open = false; // Change this prop to open or close modal, required.
export let element; // Modal DOM element.

Components

name props is required on all components (even in advanced configuration) for the reset function to work properly.

Events

• open - triggers when the modal opens.
• close - triggers when the modal closes (outside click, close button, cancel button).
• save - triggers when the modal is saved.

Example

Standard

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

  let open = false;
</script>

<Panel>
  <button class="btn btn-primary" on:click={() => (open = true)}>Modal</button>
  <Modal title="Edit" bind:open>
    <InputField name="textModal" label="Text in modal" />
    <NodeSelector name="pageModal" label="Page in modal" />
  </Modal>
</Panel>

Advanced

Advanced configs are not recommended.

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

  export let values;

  let open = false;

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

<Panel>
  <button class="btn btn-primary" on:click={() => (open = true)}>Modal</button>
  <Modal title="Edit" bind:open>
    <InputField name="textModal" bind:value={values.textModal} label="Text in modal" />
    <NodeSelector name="pageModal" bind:value={values.nodeModal} label="Page in modal" />
  </Modal>
</Panel>

CSS variables

• --modal-width - Width of modal, default is 600px.

<Modal title="Edit" bind:open --modal-width="800px">
  <InputField name="textModal" label="Text in modal" />
  <NodeSelector name="pageModal" label="Page in modal" />
</Modal>

Slots

• default - Modal content.
• footer - Modal footer.

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

  let open = false;
</script>

<Modal title="More info" bind:open>
  <p>Content in default slot.</p>

  <svelte:fragment slot="footer">
    <button class="btn btn-primary" type="button" on:click={() => (open = false)}>OK</button>
  </svelte:fragment>
</Modal>