mgv-backoffice 1.35.0 → 1.36.1

package/dist/utils/specForm.d.ts

@@ -15,6 +15,6 @@ export declare function buildSpecParams(specs: readonly SpecField[] | undefined,
  * '' under number coercion), or null when every numeric field holds a number.
  * A spec whose `default` is null is OPTIONAL: blank means "knob disabled" and
  * must pass; a non-blank value on an optional field is still validated as a
- * number.
+ * number. Integer specs additionally reject fractional values.
  */
 export declare function firstInvalidNumericSpec(specs: readonly SpecField[] | undefined, params: Record<string, SpecFieldValue>): string | null;

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "mgv-backoffice",
-  "version": "1.35.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.36.1",
+  "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/BaseAlert.vue

@@ -1,104 +1,104 @@
-<template>
-  <!--
-    Inline notice panel (error / warning / success / info).
-
-    v2 (1.27.0): rewritten from the legacy dynamic-class version —
-      • theme-aware via the shared `isDark` ref (same pattern as the other
-        extracted components; no runtime-composed class names, so every
-        class survives Tailwind's static scan)
-      • optional default slot for body content below the title
-      • `compact` variant for slim in-form warnings (text-xs, small icon)
-    Backward compatible: `<BaseAlert title="..." :color="AlertEnum.X" />`
-    renders the same single-line alert as before, mb-4 included.
-  -->
-  <div
-    role="alert"
-    class="flex gap-3 mb-4 rounded-lg border text-sm transition-colors"
-    :class="[compact ? 'items-start px-3 py-2 text-xs' : 'items-start p-4', palette]"
-  >
-    <component
-      :is="iconComponent"
-      class="shrink-0"
-      :class="[compact ? 'w-4 h-4 mt-px' : 'w-5 h-5 mt-0.5', iconColorClass]"
-      aria-hidden="true"
-    />
-    <div class="min-w-0 flex-1">
-      <p v-if="title" class="font-medium">{{ title }}</p>
-      <!-- Body — caller-styled free-form content under the title. -->
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import {
-  CheckCircleIcon,
-  ExclamationCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-} from '@heroicons/vue/24/outline'
-import { AlertEnum } from '../enums/AlertEnum'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-interface Props {
-  /** Bold headline. Optional when the slot carries the whole message. */
-  title?: string
-  /** Alert mode — drives palette and icon. Defaults to ERROR. */
-  color?: AlertEnum
-  /** Slim variant for in-form warnings: text-xs, smaller icon/padding. */
-  compact?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: '',
-  color: AlertEnum.ERROR,
-  compact: false,
-})
-
-const { isDark } = useTheme()
-
-// Literal palette table so Tailwind's scanner sees every class.
-const PALETTES: Record<AlertEnum, { light: string; dark: string }> = {
-  [AlertEnum.ERROR]: {
-    light: 'bg-red-50 border-red-200 text-red-700',
-    dark: 'bg-red-500/10 border-red-500/30 text-red-300',
-  },
-  [AlertEnum.WARNING]: {
-    light: 'bg-amber-50 border-amber-200 text-amber-700',
-    dark: 'bg-amber-500/10 border-amber-500/30 text-amber-300',
-  },
-  [AlertEnum.SUCCESS]: {
-    light: 'bg-emerald-50 border-emerald-200 text-emerald-700',
-    dark: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-300',
-  },
-  [AlertEnum.INFO]: {
-    light: 'bg-sky-50 border-sky-200 text-sky-700',
-    dark: 'bg-sky-500/10 border-sky-500/30 text-sky-300',
-  },
-}
-
-const palette = computed(() =>
-  isDark.value ? PALETTES[props.color].dark : PALETTES[props.color].light,
-)
-
-// Icon + tint follow the alert mode so an error doesn't render with a
-// neutral info glyph.
-const iconComponent = computed(() => {
-  switch (props.color) {
-    case AlertEnum.SUCCESS: return CheckCircleIcon
-    case AlertEnum.WARNING: return ExclamationTriangleIcon
-    case AlertEnum.INFO: return InformationCircleIcon
-    default: return ExclamationCircleIcon
-  }
-})
-
-const iconColorClass = computed(() => {
-  switch (props.color) {
-    case AlertEnum.SUCCESS: return 'text-emerald-500'
-    case AlertEnum.WARNING: return 'text-amber-500'
-    case AlertEnum.INFO: return 'text-sky-500'
-    default: return 'text-red-500'
-  }
-})
-</script>
+<template>
+  <!--
+    Inline notice panel (error / warning / success / info).
+
+    v2 (1.27.0): rewritten from the legacy dynamic-class version —
+      • theme-aware via the shared `isDark` ref (same pattern as the other
+        extracted components; no runtime-composed class names, so every
+        class survives Tailwind's static scan)
+      • optional default slot for body content below the title
+      • `compact` variant for slim in-form warnings (text-xs, small icon)
+    Backward compatible: `<BaseAlert title="..." :color="AlertEnum.X" />`
+    renders the same single-line alert as before, mb-4 included.
+  -->
+  <div
+    role="alert"
+    class="flex gap-3 mb-4 rounded-lg border text-sm transition-colors"
+    :class="[compact ? 'items-start px-3 py-2 text-xs' : 'items-start p-4', palette]"
+  >
+    <component
+      :is="iconComponent"
+      class="shrink-0"
+      :class="[compact ? 'w-4 h-4 mt-px' : 'w-5 h-5 mt-0.5', iconColorClass]"
+      aria-hidden="true"
+    />
+    <div class="min-w-0 flex-1">
+      <p v-if="title" class="font-medium">{{ title }}</p>
+      <!-- Body — caller-styled free-form content under the title. -->
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from '@heroicons/vue/24/outline'
+import { AlertEnum } from '../enums/AlertEnum'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** Bold headline. Optional when the slot carries the whole message. */
+  title?: string
+  /** Alert mode — drives palette and icon. Defaults to ERROR. */
+  color?: AlertEnum
+  /** Slim variant for in-form warnings: text-xs, smaller icon/padding. */
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  color: AlertEnum.ERROR,
+  compact: false,
+})
+
+const { isDark } = useTheme()
+
+// Literal palette table so Tailwind's scanner sees every class.
+const PALETTES: Record<AlertEnum, { light: string; dark: string }> = {
+  [AlertEnum.ERROR]: {
+    light: 'bg-red-50 border-red-200 text-red-700',
+    dark: 'bg-red-500/10 border-red-500/30 text-red-300',
+  },
+  [AlertEnum.WARNING]: {
+    light: 'bg-amber-50 border-amber-200 text-amber-700',
+    dark: 'bg-amber-500/10 border-amber-500/30 text-amber-300',
+  },
+  [AlertEnum.SUCCESS]: {
+    light: 'bg-emerald-50 border-emerald-200 text-emerald-700',
+    dark: 'bg-emerald-500/10 border-emerald-500/30 text-emerald-300',
+  },
+  [AlertEnum.INFO]: {
+    light: 'bg-sky-50 border-sky-200 text-sky-700',
+    dark: 'bg-sky-500/10 border-sky-500/30 text-sky-300',
+  },
+}
+
+const palette = computed(() =>
+  isDark.value ? PALETTES[props.color].dark : PALETTES[props.color].light,
+)
+
+// Icon + tint follow the alert mode so an error doesn't render with a
+// neutral info glyph.
+const iconComponent = computed(() => {
+  switch (props.color) {
+    case AlertEnum.SUCCESS: return CheckCircleIcon
+    case AlertEnum.WARNING: return ExclamationTriangleIcon
+    case AlertEnum.INFO: return InformationCircleIcon
+    default: return ExclamationCircleIcon
+  }
+})
+
+const iconColorClass = computed(() => {
+  switch (props.color) {
+    case AlertEnum.SUCCESS: return 'text-emerald-500'
+    case AlertEnum.WARNING: return 'text-amber-500'
+    case AlertEnum.INFO: return 'text-sky-500'
+    default: return 'text-red-500'
+  }
+})
+</script>

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/BaseChipButton.vue

