Packages

daisy_ui_components

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

7 files changed
+95 additions
-95 deletions
  @@ -2,7 +2,7 @@
2 2
3 3 <img src="daisyui-logomark-1024-1024.png" alt="Daisy UI Logo" width="150">
4 4
5 - [![CI](https://github.com/phcurado/daisy_ui_components/workflows/ci/badge.svg?branch=main)](https://github.com/phcurado/daisy_ui_components/actions?query=branch%3Amain+workflow%3Aci)
5 + [![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 6 [![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 7 [![Hex.pm](https://img.shields.io/hexpm/v/daisy_ui_components)](https://hex.pm/packages/daisy_ui_components)
8 8 [![HexDocs.pm](https://img.shields.io/badge/Docs-HexDocs-blue)](https://hexdocs.pm/daisy_ui_components)
  @@ -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.2"}
24 + {:daisy_ui_components, "~> 0.3"}
25 25 ]
26 26 end
27 27 ```
  @@ -44,6 +44,8 @@ module.exports = {
44 44 //...
45 45 plugins: [
46 46 //...
47 + // comment the tailwind form to not conflict with DaisyUI
48 + // require("@tailwindcss/forms"),
47 49 require("daisyui") <- // add daisyUI plugin
48 50 //...
49 51 ]
  @@ -61,10 +63,14 @@ And now this library is ready. To have the components available under liveview,
61 63 ```elixir
62 64 defp html_helpers do
63 65 quote do
66 + # Translation
67 + use Gettext, backend: MyAppWeb.Gettext
68 +
69 + # Import DaisyUI components into your project
64 70 use DaisyUIComponents
65 71 # HTML escaping functionality
66 72 import Phoenix.HTML
67 - # Core UI components from Live DaisyUI
73 + # Phoenix CoreComponents replacement
68 74 import DaisyUIComponents.CoreComponents
69 75
70 76 # import YourProjectWeb.CoreComponents
  @@ -76,9 +82,18 @@ defp html_helpers do
76 82 end
77 83 ```
78 84
79 - Check the [Core Components](./lib/daisy_ui_components/core_components.ex) implementation for replacing the default phoenix core components. The components have the same logic from Phoenix default generator, but now using DaisyUI styles.
85 + In order to not conflict with some of the DaisyUI default styles, remove the `bg-white` class in your `root.html.heex` file.
80 86
81 - There are some small differences on this project's Core components comparing to the default generated by Phoenix. For the `form` component, the input was named as `<.form_input />` to not conflict with the default `<.input />` html component made for daisyUI. This difference is fully shown in the form component section in our [storybook site](https://daisy-ui-components-site.fly.dev/storybook/core_components/form)
87 + ```heex
88 + # Change from this
89 + <body class="bg-white">
90 + # to this
91 + <body>
92 + ```
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.
95 +
96 + If you encounter any compatibility issues, feel free to open an `issue` or submit a `pull request`, and I'll take a look.
82 97
83 98 ## Liveview 1.0
  @@ -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.2.1">>}.
4 + {<<"version">>,<<"0.3.0">>}.
5 5 {<<"description">>,<<"DaisyUI component library for LiveView">>}.
6 6 {<<"elixir">>,<<"~> 1.14">>}.
7 7 {<<"app">>,<<"daisy_ui_components">>}.
  @@ -10,6 +10,8 @@ defmodule DaisyUIComponents.CoreComponents do
10 10 import DaisyUIComponents.Icon
11 11 import DaisyUIComponents.Table
12 12
13 + alias Phoenix.LiveView.JS
14 +
13 15 @doc """
14 16 Renders a simple form.
15 17
  @@ -179,4 +181,27 @@ defmodule DaisyUIComponents.CoreComponents do
179 181 </div>
180 182 """
181 183 end
184 +
185 + # show and hide functions from phoenix CoreComponents
186 + def show(js \\ %JS{}, selector) do
187 + JS.show(js,
188 + to: selector,
189 + time: 300,
190 + transition:
191 + {"transition-all transform ease-out duration-300",
192 + "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
193 + "opacity-100 translate-y-0 sm:scale-100"}
194 + )
195 + end
196 +
197 + def hide(js \\ %JS{}, selector) do
198 + JS.hide(js,
199 + to: selector,
200 + time: 200,
201 + transition:
202 + {"transition-all transform ease-in duration-200",
203 + "opacity-100 translate-y-0 sm:scale-100",
204 + "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"}
205 + )
206 + end
182 207 end
  @@ -10,7 +10,6 @@ defmodule DaisyUIComponents.Drawer do
10 10 use DaisyUIComponents.Component
11 11
12 12 import DaisyUIComponents.Icon
13 - import DaisyUIComponents.Input
14 13
15 14 attr :id, :string, required: true
16 15 attr :class, :any, default: nil
  @@ -20,7 +19,7 @@ defmodule DaisyUIComponents.Drawer do
20 19 def drawer(assigns) do
21 20 ~H"""
22 21 <div class={join_classes("drawer", @class)}>
23 - <.input id={@id} type="checkbox" class="drawer-toggle" />
22 + <input id={@id} type="checkbox" class="drawer-toggle" />
24 23 <div class="drawer-content flex flex-col">
25 24 <label for={@id} class="btn btn-ghost lg:hidden justify-start ">
26 25 <.icon name="hero-bars-3-center-left" class="h-5 w-5" />
  @@ -20,7 +20,8 @@ defmodule DaisyUIComponents.Input do
20 20 <.input name="my-input" type="checkbox" value="false" />
21 21 """
22 22 attr :id, :any, default: nil
23 -
23 + # attr :name, :any
24 + attr :label, :string
24 25 attr :value, :any
25 26
26 27 attr :type, :string,
  @@ -31,7 +32,9 @@ defmodule DaisyUIComponents.Input do
31 32 attr :field, Phoenix.HTML.FormField,
32 33 doc: "a form field struct retrieved from the form, for example: @form[:email]"
33 34
34 - attr :bordered, :boolean, default: false
35 + attr :class, :string, default: nil
36 + attr :bordered, :boolean, default: nil
37 + attr :errors, :list, default: []
35 38 attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
36 39 attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
37 40 attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
  @@ -43,12 +46,22 @@ defmodule DaisyUIComponents.Input do
43 46
44 47 slot :inner_block
45 48
46 - def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
47 - assigns
48 - |> assign(field: nil, id: assigns.id || field.id)
49 - |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
50 - |> assign_new(:value, fn -> field.value end)
51 - |> input()
49 + def input(%{field: %Phoenix.HTML.FormField{}} = assigns) do
50 + # by default inputs doesn't come bordered but
51 + # to match with phoenix defaults, we add border when it's a form field
52 + bordered =
53 + if assigns[:bordered] == nil do
54 + true
55 + else
56 + assigns[:bordered]
57 + end
58 +
59 + assigns = assign(assigns, :bordered, bordered)
60 +
61 + # If form field is sent, this components delegates it's implementation to the form_input component
62 + ~H"""
63 + <DaisyUIComponents.Form.form_input {assigns} />
64 + """
52 65 end
53 66
54 67 def input(%{type: "checkbox"} = assigns) do
  @@ -59,13 +72,13 @@ defmodule DaisyUIComponents.Input do
59 72 end)
60 73
61 74 ~H"""
62 - <.checkbox id={@id} checked={@checked} value={@value} {@rest} />
75 + <.checkbox id={@id} class={classes(@class)} checked={@checked} value={@value} {@rest} />
63 76 """
64 77 end
65 78
66 79 def input(%{type: "select"} = assigns) do
67 80 ~H"""
68 - <.select id={@id} bordered={@bordered} multiple={@multiple} {@rest}>
81 + <.select id={@id} class={classes(@class)} bordered={@bordered} multiple={@multiple} {@rest}>
69 82 <option :if={@prompt} value="">{@prompt}</option>
70 83 {Phoenix.HTML.Form.options_for_select(@options, @value)}
71 84 </.select>
  @@ -77,6 +90,7 @@ defmodule DaisyUIComponents.Input do
77 90 <.textarea
78 91 id={@id}
79 92 bordered={@bordered}
93 + class={classes(@class)}
80 94 value={Phoenix.HTML.Form.normalize_value(@type, @value)}
81 95 {@rest}
82 96 />
  @@ -85,7 +99,12 @@ defmodule DaisyUIComponents.Input do
85 99
86 100 def input(%{type: "range"} = assigns) do
87 101 ~H"""
88 - <.range id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} {@rest} />
102 + <.range
103 + id={@id}
104 + class={classes(@class)}
105 + value={Phoenix.HTML.Form.normalize_value(@type, @value)}
106 + {@rest}
107 + />
89 108 """
90 109 end
91 110
  @@ -94,8 +113,9 @@ defmodule DaisyUIComponents.Input do
94 113 ~H"""
95 114 <.text_input
96 115 id={@id}
97 - type={@type}
98 116 bordered={@bordered}
117 + class={classes(@class)}
118 + type={@type}
99 119 value={Phoenix.HTML.Form.normalize_value(@type, @value)}
100 120 {@rest}
101 121 />
Loading more files…