Packages

daisy_ui_components

0.5.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
+266 additions
-352 deletions
  @@ -1,13 +1,13 @@
1 1 # DaisyUI Components
2 2
3 - <img src="daisyui-logomark-1024-1024.png" alt="Daisy UI Logo" width="150">
4 -
5 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)
6 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)
7 5 [![Hex.pm](https://img.shields.io/hexpm/v/daisy_ui_components)](https://hex.pm/packages/daisy_ui_components)
8 6 [![HexDocs.pm](https://img.shields.io/badge/Docs-HexDocs-blue)](https://hexdocs.pm/daisy_ui_components)
9 7 [![License](https://img.shields.io/hexpm/l/daisy_ui_components.svg)](https://hex.pm/packages/daisy_ui_components)
10 8
9 + ---
10 +
11 11 This project brings [Daisy UI](https://daisyui.com/) components into your Phoenix LiveView project.
12 12
13 13 This project is still experimental, expect breaking changes in future.
  @@ -21,7 +21,7 @@ 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.4"}
24 + {:daisy_ui_components, "~> 0.5"}
25 25 ]
26 26 end
27 27 ```
  @@ -66,13 +66,13 @@ defp html_helpers do
66 66 # Translation
67 67 use Gettext, backend: MyAppWeb.Gettext
68 68
69 - # Import DaisyUI components into your project
70 - use DaisyUIComponents
71 69 # HTML escaping functionality
72 70 import Phoenix.HTML
73 - # Phoenix CoreComponents replacement
74 - import DaisyUIComponents.CoreComponents
75 71
72 + # Import DaisyUI components into your project
73 + use DaisyUIComponents
74 +
75 + # Comment your own CoreComponents to not conflict with the defaults of this library.
76 76 # import YourProjectWeb.CoreComponents
77 77 # Importing CoreComponents from your project is no longer necessary since
78 78 # DaisyUIComponents.CoreComponents offers a drop in replacement
  @@ -82,16 +82,19 @@ defp html_helpers do
82 82 end
83 83 ```
84 84
85 - In order to not conflict with some of the DaisyUI default styles, remove the `bg-white` class in your `root.html.heex` file.
85 + Finally, in order to not conflict with some of the DaisyUI default styles, remove the `bg-white` class in your `root.html.heex` file.
86 86
87 87 ```heex
88 - # Change from this
88 + ## Change from this
89 89 <body class="bg-white">
90 - # to this
90 + ## to this
91 91 <body>
92 92 ```
93 93
94 - This library includes its own [Core Components](./lib/daisy_ui_components/core_components.ex) styled with DaisyUI. It is designed to replace your existing CoreComponents, ensuring that Phoenix generators continue to work seamlessly in your project.
94 + ## Core Components
95 +
96 + 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 + All the components should be compatible, styled with DaisyUI.
95 98
96 99 If you encounter any compatibility issues, feel free to open an `issue` or submit a `pull request`, and I'll take a look.
97 100
  @@ -102,58 +105,58 @@ This project is fully compatible with the Liveview 1.0 🔥. If you are using a
102 105 ## Components
103 106
104 107 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) | âś… |
105 160
106 - - [Alert](https://daisyui.com/components/alert) âś…
107 - - [Artboard](https://daisyui.com/components/artboard) ❌
108 - - [Avatar](https://daisyui.com/components/avatar) âś…
109 - - [Badge](https://daisyui.com/components/badge) âś…
110 - - [Bottom navigation](https://daisyui.com/components/botton-navigation) ❌
111 - - [Breadcrumbs](https://daisyui.com/components/breadcrumbs) âś…
112 - - [Button group](https://daisyui.com/components/button-group) âś…
113 - - [Button](https://daisyui.com/components/button) âś…
114 - - [Card](https://daisyui.com/components/card) âś…
115 - - [Carousel](https://daisyui.com/components/carousel) ❌
116 - - [Chat bubble](https://daisyui.com/components/chat) ❌
117 - - [Checkbox](https://daisyui.com/components/checkbox) âś…
118 - - [Collapse](https://daisyui.com/components/collapse) ❌
119 - - [Countdown](https://daisyui.com/components/countdown) ❌
120 - - [Divider](https://daisyui.com/components/divider) ❌
121 - - [Drawer](https://daisyui.com/components/drawer) ❌
122 - - [Dropdown](https://daisyui.com/components/dropdown) ❌
123 - - [File input](https://daisyui.com/components/file-input) ❌
124 - - [Footer](https://daisyui.com/components/footer) ❌
125 - - [Join](https://daisyui.com/components/join) âś…
126 - - [Hero](https://daisyui.com/components/hero) ❌
127 - - [Indicator](https://daisyui.com/components/indicator) ❌
128 - - [Input group](https://daisyui.com/components/input-group) ❌
129 - - [Text Input](https://daisyui.com/components/input) âś…
130 - - [Kbd](https://daisyui.com/components/kbd) ❌
131 - - [Link](https://daisyui.com/components/link) ❌
132 - - [Loading](https://daisyui.com/components/loading/) âś…
133 - - [Mask](https://daisyui.com/components/mask) ❌
134 - - [Menu](https://daisyui.com/components/menu) ❌
135 - - [Code mockup](https://daisyui.com/components/mockup-code) ❌
136 - - [Phone mockup](https://daisyui.com/components/mockup-phone) ❌
137 - - [Window mockup](https://daisyui.com/components/mockup-window) ❌
138 - - [Modal](https://daisyui.com/components/modal) âś…
139 - - [Navbar](https://daisyui.com/components/navbar) âś…
140 - - [Pagination](https://daisyui.com/components/pagination) âś…
141 - - [Progress](https://daisyui.com/components/progress) ❌
142 - - [Radial progress](https://daisyui.com/components/radial-progress) ❌
143 - - [Radio](https://daisyui.com/components/radio) ❌
144 - - [Range slider](https://daisyui.com/components/range) âś…
145 - - [Rating](https://daisyui.com/components/rating) ❌
146 - - [Select](https://daisyui.com/components/select) âś…
147 - - [Stack](https://daisyui.com/components/stack) ❌
148 - - [Stat](https://daisyui.com/components/stat) âś…
149 - - [Steps](https://daisyui.com/components/steps) ❌
150 - - [Swap](https://daisyui.com/components/swap) âś…
151 - - [Tabs](https://daisyui.com/components/tab) ❌
152 - - [Table](https://daisyui.com/components/table) âś…
153 - - [Textarea](https://daisyui.com/components/textarea) âś…
154 - - [Toast](https://daisyui.com/components/toast) ❌
155 - - [Toggle](https://daisyui.com/components/toggle) âś…
156 - - [Tooltip](https://daisyui.com/components/tooltip) âś…
157 -
158 - âś…: Implemented
159 - ❌: To be implemented
161 + âś…: Implementd
162 + ❌: To be implemened
  @@ -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.4.3">>}.
4 + {<<"version">>,<<"0.5.0">>}.
5 5 {<<"description">>,<<"DaisyUI component library for LiveView">>}.
6 6 {<<"elixir">>,<<"~> 1.14">>}.
7 7 {<<"app">>,<<"daisy_ui_components">>}.
  @@ -14,6 +14,7 @@
14 14 <<"lib/daisy_ui_components/textarea.ex">>,
15 15 <<"lib/daisy_ui_components/avatar.ex">>,
16 16 <<"lib/daisy_ui_components/pagination.ex">>,
17 + <<"lib/daisy_ui_components/list.ex">>,
17 18 <<"lib/daisy_ui_components/tooltip.ex">>,
18 19 <<"lib/daisy_ui_components/loading.ex">>,
19 20 <<"lib/daisy_ui_components/card.ex">>,<<"lib/daisy_ui_components/swap.ex">>,
  @@ -22,6 +23,7 @@
22 23 <<"lib/daisy_ui_components/badge.ex">>,
23 24 <<"lib/daisy_ui_components/table.ex">>,
24 25 <<"lib/daisy_ui_components/dropdown.ex">>,
26 + <<"lib/daisy_ui_components/js_helpers.ex">>,
25 27 <<"lib/daisy_ui_components/range.ex">>,
26 28 <<"lib/daisy_ui_components/button.ex">>,
27 29 <<"lib/daisy_ui_components/checkbox.ex">>,
  @@ -33,10 +35,9 @@
33 35 <<"lib/daisy_ui_components/icon.ex">>,
34 36 <<"lib/daisy_ui_components/text_input.ex">>,
35 37 <<"lib/daisy_ui_components/join.ex">>,
38 + <<"lib/daisy_ui_components/header.ex">>,
36 39 <<"lib/daisy_ui_components/input.ex">>,
37 - <<"lib/daisy_ui_components/core_components.ex">>,
38 - <<"lib/daisy_ui_components/stat.ex">>,
39 - <<"lib/daisy_ui_components/button_group.ex">>,
40 + <<"lib/daisy_ui_components/stat.ex">>,<<"lib/daisy_ui_components/back.ex">>,
40 41 <<"lib/daisy_ui_components.ex">>,<<".formatter.exs">>,<<"mix.exs">>,
41 42 <<"README.md">>,<<"LICENSE">>]}.
42 43 {<<"requirements">>,
  @@ -10,18 +10,20 @@ defmodule DaisyUIComponents do
10 10 quote do
11 11 import DaisyUIComponents.Alert
12 12 import DaisyUIComponents.Avatar
13 + import DaisyUIComponents.Back
13 14 import DaisyUIComponents.Badge
14 15 import DaisyUIComponents.Breadcrumbs
15 16 import DaisyUIComponents.Button
16 - import DaisyUIComponents.ButtonGroup
17 17 import DaisyUIComponents.Card
18 18 import DaisyUIComponents.Checkbox
19 19 import DaisyUIComponents.Drawer
20 20 import DaisyUIComponents.Dropdown
21 21 import DaisyUIComponents.Form
22 + import DaisyUIComponents.Header
22 23 import DaisyUIComponents.Icon
23 24 import DaisyUIComponents.Input
24 25 import DaisyUIComponents.Join
26 + import DaisyUIComponents.List
25 27 import DaisyUIComponents.Modal
26 28 import DaisyUIComponents.Navbar
27 29 import DaisyUIComponents.Pagination
  @@ -9,6 +9,7 @@ defmodule DaisyUIComponents.Alert do
9 9
10 10 use DaisyUIComponents.Component
11 11
12 + import DaisyUIComponents.JSHelpers
12 13 import DaisyUIComponents.Icon
13 14
14 15 alias Phoenix.LiveView.JS
  @@ -3,13 +3,12 @@ defmodule DaisyUIComponents.Avatar do
3 3 Avatar component
4 4
5 5 https://daisyui.com/components/avatar
6 -
7 -
8 6 """
9 7
10 8 use DaisyUIComponents.Component
11 9
12 10 attr :class, :any, default: nil
11 + attr :placeholder, :boolean, default: false
13 12 attr :online, :boolean, default: false
14 13 attr :offline, :boolean, default: false
15 14 attr :rest, :global
  @@ -23,6 +22,7 @@ defmodule DaisyUIComponents.Avatar do
23 22 classes([
24 23 "avatar",
25 24 add_online_or_offline_class(assigns[:online], assigns[:offline]),
25 + maybe_add_class(assigns.placeholder, "placeholder"),
26 26 assigns.class
27 27 ])
28 28 )
Loading more files…