@quazardous/qdadm 1.19.3

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * DefaultFormActions - Default component for the form actions zone
+ *
+ * Renders save/cancel buttons with loading states, using the form state
+ * provided by FormLayout via Vue injection.
+ *
+ * This component is rendered by Zone when no blocks are registered
+ * in the 'actions' zone and no slot override is provided.
+ *
+ * Uses FormActions component for consistent button rendering.
+ *
+ * Inject:
+ * - qdadmFormState: { loading, saving, dirty, isEdit }
+ * - qdadmFormEmit: { save, saveAndClose, cancel, delete }
+ */
+import { inject, computed, type Ref } from 'vue'
+import FormActions from '../../edit/FormActions.vue'
+
+interface FormState {
+  isEdit?: boolean
+  saving?: boolean
+  dirty?: boolean
+  loading?: boolean
+}
+
+interface FormEmit {
+  save: () => void
+  saveAndClose: () => void
+  cancel: () => void
+  delete?: () => void
+}
+
+// Inject form state from FormLayout
+const formState = inject<Ref<FormState> | null>('qdadmFormState', null)
+const formEmit = inject<FormEmit | null>('qdadmFormEmit', null)
+
+// Fallback values if not injected (for standalone testing)
+const isEdit = computed(() => formState?.value?.isEdit ?? false)
+const saving = computed(() => formState?.value?.saving ?? false)
+const dirty = computed(() => formState?.value?.dirty ?? true)
+
+// Event handlers
+function onSave(): void {
+  formEmit?.save()
+}
+
+function onSaveAndClose(): void {
+  formEmit?.saveAndClose()
+}
+
+function onCancel(): void {
+  formEmit?.cancel()
+}
+</script>
+
+<template>
+  <FormActions
+    :isEdit="isEdit"
+    :saving="saving"
+    :dirty="dirty"
+    :showSaveAndClose="true"
+    @save="onSave"
+    @saveAndClose="onSaveAndClose"
+    @cancel="onCancel"
+  />
+</template>

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+/**
+ * DefaultHeader - Default header component for BaseLayout
+ *
+ * Displays app branding (logo or name) and version badge.
+ * Extracted from AppLayout for zone-based architecture.
+ *
+ * This is the default component rendered in the "header" zone
+ * when no blocks are registered.
+ */
+import { inject } from 'vue'
+
+interface AppConfig {
+  name: string
+  shortName: string
+  version: string | null
+  logo: string | null
+}
+
+// App config from useApp (injected by createQdadm plugin)
+const app = inject<AppConfig>('qdadmApp', {
+  name: 'Admin',
+  shortName: 'adm',
+  version: null,
+  logo: null
+})
+</script>
+
+<template>
+  <div class="default-header">
+    <div class="header-branding">
+      <img v-if="app.logo" :src="app.logo" :alt="app.name" class="header-logo" />
+      <h1 v-else class="header-title">{{ app.name }}</h1>
+    </div>
+    <span v-if="app.version" class="header-version">v{{ app.version }}</span>
+  </div>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.default-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--p-surface-700, #334155);
+}
+
+.header-branding {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.header-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--p-surface-0, white);
+}
+
+.header-logo {
+  max-height: 32px;
+  max-width: 160px;
+}
+
+.header-version {
+  font-size: 0.625rem;
+  color: var(--p-surface-400, #94a3b8);
+  background: var(--p-surface-700, #334155);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+</style>

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

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/**
+ * DefaultMenu - Default navigation menu for BaseLayout
+ *
+ * Displays sidebar navigation with collapsible sections.
+ * Navigation items are auto-built from moduleRegistry.
+ * Extracted from AppLayout for zone-based architecture.
+ *
+ * This is the default component rendered in the "menu" zone
+ * when no blocks are registered.
+ */
+import { ref, watch, onMounted, computed, inject } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { useNavigation, type NavSection } from '../../../composables/useNavigation'
+
+interface AppConfig {
+  shortName: string
+  [key: string]: unknown
+}
+
+const route = useRoute()
+const { navSections, isNavActive, sectionHasActiveItem, handleNavClick } = useNavigation()
+
+// App config for storage key namespacing
+const app = inject<AppConfig>('qdadmApp', { shortName: 'qdadm' })
+
+// LocalStorage key for collapsed sections state
+const STORAGE_KEY = computed<string>(() => `${app.shortName.toLowerCase()}_nav_collapsed`)
+
+// Collapsed sections state (section title -> boolean)
+const collapsedSections = ref<Record<string, boolean>>({})
+
+/**
+ * Load collapsed state from localStorage
+ */
+function loadCollapsedState(): void {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY.value)
+    if (stored) {
+      collapsedSections.value = JSON.parse(stored) as Record<string, boolean>
+    }
+  } catch (e) {
+    console.warn('Failed to load nav state:', e)
+  }
+}
+
+/**
+ * Save collapsed state to localStorage
+ */
+function saveCollapsedState(): void {
+  try {
+    localStorage.setItem(STORAGE_KEY.value, JSON.stringify(collapsedSections.value))
+  } catch (e) {
+    console.warn('Failed to save nav state:', e)
+  }
+}
+
+/**
+ * Toggle section collapsed state
+ */
+function toggleSection(sectionTitle: string): void {
+  collapsedSections.value[sectionTitle] = !collapsedSections.value[sectionTitle]
+  saveCollapsedState()
+}
+
+/**
+ * Check if section should be shown expanded
+ * - Never collapsed if it contains active item
+ * - Otherwise respect user preference
+ */
+function isSectionExpanded(section: NavSection): boolean {
+  if (sectionHasActiveItem(section)) {
+    return true
+  }
+  const title = section.title || section.label || ''
+  return !collapsedSections.value[title]
+}
+
+// Load state on mount
+onMounted(() => {
+  loadCollapsedState()
+})
+
+// Auto-expand section when navigating to an item in it
+watch(() => route?.path, () => {
+  if (!route) return
+  for (const section of navSections.value) {
+    const title = section.title || section.label || ''
+    if (sectionHasActiveItem(section) && collapsedSections.value[title]) {
+      // Auto-expand but don't save (user can collapse again if they want)
+      collapsedSections.value[title] = false
+    }
+  }
+})
+</script>
+
+<template>
+  <!-- Use sidebar-nav class to inherit global nav-item styles from _sidebar.scss -->
+  <nav class="sidebar-nav">
+    <div v-for="section in navSections" :key="section.title || section.label" class="nav-section">
+      <div
+        class="nav-section-title"
+        :class="{ 'nav-section-active': sectionHasActiveItem(section) }"
+        @click="toggleSection(section.title || section.label || '')"
+      >
+        <span>{{ section.title }}</span>
+        <i
+          class="nav-section-chevron pi"
+          :class="isSectionExpanded(section) ? 'pi-chevron-down' : 'pi-chevron-right'"
+        ></i>
+      </div>
+      <div class="nav-section-items" :class="{ 'nav-section-collapsed': !isSectionExpanded(section) }">
+        <RouterLink
+          v-for="item in section.items"
+          :key="item.route"
+          :to="{ name: item.route }"
+          class="nav-item"
+          :class="{ 'nav-item-active': isNavActive(item) }"
+          @click="handleNavClick($event, item)"
+        >
+          <i :class="item.icon"></i>
+          <span>{{ item.label }}</span>
+        </RouterLink>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+/* DefaultMenu uses sidebar-nav class to inherit global nav-item styles from _sidebar.scss
+   Only component-specific styles remain here */
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0;
+}
+
+.nav-section {
+  margin-bottom: 0.5rem;
+}
+
+.nav-section-title {
+  padding: 0.5rem 1.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--p-surface-400, #94a3b8);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s;
+}
+
+.nav-section-title:hover {
+  color: var(--p-surface-200, #e2e8f0);
+}
+
+.nav-section-active {
+  color: var(--p-primary-400, #60a5fa);
+}
+
+.nav-section-chevron {
+  font-size: 0.625rem;
+  transition: transform 0.2s;
+}
+
+.nav-section-items {
+  max-height: 500px;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out, opacity 0.15s;
+}
+
+.nav-section-collapsed {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Nav item styles are in _sidebar.scss (global styles)
+   See .sidebar-nav .nav-item for base styles */
+</style>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * DefaultPagination - Default pagination component for ListLayout
+ *
+ * Renders a PrimeVue Paginator with standard configuration.
+ * Used as the default for the "pagination" zone in ListLayout.
+ *
+ * When `lazy` is false and pagination is handled by DataTable,
+ * this component is typically not shown (DataTable has its own paginator).
+ *
+ * This is useful for:
+ * - Separate pagination controls outside the table
+ * - Custom pagination layouts
+ * - Server-side (lazy) pagination with separate paginator
+ */
+import Paginator from 'primevue/paginator'
+
+interface PageEvent {
+  first: number
+  rows: number
+  page: number
+  pageCount?: number
+}
+
+interface Props {
+  /** First record index (0-based) */
+  first?: number
+  /** Number of rows per page */
+  rows?: number
+  /** Total number of records */
+  totalRecords?: number
+  /** Options for rows per page dropdown */
+  rowsPerPageOptions?: number[]
+  /** Template for the paginator layout */
+  template?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  first: 0,
+  rows: 10,
+  totalRecords: 0,
+  rowsPerPageOptions: () => [10, 25, 50, 100],
+  template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+})
+
+const emit = defineEmits<{
+  page: [event: PageEvent]
+}>()
+
+function onPage(event: PageEvent): void {
+  emit('page', event)
+}
+</script>
+
+<template>
+  <Paginator
+    :first="first"
+    :rows="rows"
+    :totalRecords="totalRecords"
+    :rowsPerPageOptions="rowsPerPageOptions"
+    :template="template"
+    @page="onPage"
+    class="default-pagination"
+  />
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.default-pagination {
+  margin-top: 1rem;
+}
+</style>

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

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+/**
+ * DefaultTable - Default table component for ListLayout
+ *
+ * Renders a PrimeVue DataTable with standard configuration.
+ * Used as the default for the "table" zone in ListLayout.
+ *
+ * Accepts props from the list page builder for data binding.
+ * Supports slots for column definitions.
+ *
+ * This is a minimal wrapper that expects:
+ * - items: Array of data to display
+ * - loading: Boolean loading state
+ * - Columns via default slot
+ */
+import { computed, useSlots, type PropType } from 'vue'
+import DataTable, { type DataTableSortEvent } from 'primevue/datatable'
+import Column from 'primevue/column'
+
+defineProps({
+  /**
+   * Data items to display in the table
+   */
+  items: {
+    type: Array as PropType<unknown[]>,
+    default: () => []
+  },
+  /**
+   * Loading state
+   */
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Field to use as unique key for rows
+   */
+  dataKey: {
+    type: String,
+    default: 'id'
+  },
+  /**
+   * Current selection (for selectable tables)
+   */
+  selection: {
+    type: Array as PropType<unknown[] | undefined>,
+    default: undefined
+  },
+  /**
+   * Enable row selection
+   */
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Enable striped rows
+   */
+  stripedRows: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Enable removable sort
+   */
+  removableSort: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Current sort field
+   */
+  sortField: {
+    type: String as PropType<string | undefined>,
+    default: undefined
+  },
+  /**
+   * Current sort order (1 = asc, -1 = desc)
+   */
+  sortOrder: {
+    type: Number as PropType<1 | -1>,
+    default: 1
+  }
+})
+
+const emit = defineEmits<{
+  'update:selection': [value: unknown[]]
+  'sort': [event: DataTableSortEvent]
+}>()
+
+const slots = useSlots()
+const hasDefaultSlot = computed<boolean>(() => !!slots.default)
+
+function onSelectionChange(value: unknown[]): void {
+  emit('update:selection', value)
+}
+
+function onSort(event: DataTableSortEvent): void {
+  emit('sort', event)
+}
+</script>
+
+<template>
+  <DataTable
+    :value="items"
+    :loading="loading"
+    :dataKey="dataKey"
+    :selection="selection"
+    :sortField="sortField"
+    :sortOrder="sortOrder"
+    :stripedRows="stripedRows"
+    :removableSort="removableSort"
+    @update:selection="onSelectionChange"
+    @sort="onSort"
+    class="default-table"
+  >
+    <!-- Columns from slot -->
+    <slot />
+
+    <!-- Selection column if selectable -->
+    <Column
+      v-if="selectable && !hasDefaultSlot"
+      selectionMode="multiple"
+      headerStyle="width: 3rem"
+    />
+  </DataTable>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.default-table {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+/**
+ * DefaultUserInfo - Default user info component for sidebar
+ *
+ * Displays user avatar, name, role, and logout button.
+ * Extracted from AppLayout for zone-based architecture.
+ *
+ * This component is used when auth is enabled.
+ */
+import { computed, type ComputedRef } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '../../../composables/useAuth'
+import Button from 'primevue/button'
+
+interface UserData {
+  username?: string
+  name?: string
+  email?: string
+  role?: string
+  [key: string]: unknown
+}
+
+const router = useRouter()
+const { user, logout, authEnabled } = useAuth()
+
+// Cast user to expected shape (useAuth returns unknown)
+const userData = computed<UserData | null>(() => user.value as UserData | null)
+
+const userInitials: ComputedRef<string> = computed(() => {
+  const username = userData.value?.username
+  if (!username) return '?'
+  return username.substring(0, 2).toUpperCase()
+})
+
+const userDisplayName: ComputedRef<string> = computed(() => {
+  return userData.value?.username || userData.value?.name || 'User'
+})
+
+const userSubtitle: ComputedRef<string> = computed(() => {
+  return userData.value?.email || userData.value?.role || ''
+})
+
+function handleLogout(): void {
+  logout()
+  router.push({ name: 'login' })
+}
+</script>
+
+<template>
+  <div v-if="authEnabled" class="default-user-info">
+    <div class="user-avatar">{{ userInitials }}</div>
+    <div class="user-details">
+      <div class="user-name">{{ userDisplayName }}</div>
+      <div class="user-role">{{ userSubtitle }}</div>
+    </div>
+    <Button
+      icon="pi pi-sign-out"
+      severity="secondary"
+      text
+      rounded
+      @click="handleLogout"
+      v-tooltip.top="'Logout'"
+    />
+  </div>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.default-user-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--p-surface-700, #334155);
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--p-primary-600, #2563eb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--p-surface-0, white);
+}
+
+.user-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name {
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--p-surface-0, white);
+}
+
+.user-role {
+  font-size: 0.75rem;
+  color: var(--p-surface-400, #94a3b8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/layout/defaults/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Default zone components for layouts
+ *
+ * These components are rendered when no blocks are registered
+ * in their respective zones.
+ */
+
+// BaseLayout defaults
+export { default as DefaultHeader } from './DefaultHeader.vue'
+export { default as DefaultMenu } from './DefaultMenu.vue'
+export { default as DefaultFooter } from './DefaultFooter.vue'
+export { default as DefaultUserInfo } from './DefaultUserInfo.vue'
+export { default as DefaultBreadcrumb } from './DefaultBreadcrumb.vue'
+
+// FormLayout defaults
+export { default as DefaultFormActions } from './DefaultFormActions.vue'