mgv-backoffice 1.33.0 → 1.35.0

package/src/composables/useThemeClasses.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef } from 'vue'
+import { computed, reactive } from 'vue'
 import { useTheme } from './useTheme'
 
 /**
@@ -14,69 +14,73 @@ import { useTheme } from './useTheme'
  *     <p :class="t.mutedText">...</p>
  *   </div>
  *
- * Vue auto-unwraps the computed refs inside template `:class` bindings,
- * so callers do not write `.value`.
+ * The returned object is `reactive()`, so property access yields the
+ * plain class string while staying reactive to theme flips. (It used to
+ * be a plain object of ComputedRefs — Vue does NOT unwrap refs nested in
+ * plain objects inside template bindings, so `:class="t.card"` rendered
+ * the ref's own keys — `fn dep __v_isRef …` — instead of the classes.)
+ * Property access is string-valued now: do not append `.value`.
  */
 export interface ThemeClasses {
   // -- Surfaces --
   /** Card surface: bg-gray-800 / bg-white, with border. */
-  card: ComputedRef<string>
+  card: string
   /** Slightly darker card surface: bg-gray-900 / bg-white, with border. */
-  cardAlt: ComputedRef<string>
+  cardAlt: string
   /** Page background. */
-  pageBg: ComputedRef<string>
+  pageBg: string
 
   // -- Borders --
   /** Standard border between cards/sections. */
-  border: ComputedRef<string>
+  border: string
   /** Subtle divider (lighter than border). */
-  divider: ComputedRef<string>
+  divider: string
 
   // -- Text hierarchy --
   /** Page headings: white / gray-900. */
-  primaryText: ComputedRef<string>
+  primaryText: string
   /** Softer headings: gray-100 / gray-800. */
-  primaryTextSoft: ComputedRef<string>
+  primaryTextSoft: string
   /** Body copy on cards: gray-200 / gray-700. */
-  bodyText: ComputedRef<string>
+  bodyText: string
   /** Form labels: gray-300 / gray-700. */
-  label: ComputedRef<string>
+  label: string
   /** Secondary text: gray-400 / gray-600. */
-  mutedText: ComputedRef<string>
+  mutedText: string
   /** Tertiary text: gray-500 / gray-600. */
-  subtleText: ComputedRef<string>
+  subtleText: string
   /** Dimmest text: gray-500 in dark / gray-400 in light. */
-  dimText: ComputedRef<string>
+  dimText: string
   /** Slightly more contrast than dimText: gray-400 / gray-500. */
-  dimTextAlt: ComputedRef<string>
+  dimTextAlt: string
   /** Big illustration / empty-state icon: gray-600 / gray-300. */
-  illustration: ComputedRef<string>
+  illustration: string
 
   // -- Inputs --
   /** Standard text input. */
-  input: ComputedRef<string>
+  input: string
   /** Input + placeholder colour. */
-  inputWithPlaceholder: ComputedRef<string>
+  inputWithPlaceholder: string
 
   // -- Buttons --
   /** Ghost / Cancel button. */
-  ghostButton: ComputedRef<string>
+  ghostButton: string
 
   // -- Accent text colours --
   /** Emerald accent text: emerald-400 / emerald-600. */
-  emeraldText: ComputedRef<string>
+  emeraldText: string
   /** Amber accent text: amber-400 / amber-600. */
-  amberText: ComputedRef<string>
+  amberText: string
   /** Amber heading-weight: amber-300 / amber-700. */
-  amberTextStrong: ComputedRef<string>
+  amberTextStrong: string
   /** Red accent text: red-400 / red-500. */
-  redText: ComputedRef<string>
+  redText: string
 }
 
 export function useThemeClasses(): ThemeClasses {
   const { isDark } = useTheme()
 
-  return {
+  return reactive({
     card: computed(() =>
       isDark.value
         ? 'bg-gray-800 border-gray-700'
@@ -129,5 +133,5 @@ export function useThemeClasses(): ThemeClasses {
       isDark.value ? 'text-amber-300' : 'text-amber-700',
     ),
     redText: computed(() => (isDark.value ? 'text-red-400' : 'text-red-500')),
-  }
+  })
 }

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as BaseChipButton } from './components/BaseChipButton.vue'
 export { default as BaseRemoveButton } from './components/BaseRemoveButton.vue'
 export { default as BaseStatusPill } from './components/BaseStatusPill.vue'
 export { default as BaseFileDropzone } from './components/BaseFileDropzone.vue'
