module UltimateTurboModal::Flavors class Tailwind < UltimateTurboModal::Base private def modal(&) outer_divs do div_content do div_header div_main(&) div_footer if footer? end end end def outer_divs(&) div_dialog do div_overlay div_outer do div_inner(&) end end end def div_dialog(&) div(id: "modal-container", class: "relative group", role: "dialog", aria: { labeled_by: "modal-title-h", modal: true }, data: { controller: "modal", modal_target: "container", modal_advance_url_value: advance_url, action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked", transition_enter: "ease-out duration-100", transition_enter_start: "opacity-0", transition_enter_end: "opacity-100", transition_leave: "ease-in duration-50", transition_leave_start: "opacity-100", transition_leave_end: "opacity-0", padding: padding?.to_s, title: title?.to_s, header: header?.to_s, close_button: close_button?.to_s, header_divider: header_divider?.to_s, footer_divider: footer_divider?.to_s }, &) end def div_overlay div(id: "modal-overlay", class: "fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity dark:bg-opacity-80 z-40") end def div_outer(&) div(id: "modal-outer", class: "fixed inset-0 z-50 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4", &) end def div_inner(&) div(id: "modal-inner", class: "flex min-h-full items-center justify-center p-1 sm:p-4", &) end def div_content(&) div(id: "modal-content", class: "relative transform overflow-hidden rounded-lg bg-white text-left shadow transition-all sm:my-8 sm:max-w-3xl dark:bg-gray-800 dark:text-white", data: {modal_target: "content"}, &) end def div_main(&) div(id: "modal-main", class: "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2", &) end def header_block return if @header_block.blank? render @header_block nil end def div_header(&) div(id: "modal-header", class: "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]:border-b group-data-[header=false]:absolute") do div_title button_close end end def div_title div(id: "modal-title", class: "pl-4") do if @title_block.present? render @title_block else h3(id: "modal-title-h", class: "group-data-[title=false]:hidden text-lg font-semibold text-gray-900 dark:text-white") { @title } end end end def div_footer div(id: "modal-footer", class: "flex p-4 rounded-b dark:border-gray-600 group-data-[footer-divider=true]:border-t") do render @footer end end def button_close div(id: "modal-close", class: "mr-4 group-data-[close-button=false]:hidden") do close_button_tag do icon_close span(class: "sr-only") { "Close modal" } end end end def close_button_tag(&) button(type: "button", aria: {label: "close"}, class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", data: { action: "modal#hideModal" }, &) end def icon_close svg(class: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20") do |s| s.path( fill_rule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clip_rule: "evenodd" ) end end end end