0.7.1 (#181)

* Update docs

* Update test

* Add a couple of slot attributes

* Downgrade primer/css

* asdf config

* 0.7.1

.tool-versions

@@ -0,0 +1,3 @@
+erlang 27.0.1
+elixir 1.17.2
+nodejs 18.18.0

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.7.1
+
+### Changes
+
+- Added dialog attr `is_show_on_mount`.
+- Downgraded dependency @primer/css to 21.0.7 due to regressions.
+
 ## 0.7.0
 
 Updated dependencies:

assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primer-live",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "JavaScript and CSS for PrimerLive",
   "license": "MIT",
   "repository": {},
@@ -11,7 +11,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@primer/css": "21.3.6"
+    "@primer/css": "21.0.7"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -27,4 +27,4 @@
     "typescript": "^5.4.4"
   },
   "author": "Arthur Clemens <arthurclemens@gmail.com> (http://arthurclemens.com)"
-}
+}

doc-extra/installation.md

@@ -5,7 +5,7 @@
 Add PrimerLive as a dependency in your Phoenix application's `mix.exs`
 
 ```
-{:primer_live, "~> 0.6"}
+{:primer_live, "~> 0.7"}
 ```
 
 Run `mix.deps get`
@@ -31,6 +31,12 @@ plug(Plug.Static,
 )
 ```
 
+Add the `primer_live` directory to the `Phoenix.VerifiedRoutes` configuration in `<app>_web.ex`:
+
+```
+def static_paths, do: ~w(assets fonts images favicon.png robots.txt primer_live)
+```
+
 <h4>CSS only</h4>
 
 <p>Add the import link to <code>root.html.heex</code>.</p>

doc-extra/usage.md

@@ -2,7 +2,21 @@
 
 ## Usage in LiveView pages
 
-To use components, `use` module `PrimerLive`:
+```
+defmodule MyAppWeb.MyLiveView do
+  use MyAppWeb, :live_view
+  alias PrimerLive.Component, as: P
+
+  def render(assigns) do
+    ~H"""
+    <P.button>Click me</P.button>
+    """
+  end
+
+end
+```
+
+Or import with `use`:
 
 ```
 defmodule MyAppWeb.MyLiveView do
@@ -20,17 +34,32 @@ end
 
 ## Usage in regular views
 
-In view files, for example in `page_view.ex`, `use` module `PrimerLive`:
+In view files, for example in `page_view.ex`:
 
 ```
 defmodule MyAppWeb.PageView do
   use MyAppWeb, :view
-  use PrimerLive
+  alias PrimerLive.Component, as: P
 end
 ```
 
 Then call the component on a page, for example in `templates/page/index.html.heex`:
 
+```
+<P.button>Click me</P.button>
+```
+
+Or import with `use`:
+
+```
+defmodule MyAppWeb.PageView do
+  use MyAppWeb, :view
+  use PrimerLive
+end
+```
+
+Call the component on a page:
+
 ```
 <.button>Click me</.button>
 ```

lib/component.ex

@@ -802,6 +802,18 @@ defmodule PrimerLive.Component do
       """
     )
 
+    attr(:onclick, :string,
+      doc: """
+      Onclick event.
+      """
+    )
+
+    attr(:"phx-*", :string,
+      doc: """
+      phx attributes.
+      """
+    )
+
     DeclarationHelpers.slot_class()
     DeclarationHelpers.slot_style()
     DeclarationHelpers.slot_rest()
@@ -1293,10 +1305,13 @@ defmodule PrimerLive.Component do
       """
     )
 
+    attr(:type, :string, doc: "For example: type=\"button\".")
+
     DeclarationHelpers.slot_href()
     DeclarationHelpers.patch()
     DeclarationHelpers.navigate()
     DeclarationHelpers.slot_class()
+    DeclarationHelpers.slot_phx()
     DeclarationHelpers.slot_style()
     DeclarationHelpers.slot_rest()
   end
@@ -6811,6 +6826,9 @@ defmodule PrimerLive.Component do
       """
     )
 
+    attr(:name, :string)
+    attr(:type, :string)
+
     DeclarationHelpers.slot_class()
     DeclarationHelpers.slot_style()
     DeclarationHelpers.slot_rest()
@@ -7319,16 +7337,13 @@ defmodule PrimerLive.Component do
       """
     )
 
+    attr(:name, :string)
+    attr(:type, :string)
+
     DeclarationHelpers.slot_href()
     DeclarationHelpers.patch()
     DeclarationHelpers.navigate()
