mgv-backoffice 1.36.0 → 1.36.2

package/src/composables/useQueryParamSync.test.ts

@@ -1,56 +1,56 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-
-const replace = vi.fn()
-let query: Record<string, string> = {}
-
-vi.mock('vue-router', () => ({
-  useRoute: () => ({ query }),
-  useRouter: () => ({ replace }),
-}))
-
-import { useQueryParamSync } from './useQueryParamSync'
-
-beforeEach(() => {
-  replace.mockReset()
-  query = {}
-})
-
-describe('qparam / qenum', () => {
-  it('reads string params and returns "" for absent ones', () => {
-    query = { q: 'AMD' }
-    const { qparam } = useQueryParamSync()
-    expect(qparam('q')).toBe('AMD')
-    expect(qparam('missing')).toBe('')
-  })
-
-  it('qenum only accepts allowed values, else the fallback', () => {
-    query = { range: '7D', bogus: 'nope' }
-    const { qenum } = useQueryParamSync()
-    expect(qenum('range', ['1D', '7D', '30D'], '1D')).toBe('7D')
-    expect(qenum('bogus', ['a', 'b'], 'a')).toBe('a')
-    expect(qenum('missing', ['a', 'b'], 'b')).toBe('b')
-  })
-})
-
-describe('replaceQuery', () => {
-  it('replaces when the query differs', () => {
-    query = { q: 'old' }
-    const { replaceQuery } = useQueryParamSync()
-    replaceQuery({ q: 'new' })
-    expect(replace).toHaveBeenCalledWith({ query: { q: 'new' } })
-  })
-
-  it('no-ops when the query already matches (same keys and values)', () => {
-    query = { q: 'AMD', range: '7D' }
-    const { replaceQuery } = useQueryParamSync()
-    replaceQuery({ q: 'AMD', range: '7D' })
-    expect(replace).not.toHaveBeenCalled()
-  })
-
-  it('replaces when a key is removed (defaults omitted)', () => {
-    query = { q: 'AMD', range: '7D' }
-    const { replaceQuery } = useQueryParamSync()
-    replaceQuery({ q: 'AMD' })
-    expect(replace).toHaveBeenCalledWith({ query: { q: 'AMD' } })
-  })
-})
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const replace = vi.fn()
+let query: Record<string, string> = {}
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({ query }),
+  useRouter: () => ({ replace }),
+}))
+
+import { useQueryParamSync } from './useQueryParamSync'
+
+beforeEach(() => {
+  replace.mockReset()
+  query = {}
+})
+
+describe('qparam / qenum', () => {
+  it('reads string params and returns "" for absent ones', () => {
+    query = { q: 'AMD' }
+    const { qparam } = useQueryParamSync()
+    expect(qparam('q')).toBe('AMD')
+    expect(qparam('missing')).toBe('')
+  })
+
+  it('qenum only accepts allowed values, else the fallback', () => {
+    query = { range: '7D', bogus: 'nope' }
+    const { qenum } = useQueryParamSync()
+    expect(qenum('range', ['1D', '7D', '30D'], '1D')).toBe('7D')
+    expect(qenum('bogus', ['a', 'b'], 'a')).toBe('a')
+    expect(qenum('missing', ['a', 'b'], 'b')).toBe('b')
+  })
+})
+
+describe('replaceQuery', () => {
+  it('replaces when the query differs', () => {
+    query = { q: 'old' }
+    const { replaceQuery } = useQueryParamSync()
+    replaceQuery({ q: 'new' })
+    expect(replace).toHaveBeenCalledWith({ query: { q: 'new' } })
+  })
+
+  it('no-ops when the query already matches (same keys and values)', () => {
+    query = { q: 'AMD', range: '7D' }
+    const { replaceQuery } = useQueryParamSync()
+    replaceQuery({ q: 'AMD', range: '7D' })
+    expect(replace).not.toHaveBeenCalled()
+  })
+
+  it('replaces when a key is removed (defaults omitted)', () => {
+    query = { q: 'AMD', range: '7D' }
+    const { replaceQuery } = useQueryParamSync()
+    replaceQuery({ q: 'AMD' })
+    expect(replace).toHaveBeenCalledWith({ query: { q: 'AMD' } })
+  })
+})

