@purestack/ts-components 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-components",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-components.mjs",
   "types": "./dist/ts-components.d.mts",
@@ -46,15 +46,15 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@purestack/ts-minidom": "^1.1.2",
-    "@purestack/ts-render": "^1.1.2"
+    "@purestack/ts-minidom": "^1.1.4",
+    "@purestack/ts-render": "^1.1.4"
   },
   "dependencies": {
-    "@purestack/ts-common": "^1.1.2",
-    "@purestack/ts-css": "^1.1.2",
-    "@purestack/ts-page-scripts": "^1.1.2",
-    "@purestack/ts-style": "^1.1.2",
-    "@purestack/ts-util": "^1.1.2",
+    "@purestack/ts-common": "^1.1.4",
+    "@purestack/ts-css": "^1.1.4",
+    "@purestack/ts-page-scripts": "^1.1.4",
+    "@purestack/ts-style": "^1.1.4",
+    "@purestack/ts-util": "^1.1.4",
     "regor": "^1.7.3"
   },
   "regorComponents": [

package/src/standard/navMenu/navMenu.ts

@@ -27,10 +27,14 @@ export interface NavMenu {
   tone?: RefOrValue<SemanticTone>
   variant?: RefOrValue<ComponentVariant>
   variantMode?: RefOrValue<ComponentVariantMode>
+  signInSignedIn?: RefOrValue<boolean>
   signInAvatarSrc?: RefOrValue<string>
   signInAvatarAlt?: RefOrValue<string>
   classes?: ComputedRef<string>
-  searchEnabled?: boolean
+  search?: RefOrValue<boolean>
+  signInEnabled?: RefOrValue<boolean>
+  resolvedSignInEnabled?: ComputedRef<boolean>
+  searchEnabled?: ComputedRef<boolean>
   navRoot?: string
 }
 
@@ -102,8 +106,11 @@ const navMenuTemplate = html`<nav
   <div class="nav__header-row">
     <div class="nav__header">Navigation</div>
     <SignIn
+      r-if="resolvedSignInEnabled"
       class="nav__account"
-      :avatarSrc="signInAvatarSrc"
+      :enabled="resolvedSignInEnabled"
+        :signedIn="signInSignedIn"
+        :avatarSrc="signInAvatarSrc"
       :avatarAlt="signInAvatarAlt"/>
     <button
       class="nav__panel-toggle tone-fill-surface-all tone-text-surface-all tone-border-surface-all"
@@ -233,9 +240,12 @@ function defineNavMenuComponent() {
     props: [
       'items',
       'currentUrl',
+      'search',
+      'signInEnabled',
       'tone',
       'variant',
       'variantMode',
+      'signInSignedIn',
       'signInAvatarSrc',
       'signInAvatarAlt',
     ],
@@ -253,7 +263,13 @@ function defineNavMenuComponent() {
             },
           ),
         ),
-        searchEnabled: context?.site.pagefind?.enabled === true,
+        searchEnabled: computed(
+          () => unref(props.search) ?? context?.site.pagefind?.enabled === true,
+        ),
+        resolvedSignInEnabled: computed(
+          () =>
+            unref(props.signInEnabled) ?? context?.site.auth?.enabled === true,
+        ),
         navRoot: normalizeNavStateKeyPart(context?.navigation?.root ?? ''),
         navItems: computed(() =>
           buildNavState(

package/src/standard/pageToc/pageToc.ts

@@ -7,6 +7,8 @@ import {
   defineComponent,
   html,
   type RefOrValue,
+  type SRef,
+  unref,
 } from 'regor'
 import {
   type ComponentVariant,
@@ -15,7 +17,7 @@ import {
 } from '../componentVariant'
 
 export interface PageToc {
-  items?: PageOutlineItem[]
+  outline?: PageOutlineItem[] | SRef<PageOutlineItem[]>
   title?: string
   tone?: RefOrValue<SemanticTone>
   variant?: RefOrValue<ComponentVariant>
@@ -119,7 +121,7 @@ function omitSingleDocumentHeading(items: PageOutlineItem[]) {
 }
 
 function resolveItems(props: PageToc, context: TsSsgContext | undefined) {
-  const items = props.items ?? context?.outline ?? []
+  const items = unref(props.outline) ?? context?.outline ?? []
   return toPageTocItems(omitSingleDocumentHeading(items))
 }
 
@@ -131,7 +133,7 @@ function resolveTitle(props: PageToc) {
 
 function definePageTocComponent() {
   return defineComponent<PageToc>(pageTocTemplate, {
-    props: ['items', 'title', 'tone', 'variant', 'variantMode'],
+    props: ['outline', 'title', 'tone', 'variant', 'variantMode'],
     context: (head) => {
       const context = resolveTsSsgContext(head)
       return {

package/src/standard/signIn/signIn.ts

@@ -22,8 +22,11 @@ export interface SignIn {
   tone?: RefOrValue<SemanticTone>
   variant?: RefOrValue<ComponentVariant>
   variantMode?: RefOrValue<ComponentVariantMode>
-  authEnabled?: boolean
-  signUpEnabled?: boolean
+  enabled?: RefOrValue<boolean>
+  signUp?: RefOrValue<boolean>
+  signedIn?: RefOrValue<boolean>
+  authEnabled?: ComputedRef<boolean>
+  signUpEnabled?: ComputedRef<boolean>
   resolvedIcon?: ComputedRef<string>
   resolvedAccountIcon?: ComputedRef<string>
   resolvedLabel?: ComputedRef<string>
@@ -37,6 +40,7 @@ const DEFAULT_SIGN_IN_LABEL = 'Account'
 const signInTemplate = html`<details
   r-if="authEnabled"
   class="sign-in position-relative"
+  :data-signed-in="signedIn"
   data-menu-runtime
   data-menu-align="end"
 >
@@ -134,6 +138,9 @@ const signInTemplate = html`<details
 function defineSignInComponent() {
   return defineComponent<SignIn>(signInTemplate, {
     props: [
+      'enabled',
+      'signUp',
+      'signedIn',
       'avatarSrc',
       'avatarAlt',
       'icon',
@@ -155,8 +162,8 @@ function resolveSignIn(props: SignIn, head: unknown): SignIn {
   const auth = tryResolveTsSsgContext(head)?.site?.auth
   return {
     ...props,
-    authEnabled: auth?.enabled === true,
-    signUpEnabled: auth?.signUp === true,
+    authEnabled: computed(() => unref(props.enabled) ?? auth?.enabled === true),
+    signUpEnabled: computed(() => unref(props.signUp) ?? auth?.signUp === true),
     resolvedIcon: computed(() => unref(props.icon) || DEFAULT_SIGN_IN_ICON),
     resolvedAccountIcon: computed(
       () => unref(props.accountIcon) || DEFAULT_ACCOUNT_ICON,

package/src/standard/signIn/signInStyle.ts

@@ -29,24 +29,30 @@ function registerSignInAuthStateStyles(theme: ThemeMode) {
 
   styleBuilder
     .select(
-      '.sign-in__signed-in-view, :scope.signed-in .sign-in__signed-out-view',
+      '.sign-in__signed-in-view, :scope.signed-in .sign-in:not([data-signed-in="false"]) .sign-in__signed-out-view, .sign-in[data-signed-in="true"] .sign-in__signed-out-view',
       theme,
     )
     .display('none')
 
   styleBuilder
-    .select(':scope.signed-in .sign-in__signed-in-view', theme)
+    .select(
+      ':scope.signed-in .sign-in:not([data-signed-in="false"]) .sign-in__signed-in-view, .sign-in[data-signed-in="true"] .sign-in__signed-in-view',
+      theme,
+    )
     .display('inline-flex')
 
   styleBuilder
     .select(
-      '.sign-in__signed-in-action, :scope.signed-in .sign-in__signed-out-action',
+      '.sign-in__signed-in-action, :scope.signed-in .sign-in:not([data-signed-in="false"]) .sign-in__signed-out-action, .sign-in[data-signed-in="true"] .sign-in__signed-out-action',
       theme,
     )
     .display('none')
 
   styleBuilder
-    .select(':scope.signed-in .sign-in__signed-in-action', theme)
+    .select(
+      ':scope.signed-in .sign-in:not([data-signed-in="false"]) .sign-in__signed-in-action, .sign-in[data-signed-in="true"] .sign-in__signed-in-action',
+      theme,
+    )
     .display('inline-flex')
 }
 

package/src/standard/topBar/topBar.ts

@@ -22,11 +22,14 @@ export interface TopBar {
   resolvedLogoComponent?: ComputedRef<string>
   tone?: RefOrValue<SemanticTone>
   variant?: RefOrValue<ComponentVariant>
+  signInSignedIn?: RefOrValue<boolean>
   signInAvatarSrc?: RefOrValue<string>
   signInAvatarAlt?: RefOrValue<string>
   classes?: ComputedRef<string>
-  searchEnabled?: boolean
-  signInEnabled?: boolean
+  search?: RefOrValue<boolean>
+  searchEnabled?: ComputedRef<boolean>
+  signInEnabled?: RefOrValue<boolean>
+  resolvedSignInEnabled?: ComputedRef<boolean>
 }
 
 const DEFAULT_TOP_BAR_VARIANT: ComponentVariant = 'surfaceAlt'
@@ -40,7 +43,12 @@ function resolveTopBar(context: TsSsgContext, props: TopBar): TopBar {
       () =>
         unref(props.logoComponent) ?? context.site.logo.component ?? 'SiteLogo',
     ),
-    searchEnabled: context.site.pagefind?.enabled === true,
+    searchEnabled: computed(
+      () => unref(props.search) ?? context.site.pagefind?.enabled === true,
+    ),
+    resolvedSignInEnabled: computed(
+      () => unref(props.signInEnabled) ?? context.site.auth?.enabled === true,
+    ),
     classes: computed(() =>
       resolveComponentClasses(props, {
         defaultVariant: DEFAULT_TOP_BAR_VARIANT,
@@ -66,8 +74,10 @@ const topBarTemplate = html`<input
     <Flex class="topbar__controls flex-none" align="center" justify="end">
       <ThemeToggle/>
       <SignIn
-        r-if="signInEnabled"
+        r-if="resolvedSignInEnabled"
         class="topbar__account"
+        :enabled="resolvedSignInEnabled"
+        :signedIn="signInSignedIn"
         :avatarSrc="signInAvatarSrc"
         :avatarAlt="signInAvatarAlt"/>
       <label
@@ -87,10 +97,11 @@ function defineTopBarComponent() {
       'logoComponent',
       'tone',
       'variant',
+      'signInSignedIn',
       'signInAvatarSrc',
       'signInAvatarAlt',
       'signInEnabled',
-      'searchEnabled',
+      'search',
     ],
     context: (head) => resolveTopBar(resolveTsSsgContext(head), head.props),
   })