qdadm 1.1.6 → 1.2.0

package/package.json

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

package/src/components/{forms → edit}/FormTab.vue

@@ -2,23 +2,16 @@
 /**
  * FormTab - Normalized tab header component
  *
- * Provides consistent tab headers with optional icon, count badge, and visibility control.
+ * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
+ * icon, badge, count, visible, and disabled options on groups.
  *
- * Props:
- *   - value: Tab identifier (required)
- *   - label: Display text (required)
- *   - icon: PrimeIcon class (e.g., 'pi-cog')
- *   - count: Number to display as badge
- *   - badge: Custom badge text/value
- *   - badgeSeverity: Badge color ('secondary', 'info', 'success', 'warn', 'danger')
- *   - visible: Show/hide tab (default: true)
- *   - disabled: Disable tab interaction
+ * ```ts
+ * // Before (deprecated)
+ * <FormTab value="general" label="General" icon="pi-cog" :count="5" />
  *
- * Usage:
- *   <FormTab value="general" label="General" icon="pi-cog" />
- *   <FormTab value="items" label="Items" :count="5" />
- *   <FormTab value="errors" label="Errors" :count="errors.length" badge-severity="danger" />
- *   <FormTab value="advanced" label="Advanced" :visible="isEdit" />
+ * // After (recommended)
+ * form.group('general', ['field1'], { label: 'General', icon: 'cog', count: 5 })
+ * ```
  */
 
 import { type PropType } from 'vue'

package/src/components/{forms → edit}/FormTabs.vue

@@ -2,22 +2,28 @@
 /**
  * FormTabs - Normalized tab container for forms
  *
- * Provides consistent styling and behavior for form tabs.
- * Works with FormTab component for individual tabs.
+ * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
+ * icon, badge, count, visible, and disabled options on groups.
  *
- * Usage:
- *   <FormTabs v-model="activeTab" @update:modelValue="onTabChange">
- *     <template #tabs>
- *       <FormTab value="general" label="General" icon="pi-cog" />
- *       <FormTab value="items" label="Items" icon="pi-list" :count="items.length" />
- *       <FormTab value="advanced" label="Advanced" :visible="isEdit" />
- *     </template>
- *     <template #panels>
- *       <TabPanel value="general">...</TabPanel>
- *       <TabPanel value="items">...</TabPanel>
- *       <TabPanel value="advanced">...</TabPanel>
- *     </template>
- *   </FormTabs>
+ * ```vue
+ * <!-- Before (deprecated) -->
+ * <FormTabs v-model="activeTab">
+ *   <template #tabs>
+ *     <FormTab value="general" label="General" icon="pi-cog" />
+ *   </template>
+ *   <template #panels>
+ *     <TabPanel value="general">...</TabPanel>
+ *   </template>
+ * </FormTabs>
+ *
+ * <!-- After (recommended) -->
+ * form.group('general', ['field1', 'field2'], { label: 'General', icon: 'cog' })
+ * <FieldGroups :groups="form.groups.value" layout="tabs">
+ *   <template #field="{ field }">
+ *     <FormField :field="field" />
+ *   </template>
+ * </FieldGroups>
+ * ```
  */
 
 import Tabs from 'primevue/tabs'

package/src/components/index.ts

@@ -19,13 +19,16 @@ export { default as DefaultFooter } from './layout/defaults/DefaultFooter.vue'
 export { default as DefaultUserInfo } from './layout/defaults/DefaultUserInfo.vue'
 export { default as DefaultBreadcrumb } from './layout/defaults/DefaultBreadcrumb.vue'
 
-// Forms
-export { default as FormPage } from './forms/FormPage.vue'
-export { default as FormField } from './forms/FormField.vue'
-export { default as FormInput } from './forms/FormInput.vue'
-export { default as FormActions } from './forms/FormActions.vue'
-export { default as FormTabs } from './forms/FormTabs.vue'
-export { default as FormTab } from './forms/FormTab.vue'
+// Item (shared between edit and show)
+export { default as FieldGroups } from './item/FieldGroups.vue'
+
+// Edit (form pages)
+export { default as FormPage } from './edit/FormPage.vue'
+export { default as FormField } from './edit/FormField.vue'
+export { default as FormInput } from './edit/FormInput.vue'
+export { default as FormActions } from './edit/FormActions.vue'
+export { default as FormTabs } from './edit/FormTabs.vue' // Deprecated: use FieldGroups with layout="tabs"
+export { default as FormTab } from './edit/FormTab.vue' // Deprecated: use FieldGroups with layout="tabs"
 
 // Show (read-only detail pages)
 export { default as ShowPage } from './show/ShowPage.vue'

