Merge pull request #817 from NoelDeMartin/769-header

#769 Prepare utils for Header component

Author: NoelDeMartin

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "solid-ui",
-	"version": "3.1.3-7",
+	"version": "3.1.3-8",
 	"description": "UI library for Solid applications",
 	"main": "dist/index.cjs.js",
 	"types": "dist/index.d.ts",
@@ -26,6 +26,12 @@
 			"types": "./dist/theme.css.d.ts",
 			"import": "./dist/theme.css",
 			"require": "./dist/theme.css"
+		},
+		"./breakpoints.css": {
+			"style": "./dist/breakpoints.css",
+			"types": "./dist/breakpoints.css.d.ts",
+			"import": "./dist/breakpoints.css",
+			"require": "./dist/breakpoints.css"
 		}
 	},
 	"files": [
@@ -115,7 +121,6 @@
 		"@storybook/addon-docs": "10.4.2",
 		"@storybook/addon-links": "10.4.2",
 		"@storybook/web-components-vite": "10.4.2",
-		"@tailwindcss/postcss": "^4.3.0",
 		"@tailwindcss/vite": "^4.3.0",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/user-event": "^13.5.0",

package.json

@@ -13,7 +13,7 @@ const meta = {
   }
 } as const
 
-const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-ui-account></solid-ui-account>`)
+const render = defineAuthStoryRender(() => html`<solid-ui-account></solid-ui-account>`)
 
 export default meta
 

src/assets/icons/solid-emblem.svg

@@ -1,5 +1,6 @@
 import { consume } from '@lit/context'
-import { html } from 'lit'
+import { html, nothing, TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
 import { customElement, WebComponent } from '@/lib/components'
 import { authContext, AuthContext, DEFAULT_AUTH_CONTEXT } from '@/lib/auth'
 
@@ -17,13 +18,22 @@ import '~icons/lucide/user'
 
 import styles from './Account.styles.css'
 
+export interface AccountMenuItem {
+  label: string | TemplateResult
+  href?: string
+  onSelected?(): void
+}
+
 @customElement('solid-ui-account')
 export default class Account extends WebComponent {
   static styles = styles
   static states = {
     loggedIn: (component: Account) => !!component.auth.account,
   }
 
+  @property({ type: Array })
+  accessor menuItems: AccountMenuItem[] = []
+
   @consume({ context: authContext, subscribe: true })
   private accessor auth: AuthContext = DEFAULT_AUTH_CONTEXT
 
@@ -66,6 +76,11 @@ export default class Account extends WebComponent {
                 <icon-lucide-chevron-down slot="right-icon"></icon-lucide-chevron-down>
             </button>
 
+            ${this.menuItems.map(menuItem => html`
+                <solid-ui-menu-item .href=${menuItem.href ?? nothing} @solid-ui-select=${() => menuItem.onSelected?.()}>
+                    ${menuItem.label}
+                </solid-ui-menu-item>
+            `)}
             <solid-ui-logout-button>
                 <solid-ui-menu-item slot="trigger">
                     <icon-lucide-log-out slot="left-icon"></icon-lucide-log-out>

src/components/account/Account.stories.ts

@@ -1,4 +1,4 @@
-import Account from './Account'
+import Account, { type AccountMenuItem } from './Account'
 
-export { Account }
+export { Account, type AccountMenuItem }
 export default Account

src/components/account/Account.ts

@@ -1,15 +1,18 @@
 :host {
-    width: 100%;
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 5px;
-    padding: 10px;
-    border-radius: 5px;
-    color: var(--solid-ui-color-gray-600);
-    font-weight: 500;
-    font-size: var(--solid-ui-font-size-md);
+    & > a,
+    & > div {
+        width: 100%;
+        display: flex;
+        position: relative;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 5px;
+        padding: 10px;
+        border-radius: 5px;
+        color: var(--solid-ui-color-gray-600);
+        font-weight: 500;
+        font-size: var(--solid-ui-font-size-md);
+    }
 
     &:hover {
         background-color: var(--solid-ui-color-slate-200);

src/components/account/index.ts

@@ -26,9 +26,11 @@ export default class MenuItem extends WebComponent {
     }
 
     return html`
-        <slot name="left-icon"></slot>
-        <slot></slot>
-        <slot name="right-icon"></slot>
+        <div>
+            <slot name="left-icon"></slot>
+            <slot></slot>
+            <slot name="right-icon"></slot>
+        </div>
     `
   }
 

src/components/header/index.ts

@@ -0,0 +1,3 @@
+:host {
+    display: inline-flex;
+}