mgv-backoffice 1.36.0 → 1.36.2

package/src/components/BaseModalShell.vue

@@ -1,209 +1,209 @@
-<template>
-  <!--
-    Shared modal shell — knows how a dialog is structured (teleport,
-    backdrop, dark-mode card, escape key, aria-modal). Concrete modals
-    should compose this rather than re-implementing the chrome.
-
-    Every modal shows an icon left of the title: the REQUIRED `icon`
-    prop (a component, e.g. a heroicon) renders inside a tinted
-    circular chip. Tint via `icon-bg-class` / `icon-class`; the `icon`
-    slot remains as a full-markup override for callers that need
-    something richer than the standard chip.
-
-    Slots:
-      • icon    — override the standard icon chip next to the title
-      • default — body content
-      • footer  — action buttons (cancel / confirm / etc.)
-
-    Backdrop click:
-      • Emits `backdrop`. By default this also fires `cancel` (the
-        common case). Parents that want to suppress this — e.g. a
-        modal with unsaved input — should pass `manual-close` and
-        listen on `backdrop` to decide what to do.
-  -->
-  <Teleport to="body">
-    <div
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      :aria-labelledby="titleId"
-      @click="onBackdrop"
-    >
-      <!--
-        Scrollable layout — for large content modals. A flex column
-        capped at 90vh: header and footer stay fixed (`shrink-0`) while
-        the body scrolls (`overflow-y-auto flex-1`). Supports a subtitle
-        and a `header-actions` slot (e.g. a close button) on the right.
-      -->
-      <div
-        v-if="scrollable"
-        class="relative w-full mx-4 rounded-lg shadow-xl max-h-[90vh] flex flex-col"
-        :class="[maxWidthClass, shellClass]"
-        @click.stop
-      >
-        <div class="flex items-start justify-between gap-4 p-6 border-b shrink-0" :class="t.border">
-          <div class="flex items-start gap-4 min-w-0">
-            <slot name="icon">
-              <div
-                class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
-                :class="iconChipBg"
-              >
-                <component :is="icon" class="h-6 w-6" :class="iconClass" aria-hidden="true" />
-              </div>
-            </slot>
-            <div class="flex-1 min-w-0">
-              <h3 :id="titleId" class="text-lg font-medium" :class="t.primaryText">
-                {{ title }}
-              </h3>
-              <p v-if="subtitle" class="text-sm mt-1 break-all" :class="t.mutedText">
-                {{ subtitle }}
-              </p>
-            </div>
-          </div>
-          <slot name="header-actions" />
-        </div>
-
-        <div class="p-6 overflow-y-auto flex-1">
-          <slot />
-        </div>
-
-        <div v-if="$slots.footer" class="flex gap-3 justify-end p-6 border-t shrink-0" :class="t.border">
-          <slot name="footer" />
-        </div>
-      </div>
-
-      <!-- Compact layout (default) — small centered dialog. -->
-      <div
-        v-else
-        class="relative w-full mx-4 rounded-lg shadow-xl"
-        :class="[maxWidthClass, shellClass]"
-        @click.stop
-      >
-        <div class="p-6">
-          <!-- Title row -->
-          <div class="flex items-start gap-4">
-            <slot name="icon">
-              <div
-                class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
-                :class="iconChipBg"
-              >
-                <component :is="icon" class="h-6 w-6" :class="iconClass" aria-hidden="true" />
-              </div>
-            </slot>
-            <div class="flex-1">
-              <h3
-                :id="titleId"
-                class="text-lg font-medium"
-                :class="t.primaryText"
-              >
-                {{ title }}
-              </h3>
-            </div>
-          </div>
-
-          <!-- Body -->
-          <div class="mt-4">
-            <slot />
-          </div>
-
-          <!-- Footer -->
-          <div class="mt-6 flex gap-3 justify-end">
-            <slot name="footer" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Component } from 'vue'
-import { useTheme } from '../composables/useTheme'
-import { useThemeClasses } from '../composables/useThemeClasses'
-import { useEscapeKey } from '../composables/useEscapeKey'
-
-interface Props {
-  title: string
-  /**
-   * Icon component (e.g. a heroicon) rendered in a tinted circular
-   * chip left of the title. REQUIRED — every modal must name itself
-   * with an icon. The `icon` slot can override the whole chip.
-   */
-  icon: Component
-  /**
-   * Background classes of the icon chip. Defaults to the emerald
-   * tint (dark-mode aware).
-   */
-  iconBgClass?: string
-  /** Classes applied to the icon itself. Defaults to emerald. */
-  iconClass?: string
-  /**
-   * Max-width of the dialog card. Defaults to `max-w-md`. Pass any
-   * Tailwind max-w utility, or empty string to opt out.
-   */
-  maxWidthClass?: string
-  /**
-   * When true, the backdrop click and Escape key are NOT auto-bound
-   * to `cancel`. Use when the parent wants to gate dismissal on
-   * something (e.g. unsaved input). The parent should listen on
-   * `backdrop` / handle their own Escape.
-   */
-  manualClose?: boolean
-  /**
-   * Switches to the scrollable layout — a flex column capped at 90vh
-   * with a fixed header/footer and a scrolling body. Use for large
-   * content modals (request detail, import preview, …) rather than the
-   * compact confirm-style default.
-   */
-  scrollable?: boolean
-  /**
-   * Optional muted line under the title. Only rendered in the
-   * scrollable layout.
-   */
-  subtitle?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  maxWidthClass: 'max-w-md',
-  manualClose: false,
-  scrollable: false,
-  subtitle: '',
-  iconBgClass: '',
-  iconClass: 'text-emerald-600',
-})
-
-const emit = defineEmits<{
-  cancel: []
-  backdrop: []
-}>()
-
-const { isDark } = useTheme()
-
-const t = useThemeClasses()
-// Stable id derived per-instance so aria-labelledby points at this
-// dialog's own heading. Suffix with a random short string to avoid
-// collisions when two modals are momentarily stacked.
-const titleId = `modal-title-${Math.random().toString(36).slice(2, 9)}`
-
-const shellClass = computed(() =>
-  isDark.value
-    ? 'bg-gray-900 border border-gray-700'
-    : 'bg-white border border-gray-200',
-)
-
-// The icon chip's background: an explicit `icon-bg-class` wins, else the
-// standard emerald tint in the current theme.
-const iconChipBg = computed(() =>
-  props.iconBgClass || (isDark.value ? 'bg-emerald-900/30' : 'bg-emerald-50'),
-)
-
-function onBackdrop() {
-  emit('backdrop')
-  if (!props.manualClose) emit('cancel')
-}
-
-useEscapeKey(() => {
-  if (!props.manualClose) emit('cancel')
-})
-</script>
+<template>
+  <!--
+    Shared modal shell — knows how a dialog is structured (teleport,
+    backdrop, dark-mode card, escape key, aria-modal). Concrete modals
+    should compose this rather than re-implementing the chrome.
+
+    Every modal shows an icon left of the title: the REQUIRED `icon`
+    prop (a component, e.g. a heroicon) renders inside a tinted
+    circular chip. Tint via `icon-bg-class` / `icon-class`; the `icon`
+    slot remains as a full-markup override for callers that need
+    something richer than the standard chip.
+
+    Slots:
+      • icon    — override the standard icon chip next to the title
+      • default — body content
+      • footer  — action buttons (cancel / confirm / etc.)
+
+    Backdrop click:
+      • Emits `backdrop`. By default this also fires `cancel` (the
+        common case). Parents that want to suppress this — e.g. a
+        modal with unsaved input — should pass `manual-close` and
+        listen on `backdrop` to decide what to do.
+  -->
+  <Teleport to="body">
+    <div
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="titleId"
+      @click="onBackdrop"
+    >
+      <!--
+        Scrollable layout — for large content modals. A flex column
+        capped at 90vh: header and footer stay fixed (`shrink-0`) while
+        the body scrolls (`overflow-y-auto flex-1`). Supports a subtitle
+        and a `header-actions` slot (e.g. a close button) on the right.
+      -->
+      <div
+        v-if="scrollable"
+        class="relative w-full mx-4 rounded-lg shadow-xl max-h-[90vh] flex flex-col"
+        :class="[maxWidthClass, shellClass]"
+        @click.stop
+      >
+        <div class="flex items-start justify-between gap-4 p-6 border-b shrink-0" :class="t.border">
+          <div class="flex items-start gap-4 min-w-0">
+            <slot name="icon">
+              <div
+                class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
+                :class="iconChipBg"
+              >
+                <component :is="icon" class="h-6 w-6" :class="iconClass" aria-hidden="true" />
+              </div>
+            </slot>
+            <div class="flex-1 min-w-0">
+              <h3 :id="titleId" class="text-lg font-medium" :class="t.primaryText">
+                {{ title }}
+              </h3>
+              <p v-if="subtitle" class="text-sm mt-1 break-all" :class="t.mutedText">
+                {{ subtitle }}
+              </p>
+            </div>
+          </div>
+          <slot name="header-actions" />
+        </div>
+
+        <div class="p-6 overflow-y-auto flex-1">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" class="flex gap-3 justify-end p-6 border-t shrink-0" :class="t.border">
+          <slot name="footer" />
+        </div>
+      </div>
+
+      <!-- Compact layout (default) — small centered dialog. -->
+      <div
+        v-else
+        class="relative w-full mx-4 rounded-lg shadow-xl"
+        :class="[maxWidthClass, shellClass]"
+        @click.stop
+      >
+        <div class="p-6">
+          <!-- Title row -->
+          <div class="flex items-start gap-4">
+            <slot name="icon">
+              <div
+                class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-full"
+                :class="iconChipBg"
+              >
+                <component :is="icon" class="h-6 w-6" :class="iconClass" aria-hidden="true" />
+              </div>
+            </slot>
+            <div class="flex-1">
+              <h3
+                :id="titleId"
+                class="text-lg font-medium"
+                :class="t.primaryText"
+              >
+                {{ title }}
+              </h3>
+            </div>
+          </div>
+
+          <!-- Body -->
+          <div class="mt-4">
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div class="mt-6 flex gap-3 justify-end">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Component } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+import { useEscapeKey } from '../composables/useEscapeKey'
+
+interface Props {
+  title: string
+  /**
+   * Icon component (e.g. a heroicon) rendered in a tinted circular
+   * chip left of the title. REQUIRED — every modal must name itself
+   * with an icon. The `icon` slot can override the whole chip.
+   */
+  icon: Component
+  /**
+   * Background classes of the icon chip. Defaults to the emerald
+   * tint (dark-mode aware).
+   */
+  iconBgClass?: string
+  /** Classes applied to the icon itself. Defaults to emerald. */
+  iconClass?: string
+  /**
+   * Max-width of the dialog card. Defaults to `max-w-md`. Pass any
+   * Tailwind max-w utility, or empty string to opt out.
+   */
+  maxWidthClass?: string
+  /**
+   * When true, the backdrop click and Escape key are NOT auto-bound
+   * to `cancel`. Use when the parent wants to gate dismissal on
+   * something (e.g. unsaved input). The parent should listen on
+   * `backdrop` / handle their own Escape.
+   */
+  manualClose?: boolean
+  /**
+   * Switches to the scrollable layout — a flex column capped at 90vh
+   * with a fixed header/footer and a scrolling body. Use for large
+   * content modals (request detail, import preview, …) rather than the
+   * compact confirm-style default.
+   */
+  scrollable?: boolean
+  /**
+   * Optional muted line under the title. Only rendered in the
+   * scrollable layout.
+   */
+  subtitle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidthClass: 'max-w-md',
+  manualClose: false,
+  scrollable: false,
+  subtitle: '',
+  iconBgClass: '',
+  iconClass: 'text-emerald-600',
+})
+
+const emit = defineEmits<{
+  cancel: []
+  backdrop: []
+}>()
+
+const { isDark } = useTheme()
+
+const t = useThemeClasses()
+// Stable id derived per-instance so aria-labelledby points at this
+// dialog's own heading. Suffix with a random short string to avoid
+// collisions when two modals are momentarily stacked.
+const titleId = `modal-title-${Math.random().toString(36).slice(2, 9)}`
+
+const shellClass = computed(() =>
+  isDark.value
+    ? 'bg-gray-900 border border-gray-700'
+    : 'bg-white border border-gray-200',
+)
+
+// The icon chip's background: an explicit `icon-bg-class` wins, else the
+// standard emerald tint in the current theme.
+const iconChipBg = computed(() =>
+  props.iconBgClass || (isDark.value ? 'bg-emerald-900/30' : 'bg-emerald-50'),
+)
+
+function onBackdrop() {
+  emit('backdrop')
+  if (!props.manualClose) emit('cancel')
+}
+
+useEscapeKey(() => {
+  if (!props.manualClose) emit('cancel')
+})
+</script>

