feat: Parts.Table component (#822)

lib/moon/design/table.ex

@@ -14,10 +14,10 @@ defmodule Moon.Design.Table do
   @doc "The list of items to be rendered. If item does not have id - than index is used instead. Able to work with streams"
   prop(items, :generator, required: true)
 
-  @doc "Event that firset on row click"
+  @doc "Event that fires on row click"
   prop(row_click, :event)
 
-  @doc "Callback for generating on_click per row. row and row_id will bi given as parameters"
+  @doc "Callback for generating on_click per row. row and row_id will be given as parameters"
   prop(row_click_cb, :any)
 
   @doc "Sorting stuff"

lib/moon/parts/table.ex

@@ -0,0 +1,72 @@
+defmodule Moon.Parts.Table do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  @doc "List of  selected ids, or just id, or [], or nil"
+  prop(selected, :any, default: [])
+
+  @doc "Sorting of the table, format [field:, \"ASC\"|\"DESC\"]. If given, component will sort given items before displaying"
+  prop(sort, :keyword, default: [])
+
+  @doc "The list of items to be rendered. If item does not have id - than index is used instead. Able to work with streams"
+  prop(items, :generator, required: true)
+
+  @doc "Event that fires on row click"
+  prop(row_click, :event)
+
+  @doc "Callback for generating on_click per row. row and row_id will be given as parameters"
+  prop(row_click_cb, :any)
+
+  @doc "Sorting stuff"
+  prop(sorting_click, :event)
+
+  @doc "Can be used to add any class to the table"
+  prop(row_gap, :css_class, default: "border-spacing-y-1")
+
+  @doc "Size of the row. not a css class!"
+  prop(row_size, :string, values!: ~w(xs sm md lg xl 2xl), default: "xl")
+
+  @doc "If cell has border"
+  prop(is_cell_border, :boolean, default: false)
+
+  @doc "If table has column headers or not"
+  prop(is_headless, :boolean, default: false)
+
+  @doc "If table is styled to present its rows in automatically alternating colours"
+  prop(is_zebra_style, :boolean, default: false)
+
+  @doc "Can be used as an additional class for all the rows"
+  prop(row_bg, :css_class, default: "bg-goku")
+
+  @doc "Can be used as an additional class for selected rows"
+  prop(selected_bg, :css_class, default: "bg-heles")
+
+  @doc "Can be used as an additional class for header row"
+  prop(header_row_class, :css_class,
+    default: "text-left first:rounded-l-moon-s-none last:rounded-r-moon-s-none"
+  )
+
+  @doc "Can be used as an additional class for even rows in zebra-style table"
+  prop(even_row_bg, :css_class, default: "bg-transparent")
+
+  @doc "Can be used as an additional class for all rows. please use hover:... tailwind's format"
+  prop(hover_bg, :css_class)
+
+  @doc "The list of columns defining the Grid"
+  slot(cols, generator_prop: :items)
+
+  @doc "Just an id for a table tag"
+  prop(id, :string)
+
+  @doc "Data-testid attribute for a table tag"
+  prop(testid, :string)
+
+  @doc "Additional classes for a table tag"
+  prop(class, :css_class, default: "bg-goku !border-collapse pb-4 rounded-moon-s-lg")
+
+  @doc "Additional attributes for tbody tag"
+  prop(body_attrs, :map, default: %{})
+
+  defdelegate render(assigns), to: Moon.Design.Table
+end

lib/moon/parts/table/column.ex

@@ -0,0 +1,19 @@
+defmodule Moon.Parts.Table.Column do
+  @moduledoc false
+
+  use Moon.StatelessComponent, slot: "cols"
+
+  @doc "Is used for sorting"
+  prop(name, :string)
+  @doc "The title of the column"
+  prop(label, :string)
+  @doc "The is the column sortable"
+  prop(sortable, :boolean, default: false)
+  @doc "Can be used for adding any class to both th & td tags"
+  prop(width, :css_class, default: "text-moon-16 text-trunks py-4 px-4 font-normal h-16")
+  @doc "Simple additional css class, will be added to td tag only"
+  prop(class, :css_class,
+    default:
+      "text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
+  )
+end

lib/moon/parts/table/input.ex

@@ -0,0 +1,35 @@
+defmodule Moon.Parts.Table.Input do
+  @moduledoc "Input styled to use inside the tables"
+
+  use Moon.StatelessComponent
+
+  @doc "Data-testid attribute for html tag"
+  prop(testid, :string)
+  @doc "Id attribute for html tag"
+  prop(id, :string)
+  @doc "Additional CSS classes for the html tag"
+  prop(class, :css_class)
+
+  @doc "Text to be shown when no value given"
+  prop(placeholder, :string)
+  @doc "Value to be shown"
+  prop(value, :string)
+  @doc "If the item should be marked as disabled"
+  prop(disabled, :boolean)
+  @doc "Additional values to be passed"
+  prop(side_values, :any, default: %{})
+
+  @doc "Keyword | Map of additional attributes for the input"
+  prop(opts, :any, default: %{})
+
+  @doc "On change event for the input"
+  prop(on_change, :event)
+  @doc "On keyup event for the input"
+  prop(on_keyup, :event)
+  @doc "On focus event for the input"
+  prop(on_focus, :event)
+  @doc "On blur event for the input"
+  prop(on_blur, :event)
+
+  defdelegate render(assigns), to: Moon.Design.Table.Input
+end

lib/moon_web/components/show_room_page/editable_table.ex

@@ -3,8 +3,7 @@ defmodule MoonWeb.Components.ShowRoomPage.EditableTable do
 
   use MoonWeb, :stateful_component
 
-  alias Moon.Design.Table
-  alias Moon.Design.Table.Column
+  alias Moon.Parts.Table
   alias Moon.Design.Dropdown
   alias Moon.Parts.Status
   alias Moon.Parts.Button
@@ -21,20 +20,8 @@ defmodule MoonWeb.Components.ShowRoomPage.EditableTable do
   def render(assigns) do
     ~F"""
     <div class="m-2 bg-goku rounded-moon-s-lg">
-      <Table
-        items={editable_menu_item <- @editable_menu_items}
-        {=@id}
-        class="bg-goku !border-collapse pb-4 rounded-moon-s-lg"
-        header_row_class="text-left first:rounded-l-moon-s-none last:rounded-r-moon-s-none"
-        row_size="xl"
-        selected_bg="bg-heles"
-      >
-        <Column
-          name="id"
-          label="Icon"
-          class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
-          width="text-moon-16 text-trunks py-4 px-4 font-normal h-16"
-        >
+      <Table items={editable_menu_item <- @editable_menu_items} {=@id}>
+        <Table.Column name="id" label="Icon">
           <Dropdown
             id={"menu-icons-#{editable_menu_item.id}"}
             side_values={num: editable_menu_item.id, field: :icon}
@@ -51,42 +38,27 @@ defmodule MoonWeb.Components.ShowRoomPage.EditableTable do
               titles={generate_dropdown_options()}
             />
           </Dropdown>
-        </Column>
-        <Column
-          name="name"
-          label="Name"
-          class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
-          width="text-moon-16 text-trunks py-4 px-4 font-normal h-16"
-        >
+        </Table.Column>
+        <Table.Column name="name" label="Name">
           <Table.Input
             value={editable_menu_item.name}
             side_values={num: editable_menu_item.id, field: :name}
             on_keyup={@change_name}
           />
-        </Column>
-        <Column
-          name="created_at"
-          label="Link"
-          class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
-          width="text-moon-16 text-trunks py-4 px-4 font-normal h-16 hidden md:table-cell"
-        >
+        </Table.Column>
+        <Table.Column name="created_at" label="Link">
           <Table.Input
             value={editable_menu_item.link}
             side_values={num: editable_menu_item.id, field: :link}
             on_keyup={@change_name}
           />
-        </Column>
-        <Column
-          name="created_at"
-          label="Status"
-          class="text-moon-18 text-bulma py-4 px-4 first:rounded-l-moon-s-none last:rounded-r-moon-s-none border-y-[0.5px] border-beerus font-dm-sans"
-          width="text-moon-16 text-trunks py-4 px-4 font-normal h-16"
-        >
+        </Table.Column>
+        <Table.Column name="created_at" label="Status">
           <Status
             side_values={num: editable_menu_item.id, field: :status}
             active={editable_menu_item.active}
           />
-        </Column>
+        </Table.Column>
       </Table>
       <Button.White class="w-fit ms-4 my-4" on_click={@add_row}>+ Add menu item</Button.White>
     </div>