lesli_view 1.1.2 → 1.1.3

data/lib/lesli_view/elements/table.css

@@ -0,0 +1,91 @@
+/* Tailwind styles for LesliView::Elements::Table. */
+
+@layer components {
+    .lesli-table-container {
+        @apply w-full overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm;
+    }
+
+    .lesli-table {
+        width: 100%;
+        min-width: 40rem;
+        border-collapse: collapse;
+        @apply text-left text-sm text-slate-600;
+    }
+
+    .lesli-table thead {
+        @apply border-b border-slate-200 bg-slate-50;
+    }
+
+    .lesli-table th {
+        @apply whitespace-nowrap px-4 py-3 text-xs font-semibold uppercase tracking-wide text-slate-600;
+    }
+
+    .lesli-table td {
+        @apply border-b border-slate-100 px-4 py-3 align-middle;
+    }
+
+    .lesli-table tbody tr {
+        @apply transition-colors hover:bg-sky-50/50;
+    }
+
+    .lesli-table tbody tr:last-child td {
+        @apply border-b-0;
+    }
+
+    .lesli-table--striped tbody tr:nth-child(even) {
+        @apply bg-slate-50/60;
+    }
+
+    .lesli-table--striped tbody tr:nth-child(even):hover {
+        @apply bg-sky-50/70;
+    }
+
+    .lesli-table--compact th,
+    .lesli-table--compact td {
+        @apply px-3 py-2;
+    }
+
+    .lesli-table__cell--center {
+        @apply text-center;
+    }
+
+    .lesli-table__cell--right {
+        @apply text-right;
+    }
+
+    .lesli-table__cell--left {
+        @apply text-left;
+    }
+
+    .lesli-table td.lesli-table__cell--linked {
+        @apply p-0;
+    }
+
+    .lesli-table__link {
+        @apply block px-4 py-3 text-slate-700 transition-colors hover:text-sky-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500/40;
+    }
+
+    .lesli-table--compact .lesli-table__link {
+        @apply px-3 py-2;
+    }
+
+    .lesli-table__row--danger {
+        @apply bg-rose-50 text-rose-900;
+    }
+
+    .lesli-table__row--warning {
+        @apply bg-amber-50 text-amber-900;
+    }
+
+    .lesli-table__row--info {
+        @apply bg-sky-50 text-sky-900;
+    }
+
+    .lesli-table__row--success {
+        @apply bg-emerald-50 text-emerald-900;
+    }
+
+    .lesli-table__empty {
+        @apply py-12 text-center text-sm text-slate-400;
+    }
+}

data/lib/lesli_view/elements/table.html.erb

@@ -1,24 +1,18 @@
-<div class="lesli-table-container table-container">
-    <table id="<%= id %>" class="table is-fullwidth lesli-table <%= class_name %>">
+<div class="lesli-table-container">
+    <table id="<%= id %>" class="<%= table_classes %>">
+        <% if caption.present? %>
+            <caption class="sr-only"><%= caption %></caption>
+        <% end %>
+
         <% unless headless %>
             <thead>
                 <tr>
                     <% columns.each do |column| %>
-                        <th 
-                            width="<%= column[:width] %>" 
-                            class="<%= table_header_class(column) %>" 
-                            data-action="click->table#sort" 
-                            data-field="<%= column[:field] %>">
-                            <% if column[:sort] %>
-                                <span class="icon-text">
-                                    <span><%= column[:label] %></span>
-                                    <span class="icon">
-                                        <span class="material-symbols"><%= column[:field] == @current_sort ? (current_sort_dir(column) == "asc" ? "arrow_upward" : "arrow_downward") : "sort" %></span>
-                                    </span>
-                                </span>
-                            <% else %>
-                                <%= column[:label] %>
-                            <% end %>
+                        <th
+                            scope="col"
+                            width="<%= column[:width] %>"
+                            class="<%= column_class(column) %>">
+                            <%= column[:label] %>
                         </th>
                     <% end %>
                 </tr>
@@ -26,14 +20,15 @@
         <% end %>
         <tbody>
             <% if records %>
-                <% records.each_with_index do |record, i| %>
+                <% records.each do |record| %>
                     <tr>
                         <% columns.each do |column| %>
-                            <td class="<%= table_body_class(column) %>">
+                            <% value = value_for(record, column) %>
+                            <td class="<%= class_names(column_class(column), "lesli-table__cell--linked": link.present?) %>">
                                 <% if link %>
