release: 1.3.0

wbrowar · wbrowar · commit 45209972917c · 2025-02-05T20:56:45.000-05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.3.0 - 2025-02-05
+### Added
+- Added the ability to add a popover to the greeting area. This can be used to add a user account-specific menu or user details.
+
+
 ## 1.2.1 - 2025-02-03
 ### Added
 - Styled the scrollbars that appear on `<admin-bar>` and `<admin-bar-button>` popover elements.
diff --git a/README.md b/README.md
@@ -116,11 +116,12 @@ Now your custom text will appear. If you would also like to add an avatar next t
 
 ### Admin Bar Slots
 
-| Slot Name  | Description                                                                                                                                                                                                                                                               |
-|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `default`  | The `default` slot is where you would place `<admin-bar-button>` elements, but it can also be used for other elements. All children in the `default` slot will be laid out by CSS Flexbox and the contents will horizontally scroll when it gets too wide.                |
-| `greeting` | This slot is meant to let the logged-in user verify they are logged in, but any HTML or text can appear in the `greeting` slot.                                                                                                                                           |
-| `logout`   | When `show-logout` is set, a default logout button will be rendered, using the `logout-href` and `logout-label` attributes. Adding elements into the `logout` slot will repace the default logout button, allowing you to use your own `<admin-bar-button>` in its place. |
+| Slot Name          | Description                                                                                                                                                                                                                                                               |
+|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `default`          | The `default` slot is where you would place `<admin-bar-button>` elements, but it can also be used for other elements. All children in the `default` slot will be laid out by CSS Flexbox and the contents will horizontally scroll when it gets too wide.                |
+| `greeting`         | This slot is meant to let the logged-in user verify they are logged in, but any HTML or text can appear in the `greeting` slot.                                                                                                                                           |
+| `greeting-popover` | Turns the `greeting` slot into a button and displays this slot content in a popover.                                                                                                                                                                                      |
+| `logout`           | When `show-logout` is set, a default logout button will be rendered, using the `logout-href` and `logout-label` attributes. Adding elements into the `logout` slot will repace the default logout button, allowing you to use your own `<admin-bar-button>` in its place. |
 
 ## Customizing Add Admin Bar Buttons
 
diff --git a/index.html b/index.html
@@ -38,6 +38,11 @@
   </head>
   <body>
     <admin-bar class="sticky" show-greeting show-environment show-logout avatar-alt="A Cat as an avatar" avatar-src="https://picsum.photos/150/150" greeting-text="Hi, Author">
+      <nav slot="greeting-popover">
+        <admin-bar-text multi-line label-content="ADMIN"><div style="margin-inline-end: 1em;"><strong style="display: block">Author Name</strong><em style="display: block">author-username</em></div></admin-bar-text>
+        <admin-bar-button button-href="/" style="border-block-start: 1px solid color-mix(in srgb, var(--admin-bar-button-color-bg-hover), transparent 80%);">Profile</admin-bar-button>
+        <admin-bar-button button-href="/">Edit Author</admin-bar-button>
+      </nav>
       <admin-bar-button label-text="Label Text"><span slot="label-before"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="icon"><path fill-rule="evenodd" d="M2.5 3A1.5 1.5 0 001 4.5v4A1.5 1.5 0 002.5 10h6A1.5 1.5 0 0010 8.5v-4A1.5 1.5 0 008.5 3h-6zm11 2A1.5 1.5 0 0012 6.5v7a1.5 1.5 0 001.5 1.5h4a1.5 1.5 0 001.5-1.5v-7A1.5 1.5 0 0017.5 5h-4zm-10 7A1.5 1.5 0 002 13.5v2A1.5 1.5 0 003.5 17h6a1.5 1.5 0 001.5-1.5v-2A1.5 1.5 0 009.5 12h-6z" clip-rule="evenodd" /></svg></span></admin-bar-button>
       <admin-bar-button><span slot="label-before"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.93 228.72"><defs><style>.cls-1{fill:currentColor;}</style></defs><title>edit</title><path class="cls-1" d="M227.35,48.35a14.64,14.64,0,0,0-2.79-17L197.84,4.58a15.47,15.47,0,0,0-17.42-3.17l-5.95,4.74L14.29,166.33,0,228.72l62.39-14.29L222.57,54.26ZM32.59,210.92a30,30,0,0,0-14.84-14.58l5.53-24.15,14.14,6.91,13.06,13.06,6.86,13,0,0Z"/></svg></span>Label Slot</admin-bar-button>
       <admin-bar-button button-href="https://craftcms.com" label-text="Badge + Link"><span slot="label-before" style="--admin-bar-text-padding: 0"><admin-bar-text label-content="5"></admin-bar-text></span></admin-bar-button>
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "test:open": "cypress open"
   },
   "name": "admin-bar-component",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A framework- and CMS-agnostic admin bar web component.",
   "type": "module",
   "main": "dist/admin-bar.js",
