2024-05-02 07:24:31 -06:00
|
|
|
module MenusHelper
|
|
|
|
def contextual_menu(&block)
|
2024-08-27 17:06:41 -04:00
|
|
|
tag.div data: { controller: "menu" } do
|
2024-05-02 07:24:31 -06:00
|
|
|
concat contextual_menu_icon
|
|
|
|
concat contextual_menu_content(&block)
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2024-08-26 19:18:27 -04:00
|
|
|
def contextual_menu_modal_action_item(label, url, icon: "pencil-line", turbo_frame: :modal)
|
2024-06-21 16:23:28 -04:00
|
|
|
link_to url, class: "flex items-center rounded-lg text-gray-900 hover:bg-gray-50 py-2 px-3 gap-2", data: { turbo_frame: } do
|
|
|
|
concat(lucide_icon(icon, class: "shrink-0 w-5 h-5 text-gray-500"))
|
|
|
|
concat(tag.span(label, class: "text-sm"))
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
def contextual_menu_destructive_item(label, url, turbo_confirm: true, turbo_frame: nil)
|
|
|
|
button_to url,
|
|
|
|
method: :delete,
|
|
|
|
class: "flex items-center w-full rounded-lg text-red-500 hover:bg-red-500/5 py-2 px-3 gap-2",
|
|
|
|
data: { turbo_confirm: turbo_confirm, turbo_frame: } do
|
|
|
|
concat(lucide_icon("trash-2", class: "shrink-0 w-5 h-5"))
|
|
|
|
concat(tag.span(label, class: "text-sm"))
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2024-05-02 07:24:31 -06:00
|
|
|
private
|
|
|
|
def contextual_menu_icon
|
2024-08-27 17:06:41 -04:00
|
|
|
tag.button class: "flex hover:bg-gray-100 p-2 rounded cursor-pointer", data: { menu_target: "button" } do
|
2024-05-02 07:24:31 -06:00
|
|
|
lucide_icon "more-horizontal", class: "w-5 h-5 text-gray-500"
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
def contextual_menu_content(&block)
|
2024-08-27 17:06:41 -04:00
|
|
|
tag.div class: "z-50 border border-alpha-black-25 bg-white rounded-lg shadow-xs hidden",
|
|
|
|
data: { menu_target: "content" } do
|
2024-05-02 07:24:31 -06:00
|
|
|
capture(&block)
|
|
|
|
end
|
|
|
|
end
|
|
|
|
end
|