plutonium 0.66.0 → 0.68.0

data/lib/plutonium/ui/dashboard/metric.rb

@@ -9,7 +9,7 @@ module Plutonium
       #
       #   {value: 1_240}                                   # just the number
       #   {value: 1_240, previous: 1_100}                  # change computed: +12.7%
-      #   {value: 1_240, change: 12.7}                     # change in percentage points
+      #   {value: 1_240, change: 12.7}                     # +12.7% (+12.7 pts with change_unit: :points)
       #   {value: 1_240, change: "+140", trend: :up}       # change shown verbatim
       #   {value: 98.2, change_label: "vs. last week"}     # caption after the change
       #
@@ -36,13 +36,22 @@ module Plutonium
           data[:change_label] ||= card.options[:change_label]
 
           if !data.key?(:change) && data[:previous].is_a?(Numeric) && data[:value].is_a?(Numeric)
-            data[:change] = percent_change(data[:value], data[:previous])
+            data[:change] = points? ? data[:value] - data[:previous] : percent_change(data[:value], data[:previous])
           end
 
+          # Round to the precision the change is shown at, so float noise
+          # (0.3 against 0.1 + 0.2) reads as no change rather than "-0" heading
+          # down. `+ 0.0` turns a rounded -0.0 into 0.0.
+          data[:change] = data[:change].round(1) + 0.0 if data[:change].is_a?(Numeric)
+
+          # A `previous` of zero leaves a percent `change` nil but still sets
+          # the trend key, so a captioned row shows a neutral dash.
           data[:trend] ||= infer_trend(data[:change]) if data.key?(:change)
           data
         end
 
+        def points? = card.options[:change_unit] == :points
+
         def percent_change(value, previous)
           return nil if previous.zero?
 
@@ -65,9 +74,12 @@ module Plutonium
         end
 
         def render_change(data)
+          # A caption with no change or trend (a count of ratings, say) is
+          # not a trend: no icon, neutral tone.
+          trending = data.key?(:trend)
           trend = data[:trend] || :flat
-          div(class: tokens("pu-metric-change", change_tone_class(trend))) do
-            render_trend_icon(trend)
+          div(class: tokens("pu-metric-change", change_tone_class(trending ? trend : :flat))) do
+            render_trend_icon(trend) if trending
             span(class: "font-medium") { format_change(data[:change]) } if data[:change]
             span(class: "pu-metric-change-label") { data[:change_label] } if data[:change_label].present?
           end
@@ -93,7 +105,8 @@ module Plutonium
           case change
           when Numeric
             sign = change.positive? ? "+" : ""
-            "#{sign}#{number_to_rounded(change, precision: 1, strip_insignificant_zeros: true)}%"
+            rounded = number_to_rounded(change, precision: 1, strip_insignificant_zeros: true)
+            points? ? t("plutonium.dashboard.metric.points", change: "#{sign}#{rounded}") : "#{sign}#{rounded}%"
           else change.to_s
           end
         end

data/lib/plutonium/ui/dashboard/toolbar.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Dashboard
+      # The row above the card grid: each filter as a segmented control of
+      # links, so the choice is a plain URL that survives a reload and can be
+      # shared, and the dashboard's links on the right.
+      class Toolbar < Plutonium::UI::Component::Base
+        def initialize(dashboard:)
+          @dashboard = dashboard
+        end
+
+        def render?
+          dashboard.class.filters.any? || links.any?
+        end
+
+        def view_template
+          div(class: "pu-dashboard-toolbar mb-4 flex flex-wrap items-center justify-between gap-3") do
+            div(class: "flex flex-wrap items-center gap-3") do
+              dashboard.class.filters.each { |filter| render_filter(filter) }
+            end
+            div(class: "flex flex-wrap items-center gap-2") do
+              links.each { |link, href| render_link(link, href) }
+            end
+          end
+        end
+
+        private
+
+        attr_reader :dashboard
+
+        # Visible links paired with their href. A link whose `href:` resolves
+        # to nil (a proc that returns nothing for this user) is left out
+        # rather than rendered as a dead button.
+        def links
+          @links ||= dashboard.visible_links.filter_map do |link|
+            href = link.href_for(dashboard)
+            [link, href] if href.present?
+          end
+        end
+
+        def render_filter(filter)
+          current = dashboard.filter_value(filter.key)
+          nav(class: "pu-dashboard-filter inline-flex rounded-[var(--pu-radius-md)] border border-[var(--pu-border)] p-0.5",
+            aria: {label: filter.label}, data: {dashboard_filter: filter.key}) do
+            dashboard.filter_choices(filter).each do |value, label|
+              selected = value == current
+              a(
+                href: filter_url(filter, value),
+                class: tokens(
+                  "rounded-[var(--pu-radius-sm)] px-3 py-1 text-sm transition-colors",
+                  selected ? "bg-[var(--pu-surface-alt)] font-medium text-[var(--pu-text)]" : "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)]"
+                ),
+                aria: {current: selected ? "true" : nil}
+              ) { Plutonium::Translation.resolve(label) }
+            end
+          end
+        end
+
+        def render_link(link, href)
+          a(href:, class: "pu-btn pu-btn-sm pu-btn-outline", data: {dashboard_link: link.key}) do
+            render link.icon.new(class: "size-4") if link.icon
+            span { link.label }
+          end
+        end
+
+        # The page with this filter set and the rest of the query string kept.
+        def filter_url(filter, value)
+          query = dashboard.request.query_parameters.merge(filter.key.to_s => value)
+          "#{dashboard.request.path}?#{query.to_query}"
+        end
+      end
+    end
+  end
+end

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

