lesli_view 1.1.2 → 1.1.4

data/lib/lesli_view/elements/button.rb

@@ -35,33 +35,38 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Button < ViewComponent::Base
-            attr_reader :label, :url, :icon, :loading, :solid, :info, :success, :warning, :danger, :small, :dispatch, :method, :params, :css_class
+            attr_reader :label, :url, :icon, :loading, :solid, :light,
+                :info, :success, :warning, :danger, :small, :dispatch,
+                :method, :params, :css_class, :aria_label, :disabled,
+                :button_type, :data
 
-            # Adds two numbers together.
-            # @param [Integer] a The first number.
-            # @param [Integer] b The second number.
-            # @return [Integer] The sum of the two numbers.
             def initialize(
-                label=nil, 
-                url:nil,
-                icon: nil, 
-                loading: false, 
-                solid: false, 
-                info: false, 
-                success: false, 
-                warning: false, 
-                danger: false, 
+                label = nil,
+                url: nil,
+                icon: nil,
+                loading: false,
+                solid: true,
+                light: false,
+                info: true,
+                success: false,
+                warning: false,
+                danger: false,
                 small: false,
-                dispatch:nil,
+                dispatch: nil,
                 method: nil,
-                params:nil,
-                css_class:nil
+                params: nil,
+                css_class: nil,
+                aria_label: nil,
+                disabled: false,
+                type: :button,
+                data: {}
             )
                 @label = label
                 @url = url
                 @icon = icon
                 @loading = loading
                 @solid = solid
+                @light = light
                 @info = info
                 @success = success
                 @warning = warning
@@ -71,6 +76,10 @@ module LesliView
                 @method = method
                 @params = params
                 @css_class = css_class
+                @aria_label = aria_label
+                @disabled = disabled
+                @button_type = type
+                @data = data
             end
 
             def mode
@@ -80,20 +89,22 @@ module LesliView
             end
 
             def alpine_attributes
-                return {} unless @dispatch
+                return {} unless dispatch.present?
 
                 {
-                "x-data": "",
-                "@click": "$dispatch('#{@dispatch}')"
+                    "x-data": "",
+                    "@click": "$dispatch('#{dispatch}')"
                 }
             end
 
             def html_classes
-                classes = ["button", button_variant]
-                classes << "is-light" << "is-outlined" unless solid
+                classes = ["lesli-button", button_variant]
+                classes << "is-outlined" unless solid
+                classes << "is-light" if light
                 classes << "is-loading" if loading
                 classes << "is-small" if small
-                classes << css_class 
+                classes << "is-icon-only" if icon_only?
+                classes << css_class if css_class.present?
                 classes.join(" ")
             end
 
@@ -106,21 +117,50 @@ module LesliView
             end
 
             def icon_only?
-                icon && !label
+                icon.present? && visible_label.blank?
+            end
+
+            def disabled?
+                disabled || loading
+            end
+
+            def visible_label
+                label.presence || (content if content?)
+            end
+
+            def accessible_label
+                aria_label.presence || (icon.to_s.humanize if icon_only?)
+            end
+
+            def html_data
+                { turbo_frame: "_top" }.merge(data || {})
+            end
+
+            def common_attributes
+                attributes = {
+                    class: html_classes,
+                    data: html_data,
+                    aria: {
+                        label: accessible_label,
+                        busy: loading || nil,
+                        disabled: disabled? || nil
+                    }.compact
+                }
+
+                attributes.merge(alpine_attributes)
             end
 
             def button_content
-                if @icon
-                    safe_join([
-                        content_tag(:span,
-                            content_tag(:span, @icon, class: "material-symbols"),
-                            class: "icon #{'is-small' if @small}"
-                        ),
-                        (@icon_only ? nil : content_tag(:span, @label))
-                    ].compact)
-                else
-                    @label
+                parts = []
+
+                if icon.present?
+                    parts << content_tag(:span, class: "lesli-icon", aria: { hidden: true }) do
+                        content_tag(:span, icon, class: "material-symbols")
+                    end
                 end
+
+                parts << content_tag(:span, visible_label) if visible_label.present?
+                safe_join(parts)
             end
         end  
     end

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

@@ -1,8 +1,33 @@
 
