mgv-backoffice 1.36.0 → 1.36.2

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.36.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.2",
+  "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/BaseBadge.vue

@@ -1,16 +1,26 @@
 <template>
   <span v-if="hasDefaultSlot" :class="badgeClasses">
-    <slot></slot>
+    <BadgeContent />
   </span>
 </template>
 
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue'
+import { computed, createTextVNode, Text, useSlots } from 'vue'
 import { ColorsEnums } from "../enums/ColorsEnums";
 
 const slots = useSlots()
 const hasDefaultSlot = computed(() => !!slots.default)
 
+// Badge labels are often raw enum names (PROFIT_TARGET, RSI_REVERT); render
+// their underscores as spaces so callers don't have to humanize at every call
+// site. Only plain text nodes are rewritten — element children pass through.
+const BadgeContent = () =>
+  (slots.default?.() ?? []).map((node) =>
+    node.type === Text && typeof node.children === 'string'
+      ? createTextVNode(node.children.replace(/_/g, ' '))
+      : node
+  )
+
 const props = defineProps({
   color: {
     type: String,

package/src/components/BaseBarDistribution.test.ts

@@ -1,51 +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')
-  })
-})
+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

@@ -1,73 +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>
+<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>