hakumi_components 0.1.16.pre → 0.1.17.pre

data/app/components/hakumi/mentions/component.rb

@@ -116,7 +116,6 @@ module Hakumi
           placeholder: @placeholder,
           disabled: @disabled ? true : nil,
           readonly: @readonly ? true : nil,
-          required: @required ? true : nil,
           "aria-invalid": has_error? ? "true" : nil,
           "aria-describedby": describedby_ids,
           data: {

data/app/components/hakumi/modal/component.html.erb

@@ -0,0 +1,40 @@
+<%= content_tag(:div, class: classes, style: style, data: data_attributes, **@html_attributes.except(:class, :style, :data)) do %>
+  <% if @mask %>
+    <div class="hakumi-modal-mask" data-hakumi--modal-target="mask" data-action="click->hakumi--modal#handleMaskClick"></div>
+  <% end %>
+
+  <div class="hakumi-modal-wrap" tabindex="-1" data-hakumi--modal-target="wrapper" data-action="keydown->hakumi--modal#handleKeydown click->hakumi--modal#handleWrapperClick">
+    <div class="<%= modal_classes %>" style="<%= modal_style %>" role="dialog" aria-modal="true">
+      <div class="hakumi-modal-content">
+        <% if @closable %>
+          <button type="button" class="hakumi-modal-close" aria-label="Close" data-hakumi-action="close">
+            <span class="hakumi-modal-close-x">
+              <%= render Hakumi::Icon::Component.new(name: :close) %>
+            </span>
+          </button>
+        <% end %>
+
+        <% if render_header? %>
+          <div class="hakumi-modal-header">
+            <% if header? %>
+              <div class="hakumi-modal-title"><%= header %></div>
+            <% end %>
+            <% if extra? %>
+              <div class="hakumi-modal-extra"><%= extra %></div>
+            <% end %>
+          </div>
+        <% end %>
+
+        <div class="hakumi-modal-body">
+          <%= body_content %>
+        </div>
+
+        <% if render_footer? %>
+          <div class="hakumi-modal-footer">
+            <%= footer %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/hakumi/modal/component.rb

@@ -3,73 +3,53 @@
 module Hakumi
   module Modal
     class Component < Hakumi::BaseComponent
-      # Extracts locals from controller params for dynamic rendering
+      # Slots for content
+      renders_one :header
+      renders_one :body
+      renders_one :footer
+      renders_one :extra
+
+      # Extracts locals from controller params for programmatic rendering
       # @param params [ActionController::Parameters]
       # @return [Hash] Arguments for initialize
       def self.extract_controller_locals(params)
         {
-          title: params[:title].presence || "Modal",
-          message: params[:message].presence || params[:body].presence || "Generated modal content.",
+          title: params[:title],
+          message: params[:message],
           open: ActiveModel::Type::Boolean.new.cast(params[:open]),
-          ok_text: params[:ok_text].presence || "OK",
-          cancel_text: params[:cancel_text].presence || "Cancel"
+          width: params[:width]&.to_i,
+          centered: ActiveModel::Type::Boolean.new.cast(params[:centered]),
+          closable: ActiveModel::Type::Boolean.new.cast(params[:closable]),
+          mask: ActiveModel::Type::Boolean.new.cast(params[:mask]),
+          mask_closable: ActiveModel::Type::Boolean.new.cast(params[:mask_closable]),
+          keyboard: ActiveModel::Type::Boolean.new.cast(params[:keyboard]),
+          confirm_loading: ActiveModel::Type::Boolean.new.cast(params[:confirm_loading])
         }
       end
+
       def initialize(
         open: false,
-        title: nil,
         width: 520,
         centered: false,
-        footer: nil,
         closable: true,
         mask: true,
         mask_closable: true,
         keyboard: true,
-        on_ok: nil,
-        on_cancel: nil,
         confirm_loading: false,
-        ok_text: "OK",
-        cancel_text: "Cancel",
-        ok_button_props: {},
-        cancel_button_props: {},
         **html_attributes
       )
         @open = open
-        @title = title
         @width = width
         @centered = centered
-        @footer = footer
         @closable = closable
         @mask = mask
         @mask_closable = mask_closable
         @keyboard = keyboard
-        @on_ok = on_ok
-        @on_cancel = on_cancel
         @confirm_loading = confirm_loading
-        @ok_text = ok_text
-        @cancel_text = cancel_text
-        @ok_button_props = ok_button_props || {}
-        @cancel_button_props = cancel_button_props || {}
         @html_attributes = html_attributes
         super()
       end
 
-      def call
-        # Merge html_attributes with our default attributes
-        options = @html_attributes.merge(
-          class: classes,
-          style: style,
-          data: data_attributes
-        )
-
-        content_tag(:div, options) do
-          safe_join([
-            render_mask,
-            render_wrapper
-          ])
-        end
-      end
-
       private
 
       def classes
@@ -92,27 +72,6 @@ module Hakumi
         }.merge(@html_attributes[:data] || {})
       end
 
