basecoat/docs/_includes/components/dialog.njk

{#
  Renders a dialog component with optional trigger, header, body, and footer.

  @param id {string} - Unique identifier for the dialog component.
  @param trigger {string} [optional] - Text or HTML for the button that triggers the dialog.
  @param title {string} [optional] - Title text displayed in the dialog header.
  @param description {string} [optional] - Description text displayed below the title.
  @param footer {string} [optional] - HTML content for the dialog footer.
  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
  @param content_attrs {object} [optional] - Additional HTML attributes for the dialog content article.
  @param content_header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
  @param content_body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
  @param content_footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
  @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
  @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
  @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
  @param include_html {boolean} [optional] [default=true] - Whether to render the HTML structure.
  @param include_script {boolean} [optional] [default=true] - Whether to include the Alpine.js component script.
  @param register_on {array} [optional] [default=["alpine:init"]] - Alpine.js events to register the component on.
#}
{% macro dialog(
  id,
  trigger=None,
  title=None,
  description=None,
  footer=None,
  main_attrs={},
  trigger_attrs={},
  content_attrs={},
  content_header_attrs={},
  content_body_attrs={},
  content_footer_attrs={},
  open=false,
  close_button=true,
  close_on_overlay_click=true,
  include_html=true,
  include_script=false,
  register_on=["alpine:init"]
) %}
{% if include_script %}
  {% include "components/dialog-script.njk" %}
{% endif %}

{% if include_html %}
<div
  id="{{ id }}"
  x-data="dialog({{ 'true' if open else 'false' }}, {{ 'true' if close_on_overlay_click else 'false' }})"
  x-bind="$main"
  class="dialog"
  {% for key, value in main_attrs %}
    {{ key }}="{{ value }}"
  {% endfor %}
>
  {% if trigger %}
  <button
    type="button"
    {% if id %}aria-controls="{{ id }}-dialog"{% endif %}
    aria-expanded="false"
    aria-controls="{{ id }}-dialog"
    x-bind="$trigger"
    {% for key, value in trigger_attrs %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {{ trigger }} 
  </button>
  {% endif %}
  <div
    role="dialog"
    id="{{ id }}-dialog"
    x-ref="dialog"
    tabindex="-1"
    aria-modal="true"
    aria-labelledby="{{ id }}-title"
    inert
    x-bind="$content"
  >
    <article
      {% for key, value in content_attrs %}
        {{ key }}="{{ value }}"
      {% endfor %}
    >
      {% if title or description %}
        <header
          {% for key, value in content_header_attrs %}
            {{ key }}="{{ value }}"
          {% endfor %}
        >
          <h2 id="{{ id }}-title">{{ title | safe }}</h2>
          <p>{{ description | safe }}</p>
        </header>
      {% endif %}
      {% if caller %}
        <section
          {% for key, value in content_body_attrs %}
            {{ key }}="{{ value }}"
          {% endfor %}
        >
          {% if caller %}{{ caller() }}{% endif %}
        </section>
      {% endif %}
      {% if footer %}
        <footer
          {% for key, value in content_footer_attrs %}
            {{ key }}="{{ value }}"
          {% endfor %}
        >
          {{ footer | safe }}
        </footer>
      {% endif %}
      {% if close_button %}
        <button
          @click="hide()"
          aria-label="Close dialog"
        >
          {% lucide "x" %}
        </button>
      {% endif %}
    </article>
  </div>
</div>
{% endif %}
{% endmacro %}