@svelte-put/modal

import { createModalStore } from '@svelte-put/modal';
export const modalStore = createModalStore();

<script lang="ts">
  import { createModalEventDispatcher } from '@svelte-put/modal';
  import type { ExtendedModalProps, ExtendedModalEvents } from '@svelte-put/modal';
  import Modal from '@svelte-put/modal/Modal.svelte';

  // extending the base props
  type $$Props = ExtendedModalProps<{ disabled?: boolean }>;
  // extending the `resolve` event
  type $$Events = ExtendedModalEvents<{ confirmed: boolean }>;

  export let disabled = false;

  // create a custom event dispatcher with built-in helper
  const dispatch = createModalEventDispatcher<$$Events>();

  function resolve(confirmed: $$Props['disabled']) {
    // should get type autocompletion for dispatch here
    dispatch('resolve', {
      trigger: 'custom',
      confirmed,
    });
  }
  function confirm() {
    resolve(true);
  }
  function cancel() {
    resolve(false);
  }
</script>

<!-- props is forwarded to the base Modal component -->
<!-- and the custom dispatch is also passed down -->
<Modal classes={{ container: 'confirmation-modal bg-bg p-10' }} {...$$restProps} {dispatch}>
  <div class="modal-content">
    <p>Confirmation Modal</p>
    <p>Are you sure you want to proceed?</p>
    <div>
      <button type="button" on:click={confirm} {disabled} class="c-btn-primary">Confirm</button>
      <button type="button" on:click={cancel} {disabled} class="c-btn-primary-outline"
        >Cancel</button
      >
    </div>
  </div>
</Modal>

<script lang="ts">
  import type { ModalPushOutput } from '@svelte-put/modal';

  import { modalStore } from '$client/services/modal';

  import ConfirmationModal from './ConfirmationModal.code.svelte';

  let pushed: ModalPushOutput<ConfirmationModal>;

  async function open() {
    // should get type autocompletion for pushed here
    pushed = modalStore.push(ConfirmationModal);
    const { confirmed, trigger } = await pushed.resolve();
    if (confirmed) {
      // do something
    }
    console.log('Modal resolves to', confirmed);
    console.log('Modal was popped by', trigger);
  }

  // actions inside modal will also call pop internally
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  function close() {
    if (pushed) {
      modalStore.pop(pushed);
      // if the modal is successfully popped by this operation,
      // the `await` expression in the `open` method above will resolve
      // the `trigger` will be `pop`

      // alternatively, pass undefined to pop the topmost modal:
      modalStore.pop();
    }
  }
</script>

<button on:click={open} class="c-btn-primary">Open ConfirmationModal</button>

modalStore.push({
  component: FullCustomModal,
  props: {
    content: 'Some custom content'
  },
});

<!-- without anything from @svelte-put (except for some types) -->
<script lang="ts">
  import type { ResolveTrigger } from '@svelte-put/modal';
  import { createEventDispatcher } from 'svelte';

  export let content = 'Prop should work as usual';

  const dispatch = createEventDispatcher<{
    resolve: {
      trigger: ResolveTrigger;
      payload: string;
    };
  }>();

  function resolve() {
    dispatch('resolve', { trigger: 'custom', payload: 'completely custom modal' });
  }
</script>

<!-- notice this component is just a normal svelte component -->

<div class="custom-modal">
  <button type="button" class="c-btn-primary-outline" on:click={resolve}> Resolve </button>
  <p>{content}</p>
</div>

<style>
  .custom-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    display: grid;
    place-items: center;

    width: 80%;
    height: 80%;

    background-color: #fff;
    box-shadow: 0 0 0.5rem rgb(0 0 0 / 25%);
  }
</style>