@@ -17,7 +17,10 @@ module Plutonium
           def markdown_tag(**, &)
             create_component(Plutonium::UI::Display::Components::Markdown, :markdown, **, &)
           end
-          alias_method :rich_text_tag, :markdown_tag
+
+          def rich_text_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::RichText, :rich_text, **, &)
+          end
 
           def attachment_tag(**, &)
             create_component(Plutonium::UI::Display::Components::Attachment, :attachment, **, &)
@@ -51,12 +54,57 @@ module Plutonium
             create_component(Plutonium::UI::Display::Components::Currency, :currency, **, &)
           end
 
+          def number_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Number, :number, **, &)
+          end
+
+          def key_value_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::KeyValue, :key_value, **, &)
+          end
+          alias_method :hstore_tag, :key_value_tag
+
+          def list_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::List, :list, **, &)
+          end
+
+          def tags_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Tags, :list, **, &)
+          end
+
+          def relative_time_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::RelativeTime, :relative_time, **, &)
+          end
+
+          def code_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Code, :code, **, &)
+          end
+
+          def duration_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Duration, :duration, **, &)
+          end
+
+          def file_size_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::FileSize, :file_size, **, &)
+          end
+
+          def progress_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Progress, :progress, **, &)
+          end
+
+          def rating_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Rating, :rating, **, &)
+          end
+
+          def binary_tag(**, &)
+            create_component(Plutonium::UI::Display::Components::Binary, :binary, **, &)
+          end
+
           # Type aliases for common column types
           alias_method :float_tag, :number_tag
           alias_method :decimal_tag, :number_tag
           alias_method :jsonb_tag, :json_tag
-          alias_method :key_value_tag, :hstore_tag
           alias_method :phlexi_tag, :phlexi_render_tag
+          alias_method :secret_tag, :password_tag
         end
 
         private

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

@@ -61,7 +61,7 @@ module Plutonium
 
           def render_value(value)
             variant = self.class.variant_for(value, colors: @colors)
-            span(**attributes, class: tokens("pu-badge", "pu-badge-#{variant}")) do
+            span(**mix(attributes, {class: tokens("pu-badge", "pu-badge-#{variant}")})) do
               plain value_label(value)
             end
           end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A `binary` column's size, never its bytes.
+        class Binary < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            span(**attributes) do
+              Plutonium::Translation.t("plutonium.ui.display.binary", size: ActiveSupport::NumberHelper.number_to_human_size(value.bytesize))
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -19,7 +19,7 @@ module Plutonium
           private
 
           def pill(label:, variant:, icon:)
-            span(**attributes, class: tokens("pu-badge", variant), "aria-label": label) do
+            span(**mix(attributes, {class: tokens("pu-badge", variant)}), "aria-label": label) do
               render icon.new(class: "w-3.5 h-3.5")
               plain label
             end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        # A value in monospace with a copy button: IDs, keys, references.
+        class Code < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+
+          def render_value(value)
+            div(**attributes, data: {controller: "clipboard"}) do
+              code(class: themed(:code_value), data: {clipboard_target: "source"}) { value }
+              button(type: :button, class: themed(:code_copy), data: {action: "clipboard#copy"}) do
+                Plutonium::Translation.t("plutonium.ui.display.code.copy")
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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