package/src/composables/useQueryParamSync.ts

@@ -1,42 +1,42 @@
-import { useRoute, useRouter } from 'vue-router'
-
-/**
- * URL-query mirroring helpers for filterable views: read a filter's initial
- * state from the query string once on setup, then write changes back with
- * `replaceQuery` so a filtered view can be copied, shared and bookmarked
- * without filter tweaks piling up in the browser history.
- */
-export function useQueryParamSync() {
-  const route = useRoute()
-  const router = useRouter()
-
-  /** String value of a query param ('' when absent or repeated). */
-  function qparam(name: string): string {
-    const v = route.query[name]
-    return typeof v === 'string' ? v : ''
-  }
-
-  /**
-   * Enum-ish param: only values from `allowed` pass; anything else in a
-   * hand-edited URL falls back to the default.
-   */
-  function qenum<T extends string>(name: string, allowed: readonly T[], fallback: T): T {
-    const v = qparam(name)
-    return (allowed as readonly string[]).includes(v) ? (v as T) : fallback
-  }
-
-  /**
-   * Mirror the given params into the URL with `router.replace` (not `push`),
-   * no-oping when nothing changed so timers/auto-refresh don't issue redundant
-   * navigations. Callers omit default values so the address stays clean.
-   */
-  function replaceQuery(next: Record<string, string>): void {
-    const current = route.query
-    const same =
-      Object.keys(next).length === Object.keys(current).length &&
-      Object.entries(next).every(([k, v]) => current[k] === v)
-    if (!same) void router.replace({ query: next })
-  }
-
-  return { qparam, qenum, replaceQuery }
-}
+import { useRoute, useRouter } from 'vue-router'
+
+/**
+ * URL-query mirroring helpers for filterable views: read a filter's initial
+ * state from the query string once on setup, then write changes back with
+ * `replaceQuery` so a filtered view can be copied, shared and bookmarked
+ * without filter tweaks piling up in the browser history.
+ */
+export function useQueryParamSync() {
+  const route = useRoute()
+  const router = useRouter()
+
+  /** String value of a query param ('' when absent or repeated). */
+  function qparam(name: string): string {
+    const v = route.query[name]
+    return typeof v === 'string' ? v : ''
+  }
+
+  /**
+   * Enum-ish param: only values from `allowed` pass; anything else in a
+   * hand-edited URL falls back to the default.
+   */
+  function qenum<T extends string>(name: string, allowed: readonly T[], fallback: T): T {
+    const v = qparam(name)
+    return (allowed as readonly string[]).includes(v) ? (v as T) : fallback
+  }
+
+  /**
+   * Mirror the given params into the URL with `router.replace` (not `push`),
+   * no-oping when nothing changed so timers/auto-refresh don't issue redundant
+   * navigations. Callers omit default values so the address stays clean.
+   */
+  function replaceQuery(next: Record<string, string>): void {
+    const current = route.query
+    const same =
+      Object.keys(next).length === Object.keys(current).length &&
+      Object.entries(next).every(([k, v]) => current[k] === v)
+    if (!same) void router.replace({ query: next })
+  }
+
+  return { qparam, qenum, replaceQuery }
+}

package/src/composables/useThemeClasses.test.ts

