qdadm 0.13.0

package/src/components/dialogs/MultiStepDialog.vue

@@ -0,0 +1,321 @@
+<script setup>
+/**
+ * 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 } 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'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  steps: {
+    type: Array,
+    required: true,
+    validator: (v) => 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', 'update:step', 'submit', 'cancel', 'step-change'])
+
+// Current step (1-indexed)
+const currentStep = computed({
+  get: () => props.step,
+  set: (v) => emit('update:step', v)
+})
+
+// Step helpers
+const isFirstStep = computed(() => currentStep.value === 1)
+const isLastStep = computed(() => currentStep.value === props.steps.length)
+
+// Current step definition
+const currentStepDef = computed(() => props.steps[currentStep.value - 1] || {})
+
+// Can proceed to next step (validation)
+const canProceed = computed(() => {
+  if (!props.linear) return true
+  return currentStepDef.value.valid !== false
+})
+
+// Can submit (last step validation)
+const canSubmit = computed(() => {
+  return currentStepDef.value.valid !== false
+})
+
+// Navigation
+function goNext() {
+  if (!isLastStep.value && canProceed.value) {
+    const from = currentStep.value
+    const to = currentStep.value + 1
+    currentStep.value = to
+    emit('step-change', { from, to })
+  }
+}
+
+function goPrev() {
+  if (!isFirstStep.value) {
+    const from = currentStep.value
+    const to = currentStep.value - 1
+    currentStep.value = to
+    emit('step-change', { from, to })
+  }
+}
+
+function goToStep(stepNumber) {
+  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() {
+  if (canSubmit.value) {
+    emit('submit')
+  }
+}
+
+function cancel() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+// Reset to first step when dialog opens
+watch(() => props.visible, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    // Don't reset if step is explicitly set
+    // currentStep.value = 1
+  }
+})
+
+// Expose for slot actions
+const slotActions = computed(() => ({
+  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>
+
+<style scoped>
+.multi-step-dialog {
+  padding: 0.5rem 0;
+}
+
+.step-content {
+  padding: 1rem 0;
+}
+
+.step-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--p-surface-200);
+}
+</style>

package/src/components/dialogs/SimpleDialog.vue

@@ -0,0 +1,108 @@
+<script setup>
+/**
+ * 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 Dialog from 'primevue/dialog'
+import Button from 'primevue/button'
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  title: { type: String, required: true },
+  width: { type: String, default: '500px' },
+
+  // Footer buttons
+  showCancel: { type: Boolean, default: true },
+  showConfirm: { type: Boolean, default: true },
+  cancelLabel: { type: String, default: 'Cancel' },
+  confirmLabel: { type: String, default: 'Confirm' },
+  confirmIcon: { type: String, default: null },
+  confirmSeverity: { type: String, default: null },
+  confirmDisabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+
+  // Dialog behavior
+  closable: { type: Boolean, default: true },
+  dismissableMask: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
+
+function onCancel() {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+function onConfirm() {
+  emit('confirm')
+}
+
+// Allow closing via escape/mask only when not loading
+const canClose = computed(() => props.closable && !props.loading)
+</script>
+
+<script>
+import { computed } from 'vue'
+</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,87 @@
+<script setup>
+/**
+ * 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'
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  saving: { type: Boolean, default: false },
+  message: { type: String, default: 'You have unsaved changes that will be lost.' },
+  hasOnSave: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:visible', 'saveAndLeave', 'leave', 'stay'])
+
+function onStay() {
+  emit('stay')
+  emit('update:visible', false)
+}
+
+function onLeave() {
+  emit('leave')
+}
+
+function onSaveAndLeave() {
+  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>
+
+<style scoped>
+.dialog-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.dialog-icon {
+  font-size: 2rem;
+  color: var(--p-orange-500);
+  flex-shrink: 0;
+}
+
+.dialog-content p {
+  margin: 0;
+  line-height: 1.5;
+}
+</style>

package/src/components/display/CardsGrid.vue

@@ -0,0 +1,155 @@
+<script setup>
+/**
+ * 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.
+ */
+defineProps({
+  cards: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: [Number, String],
+    default: 'auto',
+    validator: (v) => ['auto', 2, 3, 4].includes(v)
+  }
+})
+
+function getSeverityClass(severity) {
+  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>
+
+<style scoped>
+.cards-grid {
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.cards-grid--cols-auto {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.cards-grid--cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.cards-grid--cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.cards-grid--cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.stat-card,
+.card-custom {
+  background: var(--p-surface-0);
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+}
+
+.stat-card {
+  text-align: center;
+}
+
+.stat-card--clickable {
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.stat-card--clickable:hover {
+  border-color: var(--p-primary-300);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--p-primary-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.stat-value--success {
+  color: var(--p-green-500);
+}
+
+.stat-value--danger {
+  color: var(--p-red-500);
+}
+
+.stat-value--warning {
+  color: var(--p-orange-500);
+}
+
+.stat-value--info {
+  color: var(--p-blue-500);
+}
+
+.stat-icon {
+  font-size: 1.5rem;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--p-surface-600);
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 768px) {
+  .cards-grid--cols-3,
+  .cards-grid--cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>