mgv-backoffice 1.34.0 → 1.35.0

package/package.json

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

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/index.ts

@@ -49,6 +49,7 @@ 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 type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
 // Composables
@@ -92,6 +93,7 @@ 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'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'

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
+}