[Feature Request] Floating components with "hide" technique in order to close them.

[Angel-Ponce]

Usage example, including component, action, motion, or utility API

For example using the Modal within Popper component

<script>
 import { Modal, Group, Button, Popper } from '@svelteuidev/core';

 let opened = false;
 let mounted = false;
</script>

<Button bind:element={reference} on:click={() => (mounted = !mounted)}>Click here</Button>

<Popper {reference} {mounted}>
 <Button on:click={() => (opened = true)}>Open Modal</Button>
 <Modal {opened} on:close={()=>(opened = false)}>
  <Input  />
 </Modal>
</Popper>

So, in this example the Modal component only works if the Popper component is mounted, otherwise, the Modal will be unmounted automatically.

The solution is easy, put the Modal component out of the Popper component, but, it will generate a bad anatomy in the code:

<script>
 import { Modal, Group, Button, Popper } from '@svelteuidev/core';

 let opened = false;
 let mounted = false;
</script>

<Button bind:element={reference} on:click={() => (mounted = !mounted)}>Click here</Button>

<Popper {reference} {mounted}>
 /* the button trigger is in the popper component */
 <Button on:click={() => (opened = true)}>Open Modal</Button>
</Popper>

/* the modal is out of popper component */
<Modal {opened} on:close={()=>(opened = false)}>
 <Input  />
</Modal>

Possible implementation - describe how the feature can be implemented

If we could decide between "destroy" and "hide" techinque to close the popper this code will have'nt bugs.

<script>
 import { Modal, Group, Button, Popper } from '@svelteuidev/core';

 let opened = false;
 let mounted = false;
</script>

<Button bind:element={reference} on:click={() => (mounted = !mounted)}>Click here</Button>

<Popper {reference} {mounted} destroyOnClose={false}> <------------ destroyOnClose false, use the "hide" technique
 <Button on:click={() => (opened = true)}>Open Modal</Button>
 <Modal {opened} on:close={()=>(opened = false)}>
  <Input  />
 </Modal>
</Popper>

Do you want to contribute this feature and create a pull request

Yes