@revenexx/studio-shared 0.4.1 → 0.4.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "studio-shared",
   "configKey": "studioShared",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/components/Shared/SidebarNav.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { SidebarMinimalistic as CollapseIcon } from "#solar-icons";
-import { SIDEBAR_BEST_MATCH, sidebarBestMatch, sidebarItemKey } from "../../lib/sidebarNav";
+import { SIDEBAR_BEST_MATCH, sidebarBestMatch, sidebarItemKey, sidebarRevealScrollTop } from "../../lib/sidebarNav";
 import SidebarNavLink from "./SidebarNavLink.vue";
 import SidebarNavAreas from "./SidebarNavAreas.vue";
 const props = defineProps({
@@ -24,8 +24,11 @@ const scroller = ref(null);
 const route = useRoute();
 function revealCurrent() {
   nextTick(() => {
-    const row = scroller.value?.querySelector("[data-nav-current]");
-    row?.scrollIntoView({ block: "nearest" });
+    const view = scroller.value;
+    const row = view?.querySelector("[data-nav-current]");
+    if (!view || !row) return;
+    const next = sidebarRevealScrollTop(view.getBoundingClientRect(), row.getBoundingClientRect(), view.scrollTop);
+    if (next !== view.scrollTop) view.scrollTop = next;
   });
 }
 provide(SIDEBAR_BEST_MATCH, computed(() => sidebarBestMatch(props.sections, route.fullPath)));

package/dist/runtime/lib/sidebarNav.d.ts

@@ -51,3 +51,21 @@ export declare function sidebarItemIsCurrent(item: SidebarNavItem, path: string,
  * section (Settings, Apps, …) from rendering a dead row.
  */
 export declare function sidebarItemTarget(item: SidebarNavItem): string | undefined;
+/** A box on screen, as `getBoundingClientRect` reports it — only what the sum needs. */
+interface VerticalBox {
+    top: number;
+    height: number;
+}
+/**
+ * Where the sidebar's scroller has to stand for the current row to be in sight,
+ * moving as little as possible: the row's top edge when it sits above the view,
+ * its bottom edge when below, and nowhere when it is already visible.
+ *
+ * This is `scrollIntoView({ block: 'nearest' })` done by hand. The call itself is
+ * not usable here: Chrome also moves the point the next Tab starts from to the row
+ * it scrolled to, so after a page load the first Tab skipped the host's
+ * *Skip to content* and everything before the current row (IN-55). Setting the
+ * scroller's `scrollTop` moves the list and leaves the keyboard where it was.
+ */
+export declare function sidebarRevealScrollTop(view: VerticalBox, row: VerticalBox, scrollTop: number): number;
+export {};

package/dist/runtime/lib/sidebarNav.js

@@ -39,3 +39,10 @@ export function sidebarItemTarget(item) {
   }
   return void 0;
 }
+export function sidebarRevealScrollTop(view, row, scrollTop) {
+  const top = row.top - view.top + scrollTop;
+  const bottom = top + row.height;
+  if (top < scrollTop) return top;
+  if (bottom > scrollTop + view.height) return Math.min(top, bottom - view.height);
+  return scrollTop;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-shared",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "description": "Shared revenexx Studio shell primitives (PageHeader, SidebarNav, StateCard, DataTable, …) + the platform provider contract (usePlatformAuth/usePlatformTenant). A Nuxt module — add it to `modules`.",
   "main": "./dist/module.mjs",