anchor_view_components 0.11.3 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4a4f71788695a998ba2ff334bdf87024cb81ba965d0a63708932a4caca25d68
-  data.tar.gz: 19e5153cbec09a3b31ab90eab613dd0b09e9cc509aaa1faf23f0a84a0b53e259
+  metadata.gz: e8f0780ee72bc13ea791c529b15bbb6b4ec3318abc7054c9bea275d9e7818682
+  data.tar.gz: 505d4f6138f09dee2ceffdda7d68626ab85726bff41346e24e6c14597eb8198c
 SHA512:
-  metadata.gz: 5f67ef2e00c863d8260db4644bc5d43c733cad018ef07388ae4ae8535fa97bd976bb07c3e5d72dd4c3b3044ba4fcc6460cfeb8ba5e0602145afcef59895691eb
-  data.tar.gz: 9cbeb4d0ef16acff7592175836ea0cba5314770351bc1b15c3199b53509b0d24c015c53c468f2113580ba968e6d4e40519a69c55d4b2ad6f460ee46b17326416
+  metadata.gz: 7a81c2270c9c76ded2106b6184bb84d6dccc786a0ce3b6ea8dd5530f62cb120fc7eef4a1b2b4fdd87c2e8ec0bbcd42fe2822429d66ef7ab15432de2300af35be
+  data.tar.gz: 3125a9b7090de76a6d7d8c97f0cba7507fbc00b796472f04db59f59fd65b74775cd9eef57f4717428c8f5e26cb29aee0f746a3bb8f7eae5c8a23af8084942500

data/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.12.0 - 2023-09-11
+
+### Changed
+- Added a record argument to the TableComponent row link lambda
+
+
+## 0.11.4 - 2023-09-07
+
+### Added
+- PopoverComponent was extracted from ActionMenuComponent
+
+### Changed
+- Added optional totals to TableComponent
+
 ## 0.11.3 - 2023-09-06
 
 ### Added

data/app/components/anchor/action_menu_component.html.erb

@@ -1,25 +1,17 @@
-<%= tag.div(
-  class: "contents",
-  data: { controller: "action-menu" },
-) do %>
-  <%= show_button if show_button? %>
-  <%= tag.div(
-    class: class_names(
-      "absolute -left-full -top-full m-0 px-0 py-1 bg-white rounded border border-subdued popover-open:block",
-      menu_classes
-    ),
-    data: { action: "toggle->action-menu#positionPopover" },
-    id: menu_id,
-    popover: "auto",
-  ) do %>
-    <ul>
-      <% items.each do |item| %>
-        <%= tag.li(
-          item,
-          class: "action-menu-item whitespace-nowrap hover:bg-grey-10",
-          data: { testid: "action-menu-item" }
-        ) %>
-      <% end %>
-    </ul>
+<%= anchor_popover(id: menu_id, classes: class_names("px-0", "py-1", menu_classes)) do |popover| %>
+  <% if show_button? %>
+    <% popover.with_trigger do %>
+      <%= show_button %>
+    <% end %>
   <% end %>
+
+  <ul>
+    <% items.each do |item| %>
+      <%= tag.li(
+        item,
+        class: "action-menu-item whitespace-nowrap hover:bg-grey-10",
+        data: { testid: "action-menu-item" }
+      ) %>
+    <% end %>
+  </ul>
 <% end %>

data/app/components/anchor/action_menu_component.rb

@@ -2,8 +2,10 @@ module Anchor
   class ActionMenuComponent < Component
     renders_one :show_button, lambda { |**kwargs|
       ButtonComponent.new(
-        data: { action_menu_target: "button", testid: "action-menu-btn" },
-        popovertarget: @menu_id,
+        **popover_trigger_attributes(
+          popovertarget: menu_id,
+          data: { testid: "action-menu-btn" }
+        ),
         **kwargs
       )
     }

data/app/components/anchor/anchor_view_components.ts

@@ -1,29 +1,29 @@
 import "@oddbird/popover-polyfill";
 