-      def render_mask
-        return unless @mask
-
-        content_tag(:div, "", class: "hakumi-modal-mask", data: { hakumi__modal_target: "mask", action: "click->hakumi--modal#handleMaskClick" })
-      end
-
-      def render_wrapper
-        content_tag(:div, class: "hakumi-modal-wrap", tabindex: -1, data: { hakumi__modal_target: "wrapper", action: "keydown->hakumi--modal#handleKeydown click->hakumi--modal#handleWrapperClick" }) do
-          content_tag(:div, class: modal_classes, style: modal_style, role: "dialog", aria: { modal: true }) do
-            content_tag(:div, class: "hakumi-modal-content") do
-              safe_join([
-                render_close_icon,
-                render_header,
-                render_body,
-                render_footer
-              ])
-            end
-          end
-        end
-      end
-
       def modal_classes
         classes = [ "hakumi-modal" ]
         classes << "hakumi-modal-centered" if @centered
@@ -123,54 +82,17 @@ module Hakumi
         "width: #{@width}px;"
       end
 
-      def render_close_icon
-        return unless @closable
-
-        content_tag(:button, type: "button", class: "hakumi-modal-close", aria: { label: "Close" }, data: { action: "click->hakumi--modal#close" }) do
-          content_tag(:span, class: "hakumi-modal-close-x") do
-            render Hakumi::Icon::Component.new(name: :close)
-          end
-        end
-      end
-
-      def render_header
-        return if @title.blank?
-
-        content_tag(:div, class: "hakumi-modal-header") do
-          content_tag(:div, @title, class: "hakumi-modal-title")
-        end
-      end
-
-      def render_body
-        content_tag(:div, content, class: "hakumi-modal-body")
+      def render_header?
+        header? || @closable || extra?
       end
 
-      def render_footer
-        return if @footer == false
-
-        content_tag(:div, class: "hakumi-modal-footer") do
-          if @footer.present?
-            @footer
-          else
-            default_footer
-          end
-        end
+      def render_footer?
+        footer?
       end
 
-      def default_footer
-        safe_join([
-          render(Hakumi::Button::Component.new(
-            type: :default,
-            **@cancel_button_props.except(:data),
-            data: { "hakumi-modal-close": true }.merge(@cancel_button_props[:data] || {})
-          )) { @cancel_text },
-          render(Hakumi::Button::Component.new(
-            type: :primary,
-            loading: @confirm_loading,
-            **@ok_button_props.except(:data),
-            data: { "hakumi-modal-ok": true }.merge(@ok_button_props[:data] || {})
-          )) { @ok_text }
-        ])
+      # Content resolution: body slot > block content
+      def body_content
+        body? ? body : content
       end
     end
   end

data/app/components/hakumi/modal/confirm/component.html.erb

@@ -0,0 +1,23 @@
+<%= render Hakumi::Modal::Component.new(
+  id: @id,
+  open: @open,
+  mask_closable: false,
+  closable: false,
+  **@html_attributes
+) do |modal| %>
+  <% modal.with_header do %>
+    <%= @title %>
+  <% end %>
+
+  <div class="hakumi-modal-confirm-body-wrapper">
+    <%= render Hakumi::Icon::Component.new(name: icon_name, theme: :filled, color: icon_color, size: 22) %>
+    <div class="hakumi-modal-confirm-content">
+      <p><%= content %></p>
+    </div>
+  </div>
+
+  <% modal.with_footer do %>
+    <%= render(Hakumi::Button::Component.new(data: { "hakumi-action": "cancel" })) { "Cancel" } %>
+    <%= render(Hakumi::Button::Component.new(type: :primary, data: { "hakumi-action": "confirm" })) { "OK" } %>
+  <% end %>
+<% end %>

data/app/components/hakumi/modal/confirm/component.rb

@@ -4,58 +4,40 @@ module Hakumi
   module Modal
     module Confirm
       class Component < Hakumi::BaseComponent
