plutonium 0.66.0 → 0.67.0

data/lib/plutonium/ui/display/components/color.rb

@@ -7,15 +7,23 @@ module Plutonium
         class Color < Phlexi::Display::Components::Base
           include Phlexi::Display::Components::Concerns::DisplaysValue
 
+          # Hex, a named color, or a plain rgb()/hsl() call. The value is
+          # interpolated into `style:`, so anything else (a `;` or `url(`)
+          # would let a stored string inject arbitrary CSS.
+          CSS_COLOR = /\A(?:#\h{3,8}|[a-z]+|(?:rgb|hsl)a?\([\d\s.,%\/]+\))\z/i
+
           def render_value(value)
-            div(**attributes, class: "flex items-center gap-2") do
-              div(
-                class: "w-6 h-6 rounded border border-[var(--pu-border)]",
-                style: "background-color: #{value};"
-              )
-              span(class: "text-sm text-[var(--pu-text-muted)]") { value }
+            div(**attributes) do
+              div(class: themed(:color_indicator), style: swatch_style(value))
+              span(class: themed(:color_label)) { value }
             end
           end
+
+          private
+
+          def swatch_style(value)
+            "background-color: #{value};" if CSS_COLOR.match?(value)
+          end
         end
       end
     end

data/lib/plutonium/ui/display/components/duration.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A number of seconds (or an ActiveSupport::Duration) as "2h 15m".
+        class Duration < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          UNITS = {days: 86_400, hours: 3600, minutes: 60, seconds: 1}.freeze
+
+          def render_value(value)
+            span(**attributes) { value }
+          end
+
+          private
+
+          def normalize_value(value)
+            remaining = value.to_i
+            parts = UNITS.filter_map do |unit, size|
+              count, remaining = remaining.divmod(size)
+              Plutonium::Translation.t("plutonium.ui.display.duration.#{unit}", count:) if count.positive?
+            end
+            parts.empty? ? Plutonium::Translation.t("plutonium.ui.display.duration.seconds", count: 0) : parts.join(" ")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/file_size.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A byte count as "12 KB".
+        class FileSize < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            span(**attributes) { value }
+          end
+
+          private
+
+          def normalize_value(value) = ActiveSupport::NumberHelper.number_to_human_size(value)
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/key_value.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A Hash as a two-column list of keys and values: hstore columns, or
+        # any hash-valued field declared `as: :key_value`. Nested hashes and
+        # arrays stay on one line as compact JSON.
+        class KeyValue < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            dl(**attributes) do
+              value.each do |key, item|
+                dt(class: themed(:key_value_key)) { key.to_s }
+                dd(class: themed(:key_value_value)) { format_item(item) }
+              end
+            end
+          end
+
+          private
+
+          def normalize_value(value) = value.to_h
+
+          def format_item(item)
+            case item
+            when nil then "—"
+            when Hash, Array then code(class: themed(:key_value_nested)) { item.to_json }
+            else item.to_s
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/list.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # An array value as a row of chips.
+        class List < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          # DisplaysValue renders a multi-valued field once per item; a list
+          # is one component for the whole array.
+          def view_template
+            items = normalize_value(field.value)
+            return render(field.placeholder_tag(**@placeholder_attributes)) if items.empty?
+
+            wrapped { render_value(items) }
+          end
+
+          def render_value(value)
+            ul(**attributes) do
+              value.each { |item| li(class: themed(:list_item)) { item.to_s } }
+            end
+          end
+
+          private
+
+          def normalize_value(value) = Array(value).compact_blank
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/number.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # phlexi's Number coerces through Float(), which drops a decimal
+        # column's scale (10.50 → "10.5") and digits past ~15 significant
+        # figures. Decimals stay BigDecimal and render at the column's scale.
+        # Explicit `options:` still go straight to number_to_delimited.
+        class Number < Phlexi::Display::Components::Number
+          private
+
+          def format_number(value)
+            return super unless value.is_a?(BigDecimal) && @options.empty?
+
+            digits = scale ? ActiveSupport::NumberHelper.number_to_rounded(value, precision: scale) : value.to_s("F")
+            ActiveSupport::NumberHelper.number_to_delimited(digits)
+          end
+
+          def normalize_value(value)
+            value.is_a?(BigDecimal) ? value : super
+          end
+
+          def scale
+            field.object.class.try(:type_for_attribute, field.key)&.scale
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/progress.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A value out of `max:` (default 100) as a bar and a percentage.
+        #
+        #   display :completion, as: :progress           # 0..100
+        #   display :ratio, as: :progress, max: 1        # 0..1
+        class Progress < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            percent = (value.to_f / @max * 100).clamp(0, 100).round
+            div(**attributes, role: :progressbar, aria_valuenow: value, aria_valuemin: 0, aria_valuemax: @max) do
+              div(class: themed(:progress_track)) do
+                div(class: themed(:progress_bar), style: "width: #{percent}%")
+              end
+              span(class: themed(:progress_label)) { "#{percent}%" }
+            end
+          end
+
+          private
+
+          def build_attributes
+            super
+            @max = attributes.delete(:max) || 100
+          end
+
+          def normalize_value(value) = value
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/rating.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A score as stars out of `max:` (default 5).
+        class Rating < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            filled = value.to_f.round.clamp(0, @max)
+            label = Plutonium::Translation.t("plutonium.ui.display.rating.label", value: filled, max: @max)
+            div(**attributes, role: :img, aria_label: label) do
+              @max.times do |index|
+                state = (index < filled) ? "filled" : "empty"
+                span(data: {rating_star: state}) do
+                  render Phlex::TablerIcons::Star.new(class: themed(:"rating_#{state}"))
+                end
+              end
+            end
+          end
+
+          private
+
+          def build_attributes
+            super
+            @max = attributes.delete(:max) || 5
+          end
+
+          def normalize_value(value) = value
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/relative_time.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A timestamp as "3 minutes ago", kept live by the timeago controller.
+        # The absolute time is the fallback text and the tooltip.
+        class RelativeTime < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            absolute = I18n.l(value, format: :long)
+            time(**attributes, datetime: value.iso8601, title: absolute,
+              data: {controller: "timeago", timeago_datetime_value: value.iso8601}) { absolute }
+          end
+
+          private
+
+          def normalize_value(value) = value
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/rich_text.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A `has_rich_text` field. Action Text renders and sanitizes the HTML
+        # (including attachments) through its content layout.
+        class RichText < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            div(**attributes) { raw(safe(value.to_s)) }
+          end
+
+          private
+
+          def normalize_value(value) = value
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/components/tags.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A no_fly_list `has_tags` context as chips. Reads the tag records
+        # through the context's association, so a table can preload it
+        # (`includes(:labels)`) to avoid a query per row.
+        class Tags < List
+          private
+
+          def normalize_value(value) = value.map(&:name)
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/options/inferred_types.rb

@@ -6,16 +6,29 @@ module Plutonium
       module Options
         module InferredTypes
           include Plutonium::UI::Options::HasCentsField
+          include Plutonium::UI::Options::SecretField
+          include Plutonium::UI::Options::TagsField
+          include Plutonium::UI::Options::RichTextField
 
           private
 
           def infer_field_component
+            return :tags if tags_field?
+            return :rich_text if rich_text_field?
+
+            # Mask the same secret-bearing names the form does, so the show
+            # page and table never print what the form refuses to echo.
+            return :password if secret_field_name?
+
             # has_cents decimal accessors infer as :float/:decimal; render money.
             return :currency if has_cents_field?
 
             case inferred_field_type
             when :attachment
               :attachment
+            when :binary
+              # phlexi-display falls back to :string, printing the raw bytes.
+              :binary
             when :boolean
               # phlexi-display falls back to :string, rendering "true"/"false".
               :boolean

data/lib/plutonium/ui/display/theme.rb

@@ -41,8 +41,9 @@ module Plutonium
             link: "text-lg text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 whitespace-pre-line transition-colors",
 
             # Color display
-            color: "flex items-center text-lg text-[var(--pu-text)] whitespace-pre-line",
-            color_indicator: "w-10 h-10 rounded-lg mr-3 shadow-sm border border-[var(--pu-border)]",
+            color: "flex items-center gap-2",
+            color_indicator: "w-6 h-6 rounded border border-[var(--pu-border)]",
+            color_label: "text-sm text-[var(--pu-text-muted)]",
 
             # Boolean / badge pills — variant class is applied by the component.
             boolean: "",
@@ -57,6 +58,27 @@ module Plutonium
             json: "text-sm text-[var(--pu-text)] whitespace-pre font-mono bg-[var(--pu-surface-alt)] border border-[var(--pu-border-muted)] rounded-[var(--pu-radius-md)] p-4 overflow-x-auto",
             prefixed_icon: "w-6 h-6 mr-2 text-[var(--pu-text-muted)]",
             markdown: "format dark:format-invert format-primary max-w-none",
+            rich_text: "format dark:format-invert format-primary max-w-none",
+            key_value: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-[var(--pu-text)]",
+            key_value_key: "font-medium text-[var(--pu-text-muted)] break-words",
+            key_value_value: "break-words",
+            key_value_nested: "font-mono text-sm",
+            list: "flex flex-wrap gap-1.5",
+            list_item: "pu-badge pu-badge-neutral",
+            relative_time: "text-lg text-[var(--pu-text)]",
+            code: "flex items-center gap-2",
+            code_value: "font-mono text-sm text-[var(--pu-text)] bg-[var(--pu-surface-alt)] border border-[var(--pu-border-muted)] rounded-[var(--pu-radius-sm)] px-2 py-0.5 break-all",
+            code_copy: "pu-btn pu-btn-xs pu-btn-ghost",
+            duration: "text-lg text-[var(--pu-text)] tabular-nums",
+            file_size: "text-lg text-[var(--pu-text)] tabular-nums",
+            progress: "flex items-center gap-3",
+            progress_track: "h-2 w-full max-w-xs rounded-full bg-[var(--pu-surface-alt)] overflow-hidden",
+            progress_bar: "h-full rounded-full bg-primary-500",
+            progress_label: "text-sm text-[var(--pu-text-muted)] tabular-nums",
+            rating: "flex items-center gap-0.5",
+            rating_filled: "w-5 h-5 text-warning-500 fill-current",
+            rating_empty: "w-5 h-5 text-[var(--pu-border)]",
+            binary: "text-sm text-[var(--pu-text-muted)]",
 
             # Attachments
             attachment_value_wrapper: "grid grid-cols-[repeat(auto-fill,minmax(0,200px))] gap-4",

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

@@ -43,6 +43,11 @@ module Plutonium
           end
           alias_method :markdown_tag, :easymde_tag
 
+          # Action Text editor (Trix, or Lexxy when installed). See {Components::RichText}.
+          def rich_text_tag(**, &)
+            create_component(Components::RichText, :rich_text, **, &)
+          end
+
           def toggle_tag(**, &)
             create_component(Plutonium::UI::Form::Components::Toggle, :toggle, **, &)
           end
@@ -54,12 +59,30 @@ module Plutonium
           def password_tag(**, &)
             create_component(Components::Password, :password, **, &)
           end
+          alias_method :secret_tag, :password_tag
 
           def slim_select_tag(**attributes, &)
             attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select")
             select_tag(**attributes, required: false, class!: "", &)
           end
 
+          # Chip input for array values. See {Components::List}.
+          def list_tag(**attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select")
+            create_component(Components::List, :select, required: false, class!: "", **attributes, &)
+          end
+
+          # Chip input for a no_fly_list `has_tags` context. See {Components::Tags}.
+          def tags_tag(**attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select")
+            create_component(Components::Tags, :select, required: false, class!: "", **attributes, &)
+          end
+
+          # Star picker. See {Components::Rating}.
+          def rating_tag(**, &)
+            create_component(Components::Rating, :rating, **, &)
+          end
+
           def flatpickr_tag(**, &)
             create_component(Components::Flatpickr, :flatpickr, **, &)
           end
@@ -86,6 +109,10 @@ module Plutonium
             alias_method :"#{name}_tag", :uppy_tag
           end
 
+          def binary_tag(**, &)
+            create_component(Components::Binary, :file, **, &)
+          end
+
           def key_value_store_tag(**, &)
             create_component(Components::KeyValueStore, :key_value_store, **, &)
           end
@@ -116,6 +143,9 @@ module Plutonium
           alias_method :belongs_to_tag, :secure_association_tag
           alias_method :has_many_tag, :secure_association_tag
           alias_method :has_one_tag, :secure_association_tag
+          # phlexi bound this to ITS has_many_tag at definition time, so it
+          # has to be re-pointed explicitly or habtm skips the policy scope.
+          alias_method :has_and_belongs_to_many_tag, :secure_association_tag
 
           def secure_polymorphic_association_tag(**attributes, &)
             attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select") # TODO: put this behind a config
@@ -134,7 +164,6 @@ module Plutonium
           alias_method :datetime_tag, :flatpickr_tag
           alias_method :date_tag, :flatpickr_tag
           alias_method :time_tag, :flatpickr_tag
-          alias_method :rich_text_tag, :markdown_tag
           alias_method :json_tag, :json_input_tag
           alias_method :jsonb_tag, :json_input_tag
           alias_method :hstore_tag, :key_value_store_tag

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # File input for a `binary` column: the uploaded file's bytes become
+        # the value. Choosing no file extracts nil, which the resource
+        # controller compacts away, so an edit that doesn't replace the file
+        # keeps the stored bytes. There is no way to clear the column here.
+        class Binary < Phlexi::Form::Components::FileInput
+          protected
+
+          def build_input_attributes
+            super
+            apply_default_hint
+          end
+
+          def normalize_input(input_value)
+            input_value.read if input_value.is_a?(ActionDispatch::Http::UploadedFile)
+          end
+
+          private
+
+          # Says what a blank submit keeps: the bytes in the database, not a
+          # rejected upload still assigned to the record on a failed re-render.
+          def apply_default_hint
+            return if field.has_hint?
+
+            stored = field.object.attribute_in_database(field.key) if field.object.persisted?
+            return if stored.blank?
+
+            size = ActiveSupport::NumberHelper.number_to_human_size(stored.bytesize)
+            field.hint(Plutonium::Translation.t("plutonium.ui.form.binary.replace_hint", size:))
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -44,21 +44,6 @@ module Plutonium
             attributes[:data][:key_value_store_limit_value] = limit
           end
 
-          def render_header
-            div(class: "key-value-store-header") do
-              if attributes[:label]
-                h3(class: "text-lg font-semibold text-[var(--pu-text)]") do
-                  plain attributes[:label]
-                end
-              end
-              if attributes[:description]
-                p(class: "text-sm text-[var(--pu-text-muted)]") do
-                  plain attributes[:description]
-                end
-              end
-            end
-          end
-
           def render_key_value_pairs
             # Hidden sentinel input ensures the field is always present in params when the
             # component is rendered. Without this, removing all pairs would submit nothing,
@@ -75,42 +60,37 @@ module Plutonium
 
           def render_key_value_pair(key, value, index)
             div(
-              class: "key-value-pair flex items-center gap-2 p-2 border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)]",
+              class: "key-value-pair flex items-center gap-2",
               data_key_value_store_target: "pair"
             ) do
-              # Key input
-              input(
-                type: :text,
-                placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.key_placeholder"),
-                value: key,
-                name: "#{field_name}[#{index}][key]",
-                id: "#{field.dom.id}_#{index}_key",
-                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"
-              )
-
-              # Value input
-              input(
-                type: :text,
-                placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.value_placeholder"),
-                value: value,
-                name: "#{field_name}[#{index}][value]",
-                id: "#{field.dom.id}_#{index}_value",
-                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
+              render_pair_input(:key, key, index)
+              render_pair_input(:value, value, index)
+
               button(
                 type: :button,
-                class: "px-2 py-1 text-danger-600 hover:text-danger-800 focus:outline-none transition-colors",
+                class: "pu-btn pu-btn-sm pu-btn-ghost text-danger-600 dark:text-danger-400",
+                aria_label: Plutonium::Translation.t("plutonium.ui.form.key_value_store.remove_pair"),
                 data_action: "key-value-store#removePair"
               ) do
-                plain "×"
+                render Phlex::TablerIcons::X.new(class: "w-4 h-4")
               end
             end
           end
 
+          # `part` is :key or :value. The template row passes "__INDEX__", which
+          # the controller swaps for the real index when it clones the row.
+          def render_pair_input(part, value, index)
+            input(
+              type: :text,
+              placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.#{part}_placeholder"),
+              value:,
+              name: "#{field_name}[#{index}][#{part}]",
+              id: "#{field.dom.id}_#{index}_#{part}",
+              class: "pu-input flex-1 min-w-0",
+              data_key_value_store_target: "#{part}Input"
+            )
+          end
+
           def render_add_button
             div(class: "key-value-store-actions mt-2") do
               button(
@@ -129,36 +109,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-[var(--pu-border)] rounded-[var(--pu-radius-sm)]",
-                data_key_value_store_target: "pair"
-              ) do
-                input(
-                  type: :text,
-                  placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.key_placeholder"),
-                  name: "#{field_name}[__INDEX__][key]",
-                  id: "#{field.dom.id}___INDEX___key",
-                  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"
-                )
-
-                input(
-                  type: :text,
-                  placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.value_placeholder"),
-                  name: "#{field_name}[__INDEX__][value]",
-                  id: "#{field.dom.id}___INDEX___value",
-                  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-danger-600 hover:text-danger-800 focus:outline-none transition-colors",
-                  data_action: "key-value-store#removePair"
-                ) do
-                  plain "×"
-                end
-              end
+              render_key_value_pair(nil, nil, "__INDEX__")
             end
           end