@@ -1,42 +1,42 @@
-<template>
-  <!--
-    Small tinted "chip" action button — the compact emerald "+ Add" pill
-    used above repeatable form rows (extracted from WireMate's CreateMock,
-    where the identical class string appeared seven times).
-
-    Label comes from the default slot so callers can mix text and icons.
-  -->
-  <button
-    type="button"
-    :disabled="disabled"
-    class="inline-flex items-center gap-1 font-medium rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-    :class="[
-      size === 'xs' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1',
-      isDark
-        ? 'text-emerald-300 border-emerald-700 bg-emerald-900/30 hover:bg-emerald-800/50'
-        : 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:bg-emerald-100',
-    ]"
-    @click="emit('click')"
-  >
-    <slot />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { useTheme } from '../composables/useTheme'
-
-interface Props {
-  /** 'sm' = px-2.5 py-1 (default); 'xs' = px-2 py-0.5 for tight corners. */
-  size?: 'xs' | 'sm'
-  disabled?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 'sm',
-  disabled: false,
-})
-
-const emit = defineEmits<{ click: [] }>()
-
-const { isDark } = useTheme()
-</script>
+<template>
+  <!--
+    Small tinted "chip" action button — the compact emerald "+ Add" pill
+    used above repeatable form rows (extracted from WireMate's CreateMock,
+    where the identical class string appeared seven times).
+
+    Label comes from the default slot so callers can mix text and icons.
+  -->
+  <button
+    type="button"
+    :disabled="disabled"
+    class="inline-flex items-center gap-1 font-medium rounded-md border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+    :class="[
+      size === 'xs' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1',
+      isDark
+        ? 'text-emerald-300 border-emerald-700 bg-emerald-900/30 hover:bg-emerald-800/50'
+        : 'text-emerald-700 border-emerald-200 bg-emerald-50 hover:bg-emerald-100',
+    ]"
+    @click="emit('click')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  /** 'sm' = px-2.5 py-1 (default); 'xs' = px-2 py-0.5 for tight corners. */
+  size?: 'xs' | 'sm'
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  disabled: false,
+})
+
+const emit = defineEmits<{ click: [] }>()
+
+const { isDark } = useTheme()
+</script>