Packages
moon
2.90.1
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
Current section
Files
Jump to
Current section
Files
lib/moon/light/table.ex
defmodule Moon.Light.Table do
@moduledoc false
use Moon.Light.Component
defmodule Helper do
@moduledoc "Some helper functions used in <.table /> component"
import Moon.Helpers.MakeList, only: [add_index_as: 1]
def sort_items(items, sort) do
import Enum, only: [reverse: 1, reduce: 3, sort_by: 3]
reverse(sort)
|> reduce(items, fn {field, sort_dir}, list ->
case sort_dir do
"ASC" -> sort_by(list, &[&1[field]], :asc)
"DESC" -> sort_by(list, &[&1[field]], :desc)
_not_direction -> list
end
end)
end
def toggle_sort_dir(sort_dir) do
if "#{sort_dir}" == "ASC" do
"DESC"
else
"ASC"
end
end
def is_selected_item(item, selected) do
item[:is_selected] || is_selected(item[:id], selected)
end
def is_selected(id, selected) when is_list(selected) do
"#{id}" in selected
end
def is_selected(id, selected) do
"#{id}" == "#{selected}"
end
def inter_cell_border() do
"after:content-[\"\"] after:absolute after:w-px after:bg-beerus " <>
"after:h-3/5 after:bottom-[20%] after:right-0 after:translate-x-[-50%] relative"
end
def text_size_classes(row_size) do
case row_size do
"xs" -> "text-moon-12 py-1 px-2"
"sm" -> "text-moon-14 py-1 px-3"
"md" -> "text-moon-14 py-2 px-3"
"lg" -> "text-moon-14 py-3 px-3"
"xl" -> "text-moon-14 py-4 px-3"
"2xl" -> "text-moon-14 py-5 px-3"
end
end
def stream_data(%{items: stream = %Phoenix.LiveView.LiveStream{}}) do
stream
end
def stream_data(%{items: items, sort: sort, sortable: true}) when is_list(items) do
items |> add_index_as() |> sort_items(sort) |> Enum.with_index(&{&2, &1})
end
def stream_data(%{items: items}) when is_list(items) do
items |> add_index_as() |> Enum.with_index(&{&2, &1})
end
def dom_id(id, _) when is_binary(id) do
id
end
def dom_id(id, id2) do
"#{id2}-row-#{id}"
end
end
@doc "Input styled to use inside the tables"
attr(:testid, :string, doc: "Data-testid attribute for html tag", default: nil)
attr(:id, :string, doc: "Id attribute for html tag", default: nil)
attr(:class, :any, doc: "Additional CSS classes for the html tag", default: nil)
attr(:placeholder, :string, doc: "Text to be shown when no value given", default: nil)
attr(:value, :string, doc: "Value to be shown", default: nil)
attr(:disabled, :boolean, doc: "If the item should be marked as disabled", default: nil)
attr(:side_values, :any, default: %{}, doc: "Additional values to be passed")
attr(:opts, :any, default: %{}, doc: "Keyword | Map of additional attributes for the input")
attr(:on_change, Event, doc: "On change event for the input", default: nil)
attr(:on_keyup, Event, doc: "On keyup event for the input", default: nil)
attr(:on_focus, Event, doc: "On focus event for the input", default: nil)
attr(:on_blur, Event, doc: "On blur event for the input", default: nil)
def input(assigns) do
~H"""
<input
value={@value}
id={@id}
placeholder={@placeholder}
data-testid={@testid}
disabled={@disabled}
autocomplete="off"
class={
merge([
"block w-full max-w-full py-0 px-1 m-0 appearance-none text-bulma transition-shadow box-border relative z-[2]",
"bg-transparent hover:bg-heles focus:shadow-input-cell-focus focus:outline-none focus:bg-heles",
"focus-visible::shadow-input-cell-focus focus-visible::outline-none focus-visible::bg-heles rounded-moon-i-xs",
"rtl:[&:not([disabled])]:[&:not([readonly])]:[&:not([readonly])]:hover:rounded-moon-i-xs",
"rtl:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs rtl:invalid:rounded-moon-i-xs",
"ltr:[&:not([disabled])]:[&:not([readonly])]:hover:rounded-moon-i-xs ltr:[&:not([disabled])]:[&:not([readonly])]:focus:rounded-moon-i-xs",
"ltr:invalid:rounded-moon-i-xs before:box-border after:box-border placeholder:text-trunks placeholder:opacity-100",
"placeholder:transition-opacity placeholder:delay-75 read-only:outline-0 read-only:border-none",
"read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
"read-only:focus-visible:shadow-input input-dt-shared invalid:shadow-input-err invalid:hover:shadow-input-err",
"invalid:focus:shadow-input-err invalid:focus-visible:shadow-input-err",
@class
])
}
phx-target={[@on_change, @on_keyup, @on_focus, @on_blur] |> Event.find_target()}
phx-change={@on_change && @on_change.name}
phx-keyup={@on_keyup && @on_keyup.name}
phx-focus={@on_focus && @on_focus.name}
phx-blur={@on_blur && @on_blur.name}
{@opts}
{data_values(@side_values)}
/>
"""
end
end