mgv-backoffice 1.25.0 → 1.27.0

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "mgv-backoffice",
-  "version": "1.25.0",
-  "description": "Shared Vue 3 UI component library",
-  "type": "module",
-  "main": "./dist/ui-lib.umd.cjs",
-  "module": "./dist/ui-lib.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/ui-lib.js",
-      "require": "./dist/ui-lib.umd.cjs"
-    },
-    "./dist/style.css": "./dist/ui-lib.css",
-    "./tailwind.safelist": "./tailwind.safelist.js",
-    "./tailwind.safelist.css": "./tailwind.safelist.css"
-  },
-  "files": [
-    "dist",
-    "src",
-    "tailwind.safelist.js",
-    "tailwind.safelist.css"
-  ],
-  "scripts": {
-    "safelist": "node scripts/generate-safelist.mjs",
-    "prebuild": "npm run safelist",
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
-  "peerDependencies": {
-    "@heroicons/vue": "^2.0.0",
-    "vue": "^3.5.0",
-    "vue-router": "^5.0.0"
-  },
-  "devDependencies": {
-    "@heroicons/vue": "^2.2.0",
-    "@tailwindcss/vite": "^4.3.1",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/language-core": "^3.3.5",
-    "@vue/test-utils": "^2.4.11",
-    "jsdom": "^29.1.1",
-    "sass": "^1.101.0",
-    "tailwindcss": "^4.3.1",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.9",
-    "vue": "^3.5.38",
-    "vue-router": "^5.1.0"
-  }
-}
+{
+  "name": "mgv-backoffice",
+  "version": "1.27.0",
+  "description": "Shared Vue 3 UI component library",
+  "type": "module",
+  "main": "./dist/ui-lib.umd.cjs",
+  "module": "./dist/ui-lib.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ui-lib.js",
+      "require": "./dist/ui-lib.umd.cjs"
+    },
+    "./dist/style.css": "./dist/ui-lib.css",
+    "./tailwind.safelist": "./tailwind.safelist.js",
+    "./tailwind.safelist.css": "./tailwind.safelist.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tailwind.safelist.js",
+    "tailwind.safelist.css"
+  ],
+  "scripts": {
+    "safelist": "node scripts/generate-safelist.mjs",
+    "prebuild": "npm run safelist",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "@heroicons/vue": "^2.0.0",
+    "vue": "^3.5.0",
+    "vue-router": "^5.0.0"
+  },
+  "devDependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/vite": "^4.3.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/language-core": "^3.3.5",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^29.1.1",
+    "sass": "^1.101.0",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0"
+  }
+}

package/src/components/BaseCollapsibleSection.vue

@@ -18,11 +18,17 @@
       • toggle — fired when the user clicks the header. The parent
         flips its own collapsed state in response.
   -->
-  <section class="rounded-xl border overflow-hidden transition-colors" :class="t.cardAlt">
+  <!--
+    NOTE: no `overflow-hidden` on the section — it would clip floating
+    menus (BaseDropdown) rendered near the bottom of the body. The child
+    corners are rounded explicitly instead so the card silhouette is
+    unchanged.
+  -->
+  <section class="rounded-xl border transition-colors" :class="t.cardAlt">
     <button
       type="button"
       class="w-full flex items-center justify-between p-4 text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500"
-      :class="headerClasses"
+      :class="[headerClasses, collapsed ? 'rounded-xl' : 'rounded-t-xl']"
       :aria-expanded="!collapsed"
       @click="emit('toggle')"
     >
@@ -50,7 +56,7 @@
     </button>
     <div
       v-show="!collapsed"
-      class="p-6 border-t"
+      class="p-6 border-t rounded-b-xl"
       :class="[t.border, resolvedBodyClass]"
     >
       <slot />

package/src/components/BaseDropdown.vue

@@ -25,7 +25,9 @@
       :aria-expanded="open"
       @click="toggle"
     >
-      <span :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
+      <!-- min-w-0 + truncate so long labels ellipsize inside narrow
+           (fixed-column) triggers instead of wrapping or widening them. -->
+      <span class="min-w-0 truncate" :class="selectedOption ? '' : 'text-slate-400 dark:text-slate-500'">
         {{ selectedOption ? selectedOption.label : placeholder }}
       </span>
       <ChevronDownIcon
@@ -39,7 +41,7 @@
       v-if="open"
       role="listbox"
       :aria-label="ariaLabel || placeholder"