-                                    <%= link_to(record[column[:field]] || "", link.call(record), class: "link", data: { turbo_frame: '_top' }) %>
+                                    <%= link_to(value || "", link.call(record), class: "lesli-table__link", data: { turbo_frame: "_top" }) %>
                                 <% else %>
-                                    <%= record[column[:field]] %>
+                                    <%= value %>
                                 <% end %>
                             </td>
                         <% end %>
@@ -43,6 +38,14 @@
             <% rows.each do |row| %>
                 <%= row %>
             <% end %>
+
+            <% if empty? %>
+                <tr>
+                    <td class="lesli-table__empty" colspan="<%= [columns.size, 1].max %>">
+                        <%= empty_text %>
+                    </td>
+                </tr>
+            <% end %>
         </tbody>
     </table>
 </div>

data/lib/lesli_view/elements/table.rb

@@ -33,50 +33,100 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Table < ViewComponent::Base
-            attr_reader :id, :class_name, :pagination, :loading, :headless, :columns, :records, :link
+            attr_reader :id, :class_name, :headless, :columns, :records, :link, :caption, :empty_text
 
             renders_many :rows, "TableRow"
 
-            def initialize(columns: nil, records: nil, id: nil, class_name: "is-striped", pagination: nil, loading: false, headless: false, link: nil)
+            def initialize(
+                columns: nil,
+                records: nil,
+                id: nil,
+                class_name: nil,
+                headless: false,
+                link: nil,
+                caption: nil,
+                empty: nil,
+                striped: true,
+                compact: false
+            )
                 @id = id
                 @class_name = class_name
-                @pagination = pagination
-                @loading = loading
                 @headless = headless
-                @columns = columns
+                @columns = Array(columns).map { |column| column.to_h.symbolize_keys }
                 @records = records
                 @link = link
+                @caption = caption
+                @empty_text = empty || I18n.t("lesli_view.table.empty", default: "No records found")
+                @striped = striped
+                @compact = compact
             end
 
-            def table_header_class(column)
-                column[:field] == "id" || column[:align] == "center" ? "has-text-centered" : ""
+            def table_classes
+                class_names(
+                    "lesli-table",
+                    ("lesli-table--striped" if @striped),
+                    ("lesli-table--compact" if @compact),
+                    class_name
+                )
             end
 
-            def table_body_class(column)
-                column[:field] == "id" || column[:align] == "center" ? "has-text-centered" : ""
+            def column_class(column)
+                alignment = column[:align]&.to_sym
+                alignment = :center if column[:field].to_s == "id"
+                return unless %i[left center right].include?(alignment)
+
+                "lesli-table__cell--#{alignment}"
+            end
+
+            def value_for(record, column)
+                field = column.fetch(:field)
+                field_name = field.to_s
+
+                if record.respond_to?(:attributes) && record.attributes.key?(field_name)
+                    record.attributes[field_name]
+                elsif record.respond_to?(:key?)
+                    return record[field] if record.key?(field)
+                    return record[field_name] if record.key?(field_name)
+                    return record[field_name.to_sym] if record.key?(field_name.to_sym)
+                elsif record.respond_to?(field_name)
+                    record.public_send(field_name)
+                end
+            end
+
+            def empty?
+                records.present? ? records.empty? : rows.empty?
             end
 
             class TableRow < ViewComponent::Base
                 renders_many :cells, "TableData"
 
-                def initialize(css_class: "")
-                    @css_class = css_class
+                STATUSES = %w[danger info success warning].freeze
+
+                def initialize(class_name: nil, status: nil)
+                    @class_name = class_name
+                    @status = status.to_s if STATUSES.include?(status.to_s)
                 end
 
                 def call
-                    # safe_joins ensure multiple <td> elements render correctly
-                    content_tag(:tr, safe_join(cells), class:@css_class)
+                    content_tag(
+                        :tr,
+                        safe_join(cells),
+                        class: class_names(@class_name, @status && "lesli-table__row--#{@status}")
+                    )
                 end
 
                 class TableData < ViewComponent::Base
-                    attr_reader :css_class
+                    attr_reader :class_name
 
-                    def initialize(css_class: "")
-                        @css_class = css_class
+                    def initialize(class_name: nil, align: nil)
+                        @class_name = class_names(
+                            class_name,
+                            ("lesli-table__cell--#{align}" if %i[left center right].include?(align&.to_sym))
+                        )
                     end
                     
                     def call
-                        content_tag :td, content, class: css_class
+                        content_tag(:td, content, class: class_name)
                     end
                 end
             end

data/lib/lesli_view/forms/builder.rb

