qdadm 0.16.0 → 0.17.0

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

@@ -0,0 +1,53 @@
+<script setup>
+/**
+ * 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 } from 'vue'
+import FormActions from '../../forms/FormActions.vue'
+
+// Inject form state from FormLayout
+const formState = inject('qdadmFormState', null)
+const formEmit = inject('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() {
+  formEmit?.save()
+}
+
+function onSaveAndClose() {
+  formEmit?.saveAndClose()
+}
+
+function onCancel() {
+  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,69 @@
+<script setup>
+/**
+ * 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, computed } from 'vue'
+
+const features = inject('qdadmFeatures', { poweredBy: true })
+
+// App config from useApp (injected by createQdadm plugin)
+const app = inject('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>
+.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,197 @@
+<script setup>
+/**
+ * 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, useRouter, useRoute } from 'vue-router'
+import { useNavigation } from '../../../composables/useNavigation'
+
+const router = useRouter()
+const route = useRoute()
+const { navSections, isNavActive, sectionHasActiveItem, handleNavClick } = useNavigation()
+
+// App config for storage key namespacing
+const app = inject('qdadmApp', { shortName: 'qdadm' })
+
+// LocalStorage key for collapsed sections state
+const STORAGE_KEY = computed(() => `${app.shortName.toLowerCase()}_nav_collapsed`)
+
+// Collapsed sections state (section title -> boolean)
+const collapsedSections = ref({})
+
+/**
+ * Load collapsed state from localStorage
+ */
+function loadCollapsedState() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY.value)
+    if (stored) {
+      collapsedSections.value = JSON.parse(stored)
+    }
+  } catch (e) {
+    console.warn('Failed to load nav state:', e)
+  }
+}
+
+/**
+ * Save collapsed state to localStorage
+ */
+function saveCollapsedState() {
+  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) {
+  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) {
+  if (sectionHasActiveItem(section)) {
+    return true
+  }
+  return !collapsedSections.value[section.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) {
+    if (sectionHasActiveItem(section) && collapsedSections.value[section.title]) {
+      // Auto-expand but don't save (user can collapse again if they want)
+      collapsedSections.value[section.title] = false
+    }
+  }
+})
+</script>
+
+<template>
+  <nav class="default-menu">
+    <div v-for="section in navSections" :key="section.title" class="nav-section">
+      <div
+        class="nav-section-title"
+        :class="{ 'nav-section-active': sectionHasActiveItem(section) }"
+        @click="toggleSection(section.title)"
+      >
+        <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>
+.default-menu {
+  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 {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1.5rem;
+  color: var(--p-surface-300, #cbd5e1);
+  text-decoration: none;
+  transition: all 0.15s;
+}
+
+.nav-item:hover {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-surface-0, white);
+}
+
+.nav-item-active {
+  background: var(--p-primary-600, #2563eb);
+  color: var(--p-surface-0, white);
+}
+
+.nav-item i {
+  font-size: 1rem;
+  width: 1.25rem;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,79 @@
+<script setup>
+/**
+ * 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'
+
+const props = defineProps({
+  /**
+   * First record index (0-based)
+   */
+  first: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * Number of rows per page
+   */
+  rows: {
+    type: Number,
+    default: 10
+  },
+  /**
+   * Total number of records
+   */
+  totalRecords: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * Options for rows per page dropdown
+   */
+  rowsPerPageOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100]
+  },
+  /**
+   * Template for the paginator layout
+   */
+  template: {
+    type: String,
+    default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+  }
+})
+
+const emit = defineEmits(['page'])
+
+function onPage(event) {
+  emit('page', event)
+}
+</script>
+
+<template>
+  <Paginator
+    :first="first"
+    :rows="rows"
+    :totalRecords="totalRecords"
+    :rowsPerPageOptions="rowsPerPageOptions"
+    :template="template"
+    @page="onPage"
+    class="default-pagination"
+  />
+</template>
+
+<style scoped>
+.default-pagination {
+  margin-top: 1rem;
+}
+</style>

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

@@ -0,0 +1,130 @@
+<script setup>
+/**
+ * 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 } from 'vue'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+
+const props = defineProps({
+  /**
+   * Data items to display in the table
+   */
+  items: {
+    type: Array,
+    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,
+    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,
+    default: null
+  },
+  /**
+   * Current sort order (1 = asc, -1 = desc)
+   */
+  sortOrder: {
+    type: Number,
+    default: 1
+  }
+})
+
+const emit = defineEmits(['update:selection', 'sort'])
+
+const slots = useSlots()
+const hasDefaultSlot = computed(() => !!slots.default)
+
+function onSelectionChange(value) {
+  emit('update:selection', value)
+}
+
+function onSort(event) {
+  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>
+.default-table {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,16 @@
+<script setup>
+/**
+ * DefaultToaster - Default toaster component for BaseLayout
+ *
+ * Renders the Toast component for notifications.
+ * Uses PrimeVue Toast with default positioning.
+ *
+ * This is the default component rendered in the "toaster" zone
+ * when no blocks are registered.
+ */
+import Toast from 'primevue/toast'
+</script>
+
+<template>
+  <Toast />
+</template>

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

@@ -0,0 +1,96 @@
+<script setup>
+/**
+ * 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, inject } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuth } from '../../../composables/useAuth'
+import Button from 'primevue/button'
+
+const router = useRouter()
+const { isAuthenticated, user, logout, authEnabled } = useAuth()
+
+const userInitials = computed(() => {
+  const username = user.value?.username
+  if (!username) return '?'
+  return username.substring(0, 2).toUpperCase()
+})
+
+const userDisplayName = computed(() => {
+  return user.value?.username || user.value?.name || 'User'
+})
+
+const userSubtitle = computed(() => {
+  return user.value?.email || user.value?.role || ''
+})
+
+function handleLogout() {
+  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>
+.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.js

@@ -0,0 +1,17 @@
+/**
+ * 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'
+export { default as DefaultToaster } from './DefaultToaster.vue'
+
+// FormLayout defaults
+export { default as DefaultFormActions } from './DefaultFormActions.vue'

package/src/composables/index.js

@@ -5,18 +5,18 @@
 export { useBareForm } from './useBareForm'
 export { useBreadcrumb } from './useBreadcrumb'
 export { useDirtyState } from './useDirtyState'
-export { useEntityTitle } from './useEntityTitle'
 export { useForm } from './useForm'
+export { useFormPageBuilder } from './useFormPageBuilder'
 export * from './useJsonSyntax'
 export { useListPageBuilder, PAGE_SIZE_OPTIONS } from './useListPageBuilder'
-export { usePageBuilder } from './usePageBuilder'
 export { usePageTitle } from './usePageTitle'
-export { useSubEditor } from './useSubEditor'
-export { useTabSync } from './useTabSync'
 export { useApp } from './useApp'
 export { useAuth } from './useAuth'
 export { useNavContext } from './useNavContext'
 export { useNavigation } from './useNavigation'
-export { useStatus } from './useStatus'
 export { useUnsavedChangesGuard } from './useUnsavedChangesGuard'
-export { useManager } from './useManager'
+export { useGuardDialog } from './useGuardStore'
+export { useSignals } from './useSignals'
+export { useZoneRegistry } from './useZoneRegistry'
+export { useHooks } from './useHooks'
+export { useLayoutResolver, createLayoutComponents, layoutMeta, LAYOUT_TYPES } from './useLayoutResolver'