Modals

<div data-controller="modal">
  <button type="button" data-action="click->modal#open" class="btn btn-primary" tabindex="0">
    Open single action modal
  </button>

  <div
    aria-labelledby="single-action-modal-title"
    aria-modal="true"
    data-modal-target="container"
    class="hidden fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    >
    <div class="h-screen w-full relative flex items-center justify-center">
      <div
      data-modal-target="content"
      data-action="keyup@window->modal#closeWithEsc"
      data-transition-enter-active="transition ease-out duration-300"
      data-transition-enter-from="transform opacity-0 scale-95"
      data-transition-enter-to="transform opacity-100 scale-100"
      data-transition-leave-active="transition ease-in duration-300"
      data-transition-leave-from="transform opacity-100 scale-100"
      data-transition-leave-to="transform opacity-0 scale-95"
      class="hidden rounded mx-auto shadow-xl max-w-xs bg-white m-1 p-8 origin-bottom text-center dark:bg-slate-700 dark:text-slate-200 text-slate-600">
        <div class="flex justify-center">
          <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
            <%= icon "rocket-launch", classes: "w-6 h-6 text-emerald-600 flex-shrink-0" %>
          </div>
        </div>
        <h3 id="single-action-modal-title" class="font-semibold text-xl text-slate-800 dark:text-slate-100">Time to launch</h3>

        <p class="text-sm mt-2 mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

        <button type="button" class="btn btn-primary w-full" data-action="click->modal#close">Launch away</button>
      </div>
    </div>
  </div>
</div>

%div{"data-controller" => "modal"}
  %button.btn.btn-primary{"data-action" => "click->modal#open", tabindex: "0", type: "button"}
    Open single action modal
  .hidden.fixed.inset-0.z-50.overflow-y-auto{"aria-labelledby" => "single-action-modal-title", "aria-modal" => "true", "data-modal-target" => "container", role: "dialog"}
    .h-screen.w-full.relative.flex.items-center.justify-center
      .hidden.rounded.mx-auto.shadow-xl.max-w-xs.bg-white.m-1.p-8.origin-bottom.text-center.dark:bg-slate-700.dark:text-slate-200.text-slate-600{"data-action" => "keyup@window->modal#closeWithEsc", "data-modal-target" => "content", "data-transition-enter-active" => "transition ease-out duration-300", "data-transition-enter-from" => "transform opacity-0 scale-95", "data-transition-enter-to" => "transform opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-300", "data-transition-leave-from" => "transform opacity-100 scale-100", "data-transition-leave-to" => "transform opacity-0 scale-95"}
        .flex.justify-center
          .w-12.h-12.rounded-full.bg-emerald-50.flex.items-center.justify-center.mb-3
          = icon "rocket-launch", classes: "w-6 h-6 text-emerald-600 flex-shrink-0"
        %h3#single-action-modal-title.font-semibold.text-xl.text-slate-800.dark:text-slate-100 Time to launch
        %p.text-sm.mt-2.mb-4 Lorem ipsum dolor sit amet consectetur adipisicing elit.
        %button.btn.btn-primary.w-full{"data-action" => "click->modal#close", type: "button"} Launch away

// app/javascript/controllers/modal_controller.js

import { Controller } from "@hotwired/stimulus"
import { useTransition, useClickOutside } from 'stimulus-use'

export default class extends Controller {
  static targets = ['container', 'content']

  connect() {
    useTransition(this, {
      element: this.contentTarget
    })

    useClickOutside(this, {
      element: this.contentTarget
    })
  }

  open(event) {
    event.preventDefault()
    this.enableAppearance()
    this.toggleTransition()
  }

  close(event) {
    event.preventDefault()
    this.leave()
    this.disableAppearance()
  }

  clickOutside(event) {
    const action = event.target.dataset.action
    if (action == "click->modal#open" || action == "click->modal#open:prevent") {
      return
    }
    this.close(event)
  }

  closeWithEsc(event){
    if (event.keyCode === 27 && !this.containerTarget.classList.contains('hidden')) {
      this.close(event)
    }
  }

  enableAppearance() {
    this.containerTarget.classList.add("bg-black/80")
    this.containerTarget.classList.remove('hidden')
  }

  disableAppearance() {
    this.containerTarget.classList.add('hidden')
    this.containerTarget.classList.remove("bg-black/80")
  }

  disconnect() {
    this.toggleTransition()
  }
}