+export { default as BaseCodeBlock } from './components/BaseCodeBlock.vue'
 
 // Components — extracted from TradeAutomation
 export { default as BaseInput } from './components/BaseInput.vue'
@@ -48,6 +49,7 @@ export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
 export { default as BaseStatBreakdown } from './components/BaseStatBreakdown.vue'
 export { default as BaseFilterChip } from './components/BaseFilterChip.vue'
 export { default as BaseCredentialsForm } from './components/BaseCredentialsForm.vue'
+export { default as BasePillPickerModal } from './components/BasePillPickerModal.vue'
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
 // Composables
@@ -65,6 +67,8 @@ export { useNotifications } from './composables/useNotifications'
 export { useQueryParamSync } from './composables/useQueryParamSync'
 export { useFieldClasses } from './composables/useFieldClasses'
 export type { FieldClasses } from './composables/useFieldClasses'
+export { usePolling } from './composables/usePolling'
+export type { UsePollingOptions } from './composables/usePolling'
 
 // Enums
 export { AlertEnum } from './enums/AlertEnum'
@@ -89,6 +93,7 @@ export type { DropdownOption } from './types/dropdown'
 export type { TableColumn } from './types/table'
 export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
 export type { StatBreakdownItem } from './types/statBreakdown'
+export type { PillPickerItem } from './types/pillPicker'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'
@@ -117,7 +122,15 @@ export {
   fmtPct,
   fmtUsd,
   fmtDuration,
+  formatJson,
+  stringifyValue,
 } from './utils/format'
+export {
+  isValidAbsoluteUrl,
+  isValidJson,
+  isValidXml,
+  isValidBase64,
+} from './utils/validate'
 export { buildSpecParams, firstInvalidNumericSpec } from './utils/specForm'
 export { computePnL } from './utils/pnl'
 export type { PnL, PnLInputs } from './utils/pnl'

package/src/types/pillPicker.ts

@@ -0,0 +1,14 @@
+/**
+ * One clickable pill in a BasePillPickerModal.
+ *
+ * `id` must be unique (it keys the pill and identifies the pick),
+ * `label` is what the pill shows and what the free-text filter matches,
+ * `group` assigns the pill to one of the modal's segmented-filter groups,
+ * `title` becomes the pill's tooltip.
+ */
+export interface PillPickerItem {
+  id: string
+  label: string
+  group?: string
+  title?: string
+}

package/src/utils/format.test.ts

@@ -9,6 +9,8 @@ import {
   fmtPct,
   fmtUsd,
   fmtDuration,
+  formatJson,
+  stringifyValue,
 } from './format'
 
 describe('fmtDateTimeMs', () => {
@@ -233,3 +235,30 @@ describe('fmtBytes', () => {
     expect(fmtBytes(null)).toBe('')
   })
 })
