Current section
41 Versions
Jump to
Current section
41 Versions
Compare versions
5
files changed
+99
additions
-16
deletions
| @@ -199,17 +199,18 @@ List of available components. | |
| 199 199 | |
| 200 200 | ### Layout |
| 201 201 | |
| 202 | - | Component | Status | Storybook | |
| 203 | - | ----------------------------------------------------- | ------ | --------- | |
| 204 | - | [Artboard](https://daisyui.com/components/artboard) | ❌ | ❌ | |
| 205 | - | [Divider](https://daisyui.com/components/divider) | ❌ | ❌ | |
| 206 | - | [Drawer](https://daisyui.com/components/drawer) | ✅ | ✅ | |
| 207 | - | [Footer](https://daisyui.com/components/footer) | ✅ | ✅ | |
| 208 | - | [Hero](https://daisyui.com/components/hero) | ✅ | ✅ | |
| 209 | - | [Indicator](https://daisyui.com/components/indicator) | ✅ | ✅ | |
| 210 | - | [Join](https://daisyui.com/components/join) | ✅ | ✅ | |
| 211 | - | [Mask](https://daisyui.com/components/mask) | ❌ | ❌ | |
| 212 | - | [Stack](https://daisyui.com/components/stack) | ❌ | ❌ | |
| 202 | + | Component | Status | Storybook | |
| 203 | + | ------------------------------------------------------------------------------------------ | ------ | --------- | |
| 204 | + | [Artboard](https://daisyui.com/components/artboard) | ❌ | ❌ | |
| 205 | + | [Divider](https://daisyui.com/components/divider) | ❌ | ❌ | |
| 206 | + | [Drawer](https://daisyui.com/components/drawer) | ✅ | ✅ | |
| 207 | + | [Sidebar](https://daisy-ui-components-site.fly.dev/storybook/components/sidebar)(Internal) | ✅ | ✅ | |
| 208 | + | [Footer](https://daisyui.com/components/footer) | ✅ | ✅ | |
| 209 | + | [Hero](https://daisyui.com/components/hero) | ✅ | ✅ | |
| 210 | + | [Indicator](https://daisyui.com/components/indicator) | ✅ | ✅ | |
| 211 | + | [Join](https://daisyui.com/components/join) | ✅ | ✅ | |
| 212 | + | [Mask](https://daisyui.com/components/mask) | ❌ | ❌ | |
| 213 | + | [Stack](https://daisyui.com/components/stack) | ❌ | ❌ | |
| 213 214 | |
| 214 215 | ### Mockup |
| @@ -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.9.2">>}. |
| 4 | + {<<"version">>,<<"0.9.3">>}. |
| 5 5 | {<<"description">>,<<"DaisyUI component library for LiveView">>}. |
| 6 6 | {<<"elixir">>,<<"~> 1.14">>}. |
| 7 7 | {<<"app">>,<<"daisy_ui_components">>}. |
| @@ -67,8 +67,8 @@ defmodule DaisyUIComponents.Form do | |
| 67 67 | attr :type, :string, |
| 68 68 | default: "text", |
| 69 69 | values: |
| 70 | - ~w(checkbox color date datetime-local email file hidden month number password |
| 71 | - range radio search select tel text textarea time url week toggle checkbox_group radio_group) |
| 70 | + ~w(checkbox color date datetime-local email file hidden month number password range radio |
| 71 | + search select autocomplete tel text textarea time url week toggle checkbox_group radio_group) |
| 72 72 | |
| 73 73 | attr :field, Phoenix.HTML.FormField, |
| 74 74 | doc: "a form field struct retrieved from the form, for example: @form[:email]" |
| @@ -80,6 +80,9 @@ defmodule DaisyUIComponents.Form do | |
| 80 80 | attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2" |
| 81 81 | attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs" |
| 82 82 | |
| 83 | + attr :on_query, :any, |
| 84 | + doc: "the JS event to trigger when a value is searched in autocomplete inputs" |
| 85 | + |
| 83 86 | attr :rest, :global, |
| 84 87 | include: ~w(autocomplete cols disabled form list max maxlength min minlength |
| 85 88 | pattern placeholder readonly required rows size step) |
| @@ -261,6 +264,26 @@ defmodule DaisyUIComponents.Form do | |
| 261 264 | """ |
| 262 265 | end |
| 263 266 | |
| 267 | + def form_input(%{type: "autocomplete"} = assigns) do |
| 268 | + ~H""" |
| 269 | + <.fieldset class="mt-2"> |
| 270 | + <.fieldset_label for={@id <> "_label"}>{@label}</.fieldset_label> |
| 271 | + <.input |
| 272 | + id={@id} |
| 273 | + type="autocomplete" |
| 274 | + name={@name} |
| 275 | + color={@color} |
| 276 | + class={[@class, "w-full"]} |
| 277 | + options={@options} |
| 278 | + value={@value} |
| 279 | + on_query={@on_query} |
| 280 | + {@rest} |
| 281 | + /> |
| 282 | + <.error :for={msg <- @errors}>{msg}</.error> |
| 283 | + </.fieldset> |
| 284 | + """ |
| 285 | + end |
| 286 | + |
| 264 287 | def form_input(%{type: "textarea"} = assigns) do |
| 265 288 | ~H""" |
| 266 289 | <.fieldset class="mt-2"> |
| @@ -6,6 +6,8 @@ defmodule DaisyUIComponents.Input do | |
| 6 6 | use DaisyUIComponents, :component |
| 7 7 | |
| 8 8 | import DaisyUIComponents.Checkbox |
| 9 | + import DaisyUIComponents.Dropdown |
| 10 | + import DaisyUIComponents.Menu |
| 9 11 | import DaisyUIComponents.Radio |
| 10 12 | import DaisyUIComponents.Range |
| 11 13 | import DaisyUIComponents.Select |
| @@ -29,7 +31,7 @@ defmodule DaisyUIComponents.Input do | |
| 29 31 | attr :type, :string, |
| 30 32 | default: "text", |
| 31 33 | values: ~w(checkbox color date datetime-local email file hidden month number password |
| 32 | - range radio search select tel text textarea time url week toggle) |
| 34 | + range radio search select autocomplete tel text textarea time url week toggle) |
| 33 35 | |
| 34 36 | attr :color, :string, values: [nil] ++ colors(), default: nil |
| 35 37 | |
| @@ -44,6 +46,9 @@ defmodule DaisyUIComponents.Input do | |
| 44 46 | attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2" |
| 45 47 | attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs" |
| 46 48 | |
| 49 | + attr :on_query, :any, |
| 50 | + doc: "the JS event to trigger when a value is searched in autocomplete inputs" |
| 51 | + |
| 47 52 | attr :rest, :global, |
| 48 53 | include: ~w(autocomplete cols disabled form list max maxlength min minlength |
| 49 54 | pattern placeholder readonly required rows size step) |
| @@ -151,6 +156,60 @@ defmodule DaisyUIComponents.Input do | |
| 151 156 | """ |
| 152 157 | end |
| 153 158 | |
| 159 | + def input(%{type: "autocomplete"} = assigns) do |
| 160 | + selected_label = |
| 161 | + Enum.find_value(assigns.options, fn {label, value} -> |
| 162 | + if to_string(value) == to_string(assigns.value), do: label |
| 163 | + end) |
| 164 | + |
| 165 | + assigns = |
| 166 | + assigns |
| 167 | + |> assign(:selected, selected_label) |
| 168 | + |> update(:on_query, fn |
| 169 | + %JS{} = js -> js |
| 170 | + event when is_binary(event) -> JS.push(event) |
| 171 | + end) |
| 172 | + |
| 173 | + ~H""" |
| 174 | + <.dropdown> |
| 175 | + <.input |
| 176 | + type="text" |
| 177 | + id={@id <> "_label"} |
| 178 | + name={@id <> "_label"} |
| 179 | + class={@class} |
| 180 | + color={@color} |
| 181 | + phx-change={@on_query} |
| 182 | + phx-debounce={300} |
| 183 | + value={@selected} |
| 184 | + autocomplete="off" |
| 185 | + placeholder={@rest[:placeholder]} |
| 186 | + tabindex="0" |
| 187 | + {@rest} |
| 188 | + /> |
| 189 | + <input type="hidden" id={@id} name={@name} value={@value} /> |
| 190 | + <.menu |
| 191 | + tabindex="1" |
| 192 | + class="dropdown-content bg-base-100 rounded-box z-1 max-h-80 p-2 w-full shadow flex-nowrap overflow-auto" |
| 193 | + > |
| 194 | + <li :for={{label, value} <- @options}> |
| 195 | + <button |
| 196 | + type="button" |
| 197 | + class={if to_string(value) == to_string(@value), do: "menu-active"} |
| 198 | + onclick="document.activeElement.blur()" |
| 199 | + phx-click={ |
| 200 | + %JS{} |
| 201 | + |> JS.set_attribute({"value", value}, to: "##{@id}") |
| 202 | + |> JS.dispatch("change", to: "##{@id}") |
| 203 | + } |
| 204 | + > |
| 205 | + {label} |
| 206 | + </button> |
| 207 | + </li> |
| 208 | + </.menu> |
| 209 | + </.dropdown> |
| 210 | + """ |
| 211 | + end |
| 212 | + |
| 154 213 | def input(%{type: "textarea"} = assigns) do |
| 155 214 | assigns = |
| 156 215 | assigns |
| @@ -2,7 +2,7 @@ defmodule DaisyUIComponents.MixProject do | |
| 2 2 | use Mix.Project |
| 3 3 | |
| 4 4 | @source_url "https://github.com/phcurado/daisy_ui_components" |
| 5 | - @version "0.9.2" |
| 5 | + @version "0.9.3" |
| 6 6 | |
| 7 7 | def project do |
| 8 8 | [ |