- Added support for LiveView streams to the table component. To this end,
row_id,row_itemandidattributes were added to the component, following the example of Phoenix 1.7. Theidattribute is added to thetbody. If noidis explicitly set, a default value will be used depending on the schema name.
- Added dependency on
Phoenix.HTML~> 3.3.0. - The
filter_fieldscomponent now passes thePhoenix.HTML.FormFieldstruct introduced inPhoenix.HTML3.3.0 to the inner block. - Support
:asoption for filter inputs withPhoenix.HTML.FormData/4(inputs_for). Phoenix.HTML.FormData.input_type/2now considers the Ecto type for join, custom and compound fields.- Remove support for
path_helperassigns, previously deprecated in 0.15. - Deprecate
Flop.Phoenix.pop_filter/2.
If your input component already knows how to handle the
Phoenix.HTML.FormField struct, you can update the inner block for
filter_fields like this:
<.filter_fields :let={i} form={f} fields={[:email, :name]}>
<.input
- field={{i.form, i.field}}
+ field={i.field}
type={i.type}
label={i.label}
- id={i.id}
- name={i.name}
- value={i.value}
{i.rest}
/>
</.filter_fields>If your input component still expects the individual assigns, you can update
the inner block like this:
<.filter_fields :let={i} form={f} fields={[:email, :name]}>
<.input
- field={{i.form, i.field}}
+ field={{i.field.form, i.field.field}}
type={i.type}
label={i.label}
- id={i.id}
- name={i.name}
- value={i.value}
+ id={i.field.id}
+ name={i.field.name}
+ value={i.field.value}
{i.rest}
/>
</.filter_fields>For an upgrade example for the path_helper assign, see the changelog entry for
version 0.15.0.
- Support Flop 0.19.
- Allow passing an
offsetwhen generating filter inputs withPhoenix.HTML.Form.inputs_for/3.
- New option
tbody_attrsfor table component. - New attribute
row_clickand slotactionfor table component.
- To pass additional attributes to a column, you will now have to use the
attrsattribute. This was necessary because defining aglobalattribute on a slot causes a compile-time error inphoenix_live_view0.18.3.
<Flop.Phoenix.table items={@pets} meta={@meta} path={~p"/pets"}>
- <:col :let={p} class="my-class"><%= p.id %></:col>
+ <:col :let={p} attrs={[class="my-class"]}><%= p.id %></:col>
</Flop.Phoenix.table>- New Phoenix component
Flop.Phoenix.hidden_inputs_for_filter/1.
- Major refactoring of
Flop.Phoenix.filter_fields/1. Instead of giving you the rendered<label>and<input>elements, the component now only passes the necessary arguments to the inner block. You will have to pass these arguments to your owninputcomponent (or whatever you name it). The field option format has also been updated. These changes were made to fix warnings emitted by live view 0.18.1, and also accompany current changes in Phoenix that thin outPhoenix.HTML/Phoenix.HTML.Formin favor of Phoenix components for inputs. - Require
flop >= 0.17.1 and < 0.19.0.
- Removed
Flop.Phoenix.filter_hidden_inputs_for/1. This function is not used internally anymore. You can either usePhoenix.HTML.Form.hidden_inputs_for/1(Phoenix.HTML ~> 3.2), or useFlop.Phoenix.hidden_inputs_for_filter/1, which does the same, but as a Phoenix component. - Removed
Flop.Phoenix.filter_label/1andFlop.Phoenix.filter_input/1. With the changes toFlop.Phoenix.filter_fields/1and the move away from the input rendering functions ofPhoenix.HTML.Form, these functions don't have any value anymore. Read the documentation ofFlop.Phoenix.hidden_inputs_for_filter/1for an example on how to easily render the fields of individual filters.
- Fixed warnings about tainted variables in live view 0.18.1.
- Fixed an issue where default parameters set in the backend module were not removed from the query parameters.
- Fixed URLs ending with
?when no query parameters are necessary if the path is passed as a string.
Previously, you would render a filter form like this:
<.form :let={f} for={@meta}>
<Flop.Phoenix.filter_fields :let={entry} form={f} fields={[:name, :email]}>
<div class="field">
<%= entry.label %>
<%= entry.input %>
</div>
</Flop.Phoenix.filter_fields>
</.form>In this example, entry.label and entry.input are complete <label> and
<input> elements with all attributes set. You will need to change this to:
<.form :let={f} for={@meta}>
<.filter_fields :let={i} form={f} fields={[:name, :email]}>
<.input
id={i.id}
name={i.name}
label={i.label}
type={i.type}
value={i.value}
field={{i.form, i.field}}
{i.rest}
/>
</.filter_fields>
</.form>
You will have to define an input component in your project. You can take a
hint from the input component that is generated as part of the Components
module by Phoenix 1.7.
Remove input_opts and label_opts and pass them directly to your input
component, or add them directly to the input component. If you passed an id
to filter_fields, set in on the form instead.
<.filter_fields
:let={i}
form={f}
fields={[:name]}
- id="some-id"
- input_opts={[class: "input", phx_debounce: 100]}
- label_opts={[class: "label"]}
>
<.input
...
+ class="input"
+ phx-debounce={100}
/>
</.filter_fields>Use strings instead of atoms to set the type, and use the types that your
input component understands.
<.filter_fields
:let={i}
form={f}
fields={[
- name: [type: :text_input],
+ name: [type: "text"],
- age: [type: :number_input],
+ age: [type: "number"],
- phone: [type: :telephone_input],
+ phone: [type: "tel"]
]}
>If you passed additional input function options in a tuple, take them out of the tuple and add them to the keyword list instead.
<.filter_fields
:let={i}
form={f}
fields={[
- role: [type: {:select, ["author", "editor"], class: "select"}]
+ role: [type: "select", options: ["author", "editor"], class: "select"]
]}
>The default option is not handled for you anymore. You can still set it, but
it will just be passed on as part of the rest options, so your input
component will need to handle it.
If you used Flop.Phoenix.filter_label/1 or Flop.Phoenix.filter_input/1
before, follow the example in the documentation of
Flop.hidden_inputs_for_filter/1 to render the inputs of individual filters
without the removed components.
- Change version requirement for Flop to
>= 0.15.0 and < 0.19.0.
- Typespec of
Flop.Phoenix.build_path/3.
This release adds support for passing URI strings instead of MFA or FA tuples to
components and helper functions. This allows you to use the library with the
verified routes introduced in Phoenix 1.7. Alternatively, you can now also
choose to pass a 1-ary path builder function. See Flop.Phoenix.build_path/3
for examples. Passing tuples pointing to route helpers is still supported.
- Added an example for a custom filter form component to the readme.
- Support passing a URI string as a path to the
table,paginationandcursor_paginationcomponents and tobuild_path/3. - Support passing a 1-ary path builder function to the
table,paginationandcursor_paginationcomponents and tobuild_path/3. - New function
Flop.Phoenix.pop_filter/2.
- Require
live_view ~> 0.18.0. - Deprecate
path_helperassign in favor ofpath. - Use declarative assigns and replace
Phoenix.LiveView.Helpers.live_patch/1withPhoenix.Component.link/1. Flop.Phoenix.filter_input/1requires additional options for the input function to be passed in theinput_optsassign, instead of passing them directly to the component. This was necessary because the global attributes you can define with declarative assigns in LiveView 0.18 are meant for HTML attributes, while the input options may contain any additional attributes necessary (e.g. a list of select options that are rendered as option elements).
- Apply
showandhideattribute for columns tocolgroupas well. - Correctly handle multiple inputs for the same field in
Flop.filter_fields/1.
Rename the path_helper assigns of table, pagination and
cursor_pagination components to path.
- <.pagination meta={@meta} path_helper={{Routes, :pet_path, [@socket, :index]}} />
+ <.pagination meta={@meta} path={{Routes, :pet_path, [@socket, :index]}} />Wrap additional options passed to Flop.Phoenix.filter_input/1 into a single
input_opts assign.
- <.filter_input form={ff} class="select" options={[:some, :options]} />
+ <.filter_input form={ff} input_opts={[class: "select", options: [:some, :options]]} />- Support Flop
~> 0.17.0.
- Support Flop
~> 0.16.0.
symbol_unsortedoption for thetablecomponent.captionassign for thetablecomponent.col_styleassign for the:colslot of thetablecomponent.
- Additional attributes passed to the
<:col>slot will now be added as attributes to the<td>tags.
- Add
cursor_pagination/1component.
- The pagination component adds the
disabledclass to thespanthat is displayed when the previous or next link is disabled now. Previously, thedisabledattribute was set on thespan. The class can be customized with the:disabled_classoption.
- Implement the
Phoenix.HTML.FormDataprotocol forFlop.Meta. This means you can pass the meta struct as:foroption to the Phoenixform_forfunctions now. - Add the functions
filter_fields/1,filter_input/1andfilter_label/1.
- Remove
:foroption. The schema module is now automatically derived from the meta struct.
- Adds
hideandshowoptions to table:col.
- Passing a
labelto a table:colis now optional.
- The
path_helper_argsassign has been removed in favor of passing mfa tuples aspath_helper. - In the same vein,
Flop.Phoenix.build_path/4has been replaced withFlop.Phoenix.build_path/3, which also takes a tuple as the first argument. - The table component has been changed to use slots. The
headers,footer,row_funcandrow_optsassigns have been removed. Also, thetfoot_td_attrsandtfoot_th_attrsoptions have been removed. - The
live_viewversion requirement has been changed to~> 0.17.0. - Better error messages for invalid assigns have been added.
Update the path_helper and path_helper_args assigns set for the table
and pagination component:
- path_helper={&Routes.pet_path/3}
- path_helper_args={[@socket, :index]}
+ path_helper={{Routes, :pet_path, [@socket, :index]}}If you prefer, you can pass a function instead.
+ path_helper={{&Routes.pet_path/3, [@socket, :index]}}Update any calls to Flop.Phoenix.build_path/4:
- Flop.Phoenix.build_path(&Routes.pet_path/3, [@socket, :index], meta)
+ Flop.Phoenix.build_path({Routes, :pet_path, [@socket, :index]}, meta)If you prefer, you can use a 2-tuple here as well:
+ Flop.Phoenix.build_path({&Routes.pet_path/3, [@socket, :index]}, meta)Finally, update the tables in your templates:
<Flop.Phoenix.table
for={MyApp.Pet}
items={@pets}
meta={@meta}
- path_helper={&Routes.pet_path/3}
- path_helper_args={[@socket, :index]}
+ path_helper={{Routes, :pet_path, [@socket, :index]}}
- headers={[{"Name", :name}, {"Age", :age}]}
- row_func={fn pet, \_opts -> [pet.name, pet.age] end}
- footer={["", @average_age]}
- />
+ >
+ <:col let={pet} label="Name" field={:name}><%= pet.name %></:col>
+ <:col let={pet} label="Age" field={:age}><%= pet.age %></:col>
+ <:foot>
+ <tr>
+ <td></td>
+ <td><%= @average_age %></td>
+ </tr>
+ </:foot>
+ </Flop.Phoenix.table>Also, you can remove tfoot_td_attrs and tfoot_th_attrs from the opts
assign (or opts provider function).
- It is now possible to set global options for the components in your config.
config :flop_phoenix,
pagination: [opts: {MyApp.ViewHelpers, :pagination_opts}],
table: [opts: {MyApp.ViewHelpers, :table_opts}]- The
for,eventandtargetoptions moved from theoptsassign to the root. Theoptsassign is now exclusively used for customization options that modify the appearance, which are usually set globally for a project and are not related to the specific data or view. - The
row_func/2function passed to thetablecomponent receives the newrow_optsassign now instead of theoptsassign. - The pagination and table components only pass the
foroption to the query builder, instead of allopts. - The
path_helperandpath_helper_argsassigns are now optional if aneventis passed. A descriptive error is raised if neither of them are passed. - The
optsassign for the pagination and table components is now optional. - Aria labels were added to the links to the first and last page.
- The
aria-sortattribute was added to the table headers.
- Remove the
for,eventandtargetfrom theoptsassign and add them as regular assigns at the root level. - Move any key/value pairs that are needed by your
row_funcfromoptstorow_opts.
For example, if your row_func looks like this:
def table_row(%Pet{id: id, name: name}, opts) do
socket = Keyword.fetch!(opts, :socket)
[name, link("show", to: Routes.pet_path(socket, :show, id))]
endUpdate your template like this:
<Flop.Phoenix.sortable_table
row_func={&table_row/2}
- opts={[
- container: true,
- for: Pet,
- event: "sort-table",
- target: @myself,
- socket: @socket
- ]}
+ row_opts={[socket: @socket]}
+ for={Pet}
+ event="sort-table"
+ target={@myself}
+ opts={[container: true]}
/>
<Flop.Phoenix.pagination
- opts={[
- for: Pet,
- event: "paginate",
- target: @myself,
- page_links: {:ellipsis, 7}
- ]}
+ for={Pet}
+ event="paginate"
+ target={@myself}
+ opts={[page_links: {:ellipsis, 7}]}
/>- Change
live_viewversion requirement to~> 0.16.0 or ~> 0.17.0.
- Add table foot option for sortable table.
- Loosen version requirement for Flop.
- New options
eventandtargetfor the pagination and sortable table component, which allow to emit pagination and sorting events in LiveView without patching the URL.
- Use
HEExtemplates for both the pagination and the sortable table component. Refer to the Readme for usage examples. - Require
live_view ~> 0.16.0. - Support safe HTML tuples in unsortable table headers.
- Improve documentation with examples for LiveView, HEEx templates and EEx templates.
- Add wrapper around sortable table header link and order direction indicator.
- Add option
current_link_attrsto pagination builder. - Add options
thead_tr_attrs,thead_th_attrs,tbody_tr_attrsandtbody_td_attrsto table generator. - Add option
no_results_contentto table generator, which sets the content that is going to be displayed instead of the table if the item list is empty. A default option is applied, so make sure to set the option and/or remove your own no results messages from your templates when making the upgrade.
- The table options
table_class,th_wrapper_class,symbol_classandcontainer_classwere replaced in favour oftable_attrs,th_wrapper_attrs,symbol_attrsandcontainer_attrsfor more flexibility and consistency with the pagination generator. To update, rename the options in your code and wrap the values in keyword lists with aclasskey (e.g.container_class: "table-container"=>container_attrs: [class: "table-container"]). - The
pagination_link_attrsis not applied to current links anymore. Usecurrent_link_attrsto set the attributes for the current link. - Omit
page=1andoffset=0when building query parameters. - Omit default values for order and limit/page size parameters when building query parameters.
- Requires Flop
~> 0.11.0.
- Order direction indicator was wrapped twice.
- A Flop struct with an offset was resulting in invalid pagination links.
- Pagination helper generated invalid links when using
default_limitoption.
- Add
Flop.Phoenix.table/1for rendering sortable tables. - Add function
Flop.Phoenix.to_query/1, which converts a Flop struct into a keyword list for query parameters. - Add function
Flop.Phoenix.build_path/3, which applies Flop parameters to a Phoenix path helper function.
- Remove
Flop.Phoenix.Live.PaginationComponentin favor of makingFlop.Phoenix.pagination/4work in both.eexand.leextemplates.
- Merge pagination query parameters into existing query parameters, if present.
- Rename
FlopPhoenixtoFlop.Phoenix. - Add
Flop.Phoenix.Live.PaginationComponentfor use withPhoenix.LiveView. - Change pagination to always display links to the first and last page.
- Allow usage with newer versions of Flop.
- New option to hide the number of page links.
- New option to limit the number of page links.
- Add order and filter parameters to pagination links.
- Improve documentation.
previous_link/3,next_link/3andpage_links/3are private functions now.
Initial release