mgv-backoffice 1.41.0 → 1.42.0

package/dist/utils/humanize.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from 'vue';
+/** Raw enum names (BLUE_SKY, PROFIT_TARGET) → display text (BLUE SKY). */
+export declare function humanizeEnum(value: string | null | undefined): string;
+/**
+ * Rewrites underscores to spaces in slot text so callers can pass raw enum
+ * names. Plain text nodes are rewritten and fragments (v-for / v-if) are
+ * walked; elements pass through untouched unless their tag is in `tags`, in
+ * which case their string children are rewritten too (e.g. `<option>`).
+ */
+export declare function humanizeTextVNodes(nodes: VNode[], tags?: readonly string[]): VNode[];

package/package.json

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

package/src/components/BaseBadge.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, createTextVNode, Text, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 import { ColorsEnums } from "../enums/ColorsEnums";
+import { humanizeTextVNodes } from '../utils/humanize'
 
 const slots = useSlots()
 const hasDefaultSlot = computed(() => !!slots.default)
@@ -14,12 +15,7 @@ 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 BadgeContent = () => humanizeTextVNodes(slots.default?.() ?? [])
 
 const props = defineProps({
   color: {

package/src/components/BaseSelect.test.ts

@@ -35,3 +35,23 @@ describe('BaseSelect', () => {
     expect(wrapper.findAll('option').map((o) => o.text())).toEqual(['A', 'B'])
   })
 })
+
+describe('BaseSelect humanize', () => {
+  const enumSlots = {
+    default: '<option value="BLUE_SKY">BLUE_SKY</option><option v-for="o in [\'TICK_TOCK\']" :key="o" :value="o">{{ o }}</option>',
+  }
+
+  it('shows underscores as spaces but keeps raw option values', async () => {
+    const wrapper = mount(BaseSelect, { slots: enumSlots })
+    const options = wrapper.findAll('option')
+    expect(options.map((o) => o.text())).toEqual(['BLUE SKY', 'TICK TOCK'])
+    expect(options.map((o) => o.element.value)).toEqual(['BLUE_SKY', 'TICK_TOCK'])
+    await wrapper.find('select').setValue('TICK_TOCK')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['TICK_TOCK']])
+  })
+
+  it('can be turned off with humanize=false', () => {
+    const wrapper = mount(BaseSelect, { props: { humanize: false }, slots: enumSlots })
+    expect(wrapper.findAll('option').map((o) => o.text())).toEqual(['BLUE_SKY', 'TICK_TOCK'])
+  })
+})

package/src/components/BaseSelect.vue

@@ -3,11 +3,11 @@
     <select
       v-bind="$attrs"
       :value="modelValue"
-      class="w-full appearance-none bg-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
+      class="base-select w-full appearance-none bg-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm cursor-pointer transition-colors hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40 focus-visible:border-emerald-500 disabled:opacity-60 disabled:cursor-not-allowed"
       :class="size === 'md' ? 'py-2 pl-3 pr-9' : 'py-1.5 pl-2.5 pr-8'"
       @change="onChange"
     >
-      <slot />
+      <SlotContent />
     </select>
     <ChevronDownIcon
       class="pointer-events-none absolute top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500 dark:text-slate-400"
@@ -25,7 +25,9 @@
  * through. Same `dark:`-variant note as BaseInput.
  *
  */
+import { useSlots } from 'vue'
 import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { humanizeTextVNodes } from '../utils/humanize'
 
 // Attrs (id, name, disabled, extra classes) go to the <select>, not the
 // chevron wrapper. `bg-none` drops any arrow a forms reset (e.g. Flowbite /
@@ -43,14 +45,25 @@ interface Props {
   size?: 'sm' | 'md'
   /** Full-width (w-full). Set false for inline selects. */
   block?: boolean
+  /** Render underscores in option text as spaces (BLUE_SKY → BLUE SKY). Values are untouched. */
+  humanize?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   modelValue: undefined,
   size: 'sm',
   block: true,
+  humanize: true,
 })
 
+// Options are often raw enum names; only their visible text is rewritten, the
+// `value` attribute (what v-model receives) stays the raw enum.
+const slots = useSlots()
+const SlotContent = () => {
+  const nodes = slots.default?.() ?? []
+  return props.humanize ? humanizeTextVNodes(nodes, ['option', 'optgroup']) : nodes
+}
+
 const emit = defineEmits<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (e: 'update:modelValue', value: any): void

package/src/index.ts

@@ -149,5 +149,6 @@ export {
   isValidBase64,
 } from './utils/validate'
 export { buildSpecParams, firstInvalidNumericSpec } from './utils/specForm'
+export { humanizeEnum, humanizeTextVNodes } from './utils/humanize'
 export { computePnL } from './utils/pnl'
 export type { PnL, PnLInputs } from './utils/pnl'

package/src/style.css

@@ -88,3 +88,74 @@ html .dp--theme-dark {
   --dp-marker-color: #ef4444;
   --dp-tooltip-color: #1e293b;
 }