-      class="absolute z-20 mt-1 w-full max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
+      class="absolute z-20 mt-1 w-full min-w-max max-w-xs max-h-60 overflow-auto rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 py-1 shadow-lg focus:outline-none"
     >
       <li
         v-for="opt in options"

package/src/components/BaseStatBreakdown.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseStatBreakdown from './BaseStatBreakdown.vue'
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const items: StatBreakdownItem[] = [
+  { label: 'Alpaca', value: 12.5 },
+  { label: 'Kraken', value: -3 },
+  { label: 'Binance', value: null },
+]
+
+describe('BaseStatBreakdown', () => {
+  it('renders one row per item with label and formatted value', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$' },
+    })
+    const rows = wrapper.findAll('.flex')
+    expect(rows).toHaveLength(3)
+    expect(rows[0].text()).toContain('Alpaca')
+    expect(rows[0].text()).toContain('$12.50')
+  })
+
+  it('renders an em-dash for null values instead of a misleading 0', () => {
+    const wrapper = mount(BaseStatBreakdown, { props: { items } })
+    const rows = wrapper.findAll('.flex')
+    expect(rows[2].text()).toContain('—')
+    expect(rows[2].text()).not.toContain('0.00')
+  })
+
+  it('honours the decimals prop', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'BTC', value: 0.5 }], decimals: 8 },
+    })
+    expect(wrapper.text()).toContain('0.50000000')
+  })
+
+  it('prefixes a plus and colours by sign when signed', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$', signed: true },
+    })
+    const values = wrapper.findAll('.font-mono')
+    expect(values[0].text()).toBe('+$12.50')
+    expect(values[0].classes().join(' ')).toContain('text-emerald-600')
+    expect(values[1].text()).toBe('-$3.00')
+    expect(values[1].classes().join(' ')).toContain('text-red-600')
+    // Null rows stay neutral even in signed mode.
+    expect(values[2].classes().join(' ')).toContain('text-slate-500')
+  })
+
+  it('stays neutral-coloured when signed is off', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'Alpaca', value: 12.5 }] },
+    })
+    expect(wrapper.find('.font-mono').classes().join(' ')).toContain('text-slate-500')
+  })
+})

package/src/components/BaseStatBreakdown.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Compact per-item breakdown meant to sit under a summary/stat card (pairs
+// with EarningsCard). Each item renders on its own line — label left, value
+// right in monospace. A null/undefined value (a source that is unconfigured,
+// unreachable, or has no matching rows) shows a dash rather than a
+// misleading 0. With `signed`, values gain an explicit "+" and are coloured
+// green/red by sign.
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const props = withDefaults(
+  defineProps<{
+    items: StatBreakdownItem[]
+    currency?: string
+    decimals?: number
+    signed?: boolean
+  }>(),
+  { currency: '', decimals: 2, signed: false },
+)
+
+function fmt(v: number | null | undefined): string {
+  if (v === null || v === undefined) return '—'
+  // Sign sits before the currency symbol ("-$3.00", "+$5.00" — same shape
+  // as fmtUsd); the plus only appears in signed mode.
+  const sign = v < 0 ? '-' : props.signed ? '+' : ''
+  return `${sign}${props.currency}${Math.abs(v).toFixed(props.decimals)}`
+}
+
+function color(v: number | null | undefined): string {
+  if (!props.signed || v === null || v === undefined) {
+    return 'text-slate-500 dark:text-slate-400'
+  }
+  return v >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
+}
+</script>
+
+<template>
+  <div class="mt-1.5 space-y-0.5 px-1">
+    <div
+      v-for="item in items"
+      :key="item.label"
+      class="flex items-center justify-between text-[11px]"
+    >
+      <span class="text-slate-400 dark:text-slate-500">{{ item.label }}</span>
+      <span class="font-mono tabular-nums font-medium" :class="color(item.value)">
+        {{ fmt(item.value) }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/index.ts

@@ -41,6 +41,7 @@ export { default as BaseDropdown } from './components/BaseDropdown.vue'
 export { default as BaseSegmentedControl } from './components/BaseSegmentedControl.vue'
 export { default as BaseTable } from './components/BaseTable.vue'
 export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
+export { default as BaseStatBreakdown } from './components/BaseStatBreakdown.vue'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
@@ -77,6 +78,7 @@ export type { SegmentedOption } from './types/segmented'
 export type { DropdownOption } from './types/dropdown'
 export type { TableColumn } from './types/table'
 export type { SpecField, SpecFieldType, SpecFieldValue } from './types/specField'
+export type { StatBreakdownItem } from './types/statBreakdown'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'
@@ -95,6 +97,7 @@ export {
   fmtPrice,
   fmtPct,
   fmtUsd,
+  fmtDuration,
 } from './utils/format'
 export { computePnL } from './utils/pnl'
 export type { PnL, PnLInputs } from './utils/pnl'

package/src/style.css

@@ -1 +1,10 @@
 @import "tailwindcss";
+
+/* Compile `dark:` variants against the `.dark` class that useTheme()/initTheme()
+   toggle on <html> — NOT the OS-level prefers-color-scheme media query
+   (Tailwind v4's default). Both consumers (TradeAutomation, WireMate) switch
+   themes with the class toggle, so media-gated dark rules leak the dark skin
+   into the light theme for users whose OS prefers dark.
+   Use a specificity-bearing selector (:is, not :where) so dark: utilities win
+   over plain base utilities like bg-slate-50 on a cascade tie. */
+@custom-variant dark (&:is(.dark, .dark *));

package/src/types/statBreakdown.ts

@@ -0,0 +1,6 @@
+export interface StatBreakdownItem {
+  /** Row label rendered on the left (e.g. a venue or category name). */
+  label: string
+  /** Numeric value; null/undefined renders as an em-dash rather than 0. */
+  value: number | null | undefined
+}

package/src/utils/format.test.ts

@@ -7,6 +7,7 @@ import {
   fmtPrice,
   fmtPct,
   fmtUsd,
+  fmtDuration,
 } from './format'
 
 const EM_DASH = '—'
@@ -127,3 +128,37 @@ describe('fmtUsd', () => {
     expect(fmtUsd(0)).toBe('+$0.00')
   })
 })
