hakumi_components 0.1.3.pre

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

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Switch
+    class Component < Hakumi::BaseComponent
+      include Hakumi::Concerns::FormField
+
+      SIZES = [ :small, :middle, :large ].freeze
+
+      def initialize(
+        name: nil,
+        label: nil,
+        caption: nil,
+        checked: nil,
+        default_checked: false,
+        disabled: false,
+        loading: false,
+        size: :middle,
+        checked_text: nil,
+        unchecked_text: nil,
+        standalone: true,
+        required: false,
+        errors: [],
+        **html_options
+      )
+        @name = name || "switch_#{SecureRandom.hex(4)}"
+        @label = label
+        @caption = caption
+        @checked = checked.nil? ? default_checked : checked
+        @disabled = disabled
+        @loading = loading
+        @size = size
+        @checked_text = checked_text
+        @unchecked_text = unchecked_text
+        @standalone = standalone
+        @required = required
+        @errors = Array(errors)
+        @wrapper_class = html_options.delete(:wrapper_class)
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:size, SIZES)
+      end
+
+      def wrapper_classes
+        class_names(
+          "switch",
+          {
+            checked: @checked,
+            disabled: @disabled,
+            loading: @loading,
+            @size => (@size != :middle)
+          },
+          [ @wrapper_class ]
+        )
+      end
+
+      def wrapper_attributes
+        data_attrs = {
+          controller: "hakumi--switch",
+          hakumi__switch_checked_value: @checked,
+          hakumi__switch_disabled_value: @disabled,
+          hakumi__switch_loading_value: @loading
+        }
+
+        # Merge additional data attributes from html_options
+        if @html_options[:data]
+          data_attrs = data_attrs.merge(@html_options[:data])
+        end
+
+        attrs = {
+          class: wrapper_classes,
+          role: "switch",
+          tabindex: (@disabled || @loading) ? "-1" : "0",
+          "aria-checked": @checked.to_s,
+          "aria-disabled": (@disabled || @loading).to_s,
+          data: data_attrs
+        }
+
+        # Merge id if provided
+        attrs[:id] = @html_options[:id] if @html_options[:id]
+
+        attrs
+      end
+
+      def input_attributes
+        attrs = {
+          type: "checkbox",
+          name: @name,
+          id: input_id,
+          class: [ "hakumi-switch-input", @html_options[:class] ].compact.join(" "),
+          checked: @checked ? true : nil,
+          disabled: (@disabled || @loading) ? true : nil,
+          required: @required ? true : nil,
+          "aria-invalid": has_error? ? "true" : nil,
+          "aria-describedby": describedby_ids,
+          tabindex: "-1",
+          data: {
+            action: "change->hakumi--switch#toggle",
+            hakumi__switch_target: "input"
+          }
+        }.compact
+
+        if @html_options[:data]
+          attrs[:data] = attrs[:data].merge(@html_options[:data])
+        end
+
+        attrs.merge(@html_options.except(:data, :class))
+      end
+
+      def checked_content
+        render_value(@checked_text)
+      end
+
+      def unchecked_content
+        render_value(@unchecked_text)
+      end
+    end
+  end
+end