package/src/components/item/FieldGroups.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+/**
+ * FieldGroups - Generic field group renderer with configurable layouts
+ *
+ * Shared component for both edit (form) and show pages.
+ * Uses slots for field rendering to support different field components.
+ *
+ * Supports multiple layout modes:
+ * - flat: Simple sections with headers
+ * - sections: Fieldset-style sections
+ * - cards: Each group in a card
+ * - tabs: TabView for top-level groups
+ * - accordion: Collapsible panels
+ *
+ * ```vue
+ * <FieldGroups :groups="groups" :data="data" layout="tabs">
+ *   <template #field="{ field, value }">
+ *     <FormField :field="field" v-model="data[field.name]" />
+ *   </template>
+ * </FieldGroups>
+ * ```
+ */
+import { computed, type PropType } from 'vue'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
+import TabPanel from 'primevue/tabpanel'
+import Accordion from 'primevue/accordion'
+import AccordionPanel from 'primevue/accordionpanel'
+import AccordionHeader from 'primevue/accordionheader'
+import AccordionContent from 'primevue/accordioncontent'
+import Fieldset from 'primevue/fieldset'
+import Card from 'primevue/card'
+import Tag from 'primevue/tag'
+
+type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast'
+
+/**
+ * Base field config interface
+ */
+interface BaseFieldConfig {
+  name: string
+  type: string
+  label: string
+  [key: string]: unknown
+}
+
+/**
+ * Field group structure
+ */
+interface FieldGroup<T extends BaseFieldConfig = BaseFieldConfig> {
+  name: string
+  label: string
+  fields: T[]
+  children: FieldGroup<T>[]
+  parent?: string
+  // Tab/accordion options
+  icon?: string
+  badge?: string | number
+  badgeSeverity?: BadgeSeverity
+  count?: number
+  visible?: boolean
+  disabled?: boolean
+}
+
+export type LayoutMode = 'flat' | 'sections' | 'cards' | 'tabs' | 'accordion'
+
+const props = defineProps({
+  groups: {
+    type: Array as PropType<FieldGroup[]>,
+    required: true,
+  },
+  data: {
+    type: Object as PropType<Record<string, unknown> | null>,
+    default: null,
+  },
+  layout: {
+    type: String as PropType<LayoutMode>,
+    default: 'flat',
+  },
+  // Nested layout (for children groups)
+  childLayout: {
+    type: String as PropType<LayoutMode>,
+    default: 'sections',
+  },
+})
+
+// Expose slots for field rendering
+defineSlots<{
+  field: (props: { field: BaseFieldConfig; value: unknown; groupName: string }) => unknown
+  // Optional: custom group header
+  'group-header'?: (props: { group: FieldGroup; layout: LayoutMode }) => unknown
+  // Optional: custom group content wrapper
+  'group-content'?: (props: { group: FieldGroup; layout: LayoutMode }) => unknown
+}>()
+
+// Filter out default group for labeling purposes and hidden groups
+const displayGroups = computed(() => {
+  return props.groups.filter((g) => {
+    // Filter by visibility (default to true)
+    if (g.visible === false) return false
+    // Filter out empty default groups
+    return g.name !== '_default' || g.fields.length > 0
+  })
+})
+
+// Get value from data
+function getValue(fieldName: string): unknown {
+  return props.data?.[fieldName]
+}
+
+// Normalize icon class
+function getIconClass(icon: string | undefined): string | null {
+  if (!icon) return null
+  // Already has 'pi' prefix
+  if (icon.startsWith('pi')) {
+    return icon.includes(' ') ? icon : `pi ${icon}`
+  }
+  // Just icon name
+  return `pi pi-${icon}`
+}
+
+// Get badge value to display
+function getBadgeValue(group: FieldGroup): string | number | null {
+  if (group.badge !== undefined && group.badge !== null) return group.badge
+  if (group.count !== undefined && group.count !== null && group.count > 0) return group.count
+  return null
+}
+</script>
+
+<template>
+  <div class="field-groups" :class="`field-groups--${layout}`">
+    <!-- Flat layout: simple sections with optional headers -->
+    <template v-if="layout === 'flat'">
+      <div v-for="group in displayGroups" :key="group.name" class="field-group">
+        <slot name="group-header" :group="group" :layout="layout">
+          <h3 v-if="group.label && group.name !== '_default'" class="field-group-header">
+            {{ group.label }}
+          </h3>
+        </slot>
+        <div class="field-group-fields">
+          <template v-for="field in group.fields" :key="field.name">
+            <slot
+              name="field"
+              :field="field"
+              :value="getValue(field.name)"
+              :group-name="group.name"
+            />
+          </template>
+        </div>
+        <!-- Recursive children -->
+        <FieldGroups
+          v-if="group.children.length > 0"
+          :groups="group.children"
+          :data="data"
+          :layout="childLayout"
+        >
+          <template #field="slotProps">
+            <slot name="field" v-bind="slotProps" />
+          </template>
+        </FieldGroups>
+      </div>
+    </template>
+
+    <!-- Sections layout: Fieldset style -->
+    <template v-else-if="layout === 'sections'">
+      <Fieldset
+        v-for="group in displayGroups"
+        :key="group.name"
+        :legend="group.label || undefined"
+        :toggleable="false"
+      >
+        <div class="field-group-fields">
+          <template v-for="field in group.fields" :key="field.name">
+            <slot
+              name="field"
+              :field="field"
+              :value="getValue(field.name)"
+              :group-name="group.name"
+            />
+          </template>
+        </div>
+        <!-- Recursive children -->
+        <FieldGroups
+          v-if="group.children.length > 0"
+          :groups="group.children"
+          :data="data"
+          :layout="childLayout"
+        >
+          <template #field="slotProps">
+            <slot name="field" v-bind="slotProps" />
+          </template>
+        </FieldGroups>
+      </Fieldset>
+    </template>
+
+    <!-- Cards layout -->
+    <template v-else-if="layout === 'cards'">
+      <Card v-for="group in displayGroups" :key="group.name">
+        <template #title>{{ group.label }}</template>
+        <template #content>
+          <div class="field-group-fields">
+            <template v-for="field in group.fields" :key="field.name">
+              <slot
+                name="field"
+                :field="field"
+                :value="getValue(field.name)"
+                :group-name="group.name"
+              />
+            </template>
+          </div>
+          <!-- Recursive children -->
+          <FieldGroups
+            v-if="group.children.length > 0"
+            :groups="group.children"
+            :data="data"
+            :layout="childLayout"
+          >
+            <template #field="slotProps">
+              <slot name="field" v-bind="slotProps" />
+            </template>
+          </FieldGroups>
+        </template>
+      </Card>
+    </template>
+
+    <!-- Tabs layout -->
+    <template v-else-if="layout === 'tabs'">
+      <Tabs :value="displayGroups[0]?.name || '0'">
+        <TabList>
+          <Tab
+            v-for="group in displayGroups"
+            :key="group.name"
+            :value="group.name"
+            :disabled="group.disabled"
+          >
+            <i v-if="group.icon" :class="getIconClass(group.icon)" class="tab-icon" />
+            <span class="tab-label">{{ group.label }}</span>
+            <Tag
+              v-if="getBadgeValue(group) !== null"
+              :value="String(getBadgeValue(group))"
+              :severity="group.badgeSeverity || 'secondary'"
+              class="tab-badge"
+            />
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel v-for="group in displayGroups" :key="group.name" :value="group.name">
+            <div class="field-group-fields">
+              <template v-for="field in group.fields" :key="field.name">
+                <slot
+                  name="field"
+                  :field="field"
+                  :value="getValue(field.name)"
+                  :group-name="group.name"
+                />
+              </template>
+            </div>
+            <!-- Recursive children -->
+            <FieldGroups
+              v-if="group.children.length > 0"
+              :groups="group.children"
+              :data="data"
+              :layout="childLayout"
+            >
+              <template #field="slotProps">
+                <slot name="field" v-bind="slotProps" />
+              </template>
+            </FieldGroups>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </template>
+
+    <!-- Accordion layout -->
+    <template v-else-if="layout === 'accordion'">
+      <Accordion :value="[displayGroups[0]?.name || '0']" multiple>
+        <AccordionPanel
+          v-for="group in displayGroups"
+          :key="group.name"
+          :value="group.name"
+          :disabled="group.disabled"
+        >
+          <AccordionHeader>
+            <i v-if="group.icon" :class="getIconClass(group.icon)" class="accordion-icon" />
+            <span class="accordion-label">{{ group.label }}</span>
+            <Tag
+              v-if="getBadgeValue(group) !== null"
+              :value="String(getBadgeValue(group))"
+              :severity="group.badgeSeverity || 'secondary'"
+              class="accordion-badge"
+            />
+          </AccordionHeader>
+          <AccordionContent>
+            <div class="field-group-fields">
+              <template v-for="field in group.fields" :key="field.name">
+                <slot
+                  name="field"
+                  :field="field"
+                  :value="getValue(field.name)"
+                  :group-name="group.name"
+                />
+              </template>
+            </div>
+            <!-- Recursive children -->
+            <FieldGroups
+              v-if="group.children.length > 0"
+              :groups="group.children"
+              :data="data"
+              :layout="childLayout"
+            >
+              <template #field="slotProps">
+                <slot name="field" v-bind="slotProps" />
+              </template>
+            </FieldGroups>
+          </AccordionContent>
+        </AccordionPanel>
+      </Accordion>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.field-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field-group-header {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--p-surface-200, #e2e8f0);
+  color: var(--p-text-color);
+}
+
+.field-group-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* Cards layout spacing */
+.field-groups--cards {
+  gap: 1rem;
+}
+
+/* Tabs and accordion panels padding */
+.field-groups--tabs :deep(.p-tabpanel),
+.field-groups--accordion :deep(.p-accordioncontent-content) {
+  padding-top: 1rem;
+}
+
+/* Tab icon and badge styling */
+.tab-icon {
+  margin-right: 0.5rem;
+}
+
+.tab-badge {
+  margin-left: 0.5rem;
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  min-width: 1.25rem;
+  text-align: center;
+}
+
+/* Accordion icon and badge styling */
+.accordion-icon {
+  margin-right: 0.5rem;
+}
+
+.accordion-badge {
+  margin-left: 0.5rem;
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  min-width: 1.25rem;
+  text-align: center;
+}
+</style>

