Packages

daisy_ui_components

0.7.0
0.9.7 0.9.6 0.9.5 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.7 0.8.7-rc.0 0.8.6 0.8.5 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.6 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.0 0.5.0 0.4.3 0.4.2 0.4.1 0.4.0 0.3.0 0.2.1 0.2.0 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

DaisyUI component library for LiveView

HexDocs

Current section

41 Versions

Jump to
Readme
41 Versions
1 Dependency
Dependants
Files
Activity
Hide whitespace

Compare versions

16 files changed
+405 additions
-170 deletions
  @@ -1,4 +1,4 @@
1 - # DaisyUI Components
1 + # 🌻 DaisyUI Components
2 2
3 3 [![CI](https://github.com/phcurado/daisy_ui_components/actions/workflows/ci.yml/badge.svg)](https://github.com/phcurado/daisy_ui_components/actions/workflows/ci.yml)
4 4 [![Coverage Status](https://coveralls.io/repos/github/phcurado/daisy_ui_components/badge.svg?branch=main)](https://coveralls.io/github/phcurado/daisy_ui_components?branch=main)
  @@ -6,13 +6,17 @@
6 6 [![HexDocs.pm](https://img.shields.io/badge/Docs-HexDocs-blue)](https://hexdocs.pm/daisy_ui_components)
7 7 [![License](https://img.shields.io/hexpm/l/daisy_ui_components.svg)](https://hex.pm/packages/daisy_ui_components)
8 8
9 + 📚 [Storybook](https://daisy-ui-components-site.fly.dev/storybook/welcome)
10 +
9 11 ---
10 12
11 - This project brings [Daisy UI](https://daisyui.com/) components into your Phoenix LiveView project.
13 + <a href='https://ko-fi.com/R5R11AIF9P' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
12 14
13 - This project is still experimental, expect breaking changes in future.
15 + This project brings [DaisyUI](https://daisyui.com/) components into your [Phoenix](https://www.phoenixframework.org) project.
14 16
15 - ## Installation
17 + ![Phoenix DaisyUI Image](demo.png)
18 +
19 + ## 📦 Installation
16 20
17 21 <!-- MDOC -->
18 22
  @@ -21,7 +25,7 @@ Reference this repository on your `mix.exs` file to start using.
21 25 ```elixir
22 26 def deps do
23 27 [
24 - {:daisy_ui_components, "~> 0.6"}
28 + {:daisy_ui_components, "~> 0.7"}
25 29 ]
26 30 end
27 31 ```
  @@ -91,18 +95,18 @@ Finally, in order to not conflict with some of the DaisyUI default styles, remov
91 95 <body>
92 96 ```
93 97
94 - ## Core Components
98 + ## ⭐ Core Components
95 99
96 100 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.
97 101 All the components should be compatible, styled with DaisyUI.
98 102
99 103 If you encounter any compatibility issues, feel free to open an `issue` or submit a `pull request`, and I'll take a look.
100 104
101 - ## Liveview 1.0
105 + ## 🤖 Liveview 1.0
102 106
103 - 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/main/CHANGELOG.md#backwards-incompatible-changes-for-10).
107 + 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).
104 108
105 - ## NPM setup
109 + ## 📦 NPM setup
106 110
107 111 Since DaisyUI requires `npm` to install, it's also necessary to configure in your project the asset pipeline to use the npm commands.
108 112
  @@ -114,13 +118,7 @@ In your `mix.exs` file, add the npm command in your assets setup:
114 118 - "esbuild.install --if-missing"
115 119 + "esbuild.install --if-missing",
116 120 + "cmd npm install --prefix assets"
117 - ],
118 - "assets.deploy": [
119 - "tailwind my_project --minify",
120 - "esbuild my_project --minify",
121 - + "npm --prefix ./assets ci --progress=false --no-audit --loglevel=error",
122 - "phx.digest"
123 - ],
121 + ]
124 122 ```
125 123
126 124 and if you are deploying the application with `Docker`, run the npm scripts there too:
  @@ -130,9 +128,16 @@ and if you are deploying the application with `Docker`, run the npm scripts ther
130 128 -RUN apt-get update -y && apt-get install -y build-essential git \
131 129 +RUN apt-get update -y && apt-get install -y build-essential git npm \
132 130 && apt-get clean && rm -f /var/lib/apt/lists/*_*
131 +
132 + # ...
133 + RUN mix deps.compile
134 +
135 + # build assets
136 + +COPY assets/package.json assets/package-lock.json ./assets/
137 + +RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
133 138 ```
134 139
135 - ## Components
140 + ## ⚡️ Components
136 141
137 142 List of available components.
138 143
  @@ -152,8 +157,8 @@ List of available components.
152 157 | ----------------------------------------------------- | ------ | --------- |
153 158 | [Accordion](https://daisyui.com/components/accordion) | ❌ | ❌ |
154 159 | [Avatar](https://daisyui.com/components/avatar) | ✅ | ✅ |
155 - | [Badge](https://daisyui.com/components/badge) | ✅ | ❌ |
156 - | [Card](https://daisyui.com/components/card) | ✅ | ❌ |
160 + | [Badge](https://daisyui.com/components/badge) | ✅ | ✅ |
161 + | [Card](https://daisyui.com/components/card) | ✅ | ✅ |
157 162 | [Carousel](https://daisyui.com/components/carousel) | ❌ | ❌ |
158 163 | [Chat bubble](https://daisyui.com/components/chat) | ❌ | ❌ |
159 164 | [Collapse](https://daisyui.com/components/collapse) | ❌ | ❌ |
  @@ -171,9 +176,9 @@ List of available components.
171 176 | [Breadcrumbs](https://daisyui.com/components/breadcrumbs) | ✅ | ✅ |
172 177 | [Bottom navigation](https://daisyui.com/components/bottom-navigation/) | ❌ | ❌ |
173 178 | [Link](https://daisyui.com/components/link) | ❌ | ❌ |
174 - | [Menu](https://daisyui.com/components/menu) | ❌ | ❌ |
175 - | [Navbar](https://daisyui.com/components/navbar) | ✅ | ❌ |
176 - | [Pagination](https://daisyui.com/components/pagination) | ✅ | ❌ |
179 + | [Menu](https://daisyui.com/components/menu) | ✅ | ✅ |
180 + | [Navbar](https://daisyui.com/components/navbar) | ✅ | ✅ |
181 + | [Pagination](https://daisyui.com/components/pagination) | ✅ | ✅ |
177 182 | [Steps](https://daisyui.com/components/steps) | ❌ | ❌ |
178 183 | [Tabs](https://daisyui.com/components/tab) | ❌ | ❌ |
179 184
  @@ -193,14 +198,14 @@ List of available components.
193 198
194 199 | Component | Status | Storybook |
195 200 | ------------------------------------------------------- | ------ | --------- |
196 - | [Checkbox](https://daisyui.com/components/checkbox) | ✅ | ❌ |
201 + | [Checkbox](https://daisyui.com/components/checkbox) | ✅ | ✅ |
197 202 | [File input](https://daisyui.com/components/file-input) | ❌ | ❌ |
198 - | [Radio](https://daisyui.com/components/radio) | ❌ | ❌ |
203 + | [Radio](https://daisyui.com/components/radio) | ✅ | ✅ |
199 204 | [Range](https://daisyui.com/components/range) | ✅ | ✅ |
200 205 | [Rating](https://daisyui.com/components/rating) | ❌ | ❌ |
201 - | [Select](https://daisyui.com/components/select) | ✅ | ❌ |
206 + | [Select](https://daisyui.com/components/select) | ✅ | ✅ |
202 207 | [Text Input](https://daisyui.com/components/input) | ✅ | ✅ |
203 - | [Textarea](https://daisyui.com/components/textarea) | ✅ | ❌ |
208 + | [Textarea](https://daisyui.com/components/textarea) | ✅ | ✅ |
204 209 | [Toggle](https://daisyui.com/components/toggle) | ✅ | ✅ |
205 210
206 211 ### Layout
  @@ -234,10 +239,10 @@ List of available components.
234 239 | Header | ✅ | ✅ |
235 240 | List | ✅ | ✅ |
236 241 | Simple Form | ✅ | ✅ |
237 - | Input | ✅ | ❌ |
242 + | Input | ✅ | ✅ |
238 243 | Table | ✅ | ✅ |
239 244
240 - ## Roadmap
245 + ## 🗺️ Roadmap
241 246
242 247 - Implement all components
243 248 - Document all components in Storybook
  @@ -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.6.0">>}.
4 + {<<"version">>,<<"0.7.0">>}.
5 5 {<<"description">>,<<"DaisyUI component library for LiveView">>}.
6 6 {<<"elixir">>,<<"~> 1.14">>}.
7 7 {<<"app">>,<<"daisy_ui_components">>}.
  @@ -26,6 +26,7 @@
26 26 <<"lib/daisy_ui_components/js_helpers.ex">>,
27 27 <<"lib/daisy_ui_components/range.ex">>,
28 28 <<"lib/daisy_ui_components/button.ex">>,
29 + <<"lib/daisy_ui_components/radio.ex">>,
29 30 <<"lib/daisy_ui_components/checkbox.ex">>,
30 31 <<"lib/daisy_ui_components/select.ex">>,
31 32 <<"lib/daisy_ui_components/alert.ex">>,
  @@ -23,10 +23,14 @@ defmodule DaisyUIComponents do
23 23 import DaisyUIComponents.Icon
24 24 import DaisyUIComponents.Input
25 25 import DaisyUIComponents.Join
26 + import DaisyUIComponents.JSHelpers
26 27 import DaisyUIComponents.List
28 + import DaisyUIComponents.Loading
29 + import DaisyUIComponents.Menu
27 30 import DaisyUIComponents.Modal
28 31 import DaisyUIComponents.Navbar
29 32 import DaisyUIComponents.Pagination
33 + import DaisyUIComponents.Radio
30 34 import DaisyUIComponents.Range
31 35 import DaisyUIComponents.Select
32 36 import DaisyUIComponents.Stat
  @@ -36,7 +40,6 @@ defmodule DaisyUIComponents do
36 40 import DaisyUIComponents.Textarea
37 41 import DaisyUIComponents.Toggle
38 42 import DaisyUIComponents.Tooltip
39 - import DaisyUIComponents.Loading
40 43 end
41 44 end
42 45 end
  @@ -17,7 +17,7 @@ defmodule DaisyUIComponents.Button do
17 17 <.button>Send!</.button>
18 18 <.button phx-click="go" class="ml-2">Send!</.button>
19 19 """
20 - attr :class, :string, default: nil
20 + attr :class, :any, default: nil
21 21 attr :color, :string, values: colors() ++ ["neutral"]
22 22 attr :ghost, :boolean, default: false
23 23 attr :link, :boolean, default: false
  @@ -36,23 +36,27 @@ defmodule DaisyUIComponents.Button do
36 36
37 37 def button(assigns) do
38 38 assigns =
39 - assign(assigns, :class, [
40 - "btn",
41 - btn_color(assigns[:color]),
42 - maybe_add_class(assigns[:ghost], "btn-ghost"),
43 - maybe_add_class(assigns[:link], "btn-link"),
44 - maybe_add_class(assigns[:outline], "btn-outline"),
45 - maybe_add_class(assigns[:active], "btn-active"),
46 - maybe_add_class(assigns[:disabled], "btn-disabled"),
47 - maybe_add_class(assigns[:glass], "btn-glass"),
48 - maybe_add_class(assigns[:loading], "loading"),
49 - maybe_add_class(assigns[:wide], "btn-wide"),
50 - maybe_add_class(assigns[:block], "btn-block"),
51 - maybe_add_class(assigns[:no_animation], "no-animation"),
52 - btn_size(assigns[:size]),
53 - btn_shape(assigns[:shape]),
54 - assigns.class
55 - ])
39 + assign(
40 + assigns,
41 + :class,
42 + classes([
43 + "btn",
44 + btn_color(assigns[:color]),
45 + maybe_add_class(assigns[:ghost], "btn-ghost"),
46 + maybe_add_class(assigns[:link], "btn-link"),
47 + maybe_add_class(assigns[:outline], "btn-outline"),
48 + maybe_add_class(assigns[:active], "btn-active"),
49 + maybe_add_class(assigns[:disabled], "btn-disabled"),
50 + maybe_add_class(assigns[:glass], "btn-glass"),
51 + maybe_add_class(assigns[:loading], "loading"),
52 + maybe_add_class(assigns[:wide], "btn-wide"),
53 + maybe_add_class(assigns[:block], "btn-block"),
54 + maybe_add_class(assigns[:no_animation], "no-animation"),
55 + btn_size(assigns[:size]),
56 + btn_shape(assigns[:shape]),
57 + assigns.class
58 + ])
59 + )
56 60
57 61 ~H"""
58 62 <button class={@class} {@rest}>
  @@ -7,34 +7,66 @@ defmodule DaisyUIComponents.Card do
7 7
8 8 use DaisyUIComponents.Component
9 9
10 + @modifiers ~w(side image_full)
11 + @paddings ~w(normal compact)
12 + @placements ~w(top bottom)
13 +
14 + def modifiers, do: @modifiers
15 + def paddings, do: @paddings
16 + def placements, do: @placements
17 +
10 18 attr :class, :any, default: nil
19 + attr :placement, :string, values: @placements
11 20 attr :bordered, :boolean, default: false
12 - attr :compact, :boolean, default: nil
13 - attr :image_full, :boolean, default: nil
14 - attr :side, :boolean, default: false
15 - attr :padding, :string, values: ~w(normal compact)
21 + attr :modifier, :string, values: @modifiers
22 + attr :padding, :string, values: @paddings
16 23 attr :rest, :global
24 +
25 + slot :card_title do
26 + attr :class, :any
27 + end
28 +
29 + slot :card_body do
30 + attr :class, :any
31 +
32 + slot :card_actions
33 + end
34 +
17 35 slot :inner_block
18 36
19 37 def card(assigns) do
20 38 assigns =
21 - assign(
22 - assigns,
39 + assigns
40 + |> assign(
23 41 :class,
24 42 classes([
25 43 "card",
26 44 maybe_add_class(assigns[:bordered], "card-bordered"),
27 - maybe_add_class(assigns[:compact], "card-compact"),
28 - maybe_add_class(assigns[:side], "card-side"),
29 - maybe_add_class(assigns[:image_full], "image-full"),
30 - add_class_from_padding(assigns[:padding]),
45 + card_modifier(assigns[:modifier]),
46 + card_padding(assigns[:padding]),
31 47 assigns.class
32 48 ])
33 49 )
50 + |> assign_new(:placement, fn -> nil end)
34 51
35 52 ~H"""
36 53 <div class={@class} {@rest}>
37 - {render_slot(@inner_block)}
54 + <%= if @placement in [nil, "top"] do %>
55 + {render_slot(@inner_block)}
56 + <% end %>
57 + <.card_body :for={card_body <- @card_body} class={Map.get(card_body, :class)}>
58 + <.card_title :for={card_title <- @card_title} class={Map.get(card_title, :class)}>
59 + {render_slot(card_title)}
60 + </.card_title>
61 + {render_slot(card_body)}
62 + <.card_actions :for={card_actions <- @card_actions} class={Map.get(card_actions, :class)}>
63 + {render_slot(card_actions)}
64 + </.card_actions>
65 + </.card_body>
66 +
67 + <%= if @placement == "bottom" do %>
68 + {render_slot(@inner_block)}
69 + <% end %>
38 70 </div>
39 71 """
40 72 end
  @@ -80,7 +112,13 @@ defmodule DaisyUIComponents.Card do
80 112 """
81 113 end
82 114
83 - defp add_class_from_padding("normal"), do: "card-normal"
84 - defp add_class_from_padding("compact"), do: "card-compact"
85 - defp add_class_from_padding(nil), do: nil
115 + # Padding
116 + defp card_padding("normal"), do: "card-normal"
117 + defp card_padding("compact"), do: "card-compact"
118 + defp card_padding(nil), do: nil
119 +
120 + # Modifier
121 + defp card_modifier("side"), do: "card-side"
122 + defp card_modifier("image_full"), do: "image-full"
123 + defp card_modifier(nil), do: nil
86 124 end
Loading more files…