hakumi_components 0.1.3.pre

data/app/components/hakumi/table/concerns/columns.rb

@@ -0,0 +1,219 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Table
+    module Concerns
+      # Column normalization and management for Table component
+      module Columns
+        extend ActiveSupport::Concern
+
+        # Get all leaf columns (columns without children)
+        def leaf_columns
+          @leaf_columns ||= flatten_leaf_columns(normalized_columns)
+        end
+
+        # Count of leaf columns (minimum 1)
+        def leaf_column_count
+          [ leaf_columns.size, 1 ].max
+        end
+
+        # Check if table has selection column
+        def selection_column?
+          @row_selection.present?
+        end
+
+        # Check if table has expandable rows
+        def expandable?
+          @expandable.present?
+        end
+
+        # Check if table has expand column
+        def expand_column?
+          expandable? && @expandable[:show_expand_column] != false
+        end
+
+        # Get normalized columns with special columns inserted
+        def normalized_columns
+          @normalized_columns ||= begin
+            columns = normalize_columns(columns_data)
+            columns = insert_drag_handle_column(columns)
+            columns = insert_selection_column(columns)
+            columns = insert_expand_column(columns)
+            columns = columns.compact
+            compute_fixed_offsets(flatten_leaf_columns(columns))
+            columns
+          end
+        end
+
+        private
+
+        # Normalize an array of column definitions
+        def normalize_columns(columns)
+          Array(columns).filter_map do |column|
+            column = column.public_send(:to_h) if column.respond_to?(:to_h)
+            if column == Hakumi::Table::Component::SELECTION_COLUMN
+              selection_column_definition
+            elsif column == Hakumi::Table::Component::EXPAND_COLUMN
+              expand_column_definition
+            elsif column.is_a?(Hash)
+              normalize_column(column)
+            end
+          end
+        end
+
+        # Normalize a single column definition
+        def normalize_column(column)
+          normalized = column.deep_symbolize_keys
+          return nil if normalized[:hidden]
+
+          normalized[:key] ||= normalized[:data_index] || SecureRandom.hex(4)
+          normalized[:ellipsis] = normalize_ellipsis_option(normalized[:ellipsis])
+          normalized[:responsive] = normalize_responsive_breakpoints(normalized[:responsive])
+          normalized[:width] = dimension_to_css(normalized[:width])
+          normalized[:fixed] = normalized[:fixed]&.to_sym if normalized[:fixed]
+          normalized[:fixed] = nil unless Hakumi::Table::Component::FIXED_SIDES.include?(normalized[:fixed])
+          normalized[:editable] = normalize_column_editable(normalized[:editable])
+          normalized[:should_cell_update] = normalize_should_cell_update(normalized[:should_cell_update])
+          if normalized[:children]
+            normalized[:children] = normalize_columns(normalized[:children])
+          end
+          normalized
+        end
+
+        # Insert drag handle column if needed
+        def insert_drag_handle_column(columns)
+          return columns unless drag_handle_column?
+
+          if columns.any? { |col| col.is_a?(Hash) && col[:drag_handle] }
+            columns
+          else
+            [ drag_handle_column_definition, *columns ]
+          end
+        end
+
+        # Insert selection column if needed
+        def insert_selection_column(columns)
+          return columns unless selection_column?
+
+          if columns.any? { |col| col.is_a?(Hash) && col[:selection] }
+            columns
+          elsif columns.any? { |col| col == Hakumi::Table::Component::SELECTION_COLUMN }
+            columns.map { |col| col == Hakumi::Table::Component::SELECTION_COLUMN ? selection_column_definition : col }
+          else
+            [ selection_column_definition, *columns ]
+          end
+        end
+
+        # Insert expand column if needed
+        def insert_expand_column(columns)
+          return columns unless expand_column?
+
+          if columns.any? { |col| col.is_a?(Hash) && col[:expand] }
+            columns
+          elsif columns.any? { |col| col == Hakumi::Table::Component::EXPAND_COLUMN }
+            columns.map { |col| col == Hakumi::Table::Component::EXPAND_COLUMN ? expand_column_definition : col }
+          else
+            [ expand_column_definition, *columns ]
+          end
+        end
+
+        # Definition for selection column
+        def selection_column_definition
+          {
+            key: "__selection__",
+            title: "",
+            selection: true,
+            width: "48px",
+            align: :center
+          }
+        end
+
+        # Definition for expand column
+        def expand_column_definition
+          {
+            key: "__expand__",
+            title: "",
+            expand: true,
+            width: "48px",
+            align: :center
+          }
+        end
+
+        # Check if drag handle column should be added
+        def drag_handle_column?
+          @row_drag&.dig(:handle)
+        end
+
+        # Definition for drag handle column
+        def drag_handle_column_definition
+          {
+            key: "__drag__",
+            title: "",
+            drag_handle: true,
+            width: "48px",
+            align: :center
+          }
+        end
+
+        # Get first data column (non-special column)
+        def first_data_column
+          @first_data_column ||= leaf_columns.find { |col| !col[:selection] && !col[:expand] }
+        end
+
+        # Recursively flatten all leaf columns
+        def flatten_leaf_columns(columns)
+          columns.flat_map do |column|
+            children = column[:children]
+            if children.is_a?(Array) && children.present?
+              flatten_leaf_columns(children)
+            else
+              [ column ]
+            end
+          end
+        end
+
+        # Count leaf columns recursively
+        def leaf_count(columns)
+          columns.sum do |column|
+            children = column[:children]
+            children.is_a?(Array) && children.present? ? leaf_count(children) : 1
+          end
+        end
+
+        # Calculate maximum depth of column hierarchy
+        def max_depth(columns, depth = 1)
+          columns.map do |column|
+            children = column[:children]
+            if children.is_a?(Array) && children.present?
+              max_depth(children, depth + 1)
+            else
+              depth
+            end
+          end.max || depth
+        end
+
+        # Build header rows for rendering
+        def build_header_rows(columns)
+          depth = max_depth(columns)
+          rows = Array.new(depth) { [] }
+          build_rows_recursive(columns, 0, rows, depth)
+          rows
+        end
+
+        # Recursively build header rows
+        def build_rows_recursive(columns, level, rows, max_depth)
+          columns.each do |column|
+            children = column[:children]
+            if children.is_a?(Array) && children.present?
+              col_span = leaf_count(children)
+              rows[level] << { column: column, col_span: col_span, row_span: 1 }
+              build_rows_recursive(children, level + 1, rows, max_depth)
+            else
+              rows[level] << { column: column, col_span: 1, row_span: max_depth - level }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,84 @@
+<%= tag.div(**wrapper_attributes) do %>
+  <%= tag.div(class: "hakumi-tabs-nav", role: "tablist") do %>
+    <% if has_extra_content? && extra_content_left.present? %>
+      <%= tag.div(class: "hakumi-tabs-extra-content hakumi-tabs-extra-content-left") do %>
+        <%= extra_content_left %>
+      <% end %>
+    <% end %>
+
+    <%= tag.div(class: "hakumi-tabs-nav-wrap", data: { "hakumi--tabs-target": "navWrap" }) do %>
+      <%= tag.div(class: "hakumi-tabs-nav-list", style: nav_list_style, data: { "hakumi--tabs-target": "navList" }) do %>
+        <% items.each_with_index do |item, index| %>
+          <% is_active = initial_active_key ? (item.key.to_s == initial_active_key.to_s) : (index == 0) %>
+          <%= tag.div(**item.tab_attributes(is_active)) do %>
+            <%= tag.div(class: "hakumi-tabs-tab-btn") do %>
+              <% if item.icon %>
+                <%= tag.span(class: "hakumi-tabs-tab-icon") do %>
+                  <%= render Hakumi::Icon::Component.new(name: item.icon) %>
+                <% end %>
+              <% end %>
+              <%= tag.span(item.label || item.key, class: "hakumi-tabs-tab-label") %>
+            <% end %>
+            <% if item.closable %>
+              <%= render Hakumi::Button::Component.new(
+                type: :text,
+                size: :small,
+                icon: item.render_close_icon,
+                class: "hakumi-tabs-tab-remove",
+                aria: { label: "Remove tab" },
+                data: { action: "click->hakumi--tabs#removeTab", key: item.key }
+              ) %>
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <% if editable? && !hide_add %>
+          <%= tag.button type: "button",
+                         class: "hakumi-tabs-tab hakumi-tabs-nav-add",
+                         aria: { label: "Add tab" },
+                         data: { action: "click->hakumi--tabs#addTab" } do %>
+            <div class="hakumi-tabs-tab-btn">
+              <% if add_icon %>
+                <%= add_icon %>
+              <% else %>
+                <%= render Hakumi::Icon::Component.new(name: :plus) %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+
+        <%= tag.div(class: "hakumi-tabs-ink-bar hakumi-tabs-ink-bar-animated", data: { "hakumi--tabs-target": "inkBar" }) %>
+      <% end %>
+    <% end %>
+
+    <%= tag.div(class: "hakumi-tabs-nav-operations", style: "display: none;", data: { "hakumi--tabs-target": "operations" }) do %>
+      <%= render Hakumi::Select::Component.new(
+        name: "tabs_overflow_select",
+        options: items.map { |item| [item.label || item.key, item.key] },
+        variant: :borderless,
+        trigger: :hover,
+        standalone: true,
+        data: { "hakumi--tabs-target": "overflowSelect", action: "change->hakumi--tabs#selectFromOverflow" }
+      ) %>
+    <% end %>
+
+    <% if has_extra_content? && extra_content_right.present? %>
+      <%= tag.div(class: "hakumi-tabs-extra-content hakumi-tabs-extra-content-right") do %>
+        <%= extra_content_right %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= tag.div(class: "hakumi-tabs-content-holder") do %>
+    <%= tag.div(class: ["hakumi-tabs-content", ("hakumi-tabs-content-animated" if animated)].compact.join(" ")) do %>
+      <% items.each_with_index do |item, index| %>
+        <% is_active = initial_active_key ? (item.key.to_s == initial_active_key.to_s) : (index == 0) %>
+        <%= tag.div(**item.pane_attributes(is_active)) do %>
+          <% if item.force_render || is_active || !destroy_inactive_tab_pane %>
+            <%= item.content %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,196 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Tabs
+    class Component < Hakumi::BaseComponent
+      TYPES = %i[line card editable_card].freeze
+      SIZES = %i[large middle small].freeze
+      TAB_POSITIONS = %i[top bottom left right].freeze
+      INDICATOR_ALIGNS = %i[start center end].freeze
+
+      renders_many :items, ->(
+        key:,
+        label: nil,
+        icon: nil,
+        disabled: false,
+        closable: nil,
+        close_icon: nil,
+        force_render: false,
+        **options,
+        &block
+      ) do
+        item = Hakumi::Tabs::Item::Component.new(
+          key: key,
+          label: label,
+          icon: icon,
+          disabled: disabled,
+          closable: closable.nil? ? (@type == :editable_card) : closable,
+          close_icon: close_icon,
+          force_render: force_render,
+          parent: self,
+          **options
+        )
+        item.content = capture(&block) if block
+        item
+      end
+
+      def initialize(
+        active_key: nil,
+        default_active_key: nil,
+        type: :line,
+        size: :middle,
+        tab_position: :top,
+        centered: false,
+        animated: true,
+        indicator: nil,
+        tab_bar_gutter: nil,
+        tab_bar_extra_content_left: nil,
+        tab_bar_extra_content_right: nil,
+        add_icon: nil,
+        hide_add: false,
+        destroy_inactive_tab_pane: false,
+        **html_options
+      )
+        @active_key = active_key
+        @default_active_key = default_active_key
+        @type = type
+        @size = size
+        @tab_position = tab_position
+        @centered = centered
+        @animated = animated
+        @indicator = indicator || {}
+        @tab_bar_gutter = tab_bar_gutter
+        @tab_bar_extra_content_left = tab_bar_extra_content_left
+        @tab_bar_extra_content_right = tab_bar_extra_content_right
+        @add_icon = add_icon
+        @hide_add = hide_add
+        @destroy_inactive_tab_pane = destroy_inactive_tab_pane
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      attr_reader :type, :size, :tab_position, :centered, :animated, :indicator,
+                  :tab_bar_gutter, :tab_bar_extra_content_left,
+                  :tab_bar_extra_content_right, :add_icon, :hide_add, :destroy_inactive_tab_pane
+
+      def tabs_classes
+        class_names(
+          "tabs",
+          {
+            @type => @type != :line,
+            @size => @size != :middle,
+            @tab_position => @tab_position != :top,
+            centered: @centered
+          },
+          [ @html_options[:class] ]
+        )
+      end
+
+      def vertical?
+        %i[left right].include?(@tab_position)
+      end
+
+      def editable?
+        @type == :editable_card
+      end
+
+      def initial_active_key
+        @active_key || @default_active_key
+      end
+
+      def indicator_size
+        @indicator[:size]
+      end
+
+      def indicator_align
+        @indicator[:align] || :center
+      end
+
+      def wrapper_attributes
+        base_attrs = {
+          class: tabs_classes,
+          data: stimulus_data
+        }
+        merge_attributes(base_attrs, @html_options.except(:class))
+      end
+
+      def stimulus_controller
+        "hakumi--tabs"
+      end
+
+      def stimulus_data
+        data = {
+          controller: stimulus_controller,
+          "#{stimulus_controller}-active-key-value" => initial_active_key,
+          "#{stimulus_controller}-tab-position-value" => @tab_position.to_s,
+          "#{stimulus_controller}-indicator-align-value" => indicator_align.to_s
+        }
+
+        data["#{stimulus_controller}-indicator-size-value"] = indicator_size if indicator_size
+        if editable?
+          data["#{stimulus_controller}-tab-template-value"] = tab_template_html
+          data["#{stimulus_controller}-pane-template-value"] = pane_template_html
+          data["#{stimulus_controller}-close-button-template-value"] = close_button_template_html
+        end
+
+        data
+      end
+
+      def tab_template_html
+        # Template for dynamically added tabs - uses {{key}}, {{label}}, {{closeButton}} placeholders
+        '<div class="hakumi-tabs-tab" data-key="{{key}}" data-hakumi--tabs-target="tab" data-action="click->hakumi--tabs#selectTab"><div class="hakumi-tabs-tab-btn"><span class="hakumi-tabs-tab-label">{{label}}</span></div>{{closeButton}}</div>'.dup.force_encoding("UTF-8")
+      end
+
+      def pane_template_html
+        '<div class="hakumi-tabs-tabpane hakumi-tabs-tabpane-hidden" data-key="{{key}}" data-hakumi--tabs-target="pane" aria-hidden="true">{{content}}</div>'.dup.force_encoding("UTF-8")
+      end
+
+      def close_button_template_html
+        @close_button_template_html ||= ApplicationController.render(
+          Hakumi::Button::Component.new(
+            type: :text,
+            size: :small,
+            icon: :close,
+            class: "hakumi-tabs-tab-remove",
+            aria: { label: "Remove tab" },
+            data: { action: "click->hakumi--tabs#removeTab", key: "{{key}}" }
+          ),
+          layout: false
+        ).strip
+      end
+
+      def nav_list_style
+        styles = []
+        styles << "--tab-bar-gutter: #{@tab_bar_gutter}px" if @tab_bar_gutter
+        styles.join("; ") if styles.any?
+      end
+
+      def has_extra_content?
+        @tab_bar_extra_content_left.present? ||
+          @tab_bar_extra_content_right.present?
+      end
+
+      def extra_content_left
+        @tab_bar_extra_content_left
+      end
+
+      def extra_content_right
+        @tab_bar_extra_content_right
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:type, TYPES)
+        validate_inclusion!(:size, SIZES)
+        validate_inclusion!(:tab_position, TAB_POSITIONS)
+        if @indicator[:align]
+          unless INDICATOR_ALIGNS.include?(@indicator[:align])
+            raise ArgumentError, "Invalid indicator align: #{@indicator[:align]}. Must be one of: #{INDICATOR_ALIGNS.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/tabs/item/component.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Tabs
+    module Item
+      class Component < Hakumi::BaseComponent
+        def initialize(
+          key:,
+          label: nil,
+          icon: nil,
+          disabled: false,
+          closable: false,
+          close_icon: nil,
+          force_render: false,
+          parent: nil,
+          **html_options
+        )
+          @key = key
+          @label = label
+          @icon = icon
+          @disabled = disabled
+          @closable = closable
+          @close_icon = close_icon
+          @force_render = force_render
+          @parent = parent
+          @html_options = html_options
+          @content = nil
+        end
+
+        attr_reader :key, :label, :icon, :disabled, :closable, :close_icon, :force_render
+        attr_accessor :content
+
+        def tab_classes(active)
+          classes = [ "hakumi-tabs-tab" ]
+          classes << "hakumi-tabs-tab-active" if active
+          classes << "hakumi-tabs-tab-disabled" if @disabled
+          classes << "hakumi-tabs-tab-with-remove" if @closable
+          classes.join(" ")
+        end
+
+        def tab_attributes(active)
+          base_attrs = {
+            class: tab_classes(active),
+            role: "tab",
+            "aria-selected": active.to_s,
+            "aria-disabled": @disabled.to_s,
+            tabindex: active ? "0" : "-1",
+            data: {
+              "hakumi--tabs-target": "tab",
+              key: @key
+            }
+          }
+
+          unless @disabled
+            base_attrs[:data][:action] = "click->hakumi--tabs#selectTab"
+          end
+
+          merge_attributes(base_attrs, @html_options.except(:class))
+        end
+
+        def pane_classes(active)
+          classes = [ "hakumi-tabs-tabpane" ]
+          classes << "hakumi-tabs-tabpane-active" if active
+          classes << "hakumi-tabs-tabpane-hidden" unless active
+          classes.join(" ")
+        end
+
+        def pane_attributes(active)
+          {
+            class: pane_classes(active),
+            role: "tabpanel",
+            "aria-hidden": (!active).to_s,
+            tabindex: active ? "0" : "-1",
+            data: {
+              "hakumi--tabs-target": "pane",
+              key: @key
+            }
+          }
+        end
+
+        def render_close_icon
+          @close_icon || :close
+        end
+      end
+    end
+  end
+end