-        # Extracts locals from controller params for dynamic rendering
-        # @param params [ActionController::Parameters]
-        # @return [Hash] Arguments for initialize
-        def self.extract_controller_locals(params)
-          {
-            title: params[:title].presence || "Confirm",
-            message: params[:message].presence || params[:body].presence || "Generated confirm content.",
-            open: ActiveModel::Type::Boolean.new.cast(params[:open]),
-            ok_text: params[:ok_text].presence || "OK",
-            cancel_text: params[:cancel_text].presence || "Cancel"
-          }
-        end
         def initialize(
           id:,
-          title: "Confirm",
-          message: nil,
           open: false,
-          ok_text: "OK",
-          cancel_text: "Cancel",
+          title: "Confirm",
+          type: :confirm,
           **html_attributes
         )
           @id = id
-          @title = title
-          @message = message
           @open = open
-          @ok_text = ok_text
-          @cancel_text = cancel_text
+          @title = title
+          @type = type
           @html_attributes = html_attributes
           super()
         end
 
-        def call
-          render(Hakumi::Modal::Component.new(
-            id: @id,
-            title: @title,
-            open: @open,
-            mask_closable: false,
-            ok_text: @ok_text,
-            cancel_text: @cancel_text,
-            ok_button_props: { data: { "hakumi-modal-close": true } },
-            on_ok: "hakumi--modal#close",
-            on_cancel: "hakumi--modal#close",
-            **@html_attributes
-          )) do
-            content_tag(:div, style: "display: flex; align-items: flex-start; gap: 12px;") do
-              safe_join([
-                render(Hakumi::Icon::Component.new(name: :exclamation_circle, theme: :filled, color: "#faad14", size: 22)),
-                content_tag(:div) do
-                  content_tag(:p, @message || content, style: "margin: 0;")
-                end
-              ])
-            end
+        private
+
+        def icon_name
+          case @type
+          when :info then :info_circle
+          when :success then :check_circle
+          when :error then :close_circle
+          when :warning then :exclamation_circle
+          else :exclamation_circle
+          end
+        end
+
+        def icon_color
+          case @type
+          when :info then "#1890ff"
+          when :success then "#52c41a"
+          when :error then "#ff4d4f"
+          when :warning then "#faad14"
+          else "#faad14"
           end
         end
       end

data/app/components/hakumi/modal/error/component.rb

@@ -22,23 +22,24 @@ module Hakumi
         end
 
         def call
-          footer_content = capture do
-            render(Hakumi::Button::Component.new(type: :primary, danger: true, data: { "hakumi-modal-close": true })) { @ok_text }
-          end
-
           render(Hakumi::Modal::Component.new(
             id: @id,
-            title: @title,
             open: @open,
-            footer: footer_content,
-            on_ok: "hakumi--modal#close",
+            closable: false,
+            mask_closable: false,
             **@html_attributes
-          )) do
-            content_tag(:div, style: "display: flex; align-items: flex-start; gap: 12px;") do
+          )) do |modal|
+            modal.with_header { @title }
+
+            modal.with_footer do
+              render(Hakumi::Button::Component.new(type: :primary, danger: true, data: { "hakumi-action": "close" })) { @ok_text }
+            end
+
+            content_tag(:div, class: "hakumi-modal-confirm-body-wrapper") do
               safe_join([
                 render(Hakumi::Icon::Component.new(name: :close_circle, theme: :filled, color: "#ff4d4f", size: 22)),
-                content_tag(:div) do
-                  content_tag(:p, @message || content, style: "margin: 0;")
+                content_tag(:div, class: "hakumi-modal-confirm-content") do
+                  content_tag(:p, @message || content)
                 end
               ])
             end

data/app/components/hakumi/modal/info/component.rb

@@ -22,23 +22,24 @@ module Hakumi
         end
 
         def call
-          footer_content = capture do
-            render(Hakumi::Button::Component.new(type: :primary, data: { "hakumi-modal-close": true })) { @ok_text }
-          end
-
           render(Hakumi::Modal::Component.new(
             id: @id,
-            title: @title,
             open: @open,
-            footer: footer_content,
-            on_ok: "hakumi--modal#close",
+            closable: false,
+            mask_closable: false,
             **@html_attributes
-          )) do
-            content_tag(:div, style: "display: flex; align-items: flex-start; gap: 12px;") do
+          )) do |modal|
+            modal.with_header { @title }
+
+            modal.with_footer do
+              render(Hakumi::Button::Component.new(type: :primary, data: { "hakumi-action": "close" })) { @ok_text }
+            end
+
+            content_tag(:div, class: "hakumi-modal-confirm-body-wrapper") do
               safe_join([
                 render(Hakumi::Icon::Component.new(name: :info_circle, theme: :filled, color: "#1890ff", size: 22)),
-                content_tag(:div) do
-                  content_tag(:p, @message || content, style: "margin: 0;")
+                content_tag(:div, class: "hakumi-modal-confirm-content") do
+                  content_tag(:p, @message || content)
                 end
               ])
             end

