@scalar/api-client 3.21.5 → 3.23.0

package/dist/v2/blocks/request-block/components/RequestBodyViewToggle.vue.script.js

@@ -1,32 +1,60 @@
 import { useLocalization } from "../../../features/localization/index.js";
-import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withModifiers } from "vue";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withModifiers } from "vue";
 //#region src/v2/blocks/request-block/components/RequestBodyViewToggle.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "text-c-3 text-xxs -my-1 mr-2 flex justify-center gap-0.5 rounded p-0.5" };
-var _hoisted_2 = ["disabled", "title"];
+var _hoisted_2 = [
+	"aria-pressed",
+	"disabled",
+	"title"
+];
+var _hoisted_3 = ["aria-pressed"];
+var _hoisted_4 = ["aria-pressed"];
 var RequestBodyViewToggle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RequestBodyViewToggle",
 	props: {
 		modelValue: {},
+		showForm: {
+			type: Boolean,
+			default: true
+		},
+		showSchema: {
+			type: Boolean,
+			default: false
+		},
+		rawLabel: {},
 		disabled: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const { translate } = useLocalization();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("button", {
-				class: normalizeClass(["rounded px-1", __props.disabled ? "cursor-not-allowed opacity-50" : {
-					"bg-b-3 text-c-1 cursor-default": __props.modelValue === "form",
-					"hover:bg-b-3": __props.modelValue !== "form"
-				}]),
-				disabled: __props.disabled,
-				title: __props.disabled ? unref(translate)("apiClient.requestBodyViewToggle.fixBody") : void 0,
-				type: "button",
-				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("update:modelValue", "form"), ["stop"]))
-			}, toDisplayString(unref(translate)("apiClient.requestBodyViewToggle.form")), 11, _hoisted_2), createElementVNode("button", {
-				class: normalizeClass(["hover:bg-b-3 rounded px-1", { "bg-b-3 text-c-1 cursor-default": __props.modelValue === "raw" }]),
-				type: "button",
-				onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("update:modelValue", "raw"), ["stop"]))
-			}, toDisplayString(unref(translate)("apiClient.requestBodyViewToggle.raw")), 3)]);
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.showForm ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					"aria-pressed": __props.modelValue === "form",
+					class: normalizeClass(["rounded px-1", __props.disabled ? "cursor-not-allowed opacity-50" : {
+						"bg-b-3 text-c-1 cursor-default": __props.modelValue === "form",
+						"hover:bg-b-3": __props.modelValue !== "form"
+					}]),
+					disabled: __props.disabled,
+					title: __props.disabled ? unref(translate)("apiClient.requestBodyViewToggle.fixBody") : void 0,
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("update:modelValue", "form"), ["stop"]))
+				}, toDisplayString(unref(translate)("apiClient.requestBodyViewToggle.form")), 11, _hoisted_2)) : createCommentVNode("", true),
+				createElementVNode("button", {
+					"aria-pressed": __props.modelValue === "raw",
+					class: normalizeClass(["hover:bg-b-3 rounded px-1", { "bg-b-3 text-c-1 cursor-default": __props.modelValue === "raw" }]),
+					type: "button",
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("update:modelValue", "raw"), ["stop"]))
+				}, toDisplayString(__props.rawLabel ?? unref(translate)("apiClient.requestBodyViewToggle.raw")), 11, _hoisted_3),
+				__props.showSchema ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					"aria-pressed": __props.modelValue === "schema",
+					class: normalizeClass(["hover:bg-b-3 rounded px-1", { "bg-b-3 text-c-1 cursor-default": __props.modelValue === "schema" }]),
+					type: "button",
+					onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.$emit("update:modelValue", "schema"), ["stop"]))
+				}, toDisplayString(unref(translate)("apiClient.requestBodyViewToggle.schema")), 11, _hoisted_4)) : createCommentVNode("", true)
+			]);
 		};
 	}
 });

package/dist/v2/blocks/request-block/components/RequestBodyViewToggle.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestBodyViewToggle.vue.script.js","names":["$emit"],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBodyViewToggle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useLocalization } from '@/v2/features/localization'\n\ndefineProps<{\n  modelValue: 'form' | 'raw'\n  /** Disable switching to the form view (e.g. while the raw body is not parseable) */\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: 'form' | 'raw'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 mr-2 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      class=\"rounded px-1\"\n      :class=\"\n        disabled\n          ? 'cursor-not-allowed opacity-50'\n          : {\n              'bg-b-3 text-c-1 cursor-default': modelValue === 'form',\n              'hover:bg-b-3': modelValue !== 'form',\n            }\n      \"\n      :disabled=\"disabled\"\n      :title=\"\n        disabled\n          ? translate('apiClient.requestBodyViewToggle.fixBody')\n          : undefined\n      \"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', 'form')\">\n      {{ translate('apiClient.requestBodyViewToggle.form') }}\n    </button>\n    <button\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue === 'raw' }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', 'raw')\">\n      {{ translate('apiClient.requestBodyViewToggle.raw') }}\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAaA,MAAM,EAAE,cAAc,gBAAgB;;uBAGpC,mBA6BM,OA7BN,YA6BM,CA3BJ,mBAmBS,UAAA;IAlBP,OAAK,eAAA,CAAC,gBACW,QAAA,WAAA,kCAAA;uCAAmH,QAAA,eAAU;qBAA2C,QAAA,eAAU;;IAQlM,UAAU,QAAA;IACV,OAAgB,QAAA,WAAqB,MAAA,SAAA,CAAS,CAAA,yCAAA,IAAwD,KAAA;IAKvG,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,MAAA,GAAA,CAAA,MAAA,CAAA;sBACf,MAAA,SAAA,CAAS,CAAA,sCAAA,CAAA,GAAA,IAAA,UAAA,GAEd,mBAMS,UAAA;IALP,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCACW,QAAA,eAAU,MAAA,CAAA,CAAA;IACtD,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,KAAA,GAAA,CAAA,MAAA,CAAA;sBACf,MAAA,SAAA,CAAS,CAAA,qCAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"RequestBodyViewToggle.vue.script.js","names":["$emit"],"sources":["../../../../../src/v2/blocks/request-block/components/RequestBodyViewToggle.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useLocalization } from '@/v2/features/localization'\n\nconst { showForm = true, showSchema = false } = defineProps<{\n  modelValue: 'form' | 'raw' | 'schema'\n  /** Offer the structured form editor when the body supports it. */\n  showForm?: boolean\n  /** Offer read-only schema inspection when a schema exists. */\n  showSchema?: boolean\n  /** Non-text editors use Body instead of Raw. */\n  rawLabel?: string\n  /** Disable switching to the form view (e.g. while the raw body is not parseable) */\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'update:modelValue', v: 'form' | 'raw' | 'schema'): void\n}>()\n\nconst { translate } = useLocalization()\n</script>\n<template>\n  <div\n    class=\"text-c-3 text-xxs -my-1 mr-2 flex justify-center gap-0.5 rounded p-0.5\">\n    <button\n      v-if=\"showForm\"\n      :aria-pressed=\"modelValue === 'form'\"\n      class=\"rounded px-1\"\n      :class=\"\n        disabled\n          ? 'cursor-not-allowed opacity-50'\n          : {\n              'bg-b-3 text-c-1 cursor-default': modelValue === 'form',\n              'hover:bg-b-3': modelValue !== 'form',\n            }\n      \"\n      :disabled=\"disabled\"\n      :title=\"\n        disabled\n          ? translate('apiClient.requestBodyViewToggle.fixBody')\n          : undefined\n      \"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', 'form')\">\n      {{ translate('apiClient.requestBodyViewToggle.form') }}\n    </button>\n    <button\n      :aria-pressed=\"modelValue === 'raw'\"\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue === 'raw' }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', 'raw')\">\n      {{ rawLabel ?? translate('apiClient.requestBodyViewToggle.raw') }}\n    </button>\n    <button\n      v-if=\"showSchema\"\n      :aria-pressed=\"modelValue === 'schema'\"\n      class=\"hover:bg-b-3 rounded px-1\"\n      :class=\"{ 'bg-b-3 text-c-1 cursor-default': modelValue === 'schema' }\"\n      type=\"button\"\n      @click.stop=\"$emit('update:modelValue', 'schema')\">\n      {{ translate('apiClient.requestBodyViewToggle.schema') }}\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmBA,MAAM,EAAE,cAAc,gBAAgB;;uBAGpC,mBAyCM,OAzCN,YAyCM;IAtCI,QAAA,YAAA,UAAA,GADR,mBAqBS,UAAA;;KAnBN,gBAAc,QAAA,eAAU;KACzB,OAAK,eAAA,CAAC,gBACW,QAAA,WAAA,kCAAA;wCAAmH,QAAA,eAAU;sBAA2C,QAAA,eAAU;;KAQlM,UAAU,QAAA;KACV,OAAgB,QAAA,WAAqB,MAAA,SAAA,CAAS,CAAA,yCAAA,IAAwD,KAAA;KAKvG,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,MAAA,GAAA,CAAA,MAAA,CAAA;uBACf,MAAA,SAAA,CAAS,CAAA,sCAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAEd,mBAOS,UAAA;KANN,gBAAc,QAAA,eAAU;KACzB,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCACW,QAAA,eAAU,MAAA,CAAA,CAAA;KACtD,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,KAAA,GAAA,CAAA,MAAA,CAAA;uBACf,QAAA,YAAY,MAAA,SAAA,CAAS,CAAA,qCAAA,CAAA,GAAA,IAAA,UAAA;IAGlB,QAAA,cAAA,UAAA,GADR,mBAQS,UAAA;;KANN,gBAAc,QAAA,eAAU;KACzB,OAAK,eAAA,CAAC,6BAA2B,EAAA,kCACW,QAAA,eAAU,SAAA,CAAA,CAAA;KACtD,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAOA,KAAAA,MAAK,qBAAA,QAAA,GAAA,CAAA,MAAA,CAAA;uBACf,MAAA,SAAA,CAAS,CAAA,wCAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/v2/blocks/request-block/components/RequestParams.vue.d.ts