@@ -35,9 +35,22 @@ Building a better future, one line of code at a time.
 module LesliView
     module Forms
         class Builder < ActionView::Helpers::FormBuilder
-            def css_category category=nil 
-                return "is-#{category}"
-            end 
+            CATEGORY_ALIASES = {
+                alert: :danger,
+                error: :danger,
+                notice: :info
+            }.freeze
+
+            def css_category(category = nil)
+                return if category.blank?
+
+                normalized_category = CATEGORY_ALIASES.fetch(category.to_sym, category.to_sym)
+                "is-#{normalized_category}"
+            end
+
+            def merge_css_classes(*classes)
+                classes.flatten.compact.flat_map { |value| value.to_s.split }.reject(&:blank?).uniq.join(" ")
+            end
 
             include LesliView::Forms::Fields
             include LesliView::Forms::Inputs

data/lib/lesli_view/forms/builder_horizontal.rb

@@ -1,25 +1,49 @@
 module LesliView
     module Forms
         class BuilderHorizontal < Builder
-            def field_control(attribute, label: nil, message:nil, category:nil, icon:nil)
-                super(attribute, label:label, message:message, category:category, icon:icon, horizontal:true)
+            def field_control(attribute, label: nil, message: nil, category: nil, icon: nil, **options)
+                super(attribute, label: label, message: message, category: category, icon: icon, horizontal: true, **options)
             end
 
-            def field_select(attribute, choices, options = {}, html_options = {}, label: nil, humanize: true)
-                super(attribute, choices, options, html_options, label: label, humanize: humanize, horizontal: true)
+            def field_control_text(attribute, label: nil, message: nil, category: nil, icon: nil, **options)
+                super(attribute, label: label, message: message, category: category, icon: icon, horizontal: true, **options)
+            end
+
+            def field_control_email(attribute, label: nil, message: nil, category: nil, icon: nil, **options)
+                super(attribute, label: label, message: message, category: category, icon: icon, horizontal: true, **options)
+            end
+
+            def field_control_checkbox(attribute, label: nil, message: nil, category: nil, icon: nil, **options)
+                super(attribute, label: label, message: message, category: category, icon: icon, horizontal: true, **options)
+            end
+
+            def field_control_password(attribute, label: nil, message: nil, category: nil, icon: nil, **options)
+                super(attribute, label: label, message: message, category: category, icon: icon, horizontal: true, **options)
+            end
+
+            def field_control_textarea(attribute, label: nil, message: nil, category: nil, icon: nil, **options)
+                super(attribute, label: label, message: message, category: category, icon: icon, horizontal: true, **options)
+            end
+
+            def field_textarea(attribute, **options)
+                field_control_textarea(attribute, **options)
+            end
+
+            def field_select(attribute, choices, options = {}, html_options = {}, label: nil, humanize: true, **field_options)
+                field_control_select(attribute, choices, label: label, humanize: humanize, options: options, html_options: html_options, **field_options)
             end
 
             def field_control_submit(value = nil, options = {})
                 super(value, options, horizontal:true)
             end
 
-            def field_control_button(value = nil, options = {}, icon:nil, horizontal: false)
-                super(value, options, icon:icon, horizontal:true)
-            end 
+            def field_control_button(value = nil, options = {}, category: "primary", icon: nil, type: "submit")
+                super(value, options, category: category, icon: icon, type: type, horizontal: true)
+            end
 
-            def field_control_select(attribute, choices, label: nil, message:nil, category:nil, icon:nil, humanize:true)
-                super(attribute, choices, label:label, message:message, category:category, icon:icon, horizontal:true, humanize:humanize)
-            end 
+            def field_control_select(attribute, choices, label: nil, message: nil, category: nil, icon: nil, humanize: true, options: {}, html_options: {})
+                super(attribute, choices, label: label, message: message, category: category, icon: icon, horizontal: true, humanize: humanize, options: options, html_options: html_options)
+            end
         end
     end
 end

data/lib/lesli_view/forms/fields.rb

@@ -1,67 +1,113 @@
 module LesliView
     module Forms
         module Fields
