hakumi_components 0.1.3.pre

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

@@ -0,0 +1,205 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Pagination
+    class Component < Hakumi::BaseComponent
+      SIZES = %i[default small].freeze
+      ALIGNS = %i[start center end].freeze
+      DEFAULT_PAGE_SIZE_OPTIONS = [ 10, 20, 50, 100 ].freeze
+
+      def initialize(
+        total:,
+        current: 1,
+        page_size: 10,
+        size: :default,
+        align: :start,
+        disabled: false,
+        simple: false,
+        show_size_changer: nil,
+        show_quick_jumper: false,
+        show_total: nil,
+        page_size_options: DEFAULT_PAGE_SIZE_OPTIONS,
+        hide_on_single_page: false,
+        prev_text: nil,
+        next_text: nil,
+        href: nil,
+        page_param: :page,
+        per_page_param: :per_page,
+        turbo_frame: nil,
+        turbo_action: nil,
+        preserve_params: nil,
+        **html_options
+      )
+        @total = total
+        @current = current
+        @page_size = page_size
+        @size = size
+        @align = align
+        @disabled = disabled
+        @simple = simple
+        @show_size_changer = show_size_changer
+        @show_quick_jumper = show_quick_jumper
+        @show_total = show_total
+        @page_size_options = page_size_options
+        @hide_on_single_page = hide_on_single_page
+        @prev_text = prev_text
+        @next_text = next_text
+        @href = href
+        @page_param = page_param
+        @per_page_param = per_page_param
+        @turbo_frame = turbo_frame
+        @turbo_action = turbo_action
+        @preserve_params = preserve_params
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def render?
+        return false if @hide_on_single_page && total_pages <= 1
+        true
+      end
+
+      def total_pages
+        (@total.to_f / @page_size).ceil
+      end
+
+      def pagination_classes
+        classes = [ "hakumi-pagination" ]
+        classes << "hakumi-pagination-mini" if @size == :small
+        classes << "hakumi-pagination-simple" if @simple
+        classes << "hakumi-pagination-disabled" if @disabled
+        classes << "hakumi-pagination-align-#{@align}" if @align != :start
+        classes.join(" ")
+      end
+
+      def stimulus_controller
+        "hakumi--pagination"
+      end
+
+      def stimulus_values
+        values = {
+          current: @current,
+          page_size: @page_size,
+          total: @total,
+          disabled: @disabled,
+          simple: @simple
+        }
+        values[:href] = @href if @href.present?
+        values[:page_param] = @page_param.to_s if @href.present?
+        values[:per_page_param] = @per_page_param.to_s if @href.present?
+        values[:turbo_frame] = @turbo_frame if @turbo_frame.present?
+        values[:turbo_action] = @turbo_action if @turbo_action.present?
+        values[:preserve_params] = @preserve_params if @preserve_params.present?
+        values
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: pagination_classes,
+          data: {
+            controller: stimulus_controller
+          }.merge(stimulus_data_attributes)
+        }
+        merge_attributes(base_attrs, @html_options)
+      end
+
+      def stimulus_data_attributes
+        stimulus_values.transform_keys { |k| "#{stimulus_controller}-#{k.to_s.dasherize}-value" }
+      end
+
+      def prev_disabled?
+        @current <= 1
+      end
+
+      def next_disabled?
+        @current >= total_pages
+      end
+
+      def show_size_changer?
+        return @show_size_changer unless @show_size_changer.nil?
+        @total > 50
+      end
+
+      def page_items
+        return [] if @simple
+
+        items = []
+        total = total_pages
+        current = @current
+
+        # Always show first page
+        items << { type: :page, number: 1 }
+
+        if total <= 7
+          # Show all pages
+          (2..total).each { |n| items << { type: :page, number: n } }
+        else
+          # Complex pagination with ellipsis
+          if current <= 4
+            # Near start
+            (2..5).each { |n| items << { type: :page, number: n } }
+            items << { type: :jump_next }
+            items << { type: :page, number: total }
+          elsif current >= total - 3
+            # Near end
+            items << { type: :jump_prev }
+            ((total - 4)..total).each { |n| items << { type: :page, number: n } }
+          else
+            # In the middle
+            items << { type: :jump_prev }
+            ((current - 1)..(current + 1)).each { |n| items << { type: :page, number: n } }
+            items << { type: :jump_next }
+            items << { type: :page, number: total }
+          end
+        end
+
+        items
+      end
+
+      def prev_icon
+        Hakumi::Icon::Component.new(name: :left)
+      end
+
+      def next_icon
+        Hakumi::Icon::Component.new(name: :right)
+      end
+
+      def jump_prev_icon
+        Hakumi::Icon::Component.new(name: :double_left)
+      end
+
+      def jump_next_icon
+        Hakumi::Icon::Component.new(name: :double_right)
+      end
+
+      def ellipsis_icon
+        Hakumi::Icon::Component.new(name: :ellipsis)
+      end
+
+      def total_text
+        return nil unless @show_total
+
+        case @show_total
+        when true
+          "Total #{@total} items"
+        when String
+          @show_total
+        when Proc
+          @show_total.call(@total, [ (@current - 1) * @page_size + 1, @current * @page_size ].map { |n| [ n, @total ].min })
+        end
+      end
+
+      attr_reader :current, :page_size, :total, :disabled, :simple,
+                  :show_quick_jumper, :page_size_options, :prev_text, :next_text,
+                  :href, :page_param, :per_page_param, :turbo_frame, :turbo_action
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:align, ALIGNS)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+<div class="<%= wrapper_classes %>" data-controller="hakumi--popconfirm" <%= tag.attributes(data: data_attributes) %> <%= 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" 
+       role="tooltip"
+       style="display: none;">
+    <div class="hakumi-popconfirm-content">
+      <div class="hakumi-popconfirm-arrow" data-hakumi--popconfirm-target="arrow"></div>
+      <div class="hakumi-popconfirm-inner" role="presentation">
+        <div class="hakumi-popconfirm-inner-content">
+          <div class="hakumi-popconfirm-message">
+            <span class="hakumi-popconfirm-message-icon">
+              <% if @icon %>
+                <%= @icon %>
+              <% else %>
+                <%= render Hakumi::Icon::Component.new(name: "exclamation-circle", theme: :filled) %>
+              <% end %>
+            </span>
+            <div class="hakumi-popconfirm-title"><%= @title %></div>
+          </div>
+          
+          <% if @description %>
+            <div class="hakumi-popconfirm-description">
+              <%= @description %>
+            </div>
+          <% end %>
+
+          <div class="hakumi-popconfirm-buttons">
+            <% if @show_cancel %>
+              <%= render(Hakumi::Button::Component.new(
+                size: :small,
+                data: { 
+                  action: "click->hakumi--popconfirm#cancel",
+                  hakumi__popconfirm_target: "cancelButton"
+                }
+              )) { @cancel_text } %>
+            <% 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>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Popconfirm
+    class Component < Hakumi::BaseComponent
+      PLACEMENTS = %w[
+        top topLeft topRight
+        bottom bottomLeft bottomRight
+        left leftTop leftBottom
+        right rightTop rightBottom
+        auto
+      ].freeze
+
+      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
+
+      def initialize(
+        title: nil,
+        description: nil,
+        ok_text: "OK",
+        cancel_text: "Cancel",
+        ok_type: :primary,
+        placement: "top",
+        trigger: "click",
+        disabled: false,
+        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
+        @show_cancel = show_cancel
+        @icon = icon
+        @auto_adjust_overflow = auto_adjust_overflow
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_classes
+        classes = [ "hakumi-popconfirm-wrapper" ]
+        classes << "hakumi-popconfirm-disabled" if @disabled
+        classes << @html_options[:class] if @html_options[:class]
+        classes.join(" ")
+      end
+
+      def data_attributes
+        {
+          controller: "hakumi--popconfirm",
+          hakumi__popconfirm_placement_value: @placement,
+          hakumi__popconfirm_trigger_value: @trigger,
+          hakumi__popconfirm_disabled_value: @disabled,
+          hakumi__popconfirm_show_cancel_value: @show_cancel,
+          hakumi__popconfirm_auto_adjust_overflow_value: @auto_adjust_overflow
+        }
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:placement, PLACEMENTS)
+        validate_inclusion!(:trigger, TRIGGERS)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<div class="<%= wrapper_classes %>" <%= tag.attributes(data: data_attributes) %> <%= tag.attributes(@html_options.except(:class, :data)) %>>
+  <span class="hakumi-popover-trigger" data-hakumi--popover-target="trigger">
+    <%= trigger_content %>
+  </span>
+
+  <div class="<%= popover_classes %>"
+       <%= tag.attributes(id: popover_dom_id) if popover_dom_id %>
+       data-hakumi--popover-target="popover"
+       role="tooltip"
+       style="display: none;">
+    <div class="hakumi-popover-content">
+      <% if @arrow %>
+        <div class="hakumi-popover-arrow" data-hakumi--popover-target="arrow"></div>
+      <% end %>
+      <div class="hakumi-popover-inner" role="presentation">
+        <% if has_title? %>
+          <div class="hakumi-popover-title"><%= render_title %></div>
+        <% end %>
+        <% if has_popover_content? %>
+          <div class="hakumi-popover-inner-content"><%= render_popover_content %></div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Popover
+    class Component < Hakumi::BaseComponent
+      PLACEMENTS = %w[
+        top topLeft topRight
+        bottom bottomLeft bottomRight
+        left leftTop leftBottom
+        right rightTop rightBottom
+        auto
+      ].freeze
+
+      TRIGGERS = %w[click hover focus].freeze
+
+      def self.extract_controller_locals(params)
+        {
+          title: params[:title],
+          body: params[:body],
+          trigger_body: params[:trigger_body],
+          placement: params[:placement],
+          trigger: params[:trigger],
+          open: ActiveModel::Type::Boolean.new.cast(params[:open]),
+          arrow: params[:arrow].nil? ? true : ActiveModel::Type::Boolean.new.cast(params[:arrow]),
+          disabled: ActiveModel::Type::Boolean.new.cast(params[:disabled]),
+          auto_adjust_overflow: params[:auto_adjust_overflow].nil? ? true : ActiveModel::Type::Boolean.new.cast(params[:auto_adjust_overflow])
+        }
+      end
+
+      def initialize(
+        title: nil,
+        body: nil,
+        trigger_body: nil,
+        placement: "top",
+        trigger: "hover",
+        open: nil,
+        arrow: true,
+        disabled: false,
+        auto_adjust_overflow: true,
+        **html_options
+      )
+        @title = title
+        @body = body
+        @trigger_body = trigger_body
+        @placement = placement
+        @trigger = trigger
+        @open = open
+        @arrow = arrow
+        @disabled = disabled
+        @auto_adjust_overflow = auto_adjust_overflow
+        @html_options = html_options
+        @wrapper_id = html_options[:id] || html_options["id"]
+
+        validate_props!
+      end
+
+      def wrapper_classes
+        classes = [ "hakumi-popover-wrapper" ]
+        classes << "hakumi-popover-disabled" if @disabled
+        classes << @html_options[:class] if @html_options[:class]
+        classes.compact.join(" ")
+      end
+
+      def wrapper_id
+        @wrapper_id
+      end
+
+      def popover_dom_id
+        return if wrapper_id.blank?
+        "#{wrapper_id}-popover"
+      end
+
+      def popover_classes
+        classes = [ "hakumi-popover" ]
+        classes << "hakumi-popover-arrow-hidden" unless @arrow
+        classes.join(" ")
+      end
+
+      def data_attributes
+        data = {
+          controller: "hakumi--popover",
+          "hakumi--popover-placement-value": @placement,
+          "hakumi--popover-trigger-value": normalized_triggers.join(","),
+          "hakumi--popover-disabled-value": @disabled,
+          "hakumi--popover-arrow-value": @arrow,
+          "hakumi--popover-auto-adjust-overflow-value": @auto_adjust_overflow
+        }
+        data[:"hakumi--popover-open-value"] = @open unless @open.nil?
+        data
+      end
+
+      def trigger_content
+        content.presence || render_value(@trigger_body || @body)
+      end
+
+      def render_title
+        render_value(@title)
+      end
+
+      def render_popover_content
+        render_value(@body)
+      end
+
+      def has_title?
+        @title.present?
+      end
+
+      def has_popover_content?
+        @body.present?
+      end
+
+      private
+
+      def normalized_triggers
+        return [] if @trigger.nil?
+
+        triggers = @trigger.is_a?(Array) ? @trigger : @trigger.to_s.split(/[\s,]+/)
+        triggers.map(&:to_s).reject(&:empty?)
+      end
+
+      def validate_props!
+        validate_inclusion!(:placement, PLACEMENTS)
+
+        normalized_triggers.each do |trigger|
+          next if TRIGGERS.include?(trigger)
+
+          raise ArgumentError, "trigger must be one of #{TRIGGERS.inspect}, got #{trigger.inspect}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,81 @@
+<% component_markup = capture do %>
+  <div <%= tag.attributes(wrapper_attributes) %>>
+    <% if line? %>
+      <div class="hakumi-progress-outer">
+        <div class="hakumi-progress-inner" style="<%= line_style %>">
+          <% if steps? %>
+            <div class="hakumi-progress-steps">
+              <% line_steps.each do |step| %>
+                <% step_classes = ["hakumi-progress-steps-item"] %>
+                <% step_classes << "hakumi-progress-steps-item-active" if step[:active] %>
+                <% step_classes << "hakumi-progress-steps-item-current" if step[:current] %>
+                <% step_style = ["width: #{step[:width]}"] %>
+                <% if step[:active] && step[:custom_color] %>
+                  <% step_style << "background-color: #{step[:custom_color]}" %>
+                <% end %>
+                <span class="<%= step_classes.join(" ") %>" style="<%= step_style.join("; ") %>"></span>
+              <% end %>
+            </div>
+          <% else %>
+            <div class="hakumi-progress-bg" style="<%= line_bar_style %>"></div>
+            <% if @success_percent.present? && @success_percent.positive? %>
+              <div class="hakumi-progress-success-bg" style="<%= line_success_style %>"></div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+      <% if inline_info? && formatted_info.present? %>
+        <span class="hakumi-progress-text"><%= formatted_info %></span>
+      <% end %>
+    <% else %>
+      <div class="hakumi-progress-inner" style="<%= circle_inner_style %>">
+        <svg class="hakumi-progress-circle" viewBox="0 0 100 100">
+          <% if gradient? && circle_gradient_attributes.present? %>
+            <defs>
+              <linearGradient id="<%= gradient_id %>" <%= tag.attributes(gradient_svg_direction) %>>
+                <% circle_gradient_attributes[:stops].each do |stop, color| %>
+                  <stop offset="<%= stop %>" stop-color="<%= color %>"></stop>
+                <% end %>
+              </linearGradient>
+            </defs>
+          <% end %>
+          <% if circle_steps? %>
+            <% circle_steps.each do |step| %>
+              <% step_classes = ["hakumi-progress-circle-step"] %>
+              <% step_classes << "hakumi-progress-circle-step-active" if step[:active] %>
+              <% step_classes << "hakumi-progress-circle-step-current" if step[:current] %>
+              <circle
+                class="<%= step_classes.join(" ") %>"
+                cx="50"
+                cy="50"
+                r="<%= circle_radius %>"
+                fill="none"
+                stroke-linecap="butt"
+                stroke-width="<%= circle_stroke_width %>"
+                stroke-dasharray="<%= step[:dasharray] %>"
+                stroke-dashoffset="<%= step[:dashoffset] %>"
+                transform="<%= circle_transform %>"
+                style="<%= build_inline_style("stroke" => step[:stroke]) %>"
+                data-step-index="<%= step[:index] %>"
+              ></circle>
+            <% end %>
+          <% else %>
+            <circle <%= tag.attributes(circle_trail_attributes.merge(style: circle_trail_style.presence)) %>></circle>
+            <circle <%= tag.attributes(circle_path_attributes) %>></circle>
+          <% end %>
+        </svg>
+        <% if inline_info? && formatted_info.present? %>
+          <span class="hakumi-progress-text"><%= formatted_info %></span>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<% if wrap_with_tooltip? %>
+  <%= render Hakumi::Tooltip::Component.new(**tooltip_component_options) do %>
+    <%= component_markup %>
+  <% end %>
+<% else %>
+  <%= component_markup %>
+<% end %>