anchor_view_components 0.11.3 → 0.11.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4a4f71788695a998ba2ff334bdf87024cb81ba965d0a63708932a4caca25d68
-  data.tar.gz: 19e5153cbec09a3b31ab90eab613dd0b09e9cc509aaa1faf23f0a84a0b53e259
+  metadata.gz: 54fe54f9b32e62f69edd813a0fa7c888da757f3fb35ea99c9ec7b2942c96b85e
+  data.tar.gz: ca892dda3d5ea422838b0fa2af607ab4159b8e6ea522b61d4c8a3580b014c510
 SHA512:
-  metadata.gz: 5f67ef2e00c863d8260db4644bc5d43c733cad018ef07388ae4ae8535fa97bd976bb07c3e5d72dd4c3b3044ba4fcc6460cfeb8ba5e0602145afcef59895691eb
-  data.tar.gz: 9cbeb4d0ef16acff7592175836ea0cba5314770351bc1b15c3199b53509b0d24c015c53c468f2113580ba968e6d4e40519a69c55d4b2ad6f460ee46b17326416
+  metadata.gz: e11eb6d50799d5664f7b1a7262b06fa4d1cd0e3c8d4763ca5098ebd574887b631a8a1bf8c4e2cc037d79c57318d91b9d21aa651ea3cd7db13e167fe2ab4e9eb4
+  data.tar.gz: 1db50607d4d1c83cc8d9884dfae24a4ac280904d56336cbff5263cc84def5ae49568509dcceb0e9c1450cb907fbcc2a6beb5c365a2453b3f657fa7942f9c152c

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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

@@ -41,7 +41,11 @@
     end %>
   </table>
 
-  <% if data.empty?  %>
+  <% if show_total %>
+    <%= 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" %>
-  <% end  %>
+  <% end %>
 </div>

data/app/components/anchor/table_component.rb

@@ -3,20 +3,22 @@ module Anchor
     renders_many :columns, "ColumnComponent"
     renders_one :link
 
-    attr_reader :data, :sortable, :caption
+    attr_reader :data, :sortable, :caption, :show_total
 
     def initialize(
       data:,
       caption: nil,
       empty_message: nil,
       sort_url: nil,
-      sortable: false
+      sortable: false,
+      show_total: false
     )
       @data = data
       @empty_message = empty_message
       @sortable = sortable
       @sort_url = sort_url
       @caption = caption
+      @show_total = show_total
 
       super
     end
@@ -91,6 +93,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.11.4".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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.11.3
+  version: 0.11.4
 platform: ruby
 authors:
 - Buoy Software
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-06 00:00:00.000000000 Z
+date: 2023-09-07 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.19
 signing_key:
 specification_version: 4
 summary: ViewComponents for Buoy’s design system, Anchor