data/app/components/hakumi/modal/success/component.rb

@@ -22,23 +22,24 @@ module Hakumi
         end
 
         def call
-          footer_content = capture do
-            render(Hakumi::Button::Component.new(type: :primary, data: { "hakumi-modal-close": true })) { @ok_text }
-          end
-
           render(Hakumi::Modal::Component.new(
             id: @id,
-            title: @title,
             open: @open,
-            footer: footer_content,
-            on_ok: "hakumi--modal#close",
+            closable: false,
+            mask_closable: false,
             **@html_attributes
-          )) do
-            content_tag(:div, style: "display: flex; align-items: flex-start; gap: 12px;") do
+          )) do |modal|
+            modal.with_header { @title }
+
+            modal.with_footer do
+              render(Hakumi::Button::Component.new(type: :primary, data: { "hakumi-action": "close" })) { @ok_text }
+            end
+
+            content_tag(:div, class: "hakumi-modal-confirm-body-wrapper") do
               safe_join([
                 render(Hakumi::Icon::Component.new(name: :check_circle, theme: :filled, color: "#52c41a", size: 22)),
-                content_tag(:div) do
-                  content_tag(:p, @message || content, style: "margin: 0;")
+                content_tag(:div, class: "hakumi-modal-confirm-content") do
+                  content_tag(:p, @message || content)
                 end
               ])
             end

data/app/components/hakumi/modal/warning/component.rb

@@ -26,20 +26,25 @@ module Hakumi
         def call
           render(Hakumi::Modal::Component.new(
             id: @id,
-            title: @title,
             open: @open,
-            ok_text: @ok_text,
-            cancel_text: @cancel_text,
-            ok_button_props: { data: { "hakumi-modal-close": true } },
-            on_ok: "hakumi--modal#close",
-            on_cancel: "hakumi--modal#close",
+            closable: false,
+            mask_closable: false,
             **@html_attributes
-          )) do
-            content_tag(:div, style: "display: flex; align-items: flex-start; gap: 12px;") do
+          )) do |modal|
+            modal.with_header { @title }
+
+            modal.with_footer do
+              safe_join([
+                render(Hakumi::Button::Component.new(data: { "hakumi-action": "cancel" })) { @cancel_text },
+                render(Hakumi::Button::Component.new(type: :primary, data: { "hakumi-action": "confirm" })) { @ok_text }
+              ])
+            end
+
+            content_tag(:div, class: "hakumi-modal-confirm-body-wrapper") do
               safe_join([
                 render(Hakumi::Icon::Component.new(name: :warning, theme: :filled, color: "#faad14", size: 22)),
-                content_tag(:div) do
-                  content_tag(:p, @message || content, style: "margin: 0;")
+                content_tag(:div, class: "hakumi-modal-confirm-content") do
+                  content_tag(:p, @message || content)
                 end
               ])
             end

data/app/components/hakumi/popconfirm/component.html.erb

@@ -1,10 +1,10 @@
-<div class="<%= wrapper_classes %>" data-controller="hakumi--popconfirm" <%= tag.attributes(data: data_attributes) %> <%= tag.attributes(@html_options.except(:class, :data)) %>>
+<div class="<%= wrapper_classes %>" <%= tag.attributes(data: data_attributes.merge(@html_options[:data] || {})) %> <%= tag.attributes(@html_options.except(:class, :data)) %>>
   <span class="hakumi-popconfirm-trigger" data-hakumi--popconfirm-target="trigger">
     <%= content %>
   </span>
 
-  <div class="hakumi-popconfirm" 
-       data-hakumi--popconfirm-target="popover" 
+  <div class="hakumi-popconfirm"
+       data-hakumi--popconfirm-target="popover"
        role="tooltip"
        style="display: none;">
     <div class="hakumi-popconfirm-content">
@@ -13,40 +13,40 @@
         <div class="hakumi-popconfirm-inner-content">
           <div class="hakumi-popconfirm-message">
             <span class="hakumi-popconfirm-message-icon">
-              <% if @icon %>
-                <%= @icon %>
+              <% if icon? %>
+                <%= icon %>
               <% else %>
-                <%= render Hakumi::Icon::Component.new(name: "exclamation-circle", theme: :filled) %>
+                <%= default_icon_element %>
               <% end %>
             </span>
-            <div class="hakumi-popconfirm-title"><%= @title %></div>
+            <% if title? %>
+              <div class="hakumi-popconfirm-title"><%= title %></div>
+            <% end %>
           </div>
