Components Generators
Petal Pro

Generators

Quickly scaffold a Petal CRUD interface, including a data table with pagination, sorting and filtering.

How to access

Membership
$299
-> 
See plans

This comes with Petal Pro. Purchase a membership to get access to this package. It can be used with any Phoenix project. Post-expiration, you'll retain access but won't be eligible for updates from newer versions.

petal.gen.live

The petal.gen.live generator is a wrapper around phx.gen.live that uses Petal Components instead of the default core components. Follow the Phoenix docs for phx.gen.live to learn more.

The following will generate a Petal Table utilising Streams:

plaintext 
          mix petal.gen.live Blog Post posts title description:text published_at:datetime published:boolean

To generate the template with a Data Table add the --data-table option:

plaintext 
          mix petal.gen.live Blog Post posts title description:text published_at:datetime published:boolean --data-table

petal.gen.html

The petal.gen.html generator is a wrapper around phx.gen.html that uses Petal Components instead of the default core components. Follow the Phoenix docs for phx.gen.html to learn more.

The following will generate a template with a Petal Table:

plaintext 
          mix petal.gen.html Blog Post posts title description:text published_at:datetime published:boolean

Compatibility with Phoenix Generators

In Petal Pro, core_components.ex has been adjusted to prevent compilation errors when templates have been generated with phx.gen.live or phx.gen.html.

However, there will be compiler warnings and runtime errors. The following is a list of common problems with suggested solutions.

Index page runtime error

If you visit the generated index.html.heex page, you’ll see the following runtime error:

lists in Phoenix.HTML and templates may only contain integers representing bytes, binaries or other lists, got invalid entry:
  %{__slot__: :action, inner_block: #Function<5.60914602/2 in PetalProWeb.PostLive.Index.render/1>}

This is because the Petal Table component does not support :action slots.

Instead of using :action:

<:action :let={{_id, post}}>
  <div class="sr-only">
    <.link navigate={~p"/posts/#{post}"}>Show</.link>
  </div>
  <.link patch={~p"/posts/#{post}/edit"}>Edit</.link>
</:action>

Use :col:

<:col :let={{_id, post}}>
  <div class="sr-only">
    <.link navigate={~p"/posts/#{post}"}>Show</.link>
  </div>
  <.link patch={~p"/posts/#{post}/edit"}>Edit</.link>
</:col>

Form Component does not show error messages

The generated form_component.ex won’t display error messages (e.g. when a required field has not been filled in). This is because with Petal Components, you need to use .field instead of .input.

Instead of using .input:

<.input field={@form[:title]} type="text" label="Title" />

Use .field:

<.field field={@form[:title]} type="text" label="Title" />

Modal warning - undefined attribute “show”

To address the following compiler warning:

warning: undefined attribute "show" for component PetalComponents.Modal.modal/1

Remove the show attribute:

<.modal :if={@live_action == :edit} id="post-modal" show on_cancel={JS.patch(~p"/posts/#{@post}")}>
                                                    ^ Remove this