hakumi_components 0.1.3.pre

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

@@ -0,0 +1,67 @@
+<% slider_control = capture do %>
+  <%= content_tag(:div, wrapper_attributes) do %>
+    <div class="hakumi-slider-rail" data-hakumi--slider-target="rail"></div>
+    <div class="hakumi-slider-track" data-hakumi--slider-target="track"></div>
+
+    <% handle_count.times do |index| %>
+      <div
+        class="hakumi-slider-handle"
+        role="slider"
+        tabindex="<%= @disabled ? -1 : 0 %>"
+        data-hakumi--slider-target="handle"
+        data-index="<%= index %>"
+        aria-disabled="<%= @disabled %>"
+        aria-valuemin="<%= @min %>"
+        aria-valuemax="<%= @max %>"
+      >
+        <span class="hakumi-slider-tooltip" data-hakumi--slider-target="tooltip"></span>
+      </div>
+    <% end %>
+
+    <% if marks? %>
+      <div class="hakumi-slider-marks" data-hakumi--slider-target="marks">
+        <% @marks.each do |mark| %>
+          <span class="hakumi-slider-mark" style="<%= mark_style(mark[:value]) %>">
+            <span class="hakumi-slider-mark-dot"></span>
+            <span class="hakumi-slider-mark-label"><%= mark[:label] %></span>
+          </span>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% if @dots %>
+      <div class="hakumi-slider-dots" data-hakumi--slider-target="dots">
+        <% dot_values.each do |value| %>
+          <span class="hakumi-slider-dot" style="<%= mark_style(value) %>"></span>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% handle_count.times do |index| %>
+      <%= tag.input(
+        type: "hidden",
+        name: input_name,
+        id: input_id_for(index),
+        value: @range ? Array(@value || @default_value)[index] : (@value || @default_value),
+        disabled: @disabled ? true : nil,
+        data: { "hakumi--slider-target": "input" }
+      ) %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if @standalone %>
+  <%= slider_control %>
+<% else %>
+  <div <%= tag.attributes(form_item_attributes).to_s.html_safe %>>
+    <%= render_label(field_id: input_id_for(0)) %>
+
+    <div class="hakumi-form-item-control">
+      <div class="hakumi-form-item-control-input">
+        <%= slider_control %>
+      </div>
+
+      <%= render_explain %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,232 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Slider
+    # Hakumi Slider component
+    # Supports single and range sliders with marks, dots, and vertical layout.
+    class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
+      def initialize(
+        name: nil,
+        label: nil,
+        caption: nil,
+        value: nil,
+        default_value: nil,
+        min: 0,
+        max: 100,
+        step: 1,
+        range: false,
+        vertical: false,
+        marks: nil,
+        dots: false,
+        tooltip_visible: nil,
+        keyboard: true,
+        disabled: false,
+        allow_cross: true,
+        handle_min: nil,
+        handle_max: nil,
+        standalone: true,
+        required: false,
+        errors: [],
+        **html_attrs
+      )
+        @name = name || generate_id("slider")
+        @label = label
+        @caption = caption
+        @value = value
+        @default_value = default_value
+        @min = min
+        @max = max
+        @step = step
+        @range = cast_boolean(range)
+        @vertical = cast_boolean(vertical)
+        @marks = normalize_marks(marks)
+        @dots = cast_boolean(dots)
+        @tooltip_visible = tooltip_visible
+        @keyboard = cast_boolean(keyboard)
+        @disabled = cast_boolean(disabled)
+        @allow_cross = cast_boolean(allow_cross)
+        @handle_min = handle_min
+        @handle_max = handle_max
+        @standalone = cast_boolean(standalone)
+        @required = cast_boolean(required)
+        @errors = Array(errors)
+        @html_attrs = html_attrs
+
+        validate_props!
+      end
+
+      def wrapper_attributes
+        merge_attributes(
+          {
+            class: component_html_class,
+            data: {
+              controller: "hakumi--slider",
+              "hakumi--slider-min-value": @min,
+              "hakumi--slider-max-value": @max,
+              "hakumi--slider-step-value": @step,
+              "hakumi--slider-range-value": @range,
+              "hakumi--slider-vertical-value": @vertical,
+              "hakumi--slider-disabled-value": @disabled,
+              "hakumi--slider-keyboard-value": @keyboard,
+              "hakumi--slider-allow-cross-value": @allow_cross,
+              "hakumi--slider-handle-min-value": handle_bounds_value(@handle_min),
+              "hakumi--slider-handle-max-value": handle_bounds_value(@handle_max),
+              "hakumi--slider-tooltip-visible-value": tooltip_visible_value,
+              "hakumi--slider-value-value": data_value(@value),
+              "hakumi--slider-default-value-value": data_value(@default_value)
+            }.compact
+          },
+          {
+            id: @html_attrs[:wrapper_id],
+            data: @html_attrs[:wrapper_data]
+          }.compact
+        )
+      end
+
+      def input_name
+        return @name unless @range
+        return @name if @name.to_s.end_with?("[]")
+
+        "#{@name}[]"
+      end
+
+      def input_id_for(index)
+        return input_id unless @range
+
+        "#{input_id}_#{index}"
+      end
+
+      def handle_count
+        @range ? 2 : 1
+      end
+
+      def marks?
+        @marks.any?
+      end
+
+      def mark_style(value)
+        percent = position_percent(value)
+        if @vertical
+          "bottom: #{percent}%"
+        else
+          "left: #{percent}%"
+        end
+      end
+
+      def dot_values
+        return [] unless @dots
+
+        min = @min.to_f
+        max = @max.to_f
+        step = @step.to_f
+        return [] if step <= 0
+
+        values = []
+        current = min
+        while current <= max + (step / 1000.0)
+          values << current
+          current += step
+        end
+        values
+      end
+
+      private
+
+      def validate_props!
+        validate_numeric_like!(@min, "min")
+        validate_numeric_like!(@max, "max")
+        validate_numeric_like!(@step, "step")
+
+        validate_range_values!(@value, "value") if @value
+        validate_range_values!(@default_value, "default_value") if @default_value
+      end
+
+      def validate_numeric_like!(value, name)
+        return if value.is_a?(Numeric) || value.is_a?(String)
+
+        raise ArgumentError, "#{name} must be a number or string"
+      end
+
+      def validate_range_values!(value, name)
+        if @range
+          unless value.is_a?(Array) && value.size == 2
+            raise ArgumentError, "#{name} must be an array of two values when range is true"
+          end
+        elsif value.is_a?(Array)
+          raise ArgumentError, "#{name} must be a single value when range is false"
+        end
+      end
+
+      def component_html_class
+        class_names(
+          "slider",
+          {
+            range: @range,
+            vertical: @vertical,
+            disabled: @disabled,
+            "with-marks": marks?,
+            "with-dots": @dots,
+            "tooltip-visible": tooltip_visible_class?
+          },
+          @html_attrs[:wrapper_class]
+        )
+      end
+
+      def tooltip_visible_class?
+        @tooltip_visible == true
+      end
+
+      def tooltip_visible_value
+        return nil if @tooltip_visible.nil?
+
+        cast_boolean(@tooltip_visible)
+      end
+
+      def data_value(value)
+        return nil if value.nil?
+
+        Array(value).to_json
+      end
+
+      def handle_bounds_value(value)
+        return nil if value.nil?
+
+        Array(value).to_json
+      end
+
+      def normalize_marks(marks)
+        return [] if marks.nil?
+
+        entries = if marks.is_a?(Hash)
+                    marks.map { |value, label| { value: value, label: label } }
+        else
+                    Array(marks).map do |mark|
+                      if mark.is_a?(Hash)
+                        value = mark[:value] || mark["value"]
+                        label = mark[:label] || mark["label"] || value
+                        { value: value, label: label }
+                      else
+                        { value: mark, label: mark }
+                      end
+                    end
+        end
+
+        entries.compact.select { |entry| entry[:value].present? }.sort_by { |entry| entry[:value].to_f }
+      end
+
+      def position_percent(value)
+        min = @min.to_f
+        max = @max.to_f
+        return 0 if max == min
+
+        ((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

data/app/components/hakumi/space/compact/component.html.erb

@@ -0,0 +1,3 @@
+<div <%= tag.attributes(html_attributes) %>>
+  <%= content %>
+</div>

data/app/components/hakumi/space/compact/component.rb

@@ -0,0 +1,36 @@
+module Hakumi
+  module Space
+    module Compact
+      class Component < ViewComponent::Base
+        def initialize(direction: :horizontal, block: false, **html_options)
+          @direction = direction
+          @block = block
+          @html_options = html_options
+        end
+
+        private
+
+        def html_attributes
+          attrs = @html_options.dup
+          attrs[:class] = css_classes
+          attrs[:style] = inline_styles
+          attrs
+        end
+
+        def css_classes
+          classes = [ "hakumi-space-compact" ]
+          classes << "hakumi-space-compact-#{@direction}"
+          classes << "hakumi-space-compact-block" if @block
+          classes << @html_options[:class] if @html_options[:class]
+          classes.join(" ")
+        end
+
+        def inline_styles
+          styles = []
+          styles << @html_options[:style] if @html_options[:style]
+          styles.join("; ")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<div <%= tag.attributes(html_attributes) %>>
+  <% if items? %>
+    <% items.each_with_index do |item, index| %>
+      <%= item %>
+      <% if split && index < items.size - 1 %>
+        <span class="hakumi-space-item-split"><%= split %></span>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+</div>

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

@@ -0,0 +1,73 @@
+module Hakumi
+  module Space
+    class Component < ViewComponent::Base
+      renders_many :items, "ItemComponent"
+
+      def initialize(direction: :horizontal, size: :small, align: nil, wrap: false, block: false, split: nil, **html_options)
+        @direction = direction
+        @size = size
+        @align = align
+        @wrap = wrap
+        @block = block
+        @split = split
+        @html_options = html_options
+      end
+
+      attr_reader :split
+
+      private
+
+      def html_attributes
+        attrs = @html_options.dup
+        attrs[:class] = css_classes
+        attrs[:style] = inline_styles
+        attrs
+      end
+
+      def css_classes
+        classes = [ "hakumi-space" ]
+        classes << "hakumi-space-#{@direction}"
+        classes << "hakumi-space-align-#{@align}" if @align
+        classes << "hakumi-space-wrap" if @wrap
+        classes << "hakumi-space-block" if @block
+        classes << @html_options[:class] if @html_options[:class]
+        classes.join(" ")
+      end
+
+      def inline_styles
+        styles = []
+
+        gap_size = case @size
+        when :small then "8px"
+        when :middle then "16px"
+        when :large then "24px"
+        when Integer then "#{@size}px"
+        else "8px"
+        end
+
+        styles << "gap: #{gap_size}"
+        styles << @html_options[:style] if @html_options[:style]
+        styles.join("; ")
+      end
+
+      def call
+        return nil if items.empty?
+
+        safe_join(items.map { |item| content_tag(:div, item, class: "hakumi-space-item") }, split_content)
+      end
+
+      private
+
+      def split_content
+        return nil unless @split
+
+        content_tag(:div, @split, class: "hakumi-space-split")
+      end
+      class ItemComponent < ViewComponent::Base
+        def call
+          content_tag(:div, content, class: "hakumi-space-item")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <div class="hakumi-spin-overlay" data-hakumi--spin-target="overlay">
+    <div class="hakumi-spin-indicator">
+      <%= indicator_markup %>
+    </div>
+    <% if show_text? %>
+      <div class="hakumi-spin-text" data-hakumi--spin-target="text"><%= tip_markup %></div>
+    <% end %>
+  </div>
+  <% if nested? %>
+    <div class="hakumi-spin-container" data-hakumi--spin-target="container"><%= content %></div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,209 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Spin
+    class Component < Hakumi::BaseComponent
+      SIZES = [ :small, :default, :large ].freeze
+
+      def self.extract_controller_locals(params)
+        {
+          spinning: params.key?(:spinning) ? ActiveModel::Type::Boolean.new.cast(params[:spinning]) : true,
+          size: params[:size]&.to_sym,
+          tip: params[:tip],
+          delay: parse_delay(params[:delay]),
+          fullscreen: ActiveModel::Type::Boolean.new.cast(params[:fullscreen]),
+          percent: parse_percent(params[:percent])
+        }
+      end
+
+      def self.parse_delay(value)
+        return nil if value.nil?
+        return value if value.is_a?(Numeric)
+
+        value.to_s.strip.presence&.to_i
+      end
+
+      def self.parse_percent(value)
+        return nil if value.nil?
+
+        string_value = value.to_s.strip
+        return :auto if string_value == "auto"
+
+        return value if value.is_a?(Numeric)
+
+        string_value.presence&.to_f
+      end
+
+      def initialize(
+        spinning: true,
+        size: :default,
+        tip: nil,
+        delay: 0,
+        indicator: nil,
+        fullscreen: false,
+        percent: nil,
+        **html_options
+      )
+        @spinning = ActiveModel::Type::Boolean.new.cast(spinning)
+        @size = (size || :default).to_sym
+        @tip = tip
+        @delay = delay
+        @indicator = indicator
+        @fullscreen = fullscreen
+        @percent = normalize_percent(percent)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def wrapper_attributes
+        merge_attributes(
+          {
+            class: wrapper_classes,
+            role: "status",
+            "aria-live": "polite",
+            "aria-busy": @spinning,
+            data: data_attributes
+          },
+          @html_options
+        )
+      end
+
+      def nested?
+        content? && !@fullscreen
+      end
+
+      def indicator_markup
+        return render_value(@indicator) if @indicator.present?
+        return progress_indicator if progress?
+
+        default_indicator
+      end
+
+      def tip_markup
+        render_value(@tip)
+      end
+
+      def show_text?
+        @tip.present?
+      end
+
+      def progress?
+        !@percent.nil?
+      end
+
+      def progress_auto?
+        @percent == :auto
+      end
+
+      def progress_component
+        Hakumi::Progress::Component.new(
+          percent: @percent,
+          type: :circle,
+          size: progress_size,
+          stroke_width: 6,
+          show_info: true
+        )
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+
+        delay_value = normalized_delay
+        raise ArgumentError, "delay must be a non-negative number" if delay_value.negative?
+
+        return unless progress?
+        return if progress_auto?
+
+        unless @percent.is_a?(Numeric)
+          raise ArgumentError, "percent must be numeric or :auto"
+        end
+
+        @percent = @percent.clamp(0, 100)
+      end
+
+      def wrapper_classes
+        modifiers = {
+          spinning: spinning_class?,
+          "show-text": show_text?,
+          fullscreen: @fullscreen,
+          standalone: !nested?,
+          progress: progress?,
+          "progress-auto": progress_auto?
+        }
+
+        modifiers[:sm] = true if @size == :small
+        modifiers[:lg] = true if @size == :large
+
+        extras = [ @html_options[:class] ]
+        extras << "hakumi-spin-nested-loading" if nested?
+
+        class_names("spin", modifiers, extras)
+      end
+
+      def data_attributes
+        data = {
+          controller: "hakumi--spin",
+          "hakumi--spin-spinning-value": @spinning
+        }
+
+        delay_value = normalized_delay
+        data["hakumi--spin-delay-value"] = delay_value if delay_value.positive?
+        data["hakumi--spin-percent-value"] = percent_value if percent_value
+
+        data
+      end
+
+      def normalized_delay
+        return 0 if @delay.nil?
+        return @delay if @delay.is_a?(Numeric)
+
+        @delay.to_s.strip.presence&.to_i || 0
+      end
+
+      def percent_value
+        return nil unless progress?
+        return "auto" if progress_auto?
+
+        @percent
+      end
+
+      def spinning_class?
+        return false unless @spinning
+
+        normalized_delay <= 0
+      end
+
+      def progress_indicator
+        return default_indicator if progress_auto?
+
+        render progress_component
+      end
+
+      def default_indicator
+        tag.span(class: "hakumi-spin-dot", "aria-hidden": true) do
+          safe_join(Array.new(4) { tag.span(class: "hakumi-spin-dot-item") })
+        end
+      end
+
+      def normalize_percent(value)
+        return nil if value.nil?
+        return :auto if value == :auto || value.to_s.strip == "auto"
+        return value if value.is_a?(Numeric)
+
+        parsed = value.to_s.strip
+        parsed.presence&.to_f
+      end
+
+      def progress_size
+        case @size
+        when :small then 44
+        when :large then 84
+        else 64
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div <%= tag.attributes(html_attributes) %>>
+  <%= content %>
+</div>

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

@@ -0,0 +1,38 @@
+module Hakumi
+  module Splitter
+    class Component < Hakumi::BaseComponent
+      def initialize(layout: :horizontal, resizable: true, **html_options)
+        @layout = layout
+        @resizable = resizable
+        @html_options = html_options
+      end
+
+      private
+
+      def html_attributes
+        attrs = @html_options.dup
+        attrs[:class] = css_classes
+        attrs[:style] = inline_styles
+        attrs[:data] ||= {}
+        attrs[:data][:controller] = "hakumi--splitter"
+        attrs[:data][:hakumi__splitter_layout_value] = @layout.to_s
+        attrs[:data][:hakumi__splitter_resizable_value] = @resizable
+        attrs[:id] ||= generate_id("hakumi-splitter", length: 6)
+        attrs
+      end
+
+      def css_classes
+        classes = [ "hakumi-splitter" ]
+        classes << "hakumi-splitter-#{@layout}"
+        classes << @html_options[:class] if @html_options[:class]
+        classes.join(" ")
+      end
+
+      def inline_styles
+        styles = []
+        styles << @html_options[:style] if @html_options[:style]
+        styles.join("; ")
+      end
+    end
+  end
+end

data/app/components/hakumi/splitter/panel/component.html.erb

@@ -0,0 +1,3 @@
+<div <%= tag.attributes(html_attributes) %>>
+  <%= content %>
+</div>