-
-    attr(:phx_click, :string,
-      doc: """
-      See https://hexdocs.pm/phoenix_live_view/bindings.html
-      """
-    )
-
+    DeclarationHelpers.slot_phx()
     DeclarationHelpers.slot_class()
     DeclarationHelpers.slot_style()
     DeclarationHelpers.slot_rest()
@@ -11272,6 +11287,12 @@ defmodule PrimerLive.Component do
   PromptDeclarationHelpers.is_escapable()
   PromptDeclarationHelpers.focus_first("the dialog")
 
+  attr(:is_show_on_mount, :boolean,
+    default: false,
+    doc:
+      "Displays the dialog on mount. Control conditional display by using the regular `:if={}` attribute."
+  )
+
   DeclarationHelpers.class()
 
   attr(:classes, :map,
@@ -11694,6 +11715,8 @@ defmodule PrimerLive.Component do
       """
     )
 
+    attr(:style, :string)
+
     DeclarationHelpers.slot_rest()
   end
 

lib/helpers/attribute_helpers.ex

@@ -820,6 +820,36 @@ defmodule PrimerLive.Helpers.AttributeHelpers do
         touch_layer_attrs: ["data-touch": ""]
       }
 
+      With is_show_on_mount:
+      iex> PrimerLive.Helpers.AttributeHelpers.prompt_attrs(
+      ...>   %{
+      ...>     rest: %{
+      ...>       id: "some-id"
+      ...>     },
+      ...>     prompt_options: nil,
+      ...>     is_fast: false,
+      ...>     is_dark_backdrop: false,
+      ...>     is_medium_backdrop: false,
+      ...>     is_light_backdrop: false,
+      ...>     is_show_on_mount: true
+      ...>   },
+      ...>   %{
+      ...>     form: nil,
+      ...>     field: nil,
+      ...>     toggle_slot: nil,
+      ...>     toggle_class: "btn",
+      ...>     menu_class: "",
+      ...>     is_menu: false
+      ...>   })
+      %{
+        backdrop_attrs: [],
+        checkbox_attrs: [{:"aria-hidden", "true"},  {:checked, true}, {:hidden_input, false}, {:id, "some-id-toggle"}, {:onchange, "window.Prompt && Prompt.change(this)"}],
+        focus_wrap_id: "focus-wrap-some-id",
+        menu_attrs: [class: "", "data-prompt": "", id: "some-id", "phx-hook": "Prompt"],
+        toggle_attrs: [{:"aria-haspopup", "true"}, {:class, "btn"}, {:for, "some-id-toggle"}],
+        touch_layer_attrs: ["data-touch": ""]
+      }
+
       phx_click_touch:
       iex> PrimerLive.Helpers.AttributeHelpers.prompt_attrs(
       ...>   %{
@@ -1002,7 +1032,8 @@ defmodule PrimerLive.Helpers.AttributeHelpers do
               ")"
             ]
             |> Enum.join("")
-        ]
+        ],
+        if(assigns[:is_show_on_mount], do: [checked: true], else: nil)
       ])
 
     menu_id = id || "menu-" <> toggle_id

lib/helpers/declaration_helpers.ex

@@ -23,6 +23,12 @@ defmodule PrimerLive.Helpers.DeclarationHelpers do
     end
   end
 
+  defmacro slot_phx do
+    quote do
+      attr(:"phx-click", :string)
+    end
+  end
+
   defmacro input_id do
     quote do
       attr(:input_id, :string,

lib/helpers/prompt_declaration_helpers.ex

@@ -27,7 +27,7 @@ defmodule PrimerLive.Helpers.PromptDeclarationHelpers do
       attr :form, :any,
         doc:
           """
-          To maintain the open state when using the menu inside a form, pass the form surrounding {the_menu_element}.
+          To maintain the open state when using {the_menu_element} inside a form, pass the form surrounding {the_menu_element}.
           Either a [Phoenix.HTML.Form](https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html) or an atom.
           """
           |> String.replace("{the_menu_element}", unquote(the_menu_element))

mix.exs

@@ -4,7 +4,7 @@ defmodule PrimerLive.MixProject do
   def project do
     [
       app: :primer_live,
-      version: "0.7.0",
+      version: "0.7.1",
       homepage_url: "https://github.com/ArthurClemens/primer_live",
       description: description(),
       package: package(),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primer-live",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "JavaScript and CSS for PrimerLive",
   "license": "MIT",
   "module": "./priv/static/primer-live.esm.js",
@@ -50,4 +50,4 @@
     "package.json",
     "priv/static/*"
   ]
-}
+}