mgv-backoffice 1.45.0 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",

package/src/components/BaseGroupedChecklist.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseGroupedChecklist from './BaseGroupedChecklist.vue'
+
+const GROUPS = [
+  { key: 'STOCK', label: 'Stocks', items: ['AMD', 'NVDA'] },
+  { key: 'ETF', label: 'ETFs', items: [] },
+  { key: 'CRYPTO', label: 'Crypto', items: ['BTC/USD'] },
+]
+
+function mountList(modelValue: string[] = []) {
+  return mount(BaseGroupedChecklist, {
+    props: {
+      groups: GROUPS,
+      modelValue,
+      allAriaLabel: 'Select all symbols',
+      itemAriaLabel: (s: string) => `Pick ${s}`,
+      'onUpdate:modelValue': () => {},
+    },
+  })
+}
+
+const box = (w: ReturnType<typeof mountList>, label: string) =>
+  w.find<HTMLInputElement>(`input[aria-label="${label}"]`)
+
+const lastEmit = (w: ReturnType<typeof mountList>) =>
+  (w.emitted('update:modelValue') as string[][][]).at(-1)![0]
+
+describe('BaseGroupedChecklist', () => {
+  it('renders non-empty groups with counts and reflects the model', () => {
+    const w = mountList(['AMD'])
+    expect(w.text()).toContain('Select all (3)')
+    expect(w.text()).toContain('Stocks (2)')
+    expect(w.text()).not.toContain('ETFs')
+    expect(box(w, 'Pick AMD').element.checked).toBe(true)
+    expect(box(w, 'Pick NVDA').element.checked).toBe(false)
+    expect(box(w, 'Select all Stocks').element.checked).toBe(false)
+    expect(box(w, 'Select all symbols').element.checked).toBe(false)
+  })
+
+  it('toggles one item', async () => {
+    const w = mountList(['AMD'])
+    await box(w, 'Pick BTC/USD').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'BTC/USD'])
+    await box(w, 'Pick AMD').trigger('change')
+    expect(lastEmit(w)).toEqual([])
+  })
+
+  it('selects and clears a whole group, leaving others alone', async () => {
+    const w = mountList(['BTC/USD'])
+    await box(w, 'Select all Stocks').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'NVDA', 'BTC/USD'])
+    await w.setProps({ modelValue: ['AMD', 'NVDA', 'BTC/USD'] })
+    await box(w, 'Select all Stocks').trigger('change')
+    expect(lastEmit(w)).toEqual(['BTC/USD'])
+  })
+
+  it('master checkbox selects everything, then clears everything', async () => {
+    const w = mountList([])
+    await box(w, 'Select all symbols').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'NVDA', 'BTC/USD'])
+    await w.setProps({ modelValue: ['AMD', 'NVDA', 'BTC/USD'] })
+    expect(box(w, 'Select all symbols').element.checked).toBe(true)
+    await box(w, 'Select all symbols').trigger('change')
+    expect(lastEmit(w)).toEqual([])
+  })
+
+  it('emits in group order regardless of click order', async () => {
+    const w = mountList(['BTC/USD'])
+    await box(w, 'Pick AMD').trigger('change')
+    expect(lastEmit(w)).toEqual(['AMD', 'BTC/USD'])
+  })
+})

