mgv-backoffice 1.36.0 → 1.36.2

package/src/composables/useFieldClasses.test.ts

@@ -1,55 +1,55 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { useFieldClasses } from './useFieldClasses'
-import { useTheme } from './useTheme'
-
-// useTheme is a module-level singleton — grab its ref once and flip it
-// per test. localStorage is cleared so a previous test's persisted theme
-// can't leak into the initial value.
-beforeEach(() => {
-  localStorage.clear()
-})
-
-describe('useFieldClasses', () => {
-  it('returns the light-mode strings when isDark is false', () => {
-    const { isDark } = useTheme()
-    isDark.value = false
-    const f = useFieldClasses()
-    expect(f.label.value).toBe('text-gray-600')
-    expect(f.input.value).toContain('bg-white')
-    expect(f.input.value).toContain('focus:ring-emerald-500')
-  })
-
-  it('returns the dark-mode strings when isDark is true', () => {
-    const { isDark } = useTheme()
-    isDark.value = true
-    const f = useFieldClasses()
-    expect(f.label.value).toBe('text-gray-300')
-    expect(f.input.value).toContain('bg-gray-800')
-  })
-
-  it('requiredInput flags empty values with the red skin', () => {
-    const { isDark } = useTheme()
-    isDark.value = false
-    const f = useFieldClasses()
-    expect(f.requiredInput('')).toContain('border-red-400')
-    expect(f.requiredInput('   ')).toContain('border-red-400')
-    expect(f.requiredInput(undefined)).toContain('border-red-400')
-    expect(f.requiredInput(null)).toContain('border-red-400')
-  })
-
-  it('requiredInput falls back to the standard skin for filled values', () => {
-    const { isDark } = useTheme()
-    isDark.value = false
-    const f = useFieldClasses()
-    expect(f.requiredInput('hello')).toBe(f.input.value)
-    expect(f.requiredInput(0)).toBe(f.input.value) // 0 is a real value, not empty
-  })
-
-  it('requiredInput follows the active theme', () => {
-    const { isDark } = useTheme()
-    isDark.value = true
-    const f = useFieldClasses()
-    expect(f.requiredInput('')).toContain('bg-gray-800')
-    expect(f.requiredInput('')).toContain('border-red-500')
-  })
-})
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useFieldClasses } from './useFieldClasses'
+import { useTheme } from './useTheme'
+
+// useTheme is a module-level singleton — grab its ref once and flip it
+// per test. localStorage is cleared so a previous test's persisted theme
+// can't leak into the initial value.
+beforeEach(() => {
+  localStorage.clear()
+})
+
+describe('useFieldClasses', () => {
+  it('returns the light-mode strings when isDark is false', () => {
+    const { isDark } = useTheme()
+    isDark.value = false
+    const f = useFieldClasses()
+    expect(f.label.value).toBe('text-gray-600')
+    expect(f.input.value).toContain('bg-white')
+    expect(f.input.value).toContain('focus:ring-emerald-500')
+  })
+
+  it('returns the dark-mode strings when isDark is true', () => {
+    const { isDark } = useTheme()
+    isDark.value = true
+    const f = useFieldClasses()
+    expect(f.label.value).toBe('text-gray-300')
+    expect(f.input.value).toContain('bg-gray-800')
+  })
+
+  it('requiredInput flags empty values with the red skin', () => {
+    const { isDark } = useTheme()
+    isDark.value = false
+    const f = useFieldClasses()
+    expect(f.requiredInput('')).toContain('border-red-400')
+    expect(f.requiredInput('   ')).toContain('border-red-400')
+    expect(f.requiredInput(undefined)).toContain('border-red-400')
+    expect(f.requiredInput(null)).toContain('border-red-400')
+  })
+
+  it('requiredInput falls back to the standard skin for filled values', () => {
+    const { isDark } = useTheme()
+    isDark.value = false
+    const f = useFieldClasses()
+    expect(f.requiredInput('hello')).toBe(f.input.value)
+    expect(f.requiredInput(0)).toBe(f.input.value) // 0 is a real value, not empty
+  })
+
+  it('requiredInput follows the active theme', () => {
+    const { isDark } = useTheme()
+    isDark.value = true
+    const f = useFieldClasses()
+    expect(f.requiredInput('')).toContain('bg-gray-800')
+    expect(f.requiredInput('')).toContain('border-red-500')
+  })
+})

