qdadm 1.6.1 → 1.9.0

package/package.json

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

package/src/components/SeverityTag.vue

@@ -2,6 +2,10 @@
 /**
  * SeverityTag - Auto-discovers severity from EntityManager
  *
+ * Renders a PrimeVue Tag for simple severity strings, or a rich badge
+ * with icon (including animated spinners) when the severity map provides
+ * a descriptor with an `icon` field.
+ *
  * Entity can be specified explicitly or auto-discovered from list context.
  *
  * @example
@@ -50,22 +54,33 @@ const manager = computed<EntityManager | null>(() => {
   return orchestrator?.get(resolvedEntity.value) ?? null
 })
 
-const severity = computed(() => {
-  if (!manager.value) return props.defaultSeverity
-  // getSeverity expects string | number, but value can be boolean | null too
-  const fieldValue = props.value === null || props.value === undefined
-    ? ''
-    : typeof props.value === 'boolean'
-      ? String(props.value)
-      : props.value
-  return manager.value.getSeverity(props.field, fieldValue, props.defaultSeverity)
+const fieldValue = computed(() => {
+  if (props.value === null || props.value === undefined) return ''
+  return typeof props.value === 'boolean' ? String(props.value) : props.value
+})
+
+const descriptor = computed(() => {
+  if (!manager.value?.getSeverityDescriptor) {
+    return { severity: manager.value?.getSeverity?.(props.field, fieldValue.value as string | number, props.defaultSeverity) ?? props.defaultSeverity }
+  }
+  return manager.value.getSeverityDescriptor(props.field, fieldValue.value as string | number, props.defaultSeverity)
 })
 
+const severity = computed(() => descriptor.value.severity)
+
 const displayLabel = computed(() => {
-  return props.label ?? props.value
+  return props.label ?? descriptor.value.label ?? props.value
 })
+
+const hasIcon = computed(() => !!descriptor.value.icon)
 </script>
 
 <template>
-  <Tag :value="displayLabel" :severity="severity" />
+  <!-- Rich badge with icon -->
+  <span v-if="hasIcon" class="p-tag p-component" :class="`p-tag-${severity}`">
+    <i :class="descriptor.icon" />
+    <span class="p-tag-label">{{ displayLabel }}</span>
+  </span>
+  <!-- Simple PrimeVue Tag -->
+  <Tag v-else :value="displayLabel" :severity="severity" />
 </template>

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/components/show/ShowDisplay.vue

@@ -71,7 +71,7 @@ interface FieldConfig {
   optionLabel?: string
   optionValue?: string
   // Badge options
-  severity?: string | ((value: unknown) => string)
+  severity?: string | { severity: string; icon?: string; label?: string } | ((value: unknown) => string | { severity: string; icon?: string; label?: string })
   // Image options
   imageWidth?: string
   imageHeight?: string
@@ -200,14 +200,18 @@ const badgeValue = computed(() => {
   return String(props.value)
 })
 
-// Badge severity
-const badgeSeverity = computed(() => {
-  if (typeof props.field.severity === 'function') {
-    return props.field.severity(props.value)
-  }
-  return props.field.severity || 'info'
+// Badge descriptor (normalized to { severity, icon? })
+const badgeDescriptor = computed(() => {
+  const raw = typeof props.field.severity === 'function'
+    ? props.field.severity(props.value)
+    : props.field.severity
+  if (!raw) return { severity: 'info' }
+  return typeof raw === 'string' ? { severity: raw } : raw
 })
 
+const badgeSeverity = computed(() => badgeDescriptor.value.severity)
+const badgeIcon = computed(() => badgeDescriptor.value.icon)
+
 // JSON formatted
 const jsonValue = computed(() => {
   if (isEmpty.value) return '-'
@@ -316,7 +320,15 @@ const imageStyle = computed(() => ({
   <!-- JSON -->
   <pre v-else-if="displayType === 'json'" class="show-display show-display--json">{{ jsonValue }}</pre>
 
-  <!-- Badge -->
+  <!-- Badge (with optional icon) -->
+  <span
+    v-else-if="displayType === 'badge' && badgeIcon"
+    class="show-display show-display--badge p-tag p-component"
+    :class="`p-tag-${badgeSeverity}`"
+  >
+    <i :class="badgeIcon" />
+    <span class="p-tag-label">{{ badgeValue }}</span>
+  </span>
   <Tag
     v-else-if="displayType === 'badge'"
     :value="badgeValue"
@@ -335,6 +347,11 @@ const imageStyle = computed(() => ({
   display: inline;
 }
 
+.show-display--badge {
+  display: inline-flex;
+  align-items: center;
+}
+
 .show-display--empty {
   color: var(--p-text-muted-color, #6c757d);
 }

package/src/composables/useEntityItemPage.ts

@@ -78,6 +78,9 @@ 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
+  getSeverityDescriptor?: (field: string, value: string | number, defaultSeverity?: string) => { severity: string; icon?: string; label?: 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,25 @@ export function useEntityItemShowPage(
       }
     }
 
+    // Auto-inject severity from manager's severity maps
+    let resolvedSeverity = severity
+    if (!resolvedSeverity && manager.hasSeverityMap?.(name)) {
+      resolvedSeverity = manager.getSeverityDescriptor
+        ? (value: unknown) => manager.getSeverityDescriptor!(name, value as string | number, 'secondary')
+        : (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/entity/EntityManager.ts

@@ -158,6 +158,22 @@ export interface EntityBadge {
   severity?: 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast'
 }
 
+/**
+ * Rich severity descriptor for a field value.
+ * Extends beyond a simple severity string to support icons and label overrides.
+ */
+export interface SeverityDescriptor {
+  severity: string
+  icon?: string
+  label?: string
+}
+
+/** A severity map value: plain string (backward compat) or rich descriptor */
+export type SeverityMapValue = string | SeverityDescriptor
+
+/** Severity map: field value → severity string or descriptor */
+export type SeverityMap = Record<string, SeverityMapValue>
+
 /**
  * EntityManager constructor options
  */
