phlexy_ui 0.1.6 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afd51b066ca04f9497e96ce00132d883007730221925fab4bfb3d6d5cb57aec2
-  data.tar.gz: fd72b9a2411ec3eef6f9f9b5ca7ad88a3cba8c639d6e79e9a4d3b1500b545788
+  metadata.gz: 3e6545417ad6baf0ab1e8b33c1c23ab3513089c787ad274f08fb3094a43d9a44
+  data.tar.gz: 13c7469dac369c048a1f78cebda90e9035457326b072b7ae2d3f6fb4bca8c35f
 SHA512:
-  metadata.gz: 93938b5e9e0365f144100e4d00ff757a33f50f7b7a264326ac0709506d5a4006fed131dda192d0546a3969ba777d27cfe59bf63a3f657f2cd456b2ae32ac7cf2
-  data.tar.gz: 3c9652fa3434d8deb8ddf5eb51c86a631d93057883630ea54b5b790a0ce8b8da3f414806b84c49fc31fe292dd2864b4c5a5d24c0a7e937712376768cec7c48a3
+  metadata.gz: 870e25f3780ed7cadf59047cfe78330a429ee0f4b0e27c5f635be30df4792165304b0acd9343f341efdd22bcde9aeae5d420ce67b467c16a8bad5613efd2aa17
+  data.tar.gz: 4a3dbfa5b575f9aaa408e216ee635fd9d23a5eae619acf5be7c92e8438683f964ba72cbc94b767e1f32375d2e791bf804916cf33320666da76e2b1ba30faf40e

data/lib/phlexy_ui/avatar_group.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class AvatarGroup < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :"avatar-group",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def avatar(*, **, &)
+      render PhlexyUI::Avatar.new(*, **, &)
+    end
+  end
+end

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/checkbox.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Checkbox < Base
+    def view_template(&)
+      attributes = generate_attributes(base_modifiers, ATTRIBUTES_MAP)
+
+      generate_classes!(
+        component_html_class: :checkbox,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        input(type: :checkbox, class: classes, **options, **attributes, &)
+      end
+    end
+
+    private
+
+    ATTRIBUTES_MAP = {
+      checked: true,
+      disabled: true
+    }.freeze
+
+    register_modifiers(
+      # "sm:checkbox-primary"
+      # "md:checkbox-primary"
+      # "lg:checkbox-primary"
+      primary: "checkbox-primary",
+      # "sm:checkbox-secondary"
+      # "md:checkbox-secondary"
+      # "lg:checkbox-secondary"
+      secondary: "checkbox-secondary",
+      # "sm:checkbox-accent"
+      # "md:checkbox-accent"
+      # "lg:checkbox-accent"
+      accent: "checkbox-accent",
+      # "sm:checkbox-success"
+      # "md:checkbox-success"
+      # "lg:checkbox-success"
+      success: "checkbox-success",
+      # "sm:checkbox-warning"
+      # "md:checkbox-warning"
+      # "lg:checkbox-warning"
+      warning: "checkbox-warning",
+      # "sm:checkbox-info"
+      # "md:checkbox-info"
+      # "lg:checkbox-info"
+      info: "checkbox-info",
+      # "sm:checkbox-error"
+      # "md:checkbox-error"
+      # "lg:checkbox-error"
+      error: "checkbox-error",
+      # "sm:checkbox-lg"
+      # "md:checkbox-lg"
+      # "lg:checkbox-lg"
+      lg: "checkbox-lg",
+      # "sm:checkbox-md"
+      # "md:checkbox-md"
+      # "lg:checkbox-md"
+      md: "checkbox-md",
+      # "sm:checkbox-sm"
+      # "md:checkbox-sm"
+      # "lg:checkbox-sm"
+      sm: "checkbox-sm",
+      # "sm:checkbox-xs"
+      # "md:checkbox-xs"
+      # "lg:checkbox-xs"
+      xs: "checkbox-xs"
+    )
+  end
+end

data/lib/phlexy_ui/form_control.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class FormControl < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: "form-control",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+  end
+end

data/lib/phlexy_ui/label.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Label < Base
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :label,
+        options:
+      ).then do |classes|
+        label(class: classes, **options, &)
+      end
+    end
+
+    def text(as: :span, **options, &)
+      generate_classes!(
+        component_html_class: :"label-text",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+  end
+end

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.6"
+  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.6
+  version: 0.1.8
 platform: ruby
 authors:
 - David Alejandro Aguilar Ramos
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-09-24 00:00:00.000000000 Z
+date: 2024-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -95,20 +95,25 @@ files:
 - lib/phlexy_ui.rb
 - lib/phlexy_ui/attribute_set.rb
 - lib/phlexy_ui/avatar.rb
+- lib/phlexy_ui/avatar_group.rb
 - lib/phlexy_ui/badge.rb
 - lib/phlexy_ui/base.rb
 - lib/phlexy_ui/button.rb
 - lib/phlexy_ui/card.rb
+- lib/phlexy_ui/checkbox.rb
 - lib/phlexy_ui/class_list.rb
 - lib/phlexy_ui/collapsible_sub_menu.rb
 - lib/phlexy_ui/configurable.rb
 - lib/phlexy_ui/drawer.rb
 - lib/phlexy_ui/dropdown.rb
+- lib/phlexy_ui/form_control.rb
+- lib/phlexy_ui/label.rb
 - lib/phlexy_ui/link.rb
 - lib/phlexy_ui/loading.rb
 - 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