+
+describe('formatJson', () => {
+  it('pretty-prints parseable JSON with 2-space indentation', () => {
+    expect(formatJson('{"a":1,"b":[2,3]}')).toBe('{\n  "a": 1,\n  "b": [\n    2,\n    3\n  ]\n}')
+  })
+  it('returns non-JSON input verbatim', () => {
+    expect(formatJson('plain text')).toBe('plain text')
+    expect(formatJson('<xml/>')).toBe('<xml/>')
+    expect(formatJson('')).toBe('')
+  })
+})
+
+describe('stringifyValue', () => {
+  it('passes strings through and blanks null/undefined', () => {
+    expect(stringifyValue('abc')).toBe('abc')
+    expect(stringifyValue(null)).toBe('')
+    expect(stringifyValue(undefined)).toBe('')
+  })
+  it('JSON-serializes objects, arrays and numbers', () => {
+    expect(stringifyValue({ a: 1 })).toBe('{"a":1}')
+    expect(stringifyValue([1, 2])).toBe('[1,2]')
+    expect(stringifyValue(42)).toBe('42')
+  })
+  it('falls back to String() when JSON.stringify throws', () => {
+    expect(stringifyValue(1n)).toBe('1')
+  })
+})

package/src/utils/format.ts

@@ -168,6 +168,34 @@ export function fmtBytes(bytes: number | null | undefined): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
+/**
+ * Pretty-print a string that may contain JSON: parseable input is
+ * re-serialized with 2-space indentation, anything else is returned
+ * verbatim. Handy for request/response bodies of unknown content type.
+ */
+export function formatJson(content: string): string {
+  try {
+    return JSON.stringify(JSON.parse(content), null, 2)
+  } catch {
+    return content
+  }
+}
+
+/**
+ * Render an unknown value as a display string: strings pass through,
+ * null/undefined become '', everything else is JSON-serialized (falling
+ * back to String() for values JSON can't handle, e.g. cycles or BigInt).
+ */
+export function stringifyValue(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'string') return value
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}
+
 /**
  * Format a millisecond duration as compact day/hour/minute units, e.g.
  * "3d 5h", "5h 12m" or "12m". Zero-value leading units are dropped;

package/src/utils/validate.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest'
+import {
+  isValidAbsoluteUrl,
+  isValidJson,
+  isValidXml,
+  isValidBase64,
+} from './validate'
+
+describe('isValidAbsoluteUrl', () => {
+  it('accepts absolute http/https URLs', () => {
+    expect(isValidAbsoluteUrl('http://example.com')).toBe(true)
+    expect(isValidAbsoluteUrl('https://example.com/path?q=1')).toBe(true)
+    expect(isValidAbsoluteUrl('  https://example.com  ')).toBe(true)
+  })
+
+  it('rejects empty, relative and non-http schemes', () => {
+    expect(isValidAbsoluteUrl('')).toBe(false)
+    expect(isValidAbsoluteUrl('   ')).toBe(false)
+    expect(isValidAbsoluteUrl('/relative/path')).toBe(false)
+    expect(isValidAbsoluteUrl('example.com')).toBe(false)
+    expect(isValidAbsoluteUrl('ftp://example.com')).toBe(false)
+    expect(isValidAbsoluteUrl('mailto:a@b.c')).toBe(false)
+    expect(isValidAbsoluteUrl('not a url')).toBe(false)
+  })
+})
+
+describe('isValidJson', () => {
+  it('treats empty input as valid', () => {
+    expect(isValidJson('')).toBe(true)
+    expect(isValidJson('  \n ')).toBe(true)
+  })
+
+  it('accepts well-formed JSON of any root type', () => {
+    expect(isValidJson('{"a":1}')).toBe(true)
+    expect(isValidJson('[1,2]')).toBe(true)
+    expect(isValidJson('"str"')).toBe(true)
+    expect(isValidJson('42')).toBe(true)
+  })
+
+  it('rejects malformed JSON', () => {
+    expect(isValidJson('{a:1}')).toBe(false)
+    expect(isValidJson('{"a":1,}')).toBe(false)
+    expect(isValidJson('<xml/>')).toBe(false)
+  })
+})
+
+describe('isValidXml', () => {
+  it('treats empty input as valid', () => {
+    expect(isValidXml('')).toBe(true)
+    expect(isValidXml('   ')).toBe(true)
+  })
+
+  it('accepts well-formed XML', () => {
+    expect(isValidXml('<root><child a="1"/></root>')).toBe(true)
+    expect(isValidXml('<?xml version="1.0"?><r/>')).toBe(true)
+  })
+
+  it('rejects malformed XML', () => {
+    expect(isValidXml('<root><unclosed></root>')).toBe(false)
+    expect(isValidXml('just text')).toBe(false)
+    expect(isValidXml('<a><b></a></b>')).toBe(false)
+  })
+})
+
+describe('isValidBase64', () => {
+  it('treats empty input as valid', () => {
+    expect(isValidBase64('')).toBe(true)
+    expect(isValidBase64(' \n ')).toBe(true)
+  })
+
+  it('accepts well-formed base64, ignoring embedded whitespace', () => {
+    expect(isValidBase64('aGVsbG8=')).toBe(true)
+    expect(isValidBase64('aGVs\nbG8=')).toBe(true)
+    expect(isValidBase64('YQ==')).toBe(true)
+  })
+
+  it('rejects bad lengths, bad alphabets and undecodable input', () => {
+    expect(isValidBase64('aGVsbG8')).toBe(false) // length % 4 !== 0
+    expect(isValidBase64('aGV$bG8=')).toBe(false) // bad character
+    expect(isValidBase64('====')).toBe(false) // padding only
+  })
+})

package/src/utils/validate.ts

@@ -0,0 +1,76 @@
+/**
+ * Pure, dependency-free input validators shared across back-office forms —
+ * extracted from WireMate's mock form.
+ *
+ * Semantics note: the payload validators (`isValidJson`, `isValidXml`,
+ * `isValidBase64`) treat empty/whitespace-only input as VALID — callers
+ * gate on "is there something to check" separately (required-ness is a
+ * different rule from well-formedness). `isValidAbsoluteUrl` is the
+ * opposite: it validates a value that must exist, so empty is invalid.
+ */
+
+/**
+ * `true` when `value` parses as an absolute http:// or https:// URL.
+ * Deliberately tightens the scheme list — backends' HTTP clients won't
+ * follow ftp:// or mailto: anyway, so a stray scheme is a typo.
+ */
+export function isValidAbsoluteUrl(value: string): boolean {
+  const trimmed = (value ?? '').trim()
+  if (!trimmed) return false
+  try {
+    const url = new URL(trimmed)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+/**
+ * `true` when `str` is empty or parses as JSON.
+ */
+export function isValidJson(str: string): boolean {
+  if (!str.trim()) return true
+  try {
+    JSON.parse(str)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * `true` when `str` is empty or is well-formed XML. Runs the browser's
+ * DOMParser and checks for a `<parsererror>` node — the only reliable
+ * signal DOMParser provides, since it never throws on bad input.
+ */
+export function isValidXml(str: string): boolean {
+  if (!str.trim()) return true
+  try {
+    const doc = new DOMParser().parseFromString(str, 'application/xml')
+    return !doc.getElementsByTagName('parsererror').length
+  } catch {
+    return false
+  }
+}
+
+/**
+ * `true` when `str` is empty or is well-formed base64 (after stripping
+ * whitespace/newlines, which are harmless in both RFC 4648 and most
+ * real-world payloads). Rejects lengths that can't possibly decode
+ * (`length % 4 !== 0` after padding) — the common "off by a character"
+ * copy/paste issue — then defers to the native decoder as the final
+ * authority.
+ */
+export function isValidBase64(str: string): boolean {
+  if (!str.trim()) return true
+  const compact = str.replace(/\s+/g, '')
+  if (!compact) return true
+  if (compact.length % 4 !== 0) return false
+  if (!/^[A-Za-z0-9+/]*={0,2}$/.test(compact)) return false
+  try {
+    atob(compact)
+    return true
+  } catch {
+    return false
+  }
+}