data/app/components/hakumi/table/column/component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Table
+    module Column
+      class Component < Hakumi::BaseComponent
+        def initialize(
+          title:,
+          data_index: nil,
+          key: nil,
+          align: nil,
+          width: nil,
+          ellipsis: false,
+          sorter: nil,
+          sort_directions: nil,
+          sort_order: nil,
+          default_sort_order: nil,
+          filters: nil,
+          filter_multiple: true,
+          filtered_value: nil,
+          default_filtered_value: nil,
+          filter_mode: nil,
+          filter_search: nil,
+          hidden: false,
+          on_cell: nil,
+          class_name: nil,
+          **options,
+          &block
+        )
+          @title = title
+          @data_index = data_index
+          @key = key
+          @align = align
+          @width = width
+          @ellipsis = ellipsis
+          @sorter = sorter
+          @sort_directions = sort_directions
+          @sort_order = sort_order
+          @default_sort_order = default_sort_order
+          @filters = filters
+          @filter_multiple = filter_multiple
+          @filtered_value = filtered_value
+          @default_filtered_value = default_filtered_value
+          @filter_mode = filter_mode
+          @filter_search = filter_search
+          @hidden = hidden
+          @on_cell = on_cell
+          @class_name = class_name
+          @options = options
+          @block = block
+        end
+
+        def to_h
+          {
+            title: @title,
+            data_index: @data_index,
+            key: @key,
+            align: @align,
+            width: @width,
+            ellipsis: @ellipsis,
+            sorter: @sorter,
+            sort_directions: @sort_directions,
+            sort_order: @sort_order,
+            default_sort_order: @default_sort_order,
+            filters: @filters,
+            filter_multiple: @filter_multiple,
+            filtered_value: @filtered_value,
+            default_filtered_value: @default_filtered_value,
+            filter_mode: @filter_mode,
+            filter_search: @filter_search,
+            hidden: @hidden,
+            on_cell: @on_cell,
+            class_name: @class_name,
+            render: @block
+          }.merge(@options)
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/table/column_group/component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Table
+    module ColumnGroup
+      class Component < Hakumi::BaseComponent
+        renders_many :columns, types: {
+          column: {
+            renders: lambda do |title:, data_index: nil, key: nil, align: nil, width: nil, ellipsis: false,
+                                sorter: nil, sort_directions: nil, sort_order: nil, default_sort_order: nil,
+                                filters: nil, filter_multiple: true, filtered_value: nil, default_filtered_value: nil,
+                                filter_mode: nil, filter_search: nil, hidden: false, on_cell: nil, class_name: nil,
+                                **options, &block|
+              Hakumi::Table::Column::Component.new(
+                title: title,
+                data_index: data_index,
+                key: key,
+                align: align,
+                width: width,
+                ellipsis: ellipsis,
+                sorter: sorter,
+                sort_directions: sort_directions,
+                sort_order: sort_order,
+                default_sort_order: default_sort_order,
+                filters: filters,
+                filter_multiple: filter_multiple,
+                filtered_value: filtered_value,
+                default_filtered_value: default_filtered_value,
+                filter_mode: filter_mode,
+                filter_search: filter_search,
+                hidden: hidden,
+                on_cell: on_cell,
+                class_name: class_name,
+                **options,
+                &block
+              )
+            end,
+            as: :column
+          },
+          group: {
+            renders: lambda do |title:, key: nil, align: nil, width: nil, hidden: false, **options, &block|
+              Hakumi::Table::ColumnGroup::Component.new(
+                title: title,
+                key: key,
+                align: align,
+                width: width,
+                hidden: hidden,
+                **options,
+                &block
+              )
+            end,
+            as: :group
+          }
+        }
+
+        def initialize(title:, key: nil, align: nil, width: nil, hidden: false, **options)
+          @title = title
+          @key = key
+          @align = align
+          @width = width
+          @hidden = hidden
+          @options = options
+        end
+
+        def to_h
+          {
+            title: @title,
+            key: @key,
+            align: @align,
+            width: @width,
+            hidden: @hidden,
+            children: columns.map(&:to_h)
+          }.merge(@options)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,196 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <% if @title.present? %>
+    <div class="hakumi-table-title">
+      <%= @title.respond_to?(:call) ? @title.call : @title %>
+    </div>
+  <% end %>
+
+  <% if selection_actions? %>
+    <div class="hakumi-table-selection-actions">
+      <button type="button" data-action="click->hakumi--table#selectAll">Select all</button>
+      <button type="button" data-action="click->hakumi--table#invertSelection">Invert</button>
+      <button type="button" data-action="click->hakumi--table#clearSelection">Clear</button>
+    </div>
+  <% end %>
+
+  <div <%= tag.attributes(table_container_attributes) %>>
+    <table <%= tag.attributes(table_attributes) %>>
+      <thead class="hakumi-table-thead">
+        <% header_rows.each do |row| %>
+          <tr class="hakumi-table-header-row">
+            <% row.each do |cell| %>
+              <% column = cell[:column] %>
+              <th <%= tag.attributes(header_cell_attributes(column, col_span: cell[:col_span], row_span: cell[:row_span])) %>
+                  data-column-key="<%= column[:key] %>"
+                  data-field="<%= column[:data_index] %>"
+                  <% if column[:sort_value] %>data-sort-field="<%= column[:sort_value] %>"<% end %>
+                  <% if column_sortable?(column) %>data-action="click->hakumi--table#toggleSort"<% end %>
+                  <% if column_filterable?(column) %>data-hakumi--table-target="filterToggle"<% end %>
+                  data-sortable="<%= column_sortable?(column) %>"
+                  data-filterable="<%= column_filterable?(column) %>"
+                  data-default-sort="<%= default_sort_order(column) %>"
+                  data-default-filter="<%= default_filtered_values(column).to_json %>">
+                <div class="hakumi-table-header-cell-content">
+                  <% if column[:selection] && selection_all_enabled? %>
+                    <% header_state = selection_header_state %>
+                    <input type="checkbox"
+                           class="hakumi-table-selection-input"
+                           data-hakumi--table-target="selectionAll"
+                           data-action="change->hakumi--table#toggleAll"
+                           <%= "checked" if header_state[:checked] %>
+                           <%= "data-indeterminate=true" if header_state[:indeterminate] %>>
+                  <% elsif column[:expand] %>
+                    <span class="hakumi-table-header-title"></span>
+                  <% elsif column[:drag_handle] %>
+                    <span class="hakumi-table-header-title"></span>
+                  <% else %>
+                    <span class="hakumi-table-header-title">
+                      <%= column[:title].respond_to?(:call) ? column[:title].call : column[:title] %>
+                    </span>
+                  <% end %>
+                  <% if column_sortable?(column) %>
+                    <span class="hakumi-table-sorter" aria-hidden="true">
+                      <span class="hakumi-table-sorter-up"></span>
+                      <span class="hakumi-table-sorter-down"></span>
+                    </span>
+                  <% end %>
+                  <% if column_filterable?(column) %>
+                    <details class="hakumi-table-filter">
+                      <summary class="hakumi-table-filter-trigger" data-action="click->hakumi--table#toggleFilter">
+                        <span class="hakumi-table-filter-icon" aria-hidden="true"></span>
+                      </summary>
+                      <div class="hakumi-table-filter-dropdown" data-hakumi--table-target="filterDropdown" data-column-key="<%= column[:key] %>" data-filter-multiple="<%= column_filter_multiple?(column) %>">
+                        <% if @filter_search || column[:filter_search] %>
+                          <div class="hakumi-table-filter-search">
+                            <input type="text" placeholder="Search" data-action="input->hakumi--table#filterSearch" data-hakumi--table-target="filterSearch">
+                          </div>
+                        <% end %>
+                        <div class="hakumi-table-filter-options">
+                          <% header_filter_options(column).each do |option| %>
+                            <% value = option[:value] || option["value"] %>
+                            <% label = option[:text] || option["text"] || value %>
+                            <label class="hakumi-table-filter-option">
+                              <input
+                                type="<%= column_filter_multiple?(column) ? 'checkbox' : 'radio' %>"
+                                name="filter-<%= column[:key] %>"
+                                value="<%= value %>"
+                                data-action="change->hakumi--table#applyFilters"
+                                data-hakumi--table-target="filterOption"
+                                <%= "checked" if default_filtered_values(column).include?(value) %>>
+                              <span><%= label %></span>
+                            </label>
+                          <% end %>
+                        </div>
+                        <div class="hakumi-table-filter-actions">
+                          <button type="button" class="hakumi-table-filter-clear" data-action="click->hakumi--table#clearFilters">Reset</button>
+                          <button type="button" class="hakumi-table-filter-confirm" data-action="click->hakumi--table#confirmFilters">OK</button>
+                        </div>
+                      </div>
+                    </details>
+                  <% end %>
+                </div>
+              </th>
+            <% end %>
+          </tr>
+        <% end %>
+      </thead>
+      <tbody class="hakumi-table-tbody">
+        <% if display_rows.any? %>
+          <% display_rows.each_with_index do |row_data, index| %>
+            <% row = row_data[:row] %>
+            <% depth = row_data[:depth] %>
+            <% row_key = row_key_for(row, index) %>
+            <tr class="<%= row_classes(row, index, row_key) %>"
+                data-hakumi--table-target="row"
+                data-row-key="<%= row_key %>"
+                data-row-type="data">
+              <% leaf_columns.each do |column| %>
+                <% raw_value = column[:data_index] ? value_from_row(row, column[:data_index]) : nil %>
+                <% attrs = cell_attributes(column, row, index, depth, row_key, raw_value) %>
+                <% next if attrs[:colspan] == 0 || attrs[:rowspan] == 0 %>
+                <td <%= tag.attributes(attrs) %> data-sort-value="<%= raw_value %>">
+                  <% content = cell_content(column, row, index, raw_value) %>
+                  <% if content.is_a?(Hash) && content[:drag_handle] %>
+                    <span class="hakumi-table-drag-handle" data-hakumi--table-target="dragHandle">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/>
+                        <circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/>
+                      </svg>
+                    </span>
+                  <% elsif content.is_a?(Hash) && content[:type] %>
+                    <input
+                      type="<%= content[:type] %>"
+                      class="hakumi-table-selection-input"
+                      data-hakumi--table-target="selectionCheckbox"
+                      data-action="change->hakumi--table#toggleRow"
+                      data-row-key="<%= content[:row_key] %>"
+                      <%= "checked" if content[:checked] %>>
+                  <% elsif content.is_a?(Hash) && content[:row_key] %>
+                    <button type="button"
+                            class="hakumi-table-expand-button <%= 'is-expanded' if content[:expanded] %>"
+                            data-hakumi--table-target="expandToggle"
+                            data-action="click->hakumi--table#toggleExpand"
+                            data-row-key="<%= content[:row_key] %>"
+                            aria-expanded="<%= content[:expanded] %>">
+                      <span class="hakumi-table-expand-icon"></span>
+                    </button>
+                  <% else %>
+                    <%= render_cell_display(column, content, raw_value, row, index) %>
+                  <% end %>
+                </td>
+              <% end %>
+            </tr>
+            <% if expandable? %>
+              <% expanded_content = expanded_row_content(row, index) %>
+              <tr class="hakumi-table-expanded-row <%= "is-expanded" if expanded_row?(row_key) %>"
+                  data-row-key="<%= row_key %>"
+                  data-row-type="expanded"
+                  <%= "hidden" unless expanded_row?(row_key) %>>
+                <td colspan="<%= leaf_column_count %>">
+                  <div class="hakumi-table-expanded-content">
+                    <%= expanded_content %>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          <% end %>
+        <% else %>
+          <tr class="hakumi-table-empty-row">
+            <td colspan="<%= leaf_column_count %>">
+              <div class="hakumi-table-empty">
+                <%= empty_state %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+      <% if summary_content %>
+        <tfoot class="hakumi-table-summary">
+          <tr>
+            <td colspan="<%= leaf_column_count %>">
+              <%= summary_content %>
+            </td>
+          </tr>
+        </tfoot>
+      <% end %>
+    </table>
+  </div>
+
+  <% if @scroll_x.present? %>
+    <div class="hakumi-table-scroll-bar" data-hakumi--table-target="scrollBar">
+      <div class="hakumi-table-scroll-bar-thumb" data-hakumi--table-target="scrollBarThumb"></div>
+    </div>
+  <% end %>
+
+  <% if @footer.present? %>
+    <div class="hakumi-table-footer">
+      <%= @footer.respond_to?(:call) ? @footer.call : @footer %>
+    </div>
+  <% end %>
+
+  <% if pagination_component || (@data_url && @pagination) %>
+    <div class="hakumi-table-pagination">
+      <%= render pagination_component || ajax_pagination_component %>
+    </div>
+  <% end %>
+</div>