Packages

moon

2.87.6
2.90.5 retired 2.90.4 2.90.3 2.90.2 2.90.1 2.90.0 2.89.4 2.89.1 2.89.0 2.88.0 2.87.11 2.87.10 2.87.9 2.87.8 2.87.7 2.87.6 2.87.5 2.87.4 2.87.3 2.87.2 2.87.1 2.87.0 2.86.1 2.86.0 2.85.1 2.85.0 2.84.0 2.83.0 2.82.0 2.81.4 2.81.3 2.81.2 2.81.1 2.81.0 2.80.2 2.80.1 2.80.0 2.79.13 2.79.12 2.79.11 2.79.10 2.79.9 2.79.8 2.79.7 2.79.6 2.79.5 2.79.4 2.79.3 2.79.2 2.79.1 2.79.0 2.78.4 2.78.3 2.78.2 2.78.1 2.78.0 2.77.0 2.76.5 2.76.4 2.76.3 2.76.2 2.76.1 2.76.0 2.75.0 2.74.1 2.74.0 2.73.8 2.73.7 2.73.6 2.73.5 2.73.4 2.73.3 2.73.2 2.73.1 2.73.0 2.72.5 2.72.4 2.72.3 2.72.2 2.72.1 2.72.0 2.71.1 2.71.0 2.70.0 2.69.2 2.69.1 2.69.0 2.68.11 2.68.10

Components-based design system written in elixir

HexDocs

Current section

Files

Jump to
Readme
89 Versions
17 Dependencies
0 Dependants
Files
Activity
moon lib moon_web examples design modal_example default.ex
Raw

lib/moon_web/examples/design/modal_example/default.ex 

defmodule MoonWeb.Examples.Design.ModalExample.Default do
  @moduledoc false
  use Moon.StatefulComponent
  use MoonWeb, :example
  alias Moon.Design.Modal
  alias Moon.Design.Button
  import MoonWeb.Helpers.Lorem
  def render(assigns) do
    ~F"""
    <div>
      <Button on_click="set_open" testid="open-modal">Open dialog</Button>
      <Modal id="default_modal">
        <Modal.Backdrop />
        <Modal.Panel>
          <div class="p-4 border-b-2 border-beerus">
            <h3 class="text-moon-18 text-bulma font-medium">
              Payment successful
            </h3>
          </div>
          <div class="p-4">
            <p class="text-moon-16 text-trunks">
              {lorem_payment()}
            </p>
          </div>
          <div class="p-4 border-t-2 border-beerus">
            <Button on_click="set_close" testid="close-modal">Got it, thanks!</Button>
          </div>
        </Modal.Panel>
      </Modal>
    </div>
    """
  end
  def handle_event("set_open", _, socket) do
    Modal.open("default_modal")
    {:noreply, socket}
  end
  def handle_event("set_close", _, socket) do
    Modal.close("default_modal")
    {:noreply, socket}
  end
  def code() do
    """
    alias Moon.Design.Modal
    alias Moon.Design.Button
    import MoonWeb.Helpers.Lorem
    def render(assigns) do
      ~F\"""
      <div>
        <Button on_click="set_open">Open dialog</Button>
        <Modal id="default_modal">
          <Modal.Backdrop />
          <Modal.Panel>
            <div class="p-4 border-b-2 border-beerus">
              <h3 class="text-moon-18 text-bulma font-medium">
                Payment successful
              </h3>
            </div>
            <div class="p-4">
              <p class="text-moon-16 text-trunks">
                {lorem_payment()}
              </p>
            </div>
            <div class="p-4 border-t-2 border-beerus">
              <Button on_click="set_close">Got it, thanks!</Button>
            </div>
          </Modal.Panel>
        </Modal>
      </div>
      \"""
    end
    def handle_event("set_open", _, socket) do
      Modal.open("default_modal")
      {:noreply, socket}
    end
    def handle_event("set_close", _, socket) do
      Modal.close("default_modal")
      {:noreply, socket}
    end
    """
  end
end