mgv-backoffice 1.3.0 → 1.6.0

package/src/components/BaseActionButton.vue

@@ -0,0 +1,142 @@
+<template>
+  <!--
+    Compact ghost action button — the colour-coded "Edit / Logs / Stub /
+    Delete" actions that sit on a card footer or in an action row. No
+    border or fill at rest; a tinted hover background keyed to the
+    semantic colour. Pairs an optional leading icon with a label.
+
+    Slots:
+      • icon — leading Heroicon. Receives an `iconClass` slot prop
+        ('w-4 h-4') so callers can spread it onto their icon.
+
+    Props:
+      • label     — button text. Optional (some actions are label-only,
+        e.g. "click to create").
+      • color     — semantic colour token. Determines text + hover tint.
+      • disabled  — greys via opacity + blocks the click; the hover tint
+        is suppressed so a disabled button doesn't light up.
+      • fullWidth — stretch to fill its flex row (adds `flex-1`). Used
+        on card footers where actions share the width evenly.
+      • title / ariaLabel — native tooltip / accessibility text.
+      • type      — native button type. Defaults to 'button'.
+  -->
+  <button
+    :type="type"
+    :disabled="disabled"
+    :title="title"
+    :aria-label="ariaLabel"
+    class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
+    :class="[fullWidth ? 'flex-1' : '', stateClass]"
+    @click="$emit('click', $event)"
+  >
+    <slot name="icon" :icon-class="'w-4 h-4'" />
+    <span v-if="label">{{ label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+type ActionColor =
+  | 'emerald'
+  | 'sky'
+  | 'indigo'
+  | 'teal'
+  | 'purple'
+  | 'red'
+  | 'amber'
+  | 'amberStrong'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    color?: ActionColor
+    disabled?: boolean
+    fullWidth?: boolean
+    title?: string
+    ariaLabel?: string
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    label: '',
+    color: 'emerald',
+    disabled: false,
+    fullWidth: false,
+    title: undefined,
+    ariaLabel: undefined,
+    type: 'button',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const { isDark } = useTheme()
+
+// Per-colour text + hover-tint classes for each theme. `amberStrong`
+// is the higher-contrast amber used for the "click to create" call to
+// action; `amber` is the softer shade used for Clone-style actions.
+const colorClass = computed(() => {
+  const palette: Record<ActionColor, { dark: string; light: string }> = {
+    emerald: {
+      dark: 'text-emerald-400 hover:bg-emerald-500/10',
+      light: 'text-emerald-600 hover:bg-emerald-50',
+    },
+    sky: {
+      dark: 'text-sky-400 hover:bg-sky-500/10',
+      light: 'text-sky-600 hover:bg-sky-50',
+    },
+    indigo: {
+      dark: 'text-indigo-400 hover:bg-indigo-500/10',
+      light: 'text-indigo-600 hover:bg-indigo-50',
+    },
+    teal: {
+      dark: 'text-teal-400 hover:bg-teal-500/10',
+      light: 'text-teal-600 hover:bg-teal-50',
+    },
+    purple: {
+      dark: 'text-purple-400 hover:bg-purple-500/10',
+      light: 'text-purple-600 hover:bg-purple-50',
+    },
+    red: {
+      dark: 'text-red-400 hover:bg-red-500/10',
+      light: 'text-red-500 hover:bg-red-50',
+    },
+    amber: {
+      dark: 'text-amber-400 hover:bg-amber-500/10',
+      light: 'text-amber-600 hover:bg-amber-50',
+    },
+    amberStrong: {
+      dark: 'text-amber-300 hover:bg-amber-500/10',
+      light: 'text-amber-700 hover:bg-amber-50',
+    },
+  }
+  const entry = palette[props.color]
+  return isDark.value ? entry.dark : entry.light
+})
+
+// Text colour without the hover tint, for the disabled state. Keeps the
+// semantic colour legible but stops the button reacting to the pointer.
+const disabledColorClass = computed(() => {
+  const palette: Record<ActionColor, { dark: string; light: string }> = {
+    emerald: { dark: 'text-emerald-400', light: 'text-emerald-600' },
+    sky: { dark: 'text-sky-400', light: 'text-sky-600' },
+    indigo: { dark: 'text-indigo-400', light: 'text-indigo-600' },
+    teal: { dark: 'text-teal-400', light: 'text-teal-600' },
+    purple: { dark: 'text-purple-400', light: 'text-purple-600' },
+    red: { dark: 'text-red-400', light: 'text-red-500' },
+    amber: { dark: 'text-amber-400', light: 'text-amber-600' },
+    amberStrong: { dark: 'text-amber-300', light: 'text-amber-700' },
+  }
+  const entry = palette[props.color]
+  return isDark.value ? entry.dark : entry.light
+})
+
+const stateClass = computed(() =>
+  props.disabled
+    ? `${disabledColorClass.value} opacity-50 cursor-not-allowed`
+    : `${colorClass.value} cursor-pointer`,
+)
+</script>

package/src/components/BasePageHeader.vue

@@ -0,0 +1,97 @@
+<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.
+      • 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'.
+  -->
+  <div :class="['mx-auto px-4 sm:px-6', maxWidthClass]">
+    <div class="flex items-center justify-between mb-8">
+      <div class="flex items-center gap-3">
+        <div
+          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" class="text-sm" :class="t.dimTextAlt">
+            {{ subtitle }}
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</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
+  }>(),
+  {
+    subtitle: '',
+    iconColor: 'emerald',
+    maxWidthClass: 'max-w-4xl',
+  },
+)
+
+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>

