@quazardous/qdadm 1.19.3

package/src/components/edit/FormInput.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+/**
+ * FormInput - Auto-renders the appropriate input based on field config
+ *
+ * Takes a field config object and renders the matching PrimeVue component.
+ * Supports hint override but field.type takes precedence if specified.
+ *
+ * Usage:
+ * <FormInput :field="f" v-model="form.data.value[f.name]" />
+ */
+import { computed, type PropType } from 'vue'
+import InputText from 'primevue/inputtext'
+import InputNumber from 'primevue/inputnumber'
+import Textarea from 'primevue/textarea'
+import Select from 'primevue/select'
+import Checkbox from 'primevue/checkbox'
+import Password from 'primevue/password'
+import DatePicker from 'primevue/datepicker'
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'textarea' | 'select' | 'boolean' | 'date' | 'datetime'
+type ModelValue = string | number | boolean | Date | null
+
+interface SelectOption {
+  label?: string
+  value?: string | number
+  [key: string]: unknown
+}
+
+interface FieldConfig {
+  name: string
+  type?: InputType
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  options?: SelectOption[]
+  optionLabel?: string
+  optionValue?: string
+}
+
+const props = defineProps({
+  field: { type: Object as PropType<FieldConfig>, required: true },
+  modelValue: { type: [String, Number, Boolean, Date, Object] as PropType<ModelValue>, default: null },
+  hint: { type: String as () => InputType | null, default: null }  // Optional type hint override
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: ModelValue]
+}>()
+
+const value = computed<ModelValue>({
+  get: (): ModelValue => props.modelValue,
+  set: (v: ModelValue): void => emit('update:modelValue', v)
+})
+
+// Type-specific computed values for PrimeVue components
+const stringValue = computed<string | null>({
+  get: (): string | null => (props.modelValue as string | null) ?? null,
+  set: (v: string | null): void => emit('update:modelValue', v)
+})
+
+const numberValue = computed<number | null>({
+  get: (): number | null => (props.modelValue as number | null) ?? null,
+  set: (v: number | null): void => emit('update:modelValue', v)
+})
+
+const booleanValue = computed<boolean>({
+  get: (): boolean => (props.modelValue as boolean) ?? false,
+  set: (v: boolean): void => emit('update:modelValue', v)
+})
+
+// Resolve component type: field.type > hint > 'text'
+const inputType = computed<InputType>(() => props.field?.type || props.hint || 'text')
+
+// Date value with string ↔ Date conversion for DatePicker
+const dateValue = computed<Date | null>({
+  get: (): Date | null => {
+    const v = props.modelValue
+    if (!v) return null
+    if (v instanceof Date) return v
+    // Convert ISO string to Date
+    return new Date(v as string)
+  },
+  set: (v: Date | null): void => {
+    // Convert Date back to ISO string for storage
+    emit('update:modelValue', v ? v.toISOString() : null)
+  }
+})
+</script>
+
+<template>
+  <InputText
+    v-if="inputType === 'text' || inputType === 'email'"
+    v-model="stringValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :readonly="field.readonly"
+    class="w-full"
+  />
+  <Password
+    v-else-if="inputType === 'password'"
+    v-model="stringValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :feedback="false"
+    toggleMask
+    class="w-full"
+  />
+  <InputNumber
+    v-else-if="inputType === 'number'"
+    v-model="numberValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :readonly="field.readonly"
+    :useGrouping="false"
+    class="w-full"
+  />
+  <Textarea
+    v-else-if="inputType === 'textarea'"
+    v-model="stringValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :readonly="field.readonly"
+    rows="3"
+    class="w-full"
+  />
+  <Select
+    v-else-if="inputType === 'select'"
+    v-model="value"
+    :options="field.options"
+    :optionLabel="field.optionLabel"
+    :optionValue="field.optionValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    class="w-full"
+  />
+  <Checkbox
+    v-else-if="inputType === 'boolean'"
+    v-model="booleanValue"
+    :disabled="field.disabled"
+    binary
+  />
+  <DatePicker
+    v-else-if="inputType === 'date' || inputType === 'datetime'"
+    v-model="dateValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :showTime="inputType === 'datetime'"
+    class="w-full"
+  />
+  <!-- Fallback to text -->
+  <InputText
+    v-else
+    v-model="stringValue"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    class="w-full"
+  />
+</template>

