ui_components 0.1.1 → 0.1.2

data/app/views/ui_components/daisy_ui/data_display_components/table.html.erb

@@ -0,0 +1,358 @@
+<% component = UiComponents::DaisyUi::DataDisplay::TableComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Table</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Status", daisy_ui_status_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Timeline >", daisy_ui_timeline_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="divider"></div>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Table" } %>
+    <%= doc.with_body(preview_options: { css_class: "w-lg" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="overflow-x-auto">
+                    <$= render #{component}.new do |table| $>
+                      <$= table.with_item do |item| $>
+                        <$= item.with_head do |head| $>
+                          <$= head.with_row do |row| $>
+                            <$= row.with_header $>
+                            <$= row.with_header_content("Name") $>
+                            <$= row.with_header_content("Job") $>
+                            <$= row.with_header_content("Favorite Color") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_body do |body| $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("1") $>
+                            <$= row.with_datum_content("Cy Ganderton") $>
+                            <$= row.with_datum_content("Quality Control Specialist") $>
+                            <$= row.with_datum_content("Blue") $>
+                          <$ end $>
+
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("2") $>
+                            <$= row.with_datum_content("Hart Hagerty") $>
+                            <$= row.with_datum_content("Desktop Support Technician") $>
+                            <$= row.with_datum_content("Purple") $>
+                          <$ end $>
+
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("3") $>
+                            <$= row.with_datum_content("Brice Swyre") $>
+                            <$= row.with_datum_content("Tax Accountant") $>
+                            <$= row.with_datum_content("Red") $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Zebra" } %>
+    <%= doc.with_body(preview_options: { css_class: "w-lg" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="overflow-x-auto">
+                    <$= render #{component}.new(zebra: true) do |table| $>
+                      <$= table.with_item do |item| $>
+                        <$= item.with_head do |head| $>
+                          <$= head.with_row do |row| $>
+                            <$= row.with_header $>
+                            <$= row.with_header_content("Name") $>
+                            <$= row.with_header_content("Job") $>
+                            <$= row.with_header_content("Favorite Color") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_body do |body| $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("1") $>
+                            <$= row.with_datum_content("Cy Ganderton") $>
+                            <$= row.with_datum_content("Quality Control Specialist") $>
+                            <$= row.with_datum_content("Blue") $>
+                          <$ end $>
+
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("2") $>
+                            <$= row.with_datum_content("Hart Hagerty") $>
+                            <$= row.with_datum_content("Desktop Support Technician") $>
+                            <$= row.with_datum_content("Purple") $>
+                          <$ end $>
+
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("3") $>
+                            <$= row.with_datum_content("Brice Swyre") $>
+                            <$= row.with_datum_content("Tax Accountant") $>
+                            <$= row.with_datum_content("Red") $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
+
+  <% sizes.each do |key, value| %>
+    <%= render DocumentationComponent.new do |doc| %>
+      <%= doc.with_header { "# Table #{value} #{'(default)' if key == "md"}" } %>
+      <%= doc.with_body do |body| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <div class="overflow-x-auto">
+                      <$= render #{component}.new(size: "#{key}") do |table| $>
+                        <$= table.with_item do |item| $>
+                          <$= item.with_head do |head| $>
+                            <$= head.with_row do |row| $>
+                              <$= row.with_header $>
+                              <$= row.with_header_content("Name") $>
+                              <$= row.with_header_content("Job") $>
+                              <$= row.with_header_content("company") $>
+                              <$= row.with_header_content("location") $>
+                              <$= row.with_header_content("Last Login") $>
+                              <$= row.with_header_content("Favorite Color") $>
+                            <$ end $>
+                          <$ end $>
+
+                          <$= item.with_body do |body| $>
+                            <$= body.with_row do |row| $>
+                              <$= row.with_header_content("1") $>
+                              <$= row.with_datum_content("Cy Ganderton") $>
+                              <$= row.with_datum_content("Quality Control Specialist") $>
+                              <$= row.with_datum_content("Littel, Schaden and Vandervort	") $>
+                              <$= row.with_datum_content("Canada") $>
+                              <$= row.with_datum_content("12/16/2020") $>
+                              <$= row.with_datum_content("Blue") $>
+                            <$ end $>
+
+                            <$= body.with_row do |row| $>
+                              <$= row.with_header_content("2") $>
+                              <$= row.with_datum_content("Hart Hagerty") $>
+                              <$= row.with_datum_content("Desktop Support Technician") $>
+                              <$= row.with_datum_content("Zemlak, Daniel and Leannon") $>
+                              <$= row.with_datum_content("United States") $>
+                              <$= row.with_datum_content("12/5/2020") $>
+                              <$= row.with_datum_content("Purple") $>
+                            <$ end $>
+
+                            <$= body.with_row do |row| $>
+                              <$= row.with_header_content("3") $>
+                              <$= row.with_datum_content("Brice Swyre") $>
+                              <$= row.with_datum_content("Tax Accountant") $>
+                              <$= row.with_datum_content("Carroll Group") $>
+                              <$= row.with_datum_content("China") $>
+                              <$= row.with_datum_content("8/15/2020") $>
+                              <$= row.with_datum_content("Red") $>
+                            <$ end $>
+                          <$ end $>
+
+                          <$= item.with_foot do |foot| $>
+                            <$= foot.with_row do |row| $>
+                              <$= row.with_header $>
+                              <$= row.with_header_content("Name") $>
+                              <$= row.with_header_content("Job") $>
+                              <$= row.with_header_content("company") $>
+                              <$= row.with_header_content("location") $>
+                              <$= row.with_header_content("Last Login") $>
+                              <$= row.with_header_content("Favorite Color") $>
+                            <$ end $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+                    </div>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Table with pinned-rows" } %>
+    <%= doc.with_body(preview_options: { css_class: "w-96" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="h-46 overflow-x-auto">
+                    <$= render #{component}.new(pinned_rows: true, css_class: "bg-base-200") do |table| $>
+                      <$= table.with_item do |item| $>
+                        <$= item.with_head do |head| $>
+                          <$= head.with_row do |row| $>
+                            <$= row.with_header_content("A") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_body do |body| $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Ant-Man") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Aquaman") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Asterix") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("The Atom") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("The Avengers") $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+
+                      <$= table.with_item do |item| $>
+                        <$= item.with_head do |head| $>
+                          <$= head.with_row do |row| $>
+                            <$= row.with_header_content("B") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_body do |body| $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Batgirl") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Batman") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Batwoman") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Black Canary") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Black Panther") $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+
+                      <$= table.with_item do |item| $>
+                        <$= item.with_head do |head| $>
+                          <$= head.with_row do |row| $>
+                            <$= row.with_header_content("C") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_body do |body| $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Captain America") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Captain Marvel") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Catwoman") $>
+                          <$ end $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("Conan the Barbarian") $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |doc| %>
+    <%= doc.with_header { "# Table with pinned-rows and pinned-cols" } %>
+    <%= doc.with_body(preview_options: { css_class: "w-96" }) do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <div class="h-46 overflow-x-auto">
+                    <$= render #{component}.new(size: "xs", pinned_rows: true, pinned_cols: true) do |table| $>
+                      <$= table.with_item do |item| $>
+                        <$= item.with_head do |head| $>
+                          <$= head.with_row do |row| $>
+                            <$= row.with_header_content("") $>
+                            <$= row.with_header_content("Name") $>
+                            <$= row.with_header_content("Job") $>
+                            <$= row.with_header_content("company") $>
+                            <$= row.with_header_content("location") $>
+                            <$= row.with_header_content("Last Login") $>
+                            <$= row.with_header_content("Favorite Color") $>
+                            <$= row.with_header_content("") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_body do |body| $>
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("1") $>
+                            <$= row.with_header_content("Cy Ganderton") $>
+                            <$= row.with_header_content("Quality Control Specialist") $>
+                            <$= row.with_header_content("Littel, Schaden and Vandervort") $>
+                            <$= row.with_header_content("Canada") $>
+                            <$= row.with_header_content("12/16/2020") $>
+                            <$= row.with_header_content("Blue") $>
+                            <$= row.with_header_content("1") $>
+                          <$ end $>
+
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("2") $>
+                            <$= row.with_header_content("Hart Hagerty") $>
+                            <$= row.with_header_content("Desktop Support Technician") $>
+                            <$= row.with_header_content("Zemlak, Daniel and Leanno") $>
+                            <$= row.with_header_content("United States") $>
+                            <$= row.with_header_content("12/5/2020") $>
+                            <$= row.with_header_content("Purple") $>
+                            <$= row.with_header_content("2") $>
+                          <$ end $>
+
+                          <$= body.with_row do |row| $>
+                            <$= row.with_header_content("3") $>
+                            <$= row.with_header_content("Brice Swyre") $>
+                            <$= row.with_header_content("Tax Accountant") $>
+                            <$= row.with_header_content("Carroll Group") $>
+                            <$= row.with_header_content("China") $>
+                            <$= row.with_header_content("8/15/2020") $>
+                            <$= row.with_header_content("Red") $>
+                            <$= row.with_header_content("3") $>
+                          <$ end $>
+                        <$ end $>
+
+                        <$= item.with_foot do |foot| $>
+                          <$= foot.with_row do |row| $>
+                            <$= row.with_header_content("") $>
+                            <$= row.with_header_content("Name") $>
+                            <$= row.with_header_content("Job") $>
+                            <$= row.with_header_content("company") $>
+                            <$= row.with_header_content("location") $>
+                            <$= row.with_header_content("Last Login") $>
+                            <$= row.with_header_content("Favorite Color") $>
+                            <$= row.with_header_content("") $>
+                          <$ end $>
+                        <$ end $>
+                      <$ end $>
+                    <$ end $>
+                  </div>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <div class="divider"></div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Table</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Status", daisy_ui_status_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+      <%= link_to "Timeline >", daisy_ui_timeline_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>