diff --git a/src/components/AdminBar.ts b/src/components/AdminBar.ts
@@ -1,6 +1,6 @@
 import { css, html, LitElement, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
 import './AdminBarButton.ts'
 import { glassStyles } from './css.ts'
@@ -75,6 +75,10 @@ export class AdminBar extends LitElement {
       padding: 0 clamp(6px, 2vw, 15px);
       white-space: nowrap;
 
+      &:has(+ [slot='popover']) {
+        padding: 0;
+      }
+
       &:has(img) {
         display: grid;
 
@@ -186,6 +190,28 @@ export class AdminBar extends LitElement {
   @property({ attribute: 'show-logout', type: Boolean })
   showLogout = false
 
+  /**
+   * =========================================================================
+   * STATE
+   * =========================================================================
+   */
+  /**
+   * Tracks whether the `greeting-popover` slot has content.
+   */
+  @state()
+  private _hasGreetingPopoverSlot = false
+
+  /**
+   * =========================================================================
+   * SLOTS
+   * =========================================================================
+   */
+  handleGreetingPopoverSlotchange(e: any) {
+    const childNodes = e.target.assignedNodes({ flatten: true })
+
+    this._hasGreetingPopoverSlot = childNodes.length > 0
+  }
+
   /**
    * ===========================================================================
    * LIFECYCLE
@@ -199,15 +225,29 @@ export class AdminBar extends LitElement {
       'admin-bar--logout': this.showLogout,
     }
 
-    const greetingContent = this.showGreeting
-      ? html`
+    const greetingInnerContent = this.showGreeting
+      ? html`<div class="greeting">
           ${this.avatarSrc
             ? html`<img alt="${this.avatarAlt}" src="${this.avatarSrc}" width="25px" height="25px" />`
             : nothing}
           <span><slot name="greeting">${this.greetingText}</slot></span>
-        `
+        </div>`
       : nothing
 
+    const greetingContent = this._hasGreetingPopoverSlot
+      ? html`
+          <admin-bar-button>
+            ${greetingInnerContent}
+            <div slot="popover">
+              <slot name="greeting-popover" @slotchange="${this.handleGreetingPopoverSlotchange}"></slot>
+            </div>
+          </admin-bar-button>
+        `
+      : html`${greetingInnerContent}<slot
+            name="greeting-popover"
+            @slotchange="${this.handleGreetingPopoverSlotchange}"
+          ></slot>`
+
     const logoutContent = this.showLogout
       ? html`<slot name="logout"
           ><admin-bar-button
@@ -223,7 +263,7 @@ export class AdminBar extends LitElement {
         <div class="glass-surface"></div>
         <div class="glass-edge"></div>
         <div class="environment"></div>
-        <div class="greeting">${greetingContent}</div>
+        ${greetingContent}
         <div class="buttons"><slot></slot></div>
         <div class="logout">${logoutContent}</div>
       </nav>
diff --git a/src/components/AdminBarButton.ts b/src/components/AdminBarButton.ts
@@ -147,7 +147,7 @@ export class AdminBarButton extends LitElement {
    * =========================================================================
    */
   /**
-   * List of guides being displayed, along with their related information.
+   * Tracks whether the `popover` slot has content.
    */
   @state()
   private _hasPopoverSlot = false
@@ -157,9 +157,6 @@ export class AdminBarButton extends LitElement {
    * SLOTS
    * =========================================================================
    */
-  // @queryAssignedNodes({ slot: 'popover' })
-  // _popoverChildren!: Array<Node>
-
   handlePopoverSlotchange(e: any) {
     const childNodes = e.target.assignedNodes({ flatten: true })
 