+
+describe('fmtDuration', () => {
+  it('renders an em-dash for null/undefined/non-finite input', () => {
+    expect(fmtDuration(null)).toBe(EM_DASH)
+    expect(fmtDuration(undefined)).toBe(EM_DASH)
+    expect(fmtDuration(NaN)).toBe(EM_DASH)
+    expect(fmtDuration(Infinity)).toBe(EM_DASH)
+  })
+
+  it('drops zero-value leading units', () => {
+    expect(fmtDuration(12 * 60_000)).toBe('12m')
+    expect(fmtDuration((5 * 60 + 12) * 60_000)).toBe('5h 12m')
+    expect(fmtDuration((3 * 1440 + 5 * 60 + 12) * 60_000)).toBe('3d 5h')
+  })
+
+  it('caps the rendered units at maxUnits', () => {
+    const ms = (2 * 1440 + 5 * 60 + 13) * 60_000
+    expect(fmtDuration(ms, 3)).toBe('2d 5h 13m')
+    expect(fmtDuration(ms, 2)).toBe('2d 5h')
+    expect(fmtDuration(ms, 1)).toBe('2d')
+  })
+
+  it('keeps the hours unit when days are present even if hours are zero', () => {
+    expect(fmtDuration(2 * 1440 * 60_000, 3)).toBe('2d 0h 0m')
+  })
+
+  it('clamps negative durations to zero', () => {
+    expect(fmtDuration(-5000)).toBe('0m')
+  })
+
+  it('renders sub-minute durations as 0m', () => {
+    expect(fmtDuration(59_000)).toBe('0m')
+  })
+})

package/src/utils/format.ts

@@ -87,3 +87,22 @@ export function fmtUsd(v: number): string {
   const sign = v < 0 ? '-' : '+'
   return `${sign}$${Math.abs(v).toFixed(2)}`
 }
+
+/**
+ * Format a millisecond duration as compact day/hour/minute units, e.g.
+ * "3d 5h", "5h 12m" or "12m". Zero-value leading units are dropped;
+ * `maxUnits` caps how many units render (2 → "3d 5h", 3 → "3d 5h 12m").
+ * Renders an em-dash for null/undefined/non-finite input.
+ */
+export function fmtDuration(ms: number | null | undefined, maxUnits = 2): string {
+  if (ms === null || ms === undefined || !isFinite(ms)) return EM_DASH
+  const totalMins = Math.floor(Math.max(0, ms) / 60_000)
+  const days = Math.floor(totalMins / 1440)
+  const hours = Math.floor((totalMins % 1440) / 60)
+  const mins = totalMins % 60
+  const parts: string[] = []
+  if (days > 0) parts.push(`${days}d`)
+  if (days > 0 || hours > 0) parts.push(`${hours}h`)
+  parts.push(`${mins}m`)
+  return parts.slice(0, maxUnits).join(' ')
+}