mgv-backoffice 1.34.0 → 1.36.0

package/package.json

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

package/src/components/BaseBarDistribution.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseBarDistribution from './BaseBarDistribution.vue'
+import type { DistributionBar } from '../types/distribution'
+
+const BARS: DistributionBar[] = [
+  { label: '0.5', count: 1 },
+  { label: '1', count: 4 },
+  { label: '2', count: 2 },
+]
+
+describe('BaseBarDistribution', () => {
+  it('renders one bar per entry with its count and label', () => {
+    const wrap = mount(BaseBarDistribution, { props: { bars: BARS } })
+    const bars = wrap.findAll('div[title]')
+    expect(bars).toHaveLength(3)
+    expect(wrap.text()).toContain('4')
+    expect(wrap.text()).toContain('0.5')
+  })
+
+  it('scales bar heights against the tallest count, with a 3px floor', () => {
+    const wrap = mount(BaseBarDistribution, {
+      props: { bars: [...BARS, { label: '9', count: 0 }], maxBarHeight: 56 },
+    })
+    const heights = wrap
+      .findAll('.rounded-t')
+      .map((el) => el.attributes('style'))
+    // count 4 → full height; count 2 → half; count 0 → 3px floor.
+    expect(heights[1]).toContain('height: 56px')
+    expect(heights[2]).toContain('height: 28px')
+    expect(heights[3]).toContain('height: 3px')
+  })
+
+  it('builds singular/plural tooltips with the prefix and noun', () => {
+    const wrap = mount(BaseBarDistribution, {
+      props: { bars: BARS, titlePrefix: 'Take profit', countNoun: 'variant' },
+    })
+    const titles = wrap
+      .findAll('div[title]')
+      .map((el) => el.attributes('title'))
+    expect(titles[0]).toBe('Take profit 0.5: 1 variant')
+    expect(titles[1]).toBe('Take profit 1: 4 variants')
+  })
+
+  it('exposes the aria label on the chart container', () => {
+    const wrap = mount(BaseBarDistribution, {
+      props: { bars: BARS, ariaLabel: 'Distribution of X' },
+    })
+    expect(wrap.get('[role="img"]').attributes('aria-label')).toBe('Distribution of X')
+  })
+})

