feat(cfasim-ui): add fontSize prop to ParamEditor

Author: k88hudson-cfa

cfasim-ui/components/src/ParamEditor/ParamEditor.md

@@ -13,6 +13,8 @@ The editor is **lazy-loaded**: the underlying CodeMirror bundle and YAML/TOML pa
 
 Users can switch formats from the dropdown; the editor round-trips the current value through the new format. Apply emits an `apply` event with the parsed value — the parent decides what to do with it (typically merge back into its own parameter state).
 
+Set the editor font size with the `fontSize` prop (any CSS length, e.g. `"16px"` or `"1rem"`); it defaults to `var(--font-size-sm)`.
+
 ## Examples
 
 <script setup>
@@ -66,4 +68,20 @@ function onApply(v) {
   </template>
 </ComponentDemo>
 
+### Custom font size
+
+<ComponentDemo>
+  <div style="width: 100%">
+    <ParamEditor :value="params" font-size="16px" @apply="onApply" />
+  </div>
+
+<template #code>
+
+```vue
+<ParamEditor :value="params" font-size="16px" @apply="onApply" />
+```
+
+  </template>
+</ComponentDemo>
+
 <!--@include: ./_api/param-editor.md-->

cfasim-ui/components/src/ParamEditor/ParamEditor.spec.ts

@@ -70,6 +70,16 @@ test("exports the current text with a timestamped default filename", async ({
   expect(download.suggestedFilename()).toMatch(/^params-\d{8}-\d{6}\.json$/);
 });
 
+test("applies the fontSize prop to the editor", async ({ page }) => {
+  await page.goto("./cfasim-ui/components/param-editor");
+  // The "Custom font size" demo passes font-size="16px". vue-codemirror
+  // applies the wrapper's :style to the inner .cm-editor (the .v-codemirror
+  // wrapper is display:contents), so assert on that element.
+  const editor = page.locator(".param-editor-cm .cm-editor").nth(2);
+  await expect(editor).toBeVisible();
+  await expect(editor).toHaveCSS("font-size", "16px");
+});
+
 test("switches format and round-trips the parsed value", async ({ page }) => {
   const demo = await openDemo(page);
   await expect(demo.locator(".cm-content")).toContainText('"beta"');

cfasim-ui/components/src/ParamEditor/ParamEditor.vue

@@ -9,6 +9,9 @@ defineProps<{
   value: ParamEditorValue;
   format?: ParamEditorFormat;
   height?: string;
+  /** Editor font size, as any CSS length (e.g. `"16px"`, `"1rem"`).
+   *  Defaults to `var(--font-size-sm)`. */
+  fontSize?: string;
   /** Basename for the Export download (no extension). Defaults to
    *  `params-YYYYMMDD-HHMMSS` computed at click time. */
   filename?: string;
@@ -33,6 +36,7 @@ const Impl = defineAsyncComponent({
     :value="value"
     :format="format"
     :height="height"
+    :font-size="fontSize"
     :filename="filename"
     @apply="$emit('apply', $event)"
   />

cfasim-ui/components/src/ParamEditor/ParamEditorImpl.vue

@@ -27,9 +27,10 @@ const props = withDefaults(
     value: Value;
     format?: Format;
     height?: string;
+    fontSize?: string;
     filename?: string;
   }>(),
-  { format: "json", height: "320px" },
+  { format: "json", height: "320px", fontSize: "var(--font-size-sm)" },
 );
 
 const emit = defineEmits<{ apply: [value: Value] }>();
@@ -264,7 +265,7 @@ async function onFileChange(e: Event) {
     <Codemirror
       v-model="text"
       :extensions="extensions"
-      :style="{ height }"
+      :style="{ height, fontSize }"
       :indent-with-tab="false"
       :tab-size="2"
       class="param-editor-cm"
@@ -317,7 +318,6 @@ async function onFileChange(e: Event) {
 .param-editor-cm {
   border: 1px solid var(--color-border);
   border-radius: 0.375em;
-  font-size: var(--font-size-sm);
   overflow: hidden;
 }