Newlogic UI

Appearance

Dialog ​

Source ​

Example CSS ​

css
@import "winduum/src/components/dialog/props/content.css" layer(theme);
@import "winduum/src/components/dialog/props/default.css" layer(theme);
@import "winduum/src/components/dialog/content.css" layer(utilities);
@import "winduum/src/components/dialog/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-dialog-padding-block: 0.5rem;
    --x-dialog-padding-inline: 0.75rem;
  }
}

Winduum CSS Code ​

winduum/src/components/dialog/props/content.css ​

css
:root, :host {
  --x-dialog-content-padding-block: 2rem;
  --x-dialog-content-padding-inline: 1.5rem;
  --x-dialog-content-inline-size: 35rem;
}

winduum/src/components/dialog/props/default.css ​

css
:root, :host {
  --x-dialog-padding-block: 2rem;
  --x-dialog-padding-inline: 1.5rem;
  --x-dialog-background-color: var(--color-dark);
  --x-dialog-background-color-opacity: 80%;
}

winduum/src/components/dialog/content.css ​

css
.x-dialog-content {
  background-color: var(--x-dialog-content-background-color, var(--color-body-primary));
  border-radius: var(--x-dialog-content-border-radius, var(--radius-3xl));
  padding: var(--x-dialog-content-padding-block) var(--x-dialog-content-padding-inline);
  inline-size: min(100%, var(--x-dialog-content-inline-size));
  transition: var(--transition-transform), var(--transition-opacity);
  margin: auto;

  :where(dialog[data-closed]) & {
    transform: translateY(-2rem);
    opacity: 0%;
  }
}

winduum/src/components/dialog/default.css ​

css
.x-dialog {
  z-index: var(--x-dialog-z-index, var(--z-index-30));
  padding: var(--x-dialog-padding-block) var(--x-dialog-padding-inline);
  background-color:
    color-mix(
      in var(--x-dialog-background-color-space, srgb),
      var(--x-dialog-background-color) var(--x-dialog-background-color-opacity),
      var(--x-dialog-background-color-mix, transparent)
    );
  transition: var(--transition-background);
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  &::backdrop, &:not([open]) {
    display: none;
  }

  &[data-closed] {
    background-color: transparent;
  }
}

html:has(.x-dialog[open]) {
  padding-inline-end: var(--default-scrollbar-width);
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

Stimulus Actions ​

Controller is present directly on the dialog element, so you need to use Invoke action to invoke an action outside the controller.

show ​

Shows a dialog via showDialog method.
You can add any params from options via Invoke params.

Example ​

html
<body data-controller="invoke">
    <button
        class="x-button"
        data-invoke-action="x-dialog#show"
        data-invoke-target="#dialogElement"
    >
        Show Existing Dialog
    </button>
    <dialog class="x-dialog" data-controller="x-dialog">
        <div class="x-dialog-content">
            Dialog content
        </div>
    </dialog>
</body>

Example Fetch ​

Fetches, appends and shows a dialog via showDialog method.
You can add any params from options via Invoke params.

html
<body data-controller="invoke">
    <button
        class="x-button"
        data-invoke-action="x-dialog#show"
        data-invoke-url="/dialog/basic.json"
    >
        Show Dialog
    </button>
</body>
latte
{capture $dialog}
    {include TEMPLATES_DIR . 'components/dialog/DialogBasic.latte'}
{/capture}

{$dialog|json('content')|noescape}
latte
<dialog class="x-dialog" data-controller="x-dialog">
    <form class="x-dialog-content">
        <div class="flex justify-between">
            <h2 class="x-heading">Dialog Basic</h2>
            <button class="x-button square ghosted accent-main" type="button" data-action="click->x-dialog#close">
                <svg>
                    <use href="#heroicons-outline/x-mark"></use>
                </svg>
            </button>
        </div>
        <div class="x-text py-4">
            {foreach range(1, 44) as $i}
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
            {/foreach}
        </div>
        <button class="x-button" type="button" data-action="click->x-dialog#close">Continue</button>
    </form>
</dialog>

Example Naja ​

Fetches via Naja, appends and shows a dialog via showDialog method.
You can add any params from options via Invoke params.

  • Use data-naja="invoke once" if you want the dialog to be cached in the DOM.
html
<body data-controller="invoke">
    <button
        class="x-button"
        data-naja="invoke once"
        data-naja-url="/ajax-url"
        data-invoke-action="x-dialog#show"
    >
        Show Dialog
    </button>
</body>
  • Use data-naja="invoke" if you want the dialog be fetched every time, be sure to remove the old dialog from DOM first!
html
<body data-controller="invoke">
    <button
        class="x-button"
        data-naja="invoke"
        data-naja-url="/ajax-url"
        data-invoke-action="x-dialog#show"
        data-invoke-remove-param="true"
    >
        Show Dialog
    </button>
</body>

close ​

Closes a dialog via closeDialog method.
You can add any params from options via Invoke params.

Example ​

html
<body>
<dialog class="x-dialog" data-controller="x-dialog">
    <div class="x-dialog-content">
        <button class="x-button" data-controller="x-dialog#close">
            Close dialog
        </button>
    </div>
</dialog>
</body>

Stimulus Values ​

params ​

You can add any params from options via data-x-dialog-params-value. This will override the params defined via actions.

html
<body>
    <dialog 
        class="x-dialog" 
        data-controller="x-dialog"
        data-x-dialog-params-value='{ "remove": true }'
    >
        <div class="x-dialog-content">
            Dialog content
        </div>
    </dialog>
</body>

Notes ​

  • When you initially set data-action="x-dialog:connect->x-dialog#show on the dialog, the dialog will open upon controller initialization. You can also add params via params value.
  • You can close the dialog upon successful data-naja form submit, by adding data-action="naja:form-success->x-dialog#close"
  • Check out official <dialog> docs on MDN for more information about the element.

Released under the MIT License.

Copyright © 2024-present newlogic.cz