Add `field` parameter to the rating component

[tanguilp]

Hi again,

Looks like the rating component is not only RO but can also act as a form input, sending events from user 🎉

However, I would suggest, since it is meant to be used within the Phoenix framework, to switch to using a field parameter as input instead of sending events. It would be more coherent with the framework.

Something like:

<.rating field={@form[:rating]}/>

I've actually built such a component 2 years ago, here's a gist I shared at that time: https://gist.github.com/tanguilp/d32a89fe1e3f5b96a1397fa1434c1f94

Cheers!

[shahryarjb]

@tanguilp Hi, i will think about it we need another component in form section or just add new option, but i think we will have this version!

[shahryarjb]

Hi dear @tanguilp

After a week without access (internet full shout-down), I finally managed—after a lot of trouble—to get online. In the country where I am, a major war is currently taking place. But the very first minute I connected, I wanted to resolve this issue, so that if I were killed somehow or disappeared for a long time, at least a good memory of me would remain at the end. ❤️😔

Please test these new options! in this version in do not support keyboard! arrow! Get the last version of master or use last version https://hex.pm/packages/mishka_chelekom/0.0.9-alpha.15

My state
https://bsky.app/profile/shahryar-tbiz.bsky.social/post/3mg4wnhpg7c2y

---

⏺ Rating Component — New Options

Disabled State

Disable all interaction with reduced opacity. Works in both static and interactive modes.

<%!-- Static disabled --%>
<.rating select={3} size="large" disabled />

<%!-- Interactive disabled (interaction blocked) --%>
<.rating select={2} size="large" interactive disabled />

<%!-- Form field disabled --%>
<.rating field={@form[:rating]} size="large" disabled />

┌───────────┬──────────┬─────────┬─────────────────────────────────────────────────┐
│ Attribute │   Type   │ Default │                   Description                   │
├───────────┼──────────┼─────────┼─────────────────────────────────────────────────┤
│ disabled  │ :boolean │ false   │ Disables all click events, adds reduced opacity │
└───────────┴──────────┴─────────┴─────────────────────────────────────────────────┘

---
Half-Star Precision

Set precision={0.5} to allow half-star selection. Each star splits into two click targets (left half = x.5,
right half = x.0).

Event mode:

<.rating
  id="rating-precision"
  select={@half_star}
  size="large"
  color="warning"
  precision={0.5}
  interactive
/>

# In mount
assign(socket, half_star: 2.5)

# Handler
def handle_event("rating", %{"action" => "select", "number" => number}, socket)
    when is_number(number) do
  {:noreply, assign(socket, half_star: number)}
end

Form mode:

<.rating field={@form[:rating]} size="large" color="warning" precision={0.5} />

Note: Use a :float field type in your Ecto schema when using precision={0.5}:

embedded_schema do
  field(:rating, :float)
end

def changeset(review, attrs) do
  review
  |> cast(attrs, [:rating])
  |> validate_number(:rating, greater_than_or_equal_to: 0, less_than_or_equal_to: 5)
end

┌───────────┬────────┬─────────┬──────────────────────────────────────────────────────────────────────┐
│ Attribute │  Type  │ Default │                             Description                              │
├───────────┼────────┼─────────┼──────────────────────────────────────────────────────────────────────┤
│ precision │ :float │ 1.0     │ Rating granularity — 1.0 for full stars, 0.5 for half-star selection │
└───────────┴────────┴─────────┴──────────────────────────────────────────────────────────────────────┘

---
Full Review Form Example

Combines form integration, half-star precision, validation, and other fields:

<.form_wrapper for={@form} id="review-form" phx-change="validate" phx-submit="save" space="medium">
  <.text_field size="medium" field={@form[:fullname]} label="Full Name" />
  <.rating field={@form[:rating]} label="Your Rating" size="large" color="warning" precision={0.5} />
  <.textarea_field size="medium" field={@form[:comment]} label="Comment (optional)" />
  <:actions>
    <.button variant="outline" color="info" size="small" phx-disable-with="Submitting...">
      Submit Review
    </.button>
  </:actions>
</.form_wrapper>

---
Available Colors (all work with precision)

base, natural, white, primary, secondary, dark, success, warning, danger, info, silver, misc, dawn

Available Sizes

extra_small, small, medium, large, extra_large, double_large, triple_large, quadruple_large

[tanguilp]

Hi @shahryarjb, not ready to test it yet as I have other things to do.

Just leaving a kind word: I hope from all my heart you gonna be ok ❤️