package/src/components/BasePageHeader.vue

@@ -1,120 +1,120 @@
-<template>
-  <!--
-    Page-level header. Standardises the "icon badge + title/subtitle on
-    the left, action buttons on the right" pattern for top-level views.
-
-    Slots:
-      • icon    — the page-specific Heroicon. Receives an `iconClass`
-        slot prop carrying the theme-aware text colour, so callers can
-        bind `:class="iconClass"` on their icon component. The badge
-        square only renders when this slot is filled, so icon-less apps
-        get a plain title/subtitle header.
-      • subtitle — rich subtitle content (links, emphasis); overrides
-        the `subtitle` prop.
-      • actions — refresh / destructive buttons rendered on the right.
-
-    Props:
-      • title     — the H1 text.
-      • subtitle  — optional muted line below the title.
-      • iconColor — badge background + icon text colour
-        ('emerald' | 'sky' | 'red' | 'amber'). Defaults to 'emerald'.
-      • maxWidthClass — Tailwind max-w utility constraining the header
-        width so sibling views can share a footprint. Defaults to
-        'max-w-4xl'; pass '' to skip the width wrapper entirely (the
-        header then spans whatever container it sits in).
-      • align — vertical alignment of the title block vs the actions:
-        'center' (default) or 'end' (actions sit on the title baseline).
-      • marginClass — space under the header. Defaults to 'mb-8'; pass
-        '' when the parent already manages vertical rhythm (space-y-*).
-  -->
-  <header :class="maxWidthClass ? ['mx-auto px-4 sm:px-6', maxWidthClass] : undefined">
-    <!--
-      flex-wrap + gap so a long title and the action buttons reflow onto
-      separate rows on narrow (mobile) viewports instead of the actions
-      overflowing off the right edge of the screen. min-w-0 on the title
-      group lets a long title truncate rather than shoving the actions out.
-    -->
-    <div
-      class="flex flex-wrap justify-between gap-3"
-      :class="[align === 'end' ? 'items-end' : 'items-center', marginClass]"
-    >
-      <div class="flex items-center gap-3 min-w-0">
-        <div
-          v-if="$slots.icon"
-          class="w-10 h-10 rounded-lg flex items-center justify-center"
-          :class="badgeBgClass"
-        >
-          <slot name="icon" :icon-class="iconTextClass" />
-        </div>
-        <div>
-          <h1 class="text-2xl font-bold" :class="t.primaryTextSoft">
-            {{ title }}
-          </h1>
-          <p v-if="subtitle || $slots.subtitle" class="text-sm" :class="t.dimTextAlt">
-            <slot name="subtitle">{{ subtitle }}</slot>
-          </p>
-        </div>
-      </div>
-      <div class="flex items-center gap-2">
-        <slot name="actions" />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-import { useThemeClasses } from '../composables/useThemeClasses'
-
-type IconColor = 'emerald' | 'sky' | 'red' | 'amber'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    subtitle?: string
-    iconColor?: IconColor
-    maxWidthClass?: string
-    align?: 'center' | 'end'
-    marginClass?: string
-  }>(),
-  {
-    subtitle: '',
-    iconColor: 'emerald',
-    maxWidthClass: 'max-w-4xl',
-    align: 'center',
-    marginClass: 'mb-8',
-  },
-)
-
-const { isDark } = useTheme()
-const t = useThemeClasses()
-
-// Maps the named colour palette to the badge-background classes for
-// dark/light themes. Callers just pass `iconColor="sky"` and the
-// component resolves both modes.
-const badgeBgClass = computed(() => {
-  const palette: Record<IconColor, { dark: string; light: string }> = {
-    emerald: { dark: 'bg-emerald-500/10', light: 'bg-emerald-50' },
-    sky: { dark: 'bg-sky-500/10', light: 'bg-sky-50' },
-    red: { dark: 'bg-red-500/10', light: 'bg-red-50' },
-    amber: { dark: 'bg-amber-500/10', light: 'bg-amber-50' },
-  }
-  const entry = palette[props.iconColor]
-  return isDark.value ? entry.dark : entry.light
-})
-
-// Icon text colour, routed through the same name → palette mapping so
-// callers don't need to know the exact Tailwind shade per theme. Exposed
-// to the `icon` slot via the `iconClass` slot prop.
-const iconTextClass = computed(() => {
-  const palette: Record<IconColor, { dark: string; light: string }> = {
-    emerald: { dark: 'text-emerald-400', light: 'text-emerald-600' },
-    sky: { dark: 'text-sky-400', light: 'text-sky-600' },
-    red: { dark: 'text-red-400', light: 'text-red-500' },
-    amber: { dark: 'text-amber-400', light: 'text-amber-600' },
-  }
-  const entry = palette[props.iconColor]
-  return isDark.value ? entry.dark : entry.light
-})
-</script>
+<template>
+  <!--
+    Page-level header. Standardises the "icon badge + title/subtitle on
+    the left, action buttons on the right" pattern for top-level views.
+
+    Slots:
+      • icon    — the page-specific Heroicon. Receives an `iconClass`
+        slot prop carrying the theme-aware text colour, so callers can
+        bind `:class="iconClass"` on their icon component. The badge
+        square only renders when this slot is filled, so icon-less apps
+        get a plain title/subtitle header.
+      • subtitle — rich subtitle content (links, emphasis); overrides
+        the `subtitle` prop.
+      • actions — refresh / destructive buttons rendered on the right.
+
+    Props:
+      • title     — the H1 text.
+      • subtitle  — optional muted line below the title.
+      • iconColor — badge background + icon text colour
+        ('emerald' | 'sky' | 'red' | 'amber'). Defaults to 'emerald'.
+      • maxWidthClass — Tailwind max-w utility constraining the header
+        width so sibling views can share a footprint. Defaults to
+        'max-w-4xl'; pass '' to skip the width wrapper entirely (the
+        header then spans whatever container it sits in).
+      • align — vertical alignment of the title block vs the actions:
+        'center' (default) or 'end' (actions sit on the title baseline).
+      • marginClass — space under the header. Defaults to 'mb-8'; pass
+        '' when the parent already manages vertical rhythm (space-y-*).
+  -->
+  <header :class="maxWidthClass ? ['mx-auto px-4 sm:px-6', maxWidthClass] : undefined">
+    <!--
+      flex-wrap + gap so a long title and the action buttons reflow onto
+      separate rows on narrow (mobile) viewports instead of the actions
+      overflowing off the right edge of the screen. min-w-0 on the title
+      group lets a long title truncate rather than shoving the actions out.
+    -->
+    <div
+      class="flex flex-wrap justify-between gap-3"
+      :class="[align === 'end' ? 'items-end' : 'items-center', marginClass]"
+    >
+      <div class="flex items-center gap-3 min-w-0">
+        <div
+          v-if="$slots.icon"
+          class="w-10 h-10 rounded-lg flex items-center justify-center"
+          :class="badgeBgClass"
+        >
+          <slot name="icon" :icon-class="iconTextClass" />
+        </div>
+        <div>
+          <h1 class="text-2xl font-bold" :class="t.primaryTextSoft">
+            {{ title }}
+          </h1>
+          <p v-if="subtitle || $slots.subtitle" class="text-sm" :class="t.dimTextAlt">
+            <slot name="subtitle">{{ subtitle }}</slot>
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+import { useThemeClasses } from '../composables/useThemeClasses'
+
+type IconColor = 'emerald' | 'sky' | 'red' | 'amber'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    subtitle?: string
+    iconColor?: IconColor
+    maxWidthClass?: string
+    align?: 'center' | 'end'
+    marginClass?: string
+  }>(),
+  {
+    subtitle: '',
+    iconColor: 'emerald',
+    maxWidthClass: 'max-w-4xl',
+    align: 'center',
+    marginClass: 'mb-8',
+  },
+)
+
+const { isDark } = useTheme()
+const t = useThemeClasses()
+
+// Maps the named colour palette to the badge-background classes for
+// dark/light themes. Callers just pass `iconColor="sky"` and the
+// component resolves both modes.
+const badgeBgClass = computed(() => {
+  const palette: Record<IconColor, { dark: string; light: string }> = {
+    emerald: { dark: 'bg-emerald-500/10', light: 'bg-emerald-50' },
+    sky: { dark: 'bg-sky-500/10', light: 'bg-sky-50' },
+    red: { dark: 'bg-red-500/10', light: 'bg-red-50' },
+    amber: { dark: 'bg-amber-500/10', light: 'bg-amber-50' },
+  }
+  const entry = palette[props.iconColor]
+  return isDark.value ? entry.dark : entry.light
+})
+
+// Icon text colour, routed through the same name → palette mapping so
+// callers don't need to know the exact Tailwind shade per theme. Exposed
+// to the `icon` slot via the `iconClass` slot prop.
+const iconTextClass = computed(() => {
+  const palette: Record<IconColor, { dark: string; light: string }> = {
+    emerald: { dark: 'text-emerald-400', light: 'text-emerald-600' },
+    sky: { dark: 'text-sky-400', light: 'text-sky-600' },
+    red: { dark: 'text-red-400', light: 'text-red-500' },
+    amber: { dark: 'text-amber-400', light: 'text-amber-600' },
+  }
+  const entry = palette[props.iconColor]
+  return isDark.value ? entry.dark : entry.light
+})
+</script>