-            def field_control(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
-                field_control_text(attribute, label:label, message:message, category:category, icon:icon, horizontal:horizontal)
+            def field_control(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
+                field_control_text(attribute, label: label, message: message, category: category, icon: icon, horizontal: horizontal, **options)
             end
 
-            def field_control_checkbox(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+            def field_control_checkbox(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
+                label_text = label.presence || attribute.to_s.humanize
+                checkbox_html = check_box(attribute, options, true, false)
+                control_html = @template.content_tag(:label, class: "lesli-form-checkbox-label") do
+                    @template.safe_join([
+                        checkbox_html,
+                        @template.content_tag(:span, label_text)
+                    ])
+                end
+
+                field_control_builder(
+                    control_html: control_html,
+                    message_text: message,
+                    category: category,
+                    horizontal: horizontal
+                )
+            end
+
+            def field_control_password(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
                 label_html = label(attribute, label)
-                text_field_html = check_box(attribute, {}, true, false)
+                control_html = password_field(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
-                    control_html: text_field_html,
+                    control_html: control_html,
+                    message_text: message,
+                    category: category,
+                    icon: icon,
                     horizontal: horizontal
                 )
             end
 
-            def field_control_text(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+            def field_control_text(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
                 label_html = label(attribute, label)
-                text_field_html = text_field(attribute)
+                control_html = text_field(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
-                    control_html: text_field_html,
+                    control_html: control_html,
+                    message_text: message,
+                    category: category,
+                    icon: icon,
                     horizontal: horizontal
                 )
             end
 
-            def field_control_email(attribute, label: nil, message:nil, category:nil, icon:nil, horizontal: false)
+            def field_control_email(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
                 label_html = label(attribute, label)
-                control_html = email_field(attribute)
+                control_html = email_field(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
                     control_html: control_html,
+                    message_text: message,
+                    category: category,
                     horizontal: horizontal,
-                    icon:icon
+                    icon: icon
                 )
             end
 
-            def field_control_select(attribute, choices, label: nil, message:nil, category:nil, icon:nil, horizontal: false, humanize:true)
-                choices = choices.map { |k, v| [k.humanize.capitalize, v] } if humanize
-                value = @object.send(attribute)
+            def field_control_select(attribute, choices, label: nil, message: nil, category: nil, icon: nil, horizontal: false, humanize: true, options: {}, html_options: {})
+                choices = choices.map { |text, value| [text.to_s.humanize, value] } if humanize
                 label_html = label(attribute, label)
-                select_html = select(attribute, choices, {}, { value: value })
+                select_html = select(attribute, choices, options, html_options)
 
                 field_control_builder(
                     label_html: label_html,
-                    control_html: @template.content_tag(:div, select_html, class: "select is-fullwidth"),
+                    control_html: @template.content_tag(:div, select_html, class: "lesli-form-select-wrapper"),
+                    message_text: message,
+                    category: category,
+                    icon: icon,
                     horizontal: horizontal
                 )
             end
 
-            def field_control_textarea(attribute, label:nil, message:nil, category:nil, icon:nil, horizontal: false)
-
-                label_html = label == false ? '' : label(attribute, label)
-                control_html = rich_textarea(attribute)
+            def field_control_textarea(attribute, label: nil, message: nil, category: nil, icon: nil, horizontal: false, **options)
+                label_html = label == false ? nil : label(attribute, label)
+                control_html = rich_textarea(attribute, options)
 
                 field_control_builder(
                     label_html: label_html,
                     control_html: control_html,
+                    message_text: message,
+                    category: category,
                     horizontal: horizontal,
-                    icon:icon
+                    icon: icon
+                )
+            end
+
+            # Backward-compatible shorthand used by older Lesli forms.
+            def field_textarea(attribute, **options)
+                field_control_textarea(attribute, **options)
+            end
+
+            def field_select(attribute, choices, options = {}, html_options = {}, label: nil, humanize: true, **field_options)
+                field_control_select(
+                    attribute,
+                    choices,
+                    label: label,
+                    humanize: humanize,
+                    options: options,
+                    html_options: html_options,
+                    **field_options
                 )
             end
 
@@ -70,75 +116,62 @@ module LesliView
                 field_control_builder(control_html: submit_html, horizontal: horizontal)
             end
 
-            def field_control_button(value = nil, options = {}, category:"primary", icon:nil, type:"submit", horizontal: false)
-                # Merge user-provided classes with default button classes
-                button_classes = ["button", "is-#{category}"]
+            def field_control_button(value = nil, options = {}, category: "primary", icon: nil, type: "submit", horizontal: false)
+                options = options.symbolize_keys
+                button_classes = merge_css_classes("lesli-form-button", css_category(category), options.delete(:class))
 
-                button_html = @template.content_tag(:button, class: button_classes, type: type, **options.except(:class)) do
-                    html = "".html_safe
+                button_html = @template.content_tag(:button, class: button_classes, type: type, **options) do
+                    content = []
                     if icon.present?
-                        html << @template.content_tag(:span, class: "icon") do
+                        content << @template.content_tag(:span, class: "lesli-form-button-icon", aria: { hidden: true }) do
                             @template.content_tag(:span, icon, class: "material-symbols")
                         end
                     end
-                    html << @template.content_tag(:span, value) if value.present?
-                    html
+                    content << @template.content_tag(:span, value) if value.present?
+                    @template.safe_join(content)
                 end
-                field_control_builder(control_html: button_html, icon:nil, horizontal: horizontal)
+                field_control_builder(control_html: button_html, horizontal: horizontal)
             end
 
             def field_control_builder(
-                label_html:nil, 
-                control_html:nil, 
-                message_text:nil,
-                horizontal:false, 
-                category:nil,
-                icon:nil, 
+                label_html: nil,
+                control_html: nil,
+                message_text: nil,
+                horizontal: false,
+                category: nil,
+                icon: nil,
                 &block
             )
-
-                icon_left = icon
-                icon_right = nil
-
-                # Conditionally add 'is-horizontal' if horizontal is true
-                field_classes = ['field']
-                field_classes << 'is-horizontal' if horizontal
-
-                control_classes = ['control']
-                control_classes << 'has-icons-left' if icon_left
-                control_classes << 'has-icons-right' if icon_right
-
-                help_class = ""
-
-                @template.content_tag(:div, class: 'lesli-form-field mb-3') do
-                    @template.content_tag(:div, class: field_classes.join(' ')) do
-                        @template.content_tag(:div, label_html, class: 'field-label is-normal mb-1') +
-                        @template.content_tag(:div, class: 'field-body') do
-                            @template.content_tag(:div, class: 'field') do
-                                control_html = @template.content_tag(:div, class: control_classes.join(' ')) do
-                                    content = ''.html_safe
-                                    content << (block_given? ? @template.capture(&block) : control_html)
-                                    content << icon_html(icon_left, 'left') if icon_left
-                                    content << icon_html(icon_right, 'right') if icon_right
-                                    content
-                                end
-                                control_html + @template.content_tag(:p, message_text, class: "help #{css_category(category)}")
-                            end
+                field_classes = merge_css_classes("lesli-form-field", horizontal && "is-horizontal", css_category(category))
+                control_classes = merge_css_classes("lesli-form-control", icon.present? && "has-icon")
+                captured_control = block_given? ? @template.capture(&block) : control_html
+
+                @template.content_tag(:div, class: field_classes) do
+                    content = []
+                    content << @template.content_tag(:div, label_html, class: "lesli-form-label-wrapper") if label_html.present?
+                    content << @template.content_tag(:div, class: "lesli-form-field-body") do
+                        body = []
+                        body << @template.content_tag(:div, class: control_classes) do
+                            @template.safe_join([captured_control, icon_html(icon)].compact)
                         end
+                        if message_text.present?
+                            body << @template.content_tag(:p, message_text, class: merge_css_classes("lesli-form-help", css_category(category)))
+                        end
+                        @template.safe_join(body)
                     end
+                    @template.safe_join(content)
                 end
             end
 
             private
 
-            def icon_html(icon_class, position)
-                return ''.html_safe unless icon_class
+            def icon_html(icon_name)
+                return unless icon_name.present?
 
-                @template.content_tag(:span, class: "icon is-small is-#{position}") do
-                    #@template.content_tag(:i, '', class: icon_class)
-                    @template.content_tag(:span, icon_class, class: "material-symbols-outlined")
+                @template.content_tag(:span, class: "lesli-form-icon", aria: { hidden: true }) do
+                    @template.content_tag(:span, icon_name, class: "material-symbols-outlined")
                 end
-            end          
+            end
         end
     end
 end  

data/lib/lesli_view/forms/fieldset.rb

@@ -2,11 +2,11 @@ module LesliView
     module Forms
         module Fieldset
             def fieldset(legend = "", options = {}, category: nil, &block)
-                options[:class] = ["lesli-form-fieldset", "box", "pr-6", "is-#{category}"]
-                options[:class].push("pt-5") unless legend.present?
+                options = options.symbolize_keys
+                options[:class] = merge_css_classes("lesli-form-fieldset", css_category(category), options[:class])
 
                 @template.content_tag(:fieldset, options) do
-                    legend_html = legend.present? ? @template.content_tag(:h5, legend, class: ["is-size-5", "mb-5", "ml-2"]) : nil
+                    legend_html = legend.present? ? @template.content_tag(:legend, legend, class: "lesli-form-legend") : nil
                     @template.safe_join([legend_html, @template.capture(&block)].compact)
                 end
             end