From 2d8f111f3a26601a44c02a7cfd9a2b74f128b35d Mon Sep 17 00:00:00 2001 From: Marlus Saraiva Date: Sat, 6 Feb 2021 08:33:56 -0300 Subject: [PATCH 1/2] Add style to table column --- lib/surface_bulma/table.ex | 2 +- lib/surface_bulma/table/column.ex | 3 +++ mix.exs | 2 +- mix.lock | 6 +++-- priv/catalogue/table/playground.ex | 35 ++++++++++++++++++++++++++++++ 5 files changed, 44 insertions(+), 4 deletions(-) create mode 100644 priv/catalogue/table/playground.ex diff --git a/lib/surface_bulma/table.ex b/lib/surface_bulma/table.ex index 31d299b..e0fcb62 100644 --- a/lib/surface_bulma/table.ex +++ b/lib/surface_bulma/table.ex @@ -65,7 +65,7 @@ defmodule SurfaceBulma.Table do - + diff --git a/lib/surface_bulma/table/column.ex b/lib/surface_bulma/table/column.ex index 4ea7e90..293b53b 100644 --- a/lib/surface_bulma/table/column.ex +++ b/lib/surface_bulma/table/column.ex @@ -43,6 +43,9 @@ defmodule SurfaceBulma.Table.Column do """ prop sort_by, :any, default: nil + @doc "The style to be applied to element representing this column" + prop style, :string, default: "" + # Todo, requires patching of bulma css # prop width, :string, default: nil end diff --git a/mix.exs b/mix.exs index a9593a4..04a0919 100644 --- a/mix.exs +++ b/mix.exs @@ -37,7 +37,7 @@ defmodule SurfaceBulma.MixProject do {:floki, "~> 0.25.0", only: :test}, {:surface, "~> 0.2.1"}, {:surface_font_awesome, "~> 0.1.1"}, - {:surface_catalogue, "~> 0.0.1", only: :dev} + {:surface_catalogue, "~> 0.0.3", only: :dev} ] end diff --git a/mix.lock b/mix.lock index 5b06c36..39437f3 100644 --- a/mix.lock +++ b/mix.lock @@ -8,6 +8,8 @@ "floki": {:hex, :floki, "0.25.0", "b1c9ddf5f32a3a90b43b76f3386ca054325dc2478af020e87b5111c19f2284ac", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "631f4e627c46d5ecd347df5a2accdaf0621c77c3693c5b75a8ad58e84c61f242"}, "html_entities": {:hex, :html_entities, "0.5.1", "1c9715058b42c35a2ab65edc5b36d0ea66dd083767bef6e3edb57870ef556549", [:mix], [], "hexpm", "30efab070904eb897ff05cd52fa61c1025d7f8ef3a9ca250bc4e6513d16c32de"}, "jason": {:hex, :jason, "1.2.2", "ba43e3f2709fd1aa1dce90aaabfd039d000469c05c56f0b8e31978e03fa39052", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "18a228f5f0058ee183f29f9eae0805c6e59d61c3b006760668d8d18ff0d12179"}, + "makeup": {:hex, :makeup, "1.0.5", "d5a830bc42c9800ce07dd97fa94669dfb93d3bf5fcf6ea7a0c67b2e0e4a7f26c", [:mix], [{:nimble_parsec, "~> 0.5 or ~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "cfa158c02d3f5c0c665d0af11512fed3fba0144cf1aadee0f2ce17747fba2ca9"}, + "makeup_elixir": {:hex, :makeup_elixir, "0.15.1", "b5888c880d17d1cc3e598f05cdb5b5a91b7b17ac4eaf5f297cb697663a1094dd", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.1", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "db68c173234b07ab2a07f645a5acdc117b9f99d69ebf521821d89690ae6c6ec8"}, "mime": {:hex, :mime, "1.5.0", "203ef35ef3389aae6d361918bf3f952fa17a09e8e43b5aa592b93eba05d0fb8d", [:mix], [], "hexpm", "55a94c0f552249fc1a3dd9cd2d3ab9de9d3c89b559c2bd01121f824834f24746"}, "nimble_parsec": {:hex, :nimble_parsec, "1.1.0", "3a6fca1550363552e54c216debb6a9e95bd8d32348938e13de5eda962c0d7f89", [:mix], [], "hexpm", "08eb32d66b706e913ff748f11694b17981c0b04a33ef470e33e11b3d3ac8f54b"}, "phoenix": {:hex, :phoenix, "1.5.7", "2923bb3af924f184459fe4fa4b100bd25fa6468e69b2803dfae82698269aa5e0", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.1.2 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "774cd64417c5a3788414fdbb2be2eb9bcd0c048d9e6ad11a0c1fd67b7c0d0978"}, @@ -19,8 +21,8 @@ "plug_cowboy": {:hex, :plug_cowboy, "2.4.1", "779ba386c0915027f22e14a48919a9545714f849505fa15af2631a0d298abf0f", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d72113b6dff7b37a7d9b2a5b68892808e3a9a752f2bf7e503240945385b70507"}, "plug_crypto": {:hex, :plug_crypto, "1.2.0", "1cb20793aa63a6c619dd18bb33d7a3aa94818e5fd39ad357051a67f26dfa2df6", [:mix], [], "hexpm", "a48b538ae8bf381ffac344520755f3007cc10bd8e90b240af98ea29b69683fc2"}, "ranch": {:hex, :ranch, "1.7.1", "6b1fab51b49196860b733a49c07604465a47bdb78aa10c1c16a3d199f7f8c881", [:rebar3], [], "hexpm", "451d8527787df716d99dc36162fca05934915db0b6141bbdac2ea8d3c7afc7d7"}, - "surface_font_awesome": {:hex, :surface_font_awesome, "0.1.1", "0872b5d3ecadcd2db839b24ef61632682ec685ebb62032f6ab22e43697cbddce", [:mix], [{:surface, "~> 0.2.0", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "f282c50a206e6171a99f1fd15fb68e18157c22265be885c50f108a03843e82fb"}, "surface": {:hex, :surface, "0.2.1", "adc84352e421d8af0774d1600a8bd1ff1309d3351bb489f38a06a22bc0b2a10a", [:mix], [{:earmark, "~> 1.3", [hex: :earmark, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 0.5 or ~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.15.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "20ce3b3f134409f3c703ac78a0e40f14293efc6460c0f0d5f5575ebd70bb1d39"}, - "surface_catalogue": {:hex, :surface_catalogue, "0.0.1", "1197ca35293567f8055b27253b8aaefc949d68c41c1eed3eeb8303f4a3972b74", [:mix], [{:html_entities, "~> 0.4", [hex: :html_entities, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_live_reload, "~> 1.2", [hex: :phoenix_live_reload, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: false]}, {:surface, "~> 0.2.1", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "d62d4d8b3f42dddc41c5f1ebdb8f5bf0f7bf7cb41e39362015590ac0c1ce1e19"}, + "surface_catalogue": {:hex, :surface_catalogue, "0.0.3", "74c7d2010690e165fca698564ce8bf1bc33f71f35408ade99364044269198b26", [:mix], [{:html_entities, "~> 0.4", [hex: :html_entities, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.15.1", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:phoenix_live_reload, "~> 1.2", [hex: :phoenix_live_reload, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.0", [hex: :plug_cowboy, repo: "hexpm", optional: false]}, {:surface, "~> 0.2.1", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "02621e912bbcf8511815e6717a7256e172d05e4422f4d0833247baa2127325f1"}, + "surface_font_awesome": {:hex, :surface_font_awesome, "0.1.1", "0872b5d3ecadcd2db839b24ef61632682ec685ebb62032f6ab22e43697cbddce", [:mix], [{:surface, "~> 0.2.0", [hex: :surface, repo: "hexpm", optional: false]}], "hexpm", "f282c50a206e6171a99f1fd15fb68e18157c22265be885c50f108a03843e82fb"}, "telemetry": {:hex, :telemetry, "0.4.2", "2808c992455e08d6177322f14d3bdb6b625fbcfd233a73505870d8738a2f4599", [:rebar3], [], "hexpm", "2d1419bd9dda6a206d7b5852179511722e2b18812310d304620c7bd92a13fcef"}, } diff --git a/priv/catalogue/table/playground.ex b/priv/catalogue/table/playground.ex new file mode 100644 index 0000000..082eddb --- /dev/null +++ b/priv/catalogue/table/playground.ex @@ -0,0 +1,35 @@ +defmodule SurfaceBulma.Catalogue.Table.Playground do + use Surface.Catalogue.Playground, + subject: SurfaceBulma.Table, + catalogue: SurfaceBulma.Catalogue, + height: "270px", + body: [class: "has-background-light", style: "padding: 25px;"] + + alias SurfaceBulma.Table.Column + + data props, :map, default: %{ + id: "table", + bordered: true, + striped: true, + data: [ + %{id: 1, name: "John"}, + %{id: 2, name: "Jane"}, + %{id: 3, name: "Albert"}, + %{id: 4, name: "Diana"}, + %{id: 5, name: "Elizabeth"} + ] + } + + def render(assigns) do + ~H""" + + + {{ person.id }} + + + {{ person.name }} + +
+ """ + end +end From 318fb20779f6eb40fb38f1f1d5c6425e36c89bfe Mon Sep 17 00:00:00 2001 From: Marlus Saraiva Date: Sun, 7 Feb 2021 10:51:21 -0300 Subject: [PATCH 2/2] Add class prop to Column --- lib/surface_bulma/table.ex | 2 +- lib/surface_bulma/table/column.ex | 3 +++ test/surface_bulma/table_test.exs | 32 ++++++++++++++++++++++++++++--- 3 files changed, 33 insertions(+), 4 deletions(-) diff --git a/lib/surface_bulma/table.ex b/lib/surface_bulma/table.ex index e0fcb62..ab2a686 100644 --- a/lib/surface_bulma/table.ex +++ b/lib/surface_bulma/table.ex @@ -65,7 +65,7 @@ defmodule SurfaceBulma.Table do - + diff --git a/lib/surface_bulma/table/column.ex b/lib/surface_bulma/table/column.ex index 293b53b..3c0069f 100644 --- a/lib/surface_bulma/table/column.ex +++ b/lib/surface_bulma/table/column.ex @@ -46,6 +46,9 @@ defmodule SurfaceBulma.Table.Column do @doc "The style to be applied to element representing this column" prop style, :string, default: "" + @doc "The class to be applied to element representing this column" + prop class, :css_class, default: nil + # Todo, requires patching of bulma css # prop width, :string, default: nil end diff --git a/test/surface_bulma/table_test.exs b/test/surface_bulma/table_test.exs index eb035cb..60bae86 100644 --- a/test/surface_bulma/table_test.exs +++ b/test/surface_bulma/table_test.exs @@ -1,8 +1,8 @@ defmodule Surface.Components.TableTest do - use ExUnit.Case, async: true + use SurfaceBulma.ConnCase, async: true - import Phoenix.ConnTest - import Phoenix.LiveViewTest + alias SurfaceBulma.Table + alias SurfaceBulma.Table.Column @endpoint Endpoint @@ -146,4 +146,30 @@ defmodule Surface.Components.TableTest do |> element("#{row5} td:nth-child(1) span") |> render() =~ "1" end + + test "column's class" do + html = + render_surface do + ~H""" + + {{person.name}} +
+ """ + end + + assert html =~ ~S( + {{person.name}} + + """ + end + + assert html =~ ~S(