or3-provider-basic-auth 0.0.6 → 0.0.7

package/dist/module.json

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

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

@@ -2,8 +2,8 @@
   <UPopover
     v-model:open="isOpen"
     portal
-    :content="{ side: 'right', align: 'end', sideOffset: 10 }"
-    :ui="{ content: 'z-[260] max-w-[240px] p-0 border-none bg-transparent shadow-none' }"
+    :content="popoverContent"
+    :ui="{ content: 'z-[280] max-w-[240px] p-0 border-none bg-transparent shadow-none' }"
   >
     <UButton
       v-bind="triggerButtonProps"
@@ -12,8 +12,8 @@
     >
       <template #default>
         <span class="flex flex-col items-center gap-1 w-full">
-          <UIcon name="i-lucide-user-check" class="h-[18px] w-[18px]" />
-          <span class="text-[7px] uppercase tracking-wider whitespace-nowrap">
+          <UIcon name="lucide:user" class="h-[18px] w-[18px]" />
+          <span class="sidebar-rail-caption text-[7px] uppercase tracking-wider whitespace-nowrap">
             Account
           </span>
         </span>
@@ -22,13 +22,13 @@
 
     <template #content>
       <div
-        class="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"
+        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">
-              <UIcon name="i-lucide-user" class="w-4 h-4" />
+              <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">
@@ -50,7 +50,7 @@
             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="i-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>
 
@@ -60,7 +60,7 @@
             class="w-full flex items-center gap-2.5 px-3 py-2 text-sm rounded-[var(--md-border-radius)] text-[var(--md-error)] hover:bg-[var(--md-error)]/10 active:bg-[var(--md-error)]/18 transition-colors text-left disabled:opacity-50"
             @click="onSignOut"
           >
-            <UIcon name="i-lucide-log-out" class="w-4 h-4 shrink-0" />
+            <UIcon name="lucide:log-out" class="w-4 h-4 shrink-0" />
             {{ pending ? "Signing out\u2026" : "Sign Out" }}
           </button>
         </div>
@@ -70,7 +70,10 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, inject, ref, unref } from "vue";
+import {
+  AUTH_UI_POPOVER_CONTENT_KEY
+} from "../lib/auth-ui-popover";
 defineProps({
   email: { type: String, required: false },
   displayName: { type: String, required: false }
@@ -78,6 +81,20 @@ defineProps({
 const emit = defineEmits(["signed-out", "change-password"]);
 const isOpen = ref(false);
 const pending = ref(false);
+const DEFAULT_POPOVER_CONTENT = {
+  side: "right",
+  align: "end",
+  sideOffset: 10,
+  collisionPadding: 12
+};
+const injectedPopoverContent = inject(
+  AUTH_UI_POPOVER_CONTENT_KEY,
+  null
+);
+const popoverContent = computed(() => ({
+  ...DEFAULT_POPOVER_CONTENT,
+  ...injectedPopoverContent ? unref(injectedPopoverContent) : null
+}));
 const triggerButtonProps = {
   block: true,
   variant: "ghost",

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

@@ -17,8 +17,8 @@
     >
       <template #default>
         <span class="flex flex-col items-center gap-1 w-full">
-          <UIcon name="i-lucide-log-in" class="h-[18px] w-[18px]" />
-          <span class="text-[7px] uppercase tracking-wider whitespace-nowrap">
+          <UIcon name="lucide:log-in" class="h-[18px] w-[18px]" />
+          <span class="sidebar-rail-caption text-[7px] uppercase tracking-wider whitespace-nowrap">
             Login
           </span>
         </span>

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

@@ -0,0 +1,14 @@
+/**
+ * Floating UI content options for auth UI popovers.
+ * Hosts (e.g. mobile More menu) can inject overrides so nested menus
+ * stay on-screen instead of defaulting to rail `side: 'right'`.
+ */
+export interface AuthUiPopoverContent {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+}
+/** String key so host app + provider package can share without a linked import. */
+export declare const AUTH_UI_POPOVER_CONTENT_KEY = "or3:auth-ui-popover-content";

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

@@ -0,0 +1 @@
+export const AUTH_UI_POPOVER_CONTENT_KEY = "or3:auth-ui-popover-content";

package/package.json

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