@@ -13,6 +13,8 @@ type __VLS_Props = {
     showAddRowPlaceholder?: boolean;
     environment: XScalarEnvironment;
     eventBus: WorkspaceEventBus;
+    /** Offer empty object query fields on demand without changing the complete editing context. */
+    selectExpandedParameters?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: (payload: {
@@ -22,6 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         name: string;
         value: string | Record<string, unknown>;
         isDisabled: boolean;
+        propertyState?: {
+            path: string[];
+            isDisabled?: boolean;
+            previousPath?: string[];
+        };
     } & {
         shouldRenameExpandedRow?: boolean;
     }) => any;
@@ -35,6 +42,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
         name: string;
         value: string | Record<string, unknown>;
         isDisabled: boolean;
+        propertyState?: {
+            path: string[];
+            isDisabled?: boolean;
+            previousPath?: string[];
+        };
     } & {
         shouldRenameExpandedRow?: boolean;
     }) => any) | undefined;

package/dist/v2/blocks/request-block/components/RequestParams.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestParams.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"names":[],"mappings":"AAyHA,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAOnH,OAAO,KAAK,EAAE,QAAQ,EAAyB,MAAM,uBAAuB,CAAA;AAE5E,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,CAAC;AA0OF,QAAA,MAAM,YAAY;;eAtNgB,MAAM;;;;;;;kCAHR,OAAO;;;;;;eAGL,MAAM;;;;;;;kCAHR,OAAO;;;;kFA4NrC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestParams.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"names":[],"mappings":"AAiRA,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAOnH,OAAO,KAAK,EAAE,QAAQ,EAAyB,MAAM,uBAAuB,CAAA;AAE5E,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,+FAA+F;IAC/F,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC,CAAC;AA0cF,QAAA,MAAM,YAAY;;eArbgB,MAAM;;;;;;;;sBApDxC,CAlCG;wBAkCH,CAjCmB;;;kCAkFa,OAAO;;;;;;eAGL,MAAM;;;;;;;;sBApDxC,CAlCG;wBAkCH,CAjCmB;;;kCAkFa,OAAO;;;;kFA2brC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/request-block/components/RequestParams.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestParams.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTooltip } from '@scalar/components/tooltip'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestTable from './RequestTable.vue'\nimport type { TableRow, TableRowUpsertPayload } from './RequestTableRow.vue'\n\nconst {\n  rows,\n  exampleKey,\n  environment,\n  title,\n  globalRoute,\n  showAddRowPlaceholder = true,\n  eventBus,\n} = defineProps<{\n  rows: TableRow[]\n  exampleKey: string\n  title: string\n  label?: string\n  /** Explain restrictions on parameter editing when needed. */\n  description?: string\n  invalidParams?: Set<string>\n  globalRoute?: string\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'upsert',\n    index: number,\n    payload: ApiReferenceEvents['operation:upsert:parameter']['payload'] & {\n      shouldRenameExpandedRow?: boolean\n    },\n  ): void\n  (e: 'delete', payload: { index: number }): void\n  (e: 'deleteAll'): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst showTooltip = computed(() => rows.length > 1)\n\n/** Needed for type guard */\nconst handleUpserRow = (index: number, payload: TableRowUpsertPayload) => {\n  const { value, ...rest } = payload\n\n  // Type guard here as we cannot add files to params\n  if (value instanceof File) {\n    return\n  }\n\n  emit('upsert', index, { ...rest, value: value ?? '' })\n}\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params\"\n    :itemCount=\"rows.length\">\n    <template #title>{{ title }}</template>\n    <template #actions>\n      <div\n        class=\"text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100\">\n        <ScalarTooltip\n          v-if=\"showTooltip\"\n          :content=\"\n            translate('apiClient.requestParams.clearOptionalParameters')\n          \"\n          placement=\"left\">\n          <ScalarButton\n            :aria-label=\"\n              translate('apiClient.requestParams.clearAll', { title })\n            \"\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"emit('deleteAll')\">\n            {{ translate('apiClient.requestParams.clear') }}\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <p\n      v-if=\"description\"\n      class=\"text-c-2 px-3 py-2 text-sm\">\n      {{ description }}\n    </p>\n    <RequestTable\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :data=\"rows\"\n      :environment=\"environment\"\n      :exampleKey=\"exampleKey\"\n      :globalRoute=\"globalRoute\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showAddRowPlaceholder=\"showAddRowPlaceholder\"\n      @deleteRow=\"(index) => emit('delete', { index })\"\n      @navigate=\"(route) => eventBus.emit('ui:navigate', route)\"\n      @selectPreset=\"(index, value) => emit('selectPreset', index, value)\"\n      @upsertRow=\"handleUpserRow\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RequestParams.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarTooltip } from '@scalar/components/tooltip'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, nextTick, ref, useTemplateRef } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestTable from './RequestTable.vue'\nimport type { TableRow, TableRowUpsertPayload } from './RequestTableRow.vue'\n\nconst {\n  rows,\n  exampleKey,\n  environment,\n  title,\n  globalRoute,\n  showAddRowPlaceholder = true,\n  eventBus,\n  selectExpandedParameters = false,\n} = defineProps<{\n  rows: TableRow[]\n  exampleKey: string\n  title: string\n  label?: string\n  /** Explain restrictions on parameter editing when needed. */\n  description?: string\n  invalidParams?: Set<string>\n  globalRoute?: string\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Offer empty object query fields on demand without changing the complete editing context. */\n  selectExpandedParameters?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'upsert',\n    index: number,\n    payload: ApiReferenceEvents['operation:upsert:parameter']['payload'] & {\n      shouldRenameExpandedRow?: boolean\n    },\n  ): void\n  (e: 'delete', payload: { index: number }): void\n  (e: 'deleteAll'): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst showTooltip = computed(() => rows.length > 1)\nconst table = useTemplateRef('table')\nconst pickerContainer = useTemplateRef('pickerContainer')\nconst selectedFields = ref<Set<string>>(new Set())\n\ntype IndexedRow = { row: TableRow; index: number }\ntype AvailableField = {\n  id: string\n  label: string\n  description: TableRow['description']\n  index: number\n}\n\nconst getFieldKey = (row: TableRow, name = row.name): string =>\n  JSON.stringify([row.originalParameter?.in, row.originalParameter?.name, name])\n\n/** Single-field objects and ordinary parameters keep their existing presentation. */\nconst expandedParameters = computed<Set<TableRow['originalParameter']>>(() => {\n  const counts = new Map<TableRow['originalParameter'], number>()\n  for (const row of rows) {\n    if (row.originalParameter?.in === 'query' && row.sourceParameterValuePath) {\n      counts.set(\n        row.originalParameter,\n        (counts.get(row.originalParameter) ?? 0) + 1,\n      )\n    }\n  }\n  return new Set(\n    [...counts]\n      .filter(([, count]) => count > 1)\n      .map(([parameter]) => parameter),\n  )\n})\n\nconst isSelectable = (row: TableRow): boolean =>\n  selectExpandedParameters &&\n  Boolean(row.sourceParameterValuePath) &&\n  expandedParameters.value.has(row.originalParameter)\n\n/** Keep original indexes: handlers rebuild object values from all rows, including hidden fields. */\nconst indexedRows = computed<IndexedRow[]>(() =>\n  rows.map((row, index) => ({ row, index })),\n)\nconst visibleRows = computed<IndexedRow[]>(() =>\n  indexedRows.value.filter(\n    ({ row }) =>\n      !isSelectable(row) ||\n      row.isRequired ||\n      (row.value !== '' && row.value !== null) ||\n      selectedFields.value.has(getFieldKey(row)),\n  ),\n)\nconst tableRows = computed<TableRow[]>(() =>\n  visibleRows.value.map(({ row }) => row),\n)\nconst availableFields = computed<AvailableField[]>(() =>\n  indexedRows.value\n    .filter(\n      (entry) => !visibleRows.value.some(({ index }) => index === entry.index),\n    )\n    .map(({ row, index }) => ({\n      id: getFieldKey(row),\n      label: row.name,\n      description: row.description,\n      index,\n    })),\n)\n\nconst selectField = async (\n  option: { id: string; index: number } | undefined,\n): Promise<void> => {\n  if (!option) return\n  selectedFields.value.add(option.id)\n  await nextTick()\n  table.value?.focusValue(\n    visibleRows.value.findIndex(({ index }) => index === option.index),\n  )\n}\n\n/** The appended placeholder belongs after all stored rows, including hidden fields. */\nconst getOriginalIndex = (index: number): number =>\n  visibleRows.value[index]?.index ??\n  rows.length + index - visibleRows.value.length\n\nconst deleteRow = (index: number): void => {\n  const originalIndex = getOriginalIndex(index)\n  const entry = visibleRows.value[index]\n  if (entry) selectedFields.value.delete(getFieldKey(entry.row))\n  emit('delete', {\n    index: originalIndex,\n  })\n}\n\nconst deleteAll = (): void => {\n  selectedFields.value.clear()\n  emit('deleteAll')\n}\n\n/** Needed for type guard */\nconst handleUpserRow = (\n  index: number,\n  payload: TableRowUpsertPayload,\n): void => {\n  const { value, ...rest } = payload\n\n  // Type guard here as we cannot add files to params\n  if (value instanceof File) {\n    return\n  }\n\n  const entry = visibleRows.value[index]\n  if (entry && isSelectable(entry.row)) {\n    // Editing a populated field keeps it visible even after its value is cleared.\n    selectedFields.value.add(\n      getFieldKey(\n        entry.row,\n        payload.shouldRenameExpandedRow ? payload.name : entry.row.name,\n      ),\n    )\n  }\n  emit('upsert', getOriginalIndex(index), { ...rest, value: value ?? '' })\n}\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params\"\n    :itemCount=\"tableRows.length\">\n    <template #title>{{ title }}</template>\n    <template #actions>\n      <div\n        class=\"text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100\">\n        <ScalarTooltip\n          v-if=\"showTooltip\"\n          :content=\"\n            translate('apiClient.requestParams.clearOptionalParameters')\n          \"\n          placement=\"left\">\n          <ScalarButton\n            :aria-label=\"\n              translate('apiClient.requestParams.clearAll', { title })\n            \"\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"deleteAll\">\n            {{ translate('apiClient.requestParams.clear') }}\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <p\n      v-if=\"description\"\n      class=\"text-c-2 px-3 py-2 text-sm\">\n      {{ description }}\n    </p>\n    <RequestTable\n      ref=\"table\"\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :data=\"tableRows\"\n      :environment=\"environment\"\n      :exampleKey=\"exampleKey\"\n      :globalRoute=\"globalRoute\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showAddRowPlaceholder=\"showAddRowPlaceholder\"\n      @deleteRow=\"deleteRow\"\n      @navigate=\"(route) => eventBus.emit('ui:navigate', route)\"\n      @selectPreset=\"(index, value) => emit('selectPreset', index, value)\"\n      @upsertRow=\"handleUpserRow\" />\n    <div\n      v-if=\"availableFields.length\"\n      class=\"border-t py-1\">\n      <div\n        ref=\"pickerContainer\"\n        class=\"mx-2\">\n        <ScalarCombobox\n          :inputLabel=\"translate('apiClient.requestParams.searchParameters')\"\n          :noResults=\"translate('apiClient.requestParams.noParametersFound')\"\n          :options=\"availableFields\"\n          :placeholder=\"translate('apiClient.requestParams.searchParameters')\"\n          placement=\"bottom-start\"\n          resize\n          :target=\"pickerContainer ?? undefined\"\n          @update:modelValue=\"selectField\">\n          <ScalarButton\n            class=\"gap-1.5\"\n            size=\"sm\"\n            variant=\"ghost\">\n            <ScalarIconPlus class=\"size-3.5\" />\n            {{ translate('apiClient.requestParams.addParameter') }}\n          </ScalarButton>\n          <template #option=\"{ option }\">\n            <span class=\"min-w-0\">\n              <span class=\"block break-all\">{{ option.label }}</span>\n              <span\n                v-if=\"option.description\"\n                class=\"text-c-2 block text-xs\"\n                >{{ option.description }}</span\n              >\n            </span>\n          </template>\n        </ScalarCombobox>\n      </div>\n    </div>\n  </CollapsibleSection>\n</template>\n"],"mappings":""}

package/dist/v2/blocks/request-block/components/RequestParams.vue.script.js

@@ -1,8 +1,10 @@
 import { useLocalization } from "../../../features/localization/index.js";
 import RequestTable_default from "./RequestTable.vue.js";
 import CollapsibleSection_default from "../../../components/layout/CollapsibleSection.vue.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, openBlock, ref, toDisplayString, unref, useTemplateRef, withCtx, withModifiers } from "vue";
 import { ScalarButton } from "@scalar/components/button";
+import { ScalarIconPlus } from "@scalar/icons";
+import { ScalarCombobox } from "@scalar/components/combobox";
 import { ScalarTooltip } from "@scalar/components/tooltip";
 //#region src/v2/blocks/request-block/components/RequestParams.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100" };
@@ -10,6 +12,16 @@ var _hoisted_2 = {
 	key: 0,
 	class: "text-c-2 px-3 py-2 text-sm"
 };
+var _hoisted_3 = {
+	key: 1,
+	class: "border-t py-1"
+};
+var _hoisted_4 = { class: "min-w-0" };
+var _hoisted_5 = { class: "block break-all" };
+var _hoisted_6 = {
+	key: 0,
+	class: "text-c-2 block text-xs"
+};
 var RequestParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RequestParams",
 	props: {
@@ -25,7 +37,11 @@ var RequestParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			default: true
 		},
 		environment: {},
-		eventBus: {}
+		eventBus: {},
+		selectExpandedParameters: {
+			type: Boolean,
+			default: false
+		}
 	},
 	emits: [
 		"upsert",
@@ -37,11 +53,59 @@ var RequestParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const emit = __emit;
 		const { translate } = useLocalization();
 		const showTooltip = computed(() => __props.rows.length > 1);
+		const table = useTemplateRef("table");
+		const pickerContainer = useTemplateRef("pickerContainer");
+		const selectedFields = ref(/* @__PURE__ */ new Set());
+		const getFieldKey = (row, name = row.name) => JSON.stringify([
+			row.originalParameter?.in,
+			row.originalParameter?.name,
+			name
+		]);
+		/** Single-field objects and ordinary parameters keep their existing presentation. */
+		const expandedParameters = computed(() => {
+			const counts = /* @__PURE__ */ new Map();
+			for (const row of __props.rows) if (row.originalParameter?.in === "query" && row.sourceParameterValuePath) counts.set(row.originalParameter, (counts.get(row.originalParameter) ?? 0) + 1);
+			return new Set([...counts].filter(([, count]) => count > 1).map(([parameter]) => parameter));
+		});
+		const isSelectable = (row) => __props.selectExpandedParameters && Boolean(row.sourceParameterValuePath) && expandedParameters.value.has(row.originalParameter);
+		/** Keep original indexes: handlers rebuild object values from all rows, including hidden fields. */
+		const indexedRows = computed(() => __props.rows.map((row, index) => ({
+			row,
+			index
+		})));
+		const visibleRows = computed(() => indexedRows.value.filter(({ row }) => !isSelectable(row) || row.isRequired || row.value !== "" && row.value !== null || selectedFields.value.has(getFieldKey(row))));
+		const tableRows = computed(() => visibleRows.value.map(({ row }) => row));
+		const availableFields = computed(() => indexedRows.value.filter((entry) => !visibleRows.value.some(({ index }) => index === entry.index)).map(({ row, index }) => ({
+			id: getFieldKey(row),
+			label: row.name,
+			description: row.description,
+			index
+		})));
+		const selectField = async (option) => {
+			if (!option) return;
+			selectedFields.value.add(option.id);
+			await nextTick();
+			table.value?.focusValue(visibleRows.value.findIndex(({ index }) => index === option.index));
+		};
+		/** The appended placeholder belongs after all stored rows, including hidden fields. */
+		const getOriginalIndex = (index) => visibleRows.value[index]?.index ?? __props.rows.length + index - visibleRows.value.length;
+		const deleteRow = (index) => {
+			const originalIndex = getOriginalIndex(index);
+			const entry = visibleRows.value[index];
+			if (entry) selectedFields.value.delete(getFieldKey(entry.row));
+			emit("delete", { index: originalIndex });
+		};
+		const deleteAll = () => {
+			selectedFields.value.clear();
+			emit("deleteAll");
+		};
 		/** Needed for type guard */
 		const handleUpserRow = (index, payload) => {
 			const { value, ...rest } = payload;
 			if (value instanceof File) return;
-			emit("upsert", index, {
+			const entry = visibleRows.value[index];
+			if (entry && isSelectable(entry.row)) selectedFields.value.add(getFieldKey(entry.row, payload.shouldRenameExpandedRow ? payload.name : entry.row.name));
+			emit("upsert", getOriginalIndex(index), {
 				...rest,
 				value: value ?? ""
 			});
@@ -49,7 +113,7 @@ var RequestParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(CollapsibleSection_default), {
 				class: "group/params",
-				itemCount: __props.rows.length
+				itemCount: tableRows.value.length
 			}, {
 				title: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
 				actions: withCtx(() => [createElementVNode("div", _hoisted_1, [showTooltip.value ? (openBlock(), createBlock(unref(ScalarTooltip), {
@@ -62,40 +126,76 @@ var RequestParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						class: "pr-0.75 pl-1 transition-none",
 						size: "sm",
 						variant: "ghost",
-						onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("deleteAll"), ["stop"]))
+						onClick: withModifiers(deleteAll, ["stop"])
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.requestParams.clear")), 1)]),
 						_: 1
 					}, 8, ["aria-label"])]),
 					_: 1
 				}, 8, ["content"])) : createCommentVNode("", true)])]),