-import ActionMenuController from "./action_menu_controller";
 import AutocompleteController from "./autocomplete_controller";
 import DialogController from "./dialog_controller";
 import InvokerController from "./invoker_controller";
+import PopoverController from "./popover_controller";
+import Sortable from "stimulus-sortable";
 import ToastController from "./toast_controller";
 import ToggleController from "./toggle_controller";
-import Sortable from "stimulus-sortable";
 import { Application } from "@hotwired/stimulus";
 
 export function registerAnchorControllers(application: Application) {
-  application.register("action-menu", ActionMenuController);
   application.register("autocomplete", AutocompleteController);
   application.register("dialog", DialogController);
   application.register("invoker", InvokerController);
-  application.register("sortable", Sortable)
+  application.register("popover", PopoverController);
+  application.register("sortable", Sortable);
   application.register("toast", ToastController);
   application.register("toggle", ToggleController);
 }
 
 export {
-  ActionMenuController,
   AutocompleteController,
   DialogController,
   InvokerController,
+  PopoverController,
   ToastController,
-  ToggleController
+  ToggleController,
 };

data/app/components/anchor/popover_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div(
+  class: "contents",
+  data: { controller: "popover" },
+) do %>
+  <%= trigger if trigger? %>
+
+  <%= tag.div(
+    class: class_names(
+      "absolute -left-full -top-full m-0 bg-white rounded border border-subdued popover-open:block",
+      classes
+    ),
+    data: { action: "toggle->popover#positionPopover" },
+    id:,
+    popover: "auto",
+  ) do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/anchor/popover_component.rb

@@ -0,0 +1,5 @@
+module Anchor
+  class PopoverComponent < Component
+    renders_one :trigger
+  end
+end

data/app/components/anchor/{action_menu_controller.ts → popover_controller.ts}

