Current section
41 Versions
Jump to
Current section
41 Versions
Compare versions
7
files changed
+211
additions
-223
deletions
| @@ -47,48 +47,35 @@ Reference this repository on your `mix.exs` file to start using. | |
| 47 47 | ```elixir |
| 48 48 | def deps do |
| 49 49 | [ |
| 50 | - {:daisy_ui_components, "~> 0.8"} |
| 50 | + {:daisy_ui_components, "~> 0.9"} |
| 51 51 | ] |
| 52 52 | end |
| 53 53 | ``` |
| 54 54 | |
| 55 55 | ### DaisyUI Assets |
| 56 56 | |
| 57 | - Add through `npm` the daisy UI package inside your phoenix application: |
| 57 | + Phoenix 1.8+ uses `tailwind` and `daisyui` configured out of the box. If your project is using an older version of Phoenix, you can install the `daisyui` package manually. |
| 58 | + Follow the official [DaisyUI installation guide](https://daisyui.com/docs/install/) to install the package. |
| 58 59 | |
| 59 | - ```bash |
| 60 | - cd assets |
| 61 | - npm i -D daisyui@5 |
| 62 | - ``` |
| 60 | + ### Configuration |
| 63 61 | |
| 64 | - On `tailwind.config.js` include Live DaisyUI Components under the content list and reference under plugins |
| 65 | - |
| 66 | - ```javascript |
| 67 | - module.exports = { |
| 68 | - content: [ |
| 69 | - //... |
| 70 | - "../deps/daisy_ui_components/**/*.*ex", // <- reference DaisyUIComponents as content path |
| 71 | - ], |
| 72 | - //... |
| 73 | - plugins: [ |
| 74 | - //... |
| 75 | - // comment the tailwind form to not conflict with DaisyUI |
| 76 | - // require("@tailwindcss/forms"), |
| 77 | - require("daisyui"), // <- add daisyUI plugin |
| 78 | - //... |
| 79 | - ], |
| 80 | - }; |
| 81 | - ``` |
| 82 | - |
| 83 | - Add error translation function to your app's config.exs file. This function is used to translate ecto changeset errors |
| 62 | + In order to use the translations that comes with phoenix, it's recommended to set the `translate_function` in your `config.exs` file. |
| 84 63 | |
| 85 64 | ```elixir |
| 86 65 | config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1 |
| 87 66 | ``` |
| 88 67 | |
| 89 | - And now this library is ready. To have the components available under liveview, import the components on the web folder |
| 68 | + And to finalize, add under the `app.css` file the following line to import this library tailwind styles: |
| 90 69 | |
| 91 | - ```elixir |
| 70 | + ```css |
| 71 | + @source "../../deps/daisy_ui_components"; |
| 72 | + ``` |
| 73 | + |
| 74 | + ## 🧩 Usage |
| 75 | + |
| 76 | + To use the components in your project, you need to import the `DaisyUIComponents` module in your web file, typically `lib/my_app_web.ex`. |
| 77 | + |
| 78 | + ```diff |
| 92 79 | defp html_helpers do |
| 93 80 | quote do |
| 94 81 | # Translation |
| @@ -97,28 +84,34 @@ defp html_helpers do | |
| 97 84 | # HTML escaping functionality |
| 98 85 | import Phoenix.HTML |
| 99 86 | |
| 100 | - # Import DaisyUI components into your project |
| 101 | - use DaisyUIComponents |
| 102 | - |
| 103 | - # Comment your own CoreComponents to not conflict with the defaults of this library. |
| 104 | - # import YourProjectWeb.CoreComponents |
| 105 | - # Importing CoreComponents from your project is no longer necessary since |
| 106 | - # DaisyUIComponents.CoreComponents offers a drop in replacement |
| 107 | - # If you still want to use your own core components, remember to delete the default components generated from phoenix in this file |
| 108 | - # ... |
| 87 | + + # Import DaisyUI components into your project |
| 88 | + + use DaisyUIComponents, core_components: false |
| 89 | + import YourProjectWeb.CoreComponents |
| 109 90 | end |
| 110 91 | end |
| 111 92 | ``` |
| 112 93 | |
| 113 | - Finally, in order to not conflict with some of the DaisyUI default styles, remove the `bg-white` class in your `root.html.heex` file. |
| 94 | + This will make all the components available in your templates with the exception of the phoenix `core_components.ex` and `layouts.ex` components. |
| 95 | + If you want to use all DaisyUIComponents, set `core_components: true` and remove the import for the phoenix CoreComponents. |
| 114 96 | |
| 115 | - ```heex |
| 116 | - ## Change from this |
| 117 | - <body class="bg-white"> |
| 118 | - ## to this |
| 119 | - <body> |
| 97 | + ```diff |
| 98 | + defp html_helpers do |
| 99 | + quote do |
| 100 | + # Translation |
| 101 | + use Gettext, backend: MyAppWeb.Gettext |
| 102 | + |
| 103 | + # HTML escaping functionality |
| 104 | + import Phoenix.HTML |
| 105 | + |
| 106 | + + # Import DaisyUI components into your project |
| 107 | + + use DaisyUIComponents, core_components: true |
| 108 | + - import YourProjectWeb.CoreComponents |
| 109 | + end |
| 110 | + end |
| 120 111 | ``` |
| 121 112 | |
| 113 | + You may also find component conflicts on the `layout.ex` file, you will need to comment the `flash_group/1` component there too. |
| 114 | + |
| 122 115 | ## ⭐ Core Components |
| 123 116 | |
| 124 117 | This library aims to integrate seamlessly with Phoenix generators. For this reason you don't need the components inside the `CoreComponents` after adding `use DaisyUIComponents` into your web file. |
| @@ -130,37 +123,6 @@ If you encounter any compatibility issues, feel free to open an `issue` or submi | |
| 130 123 | |
| 131 124 | This project is fully compatible with the Liveview 1.0 🔥. If you are using a previous Liveview version, check the [migration guide](https://github.com/phoenixframework/phoenix_live_view/blob/v1.0/CHANGELOG.md). |
| 132 125 | |
| 133 | - ## 📦 NPM setup |
| 134 | - |
| 135 | - Since DaisyUI requires `npm` to install, it's also necessary to configure in your project the asset pipeline to use the npm commands. |
| 136 | - |
| 137 | - In your `mix.exs` file, add the npm command in your assets setup: |
| 138 | - |
| 139 | - ```diff |
| 140 | - "assets.setup": [ |
| 141 | - "tailwind.install --if-missing", |
| 142 | - - "esbuild.install --if-missing" |
| 143 | - + "esbuild.install --if-missing", |
| 144 | - + "cmd npm install --prefix assets" |
| 145 | - ] |
| 146 | - ``` |
| 147 | - |
| 148 | - and if you are deploying the application with `Docker`, run the npm scripts there too: |
| 149 | - |
| 150 | - ```diff |
| 151 | - # install build dependencies |
| 152 | - -RUN apt-get update -y && apt-get install -y build-essential git \ |
| 153 | - +RUN apt-get update -y && apt-get install -y build-essential git npm \ |
| 154 | - && apt-get clean && rm -f /var/lib/apt/lists/*_* |
| 155 | - |
| 156 | - # ... |
| 157 | - RUN mix deps.compile |
| 158 | - |
| 159 | - # build assets |
| 160 | - +COPY assets/package.json assets/package-lock.json ./assets/ |
| 161 | - +RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error |
| 162 | - ``` |
| 163 | - |
| 164 126 | ## ⚡️ Components |
| 165 127 | |
| 166 128 | List of available components. |
| @@ -269,9 +231,8 @@ List of available components. | |
| 269 231 | | Input | ✅ | ✅ | |
| 270 232 | | Table | ✅ | ✅ | |
| 271 233 | |
| 272 | - ## 🗺️ Roadmap |
| 234 | + ## 🤩 Contributors |
| 273 235 | |
| 274 | - - [x] Update components for the new [DaisyUI 5](https://daisyui.com/docs/upgrade/) |
| 275 | - - [ ] Implement all components from DaisyUI with storybook |
| 276 | - - [ ] Update documentation with the new Phoenix release |
| 277 | - - [x] Create `mix` script to enable users to import the components of this library into their projects, sharing the same project namespace |
| 236 | + <a href="https://github.com/phcurado/daisy_ui_components/graphs/contributors"> |
| 237 | + <img src="https://contrib.rocks/image?repo=phcurado/daisy_ui_components" /> |
| 238 | + </a> |
| @@ -1,7 +1,7 @@ | |
| 1 1 | {<<"links">>, |
| 2 2 | [{<<"GitHub">>,<<"https://github.com/phcurado/daisy_ui_components">>}]}. |
| 3 3 | {<<"name">>,<<"daisy_ui_components">>}. |
| 4 | - {<<"version">>,<<"0.8.7">>}. |
| 4 | + {<<"version">>,<<"0.9.0">>}. |
| 5 5 | {<<"description">>,<<"DaisyUI component library for LiveView">>}. |
| 6 6 | {<<"elixir">>,<<"~> 1.14">>}. |
| 7 7 | {<<"app">>,<<"daisy_ui_components">>}. |
| @@ -47,6 +47,7 @@ | |
| 47 47 | <<"lib/daisy_ui_components/navbar.ex">>, |
| 48 48 | <<"lib/daisy_ui_components/dropdown.ex">>, |
| 49 49 | <<"lib/daisy_ui_components/header.ex">>, |
| 50 | + <<"lib/daisy_ui_components/flash.ex">>, |
| 50 51 | <<"lib/daisy_ui_components/collapse.ex">>,<<".formatter.exs">>, |
| 51 52 | <<"mix.exs">>,<<"README.md">>,<<"LICENSE">>]}. |
| 52 53 | {<<"requirements">>, |
| @@ -40,15 +40,32 @@ defmodule DaisyUIComponents do | |
| 40 40 | apply(__MODULE__, which, []) |
| 41 41 | end |
| 42 42 | |
| 43 | - defmacro __using__(_) do |
| 43 | + defmacro __using__(opts) do |
| 44 | + core_components = Keyword.get(opts, :core_components, true) |
| 45 | + |
| 44 46 | quote do |
| 47 | + unquote( |
| 48 | + if core_components do |
| 49 | + quote do |
| 50 | + import DaisyUIComponents.Button |
| 51 | + import DaisyUIComponents.Flash |
| 52 | + import DaisyUIComponents.Form |
| 53 | + import DaisyUIComponents.Icon |
| 54 | + import DaisyUIComponents.Header |
| 55 | + import DaisyUIComponents.Input |
| 56 | + import DaisyUIComponents.JSHelpers |
| 57 | + import DaisyUIComponents.List |
| 58 | + import DaisyUIComponents.Table |
| 59 | + end |
| 60 | + end |
| 61 | + ) |
| 62 | + |
| 45 63 | import DaisyUIComponents.Accordion |
| 46 64 | import DaisyUIComponents.Alert |
| 47 65 | import DaisyUIComponents.Avatar |
| 48 66 | import DaisyUIComponents.Back |
| 49 67 | import DaisyUIComponents.Badge |
| 50 68 | import DaisyUIComponents.Breadcrumbs |
| 51 | - import DaisyUIComponents.Button |
| 52 69 | import DaisyUIComponents.Card |
| 53 70 | import DaisyUIComponents.Checkbox |
| 54 71 | import DaisyUIComponents.Collapse |
| @@ -56,16 +73,10 @@ defmodule DaisyUIComponents do | |
| 56 73 | import DaisyUIComponents.Dropdown |
| 57 74 | import DaisyUIComponents.Fieldset |
| 58 75 | import DaisyUIComponents.Footer |
| 59 | - import DaisyUIComponents.Form |
| 60 | - import DaisyUIComponents.Header |
| 61 76 | import DaisyUIComponents.Hero |
| 62 | - import DaisyUIComponents.Icon |
| 63 77 | import DaisyUIComponents.Indicator |
| 64 | - import DaisyUIComponents.Input |
| 65 | - import DaisyUIComponents.JSHelpers |
| 66 78 | import DaisyUIComponents.Join |
| 67 79 | import DaisyUIComponents.Label |
| 68 | - import DaisyUIComponents.List |
| 69 80 | import DaisyUIComponents.Loading |
| 70 81 | import DaisyUIComponents.Menu |
| 71 82 | import DaisyUIComponents.Modal |
| @@ -77,7 +88,6 @@ defmodule DaisyUIComponents do | |
| 77 88 | import DaisyUIComponents.Select |
| 78 89 | import DaisyUIComponents.Stat |
| 79 90 | import DaisyUIComponents.Swap |
| 80 | - import DaisyUIComponents.Table |
| 81 91 | import DaisyUIComponents.Tabs |
| 82 92 | import DaisyUIComponents.TextInput |
| 83 93 | import DaisyUIComponents.Textarea |
| @@ -3,127 +3,10 @@ defmodule DaisyUIComponents.Alert do | |
| 3 3 | Alert component |
| 4 4 | |
| 5 5 | https://daisyui.com/components/alert |
| 6 | - |
| 7 | - |
| 8 6 | """ |
| 9 7 | |
| 10 8 | use DaisyUIComponents, :component |
| 11 9 | |
| 12 | - import DaisyUIComponents.JSHelpers |
| 13 | - import DaisyUIComponents.Icon |
| 14 | - |
| 15 | - @doc """ |
| 16 | - Shows the flash group with standard titles and content. |
| 17 | - |
| 18 | - ## Examples |
| 19 | - |
| 20 | - <.flash_group flash={@flash} /> |
| 21 | - """ |
| 22 | - attr :id, :string, default: "flash-group", doc: "the optional id of flash container" |
| 23 | - attr :flash, :map, required: true, doc: "the map of flash messages" |
| 24 | - |
| 25 | - attr :direction, :atom, |
| 26 | - values: [:top_left, :top_right, :bottom_left, :bottom_right], |
| 27 | - default: :top_right |
| 28 | - |
| 29 | - def flash_group(assigns) do |
| 30 | - ~H""" |
| 31 | - <div id={@id}> |
| 32 | - <.flash kind={:info} direction={@direction} title="Success!" flash={@flash} /> |
| 33 | - <.flash kind={:error} direction={@direction} title="Error!" flash={@flash} /> |
| 34 | - <.flash |
| 35 | - id="client-error" |
| 36 | - class="hidden" |
| 37 | - kind={:error} |
| 38 | - direction={@direction} |
| 39 | - title={translate("We can't find the internet")} |
| 40 | - phx-disconnected={show(".phx-client-error #client-error")} |
| 41 | - phx-connected={hide("#client-error")} |
| 42 | - > |
| 43 | - Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" /> |
| 44 | - </.flash> |
| 45 | - |
| 46 | - <.flash |
| 47 | - id="server-error" |
| 48 | - class="hidden" |
| 49 | - kind={:error} |
| 50 | - title="Something went wrong!" |
| 51 | - phx-disconnected={show(".phx-server-error #server-error")} |
| 52 | - phx-connected={hide("#server-error")} |
| 53 | - > |
| 54 | - Hang in there while we get back on track |
| 55 | - <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" /> |
| 56 | - </.flash> |
| 57 | - </div> |
| 58 | - """ |
| 59 | - end |
| 60 | - |
| 61 | - @doc """ |
| 62 | - Renders flash notices. |
| 63 | - |
| 64 | - ## Examples |
| 65 | - |
| 66 | - <.flash kind={:info} flash={@flash} /> |
| 67 | - <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash> |
| 68 | - """ |
| 69 | - attr :id, :string, doc: "the optional id of flash container" |
| 70 | - attr :flash, :map, default: %{}, doc: "the map of flash messages to display" |
| 71 | - attr :title, :string, default: nil |
| 72 | - attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup" |
| 73 | - attr :class, :string, default: nil |
| 74 | - |
| 75 | - attr :direction, :atom, |
| 76 | - values: [:top_left, :top_right, :bottom_left, :bottom_right], |
| 77 | - default: :top_right |
| 78 | - |
| 79 | - attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container" |
| 80 | - |
| 81 | - slot :inner_block, doc: "the optional inner block that renders the flash message" |
| 82 | - |
| 83 | - def flash(%{kind: kind} = assigns) do |
| 84 | - assigns = |
| 85 | - assigns |
| 86 | - |> assign_new(:color, fn -> |
| 87 | - case kind do |
| 88 | - :error -> "error" |
| 89 | - :info -> "success" |
| 90 | - end |
| 91 | - end) |
| 92 | - |> assign_new(:id, fn -> "flash-#{assigns.kind}" end) |
| 93 | - |
| 94 | - ~H""" |
| 95 | - <.alert |
| 96 | - :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)} |
| 97 | - id={@id} |
| 98 | - phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")} |
| 99 | - role="alert" |
| 100 | - color={@color} |
| 101 | - class={[ |
| 102 | - "w-80 sm:w-96 z-50 rounded-lg p-3 ring-1", |
| 103 | - @direction == :top_left && "fixed top-2 left-2", |
| 104 | - @direction == :top_right && "fixed top-2 right-2", |
| 105 | - @direction == :bottom_left && "fixed bottom-2 left-2", |
| 106 | - @direction == :bottom_right && "fixed bottom-2 right-2", |
| 107 | - @class |
| 108 | - ]} |
| 109 | - {@rest} |
| 110 | - > |
| 111 | - <div :if={@title} class="flex items-center"> |
| 112 | - <.icon class="mr-2" name={get_icon(@color)} /> |
| 113 | - <div class="flex flex-col"> |
| 114 | - <h3 class="font-bold">{@title}</h3> |
| 115 | - <span class="text-xs">{msg}</span> |
| 116 | - </div> |
| 117 | - </div> |
| 118 | - <.icon :if={!@title} class="mr-2" name={get_icon(@color)} /> |
| 119 | - <span :if={!@title}>{msg}</span> |
| 120 | - <button type="button" class="group absolute top-1 right-1 p-2" aria-label="close"> |
| 121 | - <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" /> |
| 122 | - </button> |
| 123 | - </.alert> |
| 124 | - """ |
| 125 | - end |
| 126 | - |
| 127 10 | attr :id, :string, default: nil, doc: "the optional id of alert container" |
| 128 11 | attr :class, :any, default: nil |
| 129 12 | attr :color, :string, values: ~w(info success warning error) |
| @@ -162,12 +45,6 @@ defmodule DaisyUIComponents.Alert do | |
| 162 45 | defp alert_direction("horizontal"), do: "alert-horizontal" |
| 163 46 | defp alert_direction(nil), do: nil |
| 164 47 | |
| 165 | - # Icon |
| 166 | - defp get_icon("warning"), do: "hero-exclamation-triangle" |
| 167 | - defp get_icon("success"), do: "hero-check-circle" |
| 168 | - defp get_icon("error"), do: "hero-x-circle" |
| 169 | - defp get_icon(_nil), do: "hero-exclamation-circle" |
| 170 | - |
| 171 48 | # Color |
| 172 49 | defp alert_color("info"), do: "alert-info" |
| 173 50 | defp alert_color("success"), do: "alert-success" |
| @@ -17,6 +17,7 @@ defmodule DaisyUIComponents.Button do | |
| 17 17 | """ |
| 18 18 | attr :class, :any, default: nil |
| 19 19 | attr :color, :string, values: colors() ++ ["neutral"] |
| 20 | + attr :variant, :string, values: colors() ++ ["neutral"] |
| 20 21 | attr :ghost, :boolean, default: false |
| 21 22 | attr :soft, :boolean, default: false |
| 22 23 | attr :dash, :boolean, default: false |
| @@ -31,13 +32,14 @@ defmodule DaisyUIComponents.Button do | |
| 31 32 | attr :wide, :boolean, default: false |
| 32 33 | attr :block, :boolean, default: false |
| 33 34 | attr :shape, :string, values: ~w(circle square) |
| 34 | - attr :rest, :global, include: ~w(form name value) |
| 35 | + attr :rest, :global, include: ~w(form href navigate patch method download name value disabled) |
| 35 36 | slot :inner_block, required: true |
| 36 37 | |
| 37 | - def button(assigns) do |
| 38 | + def button(%{rest: rest} = assigns) do |
| 38 39 | assigns = |
| 39 | - assign( |
| 40 | - assigns, |
| 40 | + assigns |
| 41 | + |> assign_new(:color, fn -> assigns[:variant] || assigns[:color] end) |
| 42 | + |> assign( |
| 41 43 | :class, |
| 42 44 | classes([ |
| 43 45 | "btn", |
| @@ -60,11 +62,19 @@ defmodule DaisyUIComponents.Button do | |
| 60 62 | ]) |
| 61 63 | ) |
| 62 64 | |
| 63 | - ~H""" |
| 64 | - <button class={@class} {@rest}> |
| 65 | - {render_slot(@inner_block)} |
| 66 | - </button> |
| 67 | - """ |
| 65 | + if rest[:href] || rest[:navigate] || rest[:patch] do |
| 66 | + ~H""" |
| 67 | + <.link class={@class} {@rest}> |
| 68 | + {render_slot(@inner_block)} |
| 69 | + </.link> |
| 70 | + """ |
| 71 | + else |
| 72 | + ~H""" |
| 73 | + <button class={@class} {@rest}> |
| 74 | + {render_slot(@inner_block)} |
| 75 | + </button> |
| 76 | + """ |
| 77 | + end |
| 68 78 | end |
| 69 79 | |
| 70 80 | # Color |
Loading more files…