wirejs-components 0.1.108 → 0.1.109

package/dist/components/account-menu.d.ts

@@ -4,9 +4,8 @@ export declare const AccountMenu: ({ api, initialState, topItems, bottomItems }:
     initialState?: AuthenticationMachineState;
     topItems?: (HTMLElement | ((state: AuthenticationState | undefined) => HTMLElement))[];
     bottomItems?: (HTMLElement | ((state: AuthenticationState | undefined) => HTMLElement))[];
-}) => HTMLElement & {
+}) => Promise<HTMLElement & {
     data: {
-        user: string;
         menu: HTMLDivElement;
         topSubmenu: HTMLElement[];
         authenticator: HTMLElement & {
@@ -53,7 +52,6 @@ export declare const AccountMenu: ({ api, initialState, topItems, bottomItems }:
     };
 } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
     data: {
-        user: string;
         menu: HTMLDivElement;
         topSubmenu: HTMLElement[];
         authenticator: HTMLElement & {
@@ -100,7 +98,6 @@ export declare const AccountMenu: ({ api, initialState, topItems, bottomItems }:
     };
 }> & import("wirejs-dom/v2").Extend<HTMLElement & {
     data: {
-        user: string;
         menu: HTMLDivElement;
         topSubmenu: HTMLElement[];
         authenticator: HTMLElement & {
@@ -145,4 +142,4 @@ export declare const AccountMenu: ({ api, initialState, topItems, bottomItems }:
         }>;
         bottomSubmenu: HTMLElement[];
     };
-}>;
+}>>;

package/dist/components/account-menu.js

@@ -1,5 +1,6 @@
 import { html, node, id, list, css } from 'wirejs-dom/v2';
 import { Authenticator } from './authenticator.js';
+import { AuthenticatedContent } from './authenticated-content.js';
 import { AuthMonitor } from '../utils/auth-monitor.js';
 const style = css `
 	accountmenu {
@@ -15,7 +16,8 @@ const style = css `
 		border: 1px solid silver;
 		border-radius: 0.25rem;
 		cursor: pointer;
-		padding: 0 0.25em;
+		padding: 0 0.25rem;
+		font-size: 1.5rem;
 	}
 
 	.menu {
@@ -28,7 +30,7 @@ const style = css `
 		box-shadow: -0.125rem 0.125rem 0.25rem lightgray;
 	}
 `;
-export const AccountMenu = ({ api, initialState, topItems, bottomItems }) => {
+export const AccountMenu = async ({ api, initialState, topItems, bottomItems }) => {
     const uiState = {
         expanded: false
     };
@@ -60,7 +62,6 @@ export const AccountMenu = ({ api, initialState, topItems, bottomItems }) => {
         const isSameState = lastKnownState && lastKnownState.state === state?.state;
         const hasMessage = state?.message;
         lastKnownState = state;
-        self.data.user = state?.user?.username || '';
         if (!isSameState && !hasMessage)
             close();
         if (!isSameState) {
@@ -87,9 +88,19 @@ export const AccountMenu = ({ api, initialState, topItems, bottomItems }) => {
     const getBottomMenu = () => (bottomItems || []).map(item => typeof item === 'function' ? item(lastKnownState) : item);
     const self = html `<accountmenu>
 		${style}
-		<div class='label'>${node('user', initialState?.user?.username || '', name => name ? html `<b>${name}</b>` : html `<i>Anonymous</i>`)}</div>
-		<div class='handle' onclick=${handleMenuClick}>☰</div>
+		<div class='handle' onclick=${handleMenuClick}>${await AuthenticatedContent({
+        authenticated: (user) => html `<span>📋</span>`,
+        unauthenticated: () => html `<span>🫥</span>`,
+        loading: () => html `<span>⏳</span>`
+    })}</div>
 		<div class='menu' ${id('menu', HTMLDivElement)}>
+			${await AuthenticatedContent({
+        authenticated: (user) => html `<p>
+					Signed in as <b>${user.username}</b>.
+				</p>`,
+        unauthenticated: () => html `<p>Your are <i>Anonymous</i>.</p>`,
+        loading: () => html `<i>Loading ...</i>`
+    })}
 			${list('topSubmenu', getTopMenu())}
 			${node('authenticator', authenticator)}
 			${list('bottomSubmenu', getBottomMenu())}
@@ -98,7 +109,6 @@ export const AccountMenu = ({ api, initialState, topItems, bottomItems }) => {
         if (!initialState) {
             const state = await api.getState(null);
             authenticator.data.setState(state);
-            self.data.user = state.user?.username || '';
         }
     });
     return self;

package/dist/components/authenticated-content.d.ts

@@ -2,17 +2,18 @@ import type { User } from "wirejs-resources";
 export declare function AuthenticatedContent(options: {
     authenticated: (user: User) => HTMLElement | Promise<HTMLElement>;
     unauthenticated: () => HTMLElement | Promise<HTMLElement>;
+    loading?: () => HTMLElement | string;
     containerElement?: string;
 }): Promise<HTMLElement & {
     data: {
-        content: HTMLElement;
+        content: string | HTMLElement;
     };
 } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
     data: {
-        content: HTMLElement;
+        content: string | HTMLElement;
     };
 }> & import("wirejs-dom/v2").Extend<HTMLElement & {
     data: {
-        content: HTMLElement;
+        content: string | HTMLElement;
     };
 }>>;

package/dist/components/authenticated-content.js

@@ -6,9 +6,9 @@ export async function AuthenticatedContent(options) {
         return state.state;
     };
     const getContent = async (state) => {
-        return state?.state === 'authenticated'
+        return state ? (state.state === 'authenticated'
             ? await options.authenticated(state.user)
-            : await options.unauthenticated();
+            : await options.unauthenticated()) : (options.loading?.() ?? html `<span>⏳</span>`);
     };
     const initialContent = await getContent(AuthMonitor.lastKnownState);
     const render = async (state) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wirejs-components",
-	"version": "0.1.108",
+	"version": "0.1.109",
 	"description": "Client-side components for wirejs apps, including basic UI and resource-aware components.",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -31,7 +31,7 @@
 	"homepage": "https://github.com/svidgen/create-wirejs-app#readme",
 	"dependencies": {
 		"wirejs-dom": "^1.0.44",
-		"wirejs-resources": "^0.1.165"
+		"wirejs-resources": "^0.1.166"
 	},
 	"devDependencies": {
 		"typescript": "^5.7.3"