@@ -10,10 +10,7 @@ export default class extends Controller<HTMLDivElement> {
     const popover = event.target;
     computePosition(this.buttonTarget, popover, {
       placement: "bottom-start",
-      middleware: [
-        flip(),
-        offset(4),
-      ]
+      middleware: [flip(), offset(4)],
     }).then(({ x, y }) => {
       Object.assign(popover.style, {
         left: `${x}px`,

data/app/components/anchor/table_component.en.yml

@@ -1,2 +1,3 @@
 en:
   default_empty_message: There is no information to display
+  total: "Total: %{count}"

data/app/components/anchor/table_component.html.erb

@@ -33,7 +33,7 @@
                 "pl-8 py-3 pr-2 bg-[url('assets/icons/menu.svg')] bg-[length:16px_16px] bg-[8px_center] bg-no-repeat": sortable? && index.zero?,
                 "px-2 py-3": !sortable? || index.positive?,
               ),
-              data: { testid: "tr-#{model.id}-td-#{index}" },
+              data: { testid: "tr-#{model.id}-td-#{column.header.to_s.parameterize}" },
             ) %>
           <% end
         end
@@ -41,7 +41,11 @@
     end %>
   </table>
 
-  <% if data.empty?  %>
-    <%= tag.p empty_message, class: "text-base text-center mt-6" %>
-  <% end  %>
+  <% if show_total && data.any? %>
+    <%= tag.div total, class: "mt-3 text-base font-semibold" %>
+  <% end %>
+
+  <% if data.empty? %>
+    <%= tag.p empty_message, class: "text-base text-center mt-6", data: { testid: "empty-table-state" } %>
+  <% end %>
 </div>

data/app/components/anchor/table_component.rb

@@ -1,22 +1,25 @@
 module Anchor
   class TableComponent < Component
     renders_many :columns, "ColumnComponent"
-    renders_one :link
 
-    attr_reader :data, :sortable, :caption
+    attr_reader :data, :sortable, :caption, :rows_link_to, :show_total
 
     def initialize(
       data:,
       caption: nil,
       empty_message: nil,
+      rows_link_to: nil,
       sort_url: nil,
-      sortable: false
+      sortable: false,
+      show_total: false
     )
       @data = data
       @empty_message = empty_message
+      @rows_link_to = rows_link_to
       @sortable = sortable
       @sort_url = sort_url
       @caption = caption
+      @show_total = show_total
 
       super
     end
@@ -29,7 +32,7 @@ module Anchor
 
     def row_classes
       row_classes = %w(border-b focus-within:bg-grey-10)
-      if link?
+      if rows_link_to.present?
         row_classes += %w(hover:bg-grey-10 hover:cursor-pointer)
       end
       if sortable?
@@ -40,8 +43,8 @@ module Anchor
 
     def maybe_link(model, column, index, view_context)
       value = value_for(model, column)
-      if link?
-        path = "#{link}#{model.id}"
+      if rows_link_to.present?
+        path = rows_link_to.call(model)
         if index.zero?
           text = view_context.link_to(value, path)
         else
@@ -91,6 +94,10 @@ module Anchor
       columns.present?
     end
 
+    def total
+      t(".total", count: data.size)
+    end
+
     class ColumnComponent < Anchor::Component
       attr_reader :header, :value
 

data/app/helpers/anchor/view_helper.rb

@@ -11,6 +11,7 @@ module Anchor
       icon
       loading_indicator
       panel
+      popover
       prose
       side_nav
       tab_bar
@@ -68,5 +69,12 @@ module Anchor
 
       doc.to_html.html_safe
     end
+
+    def popover_trigger_attributes(popovertarget:, data: {})
+      {
+        data: { popover_target: "button", **data },
+        popovertarget:,
+      }
+    end
   end
 end

data/lib/anchor/view_components/version.rb

@@ -1,5 +1,5 @@
 module Anchor
   module ViewComponents
-    VERSION = "0.11.3".freeze
+    VERSION = "0.12.0".freeze
   end
 end

data/previews/anchor/table_component_preview.rb

@@ -14,8 +14,11 @@ module Anchor
     end
 
     def playground
-      demo_table = Anchor::TableComponent.new(data:, caption: "A demo table")
-      render demo_table do |table|
+      render Anchor::TableComponent.new(
+        data:,
+        caption: "A demo table",
+        show_total: true
+      ) do |table|
         table.with_column(header: "Id", value: :id)
         table.with_column(header: "Name", value: -> { _1.name.capitalize })
       end
@@ -41,7 +44,7 @@ module Anchor
     end
 
     def empty
-      render Anchor::TableComponent.new(data: []) do |table|
+      render Anchor::TableComponent.new(data: [], show_total: true) do |table|
         table.with_column(header: "Id", value: :id)
         table.with_column(header: "Name", value: -> { _1.name.capitalize })
       end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.11.3
+  version: 0.12.0
 platform: ruby
 authors:
 - Buoy Software
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-06 00:00:00.000000000 Z
+date: 2023-09-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -62,7 +62,6 @@ files:
 - app/assets/stylesheets/components/toast.css
 - app/components/anchor/action_menu_component.html.erb
 - app/components/anchor/action_menu_component.rb
-- app/components/anchor/action_menu_controller.ts
 - app/components/anchor/anchor_view_components.ts
 - app/components/anchor/autocomplete_component.en.yml
 - app/components/anchor/autocomplete_component.html.erb
@@ -95,6 +94,9 @@ files:
 - app/components/anchor/panel/header_component.rb
 - app/components/anchor/panel_component.html.erb
 - app/components/anchor/panel_component.rb
+- app/components/anchor/popover_component.html.erb
+- app/components/anchor/popover_component.rb
+- app/components/anchor/popover_controller.ts
 - app/components/anchor/prose_component.html.erb
 - app/components/anchor/prose_component.rb
 - app/components/anchor/side_nav_component.en.yml
@@ -160,7 +162,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.18
+rubygems_version: 3.4.10
 signing_key:
 specification_version: 4
 summary: ViewComponents for Buoy’s design system, Anchor