keystone_ui 0.39.0 → 0.41.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b11fa4104f5668547e8efeff23c90f69f4c3d1b7374103c33d7dc2c208363acb
-  data.tar.gz: 719716203afcd39869e402674d72a6bf8f1e5f4e7fce163a76c3429ae2bc77e2
+  metadata.gz: fff79f2588c403bbbb1d39b9fec8075955b0f758019fdea442d1dbc081750f99
+  data.tar.gz: f92a6ccfa5f383ccc81952c008c8d3dcd59d61906b36d62de4bb9186a3bfcd58
 SHA512:
-  metadata.gz: b4849b26d1df9c8a45c7721fa966569e6d0f556780b5139a479a73e08c0602ce1db0eab5d4f8bfedcf5a30301cc4d1bba3cffdb0bf82e91a65a3d87c9fdb575c
-  data.tar.gz: 8fdb709bfbf187d4792a76c5057ebec69651fb5d4ba2e5b7a6b527b5e0ae68f437689896a492ec390f46ddc7d330fd3e00e2946588f41932d85bf82e790104e3
+  metadata.gz: f61c6841e06dcb1fed471c93fbfb41f7655b32e44348ea45df84d961c9b735b051f6e40232738e4df478ea34dac3e6a0c48c8172c2367ddb7f90c292fafdb6cf
+  data.tar.gz: d319f7e7a1782535045369da6220ba4dfe0c9fad7a7b15ec8132dddd23b75e69943881df988275cef18b3c41c898afca053d4d2592b3e7e8b091b5acab993e02

data/app/components/keystone/ui/navigation_component.html.erb

@@ -4,15 +4,22 @@
 <% sidebar = capture do %>
   <nav class="<%= SIDEBAR_CLASSES %>">
     <% if logo? %>
-      <div><%= logo %></div>
+      <div class="<%= SIDEBAR_LOGO_CLASSES %>"><%= logo %></div>
     <% end %>
     <% groups.each do |group| %>
-      <div class="<%= SIDEBAR_GROUP_CLASSES %>">
-        <p class="<%= sidebar_group_label_classes(group) %>"><%= group.label %></p>
-        <% group.tabs.each do |tab| %>
-          <a class="<%= sidebar_tab_classes(tab) %>" href="<%= tab.href %>"><%= tab.label %></a>
-        <% end %>
-      </div>
+      <% if group.standalone %>
+        <% tab = group.tabs.first %>
+        <a class="<%= sidebar_tab_classes(tab) %>" href="<%= tab.href %>"><%= tab.label %></a>
+      <% else %>
+        <details class="<%= SIDEBAR_GROUP_CLASSES %>"<%= " open" if group.active %>>
+          <summary class="<%= sidebar_group_label_classes(group) %>"><%= group.label %></summary>
+          <div class="<%= SIDEBAR_GROUP_TABS_CLASSES %>">
+            <% group.tabs.each do |tab| %>
+              <a class="<%= sidebar_tab_classes(tab) %>" href="<%= tab.href %>"><%= tab.label %></a>
+            <% end %>
+          </div>
+        </details>
+      <% end %>
     <% end %>
     <% if menus? %>
       <div class="<%= SIDEBAR_MENUS_CLASSES %>"><%= menus %></div>
@@ -25,6 +32,7 @@
   <%= sidebar unless sidebar_first? %>
 </div>
 <% else %>
+<div>
 <div class="<%= TOP_BAR_CLASSES %>">
 <%= render Keystone::Ui::NavbarComponent.new(sticky: false) do |navbar| %>
   <% if logo? %>
@@ -32,9 +40,14 @@
   <% end %>
   <% navbar.with_desktop_links do %>
     <% groups.each do |group| %>
