mgv-backoffice 1.45.0 → 1.47.0

package/README.md

@@ -774,6 +774,8 @@ epoch/numeric formatters (`fmtDateTime`, `fmtDateShort`, `fmtDateTimeMs`,
 | `fmtPct`       | `(n: number, digits = 2) => string`                             | Percentage with explicit sign, e.g. `"+2.50%"`. |
 | `fmtUsd`       | `(v: number) => string`                                         | Signed USD amount with leading sign, e.g. `"+$5.00"`. |
 | `fmtMoney`     | `(n: number \| string \| null \| undefined, digits = 2, currency = '$') => string` | Money with the minus BEFORE the currency (`"-$2.26"`, never `"$-2.26"`), digit grouping, no `+` on gains; a value rounding to zero reads unsigned; em-dash for missing input (since 1.45.0). |
+| `currencySymbol` | `(code: string \| null \| undefined) => string \| null` | Display symbol for a currency code: `€` EUR, `£` GBP, `$` for USD, USDT, USDC and a missing code; `null` for anything else (BTC, ETH…) so the caller suffixes the code (since 1.47.0). |
+| `fmtCurrencyAmount` | `(n, code, digits = 2) => string` | An amount in its own currency: `"€20.00"`, `"-$1.50"`, `"$25.00 USDT"` (stablecoin ticker kept), `"0.5 BTC"` (plain quantity, up to 8 decimals); em-dash for missing input (since 1.47.0). |
 | `formatJson`   | `(content: string) => string`                                   | Pretty-prints parseable JSON with 2-space indentation; returns anything else verbatim. |
 | `stringifyValue` | `(value: unknown) => string`                                  | Display string for an unknown value: strings pass through, null/undefined → `''`, everything else JSON-serialized (`String()` fallback). |
 
@@ -1782,6 +1784,57 @@ 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
+/>
+```
+
+---
+
+### BaseIdChip
+
+Compact id cell (since 1.47.0): a small uppercase label, the id truncated in a
+`<code>` pill with the full value in its tooltip, a copy button, and an optional
+magnifier button. Built for dense rows that carry several ids side by side.
+
+| Prop            | Type     | Default              | Description |
+| --------------- | -------- | -------------------- | ----------- |
+| `value`         | `string` | **required**         | The id — shown truncated, copied in full. |
+| `label`         | `string` | `''`                 | Uppercase prefix (`"id"`, `"ord"`). |
+| `copyLabel`     | `string` | `"<label> <value>"`  | Noun for the copy button's tooltip / aria-label. |
+| `actionLabel`   | `string` | —                    | Tooltip / aria-label of the magnifier button; the button renders only when set. |
+| `maxWidthClass` | `string` | `'max-w-[90px]'`     | Width cap of the truncated id. |
+
+Emits `action(value)` when the magnifier is clicked.
+
+```vue
+<BaseIdChip label="ord" :value="row.buyOrderId" action-label="Search this order id" @action="search" />
+```
+
+---
+
 ### BaseSearchSelect
 
 Searchable select (combobox): type to filter, pick with the mouse or
@@ -1952,6 +2005,8 @@ import {
   usePolling,
   useLatestRequest,
   isAbortError,
+  useDirtyState,
+  stableStringify,
 } from 'mgv-backoffice'
 import type {
   UseThemeOptions,
@@ -1976,6 +2031,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/components/BaseIdChip.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    /** The id itself — shown truncated, copied in full. */
+    value: string;
+    /** Short uppercase prefix ("id", "ord", "sell"). Omit for no prefix. */
+    label?: string;
+    /** Copy button's tooltip / aria noun; defaults to "<label> <value>". */
+    copyLabel?: string;
+    /** Tooltip / aria-label of the action button; the button only renders when set. */
+    actionLabel?: string;
+    /** Width cap of the truncated id. */
+    maxWidthClass?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    action: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((value: string) => any) | undefined;
+}>, {
+    label: string;
+    maxWidthClass: string;
+    copyLabel: string;
+    actionLabel: 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,8 @@ 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 { default as BaseIdChip } from './components/BaseIdChip.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 +77,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,12 +101,13 @@ 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';
 export type { KeyValueRowLike } from './utils/kvRows';
 export { sanitizeHtml, isSafeHref } from './utils/sanitizeHtml';
-export { fmtNumber, fmtDate, fmtDateTime, fmtDateTimeMs, fmtDateShort, fmtCalendarDate, fmtCalendarDateTime, fmtMsAsSeconds, fmtBytes, fmtPrice, fmtPct, fmtUsd, fmtMoney, fmtDuration, formatJson, stringifyValue, } from './utils/format';
+export { fmtNumber, fmtDate, fmtDateTime, fmtDateTimeMs, fmtDateShort, fmtCalendarDate, fmtCalendarDateTime, fmtMsAsSeconds, fmtBytes, fmtPrice, fmtPct, fmtUsd, fmtMoney, currencySymbol, fmtCurrencyAmount, fmtDuration, formatJson, stringifyValue, } from './utils/format';
 export { isValidAbsoluteUrl, isValidJson, isValidXml, isValidBase64, } from './utils/validate';
 export { buildSpecParams, firstInvalidNumericSpec } from './utils/specForm';
 export { humanizeEnum, humanizeTextVNodes } from './utils/humanize';

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[];
+}