package/src/components/BaseToolbarButton.vue

@@ -0,0 +1,79 @@
+<template>
+  <!--
+    Bordered toolbar button — the "Refresh / Delete All" row that sits
+    under a page header. Pairs an optional leading icon with a label.
+
+    Slots:
+      • icon — leading Heroicon. Receives an `iconClass` slot prop
+        ('w-4 h-4') so callers can spread it onto their icon and still
+        add their own state classes (e.g. `:class="['animate-spin']"`).
+
+    Props:
+      • label    — button text (rendered in a <span>). Optional so an
+        icon-only toolbar button is possible.
+      • variant  — 'neutral' (default grey) or 'danger' (solid red).
+      • disabled — greys out + blocks the click.
+      • title    — native tooltip / accessibility text.
+      • type     — native button type. Defaults to 'button' so the
+        button never accidentally submits a surrounding form.
+  -->
+  <button
+    :type="type"
+    :disabled="disabled"
+    :title="title"
+    class="inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+    :class="variantClass"
+    @click="$emit('click', $event)"
+  >
+    <slot name="icon" :icon-class="'w-4 h-4'" />
+    <span v-if="label">{{ label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+type ToolbarVariant = 'neutral' | 'danger'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    variant?: ToolbarVariant
+    disabled?: boolean
+    title?: string
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  {
+    label: '',
+    variant: 'neutral',
+    disabled: false,
+    title: undefined,
+    type: 'button',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const { isDark } = useTheme()
+
+// Resolves the variant + theme into the colour classes. The danger
+// style is normalised here so every destructive toolbar button reads
+// identically (red-500 hover in dark, red-700 hover in light).
+const variantClass = computed(() => {
+  const palette: Record<ToolbarVariant, { dark: string; light: string }> = {
+    neutral: {
+      dark: 'bg-gray-800 text-gray-100 border-gray-700 hover:bg-gray-700',
+      light: 'bg-white text-gray-700 border-gray-200 hover:bg-gray-100',
+    },
+    danger: {
+      dark: 'bg-red-600 text-white border-red-600 hover:bg-red-500',
+      light: 'bg-red-600 text-white border-red-600 hover:bg-red-700',
+    },
+  }
+  const entry = palette[props.variant]
+  return isDark.value ? entry.dark : entry.light
+})
+</script>

package/src/index.ts

@@ -26,6 +26,9 @@ export { default as BaseNotFoundPage } from './components/BaseNotFoundPage.vue'
 export { default as BaseSidebar } from './components/BaseSidebar.vue'
 export { default as BaseEntityPickerModal } from './components/BaseEntityPickerModal.vue'
 export { default as BaseAppLayout } from './components/BaseAppLayout.vue'
+export { default as BasePageHeader } from './components/BasePageHeader.vue'
+export { default as BaseToolbarButton } from './components/BaseToolbarButton.vue'
+export { default as BaseActionButton } from './components/BaseActionButton.vue'
 
 // Composables
 export { useTheme } from './composables/useTheme'
@@ -62,3 +65,4 @@ export {
   statusBadgeSolid,
   statusBadgeTinted,
 } from './utils/httpColors'
+export { sanitizeHtml, isSafeHref } from './utils/sanitizeHtml'

package/src/utils/sanitizeHtml.ts

@@ -0,0 +1,116 @@
+/**
+ * Allow-list HTML sanitizer for strings bound into `v-html`.
+ *
+ * Use whenever rich HTML from any source (backend payloads, user input,
+ * imported content) is rendered via `v-html`. Even "trusted" sources
+ * should be sanitised belt-and-suspenders so a future change can't
+ * smuggle script tags, inline event handlers, or `javascript:` hrefs
+ * into the page.
+ *
+ * Implementation:
+ *   1. Parse with `DOMParser` into an off-document tree.
+ *   2. Walk the tree once, replacing any disallowed element with its
+ *      `textContent` (the readable text survives, the wrapper is gone).
+ *   3. On every element, strip every attribute except the per-tag
+ *      allow-list below.
+ *   4. Re-validate `a[href]` against an explicit scheme whitelist —
+ *      `javascript:`, `data:`, `vbscript:`, and `file:` are rejected.
+ *   5. Force `rel="noopener noreferrer" target="_blank"` on every
+ *      surviving anchor so external links can't reach back through
+ *      `window.opener`.
+ *
+ * Returns the cleaned HTML string, ready for `v-html`. Browser-only —
+ * relies on `DOMParser`.
+ */
+
+const ALLOWED_TAGS: ReadonlySet<string> = new Set([
+  'A', 'B', 'STRONG', 'I', 'EM', 'CODE', 'PRE', 'BR',
+  'P', 'UL', 'OL', 'LI', 'SPAN', 'DIV',
+])
+
+/**
+ * Tags whose contents are also dropped (not unwrapped as text). For
+ * most disallowed elements we keep the inner text so the user-visible
+ * copy survives even when the wrapper is stripped, but for
+ * code-bearing elements like `<script>` and `<style>` the inner text
+ * is the payload itself — leaving it as a visible text node would
+ * splat raw JS / CSS source into the rendered output. Drop the
+ * element entirely instead.
+ */
+const STRIP_WITH_CONTENT: ReadonlySet<string> = new Set([
+  'SCRIPT', 'STYLE', 'IFRAME', 'OBJECT', 'EMBED', 'NOSCRIPT', 'TEMPLATE',
+])
+
+const ALLOWED_ATTRS_BY_TAG: Readonly<Record<string, ReadonlySet<string>>> = {
+  A: new Set(['href', 'title']),
+}
+
+/**
+ * Returns true when the supplied href is safe to render as-is. Blocks
+ * every scheme that has historically been a vector for XSS or local-
+ * file leakage.
+ */
+export function isSafeHref(value: string): boolean {
+  const trimmed = value.trim().toLowerCase()
+  return (
+    trimmed.startsWith('http://')
+    || trimmed.startsWith('https://')
+    || trimmed.startsWith('mailto:')
+    || trimmed.startsWith('tel:')
+    || trimmed.startsWith('/')
+    || trimmed.startsWith('#')
+    || trimmed === ''
+  )
+}
+
+function sanitizeNode(node: Node): void {
+  if (node.nodeType !== Node.ELEMENT_NODE) return
+  const el = node as Element
+  const tag = el.tagName.toUpperCase()
+  // Disallowed element: replace with its textContent so the text the
+  // user is meant to read survives, but the wrapper is gone. For
+  // code-bearing elements (`<script>`, `<style>`, etc.) we drop the
+  // contents too so the JS/CSS source itself doesn't render as
+  // visible text.
+  if (!ALLOWED_TAGS.has(tag)) {
+    if (STRIP_WITH_CONTENT.has(tag)) {
+      el.remove()
+    } else {
+      el.replaceWith(document.createTextNode(el.textContent ?? ''))
+    }
+    return
+  }
+  // Strip every attribute that isn't in the per-tag allow-list, and
+  // re-validate `a[href]` against `isSafeHref`.
+  const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tag] ?? new Set<string>()
+  for (const attr of Array.from(el.attributes)) {
+    if (!allowedAttrs.has(attr.name.toLowerCase())) {
+      el.removeAttribute(attr.name)
+      continue
+    }
+    if (tag === 'A' && attr.name.toLowerCase() === 'href' && !isSafeHref(attr.value)) {
+      el.removeAttribute(attr.name)
+    }
+  }
+  // External-link hardening: every surviving anchor opens safely.
+  if (tag === 'A' && el.hasAttribute('href')) {
+    el.setAttribute('rel', 'noopener noreferrer')
+    el.setAttribute('target', '_blank')
+  }
+  // Recurse over children — copy the live list first so removals don't
+  // skip siblings.
+  for (const child of Array.from(el.childNodes)) {
+    sanitizeNode(child)
+  }
+}
+
+export function sanitizeHtml(raw: string | undefined | null): string {
+  if (!raw) return ''
+  const doc = new DOMParser().parseFromString(`<div>${raw}</div>`, 'text/html')
+  const root = doc.body.firstElementChild
+  if (!root) return ''
+  for (const child of Array.from(root.childNodes)) {
+    sanitizeNode(child)
+  }
+  return root.innerHTML
+}