mgv-backoffice 1.46.0 → 1.47.0

package/dist/utils/format.d.ts

@@ -53,6 +53,21 @@ export declare function fmtUsd(v: number): string;
  * strings so BigDecimal-as-string payloads pass through.
  */
 export declare function fmtMoney(n: number | string | null | undefined, digits?: number, currency?: string): string;
+/**
+ * Display symbol for an ISO / ticker currency code: "€" for EUR, "£" for
+ * GBP, "$" for USD and the USD stablecoins — and for a missing code, so
+ * rows with no currency keep reading as dollars. Any other code (BTC,
+ * ETH, …) has no symbol and returns null; callers suffix the code instead.
+ */
+export declare function currencySymbol(code: string | null | undefined): string | null;
+/**
+ * Format an amount in its own currency: fiat with a symbol goes through
+ * fmtMoney ("€20.00", "-$1.50"), a USD stablecoin keeps its ticker after
+ * the dollar figure ("$25.00 USDT") so it isn't mistaken for cash, and any
+ * other asset prints as a plain quantity with its code ("0.5 BTC", up to 8
+ * decimals). Em-dash for missing / non-finite amounts, like fmtMoney.
+ */
+export declare function fmtCurrencyAmount(n: number | string | null | undefined, code: string | null | undefined, digits?: number): string;
 /**
  * Format an ISO date string / epoch as a "Mon D, YYYY" calendar label
  * (en-US, e.g. "Jan 5, 2026"). Falls back to the raw value on parse

package/package.json

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

package/src/components/BaseIdChip.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseIdChip from './BaseIdChip.vue'
+
+describe('BaseIdChip', () => {
+  it('shows the label and the full id in the tooltip', () => {
+    const w = mount(BaseIdChip, { props: { label: 'ord', value: 'abc-123-def' } })
+    expect(w.text()).toContain('ord')
+    expect(w.get('code').text()).toBe('abc-123-def')
+    expect(w.get('code').attributes('title')).toBe('abc-123-def')
+  })
+
+  it('labels the copy button from label + value, or copyLabel when given', () => {
+    const plain = mount(BaseIdChip, { props: { label: 'id', value: 'x1' } })
+    expect(plain.get('button[aria-label="Copy id x1"]').exists()).toBe(true)
+    const custom = mount(BaseIdChip, { props: { label: 'id', value: 'x1', copyLabel: 'tx id' } })
+    expect(custom.get('button[aria-label="Copy tx id"]').exists()).toBe(true)
+  })
+
+  it('renders the action button only with actionLabel, emitting the value', async () => {
+    expect(mount(BaseIdChip, { props: { value: 'x1' } }).findAll('button')).toHaveLength(1)
+    const w = mount(BaseIdChip, { props: { value: 'x1', actionLabel: 'Search this id' } })
+    await w.get('button[aria-label="Search this id"]').trigger('click')
+    expect(w.emitted('action')).toEqual([['x1']])
+  })
+})

package/src/components/BaseIdChip.vue

@@ -0,0 +1,51 @@
+<template>
+  <!--
+    Compact id cell: a small uppercase label, the id truncated in a <code>
+    pill (full value in the tooltip), a copy button, and — when
+    `actionLabel` is set — a magnifier button that emits `action` (e.g.
+    "search the log for this id"). Built for dense rows that carry several
+    ids side by side (transaction / buy-order / sell-order).
+  -->
+  <div class="inline-flex items-center gap-1 font-mono text-[11px]">
+    <span v-if="label" class="text-slate-500 dark:text-slate-400 uppercase tracking-wide">{{ label }}</span>
+    <code
+      class="truncate rounded bg-slate-100 px-1 text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+      :class="maxWidthClass"
+      :title="value"
+    >{{ value }}</code>
+    <BaseCopyButton :text="value" :label="copyLabel ?? `${label} ${value}`.trim()" icon-class="w-3.5 h-3.5" />
+    <button
+      v-if="actionLabel"
+      type="button"
+      :title="actionLabel"
+      :aria-label="actionLabel"
+      class="rounded px-0.5 text-slate-400 hover:bg-slate-100 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 dark:hover:bg-slate-800 dark:hover:text-emerald-400"
+      @click="emit('action', value)"
+    >
+      <MagnifyingGlassIcon class="h-3.5 w-3.5" aria-hidden="true" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
+import BaseCopyButton from './BaseCopyButton.vue'
+
+withDefaults(
+  defineProps<{
+    /** 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
+  }>(),
+  { label: '', copyLabel: undefined, actionLabel: undefined, maxWidthClass: 'max-w-[90px]' },
+)
+
+const emit = defineEmits<{ action: [value: string] }>()
+</script>

package/src/index.ts

@@ -52,6 +52,7 @@ export { default as BaseCredentialsForm } from './components/BaseCredentialsForm
 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'
 
 // Components — third-party wrappers
@@ -144,6 +145,8 @@ export {
   fmtPct,
   fmtUsd,
   fmtMoney,
+  currencySymbol,
+  fmtCurrencyAmount,
   fmtDuration,
   formatJson,
   stringifyValue,