lib/moon/components/as_compoent.ex

defmodule Moon.Components.AsComponent do
  @moduledoc """
  Some kind of "polymorphic" stuff. "as" propertry is responsible for HTNL tag is rendered.
  """
  use Moon.StatelessComponent
  prop(class, :css_class)
  prop(as, :string, values!: ~w(a button div), default: "button")
  # for as="a" type only
  prop(href, :string)
  # for as="a" type only
  prop(target, :string)
  # for as="a" type only
  prop(rel, :string)
  # for as="button" only
  prop(on_click, :event)
  # for everything
  prop(values, :list, default: [])
  prop(role, :string)
  prop(attrs, :map, default: %{})
  prop(is_selected, :boolean, default: false)
  prop(value, :string)
  slot(default)
  prop(testid, :string)
  prop(id, :string)
  prop(aria_label, :string)

  def render(assigns) do
    ~F"""
    {#if @as == "button"}
      <button
        {=@class}
        :on-click={@on_click}
        :values={@values}
        {=@role}
        {=@value}
        {...@attrs}
        {=@id}
        aria-label={@aria_label}
        data-testid={@testid}
      ><#slot /></button>
    {#elseif @as == "a"}
      <a
        {=@class}
        {=@href}
        {=@target}
        {=@rel}
        {...@attrs}
        {=@id}
        {=@value}
        data-testid={@testid}
        :values={@values}
      ><#slot /></a>
    {#elseif @as == "div"}
      <div {=@class} {...@attrs} {=@id} {=@value} data-testid={@testid} :values={@values}><#slot /></div>
    {/if}
    """
  end
end