@@ -1,34 +1,34 @@
-import { describe, it, expect } from 'vitest'
-import { isReactive } from 'vue'
-import { normalizeClass } from '@vue/shared'
-import { useThemeClasses } from './useThemeClasses'
-import { useTheme } from './useTheme'
-
-describe('useThemeClasses', () => {
-  it('returns a reactive object whose properties are plain class strings', () => {
-    const t = useThemeClasses()
-    expect(isReactive(t)).toBe(true)
-    expect(typeof t.primaryText).toBe('string')
-    expect(t.primaryText).toMatch(/^text-/)
-  })
-
-  it('survives normalizeClass — the regression that leaked ref internals into class attrs', () => {
-    // Before the reactive() fix, `:class="t.primaryText"` handed a raw
-    // ComputedRef to normalizeClass, which rendered the ref's own keys
-    // ("fn dep __v_isRef …") instead of the theme classes.
-    const t = useThemeClasses()
-    const normalized = normalizeClass(t.primaryText)
-    expect(normalized).not.toContain('__v_isRef')
-    expect(normalized).toBe(t.primaryText)
-  })
-
-  it('tracks theme flips', () => {
-    const { isDark, toggleTheme } = useTheme()
-    const t = useThemeClasses()
-    const before = t.primaryText
-    toggleTheme()
-    expect(t.primaryText).not.toBe(before)
-    expect(t.primaryText).toBe(isDark.value ? 'text-white' : 'text-gray-900')
-    toggleTheme() // restore for other tests sharing the singleton theme
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { isReactive } from 'vue'
+import { normalizeClass } from '@vue/shared'
+import { useThemeClasses } from './useThemeClasses'
+import { useTheme } from './useTheme'
+
+describe('useThemeClasses', () => {
+  it('returns a reactive object whose properties are plain class strings', () => {
+    const t = useThemeClasses()
+    expect(isReactive(t)).toBe(true)
+    expect(typeof t.primaryText).toBe('string')
+    expect(t.primaryText).toMatch(/^text-/)
+  })
+
+  it('survives normalizeClass — the regression that leaked ref internals into class attrs', () => {
+    // Before the reactive() fix, `:class="t.primaryText"` handed a raw
+    // ComputedRef to normalizeClass, which rendered the ref's own keys
+    // ("fn dep __v_isRef …") instead of the theme classes.
+    const t = useThemeClasses()
+    const normalized = normalizeClass(t.primaryText)
+    expect(normalized).not.toContain('__v_isRef')
+    expect(normalized).toBe(t.primaryText)
+  })
+
+  it('tracks theme flips', () => {
+    const { isDark, toggleTheme } = useTheme()
+    const t = useThemeClasses()
+    const before = t.primaryText
+    toggleTheme()
+    expect(t.primaryText).not.toBe(before)
+    expect(t.primaryText).toBe(isDark.value ? 'text-white' : 'text-gray-900')
+    toggleTheme() // restore for other tests sharing the singleton theme
+  })
+})

package/src/composables/useThemeClasses.ts

@@ -1,137 +1,137 @@
-import { computed, reactive } from 'vue'
-import { useTheme } from './useTheme'
-
-/**
- * Centralized dark/light Tailwind class strings.
- *
- * Named "roles" that map to dark/light class strings, so consumers don't
- * spell out `isDark ? '...' : '...'` ternaries across every view.
- *
- * Usage:
- *
- *   const t = useThemeClasses()
- *   <div :class="t.card">
- *     <p :class="t.mutedText">...</p>
- *   </div>
- *
- * 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: string
-  /** Slightly darker card surface: bg-gray-900 / bg-white, with border. */
-  cardAlt: string
-  /** Page background. */
-  pageBg: string
-
-  // -- Borders --
-  /** Standard border between cards/sections. */
-  border: string
-  /** Subtle divider (lighter than border). */
-  divider: string
-
-  // -- Text hierarchy --
-  /** Page headings: white / gray-900. */
-  primaryText: string
-  /** Softer headings: gray-100 / gray-800. */
-  primaryTextSoft: string
-  /** Body copy on cards: gray-200 / gray-700. */
-  bodyText: string
-  /** Form labels: gray-300 / gray-700. */
-  label: string
-  /** Secondary text: gray-400 / gray-600. */
-  mutedText: string
-  /** Tertiary text: gray-500 / gray-600. */
-  subtleText: string
-  /** Dimmest text: gray-500 in dark / gray-400 in light. */
-  dimText: string
-  /** Slightly more contrast than dimText: gray-400 / gray-500. */
-  dimTextAlt: string
-  /** Big illustration / empty-state icon: gray-600 / gray-300. */
-  illustration: string
-
-  // -- Inputs --
-  /** Standard text input. */
-  input: string
-  /** Input + placeholder colour. */
-  inputWithPlaceholder: string
-
-  // -- Buttons --
-  /** Ghost / Cancel button. */
-  ghostButton: string
-
-  // -- Accent text colours --
-  /** Emerald accent text: emerald-400 / emerald-600. */
-  emeraldText: string
-  /** Amber accent text: amber-400 / amber-600. */
-  amberText: string
-  /** Amber heading-weight: amber-300 / amber-700. */
-  amberTextStrong: string
-  /** Red accent text: red-400 / red-500. */
-  redText: string
-}
-
-export function useThemeClasses(): ThemeClasses {
-  const { isDark } = useTheme()
-
-  return reactive({
-    card: computed(() =>
-      isDark.value
-        ? 'bg-gray-800 border-gray-700'
-        : 'bg-white border-gray-200',
-    ),
-    cardAlt: computed(() =>
-      isDark.value
-        ? 'bg-gray-900 border-gray-700'
-        : 'bg-white border-gray-200',
-    ),
-    pageBg: computed(() => (isDark.value ? 'bg-gray-900' : 'bg-gray-50')),
-
-    border: computed(() => (isDark.value ? 'border-gray-700' : 'border-gray-200')),
-    divider: computed(() => (isDark.value ? 'border-gray-800' : 'border-gray-100')),
-
-    primaryText: computed(() => (isDark.value ? 'text-white' : 'text-gray-900')),
-    primaryTextSoft: computed(() => (isDark.value ? 'text-gray-100' : 'text-gray-800')),
-    bodyText: computed(() => (isDark.value ? 'text-gray-200' : 'text-gray-700')),
-    label: computed(() => (isDark.value ? 'text-gray-300' : 'text-gray-700')),
-    mutedText: computed(() => (isDark.value ? 'text-gray-400' : 'text-gray-600')),
-    subtleText: computed(() => (isDark.value ? 'text-gray-500' : 'text-gray-600')),
-    dimText: computed(() => (isDark.value ? 'text-gray-500' : 'text-gray-400')),
-    dimTextAlt: computed(() => (isDark.value ? 'text-gray-400' : 'text-gray-500')),
-    illustration: computed(() => (isDark.value ? 'text-gray-600' : 'text-gray-300')),
-
-    input: computed(() =>
-      isDark.value
-        ? 'bg-gray-700 border-gray-600 text-white'
-        : 'bg-gray-50 border-gray-300 text-gray-900',
-    ),
-    inputWithPlaceholder: computed(() =>
-      isDark.value
-        ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
-        : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-500',
-    ),
-
-    ghostButton: computed(() =>
-      isDark.value
-        ? 'bg-gray-800 text-gray-200 border-gray-600 hover:bg-gray-700'
-        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
-    ),
-
-    emeraldText: computed(() =>
-      isDark.value ? 'text-emerald-400' : 'text-emerald-600',
-    ),
-    amberText: computed(() =>
-      isDark.value ? 'text-amber-400' : 'text-amber-600',
-    ),
-    amberTextStrong: computed(() =>
-      isDark.value ? 'text-amber-300' : 'text-amber-700',
-    ),
-    redText: computed(() => (isDark.value ? 'text-red-400' : 'text-red-500')),
-  })
-}
+import { computed, reactive } from 'vue'
+import { useTheme } from './useTheme'
+
+/**
+ * Centralized dark/light Tailwind class strings.
+ *
+ * Named "roles" that map to dark/light class strings, so consumers don't
+ * spell out `isDark ? '...' : '...'` ternaries across every view.
+ *
+ * Usage:
+ *
+ *   const t = useThemeClasses()
+ *   <div :class="t.card">
+ *     <p :class="t.mutedText">...</p>
+ *   </div>
+ *
+ * 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: string
+  /** Slightly darker card surface: bg-gray-900 / bg-white, with border. */
+  cardAlt: string
+  /** Page background. */
+  pageBg: string
+
+  // -- Borders --
+  /** Standard border between cards/sections. */
+  border: string
+  /** Subtle divider (lighter than border). */
+  divider: string
+
+  // -- Text hierarchy --
+  /** Page headings: white / gray-900. */
+  primaryText: string
+  /** Softer headings: gray-100 / gray-800. */
+  primaryTextSoft: string
+  /** Body copy on cards: gray-200 / gray-700. */
+  bodyText: string
+  /** Form labels: gray-300 / gray-700. */
+  label: string
+  /** Secondary text: gray-400 / gray-600. */
+  mutedText: string
+  /** Tertiary text: gray-500 / gray-600. */
+  subtleText: string
+  /** Dimmest text: gray-500 in dark / gray-400 in light. */
+  dimText: string
+  /** Slightly more contrast than dimText: gray-400 / gray-500. */
+  dimTextAlt: string
+  /** Big illustration / empty-state icon: gray-600 / gray-300. */
+  illustration: string
+
+  // -- Inputs --
+  /** Standard text input. */
+  input: string
+  /** Input + placeholder colour. */
+  inputWithPlaceholder: string
+
+  // -- Buttons --
+  /** Ghost / Cancel button. */
+  ghostButton: string
+
+  // -- Accent text colours --
+  /** Emerald accent text: emerald-400 / emerald-600. */
+  emeraldText: string
+  /** Amber accent text: amber-400 / amber-600. */
+  amberText: string
+  /** Amber heading-weight: amber-300 / amber-700. */
+  amberTextStrong: string
+  /** Red accent text: red-400 / red-500. */
+  redText: string
+}
+
+export function useThemeClasses(): ThemeClasses {
+  const { isDark } = useTheme()
+
+  return reactive({
+    card: computed(() =>
+      isDark.value
+        ? 'bg-gray-800 border-gray-700'
+        : 'bg-white border-gray-200',
+    ),
+    cardAlt: computed(() =>
+      isDark.value
+        ? 'bg-gray-900 border-gray-700'
+        : 'bg-white border-gray-200',
+    ),
+    pageBg: computed(() => (isDark.value ? 'bg-gray-900' : 'bg-gray-50')),
+
+    border: computed(() => (isDark.value ? 'border-gray-700' : 'border-gray-200')),
+    divider: computed(() => (isDark.value ? 'border-gray-800' : 'border-gray-100')),
+
+    primaryText: computed(() => (isDark.value ? 'text-white' : 'text-gray-900')),
+    primaryTextSoft: computed(() => (isDark.value ? 'text-gray-100' : 'text-gray-800')),
+    bodyText: computed(() => (isDark.value ? 'text-gray-200' : 'text-gray-700')),
+    label: computed(() => (isDark.value ? 'text-gray-300' : 'text-gray-700')),
+    mutedText: computed(() => (isDark.value ? 'text-gray-400' : 'text-gray-600')),
+    subtleText: computed(() => (isDark.value ? 'text-gray-500' : 'text-gray-600')),
+    dimText: computed(() => (isDark.value ? 'text-gray-500' : 'text-gray-400')),
+    dimTextAlt: computed(() => (isDark.value ? 'text-gray-400' : 'text-gray-500')),
+    illustration: computed(() => (isDark.value ? 'text-gray-600' : 'text-gray-300')),
+
+    input: computed(() =>
+      isDark.value
+        ? 'bg-gray-700 border-gray-600 text-white'
+        : 'bg-gray-50 border-gray-300 text-gray-900',
+    ),
+    inputWithPlaceholder: computed(() =>
+      isDark.value
+        ? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
+        : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-500',
+    ),
+
+    ghostButton: computed(() =>
+      isDark.value
+        ? 'bg-gray-800 text-gray-200 border-gray-600 hover:bg-gray-700'
+        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
+    ),
+
+    emeraldText: computed(() =>
+      isDark.value ? 'text-emerald-400' : 'text-emerald-600',
+    ),
+    amberText: computed(() =>
+      isDark.value ? 'text-amber-400' : 'text-amber-600',
+    ),
+    amberTextStrong: computed(() =>
+      isDark.value ? 'text-amber-300' : 'text-amber-700',
+    ),
+    redText: computed(() => (isDark.value ? 'text-red-400' : 'text-red-500')),
+  })
+}