package/src/composables/useFieldClasses.ts

@@ -1,56 +1,56 @@
-import { computed, type ComputedRef } from 'vue'
-import { useTheme } from './useTheme'
-
-/**
- * Shared form-field class strings for the gray/emerald form skin
- * (the WireMate mock-form family). Extracted because the exact same
- * `labelClasses` / `inputClasses` / `requiredInputClasses` trio was
- * copy-pasted across every form section component.
- *
- * Usage:
- *
- *   const f = useFieldClasses()
- *   <label :class="f.label">Name</label>
- *   <input :class="f.input" />
- *   <input :class="f.requiredInput(value)" />   // red skin while empty
- *
- * Vue auto-unwraps the computed refs in template bindings; `requiredInput`
- * is a plain function and is called with the current field value.
- */
-export interface FieldClasses {
-  /** Form label: gray-300 / gray-600. */
-  label: ComputedRef<string>
-  /** Standard input skin: gray-800 dark surface / white light surface, emerald focus. */
-  input: ComputedRef<string>
-  /**
-   * Input skin for required fields: red border + ring while the value is
-   * empty (undefined / null / blank after trim), the standard skin otherwise.
-   */
-  requiredInput: (value: string | number | undefined | null) => string
-}
-
-export function useFieldClasses(): FieldClasses {
-  const { isDark } = useTheme()
-
-  const label = computed(() =>
-    isDark.value ? 'text-gray-300' : 'text-gray-600',
-  )
-
-  const input = computed(() =>
-    isDark.value
-      ? 'bg-gray-800 border-gray-600 text-gray-100 placeholder-gray-500 focus:ring-emerald-500 focus:border-emerald-500'
-      : 'bg-white border-gray-300 text-gray-800 focus:ring-emerald-500 focus:border-emerald-500',
-  )
-
-  function requiredInput(value: string | number | undefined | null): string {
-    const isEmpty = value === undefined || value === null || String(value).trim() === ''
-    if (isEmpty) {
-      return isDark.value
-        ? 'bg-gray-800 border-red-500 text-gray-100 placeholder-gray-500 focus:ring-red-500 focus:border-red-500 ring-1 ring-red-500/30'
-        : 'bg-white border-red-400 text-gray-800 focus:ring-red-500 focus:border-red-500 ring-1 ring-red-400/30'
-    }
-    return input.value
-  }
-
-  return { label, input, requiredInput }
-}
+import { computed, type ComputedRef } from 'vue'
+import { useTheme } from './useTheme'
+
+/**
+ * Shared form-field class strings for the gray/emerald form skin
+ * (the WireMate mock-form family). Extracted because the exact same
+ * `labelClasses` / `inputClasses` / `requiredInputClasses` trio was
+ * copy-pasted across every form section component.
+ *
+ * Usage:
+ *
+ *   const f = useFieldClasses()
+ *   <label :class="f.label">Name</label>
+ *   <input :class="f.input" />
+ *   <input :class="f.requiredInput(value)" />   // red skin while empty
+ *
+ * Vue auto-unwraps the computed refs in template bindings; `requiredInput`
+ * is a plain function and is called with the current field value.
+ */
+export interface FieldClasses {
+  /** Form label: gray-300 / gray-600. */
+  label: ComputedRef<string>
+  /** Standard input skin: gray-800 dark surface / white light surface, emerald focus. */
+  input: ComputedRef<string>
+  /**
+   * Input skin for required fields: red border + ring while the value is
+   * empty (undefined / null / blank after trim), the standard skin otherwise.
+   */
+  requiredInput: (value: string | number | undefined | null) => string
+}
+
+export function useFieldClasses(): FieldClasses {
+  const { isDark } = useTheme()
+
+  const label = computed(() =>
+    isDark.value ? 'text-gray-300' : 'text-gray-600',
+  )
+
+  const input = computed(() =>
+    isDark.value
+      ? 'bg-gray-800 border-gray-600 text-gray-100 placeholder-gray-500 focus:ring-emerald-500 focus:border-emerald-500'
+      : 'bg-white border-gray-300 text-gray-800 focus:ring-emerald-500 focus:border-emerald-500',
+  )
+
+  function requiredInput(value: string | number | undefined | null): string {
+    const isEmpty = value === undefined || value === null || String(value).trim() === ''
+    if (isEmpty) {
+      return isDark.value
+        ? 'bg-gray-800 border-red-500 text-gray-100 placeholder-gray-500 focus:ring-red-500 focus:border-red-500 ring-1 ring-red-500/30'
+        : 'bg-white border-red-400 text-gray-800 focus:ring-red-500 focus:border-red-500 ring-1 ring-red-400/30'
+    }
+    return input.value
+  }
+
+  return { label, input, requiredInput }
+}

