qdadm 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/layout/AppLayout.vue

@@ -13,6 +13,7 @@
  */
 
 import { ref, watch, onMounted, onUnmounted, computed, inject, provide, useSlots } from 'vue'
+import { SIDEBAR_COLLAPSED_KEY } from '../../composables/useSidebarState'
 import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
 import { useNavigation, type NavSection } from '../../composables/useNavigation'
 import { useApp } from '../../composables/useApp'
@@ -69,8 +70,9 @@ const collapsedSections = ref<Record<string, boolean>>({})
 const sidebarOpen = ref<boolean>(false)
 const MOBILE_BREAKPOINT = 768
 
-// Desktop sidebar collapsed state
+// Desktop sidebar collapsed state (provided for child components via useSidebarState)
 const sidebarCollapsed = ref<boolean>(false)
+provide(SIDEBAR_COLLAPSED_KEY, sidebarCollapsed)
 const COLLAPSED_STORAGE_KEY = computed<string>(() => `${app.shortName.toLowerCase()}_sidebar_collapsed`)
 
 function toggleSidebar(): void {

package/src/composables/useEntityItemPage.ts

@@ -78,6 +78,8 @@ export interface EntityManager {
   canCreate: () => boolean
   canUpdate: (data?: unknown) => boolean
   canDelete: (data?: unknown) => boolean
+  hasSeverityMap?: (field: string) => boolean
+  getSeverity?: (field: string, value: string | number, defaultSeverity?: string) => string
 }
 
 /**

package/src/composables/useEntityItemShowPage.ts

@@ -384,10 +384,11 @@ export function useEntityItemShowPage(
       schemaType = type,
       label = '',
       reference = '',
+      severity,
       ...rest
     } = fieldConfig
 
-    const displayType = TYPE_MAPPINGS[type] || TYPE_MAPPINGS[schemaType] || 'text'
+    let resolvedDisplayType = TYPE_MAPPINGS[type] || TYPE_MAPPINGS[schemaType] || 'text'
     const resolvedLabel = label || snakeCaseToTitle(name)
 
     // Auto-set reference route if reference entity is specified
@@ -402,13 +403,23 @@ export function useEntityItemShowPage(
       }
     }
 
+    // Auto-inject severity from manager's severity maps
+    let resolvedSeverity = severity
+    if (!resolvedSeverity && manager.hasSeverityMap?.(name)) {
+      resolvedSeverity = (value: unknown) => manager.getSeverity!(name, value as string | number, 'secondary')
+      if (resolvedDisplayType === 'text') {
+        resolvedDisplayType = 'badge'
+      }
+    }
+
     return {
       name,
-      type: displayType,
+      type: resolvedDisplayType,
       schemaType,
       label: resolvedLabel,
       reference,
       referenceRoute,
+      severity: resolvedSeverity,
       ...rest,
     }
   }

package/src/composables/useSidebarState.ts

@@ -0,0 +1,24 @@
+/**
+ * useSidebarState - Access sidebar collapsed state from any component
+ *
+ * The sidebar collapsed ref is provided by AppLayout via Vue's provide/inject.
+ * This composable gives blocks rendered inside the sidebar (including zone blocks)
+ * programmatic access to the collapsed state.
+ *
+ * @example
+ * ```ts
+ * import { useSidebarState } from 'qdadm'
+ *
+ * const { collapsed } = useSidebarState()
+ * // collapsed.value === true when sidebar is in icon-only mode
+ * ```
+ */
+
+import { inject, ref, type Ref } from 'vue'
+
+export const SIDEBAR_COLLAPSED_KEY = Symbol('qdadm-sidebar-collapsed') as symbol & { __type: Ref<boolean> }
+
+export function useSidebarState(): { collapsed: Ref<boolean> } {
+  const collapsed = inject<Ref<boolean>>(SIDEBAR_COLLAPSED_KEY, ref(false))
+  return { collapsed }
+}

package/src/index.ts

@@ -291,6 +291,7 @@ export {
 } from './composables/useUserImpersonator'
 export { useCurrentEntity, type UseCurrentEntityReturn } from './composables/useCurrentEntity'
 export { useChildPage, type UseChildPageReturn } from './composables/useChildPage'
+export { useSidebarState, SIDEBAR_COLLAPSED_KEY } from './composables/useSidebarState'
 
 // ════════════════════════════════════════════════════════════════════════════
 // COMPONENTS

package/src/notifications/NotificationPanel.vue

@@ -8,11 +8,10 @@
  * - Mobile: Full width overlay at bottom of screen
  *
  * Features:
- * - Header with title, unread count, mark all read, close button
+ * - Inline action bar (mark read, clear, close) at top right
  * - Status items section (custom module items)
  * - Notification list (most recent first)
  * - Empty state
- * - Closable
  */
 import { RouterLink } from 'vue-router'
 import { useNotifications } from './NotificationStore'
@@ -55,28 +54,26 @@ function formatTime(timestamp: number): string {
       v-if="store.isOpen.value"
       class="notification-panel"
     >
-      <!-- Header -->
-      <div class="notification-panel-header">
-        <div class="notification-panel-actions">
-          <button
-            v-if="store.unreadCount.value > 0"
-            class="notification-panel-btn"
-            title="Mark all read"
-            @click="store.markAllRead()"
-          >
-            <i class="pi pi-check-circle" />
-          </button>
-          <button
-            v-if="store.notifications.value.length > 0"
-            class="notification-panel-btn"
-            title="Clear all"
-            @click="store.clearNotifications()"
-          >
-            <i class="pi pi-trash" />
-          </button>
-        </div>
+      <!-- Inline toolbar -->
+      <div class="notification-toolbar">
         <button
-          class="notification-panel-btn"
+          v-if="store.unreadCount.value > 0"
+          class="notification-toolbar-btn"
+          title="Mark all read"
+          @click="store.markAllRead()"
+        >
+          <i class="pi pi-check-circle" />
+        </button>
+        <button
+          v-if="store.notifications.value.length > 0"
+          class="notification-toolbar-btn"
+          title="Clear all"
+          @click="store.clearNotifications()"
+        >
+          <i class="pi pi-trash" />
+        </button>
+        <button
+          class="notification-toolbar-btn notification-toolbar-close"
           title="Close"
           @click="store.close()"
         >
@@ -159,11 +156,12 @@ function formatTime(timestamp: number): string {
   left: calc(var(--fad-sidebar-width, 15rem) + 0.375rem);
   bottom: 0.5rem;
   width: 22rem;
+  min-height: 6.6rem;
   max-height: 50vh;
   background: var(--p-surface-0, #ffffff);
   border: 1px solid var(--p-surface-200, #e2e8f0);
-  border-radius: 0.1875rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  border-radius: 2px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   z-index: 200;
@@ -171,51 +169,51 @@ function formatTime(timestamp: number): string {
 }
 
 /* Collapsed sidebar */
-.sidebar--collapsed ~ .main-area .notification-panel,
 :root:has(.sidebar--collapsed) .notification-panel {
   left: calc(var(--fad-sidebar-width-collapsed, 2.5rem) + 0.375rem);
 }
 
-/* Header */
-.notification-panel-header {
+/* Inline toolbar - floats top-right inside the panel */
+.notification-toolbar {
+  position: absolute;
+  top: 0;
+  right: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0.375rem 0.5rem;
-  border-bottom: 1px solid var(--p-surface-200, #e2e8f0);
-  background: var(--p-surface-50, #f8fafc);
-  flex-shrink: 0;
+  gap: 1px;
+  padding: 0.25rem;
+  z-index: 1;
 }
 
-.notification-panel-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-}
-
-.notification-panel-btn {
+.notification-toolbar-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.375rem;
+  height: 1.375rem;
   border: none;
   background: none;
-  border-radius: 0.125rem;
-  color: var(--p-surface-500, #64748b);
+  border-radius: 2px;
+  color: var(--p-surface-400, #94a3b8);
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
+  transition: color 0.1s, background 0.1s;
 }
 
-.notification-panel-btn:hover {
-  background: var(--p-surface-200, #e2e8f0);
+.notification-toolbar-btn:hover {
+  background: var(--p-surface-100, #f1f5f9);
+  color: var(--p-surface-600, #475569);
+}
+
+.notification-toolbar-close:hover {
   color: var(--p-surface-700, #334155);
 }
 
 /* Status items */
 .notification-panel-status {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--p-surface-200, #e2e8f0);
+  padding: 0.5rem 0.625rem;
+  padding-right: 2.5rem;
+  border-bottom: 1px solid var(--p-surface-100, #f1f5f9);
   flex-shrink: 0;
 }
 
@@ -223,13 +221,13 @@ function formatTime(timestamp: number): string {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.25rem 0;
+  padding: 0.1875rem 0;
   font-size: 0.75rem;
   color: var(--p-surface-600, #475569);
 }
 
 .notification-status-item i {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
 }
 
 .notification-status-item--nominal i {
@@ -250,22 +248,24 @@ function formatTime(timestamp: number): string {
 
 .notification-status-count {
   font-weight: 600;
+  font-size: 0.6875rem;
 }
 
 .notification-status-item--link {
   text-decoration: none;
   cursor: pointer;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.375rem;
+  border-radius: 2px;
+  padding: 0.1875rem 0.375rem;
   margin: 0 -0.375rem;
+  transition: background 0.1s;
 }
 
 .notification-status-item--link:hover {
-  background: var(--p-surface-100, #f1f5f9);
+  background: var(--p-surface-50, #f8fafc);
 }
 
 .notification-status-arrow {
-  font-size: 0.625rem;
+  font-size: 0.5625rem;
   opacity: 0;
   transition: opacity 0.1s;
   color: var(--p-surface-400, #94a3b8);
@@ -287,12 +287,16 @@ function formatTime(timestamp: number): string {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--p-surface-100, #f1f5f9);
+  padding: 0.5rem 0.625rem;
+  border-bottom: 1px solid var(--p-surface-50, #f8fafc);
   cursor: pointer;
   transition: background 0.1s;
 }
 
+.notification-item:first-child {
+  padding-right: 2.5rem;
+}
+
 .notification-item:hover {
   background: var(--p-surface-50, #f8fafc);
 }
@@ -311,16 +315,16 @@ function formatTime(timestamp: number): string {
 
 .notification-item-icon {
   flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 0.125rem;
+  margin-top: 0.0625rem;
 }
 
 .notification-item-icon i {
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
 }
 
 .notification-item--success .notification-item-icon i {
@@ -345,16 +349,16 @@ function formatTime(timestamp: number): string {
 }
 
 .notification-item-summary {
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--p-surface-700, #334155);
   line-height: 1.3;
 }
 
 .notification-item-detail {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: var(--p-surface-500, #64748b);
-  margin-top: 0.125rem;
+  margin-top: 0.0625rem;
   line-height: 1.3;
 }
 
@@ -362,8 +366,8 @@ function formatTime(timestamp: number): string {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  margin-top: 0.25rem;
-  font-size: 0.6875rem;
+  margin-top: 0.125rem;
+  font-size: 0.625rem;
   color: var(--p-surface-400, #94a3b8);
 }
 
@@ -377,14 +381,14 @@ function formatTime(timestamp: number): string {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   border: none;
   background: none;
-  border-radius: 0.25rem;
+  border-radius: 2px;
   color: var(--p-surface-400, #94a3b8);
   cursor: pointer;
-  font-size: 0.625rem;
+  font-size: 0.5625rem;
   opacity: 0;
   transition: opacity 0.1s;
 }
@@ -404,17 +408,17 @@ function formatTime(timestamp: number): string {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem 1rem;
-  color: var(--p-surface-400, #94a3b8);
-  gap: 0.5rem;
+  padding: 1.5rem 1rem;
+  color: var(--p-surface-300, #cbd5e1);
+  gap: 0.375rem;
 }
 
 .notification-panel-empty i {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
 }
 
 .notification-panel-empty span {
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
 }
 
 /* Transition */
@@ -435,12 +439,12 @@ function formatTime(timestamp: number): string {
 /* Mobile: full width bottom overlay */
 @media (max-width: 767px) {
   .notification-panel {
-    left: 0;
+    left: 0 !important;
     right: 0;
     bottom: 0;
     width: auto;
     max-height: 60vh;
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: 2px 2px 0 0;
     border-bottom: none;
   }
 }
@@ -451,13 +455,9 @@ function formatTime(timestamp: number): string {
   border-color: var(--p-surface-700, #334155);
 }
 
-.dark-mode .notification-panel-header {
-  background: var(--p-surface-900, #0f172a);
-  border-color: var(--p-surface-700, #334155);
-}
-
-.dark-mode .notification-panel-title {
-  color: var(--p-surface-200, #e2e8f0);
+.dark-mode .notification-toolbar-btn:hover {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-surface-300, #cbd5e1);
 }
 
 .dark-mode .notification-item--unread {

package/src/notifications/styles.scss

@@ -18,10 +18,15 @@ $_content-duration: 0.1s;
   transition: opacity $_content-duration ease $_content-delay;
 }
 
-.sidebar--collapsed .sidebar-notification-status {
+/* Status label: delayed fade-in on expand, instant hide on collapse.
+   Matches SidebarBox content behavior (.sidebar-box-content). */
+.sidebar-notification-status .status-label {
+  opacity: 1;
+  transition: opacity $_content-duration ease $_content-delay;
+}
+
+.sidebar--collapsed .sidebar-notification-status .status-label {
   opacity: 0;
   visibility: hidden;
-  height: 0;
-  overflow: hidden;
-  transition: opacity 0s, visibility 0s, height 0s;
+  transition: opacity 0s, visibility 0s;
 }