qdadm 1.1.3 → 1.1.6

package/package.json

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

package/src/components/index.ts

@@ -27,6 +27,11 @@ export { default as FormActions } from './forms/FormActions.vue'
 export { default as FormTabs } from './forms/FormTabs.vue'
 export { default as FormTab } from './forms/FormTab.vue'
 
+// Show (read-only detail pages)
+export { default as ShowPage } from './show/ShowPage.vue'
+export { default as ShowField } from './show/ShowField.vue'
+export { default as ShowDisplay } from './show/ShowDisplay.vue'
+
 // Lists
 export { default as ListPage } from './lists/ListPage.vue'
 export { default as ActionButtons } from './lists/ActionButtons.vue'

package/src/components/layout/PageNav.vue

@@ -16,7 +16,7 @@
  * - showDetailsLink: Show "Details" link in navlinks (default: false)
  */
 import { computed, watch, inject, type Ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { getSiblingRoutes, getChildRoutes, type ModuleRoute, type ParentConfig } from '../../module/moduleRegistry'
 import { useOrchestrator } from '../../orchestrator/useOrchestrator.js'
 import type { EntityManager } from '../../entity/EntityManager'
@@ -37,6 +37,7 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
+const router = useRouter()
 const { getManager } = useOrchestrator()
 
 // Parent config from route meta
@@ -44,13 +45,22 @@ const parentConfig = computed<ParentConfig | undefined>(() => route.meta?.parent
 
 /**
  * Get default item route for an entity manager
- * - Read-only entities: use -show suffix
- * - Editable entities: use -edit suffix
+ * Checks which routes actually exist and returns the appropriate one:
+ * - Prefers -edit if it exists (editable entity)
+ * - Falls back to -show if -edit doesn't exist
+ * - Returns null if neither exists
  */
 function getDefaultItemRoute(manager: EntityManager<EntityRecord> | null): string | null {
   if (!manager) return null
-  const suffix = manager.readOnly ? '-show' : '-edit'
-  return `${manager.routePrefix}${suffix}`
+
+  const editRoute = `${manager.routePrefix}-edit`
+  const showRoute = `${manager.routePrefix}-show`
+
+  // Check which routes actually exist and return the first available
+  if (router.hasRoute(editRoute)) return editRoute
+  if (router.hasRoute(showRoute)) return showRoute
+
+  return null
 }
 
 // Sibling navlinks (routes with same parent)

package/src/components/lists/ListPage.vue

@@ -118,6 +118,7 @@ const props = defineProps({
   // Filters
   filters: { type: Array as PropType<FilterConfig[]>, default: () => [] },
   filterValues: { type: Object as PropType<Record<string, unknown>>, default: () => ({}) },
+  isFilterAtDefault: { type: Function as PropType<(name: string) => boolean>, default: () => () => true },
 
   // Row Actions
   getActions: { type: Function as unknown as PropType<((row: unknown) => ResolvedAction[]) | null>, default: null },
@@ -300,6 +301,24 @@ function onRowClick(event: { data: unknown; originalEvent: Event }): void {
   // event.data = row data, event.originalEvent = Event
   emit('row-click', event.data, event.originalEvent as MouseEvent)
 }
+
+/**
+ * Get filter CSS class based on value and default state
+ * - No value (null/empty): no class
+ * - Value = default: 'filter-default' (blue/info)
+ * - Value ≠ default: 'filter-modified' (orange/warning)
+ */
+function getFilterClass(filter: FilterConfig): Record<string, boolean> {
+  const value = localFilterValues.value[filter.name]
+  const hasValue = value != null && value !== ''
+  if (!hasValue) return {}
+
+  const isDefault = props.isFilterAtDefault(filter.name)
+  return {
+    'filter-default': isDefault,
+    'filter-modified': !isDefault
+  }
+}
 </script>
 
 <template>
@@ -380,7 +399,7 @@ function onRowClick(event: { data: unknown; originalEvent: Event }): void {
             :dropdown="true"
             :minLength="0"
             :style="{ minWidth: filter.width || '160px' }"
-            :class="{ 'filter-active': localFilterValues[filter.name] != null && localFilterValues[filter.name] !== '' }"
+            :class="getFilterClass(filter)"
             :inputClass="'filter-autocomplete-input'"
           />
           <!-- Standard select filter -->
@@ -393,7 +412,7 @@ function onRowClick(event: { data: unknown; originalEvent: Event }): void {
             :optionValue="filter.optionValue || 'value'"
             :placeholder="filter.placeholder"
             :style="{ minWidth: filter.width || '160px' }"
-            :class="{ 'filter-active': localFilterValues[filter.name] != null && localFilterValues[filter.name] !== '' }"
+            :class="getFilterClass(filter)"
           />
         </template>
         <slot name="filters" ></slot>

package/src/components/show/ShowDisplay.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+/**
+ * ShowDisplay - Auto-renders the appropriate display widget based on field config
+ *
+ * Takes a field config object and renders the matching display component.
+ * Supports hint override but field.type takes precedence if specified.
+ *
+ * Usage:
+ * <ShowDisplay :field="f" :value="data[f.name]" />
+ *
+ * Display types:
+ * - text: simple text
+ * - number: formatted number
+ * - boolean: Yes/No or icon
+ * - date: formatted date
+ * - datetime: formatted datetime
+ * - select: label from options
+ * - email: mailto link
+ * - password: masked
+ * - textarea: multi-line text
+ * - reference: link to entity (requires referenceRoute)
+ * - image: image preview
+ * - url: clickable link
+ * - json: formatted JSON
+ * - currency: formatted currency
+ * - badge: styled tag
+ */
+import { computed, type PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import Tag from 'primevue/tag'
+
+type DisplayType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'textarea'
+  | 'select'
+  | 'boolean'
+  | 'date'
+  | 'datetime'
+  | 'reference'
+  | 'image'
+  | 'url'
+  | 'json'
+  | 'currency'
+  | 'badge'
+
+type DisplayValue = string | number | boolean | Date | null | undefined | unknown
+
+interface SelectOption {
+  label?: string
+  value?: string | number
+  [key: string]: unknown
+}
+
+interface FieldConfig {
+  name: string
+  type?: DisplayType
+  // Display options
+  dateFormat?: string
+  currencyCode?: string
+  locale?: string
+  booleanLabels?: { true: string; false: string }
+  // Reference options
+  reference?: string
+  referenceRoute?: string | ((value: unknown) => { name: string; params: Record<string, unknown> })
+  referenceLabel?: string | ((value: unknown, option?: unknown) => string)
+  // Select options (for label lookup)
+  options?: SelectOption[]
+  optionLabel?: string
+  optionValue?: string
+  // Badge options
+  severity?: string | ((value: unknown) => string)
+  // Image options
+  imageWidth?: string
+  imageHeight?: string
+  // Custom render
+  render?: (value: unknown) => string
+}
+
+const props = defineProps({
+  field: { type: Object as PropType<FieldConfig>, required: true },
+  value: { type: [String, Number, Boolean, Date, Object, Array] as PropType<DisplayValue>, default: null },
+  hint: { type: String as PropType<DisplayType | null>, default: null }
+})
+
+// Resolve display type: field.type > hint > 'text'
+const displayType = computed<DisplayType>(() => (props.field?.type as DisplayType) || props.hint || 'text')
+
+// Check if value is empty
+const isEmpty = computed(() => {
+  return props.value === null || props.value === undefined || props.value === ''
+})
+
+// Format text value
+const textValue = computed(() => {
+  if (isEmpty.value) return '-'
+  if (props.field.render) return props.field.render(props.value)
+  return String(props.value)
+})
+
+// Format number value
+const numberValue = computed(() => {
+  if (isEmpty.value) return '-'
+  const num = Number(props.value)
+  if (isNaN(num)) return String(props.value)
+  const locale = props.field.locale || 'en-US'
+  return new Intl.NumberFormat(locale).format(num)
+})
+
+// Format currency value
+const currencyValue = computed(() => {
+  if (isEmpty.value) return '-'
+  const num = Number(props.value)
+  if (isNaN(num)) return String(props.value)
+  const locale = props.field.locale || 'en-US'
+  const currency = props.field.currencyCode || 'USD'
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(num)
+})
+
+// Format boolean value
+const booleanValue = computed(() => {
+  if (isEmpty.value) return '-'
+  const labels = props.field.booleanLabels || { true: 'Yes', false: 'No' }
+  return props.value ? labels.true : labels.false
+})
+
+const booleanIcon = computed(() => {
+  if (isEmpty.value) return 'pi-minus'
+  return props.value ? 'pi-check' : 'pi-times'
+})
+
+const booleanIconClass = computed(() => {
+  if (isEmpty.value) return 'text-muted'
+  return props.value ? 'text-success' : 'text-danger'
+})
+
+// Format date value
+const dateValue = computed(() => {
+  if (isEmpty.value) return '-'
+  const v = props.value as unknown
+  const date = (typeof v === 'object' && v instanceof Date) ? v : new Date(String(v))
+  if (isNaN(date.getTime())) return String(props.value)
+  const locale = props.field.locale || 'en-US'
+  const format = props.field.dateFormat || 'short'
+  return new Intl.DateTimeFormat(locale, { dateStyle: format as 'short' | 'medium' | 'long' | 'full' }).format(date)
+})
+
+// Format datetime value
+const datetimeValue = computed(() => {
+  if (isEmpty.value) return '-'
+  const v = props.value as unknown
+  const date = (typeof v === 'object' && v instanceof Date) ? v : new Date(String(v))
+  if (isNaN(date.getTime())) return String(props.value)
+  const locale = props.field.locale || 'en-US'
+  return new Intl.DateTimeFormat(locale, { dateStyle: 'short', timeStyle: 'short' }).format(date)
+})
+
+// Format select value (lookup label from options)
+const selectValue = computed(() => {
+  if (isEmpty.value) return '-'
+  const options = props.field.options || []
+  const optionValue = props.field.optionValue || 'value'
+  const optionLabel = props.field.optionLabel || 'label'
+
+  const option = options.find((opt) => opt[optionValue] === props.value)
+  if (option) {
+    return option[optionLabel] as string
+  }
+  return String(props.value)
+})
+
+// Reference route
+const referenceRoute = computed<RouteLocationRaw | null>(() => {
+  if (!props.field.referenceRoute || isEmpty.value) return null
+  if (typeof props.field.referenceRoute === 'function') {
+    return props.field.referenceRoute(props.value) as RouteLocationRaw
+  }
+  return { name: props.field.referenceRoute, params: { id: String(props.value) } }
+})
+
+// Reference label
+const referenceLabel = computed(() => {
+  if (isEmpty.value) return '-'
+  if (typeof props.field.referenceLabel === 'function') {
+    return props.field.referenceLabel(props.value)
+  }
+  if (props.field.referenceLabel) {
+    return props.field.referenceLabel
+  }
+  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'
+})
+
+// JSON formatted
+const jsonValue = computed(() => {
+  if (isEmpty.value) return '-'
+  try {
+    return JSON.stringify(props.value, null, 2)
+  } catch {
+    return String(props.value)
+  }
+})
+
+// Image dimensions
+const imageStyle = computed(() => ({
+  maxWidth: props.field.imageWidth || '200px',
+  maxHeight: props.field.imageHeight || '150px'
+}))
+</script>
+
+<template>
+  <!-- Empty value -->
+  <span v-if="isEmpty" class="show-display show-display--empty">-</span>
+
+  <!-- Text -->
+  <span v-else-if="displayType === 'text'" class="show-display show-display--text">
+    {{ textValue }}
+  </span>
+
+  <!-- Email -->
+  <a
+    v-else-if="displayType === 'email'"
+    :href="`mailto:${value}`"
+    class="show-display show-display--email"
+  >
+    {{ value }}
+  </a>
+
+  <!-- Password (masked) -->
+  <span v-else-if="displayType === 'password'" class="show-display show-display--password">
+    ••••••••
+  </span>
+
+  <!-- Number -->
+  <span v-else-if="displayType === 'number'" class="show-display show-display--number">
+    {{ numberValue }}
+  </span>
+
+  <!-- Currency -->
+  <span v-else-if="displayType === 'currency'" class="show-display show-display--currency">
+    {{ currencyValue }}
+  </span>
+
+  <!-- Boolean (icon) -->
+  <span v-else-if="displayType === 'boolean'" class="show-display show-display--boolean" :class="booleanIconClass">
+    <i :class="['pi', booleanIcon]"></i>
+    <span class="boolean-label">{{ booleanValue }}</span>
+  </span>
+
+  <!-- Date -->
+  <span v-else-if="displayType === 'date'" class="show-display show-display--date">
+    {{ dateValue }}
+  </span>
+
+  <!-- Datetime -->
+  <span v-else-if="displayType === 'datetime'" class="show-display show-display--datetime">
+    {{ datetimeValue }}
+  </span>
+
+  <!-- Select (label lookup) -->
+  <span v-else-if="displayType === 'select'" class="show-display show-display--select">
+    {{ selectValue }}
+  </span>
+
+  <!-- Textarea (multi-line) -->
+  <div v-else-if="displayType === 'textarea'" class="show-display show-display--textarea">
+    {{ textValue }}
+  </div>
+
+  <!-- Reference (link) -->
+  <RouterLink
+    v-else-if="displayType === 'reference' && referenceRoute"
+    :to="referenceRoute"
+    class="show-display show-display--reference"
+  >
+    {{ referenceLabel }}
+  </RouterLink>
+  <span v-else-if="displayType === 'reference'" class="show-display show-display--reference">
+    {{ referenceLabel }}
+  </span>
+
+  <!-- URL -->
+  <a
+    v-else-if="displayType === 'url'"
+    :href="String(value)"
+    target="_blank"
+    rel="noopener noreferrer"
+    class="show-display show-display--url"
+  >
+    {{ value }}
+    <i class="pi pi-external-link" style="font-size: 0.75em; margin-left: 0.25em"></i>
+  </a>
+
+  <!-- Image -->
+  <div v-else-if="displayType === 'image'" class="show-display show-display--image">
+    <img :src="String(value)" :alt="field.name" :style="imageStyle" />
+  </div>
+
+  <!-- JSON -->
+  <pre v-else-if="displayType === 'json'" class="show-display show-display--json">{{ jsonValue }}</pre>
+
+  <!-- Badge -->
+  <Tag
+    v-else-if="displayType === 'badge'"
+    :value="String(value)"
+    :severity="badgeSeverity"
+    class="show-display show-display--badge"
+  />
+
+  <!-- Fallback to text -->
+  <span v-else class="show-display show-display--text">
+    {{ textValue }}
+  </span>
+</template>
+
+<style scoped>
+.show-display {
+  display: inline;
+}
+
+.show-display--empty {
+  color: var(--p-text-muted-color, #6c757d);
+}
+
+.show-display--email,
+.show-display--url,
+.show-display--reference {
+  color: var(--p-primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.show-display--email:hover,
+.show-display--url:hover,
+.show-display--reference:hover {
+  text-decoration: underline;
+}
+
+.show-display--password {
+  font-family: monospace;
+  letter-spacing: 0.1em;
+}
+
+.show-display--number,
+.show-display--currency {
+  font-variant-numeric: tabular-nums;
+}
+
+.show-display--boolean {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.show-display--boolean.text-success {
+  color: var(--p-green-500, #22c55e);
+}
+
+.show-display--boolean.text-danger {
+  color: var(--p-red-500, #ef4444);
+}
+
+.show-display--boolean.text-muted {
+  color: var(--p-text-muted-color, #6c757d);
+}
+
+.show-display--textarea {
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.show-display--image img {
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.show-display--json {
+  background: var(--p-surface-100, #f1f5f9);
+  padding: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  overflow-x: auto;
+  margin: 0;
+}
+</style>

package/src/components/show/ShowField.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/**
+ * ShowField - Display field wrapper with label
+ *
+ * Provides consistent styling for field display in ShowPage.
+ * Mirrors FormField but for read-only display.
+ *
+ * Usage:
+ * <ShowField :name="f.name" :label="f.label">
+ *   <ShowDisplay :field="f" :value="data[f.name]" />
+ * </ShowField>
+ *
+ * Or with auto-display:
+ * <ShowField :field="f" :value="data[f.name]" />
+ */
+import { computed, type PropType } from 'vue'
+import ShowDisplay from './ShowDisplay.vue'
+
+interface FieldConfig {
+  name: string
+  type?: string
+  label?: string
+  [key: string]: unknown
+}
+
+const props = defineProps({
+  // Field config (for auto-display mode)
+  field: { type: Object as PropType<FieldConfig | null>, default: null },
+  // Value (for auto-display mode)
+  value: { type: [String, Number, Boolean, Date, Object, Array], default: null },
+  // Manual props (override field config)
+  name: { type: String, default: '' },
+  label: { type: String, default: '' },
+  // Layout options
+  horizontal: { type: Boolean, default: false },
+  labelWidth: { type: String, default: '120px' }
+})
+
+// Resolved name
+const fieldName = computed(() => props.name || props.field?.name || '')
+
+// Resolved label
+const fieldLabel = computed(() => props.label || props.field?.label || fieldName.value)
+
+// Auto-display mode (when field + value provided, no slot content)
+const autoDisplay = computed(() => props.field !== null)
+</script>
+
+<template>
+  <div
+    class="show-field"
+    :class="{
+      'show-field--horizontal': horizontal
+    }"
+  >
+    <label class="show-field__label" :style="horizontal ? { minWidth: labelWidth } : {}">
+      {{ fieldLabel }}
+    </label>
+    <div class="show-field__value">
+      <!-- Slot for custom content -->
+      <slot>
+        <!-- Auto-display when field is provided -->
+        <ShowDisplay v-if="autoDisplay" :field="(field as any)" :value="(value as any)" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.show-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.show-field--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.show-field__label {
+  font-weight: 600;
+  color: var(--p-text-muted-color, #6c757d);
+  font-size: 0.875rem;
+}
+
+.show-field--horizontal .show-field__label {
+  padding-top: 0.125rem;
+}
+
+.show-field__value {
+  color: var(--p-text-color, #1e293b);
+  line-height: 1.5;
+}
+</style>