package/src/composables/usePolling.test.ts

@@ -1,112 +1,112 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { defineComponent, h, nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import { usePolling, type UsePollingOptions } from './usePolling'
-
-function mountWithPolling(
-  fn: () => void,
-  intervalMs: number | null,
-  options?: UsePollingOptions,
-) {
-  let api!: ReturnType<typeof usePolling>
-  const wrapper = mount(
-    defineComponent({
-      setup() {
-        api = usePolling(fn, intervalMs, options)
-        return () => h('div')
-      },
-    }),
-  )
-  return { wrapper, api }
-}
-
-function setVisibility(state: 'visible' | 'hidden') {
-  Object.defineProperty(document, 'visibilityState', {
-    configurable: true,
-    get: () => state,
-  })
-  document.dispatchEvent(new Event('visibilitychange'))
-}
-
-describe('usePolling', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-    setVisibility('visible')
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('runs immediately on mount and then on each interval', () => {
-    const fn = vi.fn()
-    mountWithPolling(fn, 1000)
-    expect(fn).toHaveBeenCalledTimes(1)
-    vi.advanceTimersByTime(3000)
-    expect(fn).toHaveBeenCalledTimes(4)
-  })
-
-  it('skips the initial call when immediate is false', () => {
-    const fn = vi.fn()
-    mountWithPolling(fn, 1000, { immediate: false })
-    expect(fn).not.toHaveBeenCalled()
-    vi.advanceTimersByTime(1000)
-    expect(fn).toHaveBeenCalledTimes(1)
-  })
-
-  it('pauses while hidden and refreshes + resumes on return to visible', async () => {
-    const fn = vi.fn()
-    mountWithPolling(fn, 1000)
-    expect(fn).toHaveBeenCalledTimes(1)
-
-    setVisibility('hidden')
-    await nextTick()
-    vi.advanceTimersByTime(5000)
-    expect(fn).toHaveBeenCalledTimes(1) // no ticks while hidden
-
-    setVisibility('visible')
-    expect(fn).toHaveBeenCalledTimes(2) // immediate refresh on resume
-    vi.advanceTimersByTime(1000)
-    expect(fn).toHaveBeenCalledTimes(3) // interval re-armed
-  })
-
-  it('with intervalMs null, runs on mount and on visibility resume only', () => {
-    const fn = vi.fn()
-    mountWithPolling(fn, null)
-    expect(fn).toHaveBeenCalledTimes(1)
-    vi.advanceTimersByTime(60000)
-    expect(fn).toHaveBeenCalledTimes(1)
-
-    setVisibility('hidden')
-    setVisibility('visible')
-    expect(fn).toHaveBeenCalledTimes(2)
-    vi.advanceTimersByTime(60000)
-    expect(fn).toHaveBeenCalledTimes(2)
-  })
-
-  it('stops on unmount', () => {
-    const fn = vi.fn()
-    const { wrapper } = mountWithPolling(fn, 1000)
-    wrapper.unmount()
-    vi.advanceTimersByTime(5000)
-    expect(fn).toHaveBeenCalledTimes(1)
-    // and the visibility listener is gone too
-    setVisibility('hidden')
-    setVisibility('visible')
-    expect(fn).toHaveBeenCalledTimes(1)
-  })
-
-  it('exposes manual start/stop and an active flag', () => {
-    const fn = vi.fn()
-    const { api } = mountWithPolling(fn, 1000)
-    expect(api.active.value).toBe(true)
-    api.stop()
-    expect(api.active.value).toBe(false)
-    vi.advanceTimersByTime(3000)
-    expect(fn).toHaveBeenCalledTimes(1)
-    api.start()
-    expect(fn).toHaveBeenCalledTimes(2)
-    vi.advanceTimersByTime(1000)
-    expect(fn).toHaveBeenCalledTimes(3)
-  })
-})
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { defineComponent, h, nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import { usePolling, type UsePollingOptions } from './usePolling'
+
+function mountWithPolling(
+  fn: () => void,
+  intervalMs: number | null,
+  options?: UsePollingOptions,
+) {
+  let api!: ReturnType<typeof usePolling>
+  const wrapper = mount(
+    defineComponent({
+      setup() {
+        api = usePolling(fn, intervalMs, options)
+        return () => h('div')
+      },
+    }),
+  )
+  return { wrapper, api }
+}
+
+function setVisibility(state: 'visible' | 'hidden') {
+  Object.defineProperty(document, 'visibilityState', {
+    configurable: true,
+    get: () => state,
+  })
+  document.dispatchEvent(new Event('visibilitychange'))
+}
+
+describe('usePolling', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    setVisibility('visible')
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('runs immediately on mount and then on each interval', () => {
+    const fn = vi.fn()
+    mountWithPolling(fn, 1000)
+    expect(fn).toHaveBeenCalledTimes(1)
+    vi.advanceTimersByTime(3000)
+    expect(fn).toHaveBeenCalledTimes(4)
+  })
+
+  it('skips the initial call when immediate is false', () => {
+    const fn = vi.fn()
+    mountWithPolling(fn, 1000, { immediate: false })
+    expect(fn).not.toHaveBeenCalled()
+    vi.advanceTimersByTime(1000)
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('pauses while hidden and refreshes + resumes on return to visible', async () => {
+    const fn = vi.fn()
+    mountWithPolling(fn, 1000)
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    setVisibility('hidden')
+    await nextTick()
+    vi.advanceTimersByTime(5000)
+    expect(fn).toHaveBeenCalledTimes(1) // no ticks while hidden
+
+    setVisibility('visible')
+    expect(fn).toHaveBeenCalledTimes(2) // immediate refresh on resume
+    vi.advanceTimersByTime(1000)
+    expect(fn).toHaveBeenCalledTimes(3) // interval re-armed
+  })
+
+  it('with intervalMs null, runs on mount and on visibility resume only', () => {
+    const fn = vi.fn()
+    mountWithPolling(fn, null)
+    expect(fn).toHaveBeenCalledTimes(1)
+    vi.advanceTimersByTime(60000)
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    setVisibility('hidden')
+    setVisibility('visible')
+    expect(fn).toHaveBeenCalledTimes(2)
+    vi.advanceTimersByTime(60000)
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it('stops on unmount', () => {
+    const fn = vi.fn()
+    const { wrapper } = mountWithPolling(fn, 1000)
+    wrapper.unmount()
+    vi.advanceTimersByTime(5000)
+    expect(fn).toHaveBeenCalledTimes(1)
+    // and the visibility listener is gone too
+    setVisibility('hidden')
+    setVisibility('visible')
+    expect(fn).toHaveBeenCalledTimes(1)
+  })
+
+  it('exposes manual start/stop and an active flag', () => {
+    const fn = vi.fn()
+    const { api } = mountWithPolling(fn, 1000)
+    expect(api.active.value).toBe(true)
+    api.stop()
+    expect(api.active.value).toBe(false)
+    vi.advanceTimersByTime(3000)
+    expect(fn).toHaveBeenCalledTimes(1)
+    api.start()
+    expect(fn).toHaveBeenCalledTimes(2)
+    vi.advanceTimersByTime(1000)
+    expect(fn).toHaveBeenCalledTimes(3)
+  })
+})

package/src/composables/usePolling.ts

@@ -1,102 +1,102 @@
-import { onMounted, onUnmounted, readonly, ref, type Ref } from 'vue'
-
-export interface UsePollingOptions {
-  /** Run `fn` immediately when polling starts (mount / resume). Default true. */
-  immediate?: boolean
-  /**
-   * Pause the interval while the tab is hidden and refresh + resume when it
-   * becomes visible again — a hidden tab has no reason to keep waking the
-   * backend. Default true.
-   */
-  pauseWhenHidden?: boolean
-}
-
-/**
- * Visibility-gated polling loop bound to the component lifecycle.
- *
- * Starts on mount, stops on unmount. With `pauseWhenHidden` (the default)
- * the interval is torn down on `document.visibilitychange` → hidden and
- * re-armed — with an immediate refresh — when the tab is shown again.
- *
- * Pass `intervalMs: null` for a refresh-only mode: `fn` runs on mount and
- * on every return-to-visible, but no interval is scheduled. Useful for
- * "reload this badge when the user comes back" data that doesn't warrant
- * a timer.
- *
- * Rejections from an async `fn` are the caller's to handle — catch inside
- * `fn`; the loop itself never swallows or reports them.
- */
-export function usePolling(
-  fn: () => void | Promise<void>,
-  intervalMs: number | null,
-  options: UsePollingOptions = {},
-): { start: () => void; stop: () => void; active: Readonly<Ref<boolean>> } {
-  const { immediate = true, pauseWhenHidden = true } = options
-
-  let timer: ReturnType<typeof setInterval> | null = null
-  const active = ref(false)
-  // True only when the visibility handler paused an ACTIVE loop. A loop the
-  // caller stopped explicitly (stop(), e.g. an auto-refresh toggle) must stay
-  // stopped across hide/show cycles instead of being silently restarted.
-  let suspendedByVisibility = false
-
-  function startTimer() {
-    if (timer !== null || intervalMs === null) return
-    timer = setInterval(() => void fn(), intervalMs)
-  }
-
-  function stopTimer() {
-    if (timer !== null) {
-      clearInterval(timer)
-      timer = null
-    }
-  }
-
-  function start() {
-    suspendedByVisibility = false
-    if (active.value) return
-    active.value = true
-    if (immediate) void fn()
-    startTimer()
-  }
-
-  function stop() {
-    suspendedByVisibility = false
-    active.value = false
-    stopTimer()
-  }
-
-  function onVisibilityChange() {
-    if (document.visibilityState === 'visible') {
-      // Only resume a loop THIS handler paused — a caller-stopped loop
-      // stays stopped. Refresh right away so stale data doesn't linger
-      // for a full interval after the user returns, then re-arm the timer.
-      if (!suspendedByVisibility) return
-      suspendedByVisibility = false
-      active.value = true
-      void fn()
-      startTimer()
-    } else {
-      if (!active.value) return
-      active.value = false
-      stopTimer()
-      suspendedByVisibility = true
-    }
-  }
-
-  onMounted(() => {
-    start()
-    if (pauseWhenHidden) {
-      document.addEventListener('visibilitychange', onVisibilityChange)
-    }
-  })
-
-  onUnmounted(() => {
-    stop()
-    if (pauseWhenHidden) {
-      document.removeEventListener('visibilitychange', onVisibilityChange)
-    }
-  })
-
-  return { start, stop, active: readonly(active) }
-}
+import { onMounted, onUnmounted, readonly, ref, type Ref } from 'vue'
+
+export interface UsePollingOptions {
+  /** Run `fn` immediately when polling starts (mount / resume). Default true. */
+  immediate?: boolean
+  /**
+   * Pause the interval while the tab is hidden and refresh + resume when it
+   * becomes visible again — a hidden tab has no reason to keep waking the
+   * backend. Default true.
+   */
+  pauseWhenHidden?: boolean
+}
+
+/**
+ * Visibility-gated polling loop bound to the component lifecycle.
+ *
+ * Starts on mount, stops on unmount. With `pauseWhenHidden` (the default)
+ * the interval is torn down on `document.visibilitychange` → hidden and
+ * re-armed — with an immediate refresh — when the tab is shown again.
+ *
+ * Pass `intervalMs: null` for a refresh-only mode: `fn` runs on mount and
+ * on every return-to-visible, but no interval is scheduled. Useful for
+ * "reload this badge when the user comes back" data that doesn't warrant
+ * a timer.
+ *
+ * Rejections from an async `fn` are the caller's to handle — catch inside
+ * `fn`; the loop itself never swallows or reports them.
+ */
+export function usePolling(
+  fn: () => void | Promise<void>,
+  intervalMs: number | null,
+  options: UsePollingOptions = {},
+): { start: () => void; stop: () => void; active: Readonly<Ref<boolean>> } {
+  const { immediate = true, pauseWhenHidden = true } = options
+
+  let timer: ReturnType<typeof setInterval> | null = null
+  const active = ref(false)
+  // True only when the visibility handler paused an ACTIVE loop. A loop the
+  // caller stopped explicitly (stop(), e.g. an auto-refresh toggle) must stay
+  // stopped across hide/show cycles instead of being silently restarted.
+  let suspendedByVisibility = false
+
+  function startTimer() {
+    if (timer !== null || intervalMs === null) return
+    timer = setInterval(() => void fn(), intervalMs)
+  }
+
+  function stopTimer() {
+    if (timer !== null) {
+      clearInterval(timer)
+      timer = null
+    }
+  }
+
+  function start() {
+    suspendedByVisibility = false
+    if (active.value) return
+    active.value = true
+    if (immediate) void fn()
+    startTimer()
+  }
+
+  function stop() {
+    suspendedByVisibility = false
+    active.value = false
+    stopTimer()
+  }
+
+  function onVisibilityChange() {
+    if (document.visibilityState === 'visible') {
+      // Only resume a loop THIS handler paused — a caller-stopped loop
+      // stays stopped. Refresh right away so stale data doesn't linger
+      // for a full interval after the user returns, then re-arm the timer.
+      if (!suspendedByVisibility) return
+      suspendedByVisibility = false
+      active.value = true
+      void fn()
+      startTimer()
+    } else {
+      if (!active.value) return
+      active.value = false
+      stopTimer()
+      suspendedByVisibility = true
+    }
+  }
+
+  onMounted(() => {
+    start()
+    if (pauseWhenHidden) {
+      document.addEventListener('visibilitychange', onVisibilityChange)
+    }
+  })
+
+  onUnmounted(() => {
+    stop()
+    if (pauseWhenHidden) {
+      document.removeEventListener('visibilitychange', onVisibilityChange)
+    }
+  })
+
+  return { start, stop, active: readonly(active) }
+}