Packages

daisy_ui_components

0.6.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

12 files changed
+300 additions
-100 deletions
  @@ -21,14 +21,14 @@ Reference this repository on your `mix.exs` file to start using.
21 21 ```elixir
22 22 def deps do
23 23 [
24 - {:daisy_ui_components, "~> 0.5"}
24 + {:daisy_ui_components, "~> 0.6"}
25 25 ]
26 26 end
27 27 ```
28 28
29 29 Add through `npm` the daisy UI package inside your phoenix application:
30 30
31 - ```
31 + ```bash
32 32 cd assets
33 33 npm i -D daisyui@latest
34 34 ```
  @@ -102,61 +102,143 @@ If you encounter any compatibility issues, feel free to open an `issue` or submi
102 102
103 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).
104 104
105 + ## NPM setup
106 +
107 + Since DaisyUI requires `npm` to install, it's also necessary to configure in your project the asset pipeline to use the npm commands.
108 +
109 + In your `mix.exs` file, add the npm command in your assets setup:
110 +
111 + ```diff
112 + "assets.setup": [
113 + "tailwind.install --if-missing",
114 + - "esbuild.install --if-missing"
115 + + "esbuild.install --if-missing",
116 + + "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 + ],
124 + ```
125 +
126 + and if you are deploying the application with `Docker`, run the npm scripts there too:
127 +
128 + ```diff
129 + # install build dependencies
130 + -RUN apt-get update -y && apt-get install -y build-essential git \
131 + +RUN apt-get update -y && apt-get install -y build-essential git npm \
132 + && apt-get clean && rm -f /var/lib/apt/lists/*_*
133 + ```
134 +
105 135 ## Components
106 136
107 137 List of available components.
108 - | Component | Status |
109 - | ------------- | ------------- |
110 - | [Alert](https://daisyui.com/components/alert) | âś… |
111 - | [Artboard](https://daisyui.com/components/artboard) |❌ |
112 - | [Avatar](https://daisyui.com/components/avatar) | âś… |
113 - | [Badge](https://daisyui.com/components/badge) | âś… |
114 - | [Bottom navigation](https://daisyui.com/components/botton-navigation) | ❌ |
115 - | [Breadcrumbs](https://daisyui.com/components/breadcrumbs) | âś… |
116 - | [Button](https://daisyui.com/components/button) | âś… |
117 - | [Card](https://daisyui.com/components/card) | âś… |
118 - | [Carousel](https://daisyui.com/components/carousel) | ❌ |
119 - | [Chat bubble](https://daisyui.com/components/chat) | ❌ |
120 - | [Checkbox](https://daisyui.com/components/checkbox) | âś… |
121 - | [Collapse](https://daisyui.com/components/collapse) | ❌ |
122 - | [Countdown](https://daisyui.com/components/countdown) | ❌ |
123 - | [Divider](https://daisyui.com/components/divider) | ❌ |
124 - | [Drawer](https://daisyui.com/components/drawer) | ❌ |
125 - | [Dropdown](https://daisyui.com/components/dropdown) | ❌ |
126 - | [File input](https://daisyui.com/components/file-input) | ❌ |
127 - | [Footer](https://daisyui.com/components/footer) | ❌ |
128 - | [Join](https://daisyui.com/components/join) | âś… |
129 - | [Hero](https://daisyui.com/components/hero) | ❌ |
130 - | [Indicator](https://daisyui.com/components/indicator) | ❌ |
131 - | [Input group](https://daisyui.com/components/input-group) | ❌ |
132 - | [Text Input](https://daisyui.com/components/input) | âś… |
133 - | [Kbd](https://daisyui.com/components/kbd) | ❌ |
134 - | [Link](https://daisyui.com/components/link) | ❌ |
135 - | [Loading](https://daisyui.com/components/loading/) | âś… |
136 - | [Mask](https://daisyui.com/components/mask) | ❌ |
137 - | [Menu](https://daisyui.com/components/menu) | ❌ |
138 - | [Code mockup](https://daisyui.com/components/mockup-code) | ❌ |
139 - | [Phone mockup](https://daisyui.com/components/mockup-phone) | ❌ |
140 - | [Window mockup](https://daisyui.com/components/mockup-window) | ❌ |
141 - | [Modal](https://daisyui.com/components/modal) | âś… |
142 - | [Navbar](https://daisyui.com/components/navbar) | âś… |
143 - | [Pagination](https://daisyui.com/components/pagination) | âś… |
144 - | [Progress](https://daisyui.com/components/progress) | ❌ |
145 - | [Radial progress](https://daisyui.com/components/radial-progress) | ❌ |
146 - | [Radio](https://daisyui.com/components/radio) | ❌ |
147 - | [Range slider](https://daisyui.com/components/range) | âś… |
148 - | [Rating](https://daisyui.com/components/rating) | ❌ |
149 - | [Select](https://daisyui.com/components/select) | âś… |
150 - | [Stack](https://daisyui.com/components/stack) | ❌ |
151 - | [Stat](https://daisyui.com/components/stat) | âś… |
152 - | [Steps](https://daisyui.com/components/steps) | ❌ |
153 - | [Swap](https://daisyui.com/components/swap) |âś…
154 - | [Tabs](https://daisyui.com/components/tab) | ❌ |
155 - | [Table](https://daisyui.com/components/table) | âś… |
156 - | [Textarea](https://daisyui.com/components/textarea) | âś… |
157 - | [Toast](https://daisyui.com/components/toast) | ❌ |
158 - | [Toggle](https://daisyui.com/components/toggle) | âś… |
159 - | [Tooltip](https://daisyui.com/components/tooltip) | âś… |
160 138
161 - âś…: Implementd
162 - ❌: To be implemened
139 + ### Actions
140 +
141 + | Component | Status | Storybook |
142 + | -------------------------------------------------------------------- | ------ | --------- |
143 + | [Button](https://daisyui.com/components/button) | âś… | âś… |
144 + | [Dropdown](https://daisyui.com/components/dropdown) | âś… | âś… |
145 + | [Modal](https://daisyui.com/components/modal) | âś… | âś… |
146 + | [Swap](https://daisyui.com/components/swap) | âś… | âś… |
147 + | [Theme Controller](https://daisyui.com/components/theme-controller/) | ❌ | ❌ |
148 +
149 + ### Data Display
150 +
151 + | Component | Status | Storybook |
152 + | ----------------------------------------------------- | ------ | --------- |
153 + | [Accordion](https://daisyui.com/components/accordion) | ❌ | ❌ |
154 + | [Avatar](https://daisyui.com/components/avatar) | âś… | âś… |
155 + | [Badge](https://daisyui.com/components/badge) | ✅ | ❌ |
156 + | [Card](https://daisyui.com/components/card) | ✅ | ❌ |
157 + | [Carousel](https://daisyui.com/components/carousel) | ❌ | ❌ |
158 + | [Chat bubble](https://daisyui.com/components/chat) | ❌ | ❌ |
159 + | [Collapse](https://daisyui.com/components/collapse) | ❌ | ❌ |
160 + | [Countdown](https://daisyui.com/components/countdown) | ❌ | ❌ |
161 + | [Diff](https://daisyui.com/components/diff/) | ❌ | ❌ |
162 + | [Kbd](https://daisyui.com/components/kbd) | ❌ | ❌ |
163 + | [Stat](https://daisyui.com/components/stat) | ✅ | ❌ |
164 + | [Table](https://daisyui.com/components/table) | âś… | âś… |
165 + | [Timeline](https://daisyui.com/components/timeline/) | ❌ | ❌ |
166 +
167 + ### Navigation
168 +
169 + | Component | Status | Storybook |
170 + | ---------------------------------------------------------------------- | ------ | --------- |
171 + | [Breadcrumbs](https://daisyui.com/components/breadcrumbs) | âś… | âś… |
172 + | [Bottom navigation](https://daisyui.com/components/bottom-navigation/) | ❌ | ❌ |
173 + | [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) | ✅ | ❌ |
177 + | [Steps](https://daisyui.com/components/steps) | ❌ | ❌ |
178 + | [Tabs](https://daisyui.com/components/tab) | ❌ | ❌ |
179 +
180 + ### Feedback
181 +
182 + | Component | Status | Storybook |
183 + | ----------------------------------------------------------------- | ------ | --------- |
184 + | [Alert](https://daisyui.com/components/alert) | âś… | âś… |
185 + | [Loading](https://daisyui.com/components/loading/) | âś… | âś… |
186 + | [Progress](https://daisyui.com/components/progress) | ❌ | ❌ |
187 + | [Radial progress](https://daisyui.com/components/radial-progress) | ❌ | ❌ |
188 + | [Skeleton](https://daisyui.com/components/skeleton/) | ❌ | ❌ |
189 + | [Toast](https://daisyui.com/components/toast) | ❌ | ❌ |
190 + | [Tooltip](https://daisyui.com/components/tooltip) | ✅ | ❌ |
191 +
192 + ### Data Input
193 +
194 + | Component | Status | Storybook |
195 + | ------------------------------------------------------- | ------ | --------- |
196 + | [Checkbox](https://daisyui.com/components/checkbox) | ✅ | ❌ |
197 + | [File input](https://daisyui.com/components/file-input) | ❌ | ❌ |
198 + | [Radio](https://daisyui.com/components/radio) | ❌ | ❌ |
199 + | [Range](https://daisyui.com/components/range) | âś… | âś… |
200 + | [Rating](https://daisyui.com/components/rating) | ❌ | ❌ |
201 + | [Select](https://daisyui.com/components/select) | ✅ | ❌ |
202 + | [Text Input](https://daisyui.com/components/input) | âś… | âś… |
203 + | [Textarea](https://daisyui.com/components/textarea) | ✅ | ❌ |
204 + | [Toggle](https://daisyui.com/components/toggle) | âś… | âś… |
205 +
206 + ### Layout
207 +
208 + | Component | Status | Storybook |
209 + | ----------------------------------------------------- | ------ | --------- |
210 + | [Artboard](https://daisyui.com/components/artboard) | ❌ | ❌ |
211 + | [Divider](https://daisyui.com/components/divider) | ❌ | ❌ |
212 + | [Drawer](https://daisyui.com/components/drawer) | âś… | âś… |
213 + | [Footer](https://daisyui.com/components/footer) | ❌ | ❌ |
214 + | [Hero](https://daisyui.com/components/hero) | ❌ | ❌ |
215 + | [Indicator](https://daisyui.com/components/indicator) | ❌ | ❌ |
216 + | [Join](https://daisyui.com/components/join) | ✅ | ❌ |
217 + | [Mask](https://daisyui.com/components/mask) | ❌ | ❌ |
218 + | [Stack](https://daisyui.com/components/stack) | ❌ | ❌ |
219 +
220 + ### Mockup
221 +
222 + | Component | Status | Storybook |
223 + | --------------------------------------------------------- | ------ | --------- |
224 + | [Browser](https://daisyui.com/components/mockup-browser/) | ❌ | ❌ |
225 + | [Code](https://daisyui.com/components/mockup-code) | ❌ | ❌ |
226 + | [Phone](https://daisyui.com/components/mockup-phone) | ❌ | ❌ |
227 + | [Window](https://daisyui.com/components/mockup-window) | ❌ | ❌ |
228 +
229 + ### Phoenix Core Components
230 +
231 + | Component | Status | Storybook |
232 + | ----------- | ------ | --------- |
233 + | Flash | âś… | âś… |
234 + | Header | âś… | âś… |
235 + | List | âś… | âś… |
236 + | Simple Form | âś… | âś… |
237 + | Input | ✅ | ❌ |
238 + | Table | âś… | âś… |
239 +
240 + ## Roadmap
241 +
242 + - Implement all components
243 + - Document all components in Storybook
244 + - Create `mix` script to enable users to import the components of this library into their projects, sharing the same project namespace.
  @@ -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.5.0">>}.
4 + {<<"version">>,<<"0.6.0">>}.
5 5 {<<"description">>,<<"DaisyUI component library for LiveView">>}.
6 6 {<<"elixir">>,<<"~> 1.14">>}.
7 7 {<<"app">>,<<"daisy_ui_components">>}.
  @@ -34,7 +34,7 @@
34 34 <<"lib/daisy_ui_components/breadcrumbs.ex">>,
35 35 <<"lib/daisy_ui_components/icon.ex">>,
36 36 <<"lib/daisy_ui_components/text_input.ex">>,
37 - <<"lib/daisy_ui_components/join.ex">>,
37 + <<"lib/daisy_ui_components/menu.ex">>,<<"lib/daisy_ui_components/join.ex">>,
38 38 <<"lib/daisy_ui_components/header.ex">>,
39 39 <<"lib/daisy_ui_components/input.ex">>,
40 40 <<"lib/daisy_ui_components/stat.ex">>,<<"lib/daisy_ui_components/back.ex">>,
  @@ -3,7 +3,6 @@ defmodule DaisyUIComponents.Breadcrumbs do
3 3 Stat component
4 4
5 5 https://daisyui.com/components/stat
6 -
7 6 """
8 7
9 8 use DaisyUIComponents.Component
  @@ -3,14 +3,14 @@ defmodule DaisyUIComponents.Card do
3 3 Card component
4 4
5 5 https://daisyui.com/components/card/
6 -
7 -
8 6 """
9 7
10 8 use DaisyUIComponents.Component
11 9
12 10 attr :class, :any, default: nil
13 11 attr :bordered, :boolean, default: false
12 + attr :compact, :boolean, default: nil
13 + attr :image_full, :boolean, default: nil
14 14 attr :side, :boolean, default: false
15 15 attr :padding, :string, values: ~w(normal compact)
16 16 attr :rest, :global
  @@ -24,7 +24,9 @@ defmodule DaisyUIComponents.Card do
24 24 classes([
25 25 "card",
26 26 maybe_add_class(assigns[:bordered], "card-bordered"),
27 + maybe_add_class(assigns[:compact], "card-compact"),
27 28 maybe_add_class(assigns[:side], "card-side"),
29 + maybe_add_class(assigns[:image_full], "image-full"),
28 30 add_class_from_padding(assigns[:padding]),
29 31 assigns.class
30 32 ])
  @@ -3,43 +3,81 @@ defmodule DaisyUIComponents.Drawer do
3 3 Drawer component
4 4
5 5 https://daisyui.com/components/drawer
6 -
7 -
8 6 """
9 7
10 8 use DaisyUIComponents.Component
11 9
12 - import DaisyUIComponents.Icon
13 -
14 - attr :id, :string, required: true
10 + attr :selector_id, :string, required: true, doc: "identifier to toggle the modal"
15 11 attr :class, :any, default: nil
16 - slot :page_content
17 - slot :inner_block, required: true
12 + attr :open, :boolean, default: nil, doc: "Forces the drawer to be open"
13 + attr :end, :boolean, default: nil, doc: "Puts drawer to the right"
14 + attr :rest, :global
15 +
16 + slot :drawer_content do
17 + attr :class, :any
18 + end
19 +
20 + slot :drawer_side do
21 + attr :class, :any
22 + end
23 +
24 + slot :inner_block
18 25
19 26 def drawer(assigns) do
27 + assigns =
28 + assigns
29 + |> assign(
30 + :class,
31 + classes([
32 + "drawer",
33 + maybe_add_class(assigns[:open], "drawer-open"),
34 + maybe_add_class(assigns[:end], "drawer-end"),
35 + assigns.class
36 + ])
37 + )
38 +
20 39 ~H"""
21 - <div class={classes(["drawer", @class])}>
22 - <input id={@id} type="checkbox" class="drawer-toggle" />
23 - <div class="drawer-content flex flex-col">
24 - <label for={@id} class="btn btn-ghost lg:hidden justify-start ">
25 - <.icon name="hero-bars-3-center-left" class="h-5 w-5" />
26 - </label>
27 - {render_slot(@page_content)}
28 - </div>
40 + <div class={@class} {@rest}>
41 + <input id={@selector_id} type="checkbox" class="drawer-toggle" />
42 + {render_slot(@inner_block)}
43 + <.drawer_content
44 + :for={drawer_content <- @drawer_content}
45 + class={Map.get(drawer_content, :class)}
46 + >
47 + {render_slot(drawer_content)}
48 + </.drawer_content>
49 + <.drawer_side
50 + :for={drawer_side <- @drawer_side}
51 + class={Map.get(drawer_side, :class)}
52 + selector_id={@selector_id}
53 + >
54 + {render_slot(drawer_side)}
55 + </.drawer_side>
56 + </div>
57 + """
58 + end
59 +
60 + attr :class, :any, default: nil
61 + attr :rest, :global
62 + slot :inner_block
63 +
64 + def drawer_content(assigns) do
65 + ~H"""
66 + <div class={classes(["drawer-content", @class])} {@rest}>
29 67 {render_slot(@inner_block)}
30 68 </div>
31 69 """
32 70 end
33 71
34 - attr :drawer_id, :string, required: true
35 72 attr :class, :any, default: nil
36 -
37 - slot :inner_block, required: true
73 + attr :selector_id, :string, required: true, doc: "identifier to toggle the modal"
74 + attr :rest, :global
75 + slot :inner_block
38 76
39 77 def drawer_side(assigns) do
40 78 ~H"""
41 - <div class={classes(["drawer-side", @class])}>
42 - <label for={@drawer_id} class="drawer-overlay"></label>
79 + <div class={classes(["drawer-side", @class])} {@rest}>
80 + <label for={@selector_id} aria-label="close sidebar" class="drawer-overlay"></label>
43 81 {render_slot(@inner_block)}
44 82 </div>
45 83 """
Loading more files…