plutonium 0.66.0 → 0.67.0

data/src/css/flatpickr.css

@@ -795,3 +795,94 @@ span.flatpickr-weekday {
 [data-controller="remote-modal"] > .flatpickr-calendar {
   left: auto !important;
 }
+
+/* Dark mode: map flatpickr's hardcoded light palette onto the design tokens. */
+.dark .flatpickr-calendar {
+  background: var(--pu-surface);
+  box-shadow: 0 0 0 1px var(--pu-border), 0 3px 13px rgba(0, 0, 0, 0.4);
+}
+.dark .flatpickr-calendar.arrowTop:after {
+  border-bottom-color: var(--pu-surface);
+}
+.dark .flatpickr-calendar.arrowBottom:after {
+  border-top-color: var(--pu-surface);
+}
+.dark .flatpickr-calendar.arrowTop:before {
+  border-bottom-color: var(--pu-border);
+}
+.dark .flatpickr-calendar.arrowBottom:before {
+  border-top-color: var(--pu-border);
+}
+.dark .flatpickr-calendar.hasTime .flatpickr-time {
+  border-top-color: var(--pu-border);
+}
+.dark .flatpickr-months .flatpickr-month,
+.dark .flatpickr-months .flatpickr-prev-month,
+.dark .flatpickr-months .flatpickr-next-month,
+.dark .flatpickr-current-month input.cur-year,
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
+  color: var(--pu-text);
+  fill: var(--pu-text);
+}
+.dark .flatpickr-months .flatpickr-prev-month:hover svg,
+.dark .flatpickr-months .flatpickr-next-month:hover svg {
+  fill: var(--pu-text-muted);
+}
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background: var(--pu-surface);
+}
+.dark .flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: var(--pu-text);
+}
+.dark .flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: var(--pu-text);
+}
+.dark span.flatpickr-weekday {
+  color: var(--pu-text-muted);
+}
+.dark .flatpickr-day {
+  color: var(--pu-text);
+}
+.dark .flatpickr-day:hover,
+.dark .flatpickr-day:focus,
+.dark .flatpickr-day.prevMonthDay:hover,
+.dark .flatpickr-day.nextMonthDay:hover,
+.dark .flatpickr-day.inRange {
+  background: var(--pu-surface-alt);
+  border-color: var(--pu-surface-alt);
+}
+.dark .flatpickr-day.inRange {
+  box-shadow: -5px 0 0 var(--pu-surface-alt), 5px 0 0 var(--pu-surface-alt);
+}
+.dark .flatpickr-day.today {
+  border-color: var(--pu-text-muted);
+}
+.dark .flatpickr-day.prevMonthDay,
+.dark .flatpickr-day.nextMonthDay,
+.dark .flatpickr-day.flatpickr-disabled,
+.dark .flatpickr-day.flatpickr-disabled:hover {
+  color: var(--pu-text-muted);
+  opacity: 0.5;
+}
+.dark .flatpickr-weekwrapper .flatpickr-weeks,
+.dark .dayContainer + .dayContainer {
+  box-shadow: none;
+}
+.dark .flatpickr-time input,
+.dark .flatpickr-time .flatpickr-am-pm,
+.dark .flatpickr-time .flatpickr-time-separator {
+  color: var(--pu-text);
+}
+.dark .flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: var(--pu-text);
+}
+.dark .flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: var(--pu-text);
+}
+.dark .flatpickr-time input:hover,
+.dark .flatpickr-time .flatpickr-am-pm:hover,
+.dark .flatpickr-time input:focus,
+.dark .flatpickr-time .flatpickr-am-pm:focus {
+  background: var(--pu-surface-alt);
+}

data/src/js/controllers/easymde_controller.js

