phlexy_ui 0.1.7 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9af209a8c35542f7bce170fc57d12aad6094383f5b2d02e99356e65a2303094
-  data.tar.gz: 66de1dc598260d76985c4167f4b6be257079b58412c0c292f0297cf9f7e6220f
+  metadata.gz: 2442fc77587b1b97a19ebcbd234473202f73dae6f7acfc3feedb570e57525944
+  data.tar.gz: b77cf08ad3f977de8fcd04f1ccb5f090a638beb36353c6b1ef2a7ac2f55c1831
 SHA512:
-  metadata.gz: 43b1563b99263306f57a817a06717351eb50531a5bda3de368021937ad2f80afa0d7393b26639ad5f9c64e84b642404341ac4f89de502c333ad23a12cb450715
-  data.tar.gz: 87cc196de8b27500fd6b087a0a8b75bfc7b0f27b5f9dc7a4041a817c2db0aff23abd2df33f1d231fc09cb8af226b5df87d6a5a055d2ad8fb1a2653d8ca656e1d
+  metadata.gz: 525b56ee4587186d2cbfdd8a5180b2975f7bd76954e852f039745ee029d8f62eec5a88688bc14e2c1f8d5b8d63dad7208477e8bee2c71c15f430d2dad8270aea
+  data.tar.gz: e856be656fec15626d2982824587f03b6fd61d3b13f22707b28153a6267fbfc7f59ee1fa85c5854c9679aac651d8b54398212395f110d925379f96dca1d9bda9

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,54 @@ module PhlexyUI
         base_modifiers:,
         options:
       ).then do |classes|
-        public_send(as, class: classes, **options, &)
+        if modal
+          build_button_via_unsafe_raw(classes, &)
+        else
+          public_send(as, class: classes, **options, &)
+        end
       end
     end
 
     private
 
+    attr_reader :modal
+
+    # TODO: Remove this once Phlex 2.0 is released.
+    #
+    # The cleanest way to do this is with a single:
+    #
+    # onclick: "#{Phlex::Escape.html_escape(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("#{Phlex::Escape.html_escape(modal)}.showModal()")
+    def build_button_via_unsafe_raw(classes, &)
+      classes = Phlex::Escape.html_escape(classes.join(" "))
+      @options = options
+        .merge(onclick: "#{modal}.showModal()")
+        .reduce("") do |acc, (k, v)|
+        if k == :data
+          v.each do |k, v|
+            k = Phlex::Escape.html_escape(k)
+            v = Phlex::Escape.html_escape(v)
+            acc += " data-#{k}=\"#{v}\""
+          end
+          acc
+        else
+          k = Phlex::Escape.html_escape(k)
+          v = Phlex::Escape.html_escape(v)
+          "#{acc} #{k}=\"#{v}\""
+        end
+      end.strip
+
+      unsafe_raw %(<button class="#{classes}" #{options}>#{capture(&)}</button>)
+    end
+
     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.9"
 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.9
 platform: ruby
 authors:
 - David Alejandro Aguilar Ramos
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-26 00:00:00.000000000 Z
+date: 2024-09-28 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