Implement DialogPanel?

[ivarlovlie]

Headless ui has Dialog.Panel, I am unable to find it in svelte-headlessui. Is this because it is not implemented here, or am i missing something about the need for Dialog.Panel in this port?

Thanks!

[karmaral]

+1 for this

[ivarlovlie]

I would be willing to invest time in a PR if there was documentation with pointers on how to port components. I haven't found it.

[ivarlovlie]

My first pass on this seems to do the job, probably not production ready, but would love to make it so in a pr.

[petr24]

@extremelygooddeveloper Unless there is a misunderstanding but the dialog panel is on the example page here https://svelte-headlessui.goss.io/docs/dialog

[ivarlovlie]

@petr24 Hmm, i only see these

[petr24]

Have no idea what page you're visiting, I go to the link on chrome and this is what you should see...

[ivarlovlie]

Yes, there is no DialogPanel on that page.

[petr24]

Well there is no "DialogPanel" in tailwind css or headless UI, it's called just "Dialog". I think this can be closed out.

[petr24]

Well there is no "DialogPanel" in tailwind css or headless UI, it's called just "Dialog". I think this can be closed out.

I mis-understood your question, and my answers were wrong. I see you were asking about "Dialog.Panel" with svelte variant being "DialogPanel", however I'm not sure it's necessary. I looked at the DOM for both headless UI example, and svelte headless UI, and it's the same. Parent Div with three children, h3, two divs. So it seems like this package has the function of Dialog.Panel without explicitly copying the headless UI api.

Svelte Headless UI

Headless UI

[coin-au-carre]

For reference, if it can be useful these layouts use DialogPanel: https://tailwindui.com/components/application-ui/application-shells/sidebar see Vue Code.

I have tried to replace in my code DialogPanel with Dialog. However the visual is not good for the moment.

[ivarlovlie]

@coin-au-carre Yes, that was my experience as well, iirc my first pass on implementing DialogPanel worked for me.
Feel free to try it out:
Repo: https://github.com/extremelygooddeveloper/svelte-headlessui
npm: https://www.npmjs.com/package/@developermuch/dev-svelte-headlessui

[coin-au-carre]

Thanks @extremelygooddeveloper I will try it :). Maybe you should propose a PR ?

[AaronNBrock]

Bumping that @iv-ar should turn this into a PR!

[HemalR]

I mis-understood your question, and my answers were wrong. I see you were asking about "Dialog.Panel" with svelte variant being "DialogPanel", however I'm not sure it's necessary. I looked at the DOM for both headless UI example, and svelte headless UI, and it's the same. Parent Div with three children, h3, two divs. So it seems like this package has the function of Dialog.Panel without explicitly copying the headless UI api.

I think the main functionality is to trigger a close of the dialog when a click-event is made outside of it. I would echo the requests for @iv-ar to turn this into a PR. Thank you all in advance!

[zach-hopkins]

I'm not really sure what DialogPanel does. I've just replaced them with divs and never noticed anything wrong.

[HemalR]

I'm not really sure what DialogPanel does. I've just replaced them with divs and never noticed anything wrong.

Are you able to close the dialog by clicking outside of it?

[zach-hopkins]

I'm not really sure what DialogPanel does. I've just replaced them with divs and never noticed anything wrong.

Are you able to close the dialog by clicking outside of it?

Ah yes I believe that may be it. I cannot do that by default, however I do not mind creating that functionality manually.

[petr24]

From the documentation, clicking outside modal/dialog works as expected.
Is this not working for everyone?

The close event is fired when an open dialog is dismissed, 
which happens when the user clicks outside of the contents of your dialog or presses the Escape key. 
You can use this callback to set open back to false and close your dialog.

<script>
  import {
    Dialog,
    DialogOverlay,
    DialogTitle,
    DialogDescription,
  } from "@rgossiaux/svelte-headlessui";
  let isOpen = true;
</script>

<!-- Pass `isOpen` to the `open` prop and use the `on:close` handler to set it back to false when the user clicks outside of the dialog or presses the escape key. -->
<Dialog open={isOpen} on:close={() => (isOpen = false)}>
  <DialogOverlay />

  <DialogTitle>Deactivate account</DialogTitle>
  <DialogDescription>
    This will permanently deactivate your account
  </DialogDescription>

  <p>
    Are you sure you want to deactivate your account? All of your data will be
    permanently removed. This action cannot be undone.
  </p>

  <!-- You can render additional buttons to dismiss your dialog by setting `isOpen` to `false`. -->
  <button on:click={() => (isOpen = false)}>Deactivate</button>
  <button on:click={() => (isOpen = false)}>Cancel</button>
</Dialog>