qdadm 0.30.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "./editors": "./src/editors/index.js",
     "./module": "./src/module/index.js",
     "./utils": "./src/utils/index.js",
+    "./debug": "./src/debug/index.js",
     "./styles": "./src/styles/index.scss",
     "./styles/breakpoints": "./src/styles/_breakpoints.scss",
     "./gen": "./src/gen/index.js",

package/src/components/forms/FormPage.vue

@@ -16,7 +16,7 @@
  * form.generateFields()
  * form.addSaveAction()
  *
- * <FormPage v-bind="form.props" v-on="form.events">
+ * <FormPage v-bind="form.props.value" v-on="form.events">
  *   <template #fields>
  *     <FormField v-model="form.data.title" name="title" />
  *   </template>

package/src/components/layout/AppLayout.vue

@@ -157,8 +157,20 @@ function handleLogout() {
 const slots = useSlots()
 const hasSlotContent = computed(() => !!slots.default)
 
+// Current page entity data - pages can inject and set this to avoid double fetch
+// When a page loads an entity, it sets this ref, and useNavContext uses it for breadcrumb
+const currentEntityData = ref(null)
+provide('qdadmCurrentEntityData', currentEntityData)
+
+// Clear entity data on route change (before new page mounts)
+watch(() => route.fullPath, () => {
+  currentEntityData.value = null
+})
+
 // Navigation context (breadcrumb + navlinks from route config)
-const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks } = useNavContext()
+const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks } = useNavContext({
+  entityData: currentEntityData
+})
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject
 const breadcrumbOverride = ref(null)

package/src/components/layout/Zone.vue

