or3-provider-basic-auth 0.0.8 → 0.0.9

package/README.md

@@ -90,6 +90,11 @@ Strict-mode behavior:
 | `src/runtime/plugins/auth-status.client.ts` | Client auth-status resolver + silent-refresh recovery |
 | `src/runtime/components/*.client.vue` | Provider-owned auth UI (modals, user menu, sidebar button, lock page) |
 
+The registered sidebar auth adapter accepts `layout="rail"` (default) and
+`layout="more-sheet"`. In the More sheet it renders Account/Login with the
+host's shared full-width `.more-row` structure, while keeping the existing
+popover and modal behavior.
+
 ## Troubleshooting
 
 - `Authentication provider is not configured`

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "or3-provider-basic-auth",
   "configKey": "or3-provider-basic-auth",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/BasicAuthChangePasswordModal.client.vue

@@ -84,7 +84,8 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 const modalUi = {
-  content: "sm:max-w-[400px]"
+  overlay: "basic-auth-modal-overlay",
+  content: "basic-auth-modal-content sm:max-w-[400px]"
 };
 const props = defineProps({
   modelValue: { type: Boolean, required: true },

package/dist/runtime/components/BasicAuthRegisterModal.client.vue

@@ -113,7 +113,8 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 const modalUi = {
-  content: "sm:max-w-[420px]"
+  overlay: "basic-auth-modal-overlay",
+  content: "basic-auth-modal-content sm:max-w-[420px]"
 };
 const props = defineProps({
   modelValue: { type: Boolean, required: true }

package/dist/runtime/components/BasicAuthSignInModal.client.vue

@@ -85,7 +85,8 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 const modalUi = {
-  content: "sm:max-w-[380px]"
+  overlay: "basic-auth-modal-overlay",
+  content: "basic-auth-modal-content sm:max-w-[380px]"
 };
 const props = defineProps({
   modelValue: { type: Boolean, required: true }

package/dist/runtime/components/BasicAuthUserMenu.client.d.vue.ts

@@ -1,6 +1,9 @@
+import { type AuthUiLayout } from '../lib/auth-ui-layout.js';
 type __VLS_Props = {
     email?: string;
     displayName?: string;
+    /** Explicit host layout — preferred over inject (cross-package inject can miss). */
+    layout?: AuthUiLayout;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "signed-out": () => any;

package/dist/runtime/components/BasicAuthUserMenu.client.vue

@@ -3,9 +3,31 @@
     v-model:open="isOpen"
     portal
     :content="popoverContent"
-    :ui="{ content: 'z-[280] max-w-[240px] p-0 border-none bg-transparent shadow-none' }"
+    :ui="{ content: 'basic-auth-account-popover max-w-[240px] p-0 border-none bg-transparent shadow-none' }"
   >
+    <!-- More sheet: identical anatomy to System .more-row -->
+    <button
+      v-if="isMoreSheetLayout"
+      type="button"
+      class="more-row"
+      aria-label="Account menu"
+    >
+      <span class="more-row-icon more-row-icon--admin" aria-hidden="true">
+        <UIcon name="lucide:user" />
+      </span>
+      <span class="more-row-copy">
+        <span class="more-row-label">Account</span>
+        <span class="more-row-desc">Manage your profile & settings</span>
+      </span>
+      <UIcon
+        name="lucide:chevron-right"
+        class="more-row-chevron"
+        aria-hidden="true"
+      />
+    </button>
+
     <UButton
+      v-else
       v-bind="triggerButtonProps"
       type="button"
       aria-label="Account menu"
@@ -13,7 +35,9 @@
       <template #default>
         <span class="flex flex-col items-center gap-1 w-full">
           <UIcon name="lucide:user" class="h-[18px] w-[18px]" />
-          <span class="sidebar-rail-caption text-[7px] uppercase tracking-wider whitespace-nowrap">
+          <span
+            class="sidebar-rail-caption text-[7px] uppercase tracking-wider whitespace-nowrap"
+          >
             Account
           </span>
         </span>
@@ -24,17 +48,22 @@
       <div
         class="basic-auth-account-menu w-[220px] rounded-[var(--md-border-radius)] border-[length:var(--md-border-width)] border-[color:var(--md-border-color)] bg-[var(--md-surface)] overflow-hidden theme-shadow"
       >
-        <!-- User identity section -->
         <div class="px-4 pt-4 pb-3">
           <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--md-success)]/15 text-[var(--md-success)] shrink-0">
+            <div
+              class="flex items-center justify-center w-8 h-8 rounded-full bg-[var(--md-success)]/15 text-[var(--md-success)] shrink-0"
+            >
               <UIcon name="lucide:user" class="w-4 h-4" />
             </div>
             <div class="min-w-0">
-              <p class="text-[10px] uppercase tracking-wider text-[var(--md-on-surface)]/50 mb-0.5">
+              <p
+                class="text-[10px] uppercase tracking-wider text-[var(--md-on-surface)]/50 mb-0.5"
+              >
                 Signed in as
               </p>
-              <p class="text-xs font-medium text-[var(--md-on-surface)] break-all leading-tight">
+              <p
+                class="text-xs font-medium text-[var(--md-on-surface)] break-all leading-tight"
+              >
                 {{ email }}
               </p>
             </div>
@@ -43,14 +72,16 @@
 
         <div class="h-[var(--md-border-width)] bg-[var(--md-border-color)] mx-3" />
 
-        <!-- Actions -->
         <div class="p-2 space-y-1">
           <button
             type="button"
             class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-[var(--md-on-surface)] rounded-[var(--md-border-radius)] hover:bg-[var(--md-surface-hover)] active:bg-[var(--md-surface-active)] transition-colors text-left"
             @click="onChangePassword"
           >
-            <UIcon name="lucide:key-round" class="w-4 h-4 text-[var(--md-on-surface)]/60 shrink-0" />
+            <UIcon
+              name="lucide:key-round"
+              class="w-4 h-4 text-[var(--md-on-surface)]/60 shrink-0"
+            />
             Change Password
           </button>
 
@@ -74,9 +105,13 @@ import { computed, inject, ref, unref } from "vue";
 import {
   AUTH_UI_POPOVER_CONTENT_KEY
 } from "../lib/auth-ui-popover";
-defineProps({
+import {
+  AUTH_UI_LAYOUT_KEY
+} from "../lib/auth-ui-layout";
+const props = defineProps({
   email: { type: String, required: false },
-  displayName: { type: String, required: false }
+  displayName: { type: String, required: false },
+  layout: { type: String, required: false }
 });
 const emit = defineEmits(["signed-out", "change-password"]);
 const isOpen = ref(false);
@@ -91,6 +126,10 @@ const injectedPopoverContent = inject(
   AUTH_UI_POPOVER_CONTENT_KEY,
   null
 );
+const injectedLayout = inject(AUTH_UI_LAYOUT_KEY, null);
+const isMoreSheetLayout = computed(
+  () => props.layout === "more-sheet" || (injectedLayout ? unref(injectedLayout) : "rail") === "more-sheet"
+);
 const popoverContent = computed(() => ({
   ...DEFAULT_POPOVER_CONTENT,
   ...injectedPopoverContent ? unref(injectedPopoverContent) : null
@@ -121,3 +160,7 @@ async function onSignOut() {
   }
 }
 </script>
+
+<style>
+.basic-auth-account-popover,[data-reka-popper-content-wrapper]:has(.basic-auth-account-menu){z-index:100!important}
+</style>

package/dist/runtime/components/BasicAuthUserMenu.client.vue.d.ts

@@ -1,6 +1,9 @@
+import { type AuthUiLayout } from '../lib/auth-ui-layout.js';
 type __VLS_Props = {
     email?: string;
     displayName?: string;
+    /** Explicit host layout — preferred over inject (cross-package inject can miss). */
+    layout?: AuthUiLayout;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "signed-out": () => any;

package/dist/runtime/components/SidebarAuthButtonBasic.client.d.vue.ts

@@ -1,2 +1,7 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import { type AuthUiLayout } from '../lib/auth-ui-layout.js';
+type __VLS_Props = {
+    /** Explicit host layout — preferred over inject (cross-package inject can miss). */
+    layout?: AuthUiLayout;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/SidebarAuthButtonBasic.client.vue

@@ -4,10 +4,32 @@
       v-if="isSignedIn"
       :email="sessionUser?.email"
       :display-name="sessionUser?.displayName"
+      :layout="resolvedLayout"
       @signed-out="onSignedOut"
       @change-password="changePasswordModalOpen = true"
     />
 
+    <button
+      v-else-if="isMoreSheetLayout"
+      type="button"
+      class="more-row"
+      aria-label="Login"
+      @click="signInModalOpen = true"
+    >
+      <span class="more-row-icon more-row-icon--admin" aria-hidden="true">
+        <UIcon name="lucide:log-in" />
+      </span>
+      <span class="more-row-copy">
+        <span class="more-row-label">Login</span>
+        <span class="more-row-desc">Manage your profile & settings</span>
+      </span>
+      <UIcon
+        name="lucide:chevron-right"
+        class="more-row-chevron"
+        aria-hidden="true"
+      />
+    </button>
+
     <UButton
       v-else
       v-bind="loginButtonProps"
@@ -18,7 +40,9 @@
       <template #default>
         <span class="flex flex-col items-center gap-1 w-full">
           <UIcon name="lucide:log-in" class="h-[18px] w-[18px]" />
-          <span class="sidebar-rail-caption text-[7px] uppercase tracking-wider whitespace-nowrap">
+          <span
+            class="sidebar-rail-caption text-[7px] uppercase tracking-wider whitespace-nowrap"
+          >
             Login
           </span>
         </span>
@@ -45,14 +69,20 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref } from "vue";
+import { computed, inject, nextTick, onMounted, ref, unref } from "vue";
 import { useRuntimeConfig } from "#imports";
 import { BASIC_AUTH_PROVIDER_ID } from "../lib/constants";
+import {
+  AUTH_UI_LAYOUT_KEY
+} from "../lib/auth-ui-layout";
 import { silentRefreshOnce } from "../lib/silent-refresh.client";
 import BasicAuthSignInModal from "./BasicAuthSignInModal.client.vue";
 import BasicAuthRegisterModal from "./BasicAuthRegisterModal.client.vue";
 import BasicAuthUserMenu from "./BasicAuthUserMenu.client.vue";
 import BasicAuthChangePasswordModal from "./BasicAuthChangePasswordModal.client.vue";
+const props = defineProps({
+  layout: { type: String, required: false }
+});
 const runtimeConfig = useRuntimeConfig();
 const signInModalOpen = ref(false);
 const registerModalOpen = ref(false);
@@ -95,6 +125,16 @@ const isSignedIn = computed(
   () => session.value?.authenticated === true && session.value.provider === BASIC_AUTH_PROVIDER_ID
 );
 const sessionUser = computed(() => session.value?.user);
+const injectedLayout = inject(AUTH_UI_LAYOUT_KEY, null);
+const resolvedLayout = computed(() => {
+  if (props.layout === "more-sheet" || props.layout === "rail") {
+    return props.layout;
+  }
+  return injectedLayout ? unref(injectedLayout) : "rail";
+});
+const isMoreSheetLayout = computed(
+  () => resolvedLayout.value === "more-sheet"
+);
 const loginButtonProps = {
   block: true,
   variant: "ghost",
@@ -135,3 +175,7 @@ onMounted(() => {
   void refreshSession();
 });
 </script>
+
+<style>
+.basic-auth-modal-content,.basic-auth-modal-overlay{z-index:100!important}
+</style>

package/dist/runtime/components/SidebarAuthButtonBasic.client.vue.d.ts

@@ -1,2 +1,7 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import { type AuthUiLayout } from '../lib/auth-ui-layout.js';
+type __VLS_Props = {
+    /** Explicit host layout — preferred over inject (cross-package inject can miss). */
+    layout?: AuthUiLayout;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/lib/auth-ui-layout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Host apps can inject a layout mode so auth triggers match the surface
+ * (sidebar rail tiles vs mobile More sheet list rows).
+ */
+export type AuthUiLayout = 'rail' | 'more-sheet';
+/** String key so host app + provider package can share without a linked import. */
+export declare const AUTH_UI_LAYOUT_KEY = "or3:auth-ui-layout";

package/dist/runtime/lib/auth-ui-layout.js

@@ -0,0 +1 @@
+export const AUTH_UI_LAYOUT_KEY = "or3:auth-ui-layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "or3-provider-basic-auth",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Saluana/or3-provider-basic-auth.git"