-				default: withCtx(() => [__props.description ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true), createVNode(RequestTable_default, {
-					class: "flex-1",
-					columns: [
-						"32px",
-						"",
-						""
-					],
-					data: __props.rows,
-					environment: __props.environment,
-					exampleKey: __props.exampleKey,
-					globalRoute: __props.globalRoute,
-					invalidParams: __props.invalidParams,
-					label: __props.label,
-					showAddRowPlaceholder: __props.showAddRowPlaceholder,
-					onDeleteRow: _cache[1] || (_cache[1] = (index) => emit("delete", { index })),
-					onNavigate: _cache[2] || (_cache[2] = (route) => __props.eventBus.emit("ui:navigate", route)),
-					onSelectPreset: _cache[3] || (_cache[3] = (index, value) => emit("selectPreset", index, value)),
-					onUpsertRow: handleUpserRow
-				}, null, 8, [
-					"data",
-					"environment",
-					"exampleKey",
-					"globalRoute",
-					"invalidParams",
-					"label",
-					"showAddRowPlaceholder"
-				])]),
+				default: withCtx(() => [
+					__props.description ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+					createVNode(RequestTable_default, {
+						ref_key: "table",
+						ref: table,
+						class: "flex-1",
+						columns: [
+							"32px",
+							"",
+							""
+						],
+						data: tableRows.value,
+						environment: __props.environment,
+						exampleKey: __props.exampleKey,
+						globalRoute: __props.globalRoute,
+						invalidParams: __props.invalidParams,
+						label: __props.label,
+						showAddRowPlaceholder: __props.showAddRowPlaceholder,
+						onDeleteRow: deleteRow,
+						onNavigate: _cache[0] || (_cache[0] = (route) => __props.eventBus.emit("ui:navigate", route)),
+						onSelectPreset: _cache[1] || (_cache[1] = (index, value) => emit("selectPreset", index, value)),
+						onUpsertRow: handleUpserRow
+					}, null, 8, [
+						"data",
+						"environment",
+						"exampleKey",
+						"globalRoute",
+						"invalidParams",
+						"label",
+						"showAddRowPlaceholder"
+					]),
+					availableFields.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", {
+						ref_key: "pickerContainer",
+						ref: pickerContainer,
+						class: "mx-2"
+					}, [createVNode(unref(ScalarCombobox), {
+						inputLabel: unref(translate)("apiClient.requestParams.searchParameters"),
+						noResults: unref(translate)("apiClient.requestParams.noParametersFound"),
+						options: availableFields.value,
+						placeholder: unref(translate)("apiClient.requestParams.searchParameters"),
+						placement: "bottom-start",
+						resize: "",
+						target: pickerContainer.value ?? void 0,
+						"onUpdate:modelValue": selectField
+					}, {
+						option: withCtx(({ option }) => [createElementVNode("span", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(option.label), 1), option.description ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(option.description), 1)) : createCommentVNode("", true)])]),
+						default: withCtx(() => [createVNode(unref(ScalarButton), {
+							class: "gap-1.5",
+							size: "sm",
+							variant: "ghost"
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3.5" }), createTextVNode(" " + toDisplayString(unref(translate)("apiClient.requestParams.addParameter")), 1)]),
+							_: 1
+						})]),
+						_: 1
+					}, 8, [
+						"inputLabel",
+						"noResults",
+						"options",
+						"placeholder",
+						"target"
+					])], 512)])) : createCommentVNode("", true)
+				]),
 				_: 1
 			}, 8, ["itemCount"]);
 		};

