phlex-forms 0.3.1 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9541561e98ecd2afda34daf77d2eeebd725aac0badde75fdbf51401628d081f6
-  data.tar.gz: 5d4008e8e6e5748ae12fdbcd12a667d016ab30549da71498dbc2e286fe202d81
+  metadata.gz: c9b781532660ae609037596969274d95acbb9eac449c60475c51a91329a9fcb5
+  data.tar.gz: e242d6ecb20a6eb2238b5a2dfb1bb86bd68ad5f2b7a783bdb9b23e2d6cc1c42c
 SHA512:
-  metadata.gz: f10fd9155f6ff9841bdae9c34fb2ac89dbbdbc49df33c012af7efad526fa914d21c6379430e1ee66a1aadeff387dcc9bab353d33cb017ce8b07798dd8058dd2c
-  data.tar.gz: 7ea1bdaa7fea101bde79b7975759c79b30bc502fb50c2b18e279a5cf4032b294745055e23f2f66ed22cba33c4e43c637c6499ea3c62059f425a3b3aec141ad83
+  metadata.gz: c9bbc43663fb51f9e8f414702a4aaf7349870ca23f854ce3b9b38220dc32abe42f77820ab840a78708c473d5e30bbb9f918f6ae39025d94b5e94103e9b2ae3de
+  data.tar.gz: 9435b6699cab6da09d974077c8b2ff4f6f83d4f28b0cc44d2fd56419fea1b5bca2cb7347ef86b16a6ede417fddda62ce2d4c03c1e02d9e2ae58b315272701969

data/CHANGELOG.md

@@ -7,8 +7,62 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Upgrading to 0.4
+
+phlex-forms now depends on **daisyui `~> 2.0`** and merges every default +
+caller `class:` through `DaisyUI::ClassMerge` (a port of tailwind_merge 1.5.6
+plus daisyUI's modifier groups). `PhlexForms::ClassMerge` is gone.
+
+- **Bundle daisyui 2.** It's a hard dependency now, so a `gem "daisyui", "~> 1.x"`
+  pin in your Gemfile must move to 2.x (or be dropped).
+- **Register your custom Tailwind utilities.** The old merger only knew daisy
+  sizes/colors and `w-*`, and passed everything else through. The new one
+  classifies every utility, so an unregistered custom one can be dropped as a
+  conflict. For example, a `text-h1` you pass next to `FieldError`'s
+  `text-error` reads as a colour:
+
+  ```ruby
+  # config/initializers/daisy_ui.rb
+  DaisyUI.configure do |config|
+    config.class_merge.utility("text-h1", like: "text-lg")
+  end
+  ```
+
+- **`CollectionCheckBox` merges a caller `class:` instead of replacing its
+  base class.** `class: "checkbox-primary"` now renders `checkbox
+  checkbox-primary` (it used to drop `checkbox`). A caller who used `class:` to
+  swap the base class entirely (`class: "toggle"`) now gets both classes.
+- **More conflicts resolve now.** A caller's `mt-4` / `text-xs` replaces a
+  component's default `mt-1` / `text-sm` instead of stacking beside it.
+- **Daisy leaves lean on daisyui's own merge.** Input, Select, Textarea and the
+  other delegated leaves hand `class:` to the daisyui component, so
+  `DaisyUI.configure { |c| c.class_merge.enabled = false }` applies to them too.
+  The components that render plain HTML (FieldHint, FieldError, Row, Form,
+  FormControl, TagField, ChoicesSelect) merge through `DaisyUI::ClassMerge.merge`
+  directly, which that switch doesn't affect.
+
+### Removed
+
+- **`PhlexForms::ClassMerge`**: use `DaisyUI::ClassMerge.merge`.
+- **The daisyui soft-dependency path.** `require "phlex_forms"` loads daisyui
+  unconditionally, the daisy theme is always the default, and `Theme.daisy` no
+  longer raises `FeatureUnavailable`. The Plain theme is unchanged and still
+  emits zero daisy classes.
+
 ### Fixed
 
+- **Client-side validators honour the validator's `message:`** (issue #41).
+  `validates :code, format: { with: /\A[a-z]*\z/, message: "lowercase only" }`
+  used to show the generic "is invalid" in the browser and the specific text
+  only after a round trip. The introspector now emits
+  `data-validations--<validator>-message-value`: a String as is (`%{count}`
+  stays for the browser to fill), a Symbol resolved on the server through
+  ActiveModel's lookup chain in the current locale, a Proc skipped (it needs a
+  record). Length's `too_long:` / `too_short:` / `wrong_length:` win over
+  `message:`, as on the server. Every shipped controller prefers the value and
+  falls back to its bundled message; the submit coordinator collects it too. A
+  `validate: { presence: { message: "…" } }` / `confirmation: { message: "…" }`
+  rules hash now keeps its options (it used to collapse them to `true`).
 - **`rich_textarea` forwards its block into `<lexxy-editor>`**: Lexxy configures
   an editor through CHILD elements — `<lexxy-prompt>` for @mentions,
   `<lexxy-code-language-picker>` for code blocks — but the component rendered