-          
-          <% if @description %>
+
+          <% if description? %>
             <div class="hakumi-popconfirm-description">
-              <%= @description %>
+              <%= description %>
             </div>
           <% end %>
 
           <div class="hakumi-popconfirm-buttons">
-            <% if @show_cancel %>
+            <% if buttons? %>
+              <%= buttons %>
+            <% else %>
+              <% if @show_cancel %>
+                <%= render(Hakumi::Button::Component.new(
+                  size: :small,
+                  data: { "hakumi-action": "cancel" }
+                )) { "Cancel" } %>
+              <% end %>
+
               <%= render(Hakumi::Button::Component.new(
+                type: @ok_type,
                 size: :small,
-                data: { 
-                  action: "click->hakumi--popconfirm#cancel",
-                  hakumi__popconfirm_target: "cancelButton"
-                }
-              )) { @cancel_text } %>
+                data: { "hakumi-action": "confirm" }
+              )) { "OK" } %>
             <% end %>
-            
-            <%= render(Hakumi::Button::Component.new(
-              type: @ok_type,
-              size: :small,
-              data: { 
-                action: "click->hakumi--popconfirm#confirm",
-                hakumi__popconfirm_target: "okButton"
-              }
-            )) { @ok_text } %>
           </div>
         </div>
       </div>

data/app/components/hakumi/popconfirm/component.rb

@@ -13,46 +13,26 @@ module Hakumi
 
       TRIGGERS = %w[click hover focus].freeze
 
-      def self.extract_controller_locals(params)
-        {
-          title: params[:title],
-          description: params[:description],
-          ok_text: params[:ok_text],
-          cancel_text: params[:cancel_text],
-          ok_type: params[:ok_type],
-          placement: params[:placement],
-          trigger: params[:trigger],
-          disabled: params[:disabled],
-          show_cancel: params[:show_cancel] != false,
-          icon: params[:icon],
-          auto_adjust_overflow: params[:auto_adjust_overflow] != false
-        }
-      end
+      # Slots for content
+      renders_one :icon
+      renders_one :title
+      renders_one :description
+      renders_one :buttons
 
       def initialize(
-        title: nil,
-        description: nil,
-        ok_text: "OK",
-        cancel_text: "Cancel",
-        ok_type: :primary,
         placement: "top",
         trigger: "click",
         disabled: false,
+        ok_type: :primary,
         show_cancel: true,
-        icon: nil,
         auto_adjust_overflow: true,
         **html_options
       )
-        @title = title
-        @description = description
-        @ok_text = ok_text
-        @cancel_text = cancel_text
-        @ok_type = ok_type
         @placement = placement
         @trigger = trigger
         @disabled = disabled
+        @ok_type = ok_type
         @show_cancel = show_cancel
-        @icon = icon
         @auto_adjust_overflow = auto_adjust_overflow
         @html_options = html_options
 
@@ -83,6 +63,10 @@ module Hakumi
         validate_inclusion!(:placement, PLACEMENTS)
         validate_inclusion!(:trigger, TRIGGERS)
       end
+
+      def default_icon_element
+        render Hakumi::Icon::Component.new(name: "exclamation-circle", theme: :filled)
+      end
     end
   end
 end

data/app/components/hakumi/rate/component.rb

@@ -119,7 +119,6 @@ module Hakumi
           id: input_id,
           value: current_value,
           disabled: @disabled ? true : nil,
-          required: @required ? true : nil,
           "aria-invalid": has_error? ? "true" : nil,
           "aria-describedby": describedby_ids,
           data: {

data/app/components/hakumi/segmented/component.rb

@@ -236,10 +236,6 @@ module Hakumi
         symbol == :default ? :middle : symbol
       end
 
-      def cast_boolean(value)
-        ActiveModel::Type::Boolean.new.cast(value)
-      end
-
       def normalize_string(value)
         return nil if value.nil?
 

data/app/components/hakumi/slider/component.rb

@@ -79,8 +79,8 @@ module Hakumi
             }.compact
           },
           {
-            id: @html_attrs[:wrapper_id],
-            data: @html_attrs[:wrapper_data]
+            id: @html_attrs[:id],
+            data: @html_attrs[:data]
           }.compact
         )
       end
@@ -223,10 +223,6 @@ module Hakumi
 
         ((value.to_f - min) / (max - min) * 100).clamp(0, 100)
       end
-
-      def cast_boolean(value)
-        ActiveModel::Type::Boolean.new.cast(value)
-      end
     end
   end
 end