package/src/components/BaseBarDistribution.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Compact value-distribution chart: one thin rounded bar per distinct value,
+// count labelled on top and the value underneath — scrolls sideways when
+// there are many bars. Pure Tailwind, no chart library. Extracted from
+// TradeAutomation's variant-stats modal, where it summarises how often each
+// parameter value occurs across generated strategy variants.
+import { computed } from 'vue'
+import type { DistributionBar } from '../types/distribution'
+
+const props = withDefaults(
+  defineProps<{
+    /** Bars in display order (callers sort ascending for numeric values). */
+    bars: DistributionBar[]
+    /** Accessible description of what the chart shows. */
+    ariaLabel?: string
+    /** Noun for each bar's tooltip count, e.g. "variant" → "3 variants". */
+    countNoun?: string
+    /** Tooltip prefix before the value, e.g. the field name. */
+    titlePrefix?: string
+    /** Height of the tallest bar, in px. */
+    maxBarHeight?: number
+    /** Tailwind classes for the bar fill. */
+    barClass?: string
+  }>(),
+  {
+    ariaLabel: 'Value distribution',
+    countNoun: 'item',
+    titlePrefix: '',
+    maxBarHeight: 56,
+    barClass: 'bg-emerald-500/80 dark:bg-emerald-400/80',
+  },
+)
+
+const maxCount = computed(() => Math.max(1, ...props.bars.map((b) => b.count)))
+
+const barHeight = (b: DistributionBar): number =>
+  Math.max(3, Math.round((b.count / maxCount.value) * props.maxBarHeight))
+
+const barTitle = (b: DistributionBar): string =>
+  `${props.titlePrefix ? `${props.titlePrefix} ` : ''}${b.label}: ${b.count} ${props.countNoun}${
+    b.count === 1 ? '' : 's'
+  }`
+</script>
+
+<template>
+  <div
+    class="flex items-end gap-1.5 overflow-x-auto pb-1"
+    role="img"
+    :aria-label="ariaLabel"
+  >
+    <div
+      v-for="b in bars"
+      :key="b.label"
+      class="flex min-w-7 flex-1 flex-col items-center gap-0.5"
+      :title="barTitle(b)"
+    >
+      <span class="text-[10px] tabular-nums text-slate-400 dark:text-slate-500">
+        {{ b.count }}
+      </span>
+      <div
+        class="w-full max-w-8 rounded-t"
+        :class="barClass"
+        :style="{ height: `${barHeight(b)}px` }"
+      />
+      <span
+        class="max-w-full truncate font-mono text-[10px] text-slate-500 dark:text-slate-400"
+        :title="b.label"
+      >
+        {{ b.label }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/BasePageHeader.vue

@@ -6,7 +6,11 @@
     Slots:
       • icon    — the page-specific Heroicon. Receives an `iconClass`
         slot prop carrying the theme-aware text colour, so callers can
-        bind `:class="iconClass"` on their icon component.
+        bind `:class="iconClass"` on their icon component. The badge
+        square only renders when this slot is filled, so icon-less apps
+        get a plain title/subtitle header.
+      • subtitle — rich subtitle content (links, emphasis); overrides
+        the `subtitle` prop.
       • actions — refresh / destructive buttons rendered on the right.
 
     Props:
@@ -16,18 +20,27 @@
         ('emerald' | 'sky' | 'red' | 'amber'). Defaults to 'emerald'.
       • maxWidthClass — Tailwind max-w utility constraining the header
         width so sibling views can share a footprint. Defaults to
-        'max-w-4xl'.
+        'max-w-4xl'; pass '' to skip the width wrapper entirely (the
+        header then spans whatever container it sits in).
+      • align — vertical alignment of the title block vs the actions:
+        'center' (default) or 'end' (actions sit on the title baseline).
+      • marginClass — space under the header. Defaults to 'mb-8'; pass
+        '' when the parent already manages vertical rhythm (space-y-*).
   -->
-  <div :class="['mx-auto px-4 sm:px-6', maxWidthClass]">
+  <header :class="maxWidthClass ? ['mx-auto px-4 sm:px-6', maxWidthClass] : undefined">
     <!--
       flex-wrap + gap so a long title and the action buttons reflow onto
       separate rows on narrow (mobile) viewports instead of the actions
       overflowing off the right edge of the screen. min-w-0 on the title
       group lets a long title truncate rather than shoving the actions out.
     -->
-    <div class="flex flex-wrap items-center justify-between gap-3 mb-8">
+    <div
+      class="flex flex-wrap justify-between gap-3"
+      :class="[align === 'end' ? 'items-end' : 'items-center', marginClass]"
+    >
       <div class="flex items-center gap-3 min-w-0">
         <div
+          v-if="$slots.icon"
           class="w-10 h-10 rounded-lg flex items-center justify-center"
           :class="badgeBgClass"
         >
@@ -37,8 +50,8 @@
           <h1 class="text-2xl font-bold" :class="t.primaryTextSoft">
             {{ title }}
           </h1>
-          <p v-if="subtitle" class="text-sm" :class="t.dimTextAlt">
-            {{ subtitle }}
+          <p v-if="subtitle || $slots.subtitle" class="text-sm" :class="t.dimTextAlt">
+            <slot name="subtitle">{{ subtitle }}</slot>
           </p>
         </div>
       </div>
@@ -46,7 +59,7 @@
         <slot name="actions" />
       </div>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">
@@ -62,11 +75,15 @@ const props = withDefaults(
     subtitle?: string
     iconColor?: IconColor
     maxWidthClass?: string
+    align?: 'center' | 'end'
+    marginClass?: string
   }>(),
   {
     subtitle: '',
     iconColor: 'emerald',
     maxWidthClass: 'max-w-4xl',
+    align: 'center',
+    marginClass: 'mb-8',
   },
 )
 