package/src/components/layout/defaults/DefaultFormActions.vue

@@ -15,7 +15,7 @@
  * - qdadmFormEmit: { save, saveAndClose, cancel, delete }
  */
 import { inject, computed, type Ref } from 'vue'
-import FormActions from '../../forms/FormActions.vue'
+import FormActions from '../../edit/FormActions.vue'
 
 interface FormState {
   isEdit?: boolean

package/src/components/show/ShowPage.vue

@@ -42,6 +42,8 @@ import PageHeader from '../layout/PageHeader.vue'
 import Card from 'primevue/card'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
+import FieldGroups from '../item/FieldGroups.vue'
+import ShowField from './ShowField.vue'
 
 /**
  * Page title parts for PageHeader
@@ -83,6 +85,22 @@ interface FetchError {
   detail?: string
 }
 
+/**
+ * Field group structure
+ */
+interface FieldGroup {
+  name: string
+  label: string
+  fields: ResolvedFieldConfig[]
+  children: FieldGroup[]
+  parent?: string
+}
+
+/**
+ * Layout mode for groups
+ */
+type LayoutMode = 'flat' | 'sections' | 'cards' | 'tabs' | 'accordion'
+
 const props = defineProps({
   // State
   loading: { type: Boolean, default: false },
@@ -94,6 +112,9 @@ const props = defineProps({
   // Fields (for auto-rendering - optional, can use #fields slot instead)
   fields: { type: Array as PropType<ResolvedFieldConfig[]>, default: () => [] },
 
+  // Groups (hierarchical field organization)
+  groups: { type: Array as PropType<FieldGroup[]>, default: () => [] },
+
   // Data (entity data for field values)
   data: { type: Object as PropType<Record<string, unknown> | null>, default: null },
 
@@ -109,7 +130,13 @@ const props = defineProps({
   horizontalFields: { type: Boolean, default: true },
   labelWidth: { type: String, default: '140px' },
   // Media zone options
-  mediaWidth: { type: String, default: '200px' }
+  mediaWidth: { type: String, default: '200px' },
+
+  // Group layout mode: flat, sections, cards, tabs, accordion
+  layout: { type: String as PropType<LayoutMode>, default: 'flat' },
+
+  // Child group layout mode (for nested groups)
+  childLayout: { type: String as PropType<LayoutMode>, default: 'sections' }
 })
 
 // Check if media slot is used
@@ -119,11 +146,19 @@ const slots = defineSlots<{
   'header-actions'?: () => unknown
   media?: () => unknown
   fields?: () => unknown
+  groups?: () => unknown
   footer?: () => unknown
   error?: (props: { error: unknown }) => unknown
   loading?: () => unknown
 }>()
 
+// Determine if we should use group rendering
+const useGroupLayout = computed(() => {
+  // Use groups if: layout is not flat, or groups are explicitly defined (not just _default)
+  const hasRealGroups = props.groups.length > 0 && !(props.groups.length === 1 && props.groups[0]?.name === '_default')
+  return hasRealGroups && props.layout !== 'flat'
+})
+
 const emit = defineEmits<{
   (e: 'edit'): void
   (e: 'delete'): void
@@ -207,9 +242,32 @@ const fetchErrorMessage = computed<string | null>(() => {
               <slot name="media" />
             </div>
 
-            <!-- Fields zone -->
-            <div class="show-fields" :class="{ 'show-fields--horizontal': horizontalFields }">
-              <slot name="fields" />
+            <!-- Fields/Groups zone -->
+            <div class="show-fields" :class="{ 'show-fields--horizontal': horizontalFields && !useGroupLayout }">
+              <!-- Group layout mode -->
+              <template v-if="useGroupLayout">
+                <slot name="groups">
+                  <FieldGroups
+                    :groups="groups"
+                    :data="data"
+                    :layout="layout"
+                    :child-layout="childLayout"
+                  >
+                    <template #field="{ field, value }">
+                      <ShowField
+                        :field="field"
+                        :value="value as string | number | boolean | Date | Record<string, unknown> | unknown[]"
+                        :horizontal="horizontalFields"
+                        :label-width="labelWidth"
+                      />
+                    </template>
+                  </FieldGroups>
+                </slot>
+              </template>
+              <!-- Flat fields mode (default) -->
+              <template v-else>
+                <slot name="fields" />
+              </template>
             </div>
           </div>
 
@@ -245,9 +303,32 @@ const fetchErrorMessage = computed<string | null>(() => {
             <slot name="media" />
           </div>
 
-          <!-- Fields zone -->
-          <div class="show-fields" :class="{ 'show-fields--horizontal': horizontalFields }">
-            <slot name="fields" />
+          <!-- Fields/Groups zone -->
+          <div class="show-fields" :class="{ 'show-fields--horizontal': horizontalFields && !useGroupLayout }">
+            <!-- Group layout mode -->
+            <template v-if="useGroupLayout">
+              <slot name="groups">
+                <FieldGroups
+                  :groups="groups"
+                  :data="data"
+                  :layout="layout"
+                  :child-layout="childLayout"
+                >
+                  <template #field="{ field, value }">
+                    <ShowField
+                      :field="field"
+                      :value="value as string | number | boolean | Date | Record<string, unknown> | unknown[]"
+                      :horizontal="horizontalFields"
+                      :label-width="labelWidth"
+                    />
+                  </template>
+                </FieldGroups>
+              </slot>
+            </template>
+            <!-- Flat fields mode (default) -->
+            <template v-else>
+              <slot name="fields" />
+            </template>
           </div>
         </div>
 

package/src/composables/index.ts

@@ -132,3 +132,17 @@ export {
   type UserRecord,
 } from './useUserImpersonator'
 export { useCurrentEntity, type UseCurrentEntityReturn } from './useCurrentEntity'
+export {
+  useFieldManager,
+  snakeCaseToTitle,
+  type BaseFieldDefinition,
+  type ResolvedFieldConfig as FieldManagerFieldConfig,
+  type FieldGroup,
+  type GroupDefinition,
+  type GroupOptions,
+  type GenerateFieldsOptions as FieldManagerGenerateOptions,
+  type AddFieldOptions as FieldManagerAddOptions,
+  type MoveFieldPosition,
+  type UseFieldManagerOptions,
+  type UseFieldManagerReturn,
+} from './useFieldManager'