mgv-backoffice 1.45.0 → 1.46.0

package/README.md

@@ -1782,6 +1782,35 @@ Extracted from TradeAutomation's variant-stats modal.
 
 ---
 
+### BaseGroupedChecklist
+
+Grouped multi-select checklist (since 1.46.0): a master "Select all (N)"
+checkbox, a per-group select-all, and one checkbox per item. Built for
+"pick which records this action applies to" confirmation modals. Empty groups
+are not rendered; items are plain strings, unique across groups.
+
+| Prop             | Type                       | Default            | Description |
+| ---------------- | -------------------------- | ------------------ | ----------- |
+| `groups`         | `ChecklistGroup[]`         | **required**       | `{ key, label, items: string[] }` per group, in display order. |
+| `modelValue`     | `string[]`                 | **required**       | Selected items (`v-model`); emitted in group order. |
+| `allLabel`       | `string`                   | `'Select all'`     | Master checkbox text; group checkboxes are labelled `"<allLabel> <group label>"`. |
+| `allAriaLabel`   | `string`                   | `'Select all items'` | Accessible name of the master checkbox. |
+| `itemAriaLabel`  | `(item: string) => string` | the item itself    | Accessible name per item checkbox. |
+| `mono`           | `boolean`                  | `false`            | Monospace item labels (tickers, ids). |
+| `maxHeightClass` | `string`                   | `'max-h-72'`       | Scroll cap of the group list. |
+
+```vue
+<BaseGroupedChecklist
+  v-model="selected"
+  :groups="[{ key: 'STOCK', label: 'Stocks', items: ['AMD', 'NVDA'] }]"
+  all-aria-label="Select all symbols"
+  :item-aria-label="(s) => `Apply to ${s}`"
+  mono
+/>
+```
+
+---
+
 ### BaseSearchSelect
 
 Searchable select (combobox): type to filter, pick with the mouse or
@@ -1952,6 +1981,8 @@ import {
   usePolling,
   useLatestRequest,
   isAbortError,
+  useDirtyState,
+  stableStringify,
 } from 'mgv-backoffice'
 import type {
   UseThemeOptions,
@@ -1976,6 +2007,7 @@ import type {
 | `useFieldClasses()` | Shared form-field class strings for the gray/emerald form skin: `{ label, input, requiredInput(value) }`. `requiredInput` returns a red border+ring skin while the value is empty and the standard skin otherwise. |
 | `usePolling(fn, intervalMs, { immediate?, pauseWhenHidden? })` | Visibility-gated polling loop bound to the component lifecycle: starts on mount, stops on unmount, pauses while the tab is hidden and refreshes + resumes on return to visible (both default on). Pass `intervalMs: null` for refresh-only mode (run on mount + each return-to-visible, no timer). Returns `{ start, stop, active }`. A loop stopped via `stop()` stays stopped across hide/show cycles (since 1.36.0) — only a visibility-paused loop auto-resumes. Catch errors inside `fn` — the loop never swallows rejections. |
 | `useLatestRequest()` | "Latest request wins" guard for views that refetch on filter changes / polls / Refresh (since 1.45.0). `begin()` aborts the previous in-flight request and returns `{ signal, isLatest() }` — pass `signal` to `fetch`, and check `isLatest()` after every `await` before writing state (and before clearing a loading flag in `finally`). `cancel()` aborts + invalidates without starting a new request. Auto-cancels on unmount when called in setup. Pair with `isAbortError(e)` to swallow superseded requests silently. |
+| `useDirtyState(snapshot)` | Unsaved-changes tracking for edit forms (since 1.46.0): `snapshot()` returns the form state (read reactively); `dirty` is true while it differs from the last baseline, `markClean()` makes the current state the baseline (call after load / save). Structural, key-order-insensitive comparison via `stableStringify` (also exported), so a server echo that reorders keys never reads as an edit. |
 
 ---
 

package/dist/components/BaseGroupedChecklist.vue.d.ts

@@ -0,0 +1,26 @@
+import { 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;
+}
+declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    maxHeightClass: string;
+    mono: boolean;
+    allLabel: string;
+    allAriaLabel: string;
+    itemAriaLabel: (item: string) => string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useDirtyState.d.ts

@@ -0,0 +1,24 @@
+import { 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 declare function stableStringify(value: unknown): string;
+/**
+ * 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 declare function useDirtyState(snapshot: () => unknown): {
+    dirty: ComputedRef<boolean>;
+    markClean: () => void;
+};

package/dist/index.d.ts

@@ -44,6 +44,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';
 export { default as BaseDateTimePicker } from './components/BaseDateTimePicker.vue';
 export type { DateTimePickerMode } from './components/BaseDateTimePicker.vue';
@@ -75,6 +76,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';
 export { AlertEnum } from './enums/AlertEnum';
 export { BaseBadgeEnum } from './enums/BaseBadgeEnum';
@@ -98,6 +100,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';
 export { getBaseColor, getBaseColorOf } from './utils/util';
 export { methodBadgeSolid, methodBadgeBright, methodBadgeTinted, statusBadgeSolid, statusBadgeTinted, statusBadgeSoft, } from './utils/httpColors';
 export { rowKeyMissing, rowValueMissing } from './utils/kvRows';

package/dist/types/checklist.d.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[];
+}