package/src/components/BasePillPickerModal.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BasePillPickerModal from './BasePillPickerModal.vue'
+import type { PillPickerItem } from '../types/pillPicker'
+
+const items: PillPickerItem[] = [
+  { id: 'STOCK:AAPL', label: 'AAPL', group: 'STOCK' },
+  { id: 'STOCK:MSFT', label: 'MSFT', group: 'STOCK', title: 'Microsoft' },
+  { id: 'CRYPTO:BTC/USD', label: 'BTC/USD', group: 'CRYPTO' },
+]
+
+const groups = [
+  { value: 'STOCK', label: 'Stock' },
+  { value: 'CRYPTO', label: 'Crypto' },
+]
+
+function mountPicker(props: Record<string, unknown> = {}) {
+  return mount(BasePillPickerModal, {
+    props: { title: 'Pick one', items, ...props },
+    global: { stubs: { teleport: true } },
+  })
+}
+
+// Pills are the buttons inside the flex-wrap grid — not the segmented
+// control's buttons and not the footer Close.
+function pillLabels(wrapper: ReturnType<typeof mountPicker>): string[] {
+  return wrapper
+    .findAll('.flex.flex-wrap.gap-2 > button')
+    .map((b) => b.text())
+}
+
+describe('BasePillPickerModal', () => {
+  it('renders one pill per item and emits pick with the clicked item', async () => {
+    const wrapper = mountPicker()
+    expect(pillLabels(wrapper)).toEqual(['AAPL', 'MSFT', 'BTC/USD'])
+    await wrapper.findAll('.flex.flex-wrap.gap-2 > button')[1].trigger('click')
+    expect(wrapper.emitted('pick')).toEqual([[items[1]]])
+  })
+
+  it('narrows by free text, case-insensitively, and shows the no-match message', async () => {
+    const wrapper = mountPicker({ noMatchMessage: 'nothing here' })
+    await wrapper.find('input').setValue('btc')
+    expect(pillLabels(wrapper)).toEqual(['BTC/USD'])
+    await wrapper.find('input').setValue('zzz')
+    expect(wrapper.text()).toContain('nothing here')
+  })
+
+  it('renders the group toggle with All prepended and narrows by group', async () => {
+    const wrapper = mountPicker({ groups })
+    // Re-query before each click — the grid re-render replaces the buttons,
+    // so a wrapper captured before a click goes stale.
+    const seg = () => wrapper.findAll('[role="group"] button')
+    expect(seg().map((b) => b.text())).toEqual(['All', 'Stock', 'Crypto'])
+    await seg()[2].trigger('click')
+    expect(pillLabels(wrapper)).toEqual(['BTC/USD'])
+    await seg()[0].trigger('click')
+    expect(pillLabels(wrapper)).toEqual(['AAPL', 'MSFT', 'BTC/USD'])
+  })
+
+  it('hides the group toggle when no groups are passed', () => {
+    const wrapper = mountPicker()
+    expect(wrapper.find('[role="group"]').exists()).toBe(false)
+  })
+
+  it('shows the empty message instead of the filter row when there are no items', () => {
+    const wrapper = mountPicker({ items: [], emptyMessage: 'nothing configured' })
+    expect(wrapper.text()).toContain('nothing configured')
+    expect(wrapper.find('input').exists()).toBe(false)
+  })
+
+  it('applies the mono font to the input and pills only when asked', () => {
+    const mono = mountPicker({ mono: true })
+    expect(mono.find('input').classes()).toContain('font-mono')
+    expect(mono.findAll('.flex.flex-wrap.gap-2 > button')[0].classes()).toContain('font-mono')
+
+    const plain = mountPicker()
+    expect(plain.find('input').classes()).not.toContain('font-mono')
+  })
+
+  it('forwards an item title to the pill tooltip', () => {
+    const wrapper = mountPicker()
+    expect(
+      wrapper.findAll('.flex.flex-wrap.gap-2 > button')[1].attributes('title'),
+    ).toBe('Microsoft')
+  })
+
+  it('emits close from the footer button', async () => {
+    const wrapper = mountPicker({ closeText: 'Dismiss' })
+    const buttons = wrapper.findAll('button')
+    const closeBtn = buttons[buttons.length - 1]
+    expect(closeBtn.text()).toBe('Dismiss')
+    await closeBtn.trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+})

package/src/components/BaseToolbarButton.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseToolbarButton from './BaseToolbarButton.vue'
+
+describe('BaseToolbarButton', () => {
+  it('renders the neutral pill shape by default', () => {
+    const wrapper = mount(BaseToolbarButton, { props: { label: 'Refresh' } })
+    const cls = wrapper.find('button').classes()
+    expect(cls).toContain('rounded-lg')
+    expect(cls).toContain('py-2')
+    expect(cls).toContain('font-medium')
+    expect(cls).toContain('disabled:opacity-50')
+    expect(wrapper.text()).toBe('Refresh')
+  })
+
+  it('keeps the danger variant on the pill shape with the red palette', () => {
+    const wrapper = mount(BaseToolbarButton, {
+      props: { label: 'Delete', variant: 'danger' },
+    })
+    const cls = wrapper.find('button').classes()
+    expect(cls).toContain('rounded-lg')
+    expect(cls).toContain('bg-red-600')
+  })
+
+  it('renders the ghost variant as the slate h-9 rounded-md outline button', () => {
+    const wrapper = mount(BaseToolbarButton, {
+      props: { label: 'Close', variant: 'ghost' },
+    })
+    const cls = wrapper.find('button').classes()
+    expect(cls).toContain('h-9')
+    expect(cls).toContain('rounded-md')
+    expect(cls).toContain('px-4')
+    expect(cls).toContain('font-semibold')
+    expect(cls).toContain('border-slate-300')
+    expect(cls).toContain('disabled:opacity-40')
+    expect(cls).not.toContain('rounded-lg')
+    expect(cls).not.toContain('py-2')
+  })
+
+  it('emits click and honours disabled', async () => {
+    const wrapper = mount(BaseToolbarButton, { props: { label: 'Go' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('click')).toHaveLength(1)
+
+    const disabled = mount(BaseToolbarButton, { props: { label: 'Go', disabled: true } })
+    expect(disabled.find('button').attributes('disabled')).toBeDefined()
+  })
+})

package/src/components/BaseToolbarButton.vue

@@ -11,7 +11,8 @@
     Props:
       • label    — button text (rendered in a <span>). Optional so an
         icon-only toolbar button is possible.
-      • variant  — 'neutral' (default grey) or 'danger' (solid red).
+      • variant  — 'neutral' (default grey), 'danger' (solid red) or
+        'ghost' (slate outline — TradeAutomation's toolbar/footer idiom).
       • disabled — greys out + blocks the click.
       • title    — native tooltip / accessibility text.
       • type     — native button type. Defaults to 'button' so the
@@ -21,7 +22,7 @@
     :type="type"
     :disabled="disabled"
     :title="title"
-    class="inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+    class="inline-flex shrink-0 items-center gap-2 text-sm border transition-colors cursor-pointer disabled:cursor-not-allowed whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
     :class="variantClass"
     @click="$emit('click', $event)"
   >
@@ -34,7 +35,7 @@
 import { computed } from 'vue'
 import { useTheme } from '../composables/useTheme'
 
-type ToolbarVariant = 'neutral' | 'danger'
+type ToolbarVariant = 'neutral' | 'danger' | 'ghost'
 
 const props = withDefaults(
   defineProps<{
@@ -59,9 +60,19 @@ defineEmits<{
 
 const { isDark } = useTheme()
 
-// Resolves the variant + theme into the colour classes. The danger
+// Resolves the variant + theme into shape and colour classes. The danger
 // style is normalised here so every destructive toolbar button reads
-// identically (red-500 hover in dark, red-700 hover in light).
+// identically (red-500 hover in dark, red-700 hover in light). Shape lives
+// per-variant because 'ghost' — the slate outline button extracted from
+// TradeAutomation's toolbars and modal footers — is a fixed-height
+// rounded-md button, not the neutral/danger pill; it themes via dark:
+// utilities so it renders the same markup in both themes.
+const SHAPE: Record<ToolbarVariant, string> = {
+  neutral: 'px-3 py-2 rounded-lg font-medium disabled:opacity-50',
+  danger: 'px-3 py-2 rounded-lg font-medium disabled:opacity-50',
+  ghost: 'h-9 px-4 rounded-md font-semibold disabled:opacity-40 disabled:hover:bg-slate-50 dark:disabled:hover:bg-slate-900',
+}
+
 const variantClass = computed(() => {
   const palette: Record<ToolbarVariant, { dark: string; light: string }> = {
     neutral: {
@@ -72,8 +83,12 @@ const variantClass = computed(() => {
       dark: 'bg-red-600 text-white border-red-600 hover:bg-red-500',
       light: 'bg-red-600 text-white border-red-600 hover:bg-red-700',
     },
+    ghost: {
+      dark: 'border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800',
+      light: 'border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800',
+    },
   }
   const entry = palette[props.variant]
-  return isDark.value ? entry.dark : entry.light
+  return [SHAPE[props.variant], isDark.value ? entry.dark : entry.light]
 })
 </script>

package/src/composables/usePolling.ts

@@ -35,6 +35,10 @@ export function usePolling(
 
   let timer: ReturnType<typeof setInterval> | null = null
   const active = ref(false)
+  // True only when the visibility handler paused an ACTIVE loop. A loop the
+  // caller stopped explicitly (stop(), e.g. an auto-refresh toggle) must stay
+  // stopped across hide/show cycles instead of being silently restarted.
+  let suspendedByVisibility = false
 
   function startTimer() {
     if (timer !== null || intervalMs === null) return
@@ -49,6 +53,7 @@ export function usePolling(
   }
 
   function start() {
+    suspendedByVisibility = false
     if (active.value) return
     active.value = true
     if (immediate) void fn()
@@ -56,19 +61,26 @@ export function usePolling(
   }
 
   function stop() {
+    suspendedByVisibility = false
     active.value = false
     stopTimer()
   }
 
   function onVisibilityChange() {
     if (document.visibilityState === 'visible') {
-      // Refresh right away so stale data doesn't linger for a full
-      // interval after the user returns, then re-arm the timer.
+      // Only resume a loop THIS handler paused — a caller-stopped loop
+      // stays stopped. Refresh right away so stale data doesn't linger
+      // for a full interval after the user returns, then re-arm the timer.
+      if (!suspendedByVisibility) return
+      suspendedByVisibility = false
       active.value = true
       void fn()
       startTimer()
     } else {
-      stop()
+      if (!active.value) return
+      active.value = false
+      stopTimer()
+      suspendedByVisibility = true
     }
   }
 

package/src/index.ts

@@ -49,6 +49,8 @@ export { default as BaseSpecFields } from './components/BaseSpecFields.vue'
 export { default as BaseStatBreakdown } from './components/BaseStatBreakdown.vue'
 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 type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
 // Composables
@@ -92,6 +94,8 @@ 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'
+export type { PillPickerItem } from './types/pillPicker'
+export type { DistributionBar } from './types/distribution'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'

package/src/types/distribution.ts

@@ -0,0 +1,7 @@
+/** One bar of a BaseBarDistribution chart. */
+export interface DistributionBar {
+  /** Value rendered under the bar (already formatted for display). */
+  label: string
+  /** Occurrences of this value — drives the bar height. */
+  count: number
+}

package/src/types/pillPicker.ts

@@ -0,0 +1,14 @@
+/**
+ * One clickable pill in a BasePillPickerModal.
+ *
+ * `id` must be unique (it keys the pill and identifies the pick),
+ * `label` is what the pill shows and what the free-text filter matches,
+ * `group` assigns the pill to one of the modal's segmented-filter groups,
+ * `title` becomes the pill's tooltip.
+ */
+export interface PillPickerItem {
+  id: string
+  label: string
+  group?: string
+  title?: string
+}