-<div class="lesli-empty has-text-centered">
-    <svg width="184" height="184" viewBox="0 0 184 184" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M145.271 90.6522H142.735V89.528C142.735 83.9793 138.222 79.4655 132.673 79.4655H85.7357C84.255 79.4655 82.1132 78.0942 81.4922 76.7515L76.1878 65.2544C74.1523 60.8499 68.9629 57.5293 64.1128 57.5293H39.7012C34.1524 57.5293 29.6387 62.043 29.6387 67.5918V151.809C29.6387 157.358 34.1524 161.872 39.7012 161.872H53.3459C53.5357 161.883 53.7139 161.932 53.9065 161.932H112.945V153.307H108.831H53.9065C53.7197 153.307 53.6219 153.278 53.5587 153.247C53.527 153.232 53.4897 153.215 53.481 153.206C53.458 153.181 53.412 153.045 53.4609 152.772L63.1985 101.419C63.4027 100.338 64.6849 99.2772 65.7803 99.2772H134.11H142.735H145.271C145.553 99.2772 145.679 99.349 145.697 99.3749C145.714 99.4008 145.766 99.533 145.714 99.809L142.735 115.524L135.979 151.159C135.775 152.24 134.493 153.301 133.395 153.301H121.964V161.926H133.395C138.621 161.926 143.48 157.904 144.455 152.767L154.189 101.413C154.713 98.6648 154.037 95.9163 152.341 93.8693C150.645 91.8281 148.069 90.6522 145.271 90.6522ZM134.11 90.6522H65.7832C60.5593 90.6522 55.7005 94.6743 54.7259 99.8119L44.9883 151.168C44.856 151.864 44.8043 152.56 44.8244 153.247H39.7012C38.922 153.247 38.2637 152.588 38.2637 151.809V67.5918C38.2637 66.8127 38.922 66.1543 39.7012 66.1543H64.1128C65.5934 66.1543 67.7353 67.5257 68.3563 68.8683L73.6607 80.3654C75.6962 84.7699 80.8855 88.0905 85.7357 88.0905H132.673C133.452 88.0905 134.11 88.7489 134.11 89.528V90.6522Z" fill="#BDBDBD"/>
-        <path d="M145.7 50.5227L153.201 43.0219C154.805 41.4176 154.739 38.7525 153.054 37.0677C151.369 35.383 148.704 35.3197 147.1 36.9211L139.599 44.422L132.098 36.9211C130.494 35.3169 127.829 35.383 126.144 37.0677C124.459 38.7525 124.396 41.4176 125.997 43.0219L133.498 50.5227L125.997 58.0236C124.393 59.6279 124.459 62.293 126.144 63.9777C127.829 65.6625 130.494 65.7257 132.098 64.1244L139.599 56.6235L147.1 64.1244C148.704 65.7286 151.369 65.6625 153.054 63.9777C154.739 62.293 154.802 59.6279 153.201 58.0236L145.7 50.5227Z" fill="#BDBDBD"/>
-    </svg>
-    <p class="has-text-grey"><%= @text %></p>
+<div
+    class="lesli-empty-state flex w-full flex-col items-center justify-center px-6 py-10 text-center sm:py-12"
+    role="region"
+    aria-label="<%= text.presence || "Empty state" %>">
+
+    <div class="mb-5 flex h-36 w-36 items-center justify-center rounded-full bg-slate-100/80 sm:h-40 sm:w-40">
+        <svg
+            class="h-28 w-28 text-slate-300 sm:h-32 sm:w-32"
+            viewBox="0 0 184 184"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false">
+            <path d="M145.271 90.6522H142.735V89.528C142.735 83.9793 138.222 79.4655 132.673 79.4655H85.7357C84.255 79.4655 82.1132 78.0942 81.4922 76.7515L76.1878 65.2544C74.1523 60.8499 68.9629 57.5293 64.1128 57.5293H39.7012C34.1524 57.5293 29.6387 62.043 29.6387 67.5918V151.809C29.6387 157.358 34.1524 161.872 39.7012 161.872H53.3459C53.5357 161.883 53.7139 161.932 53.9065 161.932H112.945V153.307H108.831H53.9065C53.7197 153.307 53.6219 153.278 53.5587 153.247C53.527 153.232 53.4897 153.215 53.481 153.206C53.458 153.181 53.412 153.045 53.4609 152.772L63.1985 101.419C63.4027 100.338 64.6849 99.2772 65.7803 99.2772H134.11H142.735H145.271C145.553 99.2772 145.679 99.349 145.697 99.3749C145.714 99.4008 145.766 99.533 145.714 99.809L142.735 115.524L135.979 151.159C135.775 152.24 134.493 153.301 133.395 153.301H121.964V161.926H133.395C138.621 161.926 143.48 157.904 144.455 152.767L154.189 101.413C154.713 98.6648 154.037 95.9163 152.341 93.8693C150.645 91.8281 148.069 90.6522 145.271 90.6522ZM134.11 90.6522H65.7832C60.5593 90.6522 55.7005 94.6743 54.7259 99.8119L44.9883 151.168C44.856 151.864 44.8043 152.56 44.8244 153.247H39.7012C38.922 153.247 38.2637 152.588 38.2637 151.809V67.5918C38.2637 66.8127 38.922 66.1543 39.7012 66.1543H64.1128C65.5934 66.1543 67.7353 67.5257 68.3563 68.8683L73.6607 80.3654C75.6962 84.7699 80.8855 88.0905 85.7357 88.0905H132.673C133.452 88.0905 134.11 88.7489 134.11 89.528V90.6522Z" fill="currentColor"/>
+            <path d="M145.7 50.5227L153.201 43.0219C154.805 41.4176 154.739 38.7525 153.054 37.0677C151.369 35.383 148.704 35.3197 147.1 36.9211L139.599 44.422L132.098 36.9211C130.494 35.3169 127.829 35.383 126.144 37.0677C124.459 38.7525 124.396 41.4176 125.997 43.0219L133.498 50.5227L125.997 58.0236C124.393 59.6279 124.459 62.293 126.144 63.9777C127.829 65.6625 130.494 65.7257 132.098 64.1244L139.599 56.6235L147.1 64.1244C148.704 65.7286 151.369 65.6625 153.054 63.9777C154.739 62.293 154.802 59.6279 153.201 58.0236L145.7 50.5227Z" fill="currentColor"/>
+        </svg>
+    </div>
+
+    <% if text.present? %>
+        <p class="text-base font-semibold text-slate-700 sm:text-lg"><%= text %></p>
+    <% end %>
+
+    <% if description.present? %>
+        <p class="mt-2 max-w-md text-sm leading-6 text-slate-500"><%= description %></p>
+    <% end %>
+
+    <% if content? %>
+        <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
+            <%= content %>
+        </div>
+    <% end %>
 </div>