package/src/components/edit/FormPage.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+/**
+ * FormPage - Unified form page component
+ *
+ * Renders a complete CRUD form page with:
+ * - PageHeader with title and action buttons
+ * - Loading and error states
+ * - Form content via slots
+ * - FormActions footer
+ * - UnsavedChangesDialog integration
+ *
+ * Props come from useEntityItemFormPage composable:
+ *
+ * ```vue
+ * const form = useEntityItemFormPage({ entity: 'books' })
+ * form.generateFields()
+ * form.addSaveAction()
+ *
+ * <FormPage v-bind="form.props.value" v-on="form.events">
+ *   <template #fields>
+ *     <FormField v-model="form.data.title" name="title" />
+ *   </template>
+ * </FormPage>
+ * ```
+ *
+ * Slots:
+ * - #nav: PageNav for breadcrumb customization
+ * - #toolbar: Custom toolbar actions (between header and form)
+ * - #header-actions: Custom header action buttons
+ * - #fields: Form fields content (required)
+ * - #footer: Custom footer (replaces FormActions if provided)
+ * - #error: Custom error display
+ * - #loading: Custom loading display
+ */
+import { computed, type PropType } from 'vue'
+import PageHeader from '../layout/PageHeader.vue'
+import FormActions from './FormActions.vue'
+import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
+import Card from 'primevue/card'
+import Button from 'primevue/button'
+import Message from 'primevue/message'
+import type { ResolvedAction, ResolvedFieldConfig } from '../../composables/useEntityItemFormPage'
+import type { GuardDialogState } from '../../composables/useUnsavedChangesGuard'
+
+/**
+ * Page title parts for PageHeader
+ */
+interface PageTitleParts {
+  action: string
+  entityName: string | undefined
+  entityLabel: string | undefined
+}
+
+/**
+ * Error summary item
+ */
+interface ErrorSummaryItem {
+  field: string
+  label: string
+  message: string
+}
+
+/**
+ * Fetch error type
+ */
+interface FetchError {
+  message?: string
+  detail?: string
+}
+
+const props = defineProps({
+  // Mode
+  isEdit: { type: Boolean, default: false },
+  mode: { type: String as PropType<'create' | 'edit'>, default: 'create' },
+
+  // State
+  loading: { type: Boolean, default: false },
+  saving: { type: Boolean, default: false },
+  dirty: { type: Boolean, default: false },
+
+  // Title (use title OR titleParts)
+  title: { type: String as PropType<string | null>, default: null },
+  titleParts: { type: Object as PropType<PageTitleParts | null>, default: null },
+
+  // Fields (for auto-rendering - optional, can use #fields slot instead)
+  fields: { type: Array as PropType<ResolvedFieldConfig[]>, default: () => [] },
+
+  // Actions (from builder.actions)
+  actions: { type: Array as PropType<ResolvedAction[]>, default: () => [] },
+
+  // Validation state
+  errors: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
+  hasErrors: { type: Boolean, default: false },
+  errorSummary: { type: Array as PropType<ErrorSummaryItem[] | null>, default: null },
+  submitted: { type: Boolean, default: false },
+
+  // Guard dialog (from useUnsavedChangesGuard)
+  guardDialog: { type: Object as PropType<GuardDialogState | null>, default: null },
+
+  // Error for fetch failures (separate from validation errors)
+  fetchError: { type: [String, Object] as PropType<string | FetchError | null>, default: null },
+
+  // UI options
+  showFormActions: { type: Boolean, default: true },
+  showSaveAndClose: { type: Boolean, default: true },
+  cardWrapper: { type: Boolean, default: true }
+})
+
+const emit = defineEmits<{
+  (e: 'save'): void
+  (e: 'saveAndClose'): void
+  (e: 'cancel'): void
+  (e: 'delete'): void
+}>()
+
+// Header actions: all actions except save, delete, cancel (those go in footer)
+const headerActions = computed<ResolvedAction[]>(() =>
+  props.actions.filter((a: ResolvedAction) => !['save', 'delete', 'cancel'].includes(a.name))
+)
+
+// Get error message from fetchError
+const fetchErrorMessage = computed<string | null>(() => {
+  if (!props.fetchError) return null
+  if (typeof props.fetchError === 'string') return props.fetchError
+  return props.fetchError.message || props.fetchError.detail || 'Failed to load entity'
+})
+
+// Guard dialog handlers
+function onGuardSaveAndLeave(): void {
+  if (props.guardDialog?.onSaveAndLeave) {
+    props.guardDialog.onSaveAndLeave()
+  }
+}
+
+function onGuardLeave(): void {
+  if (props.guardDialog?.onLeave) {
+    props.guardDialog.onLeave()
+  }
+}
+
+function onGuardStay(): void {
+  if (props.guardDialog?.onStay) {
+    props.guardDialog.onStay()
+  }
+}
+</script>
+
+<template>
+  <div class="form-page">
+    <!-- Nav slot for PageNav (child routes) -->
+    <slot name="nav" />
+
+    <PageHeader :title="title" :title-parts="titleParts">
+      <template #actions>
+        <slot name="header-actions" />
+        <!-- Header actions from builder (excludes save/delete/cancel) -->
+        <Button
+          v-for="action in headerActions"
+          :key="action.name"
+          :label="action.label"
+          :icon="action.icon"
+          :severity="action.severity"
+          :loading="action.isLoading"
+          :disabled="action.isDisabled"
+          @click="action.onClick"
+        />
+      </template>
+    </PageHeader>
+
+    <!-- Toolbar slot (between header and form) -->
+    <slot name="toolbar" />
+
+    <!-- Loading State -->
+    <template v-if="loading">
+      <slot name="loading">
+        <div class="loading-state">
+          <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+        </div>
+      </slot>
+    </template>
+
+    <!-- Error State (fetch error) -->
+    <template v-else-if="fetchError">
+      <slot name="error" :error="fetchError">
+        <Message severity="error" :closable="false" class="form-error-message">
+          {{ fetchErrorMessage }}
+        </Message>
+      </slot>
+    </template>
+
+    <!-- Form Content -->
+    <template v-else>
+      <!-- Validation Error Summary -->
+      <Message
+        v-if="errorSummary && errorSummary.length > 0"
+        severity="warn"
+        :closable="false"
+        class="validation-summary"
+      >
+        <ul class="validation-errors">
+          <li v-for="error in errorSummary" :key="error.field">
+            <strong>{{ error.label }}:</strong> {{ error.message }}
+          </li>
+        </ul>
+      </Message>
+
+      <!-- Card wrapper or direct content -->
+      <Card v-if="cardWrapper">
+        <template #content>
+          <slot name="fields" />
+
+          <!-- Form Actions (in footer) -->
+          <template v-if="showFormActions">
+            <slot name="footer">
+              <FormActions
+                :isEdit="isEdit"
+                :saving="saving"
+                :dirty="dirty"
+                :showSaveAndClose="showSaveAndClose"
+                @save="emit('save')"
+                @saveAndClose="emit('saveAndClose')"
+                @cancel="emit('cancel')"
+              />
+            </slot>
+          </template>
+        </template>
+      </Card>
+
+      <template v-else>
+        <slot name="fields" />
+
+        <!-- Form Actions (in footer) -->
+        <template v-if="showFormActions">
+          <slot name="footer">
+            <FormActions
+              :isEdit="isEdit"
+              :saving="saving"
+              :dirty="dirty"
+              :showSaveAndClose="showSaveAndClose"
+              @save="emit('save')"
+              @saveAndClose="emit('saveAndClose')"
+              @cancel="emit('cancel')"
+            />
+          </slot>
+        </template>
+      </template>
+    </template>
+
+    <!-- Unsaved Changes Dialog -->
+    <UnsavedChangesDialog
+      v-if="guardDialog"
+      :visible="guardDialog.visible.value"
+      :saving="saving"
+      :hasOnSave="guardDialog.hasOnSave"
+      @saveAndLeave="onGuardSaveAndLeave"
+      @leave="onGuardLeave"
+      @stay="onGuardStay"
+    />
+  </div>
+</template>

