Hello

[vnphanquang]

Say hello, let me know if what i'm doing here is helpful for you. And share, if possible, what amazing project you are using this library for. 👋🏼 👋🏼 👋🏼

[akiarostami]

Hello!

[vnphanquang]

Hello there 👋🏼

[aabluedragon]

Hi!
Personally I found @svelte-put/modal especially helpful.
I'm used to writing programmatic dialogs, and I think it's a pretty common use case.
It's a mystery to me that this is the only module that actually works well and flexible enough.
I'm using it along SvelteKit+KonstaUI.

Issues:
(1)
I had to add the following css, otherwise the popups are hidden:

aside.s-modal-portal {
  z-index: 1000;
}

(2)
KonstaUI has animations for its popups, and it seems that they are ignored when used by @svelte-put/modal,
Meaning, after calling push(MyAlert), it appears instantly without animation, and once it's resolved, it just disappears instantly.
Is there a way to "forward" the built-in animations from KonstaUI Popups?

(3)
If I wrap my modal template with the Modal component, I get a weird little popup:

Without wrapping, it looks ok:

P.S
I tried this one https://www.npmjs.com/package/svelte-modals, but its closeModal() only closes the top modal in the stack, it does not allow closing a specific one, which to me at least makes it unusable, so again I'm thankful for @svelte-put/modal

[vnphanquang]

@aabluedragon Thank you. I'm glad to hear that @svelte-put/modal is helpful. Let's break down your questions:

(1)

I had to add the following css, otherwise the popups are hidden:

aside.s-modal-portal {
 z-index: 1000;
}

Yeah, if you look into the source code of ModalPortal, no default z-index is applied. Konsta applies fixed and z-40 to their popup, so we need to have a higher z-index for our portal (which also has fixed position).

<ModalPortal class="z-50" />

Generally customization is needed to fit in an existing UI system like Material UI or Konsta.

I've recognized that the ModalPortal is somewhat a blackbox and customization is often required but bit tricky to do in Svelte. So I'm experimenting a new API for portal which might look like this:

<aside use:portal={modalStore} />

this removes the unnecessary component abstraction, helps avoid conflict like above issue, and also makes customization easier should that be necessary.

---

(2)

KonstaUI has animations for its popups, and it seems that they are ignored when used by @svelte->put/modal,
Meaning, after calling push(MyAlert), it appears instantly without animation, and once it's >resolved, it just disappears instantly.
Is there a way to "forward" the built-in animations from KonstaUI Popups?

Yes:

<!-- YourCustomPopup.svelte -->
<script lang="ts">
	import type { ResolveTrigger } from '@svelte-put/modal';
	import { createEventDispatcher, onMount } from 'svelte';
	import { Popup } from 'konsta/svelte';

	let opened = false;

	const dispatch = createEventDispatcher<{
		resolve: {
			trigger: ResolveTrigger;
			payload: string;
		};
	}>();
	function resolve() {
		opened = false;
		setTimeout(() => {
			dispatch('resolve', { trigger: 'custom', payload: 'custom modal' });
		}, 400);
	}

	onMount(() => {
		opened = true;
	});
</script>

<Popup onBackdropClick={resolve} {opened}>
  ...
</Popup>

Focus on the opened variable. Here we are basically delaying the resolve dispatch with a setTimeout of 400ms, which is the duration of Konsts Popup's out transition. This is needed because Konsta Popup use CSS transition to animate in / out, which is handled internally in Popup via the opened prop:

<!-- when opened = true -->
<div class="[...truncated] z-40 -translate-y-1/2 ease-material-in-popup duration-[600ms]" />
<!-- when opened = false -->
<div class="[...truncated] z-40 translate-y-full duration-400" />

Another workaround is do-it-yourself with svelte built-in transition. But doing that means you lose Konsta's transition and might create unexpected style conflict. So I recommend the above.

---

(3)

If I wrap my modal template with the Modal component, I get a weird little popup [...]

Yes, because you are using a pre-built Konsta Popup already, I would not recommend wrapping with Modal. In fact, I'm discouraging the use of Modal as I think a "headless" approach is more suitable for @svelte-put/modal. As in (1), I'm experimenting with new ways to do things in @svelte-put/modal that will greatly reduce the complexity. You can read more in my comment in this issue (second part). In practice the API will be quite similar to @svelte-put/noti.

---

Let me know if that helps and if you have any other question 🙏

[aabluedragon]

@vnphanquang Thanks for your reply!
Regarding (2), the downside of that approach is extra 400ms delay before the actual dispatch.
Is there a way to dispatch immediately, and only delay the open/close logic?

[vnphanquang]

@aabluedragon I'm afraid not, at least not without some very extreme hacking. I think 400ms is a bearable delay given that user has to wait for your modal to close anyway before continuing interaction, unless you are calling external code / services based on the resolved value, in which case I understand.

Can you share more about your use case (what your modal is used for, for example)? Perhaps I can introduce a delay option for @svelte-put/modal that allows you to delay unmount after dispatch.

Let me know

[aabluedragon]

Indeed 400ms is bearable, however since I execute logic that does not need user interaction as a result, it's just wasting time, sometimes I'm running a Preloader popup, and after it finishes, doing some stuff and showing an alert.
So yes, having this ability is useful.