phlexy_ui 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9af209a8c35542f7bce170fc57d12aad6094383f5b2d02e99356e65a2303094
-  data.tar.gz: 66de1dc598260d76985c4167f4b6be257079b58412c0c292f0297cf9f7e6220f
+  metadata.gz: 3e6545417ad6baf0ab1e8b33c1c23ab3513089c787ad274f08fb3094a43d9a44
+  data.tar.gz: 13c7469dac369c048a1f78cebda90e9035457326b072b7ae2d3f6fb4bca8c35f
 SHA512:
-  metadata.gz: 43b1563b99263306f57a817a06717351eb50531a5bda3de368021937ad2f80afa0d7393b26639ad5f9c64e84b642404341ac4f89de502c333ad23a12cb450715
-  data.tar.gz: 87cc196de8b27500fd6b087a0a8b75bfc7b0f27b5f9dc7a4041a817c2db0aff23abd2df33f1d231fc09cb8af226b5df87d6a5a055d2ad8fb1a2653d8ca656e1d
+  metadata.gz: 870e25f3780ed7cadf59047cfe78330a429ee0f4b0e27c5f635be30df4792165304b0acd9343f341efdd22bcde9aeae5d420ce67b467c16a8bad5613efd2aa17
+  data.tar.gz: 4a3dbfa5b575f9aaa408e216ee635fd9d23a5eae619acf5be7c92e8438683f964ba72cbc94b767e1f32375d2e791bf804916cf33320666da76e2b1ba30faf40e

data/lib/phlexy_ui/button.rb

@@ -2,9 +2,10 @@
 
 module PhlexyUI
   class Button < Base
-    def initialize(*, as: :button, **)
+    def initialize(*, as: :button, modal: nil, **)
       super(*, **)
       @as = as
+      @modal = modal
     end
 
     def view_template(&)
@@ -14,14 +15,61 @@ module PhlexyUI
         base_modifiers:,
         options:
       ).then do |classes|
+        if modal
+          # TODO: Remove this abomination once Phlex 2.0 is released.
+          #
+          # The cleanest way to do this is with a single:
+          #
+          # onclick: "#{modal}.showModal()"
+          #
+          # However, currently, Phlex does not allow you to use the "onclick"
+          # attribute.
+          #
+          # Once Phlex 2.0 is released, it will add a #safe method
+          # that will allow us to replace this with a single line:
+          #
+          # onclick: safe("#{modal}.showModal()")
+          #
+          # For now, at least this only runs once and uses event delegation
+          # so that it only adds a single event listener to the document.body.
+          #
+          # The downside is a bigger HTML payload.
+          options[:data] ||= {}
+          options[:data][:modal] = modal
+          script do
+            unsafe_raw <<~JS
+              // Will be replaced with a single line on the <button> once Phlex 2.0 is released.
+              (() => {
+                if (window.PhlexyUI && window.PhlexyUI.modalInitialized) {
+                  return;
+                }
+                
+                document.body.addEventListener("click", (event) => {
+                  if (event.target.tagName === 'BUTTON' && 
+                      event.target.dataset.modal) {
+                    const modal = document.getElementById(event.target.dataset.modal);
+                    if (modal) {
+                      modal.showModal();
+                    }
+                  }
+                });
+                
+                if (!window.PhlexyUI) window.PhlexyUI = {};
+                window.PhlexyUI.modalInitialized = true;
+              })();
+            JS
+          end
+        end
+
         public_send(as, class: classes, **options, &)
       end
     end
 
     private
 
+    attr_reader :modal
+
     register_modifiers(
-      # Modifiers
       # "sm:no-animation"
       # "md:no-animation"
       # "lg:no-animation"

data/lib/phlexy_ui/modal.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Modal < Base
+    def initialize(*, id:, **)
+      super(*, **)
+      @id = id
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :modal,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        dialog(id:, class: classes, **options, &)
+      end
+    end
+
+    def body(*, as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"modal-box",
+        options:
+      ).then do |classes|
+        if base_modifiers.include?(:tap_outside_to_close)
+          public_send(as, class: classes, **options, &)
+          backdrop
+        else
+          public_send(as, class: classes, **options, &)
+        end
+      end
+    end
+
+    def action(*, as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"modal-action",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def backdrop(*, **options, &)
+      generate_classes!(
+        component_html_class: :"modal-backdrop",
+        options:
+      ).then do |classes|
+        form method: :dialog, class: classes, **options do
+          button
+        end
+      end
+    end
+
+    def close_button(*, **, &)
+      form method: :dialog do
+        render PhlexyUI::Button.new(*, **, &)
+      end
+    end
+
+    private
+
+    register_modifiers(
+      # "sm:modal-open"
+      # "md:modal-open"
+      # "lg:modal-open"
+      open: "modal-open",
+      # "sm:modal-top"
+      # "md:modal-top"
+      # "lg:modal-top"
+      top: "modal-top",
+      # "sm:modal-bottom"
+      # "md:modal-bottom"
+      # "lg:modal-bottom"
+      bottom: "modal-bottom",
+      # "sm:modal-middle"
+      # "md:modal-middle"
+      # "lg:modal-middle"
+      middle: "modal-middle"
+    )
+  end
+end

data/lib/phlexy_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexyUI
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: phlexy_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - David Alejandro Aguilar Ramos
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-26 00:00:00.000000000 Z
+date: 2024-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -113,6 +113,7 @@ files:
 - lib/phlexy_ui/mask.rb
 - lib/phlexy_ui/menu.rb
 - lib/phlexy_ui/menu_item.rb
+- lib/phlexy_ui/modal.rb
 - lib/phlexy_ui/navbar.rb
 - lib/phlexy_ui/sub_menu.rb
 - lib/phlexy_ui/tab.rb