-      <%= render Keystone::Ui::NavDropdownComponent.new(title: group.label, area: group.label, active: group.active) do %>
-        <% group.tabs.each do |tab| %>
-          <%= render Keystone::Ui::NavItemComponent.new(label: tab.label, href: tab.href, active: tab.active) %>
+      <% if group.standalone %>
+        <% tab = group.tabs.first %>
+        <%= render Keystone::Ui::NavItemComponent.new(label: tab.label, href: tab.href, active: tab.active) %>
+      <% else %>
+        <%= render Keystone::Ui::NavDropdownComponent.new(title: group.label, area: group.label, active: group.active) do %>
+          <% group.tabs.each do |tab| %>
+            <%= render Keystone::Ui::NavItemComponent.new(label: tab.label, href: tab.href, active: tab.active) %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>
@@ -45,4 +58,5 @@
 <% end %>
 </div>
 <%= content %>
+</div>
 <% end %>

data/app/components/keystone/ui/navigation_component.rb

@@ -8,11 +8,17 @@ module Keystone
       TOP_BAR_CLASSES = "hidden lg:block sticky top-0 z-40"
       SIDEBAR_ROW_CLASSES = "lg:flex"
       SIDEBAR_CLASSES = "ks-sidebar hidden lg:flex lg:sticky lg:top-0 lg:h-screen shrink-0 overflow-y-auto"
+      SIDEBAR_LOGO_CLASSES = "ks-sidebar-logo"
       SIDEBAR_GROUP_CLASSES = "flex flex-col"
       SIDEBAR_GROUP_LABEL_CLASSES = "ks-sidebar-group-label"
+      SIDEBAR_GROUP_TABS_CLASSES = "ks-sidebar-group-tabs"
       SIDEBAR_TAB_CLASSES = "ks-sidebar-tab"
       ACTIVE_CLASS = "active"
-      SIDEBAR_MENUS_CLASSES = "mt-auto"
+      SIDEBAR_MENUS_CLASSES = [
+        "mt-auto [&_[data-dropdown-target=menu]]:static [&_[data-controller~=dropdown]]:flex-wrap [&_[data-dropdown-target=menu]]:basis-full",
+        "[&_[data-dropdown-target=menu].hidden]:block [&_[data-dropdown-target=menu].hidden]:h-0 [&_[data-dropdown-target=menu].hidden]:overflow-hidden",
+        "[&_[data-dropdown-target=menu].hidden]:my-0 [&_[data-dropdown-target=menu].hidden]:py-0 [&_[data-dropdown-target=menu].hidden]:invisible"
+      ].join(" ")
       SIDEBAR_CONTENT_CLASSES = "min-w-0 flex-1"
       SIDEBAR_PLACEMENTS = %w[left right].freeze
 

data/lib/keystone_ui/configuration.rb

@@ -31,6 +31,12 @@ module KeystoneUi
       @navigation_groups << group
     end
 
+    def navigation_tab(key, label:, href:, permitted:)
+      group = NavigationGroup.new(label, standalone: true)
+      group.tab(key, label: label, href: href, permitted: permitted)
+      @navigation_groups << group
+    end
+
     def supplied_look(view)
       look_supplier&.call(view)&.to_s
     end

data/lib/keystone_ui/navigation_group.rb

@@ -10,11 +10,16 @@ module KeystoneUi
 
     attr_reader :label, :tabs
 
-    def initialize(label)
+    def initialize(label, standalone: false)
       @label = label
+      @standalone = standalone
       @tabs = []
     end
 
+    def standalone?
+      @standalone
+    end
+
     def tabs_permitted_for(view)
       tabs.select { |tab| tab.permitted.call(view) }
     end

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.39.0"
+  VERSION = "0.41.0"
 end

data/lib/keystone_ui/visible_navigation.rb

@@ -4,7 +4,7 @@ require "keystone_ui/navigation_order"
 
 module KeystoneUi
   class VisibleNavigation
-    Group = Struct.new(:label, :tabs, :active, keyword_init: true)
+    Group = Struct.new(:label, :tabs, :active, :standalone, keyword_init: true)
     Tab = Struct.new(:label, :href, :active, keyword_init: true)
 
     def initialize(declared_groups, view:, saved_order:, current_tab:)
