mgv-backoffice 1.40.0 → 1.42.0

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