<div data-controller="modal">
  <button type="button" data-action="click->modal#open:prevent" class="btn btn-primary" tabindex="0">Open centered dual action modal</button>

  <div
    aria-labelledby="dual-action-modal-title"
    aria-modal="true"
    data-modal-target="container"
    data-action="keyup@window->modal#closeWithEsc"
    class="hidden fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    >
    <div class="h-screen w-full relative flex items-center justify-center">
      <div
      data-modal-target="content"
      data-transition-enter-active="transition ease-out duration-300"
      data-transition-enter-from="transform opacity-0 scale-95"
      data-transition-enter-to="transform opacity-100 scale-100"
      data-transition-leave-active="transition ease-in duration-300"
      data-transition-leave-from="transform opacity-100 scale-100"
      data-transition-leave-to="transform opacity-0 scale-95"
      class="hidden rounded mx-auto shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom text-center dark:bg-slate-700 dark:text-slate-200">
        <div class="flex justify-center">
          <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
            <%= icon "rocket-launch", classes: "w-6 h-6 text-emerald-600 flex-shrink-0" %>
          </div>
        </div>
        <h3 id="dual-action-modal-title" class="font-semibold text-xl text-slate-800 dark:text-slate-100">Time to launch</h3>

        <p class="mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum accusamus laudantium quis asperiores, suscipit!</p>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <button class="btn btn-white w-full sm:order-1 order-2" data-action="click->modal#close">Cancel</button>
          <button class="btn btn-primary w-full sm:order-2 order-1">Proceed to launch</button>
        </div>
      </div>
    </div>
  </div>
</div>

%div{"data-controller" => "modal"}
  %button.btn.btn-primary{"data-action" => "click->modal#open:prevent", tabindex: "0", type: "button"} Open centered dual action modal
  .hidden.fixed.inset-0.z-50.overflow-y-auto{"aria-labelledby" => "dual-action-modal-title", "aria-modal" => "true", "data-action" => "keyup@window->modal#closeWithEsc", "data-modal-target" => "container", role: "dialog"}
    .h-screen.w-full.relative.flex.items-center.justify-center
      .hidden.rounded.mx-auto.shadow-xl.max-w-lg.bg-white.m-1.p-8.origin-bottom.text-center.dark:bg-slate-700.dark:text-slate-200{"data-modal-target" => "content", "data-transition-enter-active" => "transition ease-out duration-300", "data-transition-enter-from" => "transform opacity-0 scale-95", "data-transition-enter-to" => "transform opacity-100 scale-100", "data-transition-leave-active" => "transition ease-in duration-300", "data-transition-leave-from" => "transform opacity-100 scale-100", "data-transition-leave-to" => "transform opacity-0 scale-95"}
        .flex.justify-center
          .w-12.h-12.rounded-full.bg-emerald-50.flex.items-center.justify-center.mb-3
            = icon "rocket-launch", classes: "w-6 h-6 text-emerald-600 flex-shrink-0" %>
        %h3#dual-action-modal-title.font-semibold.text-xl.text-slate-800.dark:text-slate-100 Time to launch
        %p.mt-2.mb-4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum accusamus laudantium quis asperiores, suscipit!
        .grid.grid-cols-1.sm:grid-cols-2.gap-3
          %button.btn.btn-white.w-full.sm:order-1.order-2{"data-action" => "click->modal#close"} Cancel
          %button.btn.btn-primary.w-full.sm:order-2.order-1 Proceed to launch

// app/javascript/controllers/modal_controller.js

import { Controller } from "@hotwired/stimulus"
import { useTransition, useClickOutside } from 'stimulus-use'

export default class extends Controller {
  static targets = ['container', 'content']

  connect() {
    useTransition(this, {
      element: this.contentTarget
    })

    useClickOutside(this, {
      element: this.contentTarget
    })
  }

  open(event) {
    event.preventDefault()
    this.enableAppearance()
    this.toggleTransition()
  }

  close(event) {
    event.preventDefault()
    this.leave()
    this.disableAppearance()
  }

  clickOutside(event) {
    const action = event.target.dataset.action
    if (action == "click->modal#open" || action == "click->modal#open:prevent") {
      return
    }
    this.close(event)
  }

  closeWithEsc(event){
    if (event.keyCode === 27 && !this.containerTarget.classList.contains('hidden')) {
      this.close(event)
    }
  }

  enableAppearance() {
    this.containerTarget.classList.add("bg-black/80")
    this.containerTarget.classList.remove('hidden')
  }

  disableAppearance() {
    this.containerTarget.classList.add('hidden')
    this.containerTarget.classList.remove("bg-black/80")
  }

  disconnect() {
    this.toggleTransition()
  }
}