package/dist/v2/blocks/request-block/components/RequestParams.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestParams.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarTooltip } from '@scalar/components/tooltip'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestTable from './RequestTable.vue'\nimport type { TableRow, TableRowUpsertPayload } from './RequestTableRow.vue'\n\nconst {\n  rows,\n  exampleKey,\n  environment,\n  title,\n  globalRoute,\n  showAddRowPlaceholder = true,\n  eventBus,\n} = defineProps<{\n  rows: TableRow[]\n  exampleKey: string\n  title: string\n  label?: string\n  /** Explain restrictions on parameter editing when needed. */\n  description?: string\n  invalidParams?: Set<string>\n  globalRoute?: string\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'upsert',\n    index: number,\n    payload: ApiReferenceEvents['operation:upsert:parameter']['payload'] & {\n      shouldRenameExpandedRow?: boolean\n    },\n  ): void\n  (e: 'delete', payload: { index: number }): void\n  (e: 'deleteAll'): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst showTooltip = computed(() => rows.length > 1)\n\n/** Needed for type guard */\nconst handleUpserRow = (index: number, payload: TableRowUpsertPayload) => {\n  const { value, ...rest } = payload\n\n  // Type guard here as we cannot add files to params\n  if (value instanceof File) {\n    return\n  }\n\n  emit('upsert', index, { ...rest, value: value ?? '' })\n}\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params\"\n    :itemCount=\"rows.length\">\n    <template #title>{{ title }}</template>\n    <template #actions>\n      <div\n        class=\"text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100\">\n        <ScalarTooltip\n          v-if=\"showTooltip\"\n          :content=\"\n            translate('apiClient.requestParams.clearOptionalParameters')\n          \"\n          placement=\"left\">\n          <ScalarButton\n            :aria-label=\"\n              translate('apiClient.requestParams.clearAll', { title })\n            \"\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"emit('deleteAll')\">\n            {{ translate('apiClient.requestParams.clear') }}\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <p\n      v-if=\"description\"\n      class=\"text-c-2 px-3 py-2 text-sm\">\n      {{ description }}\n    </p>\n    <RequestTable\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :data=\"rows\"\n      :environment=\"environment\"\n      :exampleKey=\"exampleKey\"\n      :globalRoute=\"globalRoute\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showAddRowPlaceholder=\"showAddRowPlaceholder\"\n      @deleteRow=\"(index) => emit('delete', { index })\"\n      @navigate=\"(route) => eventBus.emit('ui:navigate', route)\"\n      @selectPreset=\"(index, value) => emit('selectPreset', index, value)\"\n      @upsertRow=\"handleUpserRow\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,MAAM,OAAO;EAcb,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,cAAc,eAAe,QAAA,KAAK,SAAS,CAAC;;EAGlD,MAAM,kBAAkB,OAAe,YAAmC;GACxE,MAAM,EAAE,OAAO,GAAG,SAAS;GAG3B,IAAI,iBAAiB,MACnB;GAGF,KAAK,UAAU,OAAO;IAAE,GAAG;IAAM,OAAO,SAAS;GAAG,CAAC;EACvD;;uBAGE,YA6CqB,MAAA,0BAAA,GAAA;IA5CnB,OAAM;IACL,WAAW,QAAA,KAAK;;IACN,OAAK,cAAY,CAAA,gBAAA,gBAAR,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;IACd,SAAO,cAoBV,CAnBN,mBAmBM,OAnBN,YAmBM,CAhBI,YAAA,SAAA,UAAA,GADR,YAgBgB,MAAA,aAAA,GAAA;;KAdb,SAAsB,MAAA,SAAA,CAAS,CAAA,iDAAA;KAGhC,WAAU;;4BAUK,CATf,YASe,MAAA,YAAA,GAAA;MARZ,cAA2B,MAAA,SAAA,CAAS,CAAA,oCAAA,EAAA,OAAuC,QAAA,MAAK,CAAA;MAGjF,OAAM;MACN,MAAK;MACL,SAAQ;MACP,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,KAAI,WAAA,GAAA,CAAA,MAAA,CAAA;;6BAC+B,CAAA,gBAAA,gBAA7C,MAAA,SAAA,CAAS,CAAA,+BAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;;2BAShB,CAHI,QAAA,eAAA,UAAA,GADR,mBAII,KAJJ,YAII,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEhB,YAagC,sBAAA;KAZ9B,OAAM;KACL,SAAS;MAAA;MAAA;MAAA;KAAA;KACT,MAAM,QAAA;KACN,aAAa,QAAA;KACb,YAAY,QAAA;KACZ,aAAa,QAAA;KACb,eAAe,QAAA;KACf,OAAO,QAAA;KACP,uBAAuB,QAAA;KACvB,aAAS,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,UAAA,EAAa,MAAK,CAAA;KAC5C,YAAQ,OAAA,OAAA,OAAA,MAAG,UAAU,QAAA,SAAS,KAAI,eAAgB,KAAK;KACvD,gBAAY,OAAA,OAAA,OAAA,MAAG,OAAO,UAAU,KAAI,gBAAiB,OAAO,KAAK;KACjE,aAAW"}
+{"version":3,"file":"RequestParams.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestParams.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarCombobox } from '@scalar/components/combobox'\nimport { ScalarTooltip } from '@scalar/components/tooltip'\nimport { ScalarIconPlus } from '@scalar/icons'\nimport type {\n  ApiReferenceEvents,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, nextTick, ref, useTemplateRef } from 'vue'\n\nimport { CollapsibleSection } from '@/v2/components/layout'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestTable from './RequestTable.vue'\nimport type { TableRow, TableRowUpsertPayload } from './RequestTableRow.vue'\n\nconst {\n  rows,\n  exampleKey,\n  environment,\n  title,\n  globalRoute,\n  showAddRowPlaceholder = true,\n  eventBus,\n  selectExpandedParameters = false,\n} = defineProps<{\n  rows: TableRow[]\n  exampleKey: string\n  title: string\n  label?: string\n  /** Explain restrictions on parameter editing when needed. */\n  description?: string\n  invalidParams?: Set<string>\n  globalRoute?: string\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Offer empty object query fields on demand without changing the complete editing context. */\n  selectExpandedParameters?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (\n    e: 'upsert',\n    index: number,\n    payload: ApiReferenceEvents['operation:upsert:parameter']['payload'] & {\n      shouldRenameExpandedRow?: boolean\n    },\n  ): void\n  (e: 'delete', payload: { index: number }): void\n  (e: 'deleteAll'): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst showTooltip = computed(() => rows.length > 1)\nconst table = useTemplateRef('table')\nconst pickerContainer = useTemplateRef('pickerContainer')\nconst selectedFields = ref<Set<string>>(new Set())\n\ntype IndexedRow = { row: TableRow; index: number }\ntype AvailableField = {\n  id: string\n  label: string\n  description: TableRow['description']\n  index: number\n}\n\nconst getFieldKey = (row: TableRow, name = row.name): string =>\n  JSON.stringify([row.originalParameter?.in, row.originalParameter?.name, name])\n\n/** Single-field objects and ordinary parameters keep their existing presentation. */\nconst expandedParameters = computed<Set<TableRow['originalParameter']>>(() => {\n  const counts = new Map<TableRow['originalParameter'], number>()\n  for (const row of rows) {\n    if (row.originalParameter?.in === 'query' && row.sourceParameterValuePath) {\n      counts.set(\n        row.originalParameter,\n        (counts.get(row.originalParameter) ?? 0) + 1,\n      )\n    }\n  }\n  return new Set(\n    [...counts]\n      .filter(([, count]) => count > 1)\n      .map(([parameter]) => parameter),\n  )\n})\n\nconst isSelectable = (row: TableRow): boolean =>\n  selectExpandedParameters &&\n  Boolean(row.sourceParameterValuePath) &&\n  expandedParameters.value.has(row.originalParameter)\n\n/** Keep original indexes: handlers rebuild object values from all rows, including hidden fields. */\nconst indexedRows = computed<IndexedRow[]>(() =>\n  rows.map((row, index) => ({ row, index })),\n)\nconst visibleRows = computed<IndexedRow[]>(() =>\n  indexedRows.value.filter(\n    ({ row }) =>\n      !isSelectable(row) ||\n      row.isRequired ||\n      (row.value !== '' && row.value !== null) ||\n      selectedFields.value.has(getFieldKey(row)),\n  ),\n)\nconst tableRows = computed<TableRow[]>(() =>\n  visibleRows.value.map(({ row }) => row),\n)\nconst availableFields = computed<AvailableField[]>(() =>\n  indexedRows.value\n    .filter(\n      (entry) => !visibleRows.value.some(({ index }) => index === entry.index),\n    )\n    .map(({ row, index }) => ({\n      id: getFieldKey(row),\n      label: row.name,\n      description: row.description,\n      index,\n    })),\n)\n\nconst selectField = async (\n  option: { id: string; index: number } | undefined,\n): Promise<void> => {\n  if (!option) return\n  selectedFields.value.add(option.id)\n  await nextTick()\n  table.value?.focusValue(\n    visibleRows.value.findIndex(({ index }) => index === option.index),\n  )\n}\n\n/** The appended placeholder belongs after all stored rows, including hidden fields. */\nconst getOriginalIndex = (index: number): number =>\n  visibleRows.value[index]?.index ??\n  rows.length + index - visibleRows.value.length\n\nconst deleteRow = (index: number): void => {\n  const originalIndex = getOriginalIndex(index)\n  const entry = visibleRows.value[index]\n  if (entry) selectedFields.value.delete(getFieldKey(entry.row))\n  emit('delete', {\n    index: originalIndex,\n  })\n}\n\nconst deleteAll = (): void => {\n  selectedFields.value.clear()\n  emit('deleteAll')\n}\n\n/** Needed for type guard */\nconst handleUpserRow = (\n  index: number,\n  payload: TableRowUpsertPayload,\n): void => {\n  const { value, ...rest } = payload\n\n  // Type guard here as we cannot add files to params\n  if (value instanceof File) {\n    return\n  }\n\n  const entry = visibleRows.value[index]\n  if (entry && isSelectable(entry.row)) {\n    // Editing a populated field keeps it visible even after its value is cleared.\n    selectedFields.value.add(\n      getFieldKey(\n        entry.row,\n        payload.shouldRenameExpandedRow ? payload.name : entry.row.name,\n      ),\n    )\n  }\n  emit('upsert', getOriginalIndex(index), { ...rest, value: value ?? '' })\n}\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params\"\n    :itemCount=\"tableRows.length\">\n    <template #title>{{ title }}</template>\n    <template #actions>\n      <div\n        class=\"text-c-2 request-meta-buttons flex whitespace-nowrap opacity-0 group-hover/params:opacity-100 has-[:focus-visible]:opacity-100\">\n        <ScalarTooltip\n          v-if=\"showTooltip\"\n          :content=\"\n            translate('apiClient.requestParams.clearOptionalParameters')\n          \"\n          placement=\"left\">\n          <ScalarButton\n            :aria-label=\"\n              translate('apiClient.requestParams.clearAll', { title })\n            \"\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"deleteAll\">\n            {{ translate('apiClient.requestParams.clear') }}\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <p\n      v-if=\"description\"\n      class=\"text-c-2 px-3 py-2 text-sm\">\n      {{ description }}\n    </p>\n    <RequestTable\n      ref=\"table\"\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :data=\"tableRows\"\n      :environment=\"environment\"\n      :exampleKey=\"exampleKey\"\n      :globalRoute=\"globalRoute\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showAddRowPlaceholder=\"showAddRowPlaceholder\"\n      @deleteRow=\"deleteRow\"\n      @navigate=\"(route) => eventBus.emit('ui:navigate', route)\"\n      @selectPreset=\"(index, value) => emit('selectPreset', index, value)\"\n      @upsertRow=\"handleUpserRow\" />\n    <div\n      v-if=\"availableFields.length\"\n      class=\"border-t py-1\">\n      <div\n        ref=\"pickerContainer\"\n        class=\"mx-2\">\n        <ScalarCombobox\n          :inputLabel=\"translate('apiClient.requestParams.searchParameters')\"\n          :noResults=\"translate('apiClient.requestParams.noParametersFound')\"\n          :options=\"availableFields\"\n          :placeholder=\"translate('apiClient.requestParams.searchParameters')\"\n          placement=\"bottom-start\"\n          resize\n          :target=\"pickerContainer ?? undefined\"\n          @update:modelValue=\"selectField\">\n          <ScalarButton\n            class=\"gap-1.5\"\n            size=\"sm\"\n            variant=\"ghost\">\n            <ScalarIconPlus class=\"size-3.5\" />\n            {{ translate('apiClient.requestParams.addParameter') }}\n          </ScalarButton>\n          <template #option=\"{ option }\">\n            <span class=\"min-w-0\">\n              <span class=\"block break-all\">{{ option.label }}</span>\n              <span\n                v-if=\"option.description\"\n                class=\"text-c-2 block text-xs\"\n                >{{ option.description }}</span\n              >\n            </span>\n          </template>\n        </ScalarCombobox>\n      </div>\n    </div>\n  </CollapsibleSection>\n</template>\n"],"mappings":"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"}