data/README.md

@@ -42,7 +42,6 @@ end
 ```ruby
 # Gemfile
 gem "phlex-forms"
-gem "daisyui"        # optional — the daisy theme; omit for plain semantic HTML
 gem "phlex-reactive" # optional — the `live` server-truth validation
 ```
 
@@ -254,11 +253,10 @@ f.field(:search).wrapped_input(:primary) do
 end
 ```
 
-## Themes — using phlex-forms without daisyui
+## Themes — using phlex-forms without daisyUI styling
 
-Every component resolves through a theme (a role → component-class map). With
-the daisyui gem loaded, the daisy theme is the default. Without it — or on
-demand — the **Plain theme** renders bare semantic HTML: the same binding
+Every component resolves through a theme (a role → component-class map). The
+daisy theme is the default. On demand, the **Plain theme** renders bare semantic HTML: the same binding
 (names, ids, values, required, errors), variants accepted and ignored, no
 styling classes, and stable hooks (`aria-invalid`, `role="alert"`,
 `data-field-error`, `data-field-hint`, `data-form-row`) for your own CSS.
@@ -347,7 +345,19 @@ the form-level `validations--form` coordinator), which `lazyLoadControllersFrom`
 resolves to `phlex_forms/controllers/validations/*_controller` — the path the gem
 ships them at.
 
-Messages ship for `en` / `fr` / `af`; override via `window.PhlexForms.messages`.
+A validator's own `message:` reaches the browser too, so the client shows what
+the server would: a String as is (`%{value}` is filled in, and `%{count}` for
+rules that have one: length and the numericality bounds), a Symbol resolved on
+the server through your app's i18n, a Proc skipped (it needs a record).
+Length's `too_long:` / `too_short:` / `wrong_length:` win over `message:`.
+
+```ruby
+validates :code, format: { with: /\A[a-z]*\z/, message: "may only contain lowercase letters" }
+f.field :note, validate: { length: { maximum: 30, too_long: "keep it under %{count}" } }
+```
+
+Without a `message:`, the bundled messages apply: they ship for `en` / `fr` /
+`af`; override them page-wide via `window.PhlexForms.messages`.
 
 ## Nested attributes, collections & escape valves
 

data/app/javascript/phlex_forms/controllers/validations/acceptance_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::AcceptanceValidator. For
 // checkboxes, asserts `.checked`. For other inputs, asserts the
@@ -11,11 +10,11 @@ export default class extends FieldValidatorController {
 
   check(value) {
     if (this.element.type === "checkbox") {
-      return this.element.checked ? null : t("js.forms.validations.acceptance.accepted")
+      return this.element.checked ? null : this.messageOr("js.forms.validations.acceptance.accepted")
     }
     try {
       const list = JSON.parse(this.acceptValue)
-      return list.map(String).includes(String(value ?? "")) ? null : t("js.forms.validations.acceptance.accepted")
+      return list.map(String).includes(String(value ?? "")) ? null : this.messageOr("js.forms.validations.acceptance.accepted")
     } catch (_e) {
       return null
     }

data/app/javascript/phlex_forms/controllers/validations/base_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { interpolate, t } from "phlex_forms/i18n"
 
 // Shared base for every field-level validator. Subclasses implement
 // `check(value)` and return either `null` (valid) or a translation
@@ -8,7 +9,8 @@ import { Controller } from "@hotwired/stimulus"
 //
 // Each subclass declares its own `static values` for the rules it
 // reads from data attributes; the base class only knows about the
-// `allowBlank` / `allowNil` short-circuits.
+// `allowBlank` / `allowNil` short-circuits and the `message` value,
+// which carries the validator's own `message:` option (issue #41).
 export class FieldValidatorController extends Controller {
   // `error` is opt-in: callers that pre-render a `<p data-validations--<validator>-target="error">`
   // get a stable slot the controller toggles. Inputs without an
@@ -18,6 +20,7 @@ export class FieldValidatorController extends Controller {
   static values = {
     allowBlank: { type: Boolean, default: false },
     allowNil: { type: Boolean, default: false },
+    message: String,
   }
 
   // Element must be the input itself — these controllers are attached
@@ -64,6 +67,14 @@ export class FieldValidatorController extends Controller {
     return null
   }
 
+  // The validator's own `message:` when the server rendered one, else the
+  // bundled translation for `key`. Either way `%{count}` & co. are filled in;
+  // a custom message may also carry `%{value}`, as on the server.
+  messageOr(key, vars = {}) {
+    if (!(this.hasMessageValue && this.messageValue)) return t(key, vars)
+    return interpolate(this.messageValue, { value: this.fieldValue(), ...vars })
+  }
+
   shouldSkip(value) {
     if (this.allowNilValue && (value === null || value === undefined)) return true
     if (this.allowBlankValue && this.isBlank(value)) return true

data/app/javascript/phlex_forms/controllers/validations/confirmation_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::ConfirmationValidator. Looks
 // for the `<name>_confirmation` field by name within the same form
@@ -15,7 +14,7 @@ export default class extends FieldValidatorController {
     if (!form) return null
     const partner = form.elements[this.matchValue] || this.partnerByAttribute(form)
     if (!partner) return null
-    return String(partner.value) === String(value ?? "") ? null : t("js.forms.validations.confirmation.confirmation")
+    return String(partner.value) === String(value ?? "") ? null : this.messageOr("js.forms.validations.confirmation.confirmation")
   }
 
   partnerByAttribute(form) {

data/app/javascript/phlex_forms/controllers/validations/exclusion_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::ExclusionValidator.
 export default class extends FieldValidatorController {
@@ -11,7 +10,7 @@ export default class extends FieldValidatorController {
     if (!this.hasInValue) return null
     try {
       const list = JSON.parse(this.inValue)
-      return list.map(String).includes(String(value ?? "")) ? t("js.forms.validations.exclusion.exclusion") : null
+      return list.map(String).includes(String(value ?? "")) ? this.messageOr("js.forms.validations.exclusion.exclusion") : null
     } catch (_e) {
       return null
     }

data/app/javascript/phlex_forms/controllers/validations/format_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::FormatValidator.
 export default class extends FieldValidatorController {
@@ -12,7 +11,7 @@ export default class extends FieldValidatorController {
     if (!this.hasPatternValue) return null
     try {
       const regex = new RegExp(this.patternValue, this.flagsValue)
-      return regex.test(String(value ?? "")) ? null : t("js.forms.validations.format.invalid")
+      return regex.test(String(value ?? "")) ? null : this.messageOr("js.forms.validations.format.invalid")
     } catch (_e) {
       // If Rails' regex doesn't translate cleanly to JS, fall back to
       // letting the server be the authority — don't block submit on a

data/app/javascript/phlex_forms/controllers/validations/inclusion_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::InclusionValidator.
 export default class extends FieldValidatorController {
@@ -11,7 +10,7 @@ export default class extends FieldValidatorController {
     if (!this.hasInValue) return null
     try {
       const list = JSON.parse(this.inValue)
-      return list.map(String).includes(String(value ?? "")) ? null : t("js.forms.validations.inclusion.inclusion")
+      return list.map(String).includes(String(value ?? "")) ? null : this.messageOr("js.forms.validations.inclusion.inclusion")
     } catch (_e) {
       return null
     }

data/app/javascript/phlex_forms/controllers/validations/length_controller.js

@@ -1,8 +1,9 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
+import { interpolate } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::LengthValidator. Reads:
 //   - maximum / minimum / is
+//   - too-long / too-short / wrong-length messages (win over `message`)
 //   - allow-blank / allow-nil
 //
 // Counter is rendered next to the input when `maximum` is set, so
@@ -20,6 +21,9 @@ export default class extends FieldValidatorController {
     maximum: Number,
     minimum: Number,
     is: Number,
+    tooLongMessage: String,
+    tooShortMessage: String,
+    wrongLengthMessage: String,
   }
 
   connect() {
@@ -41,17 +45,24 @@ export default class extends FieldValidatorController {
     const length = this.codepointLength(value)
 
     if (this.hasIsValue && length !== this.isValue) {
-      return t("js.forms.validations.length.wrong_length", { count: this.isValue })
+      return this.lengthMessage(this.wrongLengthMessageValue, "wrong_length", this.isValue)
     }
     if (this.hasMaximumValue && length > this.maximumValue) {
-      return t("js.forms.validations.length.too_long", { count: this.maximumValue })
+      return this.lengthMessage(this.tooLongMessageValue, "too_long", this.maximumValue)
     }
     if (this.hasMinimumValue && length < this.minimumValue) {
-      return t("js.forms.validations.length.too_short", { count: this.minimumValue })
+      return this.lengthMessage(this.tooShortMessageValue, "too_short", this.minimumValue)
     }
     return null
   }
 
+  // A per-case message (`too_long:` & co.) wins over `message:`, as on the
+  // server; the bundled translation is the final fallback.
+  lengthMessage(caseMessage, key, count) {
+    if (caseMessage) return interpolate(caseMessage, { value: this.fieldValue(), count })
+    return this.messageOr(`js.forms.validations.length.${key}`, { count })
+  }
+
   updateCounter = () => {
     const counter = this.counterElement()
     if (!counter) return

data/app/javascript/phlex_forms/controllers/validations/numericality_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::NumericalityValidator.
 export default class extends FieldValidatorController {
@@ -20,40 +19,40 @@ export default class extends FieldValidatorController {
     if (raw === "") return null
 
     const number = Number(raw)
-    if (Number.isNaN(number)) return t("js.forms.validations.numericality.not_a_number")
+    if (Number.isNaN(number)) return this.messageOr("js.forms.validations.numericality.not_a_number")
 
     if (this.onlyIntegerValue && !Number.isInteger(number)) {
-      return t("js.forms.validations.numericality.not_an_integer")
+      return this.messageOr("js.forms.validations.numericality.not_an_integer")
     }
     if (this.hasGreaterThanValue && !(number > this.greaterThanValue)) {
-      return t("js.forms.validations.numericality.greater_than", { count: this.greaterThanValue })
+      return this.messageOr("js.forms.validations.numericality.greater_than", { count: this.greaterThanValue })
     }
     if (this.hasGreaterThanOrEqualToValue && !(number >= this.greaterThanOrEqualToValue)) {
-      return t("js.forms.validations.numericality.greater_than_or_equal_to", {
+      return this.messageOr("js.forms.validations.numericality.greater_than_or_equal_to", {
         count: this.greaterThanOrEqualToValue,
       })
     }
     if (this.hasLessThanValue && !(number < this.lessThanValue)) {
-      return t("js.forms.validations.numericality.less_than", { count: this.lessThanValue })
+      return this.messageOr("js.forms.validations.numericality.less_than", { count: this.lessThanValue })
     }
     if (this.hasLessThanOrEqualToValue && !(number <= this.lessThanOrEqualToValue)) {
-      return t("js.forms.validations.numericality.less_than_or_equal_to", {
+      return this.messageOr("js.forms.validations.numericality.less_than_or_equal_to", {
         count: this.lessThanOrEqualToValue,
       })
     }
     if (this.hasEqualToValue && number !== this.equalToValue) {
-      return t("js.forms.validations.numericality.equal_to", { count: this.equalToValue })
+      return this.messageOr("js.forms.validations.numericality.equal_to", { count: this.equalToValue })
     }
     if (this.hasOtherThanValue && number === this.otherThanValue) {
-      return t("js.forms.validations.numericality.other_than", { count: this.otherThanValue })
+      return this.messageOr("js.forms.validations.numericality.other_than", { count: this.otherThanValue })
     }
     // Rails' NumericalityValidator coerces with `.to_i` before
     // checking parity, so `2.5` is treated as `2` (even). JS `%` on
     // a float diverges from that — truncate first to keep client and
     // server in agreement.
     const truncated = Math.trunc(number)
-    if (this.oddValue && truncated % 2 === 0) return t("js.forms.validations.numericality.odd")
-    if (this.evenValue && truncated % 2 !== 0) return t("js.forms.validations.numericality.even")
+    if (this.oddValue && truncated % 2 === 0) return this.messageOr("js.forms.validations.numericality.odd")
+    if (this.evenValue && truncated % 2 !== 0) return this.messageOr("js.forms.validations.numericality.even")
     return null
   }
 }

data/app/javascript/phlex_forms/controllers/validations/presence_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::PresenceValidator.
 export default class extends FieldValidatorController {
@@ -9,6 +8,6 @@ export default class extends FieldValidatorController {
 
   check(value) {
     if (!this.requiredValue) return null
-    return this.isBlank(value) ? t("js.forms.validations.presence.blank") : null
+    return this.isBlank(value) ? this.messageOr("js.forms.validations.presence.blank") : null
   }
 }

data/app/javascript/phlex_forms/i18n.js

@@ -26,7 +26,7 @@ function lookup(scope, locale) {
   return scope.split(".").reduce((node, key) => (node == null ? undefined : node[key]), table)
 }
 
-function interpolate(string, vars) {
+export function interpolate(string, vars = {}) {
   return string.replace(/%\{(\w+)\}/g, (_, key) => (key in vars ? String(vars[key]) : `%{${key}}`))
 }
 

data/lib/forms/choices_select.rb

@@ -44,7 +44,7 @@ module Forms
       a = {
         name: select_name,
         id: @id,
-        class: PhlexForms::ClassMerge.merge("choices-select w-full", @options[:class]),
+        class: DaisyUI::ClassMerge.merge("choices-select w-full", @options[:class]),
         data: stimulus_data,
         **@options.except(:class, :value, :data)
       }

data/lib/forms/collection_check_box.rb

@@ -18,7 +18,7 @@ module Forms
         name: @name,
         id: @id,
         value: @value,
-        class: @options[:class] || "checkbox",
+        class: DaisyUI::ClassMerge.merge("checkbox", @options[:class]),
         checked: @checked || nil
       )
     end

data/lib/forms/field_error.rb

@@ -20,7 +20,7 @@ module Forms
     private
 
     def classes
-      PhlexForms::ClassMerge.merge("text-error text-sm mt-1", @options[:class])
+      DaisyUI::ClassMerge.merge("text-error text-sm mt-1", @options[:class])
     end
   end
 end

data/lib/forms/field_hint.rb

@@ -18,7 +18,7 @@ module Forms
     private
 
     def classes
-      PhlexForms::ClassMerge.merge("text-base-content/60 text-sm mt-1", @options[:class])
+      DaisyUI::ClassMerge.merge("text-base-content/60 text-sm mt-1", @options[:class])
     end
   end
 end

data/lib/forms/form.rb

@@ -224,10 +224,9 @@ module Forms
     end
 
     def form_classes
-      classes = []
-      classes << "space-y-4" if @base_modifiers.include?(:spaced)
-      classes << "space-y-6" if @base_modifiers.include?(:spacious)
-      PhlexForms::ClassMerge.merge(classes.join(" "), @options[:class]).presence
+      spaced = "space-y-4" if @base_modifiers.include?(:spaced)
+      spacious = "space-y-6" if @base_modifiers.include?(:spacious)
+      DaisyUI::ClassMerge.merge(spaced, spacious, @options[:class]).presence
     end
 
     def authenticity_token_field

data/lib/forms/form_control.rb

@@ -40,9 +40,8 @@ module Forms
     private
 
     def control_classes
-      base = %w[form-control w-full]
-      base << "flex flex-row items-center gap-4" if @modifiers.include?(:horizontal)
-      PhlexForms::ClassMerge.merge(base.join(" "), @options[:class])
+      horizontal = "flex flex-row items-center gap-4" if @modifiers.include?(:horizontal)
+      DaisyUI::ClassMerge.merge("form-control w-full", horizontal, @options[:class])
     end
   end
 end

data/lib/forms/rich_textarea.rb

@@ -70,7 +70,7 @@ module Forms
     end
 
     def editor_classes
-      [@options[:class], "lexxy-content"].compact.join(" ")
+      DaisyUI::ClassMerge.merge(@options[:class], "lexxy-content")
     end
   end
 end

data/lib/forms/row.rb

@@ -27,8 +27,7 @@ module Forms
     private
 
     def row_classes
-      base = ["grid grid-cols-1 gap-4", COLUMN_CLASSES[@columns]].compact.join(" ")
-      PhlexForms::ClassMerge.merge(base, @options[:class])
+      DaisyUI::ClassMerge.merge("grid grid-cols-1 gap-4", COLUMN_CLASSES[@columns], @options[:class])
     end
   end
 end

data/lib/forms/tag_field.rb

@@ -135,6 +135,6 @@ module Forms
     def option_classes = nil
     def chip_classes = "badge badge-primary gap-1"
     def remove_classes = "cursor-pointer"
-    def input_classes = PhlexForms::ClassMerge.merge("input w-full", @attributes[:class])
+    def input_classes = DaisyUI::ClassMerge.merge("input w-full", @attributes[:class])
   end
 end

data/lib/forms/validations/introspector.rb

@@ -46,6 +46,11 @@ module Forms
         only_integer odd even
       ].freeze
 
+      # LengthValidator's per-case messages; each wins over `message:` on the
+      # server, so the length controller checks them first. Each maps to the
+      # bound it reports, so a Symbol resolves with that count.
+      LENGTH_MESSAGE_KEYS = { too_long: :maximum, too_short: :minimum, wrong_length: :is }.freeze
+
       # Convenience: returns a null introspector for nil models so
       # callers don't need to guard.
       def self.for(model_or_class)
@@ -83,7 +88,8 @@ module Forms
           next unless suffix
 
           controllers << "#{CONTROLLER_PREFIX}--#{suffix}"
-          value_attributes(suffix, validator, attribute).each do |key, value|
+          value_attributes(suffix, validator, attribute).merge(message_attrs(suffix, validator, attribute))
+            .each do |key, value|
             attrs[data_key(suffix, key)] = value
           end
         end
@@ -131,6 +137,23 @@ module Forms
         end
       end
 
+      # `message` (and length's `too_long_message` & co.) values, for the
+      # validator's own `message:` options. Omitted when there is none, or when
+      # it can't be resolved without a record, so the generic message stays.
+      def message_attrs(suffix, validator, attribute)
+        counts = suffix == "length" ? length_message_counts(validator) : {}
+        options = counts.keys + [:message]
+        options.each_with_object({}) do |option, attrs|
+          text = Message.resolve(validator.options[option], model_class:, attribute:, count: counts[option])
+          attrs[option == :message ? :message : :"#{option}_message"] = text if text
+        end
+      end
+
+      def length_message_counts(validator)
+        bounds = length_attrs(validator)
+        LENGTH_MESSAGE_KEYS.to_h { |option, bound| [option, bounds[bound]&.to_i] }
+      end
+
       def presence_attrs
         { required: "true" }
       end

data/lib/forms/validations/manual_rules.rb

@@ -13,7 +13,7 @@ module Forms
     #   ManualRules.new(
     #     length: { maximum: 60, minimum: 3 },
     #     presence: true,
-    #     format: { with: /\A[a-z]+\z/i },
+    #     format: { with: /\A[a-z]+\z/i, message: "letters only" },
     #     numericality: { greater_than_or_equal_to: 0 },
     #     inclusion: { in: %w[a b c] },
     #     exclusion: { in: %w[admin] },
@@ -49,7 +49,7 @@ module Forms
           captured_rules.each do |key, opts|
             case key
             when :presence
-              validates :value, presence: true if opts
+              validates :value, presence: opts.is_a?(Hash) ? opts : true if opts
             when :length
               validates :value, length: opts
             when :format
@@ -61,7 +61,7 @@ module Forms
             when :exclusion
               validates :value, exclusion: opts
             when :confirmation
-              validates :value, confirmation: true if opts
+              validates :value, confirmation: opts.is_a?(Hash) ? opts : true if opts
             when :acceptance
               validates :value, acceptance: opts.is_a?(Hash) ? opts : { accept: %w[1 true] }
             end

data/lib/forms/validations/message.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Forms
+  module Validations
+    # Turns a validator's `message:` option into the text the browser should
+    # show, so the client mirror says what the server would (issue #41).
+    #
+    #   - a String is emitted as is; `%{count}`-style placeholders stay in place
+    #     for the Stimulus controller to fill, as it does for its own messages.
+    #     A blank String resolves to nil: the browser reads "" as valid.
+    #   - a Symbol is resolved on the server through ActiveModel's lookup chain
+    #     (`<scope>.errors.models.<model>.attributes.<attr>.<key>` ... then
+    #     `errors.messages.<key>`), in the current locale. With a known `count:`
+    #     (length's per-case messages) it is passed to I18n, so a pluralised
+    #     translation picks the right form; otherwise `%{count}` stays a
+    #     placeholder and the plural `:other` form is used.
+    #   - anything else (a Proc needs a record) resolves to nil, so the
+    #     controller keeps its generic message.
+    #
+    # Mirrors `ActiveModel::Error.generate_message` against the class alone: the
+    # introspector never instantiates the model.
+    class Message
+      # Interpolations the browser fills in, kept as literal placeholders.
+      PLACEHOLDERS = { count: "%{count}", value: "%{value}" }.freeze
+
+      def self.resolve(message, model_class:, attribute:, count: nil)
+        case message
+        when String then message unless message.empty?
+        when Symbol then new(model_class, attribute).translate(message, count:)
+        end
+      end
+
+      def initialize(model_class, attribute)
+        @model_class = model_class
+        @attribute = attribute.to_s
+      end
+
+      def translate(key, count: nil)
+        return unless defined?(I18n)
+
+        first, *rest = lookup_keys(key)
+        vars = interpolations
+        vars[:count] = count unless count.nil?
+        I18n.translate(first, **vars, default: rest, raise: true)
+      rescue StandardError
+        nil
+      end
+
+      private
+
+      attr_reader :model_class, :attribute
+
+      def lookup_keys(key)
+        model_keys(key) + [:"errors.attributes.#{attribute}.#{key}", :"errors.messages.#{key}"]
+      end
+
+      def model_keys(key)
+        return [] unless model_class.respond_to?(:i18n_scope) && model_class.respond_to?(:lookup_ancestors)
+
+        scope = model_class.i18n_scope
+        keys = model_class.lookup_ancestors.flat_map do |klass|
+          i18n_key = klass.model_name.i18n_key
+          [:"#{scope}.errors.models.#{i18n_key}.attributes.#{attribute}.#{key}",
+            :"#{scope}.errors.models.#{i18n_key}.#{key}"]
+        end
+        keys << :"#{scope}.errors.messages.#{key}"
+      end
+
+      def interpolations
+        names = {}
+        names[:model] = model_class.model_name.human if model_class.respond_to?(:model_name)
+        names[:attribute] = model_class.human_attribute_name(attribute) if model_class.respond_to?(:human_attribute_name)
+        PLACEHOLDERS.merge(names)
+      end
+    end
+  end
+end

data/lib/phlex_forms/configuration.rb

@@ -51,11 +51,11 @@ module PhlexForms
     end
 
     # The default theme: :daisy, :plain, or a PhlexForms::Theme instance.
-    # Defaults to daisy when the daisyui gem is loaded, plain otherwise.
+    # Defaults to daisy.
     attr_writer :theme
 
     def theme
-      @theme ||= defined?(DaisyUI) ? Theme.daisy : Theme.plain
+      @theme ||= Theme.daisy
     end
 
     def infer_from_model

data/lib/phlex_forms/delegated_field.rb

@@ -42,13 +42,12 @@ module PhlexForms
       attrs.compact
     end
 
-    # Merged via ClassMerge so a caller width (`w-36`) REPLACES the default
-    # instead of stacking with it (`w-full w-36` leaves the winner to stylesheet
-    # source order — that's how admin filter selects went full-width, zazu#2934).
+    # Handed to the daisyui component as parts: its class merge lets a caller
+    # width (`w-36`) REPLACE the default instead of stacking with it (zazu#2934).
     def width_class
       return @attributes[:class] unless @full_width
 
-      ClassMerge.merge("w-full", @attributes[:class])
+      ["w-full", *@attributes[:class]]
     end
 
     # Unstyled variant of binding_attributes for the Plain theme: caller classes

data/lib/phlex_forms/theme.rb

@@ -9,8 +9,7 @@ module PhlexForms
   # visual variant nor an error state.
   #
   # Built-ins:
-  #   Theme.daisy — the DaisyUI-delegating Forms::* leaves (default when the
-  #                 daisyui gem is loaded)
+  #   Theme.daisy — the DaisyUI-delegating Forms::* leaves (the default)
   #   Theme.plain — bare semantic HTML (Forms::Plain::*): variants accepted and
   #                 ignored, zero styling classes, aria/data hooks only
   #
@@ -47,12 +46,6 @@ module PhlexForms
       end
 
       def daisy
-        unless defined?(DaisyUI)
-          raise PhlexForms::FeatureUnavailable,
-            "the daisy theme requires the daisyui gem. Add `gem \"daisyui\"` to your " \
-            "Gemfile, or use the plain theme."
-        end
-
         @daisy ||= new({
           input: Forms::Input, select: Forms::Select, choices_select: Forms::ChoicesSelect,
           textarea: Forms::Textarea, rich_textarea: Forms::RichTextarea,

data/lib/phlex_forms/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexForms
-  VERSION = "0.3.1"
+  VERSION = "0.4.1"
 end

data/lib/phlex_forms.rb

@@ -7,14 +7,7 @@ require "active_support/core_ext/string" # underscore/pluralize/humanize (scope/
 require "phlex"
 require "glyphs"
 require "zeitwerk"
-
-begin
-  require "daisy_ui"
-rescue LoadError
-  # daisyui is a soft dependency: without it the Plain theme is the default.
-  # The daisy leaf components only reference DaisyUI inside view_template, so
-  # they load fine — they just must not be rendered (Theme.daisy raises).
-end
+require "daisy_ui"
 
 begin
   require "phlex/reactive"
@@ -75,7 +68,7 @@ loader.inflector.inflect(
 )
 
 # Two sibling (non-nested) autoload roots:
-#   lib/phlex_forms -> PhlexForms::  (gem internals: config, class_merge, ...)
+#   lib/phlex_forms -> PhlexForms::  (gem internals: config, inference, theme, ...)
 #   lib/forms       -> Forms::        (the component kit)
 # Keeping them as separate top-level dirs avoids the ambiguity of nesting one
 # namespace root inside another.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-forms
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.1
 platform: ruby
 authors:
 - Mikael Henriksson
@@ -29,6 +29,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '9'
+- !ruby/object:Gem::Dependency
+  name: daisyui
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: glyphs
   requirement: !ruby/object:Gem::Requirement
@@ -164,11 +178,11 @@ files:
 - lib/forms/toggle.rb
 - lib/forms/validations/introspector.rb
 - lib/forms/validations/manual_rules.rb
+- lib/forms/validations/message.rb
 - lib/forms/wrapped_input.rb
 - lib/phlex-forms.rb
 - lib/phlex_forms.rb
 - lib/phlex_forms/builder.rb
-- lib/phlex_forms/class_merge.rb
 - lib/phlex_forms/configuration.rb
 - lib/phlex_forms/delegated_field.rb
 - lib/phlex_forms/engine.rb

data/lib/phlex_forms/class_merge.rb

@@ -1,66 +0,0 @@
-# frozen_string_literal: true
-
-module PhlexForms
-  # Class-string merging for phlex-forms components.
-  #
-  # DaisyUI component-class families are mutually exclusive: an element can't be
-  # both `input-sm` and `input-lg`, or both `input-primary` and `input-error`.
-  # When a component's default classes and a caller's `class:` override both name
-  # the same family, the LAST occurrence wins — matching Tailwind/daisyui
-  # intuition (the later class overrides the earlier).
-  #
-  # Width utilities (`w-*`) are the one core-Tailwind family this gem injects a
-  # default for (DelegatedField's `w-full`), so they conflict the same way: a
-  # caller's `w-36` must REPLACE the default, or both land on the element and
-  # stylesheet source order — not author intent — decides which applies.
-  #
-  # We deliberately do NOT depend on tailwind_merge: daisyui modifier families
-  # and the width family are the only conflicts that occur on form fields, so
-  # tailwind_merge would add a runtime dependency for conflicts this handles.
-  # Other non-conflicting utilities (`py-0`, `min-w-32`, ...) pass through in
-  # order.
-  module ClassMerge
-    SIZE = /-(xs|sm|md|lg|xl)\z/
-    COLOR = /-(primary|secondary|accent|neutral|info|success|warning|error)\z/
-    # Anchored so min-w-*/max-w-* (different CSS properties) stay out of the family.
-    WIDTH = /\Aw-/
-
-    module_function
-
-    # Merge any number of class strings/nil into one deduped string. Preserves
-    # order; within a daisyui size/color family only the last token survives.
-    def merge(*parts)
-      tokens = parts.flat_map { |p| p.to_s.split }.reject(&:empty?)
-      dedupe_daisyui_families(tokens).join(" ")
-    end
-
-    # For each (component-prefix, family) pair, keep only the last token.
-    def dedupe_daisyui_families(tokens)
-      last_index = {}
-      tokens.each_with_index do |tok, idx|
-        key = family_key(tok)
-        last_index[key] = idx if key
-      end
-      tokens.each_with_index.filter_map do |tok, idx|
-        key = family_key(tok)
-        next tok if key.nil? # not a daisyui family token — keep
-        next tok if last_index[key] == idx # last in its family — keep
-
-        nil # earlier duplicate in the family — drop
-      end
-    end
-
-    # A stable bucket key like "width" / "input:size" / "select:color", or nil if
-    # the token is not a recognized conflicting family. WIDTH is checked first so
-    # a `w-*` token can never be mis-bucketed as a daisyui modifier.
-    def family_key(token)
-      return "width" if WIDTH.match?(token)
-
-      if (m = token.match(SIZE))
-        "#{token[0...m.begin(0)]}:size"
-      elsif (m = token.match(COLOR))
-        "#{token[0...m.begin(0)]}:color"
-      end
-    end
-  end
-end