@quazardous/qdadm 2.24.0 → 2.25.0

package/package.json

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

package/src/components/item/FieldGroups.vue

@@ -20,7 +20,7 @@
  * </FieldGroups>
  * ```
  */
-import { computed, type PropType } from 'vue'
+import { computed, ref, watch, type PropType } from 'vue'
 import Tabs from 'primevue/tabs'
 import TabList from 'primevue/tablist'
 import Tab from 'primevue/tab'
@@ -84,8 +84,21 @@ const props = defineProps({
     type: String as PropType<LayoutMode>,
     default: 'sections',
   },
+  /**
+   * The active group (`tabs`: a group name) or the open ones (`accordion`:
+   * names), for `v-model:active` (#2435). Optional: without it the component
+   * keeps its own, starting on the first group.
+   */
+  active: {
+    type: [String, Array] as PropType<string | string[] | null>,
+    default: undefined,
+  },
 })
 
+const emit = defineEmits<{
+  'update:active': [value: string | string[]]
+}>()
+
 // Expose slots for field rendering
 defineSlots<{
   field: (props: { field: BaseFieldConfig; value: unknown; groupName: string }) => unknown
@@ -105,6 +118,34 @@ const displayGroups = computed(() => {
   })
 })
 
+// The active tab / open panels are state, not a constant: a re-render must not
+// send the user back to the first group (#2435). An app owning it passes
+// v-model:active; otherwise this is the only copy.
+const localActive = ref<string | string[] | null | undefined>(props.active)
+watch(
+  () => props.active,
+  (value) => {
+    if (value !== undefined) localActive.value = value
+  }
+)
+const firstGroupName = () => displayGroups.value[0]?.name || '0'
+const activeTab = computed(() => (typeof localActive.value === 'string' ? localActive.value : firstGroupName()))
+const openPanels = computed(() => {
+  const value = localActive.value
+  if (Array.isArray(value)) return value
+  return typeof value === 'string' ? [value] : [firstGroupName()]
+})
+function setActive(value: string | string[]) {
+  localActive.value = value
+  emit('update:active', value)
+}
+function onTabChange(value: string | number) {
+  setActive(String(value))
+}
+function onPanelsChange(value: unknown) {
+  setActive(Array.isArray(value) ? value.map(String) : value == null ? [] : [String(value)])
+}
+
 // Get value from data
 function getValue(fieldName: string): unknown {
   return props.data?.[fieldName]
@@ -227,7 +268,7 @@ function getBadgeValue(group: FieldGroup): string | number | null {
 
     <!-- Tabs layout -->
     <template v-else-if="layout === 'tabs'">
-      <Tabs :value="displayGroups[0]?.name || '0'">
+      <Tabs :value="activeTab" @update:value="onTabChange">
         <TabList>
           <Tab
             v-for="group in displayGroups"
@@ -275,7 +316,7 @@ function getBadgeValue(group: FieldGroup): string | number | null {
 
     <!-- Accordion layout -->
     <template v-else-if="layout === 'accordion'">
-      <Accordion :value="[displayGroups[0]?.name || '0']" multiple>
+      <Accordion :value="openPanels" multiple @update:value="onPanelsChange">
         <AccordionPanel
           v-for="group in displayGroups"
           :key="group.name"

package/src/components/show/ShowPage.vue

@@ -35,7 +35,8 @@
  * - #fields: Field content (required) - renders in right column (or full width if no media)
  * - #footer: Custom footer (replaces ShowActions if provided)
  * - #error: Custom error display
- * - #loading: Custom loading display
+ * - #loading: Custom display for the first load. A reload of a record already
+ *   on screen keeps it there, marked busy (#2435).
  */
 import { computed, type PropType } from 'vue'
 import PageHeader from '../layout/PageHeader.vue'
@@ -203,8 +204,11 @@ type ShowFieldValue = string | number | boolean | Date | Record<string, unknown>
     <!-- Toolbar slot (between header and content) -->
     <slot name="toolbar" />
 
-    <!-- Loading State -->
-    <template v-if="loading">
+    <!-- First load only. A reload of a record already shown keeps the content
+         mounted (#2435): unmounting it threw away the active tab, open panels,
+         scroll and any local state — on every action reload and every live
+         update of the record. -->
+    <template v-if="loading && !data">
       <slot name="loading">
         <div class="loading-state">
           <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
@@ -223,6 +227,7 @@ type ShowFieldValue = string | number | boolean | Date | Record<string, unknown>
 
     <!-- Content -->
     <template v-else>
+      <div v-if="loading" class="show-refreshing" role="progressbar" aria-label="Refreshing" />
       <!-- Single content body; Card wrapper is conditional (#1193) -->
       <CardShell :card="cardWrapper">
         <!-- Grid layout with optional media zone -->
@@ -230,6 +235,7 @@ type ShowFieldValue = string | number | boolean | Date | Record<string, unknown>
           class="show-content"
           :class="{ 'show-content--with-media': slots.media }"
           :style="slots.media ? { '--media-width': mediaWidth } : {}"
+          :aria-busy="loading ? 'true' : undefined"
         >
           <!-- Media zone (optional) -->
           <div v-if="slots.media" class="show-media">
@@ -304,6 +310,29 @@ type ShowFieldValue = string | number | boolean | Date | Record<string, unknown>
   padding: 3rem;
 }
 
+/* A record being refreshed stays on screen: a thin bar says so (#2435). */
+.show-refreshing {
+  height: 3px;
+  margin-bottom: -1rem; /* inside the page gap: the content does not move */
+  background: linear-gradient(90deg, transparent, var(--p-primary-color, #3b82f6), transparent);
+  background-size: 40% 100%;
+  background-repeat: no-repeat;
+  animation: show-refreshing 1.1s ease-in-out infinite;
+}
+
+@keyframes show-refreshing {
+  from { background-position: -40% 0; }
+  to { background-position: 140% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .show-refreshing {
+    animation: none;
+    background: var(--p-primary-color, #3b82f6);
+    opacity: 0.4;
+  }
+}
+
 .show-error-message {
   margin: 1rem 0;
 }