package/src/components/BaseGroupedChecklist.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <label class="flex items-center gap-2 border-b border-slate-200 dark:border-slate-700 pb-2">
+      <input
+        type="checkbox"
+        class="h-4 w-4"
+        :checked="allSelected"
+        :aria-label="allAriaLabel"
+        @change="toggleAll"
+      />
+      <span class="text-sm font-medium text-slate-700 dark:text-slate-200">
+        {{ allLabel }} ({{ allItems.length }})
+      </span>
+    </label>
+    <div class="overflow-y-auto space-y-3 mt-3" :class="maxHeightClass">
+      <div v-for="g in visibleGroups" :key="g.key">
+        <label class="flex items-center gap-2 pb-1.5">
+          <input
+            type="checkbox"
+            class="h-4 w-4"
+            :checked="groupSelected(g)"
+            :aria-label="`${allLabel} ${g.label}`"
+            @change="toggleGroup(g)"
+          />
+          <span class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
+            {{ g.label }} ({{ g.items.length }})
+          </span>
+        </label>
+        <div class="grid grid-cols-[repeat(2,minmax(0,1fr))] sm:grid-cols-[repeat(3,minmax(0,1fr))] gap-x-3 gap-y-1.5">
+          <label v-for="item in g.items" :key="item" class="flex items-center gap-2">
+            <input
+              type="checkbox"
+              class="h-4 w-4"
+              :checked="selected.has(item)"
+              :aria-label="itemAriaLabel ? itemAriaLabel(item) : item"
+              @change="toggleItem(item)"
+            />
+            <span
+              class="text-sm text-slate-700 dark:text-slate-200"
+              :class="{ 'font-mono': mono }"
+            >{{ item }}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Multi-select checklist in groups: a master "Select all (N)" checkbox, a
+ * per-group select-all, and one checkbox per item. `v-model` is the array of
+ * selected item ids (order follows the groups). Items are plain strings and
+ * must be unique across groups; empty groups are not rendered.
+ *
+ * Typical use: "pick which symbols / users / records an action applies to"
+ * inside a confirmation modal.
+ */
+import { computed } from 'vue'
+import type { ChecklistGroup } from '../types/checklist'
+
+interface Props {
+  groups: ChecklistGroup[]
+  modelValue: string[]
+  /** Text of the master checkbox; group checkboxes read "<allLabel> <group>". */
+  allLabel?: string
+  allAriaLabel?: string
+  /** Accessible name per item checkbox (defaults to the item itself). */
+  itemAriaLabel?: (item: string) => string
+  /** Render item labels in a monospace font (tickers, ids). */
+  mono?: boolean
+  maxHeightClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  allLabel: 'Select all',
+  allAriaLabel: 'Select all items',
+  itemAriaLabel: undefined,
+  mono: false,
+  maxHeightClass: 'max-h-72',
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string[]): void }>()
+
+const visibleGroups = computed(() => props.groups.filter((g) => g.items.length > 0))
+const allItems = computed(() => visibleGroups.value.flatMap((g) => g.items))
+const selected = computed(() => new Set(props.modelValue))
+
+const allSelected = computed(
+  () => allItems.value.length > 0 && allItems.value.every((i) => selected.value.has(i)),
+)
+
+function groupSelected(g: ChecklistGroup): boolean {
+  return g.items.every((i) => selected.value.has(i))
+}
+
+// Emit in group order so the model is stable regardless of click order.
+function commit(next: Set<string>) {
+  emit('update:modelValue', allItems.value.filter((i) => next.has(i)))
+}
+
+function toggleAll() {
+  commit(allSelected.value ? new Set() : new Set(allItems.value))
+}
+
+function toggleGroup(g: ChecklistGroup) {
+  const next = new Set(selected.value)
+  const on = !groupSelected(g)
+  for (const i of g.items) {
+    if (on) next.add(i)
+    else next.delete(i)
+  }
+  commit(next)
+}
+
+function toggleItem(item: string) {
+  const next = new Set(selected.value)
+  if (next.has(item)) next.delete(item)
+  else next.add(item)
+  commit(next)
+}
+</script>