package/dist/v2/blocks/request-block/components/RequestTable.vue.d.ts

@@ -12,7 +12,9 @@ type __VLS_Props = {
     showAddRowPlaceholder?: boolean;
     environment: XScalarEnvironment;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    focusValue: (index: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     deleteRow: (index: number) => any;
     navigate: (route: NonNullable<({
         replace?: boolean;

package/dist/v2/blocks/request-block/components/RequestTable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"names":[],"mappings":"AA4NA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAwB,EACtB,KAAK,QAAQ,EACb,KAAK,qBAAqB,EAC3B,MAAM,0DAA0D,CAAA;AAQjE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,EAAE,kBAAkB,CAAA;CAChC,CAAC;AA2UF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"names":[],"mappings":"AAgPA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAwB,EACtB,KAAK,QAAQ,EACb,KAAK,qBAAqB,EAC3B,MAAM,0DAA0D,CAAA;AAQjE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,EAAE,kBAAkB,CAAA;CAChC,CAAC;AAkWF,QAAA,MAAM,YAAY;wBAtMI,MAAM,KAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFA0MjC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/request-block/components/RequestTable.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import RequestTable_vue_vue_type_script_setup_true_lang_default from "./RequestTable.vue.script.js";
 /* empty css                           */
 //#region src/v2/blocks/request-block/components/RequestTable.vue
-var RequestTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RequestTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e29008b7"]]);
+var RequestTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RequestTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-344240b0"]]);
 //#endregion
 export { RequestTable_default as default };
 

package/dist/v2/blocks/request-block/components/RequestTable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestTable.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport RequestTableRow, {\n  type TableRow,\n  type TableRowUpsertPayload,\n} from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  data,\n  hasCheckboxDisabled,\n  deferKeyUpdates,\n  showUploadButton,\n  showAddRowPlaceholder = true,\n  environment,\n} = defineProps<{\n  data: TableRow[]\n  /** Save key edits on blur so changing a body name does not replace the focused row. */\n  deferKeyUpdates?: boolean\n  /** Hide the enabled column */\n  hasCheckboxDisabled?: boolean\n  invalidParams?: Set<string>\n  label?: string\n  showUploadButton?: boolean\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n}>()\n\n/**\n * Make this component more generic that can be used also for the operation body\n */\nconst emit = defineEmits<{\n  (e: 'upsertRow', index: number, payload: TableRowUpsertPayload): void\n  (e: 'deleteRow', index: number): void\n\n  /**\n   * File upload events\n   *\n   * Each row has its own upload button, so we need to know which row to update\n   * when the file is selected.\n   */\n  (e: 'uploadFile', index: number): void\n  (e: 'removeFile', index: number): void\n  (e: 'navigate', route: NonNullable<TableRow['globalRoute']>): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst columns = computed(() => {\n  if (showUploadButton) {\n    return ['36px', '', '', 'minmax(0, 1fr)']\n  }\n  return ['36px', '', '']\n})\n\n/** Add the last empty row (for ui purposes only) */\nconst displayData = computed(() => {\n  if (!showAddRowPlaceholder) {\n    return data\n  }\n\n  const last = data.at(-1)\n\n  if (!last || last.name !== '' || last.value !== '') {\n    return [...data, { name: '', value: '', isDisabled: true }]\n  }\n\n  return data\n})\n\n/**\n * Stable identity key for each row so Vue never reuses a RequestTableRow instance for a different\n * parameter or the appended placeholder row. Parameter rows are keyed by their parameter identity —\n * the name plus the value path for expanded object parameters. The parts are combined through\n * JSON.stringify so the name/path boundary is unambiguous (for example `ab` + `['c']` never\n * collides with `a` + `['bc']`). Form rows use the name and its occurrence so repeated\n * multipart fields remain distinct while unrelated rows can move without losing their identity.\n */\nconst getRowKey = (row: TableRow, index: number): string => {\n  // Body edits retain their row when blur commits a rename after focus moves into the value.\n  if (deferKeyUpdates) {\n    return `body:${index}`\n  }\n  if (row.originalParameter) {\n    return JSON.stringify([\n      row.originalParameter.name,\n      ...(row.sourceParameterValuePath ?? []),\n    ])\n  }\n\n  const occurrence = displayData.value\n    .slice(0, index)\n    .filter(\n      (other) => !other.originalParameter && other.name === row.name,\n    ).length\n  return `row:${JSON.stringify([row.name, occurrence])}`\n}\n\n/** Keep an edited row mounted when saving it changes its parameter identity. */\ntype DisplayRow = {\n  data: TableRow\n  identity: string\n  key: symbol\n}\n\nconst pendingUpdates = new Map<symbol, TableRowUpsertPayload>()\n\nconst matchesPendingUpdate = (key: symbol, row: TableRow): boolean => {\n  const update = pendingUpdates.get(key)\n  return update?.name === row.name && update.value === row.value\n}\n\n// A saved parameter inherits the editor's key. The next placeholder gets a fresh key,\n// so it cannot retain the previous placeholder's text or focused input.\nconst keyedRows = computed<DisplayRow[]>((previous = []) => {\n  const available = new Set(previous)\n  // Reserve identities still present in the store before transferring an edited key.\n  // The appended placeholder is excluded so a newly saved row can inherit its editor.\n  const savedIdentities = new Set(data.map(getRowKey))\n  const rows = displayData.value.map((row, index) => {\n    const identity = getRowKey(row, index)\n    const existing = [...available].find((entry) => entry.identity === identity)\n    const pending = [...available].find(\n      (entry) =>\n        !savedIdentities.has(entry.identity) &&\n        !entry.data.sourceParameterValuePath &&\n        matchesPendingUpdate(entry.key, row),\n    )\n    const match = existing ?? pending\n\n    if (match) {\n      available.delete(match)\n      if (matchesPendingUpdate(match.key, row)) {\n        pendingUpdates.delete(match.key)\n      }\n    }\n\n    return { data: row, identity, key: match?.key ?? Symbol() }\n  })\n\n  for (const removed of available) {\n    pendingUpdates.delete(removed.key)\n  }\n\n  return rows\n})\n\nconst handleUpsertRow = (\n  row: DisplayRow,\n  index: number,\n  payload: TableRowUpsertPayload,\n): void => {\n  // The store may debounce the save. Transfer this key only when the saved row arrives.\n  pendingUpdates.set(row.key, payload)\n  emit('upsertRow', index, payload)\n}\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.enabled') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.key') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.value') }}\n      </DataTableHeader>\n    </DataTableRow>\n\n    <RequestTableRow\n      v-for=\"(row, index) in keyedRows\"\n      :key=\"row.key\"\n      :data=\"row.data\"\n      :deferKeyUpdates=\"deferKeyUpdates\"\n      :environment=\"environment\"\n      :hasCheckboxDisabled=\"hasCheckboxDisabled\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showUploadButton=\"showUploadButton\"\n      @deleteRow=\"emit('deleteRow', index)\"\n      @navigate=\"(route) => emit('navigate', route)\"\n      @removeFile=\"emit('removeFile', index)\"\n      @selectPreset=\"(value) => emit('selectPreset', index, value)\"\n      @uploadFile=\"emit('uploadFile', index)\"\n      @upsertRow=\"(payload) => handleUpsertRow(row, index, payload)\" />\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"RequestTable.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, type ComponentPublicInstance } from 'vue'\n\nimport RequestTableRow, {\n  type TableRow,\n  type TableRowUpsertPayload,\n} from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  data,\n  hasCheckboxDisabled,\n  deferKeyUpdates,\n  showUploadButton,\n  showAddRowPlaceholder = true,\n  environment,\n} = defineProps<{\n  data: TableRow[]\n  /** Save key edits on blur so changing a body name does not replace the focused row. */\n  deferKeyUpdates?: boolean\n  /** Hide the enabled column */\n  hasCheckboxDisabled?: boolean\n  invalidParams?: Set<string>\n  label?: string\n  showUploadButton?: boolean\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n}>()\n\n/**\n * Make this component more generic that can be used also for the operation body\n */\nconst emit = defineEmits<{\n  (e: 'upsertRow', index: number, payload: TableRowUpsertPayload): void\n  (e: 'deleteRow', index: number): void\n\n  /**\n   * File upload events\n   *\n   * Each row has its own upload button, so we need to know which row to update\n   * when the file is selected.\n   */\n  (e: 'uploadFile', index: number): void\n  (e: 'removeFile', index: number): void\n  (e: 'navigate', route: NonNullable<TableRow['globalRoute']>): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst columns = computed(() => {\n  if (showUploadButton) {\n    return ['36px', '', '', 'minmax(0, 1fr)']\n  }\n  return ['36px', '', '']\n})\n\n/** Add the last empty row (for ui purposes only) */\nconst displayData = computed(() => {\n  if (!showAddRowPlaceholder) {\n    return data\n  }\n\n  const last = data.at(-1)\n\n  if (last?.name !== '' || last.value !== '') {\n    return [...data, { name: '', value: '', isDisabled: true }]\n  }\n\n  return data\n})\n\n/**\n * Stable identity key for each row so Vue never reuses a RequestTableRow instance for a different\n * parameter or the appended placeholder row. Parameter rows are keyed by their parameter identity —\n * the name plus the value path for expanded object parameters. The parts are combined through\n * JSON.stringify so the name/path boundary is unambiguous (for example `ab` + `['c']` never\n * collides with `a` + `['bc']`). Form rows use the name and its occurrence so repeated\n * multipart fields remain distinct while unrelated rows can move without losing their identity.\n */\nconst getRowKey = (row: TableRow, index: number): string => {\n  // Body edits retain their row when blur commits a rename after focus moves into the value.\n  if (deferKeyUpdates) {\n    return `body:${index}`\n  }\n  if (row.originalParameter) {\n    return JSON.stringify([\n      row.originalParameter.name,\n      ...(row.sourceParameterValuePath ?? []),\n    ])\n  }\n\n  const occurrence = displayData.value\n    .slice(0, index)\n    .filter(\n      (other) => !other.originalParameter && other.name === row.name,\n    ).length\n  return `row:${JSON.stringify([row.name, occurrence])}`\n}\n\n/** Keep an edited row mounted when saving it changes its parameter identity. */\ntype DisplayRow = {\n  data: TableRow\n  identity: string\n  key: symbol\n}\n\nconst pendingUpdates = new Map<symbol, TableRowUpsertPayload>()\nconst rowRefs = new Map<symbol, InstanceType<typeof RequestTableRow>>()\n\nconst setRowRef = (\n  key: symbol,\n  element: Element | ComponentPublicInstance | null,\n): void => {\n  if (element) {\n    rowRefs.set(key, element as InstanceType<typeof RequestTableRow>)\n  } else {\n    rowRefs.delete(key)\n  }\n}\n\nconst matchesPendingUpdate = (key: symbol, row: TableRow): boolean => {\n  const update = pendingUpdates.get(key)\n  return update?.name === row.name && update.value === row.value\n}\n\n// A saved parameter inherits the editor's key. The next placeholder gets a fresh key,\n// so it cannot retain the previous placeholder's text or focused input.\nconst keyedRows = computed<DisplayRow[]>((previous = []) => {\n  const available = new Set(previous)\n  // Reserve identities still present in the store before transferring an edited key.\n  // The appended placeholder is excluded so a newly saved row can inherit its editor.\n  const savedIdentities = new Set(data.map(getRowKey))\n  const rows = displayData.value.map((row, index) => {\n    const identity = getRowKey(row, index)\n    const existing = [...available].find((entry) => entry.identity === identity)\n    const pending = [...available].find(\n      (entry) =>\n        !savedIdentities.has(entry.identity) &&\n        !entry.data.sourceParameterValuePath &&\n        matchesPendingUpdate(entry.key, row),\n    )\n    const match = existing ?? pending\n\n    if (match) {\n      available.delete(match)\n      if (matchesPendingUpdate(match.key, row)) {\n        pendingUpdates.delete(match.key)\n      }\n    }\n\n    return { data: row, identity, key: match?.key ?? Symbol() }\n  })\n\n  for (const removed of available) {\n    pendingUpdates.delete(removed.key)\n  }\n\n  return rows\n})\n\nconst handleUpsertRow = (\n  row: DisplayRow,\n  index: number,\n  payload: TableRowUpsertPayload,\n): void => {\n  // The store may debounce the save. Transfer this key only when the saved row arrives.\n  pendingUpdates.set(row.key, payload)\n  emit('upsertRow', index, payload)\n}\n\ndefineExpose({\n  focusValue: (index: number): void => {\n    const row = keyedRows.value[index]\n    if (row) rowRefs.get(row.key)?.focusValue()\n  },\n})\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.enabled') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.key') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.value') }}\n      </DataTableHeader>\n    </DataTableRow>\n\n    <RequestTableRow\n      v-for=\"(row, index) in keyedRows\"\n      :key=\"row.key\"\n      :ref=\"(el) => setRowRef(row.key, el)\"\n      :data=\"row.data\"\n      :deferKeyUpdates=\"deferKeyUpdates\"\n      :environment=\"environment\"\n      :hasCheckboxDisabled=\"hasCheckboxDisabled\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showUploadButton=\"showUploadButton\"\n      @deleteRow=\"emit('deleteRow', index)\"\n      @navigate=\"(route) => emit('navigate', route)\"\n      @removeFile=\"emit('removeFile', index)\"\n      @selectPreset=\"(value) => emit('selectPreset', index, value)\"\n      @uploadFile=\"emit('uploadFile', index)\"\n      @upsertRow=\"(payload) => handleUpsertRow(row, index, payload)\" />\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/request-block/components/RequestTable.vue.script.js

@@ -28,7 +28,7 @@ var RequestTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		"navigate",
 		"selectPreset"
 	],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		/**
 		* Make this component more generic that can be used also for the operation body
 		*/
@@ -51,7 +51,7 @@ var RequestTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const displayData = computed(() => {
 			if (!__props.showAddRowPlaceholder) return __props.data;
 			const last = __props.data.at(-1);
-			if (!last || last.name !== "" || last.value !== "") return [...__props.data, {
+			if (last?.name !== "" || last.value !== "") return [...__props.data, {
 				name: "",
 				value: "",
 				isDisabled: true
@@ -74,6 +74,11 @@ var RequestTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		};
 		/** Keep an edited row mounted when saving it changes its parameter identity. */
 		const pendingUpdates = /* @__PURE__ */ new Map();
+		const rowRefs = /* @__PURE__ */ new Map();
+		const setRowRef = (key, element) => {
+			if (element) rowRefs.set(key, element);
+			else rowRefs.delete(key);
+		};
 		const matchesPendingUpdate = (key, row) => {
 			const update = pendingUpdates.get(key);
 			return update?.name === row.name && update.value === row.value;
@@ -103,6 +108,10 @@ var RequestTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			pendingUpdates.set(row.key, payload);
 			emit("upsertRow", index, payload);
 		};
+		__expose({ focusValue: (index) => {
+			const row = keyedRows.value[index];
+			if (row) rowRefs.get(row.key)?.focusValue();
+		} });
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DataTable_default), {
 				class: "group/table flex-1",
@@ -127,6 +136,8 @@ var RequestTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				}), (openBlock(true), createElementBlock(Fragment, null, renderList(keyedRows.value, (row, index) => {
 					return openBlock(), createBlock(RequestTableRow_default, {
 						key: row.key,
+						ref_for: true,
+						ref: (el) => setRowRef(row.key, el),
 						data: row.data,
 						deferKeyUpdates: __props.deferKeyUpdates,
 						environment: __props.environment,

package/dist/v2/blocks/request-block/components/RequestTable.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestTable.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport RequestTableRow, {\n  type TableRow,\n  type TableRowUpsertPayload,\n} from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  data,\n  hasCheckboxDisabled,\n  deferKeyUpdates,\n  showUploadButton,\n  showAddRowPlaceholder = true,\n  environment,\n} = defineProps<{\n  data: TableRow[]\n  /** Save key edits on blur so changing a body name does not replace the focused row. */\n  deferKeyUpdates?: boolean\n  /** Hide the enabled column */\n  hasCheckboxDisabled?: boolean\n  invalidParams?: Set<string>\n  label?: string\n  showUploadButton?: boolean\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n}>()\n\n/**\n * Make this component more generic that can be used also for the operation body\n */\nconst emit = defineEmits<{\n  (e: 'upsertRow', index: number, payload: TableRowUpsertPayload): void\n  (e: 'deleteRow', index: number): void\n\n  /**\n   * File upload events\n   *\n   * Each row has its own upload button, so we need to know which row to update\n   * when the file is selected.\n   */\n  (e: 'uploadFile', index: number): void\n  (e: 'removeFile', index: number): void\n  (e: 'navigate', route: NonNullable<TableRow['globalRoute']>): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst columns = computed(() => {\n  if (showUploadButton) {\n    return ['36px', '', '', 'minmax(0, 1fr)']\n  }\n  return ['36px', '', '']\n})\n\n/** Add the last empty row (for ui purposes only) */\nconst displayData = computed(() => {\n  if (!showAddRowPlaceholder) {\n    return data\n  }\n\n  const last = data.at(-1)\n\n  if (!last || last.name !== '' || last.value !== '') {\n    return [...data, { name: '', value: '', isDisabled: true }]\n  }\n\n  return data\n})\n\n/**\n * Stable identity key for each row so Vue never reuses a RequestTableRow instance for a different\n * parameter or the appended placeholder row. Parameter rows are keyed by their parameter identity —\n * the name plus the value path for expanded object parameters. The parts are combined through\n * JSON.stringify so the name/path boundary is unambiguous (for example `ab` + `['c']` never\n * collides with `a` + `['bc']`). Form rows use the name and its occurrence so repeated\n * multipart fields remain distinct while unrelated rows can move without losing their identity.\n */\nconst getRowKey = (row: TableRow, index: number): string => {\n  // Body edits retain their row when blur commits a rename after focus moves into the value.\n  if (deferKeyUpdates) {\n    return `body:${index}`\n  }\n  if (row.originalParameter) {\n    return JSON.stringify([\n      row.originalParameter.name,\n      ...(row.sourceParameterValuePath ?? []),\n    ])\n  }\n\n  const occurrence = displayData.value\n    .slice(0, index)\n    .filter(\n      (other) => !other.originalParameter && other.name === row.name,\n    ).length\n  return `row:${JSON.stringify([row.name, occurrence])}`\n}\n\n/** Keep an edited row mounted when saving it changes its parameter identity. */\ntype DisplayRow = {\n  data: TableRow\n  identity: string\n  key: symbol\n}\n\nconst pendingUpdates = new Map<symbol, TableRowUpsertPayload>()\n\nconst matchesPendingUpdate = (key: symbol, row: TableRow): boolean => {\n  const update = pendingUpdates.get(key)\n  return update?.name === row.name && update.value === row.value\n}\n\n// A saved parameter inherits the editor's key. The next placeholder gets a fresh key,\n// so it cannot retain the previous placeholder's text or focused input.\nconst keyedRows = computed<DisplayRow[]>((previous = []) => {\n  const available = new Set(previous)\n  // Reserve identities still present in the store before transferring an edited key.\n  // The appended placeholder is excluded so a newly saved row can inherit its editor.\n  const savedIdentities = new Set(data.map(getRowKey))\n  const rows = displayData.value.map((row, index) => {\n    const identity = getRowKey(row, index)\n    const existing = [...available].find((entry) => entry.identity === identity)\n    const pending = [...available].find(\n      (entry) =>\n        !savedIdentities.has(entry.identity) &&\n        !entry.data.sourceParameterValuePath &&\n        matchesPendingUpdate(entry.key, row),\n    )\n    const match = existing ?? pending\n\n    if (match) {\n      available.delete(match)\n      if (matchesPendingUpdate(match.key, row)) {\n        pendingUpdates.delete(match.key)\n      }\n    }\n\n    return { data: row, identity, key: match?.key ?? Symbol() }\n  })\n\n  for (const removed of available) {\n    pendingUpdates.delete(removed.key)\n  }\n\n  return rows\n})\n\nconst handleUpsertRow = (\n  row: DisplayRow,\n  index: number,\n  payload: TableRowUpsertPayload,\n): void => {\n  // The store may debounce the save. Transfer this key only when the saved row arrives.\n  pendingUpdates.set(row.key, payload)\n  emit('upsertRow', index, payload)\n}\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.enabled') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.key') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.value') }}\n      </DataTableHeader>\n    </DataTableRow>\n\n    <RequestTableRow\n      v-for=\"(row, index) in keyedRows\"\n      :key=\"row.key\"\n      :data=\"row.data\"\n      :deferKeyUpdates=\"deferKeyUpdates\"\n      :environment=\"environment\"\n      :hasCheckboxDisabled=\"hasCheckboxDisabled\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showUploadButton=\"showUploadButton\"\n      @deleteRow=\"emit('deleteRow', index)\"\n      @navigate=\"(route) => emit('navigate', route)\"\n      @removeFile=\"emit('removeFile', index)\"\n      @selectPreset=\"(value) => emit('selectPreset', index, value)\"\n      @uploadFile=\"emit('uploadFile', index)\"\n      @upsertRow=\"(payload) => handleUpsertRow(row, index, payload)\" />\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"RequestTable.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, type ComponentPublicInstance } from 'vue'\n\nimport RequestTableRow, {\n  type TableRow,\n  type TableRowUpsertPayload,\n} from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  data,\n  hasCheckboxDisabled,\n  deferKeyUpdates,\n  showUploadButton,\n  showAddRowPlaceholder = true,\n  environment,\n} = defineProps<{\n  data: TableRow[]\n  /** Save key edits on blur so changing a body name does not replace the focused row. */\n  deferKeyUpdates?: boolean\n  /** Hide the enabled column */\n  hasCheckboxDisabled?: boolean\n  invalidParams?: Set<string>\n  label?: string\n  showUploadButton?: boolean\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n}>()\n\n/**\n * Make this component more generic that can be used also for the operation body\n */\nconst emit = defineEmits<{\n  (e: 'upsertRow', index: number, payload: TableRowUpsertPayload): void\n  (e: 'deleteRow', index: number): void\n\n  /**\n   * File upload events\n   *\n   * Each row has its own upload button, so we need to know which row to update\n   * when the file is selected.\n   */\n  (e: 'uploadFile', index: number): void\n  (e: 'removeFile', index: number): void\n  (e: 'navigate', route: NonNullable<TableRow['globalRoute']>): void\n  /** Select a value for a grouped global cookie preset at the given row index. */\n  (e: 'selectPreset', index: number, value: string): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst columns = computed(() => {\n  if (showUploadButton) {\n    return ['36px', '', '', 'minmax(0, 1fr)']\n  }\n  return ['36px', '', '']\n})\n\n/** Add the last empty row (for ui purposes only) */\nconst displayData = computed(() => {\n  if (!showAddRowPlaceholder) {\n    return data\n  }\n\n  const last = data.at(-1)\n\n  if (last?.name !== '' || last.value !== '') {\n    return [...data, { name: '', value: '', isDisabled: true }]\n  }\n\n  return data\n})\n\n/**\n * Stable identity key for each row so Vue never reuses a RequestTableRow instance for a different\n * parameter or the appended placeholder row. Parameter rows are keyed by their parameter identity —\n * the name plus the value path for expanded object parameters. The parts are combined through\n * JSON.stringify so the name/path boundary is unambiguous (for example `ab` + `['c']` never\n * collides with `a` + `['bc']`). Form rows use the name and its occurrence so repeated\n * multipart fields remain distinct while unrelated rows can move without losing their identity.\n */\nconst getRowKey = (row: TableRow, index: number): string => {\n  // Body edits retain their row when blur commits a rename after focus moves into the value.\n  if (deferKeyUpdates) {\n    return `body:${index}`\n  }\n  if (row.originalParameter) {\n    return JSON.stringify([\n      row.originalParameter.name,\n      ...(row.sourceParameterValuePath ?? []),\n    ])\n  }\n\n  const occurrence = displayData.value\n    .slice(0, index)\n    .filter(\n      (other) => !other.originalParameter && other.name === row.name,\n    ).length\n  return `row:${JSON.stringify([row.name, occurrence])}`\n}\n\n/** Keep an edited row mounted when saving it changes its parameter identity. */\ntype DisplayRow = {\n  data: TableRow\n  identity: string\n  key: symbol\n}\n\nconst pendingUpdates = new Map<symbol, TableRowUpsertPayload>()\nconst rowRefs = new Map<symbol, InstanceType<typeof RequestTableRow>>()\n\nconst setRowRef = (\n  key: symbol,\n  element: Element | ComponentPublicInstance | null,\n): void => {\n  if (element) {\n    rowRefs.set(key, element as InstanceType<typeof RequestTableRow>)\n  } else {\n    rowRefs.delete(key)\n  }\n}\n\nconst matchesPendingUpdate = (key: symbol, row: TableRow): boolean => {\n  const update = pendingUpdates.get(key)\n  return update?.name === row.name && update.value === row.value\n}\n\n// A saved parameter inherits the editor's key. The next placeholder gets a fresh key,\n// so it cannot retain the previous placeholder's text or focused input.\nconst keyedRows = computed<DisplayRow[]>((previous = []) => {\n  const available = new Set(previous)\n  // Reserve identities still present in the store before transferring an edited key.\n  // The appended placeholder is excluded so a newly saved row can inherit its editor.\n  const savedIdentities = new Set(data.map(getRowKey))\n  const rows = displayData.value.map((row, index) => {\n    const identity = getRowKey(row, index)\n    const existing = [...available].find((entry) => entry.identity === identity)\n    const pending = [...available].find(\n      (entry) =>\n        !savedIdentities.has(entry.identity) &&\n        !entry.data.sourceParameterValuePath &&\n        matchesPendingUpdate(entry.key, row),\n    )\n    const match = existing ?? pending\n\n    if (match) {\n      available.delete(match)\n      if (matchesPendingUpdate(match.key, row)) {\n        pendingUpdates.delete(match.key)\n      }\n    }\n\n    return { data: row, identity, key: match?.key ?? Symbol() }\n  })\n\n  for (const removed of available) {\n    pendingUpdates.delete(removed.key)\n  }\n\n  return rows\n})\n\nconst handleUpsertRow = (\n  row: DisplayRow,\n  index: number,\n  payload: TableRowUpsertPayload,\n): void => {\n  // The store may debounce the save. Transfer this key only when the saved row arrives.\n  pendingUpdates.set(row.key, payload)\n  emit('upsertRow', index, payload)\n}\n\ndefineExpose({\n  focusValue: (index: number): void => {\n    const row = keyedRows.value[index]\n    if (row) rowRefs.get(row.key)?.focusValue()\n  },\n})\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.enabled') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.key') }}\n      </DataTableHeader>\n      <DataTableHeader>\n        {{ label }}\n        {{ translate('apiClient.requestTable.value') }}\n      </DataTableHeader>\n    </DataTableRow>\n\n    <RequestTableRow\n      v-for=\"(row, index) in keyedRows\"\n      :key=\"row.key\"\n      :ref=\"(el) => setRowRef(row.key, el)\"\n      :data=\"row.data\"\n      :deferKeyUpdates=\"deferKeyUpdates\"\n      :environment=\"environment\"\n      :hasCheckboxDisabled=\"hasCheckboxDisabled\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showUploadButton=\"showUploadButton\"\n      @deleteRow=\"emit('deleteRow', index)\"\n      @navigate=\"(route) => emit('navigate', route)\"\n      @removeFile=\"emit('removeFile', index)\"\n      @selectPreset=\"(value) => emit('selectPreset', index, value)\"\n      @uploadFile=\"emit('uploadFile', index)\"\n      @upsertRow=\"(payload) => handleUpsertRow(row, index, payload)\" />\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n</style>\n"],"mappings":"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"}