@quazardous/qdadm 1.19.3

package/src/components/dialogs/MultiStepDialog.vue

@@ -0,0 +1,331 @@
+<script setup lang="ts">
+/**
+ * MultiStepDialog - Reusable multi-step form dialog
+ *
+ * Features:
+ * - Step indicator with labels
+ * - Automatic navigation buttons (Cancel, Back, Next, Submit)
+ * - Per-step validation
+ * - Linear progression mode
+ * - Loading state for submit
+ * - Customizable button labels
+ *
+ * Usage:
+ *   <MultiStepDialog
+ *     v-model:visible="showDialog"
+ *     v-model:step="currentStep"
+ *     title="Create Item"
+ *     :steps="[
+ *       { label: 'Step 1', valid: !!field1 },
+ *       { label: 'Step 2', valid: canSubmit }
+ *     ]"
+ *     :loading="submitting"
+ *     @submit="handleSubmit"
+ *     @cancel="handleCancel"
+ *   >
+ *     <template #step-1>
+ *       <!-- Step 1 content -->
+ *     </template>
+ *     <template #step-2>
+ *       <!-- Step 2 content -->
+ *     </template>
+ *   </MultiStepDialog>
+ *
+ * Props:
+ *   - visible: boolean (v-model) - controls dialog visibility
+ *   - step: number (v-model) - current step (1-indexed)
+ *   - title: string - dialog title
+ *   - steps: Array<{ label: string, valid?: boolean }> - step definitions
+ *   - loading: boolean - shows loading state on submit button
+ *   - width: string - dialog width (default: '800px')
+ *   - linear: boolean - require validation before next step (default: true)
+ *   - submitLabel: string - label for submit button (default: 'Submit')
+ *   - cancelLabel: string - label for cancel button (default: 'Cancel')
+ *   - nextLabel: string - label for next button (default: 'Next')
+ *   - backLabel: string - label for back button (default: 'Back')
+ *   - showBackOnFirst: boolean - show back button on first step (default: false)
+ *   - hideStepIndicator: boolean - hide the step indicator (default: false)
+ *
+ * Events:
+ *   - submit: emitted when submit button is clicked on last step
+ *   - cancel: emitted when cancel button is clicked
+ *   - step-change: emitted when step changes, payload: { from, to }
+ *
+ * Slots:
+ *   - step-{n}: content for step n (1-indexed)
+ *   - step-{n}-header: optional header content for step n (shown above step content)
+ *   - actions: override action buttons (receives { step, isFirst, isLast, canProceed, goNext, goPrev, submit, cancel })
+ */
+import { computed, watch, type PropType } from 'vue'
+import Dialog from 'primevue/dialog'
+import Button from 'primevue/button'
+import Stepper from 'primevue/stepper'
+import StepList from 'primevue/steplist'
+import Step from 'primevue/step'
+import StepPanels from 'primevue/steppanels'
+import StepPanel from 'primevue/steppanel'
+
+export interface StepDefinition {
+  label: string
+  valid?: boolean
+}
+
+export interface StepChangeEvent {
+  from: number
+  to: number
+}
+
+export interface SlotActions {
+  step: number
+  isFirst: boolean
+  isLast: boolean
+  canProceed: boolean
+  canSubmit: boolean
+  goNext: () => void
+  goPrev: () => void
+  goToStep: (stepNumber: number) => void
+  submit: () => void
+  cancel: () => void
+}
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  steps: {
+    type: Array as PropType<StepDefinition[]>,
+    required: true,
+    validator: (v: StepDefinition[]) => v.every(s => typeof s.label === 'string')
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: String,
+    default: '800px'
+  },
+  linear: {
+    type: Boolean,
+    default: true
+  },
+  submitLabel: {
+    type: String,
+    default: 'Submit'
+  },
+  cancelLabel: {
+    type: String,
+    default: 'Cancel'
+  },
+  nextLabel: {
+    type: String,
+    default: 'Next'
+  },
+  backLabel: {
+    type: String,
+    default: 'Back'
+  },
+  showBackOnFirst: {
+    type: Boolean,
+    default: false
+  },
+  hideStepIndicator: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'update:step': [value: number]
+  'submit': []
+  'cancel': []
+  'step-change': [event: StepChangeEvent]
+}>()
+
+// Current step (1-indexed)
+const currentStep = computed<number>({
+  get: (): number => props.step,
+  set: (v: number): void => emit('update:step', v)
+})
+
+// Step helpers
+const isFirstStep = computed<boolean>(() => currentStep.value === 1)
+const isLastStep = computed<boolean>(() => currentStep.value === props.steps.length)
+
+// Current step definition
+const currentStepDef = computed<StepDefinition>(() => props.steps[currentStep.value - 1] || { label: '' })
+
+// Can proceed to next step (validation)
+const canProceed = computed<boolean>(() => {
+  if (!props.linear) return true
+  return currentStepDef.value.valid !== false
+})
+
+// Can submit (last step validation)
+const canSubmit = computed<boolean>(() => {
+  return currentStepDef.value.valid !== false
+})
+
+// Navigation
+function goNext(): void {
+  if (!isLastStep.value && canProceed.value) {
+    const from = currentStep.value
+    const to = currentStep.value + 1
+    currentStep.value = to
+    emit('step-change', { from, to })
+  }
+}
+
+function goPrev(): void {
+  if (!isFirstStep.value) {
+    const from = currentStep.value
+    const to = currentStep.value - 1
+    currentStep.value = to
+    emit('step-change', { from, to })
+  }
+}
+
+function goToStep(stepNumber: number): void {
+  if (stepNumber >= 1 && stepNumber <= props.steps.length) {
+    // In linear mode, can only go back or to current+1 if valid
+    if (props.linear && stepNumber > currentStep.value) {
+      if (stepNumber > currentStep.value + 1 || !canProceed.value) {
+        return
+      }
+    }
+    const from = currentStep.value
+    currentStep.value = stepNumber
+    emit('step-change', { from, to: stepNumber })
+  }
+}
+
+function submit(): void {
+  if (canSubmit.value) {
+    emit('submit')
+  }
+}
+
+function cancel(): void {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+// Reset to first step when dialog opens
+watch(() => props.visible, (newVal: boolean, oldVal: boolean) => {
+  if (newVal && !oldVal) {
+    // Don't reset if step is explicitly set
+    // currentStep.value = 1
+  }
+})
+
+// Expose for slot actions
+const slotActions = computed<SlotActions>(() => ({
+  step: currentStep.value,
+  isFirst: isFirstStep.value,
+  isLast: isLastStep.value,
+  canProceed: canProceed.value,
+  canSubmit: canSubmit.value,
+  goNext,
+  goPrev,
+  goToStep,
+  submit,
+  cancel
+}))
+</script>
+
+<template>
+  <Dialog
+    :visible="props.visible"
+    @update:visible="emit('update:visible', $event)"
+    :header="title"
+    :style="{ width: width }"
+    :modal="true"
+    :closable="!loading"
+    :closeOnEscape="!loading"
+  >
+    <div class="multi-step-dialog">
+      <Stepper v-model:value="currentStep" :linear="linear">
+        <!-- Step indicator -->
+        <StepList v-if="!hideStepIndicator">
+          <Step
+            v-for="(stepDef, idx) in steps"
+            :key="idx"
+            :value="idx + 1"
+          >
+            {{ stepDef.label }}
+          </Step>
+        </StepList>
+
+        <!-- Step panels -->
+        <StepPanels>
+          <StepPanel
+            v-for="(stepDef, idx) in steps"
+            :key="idx"
+            :value="idx + 1"
+          >
+            <div class="step-content">
+              <!-- Optional step header slot -->
+              <slot :name="`step-${idx + 1}-header`" v-bind="slotActions" />
+
+              <!-- Step content slot -->
+              <slot :name="`step-${idx + 1}`" v-bind="slotActions" />
+
+              <!-- Action buttons -->
+              <div class="step-actions">
+                <slot name="actions" v-bind="slotActions">
+                  <!-- Back button -->
+                  <Button
+                    v-if="!isFirstStep || showBackOnFirst"
+                    :label="backLabel"
+                    icon="pi pi-arrow-left"
+                    severity="secondary"
+                    @click="goPrev"
+                    :disabled="loading || isFirstStep"
+                  />
+
+                  <!-- Cancel button -->
+                  <Button
+                    :label="cancelLabel"
+                    severity="secondary"
+                    @click="cancel"
+                    :disabled="loading"
+                  />
+
+                  <!-- Next button (not on last step) -->
+                  <Button
+                    v-if="!isLastStep"
+                    :label="nextLabel"
+                    icon="pi pi-arrow-right"
+                    iconPos="right"
+                    @click="goNext"
+                    :disabled="!canProceed"
+                  />
+
+                  <!-- Submit button (only on last step) -->
+                  <Button
+                    v-if="isLastStep"
+                    :label="submitLabel"
+                    icon="pi pi-check"
+                    @click="submit"
+                    :loading="loading"
+                    :disabled="!canSubmit"
+                  />
+                </slot>
+              </div>
+            </div>
+          </StepPanel>
+        </StepPanels>
+      </Stepper>
+    </div>
+  </Dialog>
+</template>

package/src/components/dialogs/SimpleDialog.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+/**
+ * SimpleDialog - Wrapper for common dialog patterns
+ *
+ * Simplifies the most common dialog use case:
+ * - Modal with title
+ * - Content slot
+ * - Cancel/Confirm footer buttons
+ *
+ * Usage:
+ *   <SimpleDialog
+ *     v-model:visible="showDialog"
+ *     title="Confirm Action"
+ *     :loading="saving"
+ *     @confirm="onSave"
+ *   >
+ *     <p>Are you sure?</p>
+ *   </SimpleDialog>
+ *
+ * For read-only dialogs (no confirm button):
+ *   <SimpleDialog v-model:visible="showDialog" title="View" :showConfirm="false">
+ *     <p>Content here</p>
+ *   </SimpleDialog>
+ *
+ * For dialogs with extra action buttons:
+ *   <SimpleDialog v-model:visible="showDialog" title="View Key" :showConfirm="false">
+ *     <p>{{ key }}</p>
+ *     <template #actions>
+ *       <Button label="Copy" icon="pi pi-copy" @click="copyKey" />
+ *     </template>
+ *   </SimpleDialog>
+ */
+import { computed } from 'vue'
+import Dialog from 'primevue/dialog'
+import Button from 'primevue/button'
+
+interface Props {
+  visible?: boolean
+  title: string
+  width?: string
+  // Footer buttons
+  showCancel?: boolean
+  showConfirm?: boolean
+  cancelLabel?: string
+  confirmLabel?: string
+  confirmIcon?: string
+  confirmSeverity?: string
+  confirmDisabled?: boolean
+  loading?: boolean
+  // Dialog behavior
+  closable?: boolean
+  dismissableMask?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  width: '500px',
+  showCancel: true,
+  showConfirm: true,
+  cancelLabel: 'Cancel',
+  confirmLabel: 'Confirm',
+  confirmIcon: undefined,
+  confirmSeverity: undefined,
+  confirmDisabled: false,
+  loading: false,
+  closable: true,
+  dismissableMask: false
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'confirm': []
+  'cancel': []
+}>()
+
+function onCancel(): void {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+function onConfirm(): void {
+  emit('confirm')
+}
+
+// Allow closing via escape/mask only when not loading
+const canClose = computed((): boolean => props.closable && !props.loading)
+</script>
+
+<template>
+  <Dialog
+    :visible="visible"
+    :header="title"
+    :modal="true"
+    :style="{ width }"
+    :closable="canClose"
+    :closeOnEscape="canClose"
+    :dismissableMask="dismissableMask && canClose"
+    @update:visible="$emit('update:visible', $event)"
+  >
+    <slot />
+
+    <template #footer v-if="showCancel || showConfirm || $slots.actions">
+      <slot name="actions" />
+      <Button
+        v-if="showCancel"
+        :label="cancelLabel"
+        severity="secondary"
+        @click="onCancel"
+        :disabled="loading"
+      />
+      <Button
+        v-if="showConfirm"
+        :label="confirmLabel"
+        :icon="confirmIcon"
+        :severity="confirmSeverity"
+        :loading="loading"
+        :disabled="confirmDisabled"
+        @click="onConfirm"
+      />
+    </template>
+  </Dialog>
+</template>

package/src/components/dialogs/UnsavedChangesDialog.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * UnsavedChangesDialog - Confirm leaving with unsaved changes
+ *
+ * Uses SimpleDialog with custom actions:
+ * - Save & Leave (optional): saves then navigates
+ * - Leave: discards changes and navigates
+ * - Stay: cancels navigation
+ */
+import SimpleDialog from './SimpleDialog.vue'
+import Button from 'primevue/button'
+
+interface Props {
+  visible?: boolean
+  saving?: boolean
+  message?: string
+  hasOnSave?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  visible: false,
+  saving: false,
+  message: 'You have unsaved changes that will be lost.',
+  hasOnSave: false
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  saveAndLeave: []
+  leave: []
+  stay: []
+}>()
+
+function onStay(): void {
+  emit('stay')
+  emit('update:visible', false)
+}
+
+function onLeave(): void {
+  emit('leave')
+}
+
+function onSaveAndLeave(): void {
+  emit('saveAndLeave')
+}
+</script>
+
+<template>
+  <SimpleDialog
+    :visible="visible"
+    title="Unsaved Changes"
+    width="400px"
+    :closable="false"
+    :showCancel="true"
+    :showConfirm="true"
+    cancelLabel="Stay"
+    confirmLabel="Leave"
+    confirmSeverity="danger"
+    :loading="saving"
+    @cancel="onStay"
+    @confirm="onLeave"
+    @update:visible="$emit('update:visible', $event)"
+  >
+    <div class="dialog-content">
+      <i class="pi pi-exclamation-triangle dialog-icon"></i>
+      <p>{{ message }}</p>
+    </div>
+
+    <template #actions>
+      <Button
+        v-if="hasOnSave"
+        label="Save & Leave"
+        icon="pi pi-save"
+        severity="success"
+        :loading="saving"
+        @click="onSaveAndLeave"
+      />
+    </template>
+  </SimpleDialog>
+</template>

package/src/components/display/BannerZone.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * BannerZone - Renders programmatic banners from useInfoBanner
+ *
+ * Place this component where you want banners to appear (typically
+ * at the top of page content).
+ *
+ * @example
+ * <template>
+ *   <div class="page-content">
+ *     <BannerZone />
+ *     <!-- rest of page content -->
+ *   </div>
+ * </template>
+ */
+import { useInfoBanner } from '../../composables/useInfoBanner'
+import InfoBanner from '../InfoBanner.vue'
+
+const { banners, hideBanner } = useInfoBanner()
+</script>
+
+<template>
+  <TransitionGroup name="banner" tag="div" class="banner-zone">
+    <InfoBanner
+      v-for="banner in banners"
+      :key="banner.id"
+      :severity="banner.severity"
+      :icon="banner.icon"
+      :closable="banner.closable"
+      @close="hideBanner(banner.id)"
+    >
+      <span v-html="banner.message"></span>
+    </InfoBanner>
+  </TransitionGroup>
+</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.).
+ */
+.banner-zone {
+  position: relative;
+}
+
+/* Transition animations */
+.banner-enter-active,
+.banner-leave-active {
+  transition: all 0.3s ease;
+}
+
+.banner-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.banner-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.banner-move {
+  transition: transform 0.3s ease;
+}
+</style>

package/src/components/display/CardsGrid.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * CardsGrid - Dynamic card zone component
+ *
+ * Props:
+ * - cards: Array of card objects from useCardsZone composable
+ * - columns: Number of columns (2, 3, 4, or 'auto')
+ *
+ * Card types:
+ * 1. Simple stat card (default):
+ *    { name: 'total', value: 42, label: 'Total', severity: 'success', icon: 'pi pi-check' }
+ *
+ * 2. Custom card with slot:
+ *    { name: 'preview', custom: true }
+ *    Then use: <template #card-preview>...</template>
+ *
+ * If no cards provided, renders nothing.
+ */
+
+type Severity = 'success' | 'danger' | 'warning' | 'info'
+
+interface Card {
+  name: string
+  value?: string | number
+  label?: string
+  severity?: Severity
+  icon?: string
+  custom?: boolean
+  class?: string
+  onClick?: () => void
+}
+
+interface Props {
+  cards?: Card[]
+  columns?: number | 'auto'
+}
+
+withDefaults(defineProps<Props>(), {
+  cards: () => [],
+  columns: 'auto'
+})
+
+function getSeverityClass(severity?: Severity): string {
+  if (!severity) return ''
+  return `stat-value--${severity}`
+}
+</script>
+
+<template>
+  <div v-if="cards.length > 0" class="cards-grid" :class="`cards-grid--cols-${columns}`">
+    <template v-for="card in cards" :key="card.name">
+      <!-- Custom card: render slot -->
+      <div v-if="card.custom" class="card-custom" :class="card.class">
+        <slot :name="`card-${card.name}`" :card="card" ></slot>
+      </div>
+
+      <!-- Simple stat card -->
+      <div
+        v-else
+        class="stat-card"
+        :class="[{ 'stat-card--clickable': card.onClick }, card.class]"
+        @click="card.onClick?.()"
+      >
+        <div class="stat-value" :class="getSeverityClass(card.severity)">
+          <i v-if="card.icon" :class="card.icon" class="stat-icon"></i>
+          {{ card.value }}
+        </div>
+        <div class="stat-label">{{ card.label }}</div>
+      </div>
+    </template>
+  </div>
+</template>