package/src/composables/useDirtyState.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { reactive } from 'vue'
+import { stableStringify, useDirtyState } from './useDirtyState'
+
+describe('stableStringify', () => {
+  it('ignores key order at every depth but keeps array order', () => {
+    expect(stableStringify({ b: 1, a: { d: 2, c: 3 } })).toBe(stableStringify({ a: { c: 3, d: 2 }, b: 1 }))
+    expect(stableStringify([1, 2])).not.toBe(stableStringify([2, 1]))
+  })
+})
+
+describe('useDirtyState', () => {
+  it('starts clean, turns dirty on an edit and clean again when reverted', () => {
+    const form = reactive({ name: 'a', params: { x: 1 } as Record<string, number> })
+    const { dirty } = useDirtyState(() => form)
+    expect(dirty.value).toBe(false)
+    form.params.x = 2
+    expect(dirty.value).toBe(true)
+    form.params.x = 1
+    expect(dirty.value).toBe(false)
+  })
+
+  it('markClean() adopts the current state as the baseline', () => {
+    const form = reactive({ name: 'a' })
+    const { dirty, markClean } = useDirtyState(() => form)
+    form.name = 'b'
+    expect(dirty.value).toBe(true)
+    markClean()
+    expect(dirty.value).toBe(false)
+  })
+
+  it('a reordered but equal object is not an edit', () => {
+    const form = reactive<{ params: Record<string, number> }>({ params: { a: 1, b: 2 } })
+    const { dirty } = useDirtyState(() => form)
+    form.params = { b: 2, a: 1 }
+    expect(dirty.value).toBe(false)
+  })
+})

package/src/composables/useDirtyState.ts

@@ -0,0 +1,44 @@
+import { computed, ref, type ComputedRef } from 'vue'
+
+/**
+ * JSON-serialise a value with object keys sorted at every depth, so two
+ * structurally equal values always produce the same string regardless of
+ * key insertion order (arrays keep their order).
+ */
+export function stableStringify(value: unknown): string {
+  return JSON.stringify(value, (_key, v: unknown) => {
+    if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
+      const sorted: Record<string, unknown> = {}
+      for (const k of Object.keys(v as Record<string, unknown>).sort()) {
+        sorted[k] = (v as Record<string, unknown>)[k]
+      }
+      return sorted
+    }
+    return v
+  })
+}
+
+/**
+ * Unsaved-changes tracking for an edit form. `snapshot` returns the form's
+ * current state (read reactively); `dirty` is true whenever it differs from
+ * the last clean baseline. Call `markClean()` after loading or saving to make
+ * the current state the new baseline. Comparison is structural (key order is
+ * ignored), so a server echo that reorders keys never reads as an edit.
+ *
+ * ```ts
+ * const form = reactive({ name: '', params: {} })
+ * const { dirty, markClean } = useDirtyState(() => form)
+ * // …load → assign form → markClean(); Save enabled while dirty.value
+ * ```
+ */
+export function useDirtyState(snapshot: () => unknown): {
+  dirty: ComputedRef<boolean>
+  markClean: () => void
+} {
+  const baseline = ref(stableStringify(snapshot()))
+  const dirty = computed(() => stableStringify(snapshot()) !== baseline.value)
+  function markClean() {
+    baseline.value = stableStringify(snapshot())
+  }
+  return { dirty, markClean }
+}

package/src/index.ts

@@ -51,6 +51,7 @@ 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 { default as BaseBarDistribution } from './components/BaseBarDistribution.vue'
+export { default as BaseGroupedChecklist } from './components/BaseGroupedChecklist.vue'
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
 // Components — third-party wrappers
@@ -86,6 +87,7 @@ export type { FieldClasses } from './composables/useFieldClasses'
 export { usePolling } from './composables/usePolling'
 export type { UsePollingOptions } from './composables/usePolling'
 export { useLatestRequest, isAbortError } from './composables/useLatestRequest'
+export { useDirtyState, stableStringify } from './composables/useDirtyState'
 export type { LatestRequestToken } from './composables/useLatestRequest'
 
 // Enums
@@ -113,6 +115,7 @@ export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField
 export type { StatBreakdownItem } from './types/statBreakdown'
 export type { PillPickerItem } from './types/pillPicker'
 export type { DistributionBar } from './types/distribution'
+export type { ChecklistGroup } from './types/checklist'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'

package/src/types/checklist.ts

@@ -0,0 +1,6 @@
+/** One group of a BaseGroupedChecklist: a heading plus its selectable item ids. */
+export interface ChecklistGroup {
+  key: string
+  label: string
+  items: string[]
+}