defmodule Flop.Phoenix do @moduledoc """ Phoenix components for pagination, sortable tables and filter forms with [Flop](https://hex.pm/packages/flop). ## Introduction Please refer to the [Readme](README.md) for an introduction. ## Customization The default classes, attributes, texts and symbols can be overridden by passing the `opts` assign. Since you probably will use the same `opts` in all your templates, you can globally configure an `opts` provider function for each component. The functions have to return the options as a keyword list. The overrides are deep-merged into the default options. defmodule MyAppWeb.CoreComponents do use Phoenix.Component def pagination_opts do [ ellipsis_attrs: [class: "ellipsis"], ellipsis_content: "‥", next_link_attrs: [class: "next"], next_link_content: next_icon(), page_links: {:ellipsis, 7}, pagination_link_aria_label: &"\#{&1}ページ目へ", previous_link_attrs: [class: "prev"], previous_link_content: previous_icon() ] end defp next_icon do assigns = %{} ~H\""" \""" end defp previous_icon do assigns = %{} ~H\""" \""" end def table_opts do [ container: true, container_attrs: [class: "table-container"], no_results_content: no_results_content(), table_attrs: [class: "table"] ] end defp no_results_content do assigns = %{} ~H\"""

Nothing found.

\""" end end Refer to `t:pagination_option/0` and `t:table_option/0` for a list of available options and defaults. Once you have defined these functions, you can reference them with a module/function tuple in `config/config.exs`. ```elixir config :flop_phoenix, pagination: [opts: {MyApp.CoreComponents, :pagination_opts}], table: [opts: {MyApp.CoreComponents, :table_opts}] ``` ## Hiding default parameters Default values for page size and ordering are omitted from the query parameters. If you pass the `:for` assign, the Flop.Phoenix function will pick up the default values from the schema module deriving `Flop.Schema`. ## Links Links are generated with `Phoenix.Components.link/1`. This will lead to `` tags with `data-phx-link` and `data-phx-link-state` attributes, which will be ignored outside of LiveViews and LiveComponents. When used within a LiveView or LiveComponent, you will need to handle the new params in the `c:Phoenix.LiveView.handle_params/3` callback of your LiveView module. ## Using JS commands You can pass a `Phoenix.LiveView.JS` command as `on_paginate` and `on_sort` attributes. If used with the `path` attribute, the URL will be patched _and_ the given JS command will be executed. If used without the `path` attribute, you will need to include a `push` command to trigger an event when a pagination or sort link is clicked. You can set a different target by assigning a `:target`. The value will be used as the `phx-target` attribute. You will need to handle the event in the `c:Phoenix.LiveView.handle_event/3` or `c:Phoenix.LiveComponent.handle_event/3` callback of your LiveView or LiveComponent module. The event name will be the one you set with the `:event` option. def handle_event("paginate-pets", %{"page" => page}, socket) do flop = Flop.set_page(socket.assigns.meta.flop, page) with {:ok, {pets, meta}} <- Pets.list_pets(flop) do {:noreply, assign(socket, pets: pets, meta: meta)} end end def handle_event("sort-pets", %{"order" => order}, socket) do flop = Flop.push_order(socket.assigns.meta.flop, order) with {:ok, {pets, meta}} <- Pets.list_pets(flop) do {:noreply, assign(socket, pets: pets, meta: meta)} end end """ use Phoenix.Component import Phoenix.HTML.Form, only: [ input_id: 2, input_name: 2, input_value: 2 ] alias Flop.Meta alias Flop.Phoenix.CursorPagination alias Flop.Phoenix.Misc alias Flop.Phoenix.Pagination alias Flop.Phoenix.Table alias Phoenix.HTML.Form alias Phoenix.LiveView.JS alias Plug.Conn.Query @typedoc """ Defines the available options for `Flop.Phoenix.pagination/1`. - `:current_link_attrs` - The attributes for the link to the current page. Default: `#{inspect(Pagination.default_opts()[:current_link_attrs])}`. - `:disabled_class` - The class which is added to disabled links. Default: `#{inspect(Pagination.default_opts()[:disabled_class])}`. - `:ellipsis_attrs` - The attributes for the `` that wraps the ellipsis. Default: `#{inspect(Pagination.default_opts()[:ellipsis_attrs])}`. - `:ellipsis_content` - The content for the ellipsis element. Default: `#{inspect(Pagination.default_opts()[:ellipsis_content])}`. - `:next_link_attrs` - The attributes for the link to the next page. Default: `#{inspect(Pagination.default_opts()[:next_link_attrs])}`. - `:next_link_content` - The content for the link to the next page. Default: `#{inspect(Pagination.default_opts()[:next_link_content])}`. - `:page_links` - Specifies how many page links should be rendered. Default: `#{inspect(Pagination.default_opts()[:page_links])}`. - `:all` - Renders all page links. - `{:ellipsis, n}` - Renders `n` page links. Renders ellipsis elements if there are more pages than displayed. - `:hide` - Does not render any page links. - `:pagination_link_aria_label` - 1-arity function that takes a page number and returns an aria label for the corresponding page link. Default: `&"Go to page \#{&1}"`. - `:pagination_link_attrs` - The attributes for the pagination links. Default: `#{inspect(Pagination.default_opts()[:pagination_link_attrs])}`. - `:pagination_list_attrs` - The attributes for the pagination list. Default: `#{inspect(Pagination.default_opts()[:pagination_list_attrs])}`. - `:pagination_list_item_attrs` - The attributes for the pagination list items. Default: `#{inspect(Pagination.default_opts()[:pagination_list_item_attrs])}`. - `:previous_link_attrs` - The attributes for the link to the previous page. Default: `#{inspect(Pagination.default_opts()[:previous_link_attrs])}`. - `:previous_link_content` - The content for the link to the previous page. Default: `#{inspect(Pagination.default_opts()[:previous_link_content])}`. - `:wrapper_attrs` - The attributes for the `