data/lib/lesli_view/elements/empty.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 =begin
 
 Lesli
@@ -32,8 +34,13 @@ Building a better future, one line of code at a time.
 module LesliView
     module Elements
         class Empty < ViewComponent::Base
-            def initialize(text: "No data found")
+            attr_reader :text, :description
+
+            # `text` remains optional for icon-only uses such as error pages.
+            # A component block can be supplied to render an action below the message.
+            def initialize(text: "No data found", description: nil)
                 @text = text
+                @description = description
             end
         end
     end

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

@@ -0,0 +1,42 @@
+distribution: [{
+    label: "Deactivated_users",
+    value: summary[:total_users_deactivated],
+    percentage: percentage(summary[:total_users_deactivated], summary[:total_users]),
+    color: "#5D7C4D"
+}, {
+    label: "Locked_users",
+    value: summary[:total_users_locked],
+    percentage: percentage(summary[:total_users_locked], summary[:total_users]),
+    color: "#B23A3A"
+}, {
+    label: "Unconfirmed_users",
+    value: summary[:total_users_unconfirmed],
+    percentage: percentage(summary[:total_users_unconfirmed], summary[:total_users]),
+    color: "#5F6C7D"
+}, {
+    label: "Deleted_users",
+    value: summary[:total_users_deleted],
+    percentage: percentage(summary[:total_users_deleted], summary[:total_users]),
+    color: "#4B5FA8"
+}],
+<%= render(LesliView::Elements::Table.new(columns: [])) do |table| %>
+    <% @users[:distribution].each do |user| %>
+        <% table.with_row do |row| %>
+            <% row.with_cell do %>
+                <%= user[:label] %>
+            <% end %>
+            <% row.with_cell(class_name: "w-full p-0") do %>
+                <p style="padding:8px;border-radius:4px;background:<%= user[:color] %>;width:<%= user[:percentage] %>%">
+                </p>
+            <% end %>
+            <% row.with_cell(align: :right) do %>
+                <%= user[:value] %>
+            <% end %>
+            <% row.with_cell(align: :right) do %>
+                <span class="font-semibold text-slate-400">
+                    <%= user[:percentage] %>%
+                </span>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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