@@ -66,6 +66,7 @@ export default class extends Controller {
   #buildOptions() {
     let options = {
       element: this.element,
+      autoDownloadFontAwesome: false,
       promptURLs: true,
       spellChecker: false,
       // Override the default preview renderer

data/src/js/controllers/register_controllers.js

@@ -43,6 +43,7 @@ import BreadcrumbsController from "./breadcrumbs_controller.js"
 import RunProgressController from "./run_progress_controller.js"
 import ChartController from "./chart_controller.js"
 import FrameRefreshController from "./frame_refresh_controller.js"
+import TimeagoController from "./timeago_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -90,4 +91,5 @@ export default function (application) {
   application.register("run-progress", RunProgressController)
   application.register("chart", ChartController)
   application.register("frame-refresh", FrameRefreshController)
+  application.register("timeago", TimeagoController)
 }

data/src/js/controllers/slim_select_controller.js

@@ -9,10 +9,15 @@ import { t } from "../i18n.js";
 //                     When present, SlimSelect's built-in client-side
 //                     filter is replaced by a debounced fetch through
 //                     this URL.
+//   addable         — typed text can be added as a new option (chip
+//                     inputs, see Form::Components::List).
+//   max-selected    — caps how many options a multi-select keeps.
 export default class extends Controller {
   static values = {
     typeaheadUrl: String,
-    typeaheadDebounceMs: { type: Number, default: 200 }
+    typeaheadDebounceMs: { type: Number, default: 200 },
+    addable: Boolean,
+    maxSelected: Number
   }
 
   connect() {
@@ -39,11 +44,19 @@ export default class extends Controller {
     // define placeholderText, searchText, searchPlaceholder and searchingText.
     const strings = t("plutonium.js.libraries.slim_select");
     if (strings && typeof strings === "object") {
-      const { placeholderText, searchText, searchPlaceholder, searchingText } = strings;
-      Object.assign(settings, { placeholderText, searchText, searchPlaceholder, searchingText });
+      const { placeholderText, searchText, searchPlaceholder, searchingText, addableText } = strings;
+      Object.assign(settings, { placeholderText, searchText, searchPlaceholder, searchingText, addableText });
       Object.keys(settings).forEach((k) => settings[k] === undefined && delete settings[k]);
     }
 
+    if (this.hasMaxSelectedValue) settings.maxSelected = this.maxSelectedValue;
+
+    if (this.addableValue) {
+      // A plain "Select Value" / "Search" hides that new values can be typed in.
+      settings.placeholderText = t("plutonium.js.slim_select.add_placeholder");
+      settings.searchPlaceholder = t("plutonium.js.slim_select.add_search_placeholder");
+    }
+
     this.modal = this.element.closest('[data-controller="remote-modal"]');
 
     if (this.modal) {
@@ -67,6 +80,20 @@ export default class extends Controller {
 
     const events = {};
 
+    if (this.modal) {
+      // A modal <dialog> gets `overflow: auto` from the UA stylesheet, so a
+      // dropdown that runs past the dialog's edge (a select near the bottom
+      // of a short modal) is clipped. The dialog never scrolls itself (its
+      // body owns the scroll regions), so let it overflow while open.
+      events.afterOpen = () => { this.modal.style.overflow = "visible"; };
+      events.afterClose = () => { this.modal.style.overflow = ""; };
+    }
+
+    if (this.addableValue) {
+      // Returning false rejects blank input instead of adding an empty chip.
+      events.addable = (value) => value.trim() || false;
+    }
+
     if (this.hasTypeaheadUrlValue && this.typeaheadUrlValue) {
       // Replace SlimSelect's client-side filter with a server fetch.
       // Returns the SlimSelect data array shape: {value, text}.
@@ -193,6 +220,8 @@ export default class extends Controller {
       this.boundModalReposition = null;
     }
 
+    if (this.modal) this.modal.style.overflow = "";
+
     if (this.slimSelect) {
       this.slimSelect.destroy();
       this.slimSelect = null;

data/src/js/controllers/timeago_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Renders a <time> as relative text ("3 days ago", "in 5 minutes") in the
+// page's locale and keeps it current. The server-rendered absolute date stays
+// in the element's title, so hovering still shows the exact time.
+const UNITS = [
+  ["year", 60 * 60 * 24 * 365],
+  ["month", 60 * 60 * 24 * 30],
+  ["week", 60 * 60 * 24 * 7],
+  ["day", 60 * 60 * 24],
+  ["hour", 60 * 60],
+  ["minute", 60],
+  ["second", 1],
+]
+
+export default class extends Controller {
+  static values = {
+    datetime: String,
+    refreshInterval: { type: Number, default: 60000 },
+  }
+
+  connect() {
+    this.formatter = new Intl.RelativeTimeFormat(document.documentElement.lang || undefined, { numeric: "auto" })
+    this.render()
+    this.timer = setInterval(() => this.render(), this.refreshIntervalValue)
+  }
+
+  disconnect() {
+    clearInterval(this.timer)
+  }
+
+  render() {
+    const date = new Date(this.datetimeValue)
+    if (isNaN(date)) return
+
+    const seconds = Math.round((date - Date.now()) / 1000)
+    const [unit, size] = UNITS.find(([, size]) => Math.abs(seconds) >= size) || UNITS[UNITS.length - 1]
+    this.element.textContent = this.formatter.format(Math.round(seconds / size), unit)
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.66.0
+  version: 0.67.0
 platform: ruby
 authors:
 - Stefan Froelich
 bindir: exe
 cert_chain: []
-date: 2026-10-08 00:00:00.000000000 Z
+date: 2026-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -1234,6 +1234,7 @@ files:
 - lib/plutonium/query/filters/date.rb
 - lib/plutonium/query/filters/date_range.rb
 - lib/plutonium/query/filters/select.rb
+- lib/plutonium/query/filters/tags.rb
 - lib/plutonium/query/filters/text.rb
 - lib/plutonium/query/model_scope.rb
 - lib/plutonium/railtie.rb
@@ -1311,13 +1312,25 @@ files:
 - lib/plutonium/ui/display/components/association.rb
 - lib/plutonium/ui/display/components/attachment.rb
 - lib/plutonium/ui/display/components/badge.rb
+- lib/plutonium/ui/display/components/binary.rb
 - lib/plutonium/ui/display/components/boolean.rb
+- lib/plutonium/ui/display/components/code.rb
 - lib/plutonium/ui/display/components/color.rb
 - lib/plutonium/ui/display/components/currency.rb
+- lib/plutonium/ui/display/components/duration.rb
+- lib/plutonium/ui/display/components/file_size.rb
 - lib/plutonium/ui/display/components/formatted_value.rb
+- lib/plutonium/ui/display/components/key_value.rb
+- lib/plutonium/ui/display/components/list.rb
 - lib/plutonium/ui/display/components/markdown.rb
+- lib/plutonium/ui/display/components/number.rb
 - lib/plutonium/ui/display/components/phlexi_render.rb
+- lib/plutonium/ui/display/components/progress.rb
+- lib/plutonium/ui/display/components/rating.rb
+- lib/plutonium/ui/display/components/relative_time.rb
+- lib/plutonium/ui/display/components/rich_text.rb
 - lib/plutonium/ui/display/components/section.rb
+- lib/plutonium/ui/display/components/tags.rb
 - lib/plutonium/ui/display/options/inferred_types.rb
 - lib/plutonium/ui/display/resource.rb
 - lib/plutonium/ui/display/theme.rb
@@ -1326,6 +1339,7 @@ files:
 - lib/plutonium/ui/empty_card.rb
 - lib/plutonium/ui/export_button.rb
 - lib/plutonium/ui/form/base.rb
+- lib/plutonium/ui/form/components/binary.rb
 - lib/plutonium/ui/form/components/currency.rb
 - lib/plutonium/ui/form/components/easymde.rb
 - lib/plutonium/ui/form/components/flatpickr.rb
@@ -1333,12 +1347,17 @@ files:
 - lib/plutonium/ui/form/components/intl_tel_input.rb
 - lib/plutonium/ui/form/components/json.rb
 - lib/plutonium/ui/form/components/key_value_store.rb
+- lib/plutonium/ui/form/components/list.rb
 - lib/plutonium/ui/form/components/password.rb
+- lib/plutonium/ui/form/components/rating.rb
 - lib/plutonium/ui/form/components/resource_select.rb
+- lib/plutonium/ui/form/components/rich_text.rb
 - lib/plutonium/ui/form/components/section.rb
 - lib/plutonium/ui/form/components/secure_association.rb
 - lib/plutonium/ui/form/components/secure_polymorphic_association.rb
 - lib/plutonium/ui/form/components/sticky_footer.rb
+- lib/plutonium/ui/form/components/tags.rb
+- lib/plutonium/ui/form/components/tags_filter.rb
 - lib/plutonium/ui/form/components/toggle.rb
 - lib/plutonium/ui/form/components/uppy.rb
 - lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb
@@ -1376,6 +1395,9 @@ files:
 - lib/plutonium/ui/nav_grid_menu.rb
 - lib/plutonium/ui/nav_user.rb
 - lib/plutonium/ui/options/has_cents_field.rb
+- lib/plutonium/ui/options/rich_text_field.rb
+- lib/plutonium/ui/options/secret_field.rb
+- lib/plutonium/ui/options/tags_field.rb
 - lib/plutonium/ui/page/base.rb
 - lib/plutonium/ui/page/dashboard.rb
 - lib/plutonium/ui/page/edit.rb
@@ -1511,6 +1533,7 @@ files:
 - src/js/controllers/table_column_menu_controller.js
 - src/js/controllers/table_header_controller.js
 - src/js/controllers/textarea_autogrow_controller.js
+- src/js/controllers/timeago_controller.js
 - src/js/controllers/view_switcher_controller.js
 - src/js/controllers/wizard_controller.js
 - src/js/core.js