+
+/* BaseSelect: rounded, themed dropdown panel. Opt-in customizable <select>
+   (appearance: base-select, Chromium 135+); other browsers keep the native
+   popup, which can't be styled. The button skin comes from BaseSelect's
+   utilities, and its own ChevronDownIcon replaces the built-in picker icon. */
+@supports (appearance: base-select) {
+  .base-select,
+  .base-select::picker(select) {
+    appearance: base-select;
+  }
+
+  .base-select::picker-icon {
+    display: none;
+  }
+
+  .base-select::picker(select) {
+    margin-top: 0.25rem;
+    padding: 0.25rem;
+    border: 1px solid var(--color-slate-200);
+    border-radius: 0.75rem;
+    background-color: #fff;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  }
+
+  .base-select option {
+    padding: 0.375rem 0.625rem;
+    border-radius: 0.5rem;
+    color: var(--color-slate-900);
+    cursor: pointer;
+  }
+
+  .base-select option::checkmark {
+    display: none;
+  }
+
+  .base-select option:hover,
+  .base-select option:focus-visible {
+    background-color: var(--color-slate-100);
+    outline: none;
+  }
+
+  .base-select option:checked {
+    background-color: var(--color-emerald-50);
+    color: var(--color-emerald-700);
+    font-weight: 500;
+  }
+
+  .base-select option:disabled {
+    color: var(--color-slate-400);
+    cursor: default;
+  }
+
+  .dark .base-select::picker(select) {
+    border-color: var(--color-slate-700);
+    background-color: var(--color-slate-900);
+  }
+
+  .dark .base-select option {
+    color: var(--color-slate-100);
+  }
+
+  .dark .base-select option:hover,
+  .dark .base-select option:focus-visible {
+    background-color: var(--color-slate-800);
+  }
+
+  .dark .base-select option:checked {
+    background-color: rgb(16 185 129 / 0.15);
+    color: var(--color-emerald-300);
+  }
+}

package/src/utils/humanize.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest'
+import { h, Fragment, createTextVNode } from 'vue'
+import { humanizeEnum, humanizeTextVNodes } from './humanize'
+
+describe('humanizeEnum', () => {
+  it('replaces every underscore with a space', () => {
+    expect(humanizeEnum('BLUE_SKY')).toBe('BLUE SKY')
+    expect(humanizeEnum('A_B_C')).toBe('A B C')
+  })
+
+  it('returns an empty string for null / undefined', () => {
+    expect(humanizeEnum(null)).toBe('')
+    expect(humanizeEnum(undefined)).toBe('')
+  })
+})
+
+describe('humanizeTextVNodes', () => {
+  it('rewrites text nodes and walks fragments', () => {
+    const [text, frag] = humanizeTextVNodes([
+      createTextVNode('PROFIT_TARGET'),
+      h(Fragment, [createTextVNode('RSI_REVERT')]),
+    ])
+    expect(text.children).toBe('PROFIT TARGET')
+    expect((frag.children as any[])[0].children).toBe('RSI REVERT')
+  })
+
+  it('leaves elements alone unless their tag is listed', () => {
+    const span = h('span', 'KEEP_ME')
+    expect(humanizeTextVNodes([span])[0]).toBe(span)
+
+    const [opt] = humanizeTextVNodes([h('option', { value: 'BLUE_SKY' }, 'BLUE_SKY')], ['option'])
+    expect(opt.children).toBe('BLUE SKY')
+    expect(opt.props?.value).toBe('BLUE_SKY')
+  })
+})

package/src/utils/humanize.ts

@@ -0,0 +1,35 @@
+import { cloneVNode, createTextVNode, Fragment, Text, type VNode } from 'vue'
+
+/** Raw enum names (BLUE_SKY, PROFIT_TARGET) → display text (BLUE SKY). */
+export function humanizeEnum(value: string | null | undefined): string {
+  return value == null ? '' : String(value).replace(/_/g, ' ')
+}
+
+/**
+ * Rewrites underscores to spaces in slot text so callers can pass raw enum
+ * names. Plain text nodes are rewritten and fragments (v-for / v-if) are
+ * walked; elements pass through untouched unless their tag is in `tags`, in
+ * which case their string children are rewritten too (e.g. `<option>`).
+ */
+export function humanizeTextVNodes(nodes: VNode[], tags: readonly string[] = []): VNode[] {
+  return nodes.map((node) => {
+    if (node.type === Text && typeof node.children === 'string') {
+      return createTextVNode(humanizeEnum(node.children))
+    }
+    if (node.type === Fragment && Array.isArray(node.children)) {
+      const clone = cloneVNode(node)
+      clone.children = humanizeTextVNodes(node.children as VNode[], tags)
+      return clone
+    }
+    if (typeof node.type === 'string' && tags.includes(node.type)) {
+      const clone = cloneVNode(node)
+      if (typeof node.children === 'string') {
+        clone.children = humanizeEnum(node.children)
+      } else if (Array.isArray(node.children)) {
+        clone.children = humanizeTextVNodes(node.children as VNode[], tags)
+      }
+      return clone
+    }
+    return node
+  })
+}