@@ -28,7 +28,7 @@ module KeystoneUi
 
     def visible_group(group, tabs)
       visible_tabs = tabs.map { |tab| visible_tab(tab) }
-      Group.new(label: group.label, tabs: visible_tabs, active: visible_tabs.any?(&:active))
+      Group.new(label: group.label, tabs: visible_tabs, active: visible_tabs.any?(&:active), standalone: group.standalone?)
     end
 
     def visible_tab(tab)

data/the_local/agents/keystone_ui-develop.md

@@ -197,7 +197,10 @@ two exceptions: `ui_page`'s `padding:` treats any value other than `:none` as
      it goes around `yield`. It draws the tabs the app declares with
      `config.navigation_group` as a top bar of menus from `lg:` up, then the
      content, and below `lg:` it draws only the content. It leaves out tabs
-     whose permission check fails and groups with no tab left.
+     whose permission check fails and groups with no tab left. A tab declared
+     outside any group with `config.navigation_tab` is drawn as a plain link
+     in the top bar and as a plain tab with no group label in the sidebar,
+     which does not open or close.
    - Inside its block, `navigation.with_logo do ... end` puts the app's logo at
      the left of the top bar, and `navigation.with_menus do ... end` puts menus
      such as the account menu at its right, so the layout draws no second bar.
@@ -206,8 +209,15 @@ two exceptions: `ui_page`'s `padding:` treats any value other than `:none` as
    - When the preference supplied for `:navigation` holds
      `{ "placement" => "left" }` or `"right"`, it draws a sidebar on that side
      from `lg:` up instead, with each group's label above its tabs, the logo at
-     its top and the menus at its bottom. Any other placement draws the top
-     bar. An `"order"` list of `{ "group" => label, "tabs" => [tab key strings] }`
+     its top and the menus at its bottom. A menu there opens in place: the
+     `data-dropdown-target="menu"` panel inside a `data-controller="dropdown"`
+     element drops onto its own line below its button inside the sidebar, even
+     when the app's own CSS positions it absolutely, as long as that CSS sits
+     in a layer below Tailwind's utilities such as `components`. A closed
+     panel (the `hidden` class) stays invisible and out of the tab order but
+     still counts toward the sidebar's width, so opening a menu never
+     changes the sidebar's width. Any other
+     placement draws the top bar, whose menus still open as dropdowns. An `"order"` list of `{ "group" => label, "tabs" => [tab key strings] }`
      entries draws the named groups and tabs first, in that order, then the
      rest in declared order, ignoring names no longer declared.
    - When the app sets `config.current_tab_supplier`, the tab whose key it

data/the_local/agents/keystone_ui-install.md

@@ -31,6 +31,8 @@ built on ViewComponent; hook it in before building any screen with those helpers
   saves to, and the navigation's placement under the key `:navigation`),
   `navigation_group` (a labelled group of desktop tabs that the navigation
   helper draws, each tab declared with `tab key, label:, href:, permitted:`),
+  `navigation_tab` (a single desktop tab outside any group, declared with
+  `navigation_tab key, label:, href:, permitted:`),
   `current_tab_supplier` (a callable that supplies the key of the declared tab
   the current page belongs to, so the navigation marks it and its group
   active),
@@ -324,6 +326,11 @@ built on ViewComponent; hook it in before building any screen with those helpers
      `href:`, when two tabs share a key, or when a group has no tabs. Drawing
      the declared groups in the layout is done with the navigation helper,
      which belongs to `keystone_ui-develop`.
+   - `navigation_tab key, label:, href:, permitted:` — declares one tab
+     outside any group, such as a Console or Clients tab, in its place among
+     the groups. The navigation helper draws it as a plain link in the top bar
+     and as a plain tab with no group label in the sidebar. A saved `"order"`
+     names it under `"group"` by its label.
    - `current_tab_supplier` — a callable that receives the view and returns the
      key of the declared tab the current page belongs to, or `nil`.
      The navigation shows that tab and its group as active in the top bar and

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.39.0
+  version: 0.41.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.14.0
+        version: 0.16.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.14.0
+        version: 0.16.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement