plutonium 0.34.1 → 0.35.0

data/lib/plutonium/ui/form/components/key_value_store.rb

@@ -47,12 +47,12 @@ module Plutonium
           def render_header
             div(class: "key-value-store-header") do
               if attributes[:label]
-                h3(class: "text-lg font-semibold text-gray-900 dark:text-white") do
+                h3(class: "text-lg font-semibold text-[var(--pu-text)]") do
                   plain attributes[:label]
                 end
               end
               if attributes[:description]
-                p(class: "text-sm text-gray-500 dark:text-gray-400") do
+                p(class: "text-sm text-[var(--pu-text-muted)]") do
                   plain attributes[:description]
                 end
               end
@@ -69,7 +69,7 @@ module Plutonium
 
           def render_key_value_pair(key, value, index)
             div(
-              class: "key-value-pair flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
+              class: "key-value-pair flex items-center gap-2 p-2 border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)]",
               data_key_value_store_target: "pair"
             ) do
               # Key input
@@ -79,7 +79,7 @@ module Plutonium
                 value: key,
                 name: "#{field_name}[#{index}][key]",
                 id: "#{field.dom.id}_#{index}_key",
-                class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
                 data_key_value_store_target: "keyInput"
               )
 
@@ -90,14 +90,14 @@ module Plutonium
                 value: value,
                 name: "#{field_name}[#{index}][value]",
                 id: "#{field.dom.id}_#{index}_value",
-                class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
                 data_key_value_store_target: "valueInput"
               )
 
               # Remove button
               button(
                 type: :button,
-                class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
+                class: "px-2 py-1 text-danger-600 hover:text-danger-800 focus:outline-none transition-colors",
                 data_action: "key-value-store#removePair"
               ) do
                 plain "×"