@@ -87,16 +87,22 @@ const defaultComp = computed(() => {
  * This creates a functional component that builds the nested structure
  * once per block, avoiding the infinite re-render issue.
  *
+ * Slot content from the Zone is passed to the innermost block component,
+ * allowing the block to render Zone's children (e.g., form fields).
+ *
  * @param {object} block - Block config with wrappers array
  * @param {object} mergedProps - Props to pass to the innermost component
+ * @param {Function} slotFn - Slot function to pass to innermost component
  * @returns {object} - Vue component definition
  */
-function createWrappedComponent(block, mergedProps) {
+function createWrappedComponent(block, mergedProps, slotFn) {
   return defineComponent({
     name: 'WrappedBlock',
     render() {
       // Start with the innermost component (the original block)
-      let current = h(block.component, mergedProps)
+      // Pass Zone's slot content to allow block to render it
+      const innerSlots = slotFn ? { default: slotFn } : {}
+      let current = h(block.component, mergedProps, innerSlots)
 
       // Build from inside out: last wrapper in array wraps the innermost
       // Wrappers are already sorted by weight (lower = outer)
@@ -118,14 +124,19 @@ function createWrappedComponent(block, mergedProps) {
 /**
  * Computed map of wrapped block components
  * Memoizes the wrapped components to avoid re-creating them on every render
+ *
+ * Note: Slot function is passed to allow Zone's children to be rendered
+ * inside the innermost block component.
  */
 const wrappedComponents = computed(() => {
   const map = new Map()
+  // Get slot function to pass to innermost block
+  const slotFn = slots.default
   for (const block of blocks.value) {
     if (block.wrappers && block.wrappers.length > 0) {
       const key = block.id || block.weight
       const mergedProps = { ...props.blockProps, ...block.props }
-      map.set(key, createWrappedComponent(block, mergedProps))
+      map.set(key, createWrappedComponent(block, mergedProps, slotFn))
     }
   }
   return map
@@ -141,25 +152,31 @@ function getWrappedComponent(block) {
 </script>
 
 <template>
-  <template v-if="hasBlocks">
-    <template v-for="block in blocks" :key="block.id || block.weight">
-      <!-- Render wrapped blocks using memoized component -->
-      <component
-        v-if="block.wrappers"
-        :is="getWrappedComponent(block)"
-      />
-      <!-- Render simple blocks directly -->
-      <component
-        v-else
-        :is="block.component"
-        v-bind="{ ...blockProps, ...block.props }"
-      />
+  <div :data-zone="name" class="qdadm-zone">
+    <template v-if="hasBlocks">
+      <template v-for="block in blocks" :key="block.id || block.weight">
+        <!-- Render wrapped blocks using memoized component -->
+        <component
+          v-if="block.wrappers"
+          :is="getWrappedComponent(block)"
+        />
+        <!-- Render simple blocks directly, passing Zone's slot content -->
+        <component
+          v-else
+          :is="block.component"
+          v-bind="{ ...blockProps, ...block.props }"
+        >
+          <slot />
+        </component>
+      </template>
     </template>
-  </template>
-  <component
-    v-else-if="showDefault"
-    :is="defaultComp"
-    v-bind="blockProps"
-  />
-  <slot v-else-if="showSlot" />
+    <component
+      v-else-if="showDefault"
+      :is="defaultComp"
+      v-bind="blockProps"
+    >
+      <slot />
+    </component>
+    <slot v-else-if="showSlot" />
+  </div>
 </template>

package/src/composables/index.js

@@ -12,6 +12,7 @@ export { useListPageBuilder, PAGE_SIZE_OPTIONS } from './useListPageBuilder'
 export { usePageTitle } from './usePageTitle'
 export { useApp } from './useApp'
 export { useAuth } from './useAuth'
+export { useCurrentEntity } from './useCurrentEntity'
 export { useNavContext } from './useNavContext'
 export { useNavigation } from './useNavigation'
 export { useUnsavedChangesGuard } from './useUnsavedChangesGuard'

package/src/composables/useAuth.js

@@ -1,9 +1,17 @@
 /**
- * useAuth - Access authentication state
+ * useAuth - Access authentication state (component-only)
  *
  * Provides access to authAdapter set via createQdadm bootstrap.
  * Returns neutral values if auth is disabled.
  *
+ * IMPORTANT: Must be called within component setup() function.
+ * For route guards or services, use authAdapter directly.
+ *
+ * Reactivity:
+ * - Listens to auth:login, auth:logout, auth:impersonate, auth:impersonate:stop signals
+ * - User computed re-evaluates when these signals fire
+ * - No polling or manual refresh needed
+ *
  * Note: Permission checking (canRead/canWrite) is handled by EntityManager,
  * not by useAuth. This keeps auth simple and delegates permission logic
  * to where it belongs (the entity layer).
@@ -12,11 +20,18 @@
  *   const { isAuthenticated, user, logout } = useAuth()
  */
 
-import { inject, computed, ref } from 'vue'
+import { inject, computed, ref, onUnmounted, getCurrentInstance } from 'vue'
 
 export function useAuth() {
+  // Strict context check - must be called in component setup()
+  const instance = getCurrentInstance()
+  if (!instance) {
+    throw new Error('[qdadm] useAuth() must be called within component setup()')
+  }
+
   const auth = inject('authAdapter')
   const features = inject('qdadmFeatures')
+  const signals = inject('qdadmSignals', null)
 
   // If auth disabled or not provided, return neutral values
   if (!features?.auth || !auth) {
@@ -30,8 +45,28 @@ export function useAuth() {
     }
   }
 
-  // Reactive user state
+  // Reactive trigger - incremented on auth signals to force computed re-evaluation
+  const authTick = ref(0)
+
+  // Subscribe to auth signals for reactivity
+  const cleanups = []
+  if (signals) {
+    cleanups.push(signals.on('auth:login', () => { authTick.value++ }))
+    cleanups.push(signals.on('auth:logout', () => { authTick.value++ }))
+    cleanups.push(signals.on('auth:impersonate', () => { authTick.value++ }))
+    cleanups.push(signals.on('auth:impersonate:stop', () => { authTick.value++ }))
+  }
+
+  // Cleanup signal subscriptions on unmount
+  onUnmounted(() => {
+    cleanups.forEach(cleanup => cleanup())
+  })
+
+  // Reactive user state - re-evaluates when authTick changes
   const user = computed(() => {
+    // Touch authTick to create reactive dependency
+    // eslint-disable-next-line no-unused-expressions
+    authTick.value
     if (typeof auth.getUser === 'function') {
       return auth.getUser()
     }
@@ -42,7 +77,12 @@ export function useAuth() {
     login: auth.login,
     logout: auth.logout,
     getCurrentUser: auth.getCurrentUser,
-    isAuthenticated: computed(() => auth.isAuthenticated()),
+    isAuthenticated: computed(() => {
+      // Touch authTick for reactivity
+      // eslint-disable-next-line no-unused-expressions
+      authTick.value
+      return auth.isAuthenticated()
+    }),
     user,
     authEnabled: true
   }

package/src/composables/useCurrentEntity.js

@@ -0,0 +1,44 @@
+/**
+ * useCurrentEntity - Share page entity data with navigation context
+ *
+ * When a page loads an entity (e.g., ProductDetailPage fetches a product),
+ * it can call setCurrentEntity() to share that data with the navigation context.
+ * This avoids a second fetch for breadcrumb display.
+ *
+ * Usage in a detail page:
+ * ```js
+ * const { setCurrentEntity } = useCurrentEntity()
+ *
+ * async function loadProduct() {
+ *   product.value = await productsManager.get(productId)
+ *   setCurrentEntity(product.value)  // Share with navigation
+ * }
+ * ```
+ *
+ * The navigation context (useNavContext) will use this data instead of
+ * fetching the entity again for the breadcrumb.
+ */
+import { inject } from 'vue'
+
+/**
+ * Composable to share current page entity with navigation context
+ * @returns {{ setCurrentEntity: (data: object) => void }}
+ */
+export function useCurrentEntity() {
+  const currentEntityData = inject('qdadmCurrentEntityData', null)
+
+  /**
+   * Set the current entity data for navigation context
+   * Call this after loading an entity to avoid double fetch
+   * @param {object} data - Entity data
+   */
+  function setCurrentEntity(data) {
+    if (currentEntityData) {
+      currentEntityData.value = data
+    }
+  }
+
+  return {
+    setCurrentEntity
+  }
+}

package/src/composables/useFormPageBuilder.js

@@ -17,7 +17,7 @@
  * form.addSaveAction()
  * form.addDeleteAction()
  *
- * <FormPage v-bind="form.props" v-on="form.events">
+ * <FormPage v-bind="form.props.value" v-on="form.events">
  *   <template #fields>
  *     <FormField v-model="form.data.title" name="title" />
  *   </template>
@@ -1011,7 +1011,7 @@ export function useFormPageBuilder(config = {}) {
 
   /**
    * Props object for FormPage component
-   * Use with v-bind: <FormPage v-bind="form.props">
+   * Use with v-bind: <FormPage v-bind="form.props.value">
    */
   const formProps = computed(() => ({
     // Mode
@@ -1049,7 +1049,7 @@ export function useFormPageBuilder(config = {}) {
 
   /**
    * Event handlers for FormPage
-   * Use with v-on: <FormPage v-bind="form.props" v-on="form.events">
+   * Use with v-on: <FormPage v-bind="form.props.value" v-on="form.events">
    */
   const formEvents = {
     save: () => submit(false),

package/src/composables/useNavContext.js

@@ -207,30 +207,46 @@ export function useNavContext(options = {}) {
 
   /**
    * Fetch entity data for all 'item' segments in the chain
+   *
+   * For the LAST item (current entity):
+   * - Uses entityData if provided by the page via setCurrentEntity()
+   * - Does NOT fetch automatically - page is responsible for providing data
+   * - Breadcrumb shows "..." until page provides the data
+   *
+   * For PARENT items: always fetches from manager
    */
-  watch([navChain, () => options.entityData], async ([chain]) => {
-    chainData.value.clear()
-    const externalData = unref(options.entityData)
+  // Watch navChain and entityData ref (deep watch to catch value changes)
+  const entityDataRef = computed(() => options.entityData ? unref(options.entityData) : null)
+  watch([navChain, entityDataRef], async ([chain, externalData]) => {
+    // Build new Map (reassignment triggers Vue reactivity, Map.set() doesn't)
+    const newChainData = new Map()
 
     for (let i = 0; i < chain.length; i++) {
       const segment = chain[i]
       if (segment.type !== 'item') continue
 
-      // For the last item, use external data if provided (from useForm)
       const isLastItem = !chain.slice(i + 1).some(s => s.type === 'item')
-      if (isLastItem && externalData) {
-        chainData.value.set(i, externalData)
+
+      // For the last item, use external data from page (don't fetch)
+      if (isLastItem) {
+        if (externalData) {
+          newChainData.set(i, externalData)
+        }
+        // If no externalData, breadcrumb will show "..." until page provides it
         continue
       }
 
-      // Fetch from manager
+      // For parent items, fetch from manager
       try {
         const data = await segment.manager.get(segment.id)
-        chainData.value.set(i, data)
+        newChainData.set(i, data)
       } catch (e) {
         console.warn(`[useNavContext] Failed to fetch ${segment.entity}:${segment.id}`, e)
       }
     }
+
+    // Assign new Map to trigger reactivity
+    chainData.value = newChainData
   }, { immediate: true, deep: true })
 
   // ============================================================================