package/src/components/edit/FormTab.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+/**
+ * FormTab - Normalized tab header component
+ *
+ * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
+ * icon, badge, count, visible, and disabled options on groups.
+ *
+ * ```ts
+ * // Before (deprecated)
+ * <FormTab value="general" label="General" icon="pi-cog" :count="5" />
+ *
+ * // After (recommended)
+ * form.group('general', ['field1'], { label: 'General', icon: 'cog', count: 5 })
+ * ```
+ */
+
+import { type PropType } from 'vue'
+import Tab from 'primevue/tab'
+import Tag from 'primevue/tag'
+
+type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast'
+
+const props = defineProps({
+  /**
+   * Tab identifier (used for v-model matching)
+   */
+  value: {
+    type: String,
+    required: true
+  },
+
+  /**
+   * Display label
+   */
+  label: {
+    type: String,
+    required: true
+  },
+
+  /**
+   * PrimeIcon class (without 'pi' prefix or with full class)
+   * Examples: 'pi-cog', 'cog', 'pi pi-cog'
+   */
+  icon: {
+    type: String as () => string | null,
+    default: null
+  },
+
+  /**
+   * Count to display as badge (shows only if > 0)
+   */
+  count: {
+    type: Number as () => number | null,
+    default: null
+  },
+
+  /**
+   * Custom badge text (alternative to count)
+   */
+  badge: {
+    type: [String, Number] as unknown as PropType<string | number | null>,
+    default: null
+  },
+
+  /**
+   * Badge severity/color
+   */
+  badgeSeverity: {
+    type: String as () => BadgeSeverity,
+    default: 'secondary',
+    validator: (v: string) => ['secondary', 'info', 'success', 'warn', 'danger', 'contrast'].includes(v)
+  },
+
+  /**
+   * Show/hide the tab
+   */
+  visible: {
+    type: Boolean,
+    default: true
+  },
+
+  /**
+   * Disable tab interaction
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+/**
+ * Normalize icon class
+ */
+function getIconClass(): string | null {
+  if (!props.icon) return null
+  // Already has 'pi' prefix
+  if (props.icon.startsWith('pi')) {
+    return props.icon.includes(' ') ? props.icon : `pi ${props.icon}`
+  }
+  // Just icon name
+  return `pi pi-${props.icon}`
+}
+
+/**
+ * Get count value to display
+ */
+function getCountValue(): number | null {
+  if (props.count !== null && props.count > 0) return props.count
+  return null
+}
+
+/**
+ * Get badge value to display (separate from count)
+ */
+function getBadgeValue(): string | number | null {
+  if (props.badge !== null) return props.badge
+  // If no badge but count provided, show count as badge (legacy behavior)
+  if (props.count !== null && props.count > 0 && props.badge === null) return props.count
+  return null
+}
+
+/**
+ * Check if we should show count and badge separately
+ */
+function showBothCountAndBadge(): boolean {
+  return props.count !== null && props.count > 0 && props.badge !== null
+}
+</script>
+
+<template>
+  <Tab
+    v-if="visible"
+    :value="value"
+    :disabled="disabled"
+  >
+    <i v-if="icon" :class="getIconClass()" class="tab-icon" ></i>
+    <span class="tab-label">{{ label }}</span>
+    <!-- When both count and badge are provided, show count first then badge indicator -->
+    <template v-if="showBothCountAndBadge()">
+      <Tag
+        :value="String(getCountValue())"
+        severity="secondary"
+        class="tab-badge"
+      />
+      <span class="tab-alert-dot" :class="`alert-${badgeSeverity}`"></span>
+    </template>
+    <!-- Otherwise show single badge (legacy behavior) -->
+    <Tag
+      v-else-if="getBadgeValue() !== null"
+      :value="String(getBadgeValue())"
+      :severity="badgeSeverity"
+      class="tab-badge"
+    />
+  </Tab>
+</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.).
+ */
+.tab-icon {
+  margin-right: 0.5rem;
+}
+
+.tab-label {
+  /* Ensure consistent text rendering */
+}
+
+.tab-badge {
+  margin-left: 0.5rem;
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  min-width: 1.25rem;
+  text-align: center;
+}
+
+.tab-alert-dot {
+  display: inline-block;
+  width: 8px !important;
+  height: 8px !important;
+  min-width: 8px;
+  max-width: 8px;
+  border-radius: 50%;
+  margin-left: 0.35rem;
+  animation: pulse 1.5s infinite;
+}
+
+.alert-warn {
+  background-color: var(--p-orange-500);
+}
+
+.alert-danger {
+  background-color: var(--p-red-500);
+}
+
+.alert-info {
+  background-color: var(--p-blue-500);
+}
+
+.alert-success {
+  background-color: var(--p-green-500);
+}
+
+.alert-secondary {
+  background-color: var(--p-gray-500);
+}
+
+.alert-contrast {
+  background-color: var(--p-primary-500);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+</style>