@@ -110,7 +110,7 @@ module Plutonium
               button(
                 type: :button,
                 id: "#{field.dom.id}_add_button",
-                class: "inline-flex items-center px-3 py-1 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700 dark:hover:bg-blue-800",
+                class: "pu-btn pu-btn-sm pu-btn-soft-primary",
                 data: {
                   action: "key-value-store#addPair",
                   key_value_store_target: "addButton"
@@ -124,7 +124,7 @@ module Plutonium
           def render_template
             template(data_key_value_store_target: "template") do
               div(
-                class: "key-value-pair flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
+                class: "key-value-pair flex items-center gap-2 p-2 border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)]",
                 data_key_value_store_target: "pair"
               ) do
                 input(
@@ -132,7 +132,7 @@ module Plutonium
                   placeholder: "Key",
                   name: "#{field_name}[__INDEX__][key]",
                   id: "#{field.dom.id}___INDEX___key",
-                  class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                  class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
                   data_key_value_store_target: "keyInput"
                 )
 
@@ -141,13 +141,13 @@ module Plutonium
                   placeholder: "Value",
                   name: "#{field_name}[__INDEX__][value]",
                   id: "#{field.dom.id}___INDEX___value",
-                  class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                  class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
                   data_key_value_store_target: "valueInput"
                 )
 
                 button(
                   type: :button,
-                  class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
+                  class: "px-2 py-1 text-danger-600 hover:text-danger-800 focus:outline-none transition-colors",
                   data_action: "key-value-store#removePair"
                 ) do
                   plain "×"

data/lib/plutonium/ui/form/components/resource_select.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # Select for choosing a resource record
+        class ResourceSelect < Phlexi::Form::Components::Select
+          protected
+
+          def choices
+            @choices ||= begin
+              collection = attributes.delete(:choices) || @association_class&.all || []
+              build_choice_mapper(collection)
+            end
+          end
+
+          def build_attributes
+            super
+            @association_class = attributes.delete(:association_class)
+          end
+
+          # Use include_blank string as blank option text (Phlexi default uses placeholder)
+          def blank_option_text
+            @include_blank.is_a?(String) ? @include_blank : super
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/secure_association.rb

@@ -23,8 +23,7 @@ module Plutonium
 
             a(
               href: add_url,
-              class:
-                "bg-gray-100 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-500 hover:bg-gray-200 border border-gray-300 rounded-lg p-3 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none dark:text-white"
+              class: "bg-[var(--pu-surface-alt)] hover:bg-[var(--pu-border)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] p-3 focus:ring-2 focus:ring-[var(--pu-border)] focus:outline-none text-[var(--pu-text)] transition-colors"
             ) do
               render Phlex::TablerIcons::Plus.new(class: "w-3 h-3")
             end

data/lib/plutonium/ui/form/components/uppy.rb

@@ -67,7 +67,8 @@ module Plutonium
             end
 
             div(
-              class: "attachment-preview group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300",
+              class: "attachment-preview group relative bg-[var(--pu-surface)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] hover:shadow-md transition-all duration-300",
+              style: "box-shadow: var(--pu-shadow-sm)",
               data: {
                 controller: "attachment-preview",
                 attachment_preview_mime_type_value: attachment.content_type,
@@ -99,7 +100,7 @@ module Plutonium
                 )
               else
                 div(
-                  class: "w-full h-full flex items-center justify-center bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 font-mono"
+                  class: "w-full h-full flex items-center justify-center bg-[var(--pu-surface-alt)] text-[var(--pu-text-muted)] font-mono"
                 ) do
                   ".#{attachment_extension(attachment)}"
                 end
@@ -109,7 +110,7 @@ module Plutonium
 
           def render_filename(attachment)
             div(
-              class: "px-2 py-1.5 text-sm text-gray-700 dark:text-gray-300 border-t border-gray-200 dark:border-gray-700 truncate text-center bg-white dark:bg-gray-800",
+              class: "px-2 py-1.5 text-sm text-[var(--pu-text-muted)] border-t border-[var(--pu-border)] truncate text-center bg-[var(--pu-surface)]",
               title: attachment.filename
             ) do
               plain attachment.filename.to_s
@@ -119,7 +120,7 @@ module Plutonium
           def render_delete_button
             button(
               type: "button",
-              class: "w-full py-2 px-4 text-sm text-red-600 dark:text-red-400 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/50 rounded-b-lg transition-colors duration-200 flex items-center justify-center gap-2 border-t border-gray-200 dark:border-gray-700",
+              class: "w-full py-2 px-4 text-sm text-danger-600 dark:text-danger-400 bg-[var(--pu-surface)] hover:bg-danger-50 dark:hover:bg-danger-900/50 rounded-b-[var(--pu-radius-md)] transition-colors duration-200 flex items-center justify-center gap-2 border-t border-[var(--pu-border)]",
               data: {action: "click->attachment-preview#remove"}
             ) do
               span(class: "bi bi-trash")

data/lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb

@@ -143,13 +143,13 @@ module Plutonium
 
           def render_nested_field_header(context)
             div do
-              h2(class: "text-lg font-semibold text-gray-900 dark:text-white") { context.name.to_s.humanize }
+              h2(class: "text-lg font-semibold text-[var(--pu-text)]") { context.name.to_s.humanize }
               render_nested_fields_header_description(context.options[:description]) if context.options[:description]
             end
           end
 
           def render_nested_fields_header_description(description)
-            p(class: "text-md font-normal text-gray-500 dark:text-gray-400") { description }
+            p(class: "text-md font-normal text-[var(--pu-text-muted)]") { description }
           end
 
           def render_nested_field_content(context)
@@ -193,7 +193,7 @@ module Plutonium
           def render_nested_fields_fieldset(nested, context)
             fieldset(
               data_new_record: !nested.object&.persisted?,
-              class: "nested-resource-form-fields border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-4 relative"
+              class: "nested-resource-form-fields border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] p-4 space-y-4 relative"
             ) do
               render_nested_fields_fieldset_content(nested, context)
               render_nested_fields_delete_button(nested, context.options)
@@ -238,7 +238,7 @@ module Plutonium
           def render_nested_fields_delete_checkbox
             input(
               type: :checkbox,
-              class: "w-4 h-4 ms-2 text-red-600 bg-red-100 border-red-300 rounded focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer",
+              class: "w-4 h-4 ms-2 text-danger-600 bg-danger-100 border-danger-300 rounded focus:ring-danger-500 dark:focus:ring-danger-600 focus:ring-2 dark:bg-[var(--pu-surface-alt)] dark:border-[var(--pu-border)] cursor-pointer",
               data_action: "nested-resource-form-fields#remove"
             )
           end

data/lib/plutonium/ui/form/interaction.rb

@@ -38,7 +38,7 @@ module Plutonium
             :commit_interactive_record_action
           when :interactive_resource_action
             :commit_interactive_resource_action
-          when :interactive_collection_action
+          when :interactive_bulk_action
             :commit_interactive_bulk_action
           else
             action_name
@@ -47,9 +47,25 @@ module Plutonium
 
         def initialize_attributes
           super
+          attributes[:id] = :interaction_form
           attributes.fetch(:data_turbo) { attributes[:data_turbo] = object.turbo.to_s }
         end
 
+        def render_bulk_action_ids
+          action = helpers.current_interactive_action
+          return unless action&.bulk_action?
+
+          ids = Array(helpers.params[:ids])
+          ids.each do |id|
+            input(type: :hidden, name: "ids[]", value: id)
+          end
+        end
+
+        def form_template
+          render_bulk_action_ids
+          super
+        end
+
         def submit_button(*, **)
           super do
             object.label

data/lib/plutonium/ui/form/query.rb

@@ -11,7 +11,6 @@ module Plutonium
           options[:method] = :get
           attributes = mix(attributes.deep_merge(
             id: :search_form,
-            class!: "space-y-2 mb-4",
             controller: "form",
             data: {controller: "form", turbo_frame: nil}
           ))
@@ -21,6 +20,10 @@ module Plutonium
           @page_size = page_size
         end
 
+        def form_class
+          "mb-4"
+        end
+
         def form_template
           render_fields
         end
@@ -28,9 +31,23 @@ module Plutonium
         private
 
         def render_fields
-          render_search_fields
-          render_filter_fields
-          div hidden: true do # workaround the fact that input array does not accept other attributes for now
+          has_search = query_object.search_filter.present?
+          has_filters = query_object.filter_definitions.present?
+
+          if has_search || has_filters
+            div(class: "flex items-center gap-3") do
+              # Search takes remaining space
+              if has_search
+                render_search_field
+              else
+                div(class: "flex-1") # Spacer when no search
+              end
+              render_filter_button if has_filters
+            end
+          end
+
+          # Hidden fields for sorting, scope, etc.
+          div(hidden: true) do
             input(name: "limit", value: @page_size, type: :hidden, hidden: true) if @page_size
             render_sort_fields
             render_scope_fields
@@ -38,13 +55,11 @@ module Plutonium
         end
 
         def render_sort_fields
-          # q[sort_fields][]=name&q[sort_fields][]=created_at
           field :sort_fields do |name|
             render name.input_array_tag do |array|
               render array.input_tag(type: :hidden, hidden: true)
             end
           end
-          # q[sort_directions][created_at]=ASC&q[sort_directions][name]=ASC&
           nest_one :sort_directions do |nested|
             query_object.sort_definitions.each do |filter_name, definition|
               nested.field(filter_name) do |f|
@@ -55,118 +70,156 @@ module Plutonium
         end
 
         def render_scope_fields
-          # q[scope]=&
           return if query_object.scope_definitions.blank?
 
           render field(:scope).input_tag(type: :hidden, hidden: true)
         end
 
-        def render_search_fields
-          # q[search]=&
-          return unless query_object.search_filter
-
+        def render_search_field
           search_query = query_object.search_query
-          div(class: "relative") do
+          div(class: "relative flex-1 min-w-0") do
             div(class: "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none") do
-              svg(
-                class: "w-5 h-5 text-gray-500 dark:text-gray-400",
-                aria_hidden: "true",
-                fill: "currentColor",
-                viewbox: "0 0 20 20",
-                xmlns: "http://www.w3.org/2000/svg"
-              ) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d:
-                    "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
-                  clip_rule: "evenodd"
-                )
-              end
+              render Phlex::TablerIcons::Search.new(class: "w-5 h-5 text-[var(--pu-text-muted)]")
             end
             render field(:search, value: search_query)
               .placeholder("Search...")
               .input_tag(
                 value: search_query,
-                class: "block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500",
-                data: {
-                  action: "form#submit",
-                  turbo_permanent: true
-                }
+                class: "pu-input pu-input-icon-left w-full",
+                data: {action: "form#submit", turbo_permanent: true}
               )
           end
         end
 
-        def render_filter_fields
-          return if query_object.filter_definitions.blank?
-
-          div(class: "flex flex-wrap items-center gap-4") do
-            span(class: "text-sm font-medium text-gray-900 dark:text-white") { "Filters:" }
-            div(class: "flex flex-wrap items-center gap-4 mr-auto") do
-              div class: "flex flex-wrap items-center gap-4" do
-                query_object.filter_definitions.each do |filter_name, definition|
-                  nest_one filter_name do |nested|
-                    definition.defined_inputs.each do |input_name, _|
-                      render_defined_field nested, definition, input_name
-                    end
-                  end
+        def render_filter_button
+          active_count = count_active_filters
+
+          div(
+            class: "relative",
+            data: {controller: "resource-drop-down", resource_drop_down_placement_value: "left-start"}
+          ) do
+            # Filter button (trigger)
+            button(
+              type: "button",
+              class: "pu-btn pu-btn-secondary px-4 py-3 text-base",
+              data: {resource_drop_down_target: "trigger"}
+            ) do
+              render Phlex::TablerIcons::Filter.new(class: "w-4 h-4 inline-block align-text-bottom")
+              plain " Filters"
+              if active_count > 0
+                plain " "
+                span(class: "inline-flex items-center justify-center w-5 h-5 text-xs font-semibold rounded-full text-gray-800 bg-white") do
+                  plain active_count.to_s
                 end
               end
             end
-            div(class: "flex flex-wrap items-center gap-2") do
-              actions_wrapper do
-                render field(:submit).submit_button_tag(
-                  name: nil,
-                  class!: "inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-                ) do
-                  render Phlex::TablerIcons::Filter.new(class: "w-4 h-4 mr-2")
-                  plain "Apply Filters"
-                end
 
-                render field(:reset).submit_button_tag(
-                  name: nil,
-                  type: :reset,
-                  class!: "inline-flex items-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-4 py-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
-                ) do
-                  render Phlex::TablerIcons::X.new(class: "w-4 h-4 mr-2")
-                  plain "Clear Filters"
-                end
-              end
+            # Filter panel (dropdown menu)
+            # Mobile: fullscreen (override Popper with !important)
+            # Desktop: Popper positions the dropdown
+            div(
+              class: "hidden z-[100] bg-[var(--pu-surface)] shadow-lg flex flex-col " \
+                     "max-md:!fixed max-md:!inset-0 max-md:!transform-none " \
+                     "md:w-80 md:max-h-[70vh] md:border md:border-[var(--pu-border)] md:rounded-[var(--pu-radius-lg)]",
+              data: {resource_drop_down_target: "menu", controller: "filter-panel"},
+              aria_hidden: "true"
+            ) do
+              render_filter_panel
             end
           end
         end
 
-        def form_action
-          # query forms post to the same page
-          nil
-        end
+        def render_filter_panel
+          # Sticky header
+          div(class: "sticky top-0 z-10 flex items-center justify-between p-4 bg-[var(--pu-surface)] border-b border-[var(--pu-border)]") do
+            div(class: "flex items-center gap-3") do
+              # Close button (mobile only)
+              button(
+                type: "button",
+                class: "md:hidden p-1 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)]",
+                data: {action: "resource-drop-down#hide"}
+              ) do
+                render Phlex::TablerIcons::X.new(class: "w-5 h-5")
+              end
+              span(class: "text-sm font-semibold text-[var(--pu-text)]") { "Filters" }
+            end
+            button(
+              type: "button",
+              class: "text-sm text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors",
+              data: {action: "filter-panel#clear"}
+            ) { "Clear all" }
+          end
 
-        def render_defined_field(nested, resource_definition, name)
-          # field :name, as: :string
-          # input :name, as: :string
-          # input :description, wrapper: {class: "col-span-full"}
-          # input :age, class: "max-h-fit"
-          # input :dob do |f|
-          #   f.date_tag
-          # end
+          # Scrollable filter fields
+          div(class: "p-4 overflow-y-auto flex-1 space-y-4") do
+            query_object.filter_definitions.each do |filter_name, definition|
+              nest_one filter_name do |nested|
+                inputs = definition.defined_inputs
+                has_multiple_inputs = inputs.size > 1
+                inputs.each do |input_name, _|
+                  # For multi-input filters (like date range), include the input name in the label
+                  label = if has_multiple_inputs
+                    "#{filter_name.to_s.humanize} (#{input_name.to_s.humanize.downcase})"
+                  else
+                    filter_name.to_s.humanize
+                  end
+                  render_filter_field nested, definition, input_name, filter_label: label
+                end
+              end
+            end
+          end
 
-          field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options] : {}
+          # Sticky footer
+          div(class: "sticky bottom-0 z-10 p-4 bg-[var(--pu-surface)] border-t border-[var(--pu-border)]") do
+            render field(:submit).submit_button_tag(
+              name: nil,
+              class!: "pu-btn pu-btn-md pu-btn-primary w-full"
+            ) { "Apply Filters" }
+          end
+        end
 
-          input_definition = definition.defined_inputs[name] || {}
+        def render_filter_field(nested, resource_definition, name, filter_label: nil)
+          input_definition = resource_definition.defined_inputs[name] || {}
           input_options = input_definition[:options] || {}
+          field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
 
           tag = input_options[:as] || field_options[:as]
           tag_attributes = input_options.except(:wrapper, :as)
+
           tag_block = input_definition[:block] || ->(f) {
             tag ||= f.inferred_field_component
-            f.send(:"#{tag}_tag", **tag_attributes, class: tokens(tag_attributes[:class], "flex-1"))
+            f.send(:"#{tag}_tag", **tag_attributes, class: "w-full")
           }
 
           field_options = field_options.except(:as)
-          nested.field(name, **field_options) do |f|
-            f.placeholder(f.label) unless f.placeholder
-            render instance_exec(f, &tag_block)
+
+          # Render with label
+          div(class: "space-y-1.5") do
+            label(class: "text-sm font-medium text-[var(--pu-text)]") { filter_label }
+            nested.field(name, **field_options) do |f|
+              # Set placeholder for blank option text in selects
+              f.placeholder(input_options[:include_blank] || "All") if input_options[:include_blank]
+              render instance_exec(f, &tag_block)
+            end
           end
         end
+
+        def count_active_filters
+          count = 0
+          query_object.filter_definitions.each do |filter_name, _|
+            filter_params = helpers.params.dig(:q, filter_name)
+            next unless filter_params.is_a?(Hash) || filter_params.is_a?(ActionController::Parameters)
+
+            filter_params.each_value do |v|
+              count += 1 if v.present?
+            end
+          end
+          count
+        end
+
+        def form_action
+          nil
+        end
       end
     end
   end