Packages

daisy_ui_components

0.1.1
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

53 files changed
+2145 additions
-2137 deletions
  @@ -9,7 +9,7 @@
9 9 [![HexDocs.pm](https://img.shields.io/badge/Docs-HexDocs-blue)](https://hexdocs.pm/daisy_ui_components)
10 10 [![License](https://img.shields.io/hexpm/l/daisy_ui_components.svg)](https://hex.pm/packages/daisy_ui_components)
11 11
12 - This project brings [Daisy UI](https://daisyui.com/) componets into your Phoenix LiveView project.
12 + This project brings [Daisy UI](https://daisyui.com/) components into your Phoenix LiveView project.
13 13
14 14 This project is still experimental, expect breaking changes in future.
15 15
  @@ -50,6 +50,12 @@ module.exports = {
50 50 }
51 51 ```
52 52
53 + Add error translation function to your app's config.exs file. This function is used to translate ecto changeset errors
54 +
55 + ```elixir
56 + config :daisy_ui_components, translate_function: &MyAppWeb.CoreComponents.translate_error/1
57 + ```
58 +
53 59 And now this library is ready. To have the components available under liveview, import the components on the web folder
54 60
55 61 ```elixir
  @@ -62,7 +68,7 @@ defp html_helpers do
62 68 import DaisyUIComponents.CoreComponents
63 69
64 70 # import YourProjectWeb.CoreComponents
65 - # Importing CoreComponents from your project is no longer necessary since
71 + # Importing CoreComponents from your project is no longer necessary since
66 72 # DaisyUIComponents.CoreComponents offers a drop in replacement
67 73 # If you still want to use your own core components, remember to delete the default components generated from phoenix in this file
68 74 # ...
  @@ -74,7 +80,7 @@ Check the [Core Components](./lib/daisy_ui_components/core_components.ex) implem
74 80
75 81 ## Components
76 82
77 - List of available components.
83 + List of available components.
78 84
79 85 - [Alert](https://daisyui.com/components/alert) âś…
80 86 - [Artboard](https://daisyui.com/components/artboard) ❌
  @@ -129,4 +135,4 @@ List of available components.
129 135
130 136 âś…: Implemented
131 137
132 - ❌: To be implemented
\ No newline at end of file
138 + ❌: To be implemented
  @@ -3,28 +3,32 @@
3 3 {<<"description">>,<<"DaisyUI component library for LiveView">>}.
4 4 {<<"elixir">>,<<"~> 1.14">>}.
5 5 {<<"files">>,
6 - [<<"lib">>,<<"lib/daisyui_components">>,
7 - <<"lib/daisyui_components/navbar.ex">>,<<"lib/daisyui_components/join.ex">>,
8 - <<"lib/daisyui_components/avatar.ex">>,
9 - <<"lib/daisyui_components/badge.ex">>,
10 - <<"lib/daisyui_components/tooltip.ex">>,
11 - <<"lib/daisyui_components/icon.ex">>,
12 - <<"lib/daisyui_components/core_components.ex">>,
13 - <<"lib/daisyui_components/textarea.ex">>,
14 - <<"lib/daisyui_components/text_input.ex">>,
15 - <<"lib/daisyui_components/drawer.ex">>,
16 - <<"lib/daisyui_components/select.ex">>,
17 - <<"lib/daisyui_components/pagination.ex">>,
18 - <<"lib/daisyui_components/table.ex">>,
19 - <<"lib/daisyui_components/component.ex">>,
20 - <<"lib/daisyui_components/button_group.ex">>,
21 - <<"lib/daisyui_components/alert.ex">>,
22 - <<"lib/daisyui_components/checkbox.ex">>,
23 - <<"lib/daisyui_components/card.ex">>,<<"lib/daisyui_components/utils.ex">>,
24 - <<"lib/daisyui_components/button.ex">>,<<"lib/daisyui_components/form.ex">>,
25 - <<"lib/daisyui_components/input.ex">>,<<"lib/daisyui_components/stat.ex">>,
26 - <<"lib/daisyui_components/modal.ex">>,<<"lib/daisyui_components.ex">>,
27 - <<".formatter.exs">>,<<"mix.exs">>,<<"README.md">>,<<"LICENSE">>]}.
6 + [<<"lib">>,<<"lib/daisy_ui_components.ex">>,<<"lib/daisy_ui_components">>,
7 + <<"lib/daisy_ui_components/navbar.ex">>,
8 + <<"lib/daisy_ui_components/join.ex">>,
9 + <<"lib/daisy_ui_components/avatar.ex">>,
10 + <<"lib/daisy_ui_components/badge.ex">>,
11 + <<"lib/daisy_ui_components/tooltip.ex">>,
12 + <<"lib/daisy_ui_components/icon.ex">>,
13 + <<"lib/daisy_ui_components/core_components.ex">>,
14 + <<"lib/daisy_ui_components/textarea.ex">>,
15 + <<"lib/daisy_ui_components/text_input.ex">>,
16 + <<"lib/daisy_ui_components/drawer.ex">>,
17 + <<"lib/daisy_ui_components/select.ex">>,
18 + <<"lib/daisy_ui_components/pagination.ex">>,
19 + <<"lib/daisy_ui_components/table.ex">>,
20 + <<"lib/daisy_ui_components/component.ex">>,
21 + <<"lib/daisy_ui_components/button_group.ex">>,
22 + <<"lib/daisy_ui_components/alert.ex">>,
23 + <<"lib/daisy_ui_components/checkbox.ex">>,
24 + <<"lib/daisy_ui_components/card.ex">>,
25 + <<"lib/daisy_ui_components/utils.ex">>,
26 + <<"lib/daisy_ui_components/button.ex">>,
27 + <<"lib/daisy_ui_components/form.ex">>,
28 + <<"lib/daisy_ui_components/input.ex">>,
29 + <<"lib/daisy_ui_components/stat.ex">>,
30 + <<"lib/daisy_ui_components/modal.ex">>,<<".formatter.exs">>,<<"mix.exs">>,
31 + <<"README.md">>,<<"LICENSE">>]}.
28 32 {<<"licenses">>,[<<"Apache-2.0">>]}.
29 33 {<<"links">>,
30 34 [{<<"GitHub">>,<<"https://github.com/phcurado/daisy_ui_components">>}]}.
  @@ -34,5 +38,5 @@
34 38 {<<"name">>,<<"phoenix_live_view">>},
35 39 {<<"optional">>,false},
36 40 {<<"repository">>,<<"hexpm">>},
37 - {<<"requirement">>,<<"~> 0.18 or ~> 0.19">>}]]}.
38 - {<<"version">>,<<"0.1.0">>}.
41 + {<<"requirement">>,<<"~> 0.20.14">>}]]}.
42 + {<<"version">>,<<"0.1.1">>}.
  @@ -0,0 +1,34 @@
1 + defmodule DaisyUIComponents do
2 + @external_resource "README.md"
3 +
4 + @moduledoc @external_resource
5 + |> File.read!()
6 + |> String.split("<!-- MDOC -->")
7 + |> Enum.fetch!(1)
8 +
9 + defmacro __using__(_) do
10 + quote do
11 + import DaisyUIComponents.Alert
12 + import DaisyUIComponents.Avatar
13 + import DaisyUIComponents.Badge
14 + import DaisyUIComponents.Button
15 + import DaisyUIComponents.ButtonGroup
16 + import DaisyUIComponents.Card
17 + import DaisyUIComponents.Checkbox
18 + import DaisyUIComponents.Drawer
19 + import DaisyUIComponents.Form
20 + import DaisyUIComponents.Icon
21 + import DaisyUIComponents.Input
22 + import DaisyUIComponents.Join
23 + import DaisyUIComponents.Modal
24 + import DaisyUIComponents.Navbar
25 + import DaisyUIComponents.Pagination
26 + import DaisyUIComponents.Select
27 + import DaisyUIComponents.Stat
28 + import DaisyUIComponents.Table
29 + import DaisyUIComponents.TextInput
30 + import DaisyUIComponents.Textarea
31 + import DaisyUIComponents.Tooltip
32 + end
33 + end
34 + end
  @@ -0,0 +1,160 @@
1 + defmodule DaisyUIComponents.Alert do
2 + @moduledoc """
3 + Alert component
4 +
5 + https://daisyui.com/components/alert
6 +
7 +
8 + """
9 +
10 + use DaisyUIComponents.Component
11 +
12 + import DaisyUIComponents.Icon
13 +
14 + alias Phoenix.LiveView.JS
15 +
16 + @doc """
17 + Shows the flash group with standard titles and content.
18 +
19 + ## Examples
20 +
21 + <.flash_group flash={@flash} />
22 + """
23 + attr :flash, :map, required: true, doc: "the map of flash messages"
24 + attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
25 +
26 + attr :direction, :atom,
27 + values: [:top_left, :top_right, :bottom_left, :bottom_right],
28 + default: :top_right
29 +
30 + def flash_group(assigns) do
31 + ~H"""
32 + <div id={@id}>
33 + <.flash kind={:info} direction={@direction} title="Success!" flash={@flash} />
34 + <.flash kind={:error} direction={@direction} title="Error!" flash={@flash} />
35 + <.flash
36 + id="client-error"
37 + class="hidden"
38 + kind={:error}
39 + direction={@direction}
40 + title={translate("We can't find the internet")}
41 + phx-disconnected={show(".phx-client-error #client-error")}
42 + phx-connected={hide("#client-error")}
43 + >
44 + Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
45 + </.flash>
46 +
47 + <.flash
48 + id="server-error"
49 + class="hidden"
50 + kind={:error}
51 + title="Something went wrong!"
52 + phx-disconnected={show(".phx-server-error #server-error")}
53 + phx-connected={hide("#server-error")}
54 + >
55 + Hang in there while we get back on track
56 + <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
57 + </.flash>
58 + </div>
59 + """
60 + end
61 +
62 + @doc """
63 + Renders flash notices.
64 +
65 + ## Examples
66 +
67 + <.flash kind={:info} flash={@flash} />
68 + <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
69 + """
70 + attr :id, :string, doc: "the optional id of flash container"
71 + attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
72 + attr :title, :string, default: nil
73 + attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
74 + attr :class, :string, default: nil
75 +
76 + attr :direction, :atom,
77 + values: [:top_left, :top_right, :bottom_left, :bottom_right],
78 + default: :top_right
79 +
80 + attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
81 +
82 + slot :inner_block, doc: "the optional inner block that renders the flash message"
83 +
84 + def flash(%{kind: kind} = assigns) do
85 + assigns =
86 + assigns
87 + |> assign_new(:color, fn ->
88 + case kind do
89 + :error -> "error"
90 + :info -> "success"
91 + end
92 + end)
93 + |> assign_new(:id, fn -> "flash-#{assigns.kind}" end)
94 +
95 + ~H"""
96 + <.alert
97 + :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
98 + id={@id}
99 + phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
100 + role="alert"
101 + title={@title}
102 + color={@color}
103 + class={[
104 + "w-80 sm:w-96 z-50 rounded-lg p-3 ring-1",
105 + @direction == :top_left && "fixed top-2 left-2",
106 + @direction == :top_right && "fixed top-2 right-2",
107 + @direction == :bottom_left && "fixed bottom-2 left-2",
108 + @direction == :bottom_right && "fixed bottom-2 right-2",
109 + @class
110 + ]}
111 + {@rest}
112 + >
113 + <.icon name={get_icon(@color)} />
114 + <%= msg %>
115 + <button type="button" class="group absolute top-1 right-1 p-2" aria-label="close">
116 + <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
117 + </button>
118 + </.alert>
119 + """
120 + end
121 +
122 + attr :class, :any, default: nil
123 + attr :color, :string, values: ~w(info success warning error)
124 + attr :rest, :global
125 + slot :inner_block
126 +
127 + def alert(assigns) do
128 + assigns =
129 + assign(
130 + assigns,
131 + :class,
132 + join_classes(
133 + [
134 + "alert",
135 + alert_color(assigns[:color])
136 + ],
137 + assigns.class
138 + )
139 + )
140 +
141 + ~H"""
142 + <div class={@class}>
143 + <%= render_slot(@inner_block) %>
144 + </div>
145 + """
146 + end
147 +
148 + # Icon
149 + defp get_icon("warning"), do: "hero-exclamation-triangle"
150 + defp get_icon("success"), do: "hero-check-circle"
151 + defp get_icon("error"), do: "hero-x-circle"
152 + defp get_icon(_nil), do: "hero-exclamation-circle"
153 +
154 + # Color
155 + defp alert_color("info"), do: "alert-info"
156 + defp alert_color("success"), do: "alert-success"
157 + defp alert_color("warning"), do: "alert-warning"
158 + defp alert_color("error"), do: "alert-error"
159 + defp alert_color(_color), do: nil
160 + end
  @@ -0,0 +1,47 @@
1 + defmodule DaisyUIComponents.Avatar do
2 + @moduledoc """
3 + Avatar component
4 +
5 + https://daisyui.com/components/avatar
6 +
7 +
8 + """
9 +
10 + use DaisyUIComponents.Component
11 +
12 + attr :online, :boolean, default: false
13 + attr :offline, :boolean, default: false
14 + attr :rest, :global
15 + slot :inner_block
16 +
17 + def avatar(assigns) do
18 + assigns =
19 + join_classes_with_rest(assigns, [
20 + "avatar",
21 + add_online_or_offline_class(assigns[:online], assigns[:offline])
22 + ])
23 +
24 + ~H"""
25 + <div {@rest}>
26 + <%= render_slot(@inner_block) %>
27 + </div>
28 + """
29 + end
30 +
31 + attr :rest, :global
32 + slot :inner_block
33 +
34 + def avatar_group(assigns) do
35 + assigns = join_classes_with_rest(assigns, ["avatar-group"])
36 +
37 + ~H"""
38 + <div {@rest}>
39 + <%= render_slot(@inner_block) %>
40 + </div>
41 + """
42 + end
43 +
44 + defp add_online_or_offline_class(true = _online, _offline), do: "online"
45 + defp add_online_or_offline_class(_online, true = _offline), do: "offline"
46 + defp add_online_or_offline_class(_online, _offline), do: nil
47 + end
Loading more files…