Packages
primer_live
0.1.12
An implementation of GitHub's Primer Design System for Phoenix LiveView.
Current section
48 Versions
Jump to
Current section
48 Versions
Compare versions
6
files changed
+42
additions
-9
deletions
| @@ -37,4 +37,4 @@ | |
| 37 37 | {<<"optional">>,false}, |
| 38 38 | {<<"repository">>,<<"hexpm">>}, |
| 39 39 | {<<"requirement">>,<<"~> 1.0">>}]]}. |
| 40 | - {<<"version">>,<<"0.1.11">>}. |
| 40 | + {<<"version">>,<<"0.1.12">>}. |
unknownlib/component.ex
File is too large to be displayed (100 KB limit).
| @@ -4,10 +4,16 @@ defmodule PrimerLive.FieldState do | |
| 4 4 | |
| 5 5 | Struct fields: |
| 6 6 | - `changeset` - `Ecto.Changeset` struct. |
| 7 | - - `field_errors` - changeset `errors`, filtered for the field. |
| 7 | + - `field_errors` - Changeset `errors`, filtered for the field. |
| 8 8 | - `valid?` - True if changeset's `field_errors` is empty for the field. |
| 9 | + - `ignore_errors?` - Changeset has errors but should not be displayed (currently when `changeset.action` is `nil`) |
| 9 10 | - `message` - Default message derived from changeset `errors`, unless overridden by `validation_message` attribute. |
| 10 11 | - `message_id` - Generated id that is used for `aria_describedby`. |
| 11 12 | """ |
| 12 | - defstruct valid?: false, changeset: nil, message: nil, message_id: nil, field_errors: [] |
| 13 | + defstruct valid?: false, |
| 14 | + ignore_errors?: false, |
| 15 | + changeset: nil, |
| 16 | + message: nil, |
| 17 | + message_id: nil, |
| 18 | + field_errors: [] |
| 13 19 | end |
| @@ -378,6 +378,7 @@ defmodule PrimerLive.Helpers.AttributeHelpers do | |
| 378 378 | form = assigns[:form] |
| 379 379 | field = assigns[:field] |
| 380 380 | field_or_name = field || name |
| 381 | + phx_feedback_for_id = Phoenix.HTML.Form.input_name(form, field) |
| 381 382 | |
| 382 383 | # ID |
| 383 384 | |
| @@ -427,13 +428,35 @@ defmodule PrimerLive.Helpers.AttributeHelpers do | |
| 427 428 | |
| 428 429 | %{ |
| 429 430 | message: message, |
| 430 | - valid?: valid? |
| 431 | + valid?: valid?, |
| 432 | + ignore_errors?: ignore_errors? |
| 431 433 | } = field_state |
| 432 434 | |
| 433 | - has_error = message && !valid? |
| 435 | + has_changeset = !is_nil(field_state.changeset) |
| 434 436 | |
| 437 | + show_message? = message && !ignore_errors? |
| 435 438 | validation_message_id = if !is_nil(field_state.message), do: "#{input_id}-validation" |
| 436 439 | |
| 440 | + # Phoenix uses phx_feedback_for to hide form field errors that are untouched. |
| 441 | + # However, this attribute can't be set on the element itself (the JS DOM library stalls). |
| 442 | + # Element "validation_marker" is used as stopgap: a separate element placed just before the input element. |
| 443 | + validation_marker_attrs = |
| 444 | + case has_changeset do |
| 445 | + true -> |
| 446 | + [ |
| 447 | + phx_feedback_for: input_id, |
| 448 | + class: |
| 449 | + if valid? do |
| 450 | + "pl-valid" |
| 451 | + else |
| 452 | + "pl-invalid" |
| 453 | + end |
| 454 | + ] |
| 455 | + |
| 456 | + false -> |
| 457 | + nil |
| 458 | + end |
| 459 | + |
| 437 460 | %{ |
| 438 461 | # Common |
| 439 462 | rest: rest, |
| @@ -441,6 +464,7 @@ defmodule PrimerLive.Helpers.AttributeHelpers do | |
| 441 464 | field: field, |
| 442 465 | # ID and label |
| 443 466 | input_id: input_id, |
| 467 | + phx_feedback_for_id: phx_feedback_for_id, |
| 444 468 | value: value, |
| 445 469 | derived_label: derived_label, |
| 446 470 | validation_message_id: validation_message_id, |
| @@ -450,7 +474,9 @@ defmodule PrimerLive.Helpers.AttributeHelpers do | |
| 450 474 | # Field state |
| 451 475 | message: message, |
| 452 476 | valid?: valid?, |
| 453 | - has_error: has_error |
| 477 | + ignore_errors?: ignore_errors?, |
| 478 | + show_message?: show_message?, |
| 479 | + validation_marker_attrs: validation_marker_attrs |
| 454 480 | } |
| 455 481 | end |
| 456 482 | end |
| @@ -69,7 +69,7 @@ defmodule PrimerLive.Helpers.FormHelpers do | |
| 69 69 | ...> }, |
| 70 70 | ...> }, |
| 71 71 | ...> :first_name, nil) |
| 72 | - %PrimerLive.FieldState{valid?: false, changeset: %{action: :update, changes: %{}, data: nil, errors: [first_name: {"can't be blank", [validation: :required]}], valid?: true}, message: nil, field_errors: ["can't be blank"]} |
| 72 | + %PrimerLive.FieldState{valid?: false, changeset: %{action: :update, changes: %{}, data: nil, errors: [first_name: {"can't be blank", [validation: :required]}], valid?: true}, message: "can't be blank", field_errors: ["can't be blank"]} |
| 73 73 | """ |
| 74 74 | def field_state(form, field, validation_message_fn) do |
| 75 75 | changeset = form_changeset(form) |
| @@ -92,13 +92,14 @@ defmodule PrimerLive.Helpers.FormHelpers do | |
| 92 92 | field_state <- %{ |
| 93 93 | field_state |
| 94 94 | | valid?: valid?, |
| 95 | + ignore_errors?: is_nil(changeset.action) && !valid?, |
| 95 96 | field_errors: field_errors, |
| 96 97 | changeset: changeset |
| 97 98 | }, |
| 98 99 | message <- |
| 99 100 | (case is_nil(validation_message_fn) do |
| 100 101 | true -> |
| 101 | - case changeset.action === :validate do |
| 102 | + case !is_nil(changeset.action) do |
| 102 103 | true -> |
| 103 104 | case field_errors === [] do |
| 104 105 | true -> |
Loading more files…