@@ -243,7 +259,7 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
   protected _nav: NavConfig
 
   protected _hooks: HookRegistry | null = null
-  protected _severityMaps: Record<string, Record<string, string>> = {}
+  protected _severityMaps: Record<string, SeverityMap> = {}
 
   protected _cache: CacheState<T> = {
     items: [],
@@ -939,24 +955,40 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
   // ============ SEVERITY MAPS ============
 
   /**
-   * Set severity map for a field
+   * Set severity map for a field.
+   * Values can be plain severity strings or rich descriptors with icon/label.
    */
-  setSeverityMap(field: string, map: Record<string, string>): this {
+  setSeverityMap(field: string, map: SeverityMap): this {
     this._severityMaps[field] = map
     return this
   }
 
   /**
-   * Get severity for a field value
+   * Get severity string for a field value (backward compat).
+   * Extracts .severity from descriptors automatically.
    */
   getSeverity(
     field: string,
     value: string | number,
     defaultSeverity: string = 'secondary'
   ): string {
-    const map = this._severityMaps[field]
-    if (!map) return defaultSeverity
-    return map[String(value)] ?? defaultSeverity
+    const entry = this._severityMaps[field]?.[String(value)]
+    if (!entry) return defaultSeverity
+    return typeof entry === 'string' ? entry : entry.severity
+  }
+
+  /**
+   * Get full severity descriptor for a field value.
+   * Returns normalized descriptor (plain strings wrapped as { severity }).
+   */
+  getSeverityDescriptor(
+    field: string,
+    value: string | number,
+    defaultSeverity: string = 'secondary'
+  ): SeverityDescriptor {
+    const entry = this._severityMaps[field]?.[String(value)]
+    if (!entry) return { severity: defaultSeverity }
+    return typeof entry === 'string' ? { severity: entry } : entry
   }
 
   /**

package/src/index.ts

@@ -92,6 +92,9 @@ export {
   createEntityManager,
   type EntityManagerOptions,
   type EntityBadge,
+  type SeverityDescriptor,
+  type SeverityMapValue,
+  type SeverityMap,
   type RoutingContext,
   type PresaveContext,
   type PostsaveContext,
@@ -291,6 +294,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

@@ -156,6 +156,7 @@ 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);

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;
 }