@scalar/api-client 2.38.2 → 2.38.3

package/dist/{RequestSection-HhdJj9hW.js.map → RequestSection-Bx8UHW-k.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RequestSection-HhdJj9hW.js","names":[],"sources":["../src/views/Request/libs/request.ts","../src/views/Request/RequestSection/RequestTableTooltip.vue","../src/views/Request/RequestSection/RequestTableTooltip.vue","../src/views/Request/RequestSection/RequestTable.vue","../src/views/Request/RequestSection/RequestTable.vue","../src/views/Request/RequestSection/RequestBody.vue","../src/views/Request/RequestSection/RequestBody.vue","../src/views/Request/RequestSection/RequestParams.vue","../src/views/Request/RequestSection/RequestParams.vue","../src/views/Request/RequestSection/RequestPathParams.vue","../src/views/Request/RequestSection/RequestPathParams.vue","../src/views/Request/RequestSection/RequestCodeExample.vue","../src/views/Request/RequestSection/RequestCodeExample.vue","../src/views/Request/RequestSection/RequestSection.vue","../src/views/Request/RequestSection/RequestSection.vue"],"sourcesContent":["import type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\n/**\n * Check if a RequestExampleParameter has any of the following properties:\n * - description\n * - type\n * - default\n * - format\n * - minimum\n * - maximum\n */\nexport const hasItemProperties = (item: RequestExampleParameter) =>\n  Boolean(item.description || item.type || item.default || item.format || item.minimum || item.maximum)\n\n/**\n * Checks if the value of a RequestExampleParameter is the expected type or format\n * Returns an alert message if the value is not in the correct type or format, otherwise false\n */\nexport const parameterIsInvalid = (item: RequestExampleParameter) => {\n  return computed(() => {\n    if (item.value === undefined || item.value === '') {\n      return false\n    }\n\n    // Type validation\n    if (item.type) {\n      if (item.type === 'integer') {\n        const value = Number(item.value)\n        if (isNaN(value) || !Number.isInteger(value)) {\n          return 'Value must be a whole number (e.g., 42)'\n        }\n        if (item.minimum !== undefined && value < item.minimum) {\n          return `Value must be ${item.minimum} or greater`\n        }\n        if (item.maximum !== undefined && value > item.maximum) {\n          return `Value must be ${item.maximum} or less`\n        }\n      }\n\n      if (item.type === 'number') {\n        const value = Number(item.value)\n        if (isNaN(value)) {\n          return 'Value must be a number (e.g., 42.5)'\n        }\n        if (item.minimum !== undefined && value < item.minimum) {\n          return `Value must be ${item.minimum} or greater`\n        }\n        if (item.maximum !== undefined && value > item.maximum) {\n          return `Value must be ${item.maximum} or less`\n        }\n      }\n\n      if (item.type === 'string' && item.format) {\n        if (item.format === 'date' && !/^\\d{4}-\\d{2}-\\d{2}$/.test(item.value)) {\n          return 'Please enter a valid date in YYYY-MM-DD format (e.g., 2024-03-20)'\n        }\n        if (\n          item.format === 'date-time' &&\n          !/^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d+)?(Z|[+-]\\d{2}:\\d{2})$/.test(item.value)\n        ) {\n          return 'Please enter a valid date and time in RFC 3339 format (e.g., 2024-03-20T13:45:30Z)'\n        }\n        if (item.format === 'email' && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(item.value)) {\n          return 'Please enter a valid email address (e.g., user@example.com)'\n        }\n        if (item.format === 'uri' && !/^[a-zA-Z][a-zA-Z0-9+.-]*:.+$/.test(item.value)) {\n          return 'Please enter a valid URI (e.g., https://example.com)'\n        }\n      }\n    }\n\n    return false\n  })\n}\n\n/**\n * Checks if a RequestExampleParameter is required and has an empty value\n */\nexport const hasEmptyRequiredParameter = (item: RequestExampleParameter) => Boolean(item.required && item.value === '')\n","<script setup lang=\"ts\">\nimport { ScalarPopover } from '@scalar/components'\nimport { ScalarIconInfo, ScalarIconWarning } from '@scalar/icons'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nimport { parameterIsInvalid } from '../libs/request'\n\nconst { item } = defineProps<{ item: RequestExampleParameter }>()\n\nconst isInvalid = computed(() => !!parameterIsInvalid(item).value)\n</script>\n<template>\n  <ScalarPopover\n    teleport\n    :offset=\"4\"\n    placement=\"left\">\n    <button\n      type=\"button\"\n      :aria-label=\"isInvalid ? 'Input is invalid' : 'More Information'\"\n      class=\"text-c-2 hover:text-c-1 hover:bg-b-2 rounded p-1\"\n      :role=\"isInvalid ? 'alert' : 'none'\">\n      <ScalarIconWarning\n        v-if=\"isInvalid\"\n        class=\"text-orange size-3.5 brightness-90 hover:brightness-75\" />\n      <ScalarIconInfo\n        v-else\n        class=\"text-c-2 hover:text-c-1 size-3.5\" />\n    </button>\n    <template #popover>\n      <div\n        class=\"w-content text-xxs text-c-1 grid min-w-48 gap-1.5 rounded px-1.5 pt-2 pb-1.5 leading-none\">\n        <div\n          v-if=\"isInvalid\"\n          class=\"text-error-1\">\n          {{ parameterIsInvalid(item).value }}\n        </div>\n        <div\n          v-else-if=\"\n            item.type ||\n            item.format ||\n            item.minimum ||\n            item.maximum ||\n            item.default\n          \"\n          class=\"schema text-c-2 flex items-center\">\n          <span v-if=\"item.type\">{{ item.type }}</span>\n          <span v-if=\"item.format\">{{ item.format }}</span>\n          <span v-if=\"item.minimum\">min: {{ item.minimum }}</span>\n          <span v-if=\"item.maximum\">max: {{ item.maximum }}</span>\n          <span v-if=\"item.default\">default: {{ item.default }}</span>\n        </div>\n        <span\n          v-if=\"item.description && !isInvalid\"\n          class=\"text-sm leading-snug text-pretty\"\n          :style=\"{ maxWidth: '16rem' }\">\n          {{ item.description }}\n        </span>\n      </div>\n    </template>\n  </ScalarPopover>\n</template>\n<style scoped>\n.schema > span:not(:first-child)::before {\n  content: '·';\n  display: block;\n  margin: 0 0.5ch;\n}\n\n.schema > span {\n  display: flex;\n  white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarPopover } from '@scalar/components'\nimport { ScalarIconInfo, ScalarIconWarning } from '@scalar/icons'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nimport { parameterIsInvalid } from '../libs/request'\n\nconst { item } = defineProps<{ item: RequestExampleParameter }>()\n\nconst isInvalid = computed(() => !!parameterIsInvalid(item).value)\n</script>\n<template>\n  <ScalarPopover\n    teleport\n    :offset=\"4\"\n    placement=\"left\">\n    <button\n      type=\"button\"\n      :aria-label=\"isInvalid ? 'Input is invalid' : 'More Information'\"\n      class=\"text-c-2 hover:text-c-1 hover:bg-b-2 rounded p-1\"\n      :role=\"isInvalid ? 'alert' : 'none'\">\n      <ScalarIconWarning\n        v-if=\"isInvalid\"\n        class=\"text-orange size-3.5 brightness-90 hover:brightness-75\" />\n      <ScalarIconInfo\n        v-else\n        class=\"text-c-2 hover:text-c-1 size-3.5\" />\n    </button>\n    <template #popover>\n      <div\n        class=\"w-content text-xxs text-c-1 grid min-w-48 gap-1.5 rounded px-1.5 pt-2 pb-1.5 leading-none\">\n        <div\n          v-if=\"isInvalid\"\n          class=\"text-error-1\">\n          {{ parameterIsInvalid(item).value }}\n        </div>\n        <div\n          v-else-if=\"\n            item.type ||\n            item.format ||\n            item.minimum ||\n            item.maximum ||\n            item.default\n          \"\n          class=\"schema text-c-2 flex items-center\">\n          <span v-if=\"item.type\">{{ item.type }}</span>\n          <span v-if=\"item.format\">{{ item.format }}</span>\n          <span v-if=\"item.minimum\">min: {{ item.minimum }}</span>\n          <span v-if=\"item.maximum\">max: {{ item.maximum }}</span>\n          <span v-if=\"item.default\">default: {{ item.default }}</span>\n        </div>\n        <span\n          v-if=\"item.description && !isInvalid\"\n          class=\"text-sm leading-snug text-pretty\"\n          :style=\"{ maxWidth: '16rem' }\">\n          {{ item.description }}\n        </span>\n      </div>\n    </template>\n  </ScalarPopover>\n</template>\n<style scoped>\n.schema > span:not(:first-child)::before {\n  content: '·';\n  display: block;\n  margin: 0 0.5ch;\n}\n\n.schema > span {\n  display: flex;\n  white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarTooltip } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { RouterLink, type RouteLocationRaw } from 'vue-router'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableCell from '@/components/DataTable/DataTableCell.vue'\nimport DataTableCheckbox from '@/components/DataTable/DataTableCheckbox.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport { hasItemProperties, parameterIsInvalid } from '../libs/request'\nimport RequestTableTooltip from './RequestTableTooltip.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    items?: (RequestExampleParameter & { route?: RouteLocationRaw })[]\n    /** Hide the enabled column */\n    hasCheckboxDisabled?: boolean\n    showUploadButton?: boolean\n    isGlobal?: boolean\n    isReadOnly?: boolean\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    invalidParams?: Set<string>\n    label?: string\n  }>(),\n  {\n    hasCheckboxDisabled: false,\n    showUploadButton: false,\n    isGlobal: false,\n    isReadOnly: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'updateRow', idx: number, field: 'key' | 'value', value: string): void\n  (e: 'toggleRow', idx: number, enabled: boolean): void\n  (e: 'addRow'): void\n  (e: 'deleteRow', idx: number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'uploadFile', idx: number): void\n  (e: 'removeFile', idx: number): void\n}>()\n\nconst columns = ['', '', '36px']\n\nconst handleSelectVariable = (\n  idx: number,\n  field: 'key' | 'value',\n  value: string,\n) => {\n  emit('updateRow', idx, field, value)\n}\n\nconst handleFileUpload = (idx: number) => {\n  emit('uploadFile', idx)\n}\n\nconst flattenValue = (item: RequestExampleParameter) => {\n  return Array.isArray(item.default) && item.default.length === 1\n    ? item.default[0]\n    : item.default\n}\n\n// Shows delete button if the item has key or value filled\nconst showDeleteButton = (item: RequestExampleParameter) => {\n  return Boolean(item.key || item.value)\n}\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>{{ label }} Enabled</DataTableHeader>\n      <DataTableHeader>{{ label }} Key</DataTableHeader>\n      <DataTableHeader>{{ label }} Value</DataTableHeader>\n    </DataTableRow>\n    <DataTableRow\n      v-for=\"(item, idx) in items\"\n      :id=\"item.key\"\n      :key=\"idx\"\n      :class=\"{\n        alert: parameterIsInvalid(item).value,\n        error: invalidParams && invalidParams.has(item.key),\n      }\">\n      <template v-if=\"isGlobal\">\n        <RouterLink\n          class=\"text-c-2 flex items-center justify-center border-t !border-r\"\n          :to=\"item.route ?? {}\">\n          <span class=\"sr-only\">Global</span>\n          <ScalarTooltip\n            content=\"Global cookies are shared across the whole workspace.\"\n            placement=\"top\">\n            <ScalarIcon\n              tabindex=\"0\"\n              class=\"text-c-1\"\n              icon=\"Globe\"\n              size=\"xs\" />\n          </ScalarTooltip>\n        </RouterLink>\n      </template>\n      <template v-else>\n        <DataTableCheckbox\n          class=\"!border-r\"\n          :disabled=\"props.hasCheckboxDisabled\"\n          :modelValue=\"item.enabled\"\n          @update:modelValue=\"(v) => emit('toggleRow', idx, v)\" />\n      </template>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Key`\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :modelValue=\"item.key\"\n          placeholder=\"Key\"\n          :required=\"Boolean(item.required)\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'key', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'key', v)\n          \" />\n      </DataTableCell>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Value`\"\n          :class=\"\n            hasItemProperties(item)\n              ? 'pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10'\n              : 'group-hover:pr-6 group-has-[.cm-focused]:pr-6'\n          \"\n          :default=\"item.default\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :enum=\"item.enum ?? []\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :examples=\"item.examples ?? []\"\n          :max=\"item.maximum\"\n          :min=\"item.minimum\"\n          :modelValue=\"item.value\"\n          :nullable=\"Boolean(item.nullable)\"\n          placeholder=\"Value\"\n          :type=\"item.type\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'value', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'value', v)\n          \">\n          <template #icon>\n            <ScalarButton\n              v-if=\"showDeleteButton(item) && !item.required\"\n              :class=\"{\n                '-mr-0.5': hasItemProperties(item),\n              }\"\n              class=\"text-c-2 hover:text-c-1 hover:bg-b-2 z-context hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click=\"emit('deleteRow', idx)\">\n              <ScalarIconTrash class=\"size-3.5\" />\n            </ScalarButton>\n            <RequestTableTooltip\n              v-if=\"hasItemProperties(item)\"\n              :item=\"{ ...item, default: flattenValue(item) }\" />\n          </template>\n        </CodeInput>\n      </DataTableCell>\n      <DataTableCell\n        v-if=\"showUploadButton\"\n        class=\"group/upload flex items-center justify-center whitespace-nowrap\">\n        <template v-if=\"item.file\">\n          <div\n            class=\"text-c-2 filemask flex w-full max-w-[100%] items-end justify-end overflow-hidden p-1\">\n            <span>{{ item.file?.name }}</span>\n          </div>\n          <button\n            class=\"bg-b-2 centered-x centered-y absolute hidden w-[calc(100%_-_8px)] rounded p-0.5 text-center text-xs font-medium group-hover/upload:block\"\n            type=\"button\"\n            @click=\"emit('removeFile', idx)\">\n            Delete\n          </button>\n        </template>\n        <template v-else>\n          <div class=\"p-0.5\">\n            <ScalarButton\n              class=\"bg-b-2 hover:bg-b-3 text-c-2 h-fit border-0 py-px shadow-none\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"handleFileUpload(idx)\">\n              <span>Upload File</span>\n              <ScalarIcon\n                class=\"ml-1\"\n                icon=\"Upload\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n            </ScalarButton>\n          </div>\n        </template>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.filemask {\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarTooltip } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { RouterLink, type RouteLocationRaw } from 'vue-router'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableCell from '@/components/DataTable/DataTableCell.vue'\nimport DataTableCheckbox from '@/components/DataTable/DataTableCheckbox.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport { hasItemProperties, parameterIsInvalid } from '../libs/request'\nimport RequestTableTooltip from './RequestTableTooltip.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    items?: (RequestExampleParameter & { route?: RouteLocationRaw })[]\n    /** Hide the enabled column */\n    hasCheckboxDisabled?: boolean\n    showUploadButton?: boolean\n    isGlobal?: boolean\n    isReadOnly?: boolean\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    invalidParams?: Set<string>\n    label?: string\n  }>(),\n  {\n    hasCheckboxDisabled: false,\n    showUploadButton: false,\n    isGlobal: false,\n    isReadOnly: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'updateRow', idx: number, field: 'key' | 'value', value: string): void\n  (e: 'toggleRow', idx: number, enabled: boolean): void\n  (e: 'addRow'): void\n  (e: 'deleteRow', idx: number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'uploadFile', idx: number): void\n  (e: 'removeFile', idx: number): void\n}>()\n\nconst columns = ['', '', '36px']\n\nconst handleSelectVariable = (\n  idx: number,\n  field: 'key' | 'value',\n  value: string,\n) => {\n  emit('updateRow', idx, field, value)\n}\n\nconst handleFileUpload = (idx: number) => {\n  emit('uploadFile', idx)\n}\n\nconst flattenValue = (item: RequestExampleParameter) => {\n  return Array.isArray(item.default) && item.default.length === 1\n    ? item.default[0]\n    : item.default\n}\n\n// Shows delete button if the item has key or value filled\nconst showDeleteButton = (item: RequestExampleParameter) => {\n  return Boolean(item.key || item.value)\n}\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>{{ label }} Enabled</DataTableHeader>\n      <DataTableHeader>{{ label }} Key</DataTableHeader>\n      <DataTableHeader>{{ label }} Value</DataTableHeader>\n    </DataTableRow>\n    <DataTableRow\n      v-for=\"(item, idx) in items\"\n      :id=\"item.key\"\n      :key=\"idx\"\n      :class=\"{\n        alert: parameterIsInvalid(item).value,\n        error: invalidParams && invalidParams.has(item.key),\n      }\">\n      <template v-if=\"isGlobal\">\n        <RouterLink\n          class=\"text-c-2 flex items-center justify-center border-t !border-r\"\n          :to=\"item.route ?? {}\">\n          <span class=\"sr-only\">Global</span>\n          <ScalarTooltip\n            content=\"Global cookies are shared across the whole workspace.\"\n            placement=\"top\">\n            <ScalarIcon\n              tabindex=\"0\"\n              class=\"text-c-1\"\n              icon=\"Globe\"\n              size=\"xs\" />\n          </ScalarTooltip>\n        </RouterLink>\n      </template>\n      <template v-else>\n        <DataTableCheckbox\n          class=\"!border-r\"\n          :disabled=\"props.hasCheckboxDisabled\"\n          :modelValue=\"item.enabled\"\n          @update:modelValue=\"(v) => emit('toggleRow', idx, v)\" />\n      </template>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Key`\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :modelValue=\"item.key\"\n          placeholder=\"Key\"\n          :required=\"Boolean(item.required)\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'key', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'key', v)\n          \" />\n      </DataTableCell>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Value`\"\n          :class=\"\n            hasItemProperties(item)\n              ? 'pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10'\n              : 'group-hover:pr-6 group-has-[.cm-focused]:pr-6'\n          \"\n          :default=\"item.default\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :enum=\"item.enum ?? []\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :examples=\"item.examples ?? []\"\n          :max=\"item.maximum\"\n          :min=\"item.minimum\"\n          :modelValue=\"item.value\"\n          :nullable=\"Boolean(item.nullable)\"\n          placeholder=\"Value\"\n          :type=\"item.type\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'value', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'value', v)\n          \">\n          <template #icon>\n            <ScalarButton\n              v-if=\"showDeleteButton(item) && !item.required\"\n              :class=\"{\n                '-mr-0.5': hasItemProperties(item),\n              }\"\n              class=\"text-c-2 hover:text-c-1 hover:bg-b-2 z-context hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click=\"emit('deleteRow', idx)\">\n              <ScalarIconTrash class=\"size-3.5\" />\n            </ScalarButton>\n            <RequestTableTooltip\n              v-if=\"hasItemProperties(item)\"\n              :item=\"{ ...item, default: flattenValue(item) }\" />\n          </template>\n        </CodeInput>\n      </DataTableCell>\n      <DataTableCell\n        v-if=\"showUploadButton\"\n        class=\"group/upload flex items-center justify-center whitespace-nowrap\">\n        <template v-if=\"item.file\">\n          <div\n            class=\"text-c-2 filemask flex w-full max-w-[100%] items-end justify-end overflow-hidden p-1\">\n            <span>{{ item.file?.name }}</span>\n          </div>\n          <button\n            class=\"bg-b-2 centered-x centered-y absolute hidden w-[calc(100%_-_8px)] rounded p-0.5 text-center text-xs font-medium group-hover/upload:block\"\n            type=\"button\"\n            @click=\"emit('removeFile', idx)\">\n            Delete\n          </button>\n        </template>\n        <template v-else>\n          <div class=\"p-0.5\">\n            <ScalarButton\n              class=\"bg-b-2 hover:bg-b-3 text-c-2 h-fit border-0 py-px shadow-none\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"handleFileUpload(idx)\">\n              <span>Upload File</span>\n              <ScalarIcon\n                class=\"ml-1\"\n                icon=\"Upload\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n            </ScalarButton>\n          </div>\n        </template>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.filemask {\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarListbox } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type Operation,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport type { Entries } from 'type-fest'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useFileDialog } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport RequestTable from './RequestTable.vue'\n\nconst { example, operation, environment, envVariables, workspace, title } =\n  defineProps<{\n    example: RequestExample\n    operation: Operation\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    title: string\n  }>()\n\nconst { requestExampleMutators } = useWorkspace()\n\n/** use-codemirror package to be updated accordingly */\nconst contentTypeToLanguageMap = {\n  json: 'json',\n  xml: 'xml',\n  yaml: 'yaml',\n  edn: 'edn',\n  other: 'html',\n} as const\n\nconst contentTypes = {\n  multipartForm: 'Multipart Form',\n  formUrlEncoded: 'Form URL Encoded',\n  binaryFile: 'Binary File',\n  json: 'JSON',\n  xml: 'XML',\n  yaml: 'YAML',\n  edn: 'EDN',\n  other: 'Other',\n  none: 'None',\n} as const\ntype ContentType = keyof typeof contentTypes\n\n/** Convert content types to options for the dropdown */\nconst contentTypeOptions = (\n  Object.entries(contentTypes) as Entries<typeof contentTypes>\n).map(([id, label]) => ({\n  id,\n  label,\n}))\n\n/** Match the activeBody to the contentTypeOptions */\nconst activeExampleContentType = computed(() => {\n  const { activeBody, formData, raw } = example.body\n\n  // Form\n  if (activeBody === 'formData') {\n    return formData?.encoding === 'urlencoded'\n      ? 'formUrlEncoded'\n      : 'multipartForm'\n  }\n  // Binary\n  if (activeBody === 'binary') {\n    return 'binaryFile'\n  }\n  // Raw\n  if (activeBody === 'raw' && raw?.encoding) {\n    if (raw.encoding === 'html' || raw.encoding === 'text') {\n      return 'other'\n    }\n    return raw.encoding\n  }\n\n  // Set content type from request if present\n  const contentType = Object.keys(operation.requestBody?.content || {})[0]\n\n  return contentType || 'none'\n})\n/** Selected ref from options above */\nconst selectedContentType = computed({\n  get: () =>\n    contentTypeOptions.find(\n      (opt) => opt.id === activeExampleContentType.value,\n    ) ??\n    contentTypeOptions[contentTypeOptions.length - 1] ??\n    contentTypeOptions[0],\n  set: (opt) => {\n    if (opt?.id) {\n      updateActiveBody(opt.id)\n    }\n  },\n})\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\nconst codeInputLanguage = computed(() => {\n  const type = selectedContentType.value\n    ?.id as keyof typeof contentTypeToLanguageMap\n  return contentTypeToLanguageMap[type] ?? 'plaintext'\n})\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = formParams.value\n\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams[rowIdx] = {\n      ...updatedParams[rowIdx],\n      value: updatedParams[rowIdx]?.value || '',\n      key: updatedParams[rowIdx]?.key || '',\n      enabled: updatedParams[rowIdx]?.enabled ?? false,\n      [field]: value || '',\n    }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx]?.key !== '' ||\n      updatedParams[rowIdx]?.value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx]?.key === '' &&\n      updatedParams[rowIdx]?.value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n\n    requestExampleMutators.edit(example.uid, 'body.formData.value', payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\nconst formParams = computed(() => example.body.formData?.value ?? [])\n\n/** ensure one empty row by default */\nconst defaultRow = () => {\n  const lastParam = formParams.value[formParams.value.length - 1]\n  if (!lastParam || lastParam.key !== '' || lastParam.value !== '') {\n    addRow()\n  }\n}\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({\n    enabled: false,\n  })\n  const newParams = [...formParams.value, newParam]\n\n  // Ensure we have formData\n  if (example.body.formData) {\n    requestExampleMutators.edit(example.uid, 'body.formData.value', newParams)\n  } else {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      value: newParams,\n      encoding: 'form-data',\n    })\n  }\n}\n\n/** Enable and disables the row */\nconst toggleRow = (rowIdx: number, enabled: boolean) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].enabled = enabled\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\nconst updateRequestBody = (value: string) =>\n  requestExampleMutators.edit(example.uid, 'body.raw.value', value)\n\n/** Take the select option and return bodyType with encoding and header */\nconst getBodyType = (type: ContentType) => {\n  if (type === 'multipartForm') {\n    return {\n      activeBody: 'formData',\n      encoding: 'form-data',\n      header: 'multipart/form-data',\n    } as const\n  }\n  if (type === 'formUrlEncoded') {\n    return {\n      activeBody: 'formData',\n      encoding: 'urlencoded',\n      header: 'application/x-www-form-urlencoded',\n    } as const\n  }\n  if (type === 'binaryFile') {\n    return {\n      activeBody: 'binary',\n      encoding: undefined,\n      header: 'application/octet-stream',\n    } as const\n  }\n  if (type === 'json') {\n    const contentTypes = Object.keys(operation.requestBody?.content ?? {})\n\n    // Gets json content types including vendor specific ones\n    const jsonContentType =\n      contentTypes.find((t) => t.includes('json') || t.endsWith('+json')) ||\n      'application/json'\n\n    return {\n      activeBody: 'raw',\n      encoding: 'json',\n      header: jsonContentType,\n    } as const\n  }\n  if (type === 'xml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'xml',\n      header: 'application/xml',\n    } as const\n  }\n  if (type === 'yaml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'yaml',\n      header: 'application/yaml',\n    } as const\n  }\n  if (type === 'edn') {\n    return {\n      activeBody: 'raw',\n      encoding: 'edn',\n      header: 'application/edn',\n    } as const\n  }\n  if (type === 'other') {\n    const opContentTypes = Object.keys(operation.requestBody?.content ?? {})\n    const textContentType = opContentTypes.find((t) => t.startsWith('text/'))\n\n    return {\n      activeBody: 'raw',\n      encoding: textContentType ? 'text' : 'html',\n      header: textContentType ?? 'application/html',\n    } as const\n  }\n\n  return { activeBody: 'raw', encoding: undefined, header: undefined } as const\n}\n\n/** Set active body AND encoding */\nconst updateActiveBody = (type: ContentType) => {\n  const { activeBody, encoding, header } = getBodyType(type)\n  requestExampleMutators.edit(example.uid, 'body.activeBody', activeBody)\n\n  // Set encoding safely\n  if (encoding && activeBody === 'raw') {\n    requestExampleMutators.edit(example.uid, 'body.raw', {\n      encoding,\n      value: example.body.raw?.value ?? '',\n    })\n  } else if (encoding && activeBody === 'formData') {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      encoding,\n      value: example.body.formData?.value ?? [],\n    })\n  }\n  // Remove raw if no encoding and not binary\n  else if (!encoding && activeBody !== 'binary') {\n    const { raw: deleteMe, ...body } = example.body\n    requestExampleMutators.edit(example.uid, 'body', body)\n  }\n\n  // Handle headers\n  const headers = [...example.parameters.headers]\n  const contentTypeIdx = headers.findIndex(\n    (h) => h.key.toLowerCase() === 'content-type',\n  )\n\n  if (contentTypeIdx >= 0) {\n    // Update header if exists\n    if (header && headers[contentTypeIdx]) {\n      headers[contentTypeIdx].value = header\n    }\n    // Remove header if we don't want one\n    else if (\n      headers[contentTypeIdx] &&\n      (activeBody !== 'raw' || type === 'none')\n    ) {\n      headers.splice(contentTypeIdx, 1)\n    }\n  }\n  // Add header if doesn't have one\n  else if (header) {\n    const lastHeader = headers[headers.length - 1]\n    // Add header before last if empty to prevent empty row duplication\n    if (lastHeader && lastHeader.key === '' && lastHeader.value === '') {\n      headers.splice(headers.length - 1, 0, {\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    } else {\n      headers.push({\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    }\n  }\n\n  requestExampleMutators.edit(example.uid, 'parameters.headers', headers)\n}\n\nconst handleFileUploadFormData = (rowIdx: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        const currentParams = formParams.value\n        const updatedParams = [...currentParams]\n        updatedParams[rowIdx] = {\n          ...updatedParams[rowIdx],\n          file,\n          value: updatedParams[rowIdx]?.value || file.name,\n          key: updatedParams[rowIdx]?.key || file.name,\n          enabled: true,\n        }\n        requestExampleMutators.edit(\n          example.uid,\n          'body.formData.value',\n          updatedParams,\n        )\n\n        defaultRow()\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\nconst removeBinaryFile = () =>\n  requestExampleMutators.edit(example.uid, 'body.binary', undefined)\n\nfunction handleRemoveFileFormData(rowIdx: number) {\n  const currentParams = formParams.value\n  const updatedParams = [...currentParams]\n  const param = currentParams[rowIdx]\n  const file = param?.file as File | undefined\n\n  // Empty key value or non updated file name then remove the row\n  if (\n    currentParams.length > 1 &&\n    ((!param?.key && !param?.value) ||\n      (file && param?.key === file.name && param?.value === file.name))\n  ) {\n    updatedParams.splice(rowIdx, 1)\n  } else {\n    // File name updated then remove file only\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].file = undefined\n    }\n  }\n  requestExampleMutators.edit(example.uid, 'body.formData.value', updatedParams)\n}\n\nfunction handleFileUpload() {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        requestExampleMutators.edit(example.uid, 'body.binary', file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n// we always add an empty row if its empty :)\nwatch(\n  selectedContentType,\n  (val) => {\n    if (['multipartForm', 'formUrlEncoded'].includes(val?.id || '')) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => example.uid,\n  () => {\n    operation.method &&\n      canMethodHaveBody(operation.method) &&\n      updateActiveBody(activeExampleContentType.value as ContentType)\n\n    // Add extra row on page route change as well\n    if (\n      ['multipartForm', 'formUrlEncoded'].includes(\n        activeExampleContentType.value as ContentType,\n      )\n    ) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst exampleOptions = computed(() => {\n  const contentType = selectedContentType.value?.id\n  const { header } = getBodyType(contentType as ContentType)\n  const content = operation.requestBody?.content || {}\n  const examples = header ? content[header]?.examples || {} : {}\n  return Object.entries(examples).map(([key, value]) => ({\n    id: key,\n    label: key,\n    value,\n  }))\n})\n\nconst selectedExample = computed({\n  get: () => {\n    const rawValue = example.body.raw?.value ?? '{}'\n    try {\n      const parsedValue = JSON.parse(rawValue)\n      const getExample = exampleOptions.value.find((e) => {\n        const exampleValue = e.value as {\n          value: Record<string, string>\n        }\n        return (\n          JSON.stringify(exampleValue.value) === JSON.stringify(parsedValue)\n        )\n      })\n      return getExample ?? exampleOptions.value[0]\n    } catch {\n      return exampleOptions.value[0]\n    }\n  },\n  set: (opt) => {\n    if (opt?.id) {\n      const exampleOption = exampleOptions.value.find((e) => e.id === opt.id)\n      if (exampleOption) {\n        const exampleValue = exampleOption.value as {\n          value: Record<string, string>\n        }\n        updateRequestBody(JSON.stringify(exampleValue.value, null, 2))\n      }\n    }\n  },\n})\n</script>\n<template>\n  <ViewLayoutCollapse>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableRow>\n        <DataTableHeader\n          class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0\">\n          <ScalarListbox\n            v-model=\"selectedContentType\"\n            :options=\"contentTypeOptions\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedContentType?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n          <ScalarListbox\n            v-if=\"exampleOptions.length > 0\"\n            v-model=\"selectedExample\"\n            :options=\"exampleOptions\"\n            side=\"left\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal\"\n              fullWidth\n              variant=\"ghost\">\n              <span>{{ selectedExample?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n        </DataTableHeader>\n      </DataTableRow>\n      <DataTableRow>\n        <template v-if=\"selectedContentType?.id === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id === 'binaryFile'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template v-if=\"example.body.binary\">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ (example.body.binary as File).name }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"removeBinaryFile\">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"handleFileUpload\">\n                <span>Upload File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'multipartForm'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'formUrlEncoded'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else>\n          <!-- TODO: remove this as type hack when we add syntax highlighting -->\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :language=\"codeInputLanguage as CodeMirrorLanguage\"\n            lineNumbers\n            lint\n            :modelValue=\"example.body?.raw?.value ?? ''\"\n            :workspace=\"workspace\"\n            @update:modelValue=\"updateRequestBody\" />\n        </template>\n      </DataTableRow>\n      <!-- Hacky... but effective, extra table row to trick the last group -->\n      <DataTableRow />\n    </DataTable>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarListbox } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type Operation,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport type { Entries } from 'type-fest'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useFileDialog } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport RequestTable from './RequestTable.vue'\n\nconst { example, operation, environment, envVariables, workspace, title } =\n  defineProps<{\n    example: RequestExample\n    operation: Operation\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    title: string\n  }>()\n\nconst { requestExampleMutators } = useWorkspace()\n\n/** use-codemirror package to be updated accordingly */\nconst contentTypeToLanguageMap = {\n  json: 'json',\n  xml: 'xml',\n  yaml: 'yaml',\n  edn: 'edn',\n  other: 'html',\n} as const\n\nconst contentTypes = {\n  multipartForm: 'Multipart Form',\n  formUrlEncoded: 'Form URL Encoded',\n  binaryFile: 'Binary File',\n  json: 'JSON',\n  xml: 'XML',\n  yaml: 'YAML',\n  edn: 'EDN',\n  other: 'Other',\n  none: 'None',\n} as const\ntype ContentType = keyof typeof contentTypes\n\n/** Convert content types to options for the dropdown */\nconst contentTypeOptions = (\n  Object.entries(contentTypes) as Entries<typeof contentTypes>\n).map(([id, label]) => ({\n  id,\n  label,\n}))\n\n/** Match the activeBody to the contentTypeOptions */\nconst activeExampleContentType = computed(() => {\n  const { activeBody, formData, raw } = example.body\n\n  // Form\n  if (activeBody === 'formData') {\n    return formData?.encoding === 'urlencoded'\n      ? 'formUrlEncoded'\n      : 'multipartForm'\n  }\n  // Binary\n  if (activeBody === 'binary') {\n    return 'binaryFile'\n  }\n  // Raw\n  if (activeBody === 'raw' && raw?.encoding) {\n    if (raw.encoding === 'html' || raw.encoding === 'text') {\n      return 'other'\n    }\n    return raw.encoding\n  }\n\n  // Set content type from request if present\n  const contentType = Object.keys(operation.requestBody?.content || {})[0]\n\n  return contentType || 'none'\n})\n/** Selected ref from options above */\nconst selectedContentType = computed({\n  get: () =>\n    contentTypeOptions.find(\n      (opt) => opt.id === activeExampleContentType.value,\n    ) ??\n    contentTypeOptions[contentTypeOptions.length - 1] ??\n    contentTypeOptions[0],\n  set: (opt) => {\n    if (opt?.id) {\n      updateActiveBody(opt.id)\n    }\n  },\n})\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\nconst codeInputLanguage = computed(() => {\n  const type = selectedContentType.value\n    ?.id as keyof typeof contentTypeToLanguageMap\n  return contentTypeToLanguageMap[type] ?? 'plaintext'\n})\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = formParams.value\n\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams[rowIdx] = {\n      ...updatedParams[rowIdx],\n      value: updatedParams[rowIdx]?.value || '',\n      key: updatedParams[rowIdx]?.key || '',\n      enabled: updatedParams[rowIdx]?.enabled ?? false,\n      [field]: value || '',\n    }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx]?.key !== '' ||\n      updatedParams[rowIdx]?.value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx]?.key === '' &&\n      updatedParams[rowIdx]?.value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n\n    requestExampleMutators.edit(example.uid, 'body.formData.value', payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\nconst formParams = computed(() => example.body.formData?.value ?? [])\n\n/** ensure one empty row by default */\nconst defaultRow = () => {\n  const lastParam = formParams.value[formParams.value.length - 1]\n  if (!lastParam || lastParam.key !== '' || lastParam.value !== '') {\n    addRow()\n  }\n}\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({\n    enabled: false,\n  })\n  const newParams = [...formParams.value, newParam]\n\n  // Ensure we have formData\n  if (example.body.formData) {\n    requestExampleMutators.edit(example.uid, 'body.formData.value', newParams)\n  } else {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      value: newParams,\n      encoding: 'form-data',\n    })\n  }\n}\n\n/** Enable and disables the row */\nconst toggleRow = (rowIdx: number, enabled: boolean) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].enabled = enabled\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\nconst updateRequestBody = (value: string) =>\n  requestExampleMutators.edit(example.uid, 'body.raw.value', value)\n\n/** Take the select option and return bodyType with encoding and header */\nconst getBodyType = (type: ContentType) => {\n  if (type === 'multipartForm') {\n    return {\n      activeBody: 'formData',\n      encoding: 'form-data',\n      header: 'multipart/form-data',\n    } as const\n  }\n  if (type === 'formUrlEncoded') {\n    return {\n      activeBody: 'formData',\n      encoding: 'urlencoded',\n      header: 'application/x-www-form-urlencoded',\n    } as const\n  }\n  if (type === 'binaryFile') {\n    return {\n      activeBody: 'binary',\n      encoding: undefined,\n      header: 'application/octet-stream',\n    } as const\n  }\n  if (type === 'json') {\n    const contentTypes = Object.keys(operation.requestBody?.content ?? {})\n\n    // Gets json content types including vendor specific ones\n    const jsonContentType =\n      contentTypes.find((t) => t.includes('json') || t.endsWith('+json')) ||\n      'application/json'\n\n    return {\n      activeBody: 'raw',\n      encoding: 'json',\n      header: jsonContentType,\n    } as const\n  }\n  if (type === 'xml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'xml',\n      header: 'application/xml',\n    } as const\n  }\n  if (type === 'yaml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'yaml',\n      header: 'application/yaml',\n    } as const\n  }\n  if (type === 'edn') {\n    return {\n      activeBody: 'raw',\n      encoding: 'edn',\n      header: 'application/edn',\n    } as const\n  }\n  if (type === 'other') {\n    const opContentTypes = Object.keys(operation.requestBody?.content ?? {})\n    const textContentType = opContentTypes.find((t) => t.startsWith('text/'))\n\n    return {\n      activeBody: 'raw',\n      encoding: textContentType ? 'text' : 'html',\n      header: textContentType ?? 'application/html',\n    } as const\n  }\n\n  return { activeBody: 'raw', encoding: undefined, header: undefined } as const\n}\n\n/** Set active body AND encoding */\nconst updateActiveBody = (type: ContentType) => {\n  const { activeBody, encoding, header } = getBodyType(type)\n  requestExampleMutators.edit(example.uid, 'body.activeBody', activeBody)\n\n  // Set encoding safely\n  if (encoding && activeBody === 'raw') {\n    requestExampleMutators.edit(example.uid, 'body.raw', {\n      encoding,\n      value: example.body.raw?.value ?? '',\n    })\n  } else if (encoding && activeBody === 'formData') {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      encoding,\n      value: example.body.formData?.value ?? [],\n    })\n  }\n  // Remove raw if no encoding and not binary\n  else if (!encoding && activeBody !== 'binary') {\n    const { raw: deleteMe, ...body } = example.body\n    requestExampleMutators.edit(example.uid, 'body', body)\n  }\n\n  // Handle headers\n  const headers = [...example.parameters.headers]\n  const contentTypeIdx = headers.findIndex(\n    (h) => h.key.toLowerCase() === 'content-type',\n  )\n\n  if (contentTypeIdx >= 0) {\n    // Update header if exists\n    if (header && headers[contentTypeIdx]) {\n      headers[contentTypeIdx].value = header\n    }\n    // Remove header if we don't want one\n    else if (\n      headers[contentTypeIdx] &&\n      (activeBody !== 'raw' || type === 'none')\n    ) {\n      headers.splice(contentTypeIdx, 1)\n    }\n  }\n  // Add header if doesn't have one\n  else if (header) {\n    const lastHeader = headers[headers.length - 1]\n    // Add header before last if empty to prevent empty row duplication\n    if (lastHeader && lastHeader.key === '' && lastHeader.value === '') {\n      headers.splice(headers.length - 1, 0, {\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    } else {\n      headers.push({\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    }\n  }\n\n  requestExampleMutators.edit(example.uid, 'parameters.headers', headers)\n}\n\nconst handleFileUploadFormData = (rowIdx: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        const currentParams = formParams.value\n        const updatedParams = [...currentParams]\n        updatedParams[rowIdx] = {\n          ...updatedParams[rowIdx],\n          file,\n          value: updatedParams[rowIdx]?.value || file.name,\n          key: updatedParams[rowIdx]?.key || file.name,\n          enabled: true,\n        }\n        requestExampleMutators.edit(\n          example.uid,\n          'body.formData.value',\n          updatedParams,\n        )\n\n        defaultRow()\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\nconst removeBinaryFile = () =>\n  requestExampleMutators.edit(example.uid, 'body.binary', undefined)\n\nfunction handleRemoveFileFormData(rowIdx: number) {\n  const currentParams = formParams.value\n  const updatedParams = [...currentParams]\n  const param = currentParams[rowIdx]\n  const file = param?.file as File | undefined\n\n  // Empty key value or non updated file name then remove the row\n  if (\n    currentParams.length > 1 &&\n    ((!param?.key && !param?.value) ||\n      (file && param?.key === file.name && param?.value === file.name))\n  ) {\n    updatedParams.splice(rowIdx, 1)\n  } else {\n    // File name updated then remove file only\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].file = undefined\n    }\n  }\n  requestExampleMutators.edit(example.uid, 'body.formData.value', updatedParams)\n}\n\nfunction handleFileUpload() {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        requestExampleMutators.edit(example.uid, 'body.binary', file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n// we always add an empty row if its empty :)\nwatch(\n  selectedContentType,\n  (val) => {\n    if (['multipartForm', 'formUrlEncoded'].includes(val?.id || '')) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => example.uid,\n  () => {\n    operation.method &&\n      canMethodHaveBody(operation.method) &&\n      updateActiveBody(activeExampleContentType.value as ContentType)\n\n    // Add extra row on page route change as well\n    if (\n      ['multipartForm', 'formUrlEncoded'].includes(\n        activeExampleContentType.value as ContentType,\n      )\n    ) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst exampleOptions = computed(() => {\n  const contentType = selectedContentType.value?.id\n  const { header } = getBodyType(contentType as ContentType)\n  const content = operation.requestBody?.content || {}\n  const examples = header ? content[header]?.examples || {} : {}\n  return Object.entries(examples).map(([key, value]) => ({\n    id: key,\n    label: key,\n    value,\n  }))\n})\n\nconst selectedExample = computed({\n  get: () => {\n    const rawValue = example.body.raw?.value ?? '{}'\n    try {\n      const parsedValue = JSON.parse(rawValue)\n      const getExample = exampleOptions.value.find((e) => {\n        const exampleValue = e.value as {\n          value: Record<string, string>\n        }\n        return (\n          JSON.stringify(exampleValue.value) === JSON.stringify(parsedValue)\n        )\n      })\n      return getExample ?? exampleOptions.value[0]\n    } catch {\n      return exampleOptions.value[0]\n    }\n  },\n  set: (opt) => {\n    if (opt?.id) {\n      const exampleOption = exampleOptions.value.find((e) => e.id === opt.id)\n      if (exampleOption) {\n        const exampleValue = exampleOption.value as {\n          value: Record<string, string>\n        }\n        updateRequestBody(JSON.stringify(exampleValue.value, null, 2))\n      }\n    }\n  },\n})\n</script>\n<template>\n  <ViewLayoutCollapse>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableRow>\n        <DataTableHeader\n          class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0\">\n          <ScalarListbox\n            v-model=\"selectedContentType\"\n            :options=\"contentTypeOptions\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedContentType?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n          <ScalarListbox\n            v-if=\"exampleOptions.length > 0\"\n            v-model=\"selectedExample\"\n            :options=\"exampleOptions\"\n            side=\"left\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal\"\n              fullWidth\n              variant=\"ghost\">\n              <span>{{ selectedExample?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n        </DataTableHeader>\n      </DataTableRow>\n      <DataTableRow>\n        <template v-if=\"selectedContentType?.id === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id === 'binaryFile'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template v-if=\"example.body.binary\">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ (example.body.binary as File).name }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"removeBinaryFile\">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"handleFileUpload\">\n                <span>Upload File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'multipartForm'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'formUrlEncoded'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else>\n          <!-- TODO: remove this as type hack when we add syntax highlighting -->\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :language=\"codeInputLanguage as CodeMirrorLanguage\"\n            lineNumbers\n            lint\n            :modelValue=\"example.body?.raw?.value ?? ''\"\n            :workspace=\"workspace\"\n            @update:modelValue=\"updateRequestBody\" />\n        </template>\n      </DataTableRow>\n      <!-- Hacky... but effective, extra table row to trick the last group -->\n      <DataTableRow />\n    </DataTable>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTooltip } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  environment,\n  envVariables,\n  workspace,\n  title,\n  paramKey,\n  readOnlyEntries = [],\n} = defineProps<{\n  example: RequestExample\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  title: string\n  label: string\n  paramKey: keyof RequestExample['parameters']\n  readOnlyEntries?: {\n    key: string\n    value: string\n    enabled: boolean\n    route: RouteLocationRaw\n  }[]\n  invalidParams: Set<string>\n}>()\n\nconst { requestExampleMutators } = useWorkspace()\n\nconst params = computed(() => example.parameters[paramKey] ?? [])\n\nonMounted(() => {\n  nextTick(() => {\n    defaultRow()\n  })\n})\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({ enabled: false })\n  const newParams = [...params.value, newParam]\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, newParams)\n}\n\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (!updatedParams[rowIdx]) {\n      return\n    }\n\n    updatedParams[rowIdx] = { ...updatedParams[rowIdx], [field]: value }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx].key !== '' ||\n      updatedParams[rowIdx].value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx].key === '' &&\n      updatedParams[rowIdx].value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n    requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\n/** Toggle a parameter row on or off */\nconst toggleRow = (rowIdx: number, enabled: boolean) =>\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.enabled`,\n    enabled,\n  )\n\nconst deleteAllRows = () => {\n  // filter out params that are enabled or required\n  const exampleParams = params.value.filter((param) => param.required)\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}`,\n    exampleParams,\n  )\n\n  /** ensure one empty row after deleting all rows */\n  nextTick(() => addRow())\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nfunction defaultRow() {\n  /** ensure one empty row by default */\n  if (params.value.length === 0) {\n    addRow()\n  } else if (params.value.length >= 1) {\n    /** ensure we always have a trailing empty row */\n    const lastParam = params.value[params.value.length - 1]\n    if (lastParam && lastParam.key !== '' && lastParam.value !== '') {\n      addRow()\n    }\n  }\n}\n\nconst itemCount = computed(\n  () => params.value.filter((param) => param.key || param.value).length,\n)\n\nconst showTooltip = computed(() => params.value.length > 1)\n\nwatch(\n  () => example,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst hasReadOnlyEntries = computed(() => (readOnlyEntries ?? []).length > 0)\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"group/params\"\n    :itemCount=\"itemCount\">\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=\"Clear optional parameters\"\n          placement=\"left\">\n          <ScalarButton\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"deleteAllRows\">\n            Clear\n            <span class=\"sr-only\">All {{ title }}</span>\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <div ref=\"tableWrapperRef\">\n      <!-- Read-only entries pinned to the top -->\n      <RequestTable\n        v-if=\"hasReadOnlyEntries\"\n        class=\"flex-1\"\n        :class=\"{ 'bg-c-3/5': hasReadOnlyEntries }\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        isGlobal\n        isReadOnly\n        :items=\"readOnlyEntries\"\n        :label\n        :workspace=\"workspace\" />\n      <!-- Dynamic entries -->\n      <RequestTable\n        class=\"flex-1\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        :items=\"params\"\n        :label\n        :workspace=\"workspace\"\n        @toggleRow=\"toggleRow\"\n        @updateRow=\"updateRow\"\n        @deleteRow=\"deleteRow\" />\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTooltip } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  environment,\n  envVariables,\n  workspace,\n  title,\n  paramKey,\n  readOnlyEntries = [],\n} = defineProps<{\n  example: RequestExample\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  title: string\n  label: string\n  paramKey: keyof RequestExample['parameters']\n  readOnlyEntries?: {\n    key: string\n    value: string\n    enabled: boolean\n    route: RouteLocationRaw\n  }[]\n  invalidParams: Set<string>\n}>()\n\nconst { requestExampleMutators } = useWorkspace()\n\nconst params = computed(() => example.parameters[paramKey] ?? [])\n\nonMounted(() => {\n  nextTick(() => {\n    defaultRow()\n  })\n})\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({ enabled: false })\n  const newParams = [...params.value, newParam]\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, newParams)\n}\n\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (!updatedParams[rowIdx]) {\n      return\n    }\n\n    updatedParams[rowIdx] = { ...updatedParams[rowIdx], [field]: value }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx].key !== '' ||\n      updatedParams[rowIdx].value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx].key === '' &&\n      updatedParams[rowIdx].value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n    requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\n/** Toggle a parameter row on or off */\nconst toggleRow = (rowIdx: number, enabled: boolean) =>\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.enabled`,\n    enabled,\n  )\n\nconst deleteAllRows = () => {\n  // filter out params that are enabled or required\n  const exampleParams = params.value.filter((param) => param.required)\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}`,\n    exampleParams,\n  )\n\n  /** ensure one empty row after deleting all rows */\n  nextTick(() => addRow())\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nfunction defaultRow() {\n  /** ensure one empty row by default */\n  if (params.value.length === 0) {\n    addRow()\n  } else if (params.value.length >= 1) {\n    /** ensure we always have a trailing empty row */\n    const lastParam = params.value[params.value.length - 1]\n    if (lastParam && lastParam.key !== '' && lastParam.value !== '') {\n      addRow()\n    }\n  }\n}\n\nconst itemCount = computed(\n  () => params.value.filter((param) => param.key || param.value).length,\n)\n\nconst showTooltip = computed(() => params.value.length > 1)\n\nwatch(\n  () => example,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst hasReadOnlyEntries = computed(() => (readOnlyEntries ?? []).length > 0)\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"group/params\"\n    :itemCount=\"itemCount\">\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=\"Clear optional parameters\"\n          placement=\"left\">\n          <ScalarButton\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"deleteAllRows\">\n            Clear\n            <span class=\"sr-only\">All {{ title }}</span>\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <div ref=\"tableWrapperRef\">\n      <!-- Read-only entries pinned to the top -->\n      <RequestTable\n        v-if=\"hasReadOnlyEntries\"\n        class=\"flex-1\"\n        :class=\"{ 'bg-c-3/5': hasReadOnlyEntries }\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        isGlobal\n        isReadOnly\n        :items=\"readOnlyEntries\"\n        :label\n        :workspace=\"workspace\" />\n      <!-- Dynamic entries -->\n      <RequestTable\n        class=\"flex-1\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        :items=\"params\"\n        :label\n        :workspace=\"workspace\"\n        @toggleRow=\"toggleRow\"\n        @updateRow=\"updateRow\"\n        @deleteRow=\"deleteRow\" />\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { Operation, RequestExample } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, watch } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  operation,\n  paramKey,\n  title,\n  environment,\n  envVariables,\n  workspace,\n} = defineProps<{\n  example: RequestExample\n  operation: Operation\n  paramKey: keyof RequestExample['parameters']\n  title: string\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  invalidParams: Set<string>\n}>()\n\nconst { requestMutators, requestExampleMutators } = useWorkspace()\n\nconst params = computed(() =>\n  example.parameters[paramKey].map((param) => ({\n    ...param,\n    enum: param.enum,\n  })),\n)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const parameters = example.parameters[paramKey]\n  const oldKey = parameters[rowIdx]?.key\n  if (!oldKey) {\n    return\n  }\n\n  /** Change variable in path as well */\n  if (field === 'key') {\n    if (parameters[rowIdx]?.required) {\n      /** Prevent updating the key of a required item */\n      return\n    }\n    if (!value) {\n      /** Remove parameter if path params table key is empty */\n      parameters.splice(rowIdx, 1)\n      const regx = new RegExp(`/:${encodeURIComponent(oldKey)}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, '')\n\n      requestMutators.edit(operation.uid, 'path', newPath)\n    } else {\n      /** Update URL with path params table key */\n      const encodedOldKey = encodeURIComponent(oldKey)\n      const encodedNewKey = encodeURIComponent(value)\n      const regx = new RegExp(`(?<=/):${encodedOldKey}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, `:${encodedNewKey}`)\n      requestMutators.edit(operation.uid, 'path', newPath)\n    }\n  }\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.${field}`,\n    value,\n  )\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nconst setPathVariable = (url: string) => {\n  const pathVariables = url.match(REGEX.PATH)?.map((v) => v.slice(1, -1)) || []\n  const parameters = example.parameters[paramKey]\n\n  const paramMap = new Map(parameters.map((param) => [param.key, param]))\n  const updatedParameters = pathVariables.map(\n    (key) => paramMap.get(key) || { key, value: '', enabled: true },\n  )\n\n  parameters.forEach((param) => {\n    /** prevent removing required parameters or with a value */\n    if (!pathVariables.includes(param.key) && (param.value || param.required)) {\n      updatedParameters.push(param)\n    }\n  })\n  parameters.splice(0, parameters.length, ...updatedParameters)\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, parameters)\n}\n\nconst handlePathVariableUpdate = (url: string) => {\n  if (url) {\n    setPathVariable(url)\n  }\n}\n\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (newURL) {\n      handlePathVariableUpdate(newURL)\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutCollapse :itemCount=\"params.length\">\n    <template #title>\n      {{ title }}\n    </template>\n\n    <RequestTable\n      v-if=\"params.length\"\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :envVariables=\"envVariables\"\n      :environment=\"environment\"\n      :invalidParams=\"invalidParams\"\n      :items=\"params\"\n      :workspace=\"workspace\"\n      @updateRow=\"updateRow\"\n      @deleteRow=\"deleteRow\" />\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { Operation, RequestExample } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, watch } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  operation,\n  paramKey,\n  title,\n  environment,\n  envVariables,\n  workspace,\n} = defineProps<{\n  example: RequestExample\n  operation: Operation\n  paramKey: keyof RequestExample['parameters']\n  title: string\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  invalidParams: Set<string>\n}>()\n\nconst { requestMutators, requestExampleMutators } = useWorkspace()\n\nconst params = computed(() =>\n  example.parameters[paramKey].map((param) => ({\n    ...param,\n    enum: param.enum,\n  })),\n)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const parameters = example.parameters[paramKey]\n  const oldKey = parameters[rowIdx]?.key\n  if (!oldKey) {\n    return\n  }\n\n  /** Change variable in path as well */\n  if (field === 'key') {\n    if (parameters[rowIdx]?.required) {\n      /** Prevent updating the key of a required item */\n      return\n    }\n    if (!value) {\n      /** Remove parameter if path params table key is empty */\n      parameters.splice(rowIdx, 1)\n      const regx = new RegExp(`/:${encodeURIComponent(oldKey)}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, '')\n\n      requestMutators.edit(operation.uid, 'path', newPath)\n    } else {\n      /** Update URL with path params table key */\n      const encodedOldKey = encodeURIComponent(oldKey)\n      const encodedNewKey = encodeURIComponent(value)\n      const regx = new RegExp(`(?<=/):${encodedOldKey}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, `:${encodedNewKey}`)\n      requestMutators.edit(operation.uid, 'path', newPath)\n    }\n  }\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.${field}`,\n    value,\n  )\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nconst setPathVariable = (url: string) => {\n  const pathVariables = url.match(REGEX.PATH)?.map((v) => v.slice(1, -1)) || []\n  const parameters = example.parameters[paramKey]\n\n  const paramMap = new Map(parameters.map((param) => [param.key, param]))\n  const updatedParameters = pathVariables.map(\n    (key) => paramMap.get(key) || { key, value: '', enabled: true },\n  )\n\n  parameters.forEach((param) => {\n    /** prevent removing required parameters or with a value */\n    if (!pathVariables.includes(param.key) && (param.value || param.required)) {\n      updatedParameters.push(param)\n    }\n  })\n  parameters.splice(0, parameters.length, ...updatedParameters)\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, parameters)\n}\n\nconst handlePathVariableUpdate = (url: string) => {\n  if (url) {\n    setPathVariable(url)\n  }\n}\n\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (newURL) {\n      handlePathVariableUpdate(newURL)\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutCollapse :itemCount=\"params.length\">\n    <template #title>\n      {{ title }}\n    </template>\n\n    <RequestTable\n      v-if=\"params.length\"\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :envVariables=\"envVariables\"\n      :environment=\"environment\"\n      :invalidParams=\"invalidParams\"\n      :items=\"params\"\n      :workspace=\"workspace\"\n      @updateRow=\"updateRow\"\n      @deleteRow=\"deleteRow\" />\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarIcon,\n  type ScalarComboboxOption,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { snippetz, type ClientId, type TargetId } from '@scalar/snippetz'\nimport { computed, ref } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { useWorkspace } from '@/store'\nimport { CodeSnippet } from '@/views/Components/CodeSnippet'\n\nconst { collection, example, operation, server, workspace } = defineProps<{\n  collection: Collection\n  example: RequestExample\n  operation: Operation\n  server: Server | undefined\n  workspace: Workspace\n  environment: EnvVariables\n}>()\n\nconst { securitySchemes, workspaceMutators } = useWorkspace()\n\nconst localSelectedClient = computed(() => {\n  // If the current selection is a custom example\n  if (localSelectedClientState.value.targetKey === 'custom') {\n    // Check if this custom example still exists in the new operation\n    const customExampleExists = codeSamples.value?.some(\n      (sample) => sample.lang === localSelectedClientState.value.clientKey,\n    )\n\n    // If it exists, keep using it\n    if (customExampleExists) {\n      return localSelectedClientState.value\n    }\n  }\n\n  // Otherwise fall back to workspace selection\n  return {\n    targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n    clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n  }\n})\n\nconst codeSamples = computed(\n  () =>\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'],\n)\n\n// Store the actual selected state\nconst localSelectedClientState = ref(\n  codeSamples.value?.length\n    ? {\n        targetKey: 'custom',\n        clientKey: codeSamples.value[0]?.lang,\n      }\n    : {\n        targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n        clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n      },\n)\n\n/**\n * Returns selected security schemes for the request\n */\nconst selectedSecuritySchemes = computed(() => {\n  const uids =\n    operation.selectedSecuritySchemeUids ||\n    collection.selectedSecuritySchemeUids ||\n    []\n  return uids\n    .flat()\n    .map((uid) => securitySchemes[uid])\n    .filter((scheme): scheme is SecurityScheme => Boolean(scheme))\n})\n\n/**\n * Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop\n **/\nconst snippets = computed(() => {\n  const dict: Record<string, string> = {}\n\n  // Get the built-in snippets\n  const builtInOptions = snippetz()\n    .clients()\n    .map((group) => ({\n      label: group.title,\n      options: group.clients.map((plugin) => {\n        dict[`${group.key},${plugin.client}`] = plugin.title\n        return {\n          id: `${group.key},${plugin.client}`,\n          label: plugin.title,\n        }\n      }),\n    }))\n\n  // Get any custom code samples from x-codeSamples\n  const customExamples = (\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'] ||\n    []\n  ).map((sample) => ({\n    id: `custom,${sample.lang}`,\n    label: sample.label || sample.lang,\n  }))\n\n  // If we have custom samples, add them as a new group\n  const options =\n    customExamples.length > 0\n      ? [\n          {\n            id: 'customExamples',\n            label: 'Code Examples',\n            options: customExamples.map((customExample) => ({\n              id: customExample.id,\n              label: customExample.label ?? customExample.id,\n            })),\n          },\n          ...builtInOptions,\n        ]\n      : builtInOptions\n\n  // Add custom samples to the dictionary\n  customExamples.forEach((sample) => {\n    dict[sample.id] = sample.label ?? sample.id\n  })\n\n  return {\n    options,\n    dict,\n  }\n})\n\n/** The currently selected plugin */\nconst selectedPlugin = computed(() => {\n  const client = localSelectedClient.value\n\n  // Handle custom examples\n  if (client.targetKey === 'custom') {\n    const id = `custom,${client.clientKey}`\n    return {\n      id,\n      label: snippets.value.dict[id] ?? 'Unknown',\n    }\n  }\n\n  // Handle regular snippetz plugins\n  const id = `${client.targetKey},${client.clientKey}`\n  return {\n    id,\n    label: snippets.value.dict[id] ?? 'Unknown',\n  }\n})\n\n/** The currently selected target */\nconst selectedTarget = computed(\n  () => localSelectedClient.value.targetKey as TargetId,\n)\n\n/** The currently selected client */\nconst selectedClient = computed(\n  () => localSelectedClient.value.clientKey as ClientId<TargetId>,\n)\n\n/** Update the selection when a new client is picked */\nconst selectClient = (value: ScalarComboboxOption | undefined) => {\n  if (!value) {\n    return\n  }\n  const { id } = value\n  const [target, client] = id.split(',')\n\n  if (!target || !client) {\n    return\n  }\n\n  // Update the state ref\n  localSelectedClientState.value = {\n    targetKey: target,\n    clientKey: client,\n  }\n\n  // Only update workspace for non-custom selections\n  if (target !== 'custom') {\n    workspaceMutators.edit(workspace.uid, 'selectedHttpClient', {\n      targetKey: target,\n      clientKey: client,\n    })\n  }\n}\n\n/** Get the code sample content for a custom example */\nconst customCodeContent = computed(() => {\n  if (!selectedPlugin.value.id.startsWith('custom,')) {\n    return undefined\n  }\n\n  const lang = selectedPlugin.value.id.split(',')[1]\n  const sample = codeSamples.value?.find((s) => s.lang === lang)\n  return sample?.source\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"group/preview w-full border-b-0\"\n      :defaultOpen=\"false\">\n      <template #title>Code Snippet</template>\n      <template #actions>\n        <div class=\"flex flex-1\">\n          <ScalarCombobox\n            :modelValue=\"selectedPlugin\"\n            :options=\"snippets.options\"\n            placement=\"bottom-end\"\n            @update:modelValue=\"selectClient\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedPlugin?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarCombobox>\n        </div>\n      </template>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div\n            class=\"bg-b-1 flex items-center justify-center overflow-hidden border-t\">\n            <!-- Use the given code example -->\n            <template v-if=\"customCodeContent\">\n              <ScalarCodeBlock\n                :content=\"customCodeContent\"\n                :lang=\"selectedPlugin.id.split(',')[1] ?? 'plaintext'\" />\n            </template>\n            <!-- Generate a code snippet -->\n            <template v-else>\n              <CodeSnippet\n                :client=\"selectedClient\"\n                :example=\"example\"\n                :operation=\"operation\"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :server=\"server\"\n                :target=\"selectedTarget\"\n                :environment=\"environment\" />\n            </template>\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n<style scoped>\n:deep(code.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarIcon,\n  type ScalarComboboxOption,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { snippetz, type ClientId, type TargetId } from '@scalar/snippetz'\nimport { computed, ref } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { useWorkspace } from '@/store'\nimport { CodeSnippet } from '@/views/Components/CodeSnippet'\n\nconst { collection, example, operation, server, workspace } = defineProps<{\n  collection: Collection\n  example: RequestExample\n  operation: Operation\n  server: Server | undefined\n  workspace: Workspace\n  environment: EnvVariables\n}>()\n\nconst { securitySchemes, workspaceMutators } = useWorkspace()\n\nconst localSelectedClient = computed(() => {\n  // If the current selection is a custom example\n  if (localSelectedClientState.value.targetKey === 'custom') {\n    // Check if this custom example still exists in the new operation\n    const customExampleExists = codeSamples.value?.some(\n      (sample) => sample.lang === localSelectedClientState.value.clientKey,\n    )\n\n    // If it exists, keep using it\n    if (customExampleExists) {\n      return localSelectedClientState.value\n    }\n  }\n\n  // Otherwise fall back to workspace selection\n  return {\n    targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n    clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n  }\n})\n\nconst codeSamples = computed(\n  () =>\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'],\n)\n\n// Store the actual selected state\nconst localSelectedClientState = ref(\n  codeSamples.value?.length\n    ? {\n        targetKey: 'custom',\n        clientKey: codeSamples.value[0]?.lang,\n      }\n    : {\n        targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n        clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n      },\n)\n\n/**\n * Returns selected security schemes for the request\n */\nconst selectedSecuritySchemes = computed(() => {\n  const uids =\n    operation.selectedSecuritySchemeUids ||\n    collection.selectedSecuritySchemeUids ||\n    []\n  return uids\n    .flat()\n    .map((uid) => securitySchemes[uid])\n    .filter((scheme): scheme is SecurityScheme => Boolean(scheme))\n})\n\n/**\n * Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop\n **/\nconst snippets = computed(() => {\n  const dict: Record<string, string> = {}\n\n  // Get the built-in snippets\n  const builtInOptions = snippetz()\n    .clients()\n    .map((group) => ({\n      label: group.title,\n      options: group.clients.map((plugin) => {\n        dict[`${group.key},${plugin.client}`] = plugin.title\n        return {\n          id: `${group.key},${plugin.client}`,\n          label: plugin.title,\n        }\n      }),\n    }))\n\n  // Get any custom code samples from x-codeSamples\n  const customExamples = (\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'] ||\n    []\n  ).map((sample) => ({\n    id: `custom,${sample.lang}`,\n    label: sample.label || sample.lang,\n  }))\n\n  // If we have custom samples, add them as a new group\n  const options =\n    customExamples.length > 0\n      ? [\n          {\n            id: 'customExamples',\n            label: 'Code Examples',\n            options: customExamples.map((customExample) => ({\n              id: customExample.id,\n              label: customExample.label ?? customExample.id,\n            })),\n          },\n          ...builtInOptions,\n        ]\n      : builtInOptions\n\n  // Add custom samples to the dictionary\n  customExamples.forEach((sample) => {\n    dict[sample.id] = sample.label ?? sample.id\n  })\n\n  return {\n    options,\n    dict,\n  }\n})\n\n/** The currently selected plugin */\nconst selectedPlugin = computed(() => {\n  const client = localSelectedClient.value\n\n  // Handle custom examples\n  if (client.targetKey === 'custom') {\n    const id = `custom,${client.clientKey}`\n    return {\n      id,\n      label: snippets.value.dict[id] ?? 'Unknown',\n    }\n  }\n\n  // Handle regular snippetz plugins\n  const id = `${client.targetKey},${client.clientKey}`\n  return {\n    id,\n    label: snippets.value.dict[id] ?? 'Unknown',\n  }\n})\n\n/** The currently selected target */\nconst selectedTarget = computed(\n  () => localSelectedClient.value.targetKey as TargetId,\n)\n\n/** The currently selected client */\nconst selectedClient = computed(\n  () => localSelectedClient.value.clientKey as ClientId<TargetId>,\n)\n\n/** Update the selection when a new client is picked */\nconst selectClient = (value: ScalarComboboxOption | undefined) => {\n  if (!value) {\n    return\n  }\n  const { id } = value\n  const [target, client] = id.split(',')\n\n  if (!target || !client) {\n    return\n  }\n\n  // Update the state ref\n  localSelectedClientState.value = {\n    targetKey: target,\n    clientKey: client,\n  }\n\n  // Only update workspace for non-custom selections\n  if (target !== 'custom') {\n    workspaceMutators.edit(workspace.uid, 'selectedHttpClient', {\n      targetKey: target,\n      clientKey: client,\n    })\n  }\n}\n\n/** Get the code sample content for a custom example */\nconst customCodeContent = computed(() => {\n  if (!selectedPlugin.value.id.startsWith('custom,')) {\n    return undefined\n  }\n\n  const lang = selectedPlugin.value.id.split(',')[1]\n  const sample = codeSamples.value?.find((s) => s.lang === lang)\n  return sample?.source\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"group/preview w-full border-b-0\"\n      :defaultOpen=\"false\">\n      <template #title>Code Snippet</template>\n      <template #actions>\n        <div class=\"flex flex-1\">\n          <ScalarCombobox\n            :modelValue=\"selectedPlugin\"\n            :options=\"snippets.options\"\n            placement=\"bottom-end\"\n            @update:modelValue=\"selectClient\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedPlugin?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarCombobox>\n        </div>\n      </template>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div\n            class=\"bg-b-1 flex items-center justify-center overflow-hidden border-t\">\n            <!-- Use the given code example -->\n            <template v-if=\"customCodeContent\">\n              <ScalarCodeBlock\n                :content=\"customCodeContent\"\n                :lang=\"selectedPlugin.id.split(',')[1] ?? 'plaintext'\" />\n            </template>\n            <!-- Generate a code snippet -->\n            <template v-else>\n              <CodeSnippet\n                :client=\"selectedClient\"\n                :example=\"example\"\n                :operation=\"operation\"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :server=\"server\"\n                :target=\"selectedTarget\"\n                :environment=\"environment\" />\n            </template>\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n<style scoped>\n:deep(code.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { SelectedSecuritySchemeUids } from '@scalar/oas-utils/entities/shared'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody, isDefined, REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useLayout } from '@/hooks'\nimport { matchesDomain } from '@/libs/send-request/set-request-cookies'\nimport { usePluginManager } from '@/plugins'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestBody from '@/views/Request/RequestSection/RequestBody.vue'\nimport RequestParams from '@/views/Request/RequestSection/RequestParams.vue'\nimport RequestPathParams from '@/views/Request/RequestSection/RequestPathParams.vue'\n\nimport RequestAuth from './RequestAuth/RequestAuth.vue'\nimport RequestCodeExample from './RequestCodeExample.vue'\n\nconst {\n  collection,\n  environment,\n  envVariables,\n  example,\n  operation,\n  selectedSecuritySchemeUids,\n  server,\n  workspace,\n} = defineProps<{\n  collection: Collection\n  environment: Environment\n  envVariables: EnvVariable[]\n  example: RequestExample\n  invalidParams: Set<string>\n  operation: Operation\n  selectedSecuritySchemeUids: SelectedSecuritySchemeUids\n  server: Server | undefined\n  workspace: Workspace\n}>()\n\nconst requestSections = [\n  'Auth',\n  'Path Parameters',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n  // 'Scripts',\n] as const\n\ntype Filter = 'All' | (typeof requestSections)[number]\n\nconst { requestMutators, cookies, securitySchemes } = useWorkspace()\nconst { layout } = useLayout()\n\nconst filters = computed<Filter[]>(() => {\n  const allSections = new Set<Filter>(['All', ...requestSections])\n\n  if (!example.parameters.path.length) {\n    allSections.delete('Path Parameters')\n  }\n  if (!canMethodHaveBody(operation.method ?? 'get')) {\n    allSections.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    allSections.delete('Auth')\n  }\n\n  return [...allSections]\n})\n\n/** A list of section ids */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n// If security = [] or [{}] just hide it on readOnly mode\nconst isAuthHidden = computed(\n  () =>\n    layout === 'modal' &&\n    !operation.security &&\n    !Object.keys(securitySchemes ?? {}).length,\n)\n\nconst selectedFilter = ref<Filter>('All')\n\nwatch(\n  () => operation,\n  (newOperation) => {\n    if (\n      selectedFilter.value === 'Body' &&\n      newOperation &&\n      !canMethodHaveBody(newOperation.method)\n    ) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\nconst updateRequestNameHandler = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  requestMutators.edit(operation.uid, 'summary', target.value)\n}\n\n/**\n * Add the global cookies as static entries to the cookies section\n */\nconst activeWorkspaceCookies = computed(() =>\n  (workspace.cookies ?? [])\n    .map((uid) => cookies[uid])\n    .filter(isDefined)\n    .filter((cookie) => cookie.name)\n    .filter((cookie) =>\n      matchesDomain(server?.url || operation.path, cookie.domain),\n    )\n    .map((cookie) => ({\n      key: cookie.name,\n      value: cookie.value,\n      route: {\n        name: 'cookies',\n        params: {\n          cookies: cookie.uid,\n        },\n      },\n      enabled: true,\n    })),\n)\n\n// If the request has no summary, use the path or fallback\nconst handleRequestNamePlaceholder = () => {\n  return operation.summary\n    ? operation.summary\n    : operation.path.replace(REGEX.PROTOCOL, '')\n      ? operation.path.replace(REGEX.PROTOCOL, '')\n      : 'Request Name'\n}\n\nconst labelRequestNameId = useId()\n\n// Plugins\nconst pluginManager = usePluginManager()\n\nconst requestSectionViews = pluginManager.getViewComponents('request.section')\n\nconst updateOperationHandler = (key: keyof Operation, value: string) =>\n  requestMutators.edit(operation.uid, key, value)\n\n// Sets to all when auth filter is hidden but was previously selected to prevent empty section\nwatch(\n  () => isAuthHidden.value,\n  (authHidden) => {\n    if (authHidden && selectedFilter.value === 'Auth') {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          class=\"text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n          :placeholder=\"handleRequestNamePlaceholder()\"\n          :value=\"operation.summary\"\n          @input=\"updateRequestNameHandler\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <RequestAuth\n        v-if=\"\n          collection &&\n          workspace &&\n          (layout !== 'modal' || Object.keys(securitySchemes ?? {}).length)\n        \"\n        v-show=\"\n          !isAuthHidden &&\n          (selectedFilter === 'All' || selectedFilter === 'Auth')\n        \"\n        :id=\"filterIds.Auth\"\n        class=\"request-section-content-auth\"\n        :collection=\"collection\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :isReadOnly=\"layout === 'modal'\"\n        layout=\"client\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        :selectedSecuritySchemeUids=\"selectedSecuritySchemeUids\"\n        :server=\"server\"\n        title=\"Authentication\"\n        :workspace=\"workspace\" />\n      <RequestPathParams\n        v-show=\"\n          (selectedFilter === 'All' || selectedFilter === 'Path Parameters') &&\n          example.parameters.path.length\n        \"\n        :id=\"filterIds['Path Parameters']\"\n        class=\"request-section-content-path-params\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        :operation=\"operation\"\n        paramKey=\"path\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Path Parameters\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Cookies'\"\n        :id=\"filterIds.Cookies\"\n        class=\"request-section-content-cookies\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Cookie\"\n        :operation=\"operation\"\n        paramKey=\"cookies\"\n        :readOnlyEntries=\"activeWorkspaceCookies\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Cookies\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Headers'\"\n        :id=\"filterIds.Headers\"\n        class=\"request-section-content-headers\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Header\"\n        :operation=\"operation\"\n        paramKey=\"headers\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Headers\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Query'\"\n        :id=\"filterIds.Query\"\n        class=\"request-section-content-query\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Parameter\"\n        :operation=\"operation\"\n        paramKey=\"query\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Query Parameters\"\n        :workspace=\"workspace\" />\n      <RequestBody\n        v-if=\"\n          operation.method &&\n          (selectedFilter === 'All' || selectedFilter === 'Body') &&\n          canMethodHaveBody(operation.method)\n        \"\n        :id=\"filterIds.Body\"\n        class=\"request-section-content-body\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Body\"\n        :workspace=\"workspace\" />\n\n      <template\n        v-for=\"(view, index) in requestSectionViews\"\n        :key=\"view.title ?? index\">\n        <ScalarErrorBoundary>\n          <component\n            :is=\"view.component\"\n            v-show=\"selectedFilter === 'All' || selectedFilter === view.title\"\n            :operation=\"operation\"\n            @update:operation=\"updateOperationHandler\" />\n        </ScalarErrorBoundary>\n      </template>\n\n      <!-- Spacer -->\n      <div class=\"flex flex-grow\" />\n\n      <!-- Code Snippet -->\n      <ScalarErrorBoundary>\n        <RequestCodeExample\n          class=\"request-section-content-code-example -mt-1/2 border-t\"\n          :collection=\"collection\"\n          :environment=\"envVariables\"\n          :example=\"example\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :workspace=\"workspace\" />\n      </ScalarErrorBoundary>\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { SelectedSecuritySchemeUids } from '@scalar/oas-utils/entities/shared'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody, isDefined, REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useLayout } from '@/hooks'\nimport { matchesDomain } from '@/libs/send-request/set-request-cookies'\nimport { usePluginManager } from '@/plugins'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestBody from '@/views/Request/RequestSection/RequestBody.vue'\nimport RequestParams from '@/views/Request/RequestSection/RequestParams.vue'\nimport RequestPathParams from '@/views/Request/RequestSection/RequestPathParams.vue'\n\nimport RequestAuth from './RequestAuth/RequestAuth.vue'\nimport RequestCodeExample from './RequestCodeExample.vue'\n\nconst {\n  collection,\n  environment,\n  envVariables,\n  example,\n  operation,\n  selectedSecuritySchemeUids,\n  server,\n  workspace,\n} = defineProps<{\n  collection: Collection\n  environment: Environment\n  envVariables: EnvVariable[]\n  example: RequestExample\n  invalidParams: Set<string>\n  operation: Operation\n  selectedSecuritySchemeUids: SelectedSecuritySchemeUids\n  server: Server | undefined\n  workspace: Workspace\n}>()\n\nconst requestSections = [\n  'Auth',\n  'Path Parameters',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n  // 'Scripts',\n] as const\n\ntype Filter = 'All' | (typeof requestSections)[number]\n\nconst { requestMutators, cookies, securitySchemes } = useWorkspace()\nconst { layout } = useLayout()\n\nconst filters = computed<Filter[]>(() => {\n  const allSections = new Set<Filter>(['All', ...requestSections])\n\n  if (!example.parameters.path.length) {\n    allSections.delete('Path Parameters')\n  }\n  if (!canMethodHaveBody(operation.method ?? 'get')) {\n    allSections.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    allSections.delete('Auth')\n  }\n\n  return [...allSections]\n})\n\n/** A list of section ids */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n// If security = [] or [{}] just hide it on readOnly mode\nconst isAuthHidden = computed(\n  () =>\n    layout === 'modal' &&\n    !operation.security &&\n    !Object.keys(securitySchemes ?? {}).length,\n)\n\nconst selectedFilter = ref<Filter>('All')\n\nwatch(\n  () => operation,\n  (newOperation) => {\n    if (\n      selectedFilter.value === 'Body' &&\n      newOperation &&\n      !canMethodHaveBody(newOperation.method)\n    ) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\nconst updateRequestNameHandler = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  requestMutators.edit(operation.uid, 'summary', target.value)\n}\n\n/**\n * Add the global cookies as static entries to the cookies section\n */\nconst activeWorkspaceCookies = computed(() =>\n  (workspace.cookies ?? [])\n    .map((uid) => cookies[uid])\n    .filter(isDefined)\n    .filter((cookie) => cookie.name)\n    .filter((cookie) =>\n      matchesDomain(server?.url || operation.path, cookie.domain),\n    )\n    .map((cookie) => ({\n      key: cookie.name,\n      value: cookie.value,\n      route: {\n        name: 'cookies',\n        params: {\n          cookies: cookie.uid,\n        },\n      },\n      enabled: true,\n    })),\n)\n\n// If the request has no summary, use the path or fallback\nconst handleRequestNamePlaceholder = () => {\n  return operation.summary\n    ? operation.summary\n    : operation.path.replace(REGEX.PROTOCOL, '')\n      ? operation.path.replace(REGEX.PROTOCOL, '')\n      : 'Request Name'\n}\n\nconst labelRequestNameId = useId()\n\n// Plugins\nconst pluginManager = usePluginManager()\n\nconst requestSectionViews = pluginManager.getViewComponents('request.section')\n\nconst updateOperationHandler = (key: keyof Operation, value: string) =>\n  requestMutators.edit(operation.uid, key, value)\n\n// Sets to all when auth filter is hidden but was previously selected to prevent empty section\nwatch(\n  () => isAuthHidden.value,\n  (authHidden) => {\n    if (authHidden && selectedFilter.value === 'Auth') {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          class=\"text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n          :placeholder=\"handleRequestNamePlaceholder()\"\n          :value=\"operation.summary\"\n          @input=\"updateRequestNameHandler\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <RequestAuth\n        v-if=\"\n          collection &&\n          workspace &&\n          (layout !== 'modal' || Object.keys(securitySchemes ?? {}).length)\n        \"\n        v-show=\"\n          !isAuthHidden &&\n          (selectedFilter === 'All' || selectedFilter === 'Auth')\n        \"\n        :id=\"filterIds.Auth\"\n        class=\"request-section-content-auth\"\n        :collection=\"collection\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :isReadOnly=\"layout === 'modal'\"\n        layout=\"client\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        :selectedSecuritySchemeUids=\"selectedSecuritySchemeUids\"\n        :server=\"server\"\n        title=\"Authentication\"\n        :workspace=\"workspace\" />\n      <RequestPathParams\n        v-show=\"\n          (selectedFilter === 'All' || selectedFilter === 'Path Parameters') &&\n          example.parameters.path.length\n        \"\n        :id=\"filterIds['Path Parameters']\"\n        class=\"request-section-content-path-params\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        :operation=\"operation\"\n        paramKey=\"path\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Path Parameters\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Cookies'\"\n        :id=\"filterIds.Cookies\"\n        class=\"request-section-content-cookies\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Cookie\"\n        :operation=\"operation\"\n        paramKey=\"cookies\"\n        :readOnlyEntries=\"activeWorkspaceCookies\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Cookies\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Headers'\"\n        :id=\"filterIds.Headers\"\n        class=\"request-section-content-headers\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Header\"\n        :operation=\"operation\"\n        paramKey=\"headers\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Headers\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Query'\"\n        :id=\"filterIds.Query\"\n        class=\"request-section-content-query\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Parameter\"\n        :operation=\"operation\"\n        paramKey=\"query\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Query Parameters\"\n        :workspace=\"workspace\" />\n      <RequestBody\n        v-if=\"\n          operation.method &&\n          (selectedFilter === 'All' || selectedFilter === 'Body') &&\n          canMethodHaveBody(operation.method)\n        \"\n        :id=\"filterIds.Body\"\n        class=\"request-section-content-body\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Body\"\n        :workspace=\"workspace\" />\n\n      <template\n        v-for=\"(view, index) in requestSectionViews\"\n        :key=\"view.title ?? index\">\n        <ScalarErrorBoundary>\n          <component\n            :is=\"view.component\"\n            v-show=\"selectedFilter === 'All' || selectedFilter === view.title\"\n            :operation=\"operation\"\n            @update:operation=\"updateOperationHandler\" />\n        </ScalarErrorBoundary>\n      </template>\n\n      <!-- Spacer -->\n      <div class=\"flex flex-grow\" />\n\n      <!-- Code Snippet -->\n      <ScalarErrorBoundary>\n        <RequestCodeExample\n          class=\"request-section-content-code-example -mt-1/2 border-t\"\n          :collection=\"collection\"\n          :environment=\"envVariables\"\n          :example=\"example\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :workspace=\"workspace\" />\n      </ScalarErrorBoundary>\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"RequestSection-Bx8UHW-k.js","names":[],"sources":["../src/views/Request/libs/request.ts","../src/views/Request/RequestSection/RequestTableTooltip.vue","../src/views/Request/RequestSection/RequestTableTooltip.vue","../src/views/Request/RequestSection/RequestTable.vue","../src/views/Request/RequestSection/RequestTable.vue","../src/views/Request/RequestSection/RequestBody.vue","../src/views/Request/RequestSection/RequestBody.vue","../src/views/Request/RequestSection/RequestParams.vue","../src/views/Request/RequestSection/RequestParams.vue","../src/views/Request/RequestSection/RequestPathParams.vue","../src/views/Request/RequestSection/RequestPathParams.vue","../src/views/Request/RequestSection/RequestCodeExample.vue","../src/views/Request/RequestSection/RequestCodeExample.vue","../src/views/Request/RequestSection/RequestSection.vue","../src/views/Request/RequestSection/RequestSection.vue"],"sourcesContent":["import type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\n/**\n * Check if a RequestExampleParameter has any of the following properties:\n * - description\n * - type\n * - default\n * - format\n * - minimum\n * - maximum\n */\nexport const hasItemProperties = (item: RequestExampleParameter) =>\n  Boolean(item.description || item.type || item.default || item.format || item.minimum || item.maximum)\n\n/**\n * Checks if the value of a RequestExampleParameter is the expected type or format\n * Returns an alert message if the value is not in the correct type or format, otherwise false\n */\nexport const parameterIsInvalid = (item: RequestExampleParameter) => {\n  return computed(() => {\n    if (item.value === undefined || item.value === '') {\n      return false\n    }\n\n    // Type validation\n    if (item.type) {\n      if (item.type === 'integer') {\n        const value = Number(item.value)\n        if (isNaN(value) || !Number.isInteger(value)) {\n          return 'Value must be a whole number (e.g., 42)'\n        }\n        if (item.minimum !== undefined && value < item.minimum) {\n          return `Value must be ${item.minimum} or greater`\n        }\n        if (item.maximum !== undefined && value > item.maximum) {\n          return `Value must be ${item.maximum} or less`\n        }\n      }\n\n      if (item.type === 'number') {\n        const value = Number(item.value)\n        if (isNaN(value)) {\n          return 'Value must be a number (e.g., 42.5)'\n        }\n        if (item.minimum !== undefined && value < item.minimum) {\n          return `Value must be ${item.minimum} or greater`\n        }\n        if (item.maximum !== undefined && value > item.maximum) {\n          return `Value must be ${item.maximum} or less`\n        }\n      }\n\n      if (item.type === 'string' && item.format) {\n        if (item.format === 'date' && !/^\\d{4}-\\d{2}-\\d{2}$/.test(item.value)) {\n          return 'Please enter a valid date in YYYY-MM-DD format (e.g., 2024-03-20)'\n        }\n        if (\n          item.format === 'date-time' &&\n          !/^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}(\\.\\d+)?(Z|[+-]\\d{2}:\\d{2})$/.test(item.value)\n        ) {\n          return 'Please enter a valid date and time in RFC 3339 format (e.g., 2024-03-20T13:45:30Z)'\n        }\n        if (item.format === 'email' && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(item.value)) {\n          return 'Please enter a valid email address (e.g., user@example.com)'\n        }\n        if (item.format === 'uri' && !/^[a-zA-Z][a-zA-Z0-9+.-]*:.+$/.test(item.value)) {\n          return 'Please enter a valid URI (e.g., https://example.com)'\n        }\n      }\n    }\n\n    return false\n  })\n}\n\n/**\n * Checks if a RequestExampleParameter is required and has an empty value\n */\nexport const hasEmptyRequiredParameter = (item: RequestExampleParameter) => Boolean(item.required && item.value === '')\n","<script setup lang=\"ts\">\nimport { ScalarPopover } from '@scalar/components'\nimport { ScalarIconInfo, ScalarIconWarning } from '@scalar/icons'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nimport { parameterIsInvalid } from '../libs/request'\n\nconst { item } = defineProps<{ item: RequestExampleParameter }>()\n\nconst isInvalid = computed(() => !!parameterIsInvalid(item).value)\n</script>\n<template>\n  <ScalarPopover\n    teleport\n    :offset=\"4\"\n    placement=\"left\">\n    <button\n      type=\"button\"\n      :aria-label=\"isInvalid ? 'Input is invalid' : 'More Information'\"\n      class=\"text-c-2 hover:text-c-1 hover:bg-b-2 rounded p-1\"\n      :role=\"isInvalid ? 'alert' : 'none'\">\n      <ScalarIconWarning\n        v-if=\"isInvalid\"\n        class=\"text-orange size-3.5 brightness-90 hover:brightness-75\" />\n      <ScalarIconInfo\n        v-else\n        class=\"text-c-2 hover:text-c-1 size-3.5\" />\n    </button>\n    <template #popover>\n      <div\n        class=\"w-content text-xxs text-c-1 grid min-w-48 gap-1.5 rounded px-1.5 pt-2 pb-1.5 leading-none\">\n        <div\n          v-if=\"isInvalid\"\n          class=\"text-error-1\">\n          {{ parameterIsInvalid(item).value }}\n        </div>\n        <div\n          v-else-if=\"\n            item.type ||\n            item.format ||\n            item.minimum ||\n            item.maximum ||\n            item.default\n          \"\n          class=\"schema text-c-2 flex items-center\">\n          <span v-if=\"item.type\">{{ item.type }}</span>\n          <span v-if=\"item.format\">{{ item.format }}</span>\n          <span v-if=\"item.minimum\">min: {{ item.minimum }}</span>\n          <span v-if=\"item.maximum\">max: {{ item.maximum }}</span>\n          <span v-if=\"item.default\">default: {{ item.default }}</span>\n        </div>\n        <span\n          v-if=\"item.description && !isInvalid\"\n          class=\"text-sm leading-snug text-pretty\"\n          :style=\"{ maxWidth: '16rem' }\">\n          {{ item.description }}\n        </span>\n      </div>\n    </template>\n  </ScalarPopover>\n</template>\n<style scoped>\n.schema > span:not(:first-child)::before {\n  content: '·';\n  display: block;\n  margin: 0 0.5ch;\n}\n\n.schema > span {\n  display: flex;\n  white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarPopover } from '@scalar/components'\nimport { ScalarIconInfo, ScalarIconWarning } from '@scalar/icons'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport { computed } from 'vue'\n\nimport { parameterIsInvalid } from '../libs/request'\n\nconst { item } = defineProps<{ item: RequestExampleParameter }>()\n\nconst isInvalid = computed(() => !!parameterIsInvalid(item).value)\n</script>\n<template>\n  <ScalarPopover\n    teleport\n    :offset=\"4\"\n    placement=\"left\">\n    <button\n      type=\"button\"\n      :aria-label=\"isInvalid ? 'Input is invalid' : 'More Information'\"\n      class=\"text-c-2 hover:text-c-1 hover:bg-b-2 rounded p-1\"\n      :role=\"isInvalid ? 'alert' : 'none'\">\n      <ScalarIconWarning\n        v-if=\"isInvalid\"\n        class=\"text-orange size-3.5 brightness-90 hover:brightness-75\" />\n      <ScalarIconInfo\n        v-else\n        class=\"text-c-2 hover:text-c-1 size-3.5\" />\n    </button>\n    <template #popover>\n      <div\n        class=\"w-content text-xxs text-c-1 grid min-w-48 gap-1.5 rounded px-1.5 pt-2 pb-1.5 leading-none\">\n        <div\n          v-if=\"isInvalid\"\n          class=\"text-error-1\">\n          {{ parameterIsInvalid(item).value }}\n        </div>\n        <div\n          v-else-if=\"\n            item.type ||\n            item.format ||\n            item.minimum ||\n            item.maximum ||\n            item.default\n          \"\n          class=\"schema text-c-2 flex items-center\">\n          <span v-if=\"item.type\">{{ item.type }}</span>\n          <span v-if=\"item.format\">{{ item.format }}</span>\n          <span v-if=\"item.minimum\">min: {{ item.minimum }}</span>\n          <span v-if=\"item.maximum\">max: {{ item.maximum }}</span>\n          <span v-if=\"item.default\">default: {{ item.default }}</span>\n        </div>\n        <span\n          v-if=\"item.description && !isInvalid\"\n          class=\"text-sm leading-snug text-pretty\"\n          :style=\"{ maxWidth: '16rem' }\">\n          {{ item.description }}\n        </span>\n      </div>\n    </template>\n  </ScalarPopover>\n</template>\n<style scoped>\n.schema > span:not(:first-child)::before {\n  content: '·';\n  display: block;\n  margin: 0 0.5ch;\n}\n\n.schema > span {\n  display: flex;\n  white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarTooltip } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { RouterLink, type RouteLocationRaw } from 'vue-router'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableCell from '@/components/DataTable/DataTableCell.vue'\nimport DataTableCheckbox from '@/components/DataTable/DataTableCheckbox.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport { hasItemProperties, parameterIsInvalid } from '../libs/request'\nimport RequestTableTooltip from './RequestTableTooltip.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    items?: (RequestExampleParameter & { route?: RouteLocationRaw })[]\n    /** Hide the enabled column */\n    hasCheckboxDisabled?: boolean\n    showUploadButton?: boolean\n    isGlobal?: boolean\n    isReadOnly?: boolean\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    invalidParams?: Set<string>\n    label?: string\n  }>(),\n  {\n    hasCheckboxDisabled: false,\n    showUploadButton: false,\n    isGlobal: false,\n    isReadOnly: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'updateRow', idx: number, field: 'key' | 'value', value: string): void\n  (e: 'toggleRow', idx: number, enabled: boolean): void\n  (e: 'addRow'): void\n  (e: 'deleteRow', idx: number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'uploadFile', idx: number): void\n  (e: 'removeFile', idx: number): void\n}>()\n\nconst columns = ['', '', '36px']\n\nconst handleSelectVariable = (\n  idx: number,\n  field: 'key' | 'value',\n  value: string,\n) => {\n  emit('updateRow', idx, field, value)\n}\n\nconst handleFileUpload = (idx: number) => {\n  emit('uploadFile', idx)\n}\n\nconst flattenValue = (item: RequestExampleParameter) => {\n  return Array.isArray(item.default) && item.default.length === 1\n    ? item.default[0]\n    : item.default\n}\n\n// Shows delete button if the item has key or value filled\nconst showDeleteButton = (item: RequestExampleParameter) => {\n  return Boolean(item.key || item.value)\n}\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>{{ label }} Enabled</DataTableHeader>\n      <DataTableHeader>{{ label }} Key</DataTableHeader>\n      <DataTableHeader>{{ label }} Value</DataTableHeader>\n    </DataTableRow>\n    <DataTableRow\n      v-for=\"(item, idx) in items\"\n      :id=\"item.key\"\n      :key=\"idx\"\n      :class=\"{\n        alert: parameterIsInvalid(item).value,\n        error: invalidParams && invalidParams.has(item.key),\n      }\">\n      <template v-if=\"isGlobal\">\n        <RouterLink\n          class=\"text-c-2 flex items-center justify-center border-t !border-r\"\n          :to=\"item.route ?? {}\">\n          <span class=\"sr-only\">Global</span>\n          <ScalarTooltip\n            content=\"Global cookies are shared across the whole workspace.\"\n            placement=\"top\">\n            <ScalarIcon\n              tabindex=\"0\"\n              class=\"text-c-1\"\n              icon=\"Globe\"\n              size=\"xs\" />\n          </ScalarTooltip>\n        </RouterLink>\n      </template>\n      <template v-else>\n        <DataTableCheckbox\n          class=\"!border-r\"\n          :disabled=\"props.hasCheckboxDisabled\"\n          :modelValue=\"item.enabled\"\n          @update:modelValue=\"(v) => emit('toggleRow', idx, v)\" />\n      </template>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Key`\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :modelValue=\"item.key\"\n          placeholder=\"Key\"\n          :required=\"Boolean(item.required)\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'key', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'key', v)\n          \" />\n      </DataTableCell>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Value`\"\n          :class=\"\n            hasItemProperties(item)\n              ? 'pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10'\n              : 'group-hover:pr-6 group-has-[.cm-focused]:pr-6'\n          \"\n          :default=\"item.default\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :enum=\"item.enum ?? []\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :examples=\"item.examples ?? []\"\n          :max=\"item.maximum\"\n          :min=\"item.minimum\"\n          :modelValue=\"item.value\"\n          :nullable=\"Boolean(item.nullable)\"\n          placeholder=\"Value\"\n          :type=\"item.type\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'value', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'value', v)\n          \">\n          <template #icon>\n            <ScalarButton\n              v-if=\"showDeleteButton(item) && !item.required\"\n              :class=\"{\n                '-mr-0.5': hasItemProperties(item),\n              }\"\n              class=\"text-c-2 hover:text-c-1 hover:bg-b-2 z-context hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click=\"emit('deleteRow', idx)\">\n              <ScalarIconTrash class=\"size-3.5\" />\n            </ScalarButton>\n            <RequestTableTooltip\n              v-if=\"hasItemProperties(item)\"\n              :item=\"{ ...item, default: flattenValue(item) }\" />\n          </template>\n        </CodeInput>\n      </DataTableCell>\n      <DataTableCell\n        v-if=\"showUploadButton\"\n        class=\"group/upload flex items-center justify-center whitespace-nowrap\">\n        <template v-if=\"item.file\">\n          <div\n            class=\"text-c-2 filemask flex w-full max-w-[100%] items-end justify-end overflow-hidden p-1\">\n            <span>{{ item.file?.name }}</span>\n          </div>\n          <button\n            class=\"bg-b-2 centered-x centered-y absolute hidden w-[calc(100%_-_8px)] rounded p-0.5 text-center text-xs font-medium group-hover/upload:block\"\n            type=\"button\"\n            @click=\"emit('removeFile', idx)\">\n            Delete\n          </button>\n        </template>\n        <template v-else>\n          <div class=\"p-0.5\">\n            <ScalarButton\n              class=\"bg-b-2 hover:bg-b-3 text-c-2 h-fit border-0 py-px shadow-none\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"handleFileUpload(idx)\">\n              <span>Upload File</span>\n              <ScalarIcon\n                class=\"ml-1\"\n                icon=\"Upload\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n            </ScalarButton>\n          </div>\n        </template>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.filemask {\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarTooltip } from '@scalar/components'\nimport { ScalarIconTrash } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { RouterLink, type RouteLocationRaw } from 'vue-router'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableCell from '@/components/DataTable/DataTableCell.vue'\nimport DataTableCheckbox from '@/components/DataTable/DataTableCheckbox.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport { hasItemProperties, parameterIsInvalid } from '../libs/request'\nimport RequestTableTooltip from './RequestTableTooltip.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    items?: (RequestExampleParameter & { route?: RouteLocationRaw })[]\n    /** Hide the enabled column */\n    hasCheckboxDisabled?: boolean\n    showUploadButton?: boolean\n    isGlobal?: boolean\n    isReadOnly?: boolean\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    invalidParams?: Set<string>\n    label?: string\n  }>(),\n  {\n    hasCheckboxDisabled: false,\n    showUploadButton: false,\n    isGlobal: false,\n    isReadOnly: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'updateRow', idx: number, field: 'key' | 'value', value: string): void\n  (e: 'toggleRow', idx: number, enabled: boolean): void\n  (e: 'addRow'): void\n  (e: 'deleteRow', idx: number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'uploadFile', idx: number): void\n  (e: 'removeFile', idx: number): void\n}>()\n\nconst columns = ['', '', '36px']\n\nconst handleSelectVariable = (\n  idx: number,\n  field: 'key' | 'value',\n  value: string,\n) => {\n  emit('updateRow', idx, field, value)\n}\n\nconst handleFileUpload = (idx: number) => {\n  emit('uploadFile', idx)\n}\n\nconst flattenValue = (item: RequestExampleParameter) => {\n  return Array.isArray(item.default) && item.default.length === 1\n    ? item.default[0]\n    : item.default\n}\n\n// Shows delete button if the item has key or value filled\nconst showDeleteButton = (item: RequestExampleParameter) => {\n  return Boolean(item.key || item.value)\n}\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>{{ label }} Enabled</DataTableHeader>\n      <DataTableHeader>{{ label }} Key</DataTableHeader>\n      <DataTableHeader>{{ label }} Value</DataTableHeader>\n    </DataTableRow>\n    <DataTableRow\n      v-for=\"(item, idx) in items\"\n      :id=\"item.key\"\n      :key=\"idx\"\n      :class=\"{\n        alert: parameterIsInvalid(item).value,\n        error: invalidParams && invalidParams.has(item.key),\n      }\">\n      <template v-if=\"isGlobal\">\n        <RouterLink\n          class=\"text-c-2 flex items-center justify-center border-t !border-r\"\n          :to=\"item.route ?? {}\">\n          <span class=\"sr-only\">Global</span>\n          <ScalarTooltip\n            content=\"Global cookies are shared across the whole workspace.\"\n            placement=\"top\">\n            <ScalarIcon\n              tabindex=\"0\"\n              class=\"text-c-1\"\n              icon=\"Globe\"\n              size=\"xs\" />\n          </ScalarTooltip>\n        </RouterLink>\n      </template>\n      <template v-else>\n        <DataTableCheckbox\n          class=\"!border-r\"\n          :disabled=\"props.hasCheckboxDisabled\"\n          :modelValue=\"item.enabled\"\n          @update:modelValue=\"(v) => emit('toggleRow', idx, v)\" />\n      </template>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Key`\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :modelValue=\"item.key\"\n          placeholder=\"Key\"\n          :required=\"Boolean(item.required)\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'key', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'key', v)\n          \" />\n      </DataTableCell>\n      <DataTableCell>\n        <CodeInput\n          :aria-label=\"`${label} Value`\"\n          :class=\"\n            hasItemProperties(item)\n              ? 'pr-6 group-hover:pr-10 group-has-[.cm-focused]:pr-10'\n              : 'group-hover:pr-6 group-has-[.cm-focused]:pr-6'\n          \"\n          :default=\"item.default\"\n          disableCloseBrackets\n          :disabled=\"props.isReadOnly\"\n          disableEnter\n          disableTabIndent\n          lineWrapping\n          :enum=\"item.enum ?? []\"\n          :envVariables=\"envVariables\"\n          :environment=\"environment\"\n          :examples=\"item.examples ?? []\"\n          :max=\"item.maximum\"\n          :min=\"item.minimum\"\n          :modelValue=\"item.value\"\n          :nullable=\"Boolean(item.nullable)\"\n          placeholder=\"Value\"\n          :type=\"item.type\"\n          :workspace=\"workspace\"\n          @blur=\"emit('inputBlur')\"\n          @focus=\"emit('inputFocus')\"\n          @selectVariable=\"(v: string) => handleSelectVariable(idx, 'value', v)\"\n          @update:modelValue=\"\n            (v: string) => emit('updateRow', idx, 'value', v)\n          \">\n          <template #icon>\n            <ScalarButton\n              v-if=\"showDeleteButton(item) && !item.required\"\n              :class=\"{\n                '-mr-0.5': hasItemProperties(item),\n              }\"\n              class=\"text-c-2 hover:text-c-1 hover:bg-b-2 z-context hidden h-fit rounded p-1 group-hover:flex group-has-[.cm-focused]:flex\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click=\"emit('deleteRow', idx)\">\n              <ScalarIconTrash class=\"size-3.5\" />\n            </ScalarButton>\n            <RequestTableTooltip\n              v-if=\"hasItemProperties(item)\"\n              :item=\"{ ...item, default: flattenValue(item) }\" />\n          </template>\n        </CodeInput>\n      </DataTableCell>\n      <DataTableCell\n        v-if=\"showUploadButton\"\n        class=\"group/upload flex items-center justify-center whitespace-nowrap\">\n        <template v-if=\"item.file\">\n          <div\n            class=\"text-c-2 filemask flex w-full max-w-[100%] items-end justify-end overflow-hidden p-1\">\n            <span>{{ item.file?.name }}</span>\n          </div>\n          <button\n            class=\"bg-b-2 centered-x centered-y absolute hidden w-[calc(100%_-_8px)] rounded p-0.5 text-center text-xs font-medium group-hover/upload:block\"\n            type=\"button\"\n            @click=\"emit('removeFile', idx)\">\n            Delete\n          </button>\n        </template>\n        <template v-else>\n          <div class=\"p-0.5\">\n            <ScalarButton\n              class=\"bg-b-2 hover:bg-b-3 text-c-2 h-fit border-0 py-px shadow-none\"\n              size=\"sm\"\n              variant=\"outlined\"\n              @click=\"handleFileUpload(idx)\">\n              <span>Upload File</span>\n              <ScalarIcon\n                class=\"ml-1\"\n                icon=\"Upload\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n            </ScalarButton>\n          </div>\n        </template>\n      </DataTableCell>\n    </DataTableRow>\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.filemask {\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarListbox } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type Operation,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport type { Entries } from 'type-fest'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useFileDialog } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport RequestTable from './RequestTable.vue'\n\nconst { example, operation, environment, envVariables, workspace, title } =\n  defineProps<{\n    example: RequestExample\n    operation: Operation\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    title: string\n  }>()\n\nconst { requestExampleMutators } = useWorkspace()\n\n/** use-codemirror package to be updated accordingly */\nconst contentTypeToLanguageMap = {\n  json: 'json',\n  xml: 'xml',\n  yaml: 'yaml',\n  edn: 'edn',\n  other: 'html',\n} as const\n\nconst contentTypes = {\n  multipartForm: 'Multipart Form',\n  formUrlEncoded: 'Form URL Encoded',\n  binaryFile: 'Binary File',\n  json: 'JSON',\n  xml: 'XML',\n  yaml: 'YAML',\n  edn: 'EDN',\n  other: 'Other',\n  none: 'None',\n} as const\ntype ContentType = keyof typeof contentTypes\n\n/** Convert content types to options for the dropdown */\nconst contentTypeOptions = (\n  Object.entries(contentTypes) as Entries<typeof contentTypes>\n).map(([id, label]) => ({\n  id,\n  label,\n}))\n\n/** Match the activeBody to the contentTypeOptions */\nconst activeExampleContentType = computed(() => {\n  const { activeBody, formData, raw } = example.body\n\n  // Form\n  if (activeBody === 'formData') {\n    return formData?.encoding === 'urlencoded'\n      ? 'formUrlEncoded'\n      : 'multipartForm'\n  }\n  // Binary\n  if (activeBody === 'binary') {\n    return 'binaryFile'\n  }\n  // Raw\n  if (activeBody === 'raw' && raw?.encoding) {\n    if (raw.encoding === 'html' || raw.encoding === 'text') {\n      return 'other'\n    }\n    return raw.encoding\n  }\n\n  // Set content type from request if present\n  const contentType = Object.keys(operation.requestBody?.content || {})[0]\n\n  return contentType || 'none'\n})\n/** Selected ref from options above */\nconst selectedContentType = computed({\n  get: () =>\n    contentTypeOptions.find(\n      (opt) => opt.id === activeExampleContentType.value,\n    ) ??\n    contentTypeOptions[contentTypeOptions.length - 1] ??\n    contentTypeOptions[0],\n  set: (opt) => {\n    if (opt?.id) {\n      updateActiveBody(opt.id)\n    }\n  },\n})\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\nconst codeInputLanguage = computed(() => {\n  const type = selectedContentType.value\n    ?.id as keyof typeof contentTypeToLanguageMap\n  return contentTypeToLanguageMap[type] ?? 'plaintext'\n})\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = formParams.value\n\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams[rowIdx] = {\n      ...updatedParams[rowIdx],\n      value: updatedParams[rowIdx]?.value || '',\n      key: updatedParams[rowIdx]?.key || '',\n      enabled: updatedParams[rowIdx]?.enabled ?? false,\n      [field]: value || '',\n    }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx]?.key !== '' ||\n      updatedParams[rowIdx]?.value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx]?.key === '' &&\n      updatedParams[rowIdx]?.value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n\n    requestExampleMutators.edit(example.uid, 'body.formData.value', payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\nconst formParams = computed(() => example.body.formData?.value ?? [])\n\n/** ensure one empty row by default */\nconst defaultRow = () => {\n  const lastParam = formParams.value[formParams.value.length - 1]\n  if (!lastParam || lastParam.key !== '' || lastParam.value !== '') {\n    addRow()\n  }\n}\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({\n    enabled: false,\n  })\n  const newParams = [...formParams.value, newParam]\n\n  // Ensure we have formData\n  if (example.body.formData) {\n    requestExampleMutators.edit(example.uid, 'body.formData.value', newParams)\n  } else {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      value: newParams,\n      encoding: 'form-data',\n    })\n  }\n}\n\n/** Enable and disables the row */\nconst toggleRow = (rowIdx: number, enabled: boolean) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].enabled = enabled\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\nconst updateRequestBody = (value: string) =>\n  requestExampleMutators.edit(example.uid, 'body.raw.value', value)\n\n/** Take the select option and return bodyType with encoding and header */\nconst getBodyType = (type: ContentType) => {\n  if (type === 'multipartForm') {\n    return {\n      activeBody: 'formData',\n      encoding: 'form-data',\n      header: 'multipart/form-data',\n    } as const\n  }\n  if (type === 'formUrlEncoded') {\n    return {\n      activeBody: 'formData',\n      encoding: 'urlencoded',\n      header: 'application/x-www-form-urlencoded',\n    } as const\n  }\n  if (type === 'binaryFile') {\n    return {\n      activeBody: 'binary',\n      encoding: undefined,\n      header: 'application/octet-stream',\n    } as const\n  }\n  if (type === 'json') {\n    const contentTypes = Object.keys(operation.requestBody?.content ?? {})\n\n    // Gets json content types including vendor specific ones\n    const jsonContentType =\n      contentTypes.find((t) => t.includes('json') || t.endsWith('+json')) ||\n      'application/json'\n\n    return {\n      activeBody: 'raw',\n      encoding: 'json',\n      header: jsonContentType,\n    } as const\n  }\n  if (type === 'xml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'xml',\n      header: 'application/xml',\n    } as const\n  }\n  if (type === 'yaml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'yaml',\n      header: 'application/yaml',\n    } as const\n  }\n  if (type === 'edn') {\n    return {\n      activeBody: 'raw',\n      encoding: 'edn',\n      header: 'application/edn',\n    } as const\n  }\n  if (type === 'other') {\n    const opContentTypes = Object.keys(operation.requestBody?.content ?? {})\n    const textContentType = opContentTypes.find((t) => t.startsWith('text/'))\n\n    return {\n      activeBody: 'raw',\n      encoding: textContentType ? 'text' : 'html',\n      header: textContentType ?? 'application/html',\n    } as const\n  }\n\n  return { activeBody: 'raw', encoding: undefined, header: undefined } as const\n}\n\n/** Set active body AND encoding */\nconst updateActiveBody = (type: ContentType) => {\n  const { activeBody, encoding, header } = getBodyType(type)\n  requestExampleMutators.edit(example.uid, 'body.activeBody', activeBody)\n\n  // Set encoding safely\n  if (encoding && activeBody === 'raw') {\n    requestExampleMutators.edit(example.uid, 'body.raw', {\n      encoding,\n      value: example.body.raw?.value ?? '',\n    })\n  } else if (encoding && activeBody === 'formData') {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      encoding,\n      value: example.body.formData?.value ?? [],\n    })\n  }\n  // Remove raw if no encoding and not binary\n  else if (!encoding && activeBody !== 'binary') {\n    const { raw: deleteMe, ...body } = example.body\n    requestExampleMutators.edit(example.uid, 'body', body)\n  }\n\n  // Handle headers\n  const headers = [...example.parameters.headers]\n  const contentTypeIdx = headers.findIndex(\n    (h) => h.key.toLowerCase() === 'content-type',\n  )\n\n  if (contentTypeIdx >= 0) {\n    // Update header if exists\n    if (header && headers[contentTypeIdx]) {\n      headers[contentTypeIdx].value = header\n    }\n    // Remove header if we don't want one\n    else if (\n      headers[contentTypeIdx] &&\n      (activeBody !== 'raw' || type === 'none')\n    ) {\n      headers.splice(contentTypeIdx, 1)\n    }\n  }\n  // Add header if doesn't have one\n  else if (header) {\n    const lastHeader = headers[headers.length - 1]\n    // Add header before last if empty to prevent empty row duplication\n    if (lastHeader && lastHeader.key === '' && lastHeader.value === '') {\n      headers.splice(headers.length - 1, 0, {\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    } else {\n      headers.push({\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    }\n  }\n\n  requestExampleMutators.edit(example.uid, 'parameters.headers', headers)\n}\n\nconst handleFileUploadFormData = (rowIdx: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        const currentParams = formParams.value\n        const updatedParams = [...currentParams]\n        updatedParams[rowIdx] = {\n          ...updatedParams[rowIdx],\n          file,\n          value: updatedParams[rowIdx]?.value || file.name,\n          key: updatedParams[rowIdx]?.key || file.name,\n          enabled: true,\n        }\n        requestExampleMutators.edit(\n          example.uid,\n          'body.formData.value',\n          updatedParams,\n        )\n\n        defaultRow()\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\nconst removeBinaryFile = () =>\n  requestExampleMutators.edit(example.uid, 'body.binary', undefined)\n\nfunction handleRemoveFileFormData(rowIdx: number) {\n  const currentParams = formParams.value\n  const updatedParams = [...currentParams]\n  const param = currentParams[rowIdx]\n  const file = param?.file as File | undefined\n\n  // Empty key value or non updated file name then remove the row\n  if (\n    currentParams.length > 1 &&\n    ((!param?.key && !param?.value) ||\n      (file && param?.key === file.name && param?.value === file.name))\n  ) {\n    updatedParams.splice(rowIdx, 1)\n  } else {\n    // File name updated then remove file only\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].file = undefined\n    }\n  }\n  requestExampleMutators.edit(example.uid, 'body.formData.value', updatedParams)\n}\n\nfunction handleFileUpload() {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        requestExampleMutators.edit(example.uid, 'body.binary', file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n// we always add an empty row if its empty :)\nwatch(\n  selectedContentType,\n  (val) => {\n    if (['multipartForm', 'formUrlEncoded'].includes(val?.id || '')) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => example.uid,\n  () => {\n    operation.method &&\n      canMethodHaveBody(operation.method) &&\n      updateActiveBody(activeExampleContentType.value as ContentType)\n\n    // Add extra row on page route change as well\n    if (\n      ['multipartForm', 'formUrlEncoded'].includes(\n        activeExampleContentType.value as ContentType,\n      )\n    ) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst exampleOptions = computed(() => {\n  const contentType = selectedContentType.value?.id\n  const { header } = getBodyType(contentType as ContentType)\n  const content = operation.requestBody?.content || {}\n  const examples = header ? content[header]?.examples || {} : {}\n  return Object.entries(examples).map(([key, value]) => ({\n    id: key,\n    label: key,\n    value,\n  }))\n})\n\nconst selectedExample = computed({\n  get: () => {\n    const rawValue = example.body.raw?.value ?? '{}'\n    try {\n      const parsedValue = JSON.parse(rawValue)\n      const getExample = exampleOptions.value.find((e) => {\n        const exampleValue = e.value as {\n          value: Record<string, string>\n        }\n        return (\n          JSON.stringify(exampleValue.value) === JSON.stringify(parsedValue)\n        )\n      })\n      return getExample ?? exampleOptions.value[0]\n    } catch {\n      return exampleOptions.value[0]\n    }\n  },\n  set: (opt) => {\n    if (opt?.id) {\n      const exampleOption = exampleOptions.value.find((e) => e.id === opt.id)\n      if (exampleOption) {\n        const exampleValue = exampleOption.value as {\n          value: Record<string, string>\n        }\n        updateRequestBody(JSON.stringify(exampleValue.value, null, 2))\n      }\n    }\n  },\n})\n</script>\n<template>\n  <ViewLayoutCollapse>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableRow>\n        <DataTableHeader\n          class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0\">\n          <ScalarListbox\n            v-model=\"selectedContentType\"\n            :options=\"contentTypeOptions\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedContentType?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n          <ScalarListbox\n            v-if=\"exampleOptions.length > 0\"\n            v-model=\"selectedExample\"\n            :options=\"exampleOptions\"\n            side=\"left\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal\"\n              fullWidth\n              variant=\"ghost\">\n              <span>{{ selectedExample?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n        </DataTableHeader>\n      </DataTableRow>\n      <DataTableRow>\n        <template v-if=\"selectedContentType?.id === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id === 'binaryFile'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template v-if=\"example.body.binary\">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ (example.body.binary as File).name }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"removeBinaryFile\">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"handleFileUpload\">\n                <span>Upload File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'multipartForm'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'formUrlEncoded'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else>\n          <!-- TODO: remove this as type hack when we add syntax highlighting -->\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :language=\"codeInputLanguage as CodeMirrorLanguage\"\n            lineNumbers\n            lint\n            :modelValue=\"example.body?.raw?.value ?? ''\"\n            :workspace=\"workspace\"\n            @update:modelValue=\"updateRequestBody\" />\n        </template>\n      </DataTableRow>\n      <!-- Hacky... but effective, extra table row to trick the last group -->\n      <DataTableRow />\n    </DataTable>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarIcon, ScalarListbox } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type Operation,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody } from '@scalar/oas-utils/helpers'\nimport type { CodeMirrorLanguage } from '@scalar/use-codemirror'\nimport type { Entries } from 'type-fest'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport CodeInput from '@/components/CodeInput/CodeInput.vue'\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableHeader from '@/components/DataTable/DataTableHeader.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useFileDialog } from '@/hooks'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\n\nimport RequestTable from './RequestTable.vue'\n\nconst { example, operation, environment, envVariables, workspace, title } =\n  defineProps<{\n    example: RequestExample\n    operation: Operation\n    environment: Environment\n    envVariables: EnvVariable[]\n    workspace: Workspace\n    title: string\n  }>()\n\nconst { requestExampleMutators } = useWorkspace()\n\n/** use-codemirror package to be updated accordingly */\nconst contentTypeToLanguageMap = {\n  json: 'json',\n  xml: 'xml',\n  yaml: 'yaml',\n  edn: 'edn',\n  other: 'html',\n} as const\n\nconst contentTypes = {\n  multipartForm: 'Multipart Form',\n  formUrlEncoded: 'Form URL Encoded',\n  binaryFile: 'Binary File',\n  json: 'JSON',\n  xml: 'XML',\n  yaml: 'YAML',\n  edn: 'EDN',\n  other: 'Other',\n  none: 'None',\n} as const\ntype ContentType = keyof typeof contentTypes\n\n/** Convert content types to options for the dropdown */\nconst contentTypeOptions = (\n  Object.entries(contentTypes) as Entries<typeof contentTypes>\n).map(([id, label]) => ({\n  id,\n  label,\n}))\n\n/** Match the activeBody to the contentTypeOptions */\nconst activeExampleContentType = computed(() => {\n  const { activeBody, formData, raw } = example.body\n\n  // Form\n  if (activeBody === 'formData') {\n    return formData?.encoding === 'urlencoded'\n      ? 'formUrlEncoded'\n      : 'multipartForm'\n  }\n  // Binary\n  if (activeBody === 'binary') {\n    return 'binaryFile'\n  }\n  // Raw\n  if (activeBody === 'raw' && raw?.encoding) {\n    if (raw.encoding === 'html' || raw.encoding === 'text') {\n      return 'other'\n    }\n    return raw.encoding\n  }\n\n  // Set content type from request if present\n  const contentType = Object.keys(operation.requestBody?.content || {})[0]\n\n  return contentType || 'none'\n})\n/** Selected ref from options above */\nconst selectedContentType = computed({\n  get: () =>\n    contentTypeOptions.find(\n      (opt) => opt.id === activeExampleContentType.value,\n    ) ??\n    contentTypeOptions[contentTypeOptions.length - 1] ??\n    contentTypeOptions[0],\n  set: (opt) => {\n    if (opt?.id) {\n      updateActiveBody(opt.id)\n    }\n  },\n})\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\nconst codeInputLanguage = computed(() => {\n  const type = selectedContentType.value\n    ?.id as keyof typeof contentTypeToLanguageMap\n  return contentTypeToLanguageMap[type] ?? 'plaintext'\n})\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = formParams.value\n\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams[rowIdx] = {\n      ...updatedParams[rowIdx],\n      value: updatedParams[rowIdx]?.value || '',\n      key: updatedParams[rowIdx]?.key || '',\n      enabled: updatedParams[rowIdx]?.enabled ?? false,\n      [field]: value || '',\n    }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx]?.key !== '' ||\n      updatedParams[rowIdx]?.value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx]?.key === '' &&\n      updatedParams[rowIdx]?.value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n\n    requestExampleMutators.edit(example.uid, 'body.formData.value', payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\nconst formParams = computed(() => example.body.formData?.value ?? [])\n\n/** ensure one empty row by default */\nconst defaultRow = () => {\n  const lastParam = formParams.value[formParams.value.length - 1]\n  if (!lastParam || lastParam.key !== '' || lastParam.value !== '') {\n    addRow()\n  }\n}\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({\n    enabled: false,\n  })\n  const newParams = [...formParams.value, newParam]\n\n  // Ensure we have formData\n  if (example.body.formData) {\n    requestExampleMutators.edit(example.uid, 'body.formData.value', newParams)\n  } else {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      value: newParams,\n      encoding: 'form-data',\n    })\n  }\n}\n\n/** Enable and disables the row */\nconst toggleRow = (rowIdx: number, enabled: boolean) => {\n  const currentParams = formParams.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].enabled = enabled\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      'body.formData.value',\n      updatedParams,\n    )\n  }\n}\n\nconst updateRequestBody = (value: string) =>\n  requestExampleMutators.edit(example.uid, 'body.raw.value', value)\n\n/** Take the select option and return bodyType with encoding and header */\nconst getBodyType = (type: ContentType) => {\n  if (type === 'multipartForm') {\n    return {\n      activeBody: 'formData',\n      encoding: 'form-data',\n      header: 'multipart/form-data',\n    } as const\n  }\n  if (type === 'formUrlEncoded') {\n    return {\n      activeBody: 'formData',\n      encoding: 'urlencoded',\n      header: 'application/x-www-form-urlencoded',\n    } as const\n  }\n  if (type === 'binaryFile') {\n    return {\n      activeBody: 'binary',\n      encoding: undefined,\n      header: 'application/octet-stream',\n    } as const\n  }\n  if (type === 'json') {\n    const contentTypes = Object.keys(operation.requestBody?.content ?? {})\n\n    // Gets json content types including vendor specific ones\n    const jsonContentType =\n      contentTypes.find((t) => t.includes('json') || t.endsWith('+json')) ||\n      'application/json'\n\n    return {\n      activeBody: 'raw',\n      encoding: 'json',\n      header: jsonContentType,\n    } as const\n  }\n  if (type === 'xml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'xml',\n      header: 'application/xml',\n    } as const\n  }\n  if (type === 'yaml') {\n    return {\n      activeBody: 'raw',\n      encoding: 'yaml',\n      header: 'application/yaml',\n    } as const\n  }\n  if (type === 'edn') {\n    return {\n      activeBody: 'raw',\n      encoding: 'edn',\n      header: 'application/edn',\n    } as const\n  }\n  if (type === 'other') {\n    const opContentTypes = Object.keys(operation.requestBody?.content ?? {})\n    const textContentType = opContentTypes.find((t) => t.startsWith('text/'))\n\n    return {\n      activeBody: 'raw',\n      encoding: textContentType ? 'text' : 'html',\n      header: textContentType ?? 'application/html',\n    } as const\n  }\n\n  return { activeBody: 'raw', encoding: undefined, header: undefined } as const\n}\n\n/** Set active body AND encoding */\nconst updateActiveBody = (type: ContentType) => {\n  const { activeBody, encoding, header } = getBodyType(type)\n  requestExampleMutators.edit(example.uid, 'body.activeBody', activeBody)\n\n  // Set encoding safely\n  if (encoding && activeBody === 'raw') {\n    requestExampleMutators.edit(example.uid, 'body.raw', {\n      encoding,\n      value: example.body.raw?.value ?? '',\n    })\n  } else if (encoding && activeBody === 'formData') {\n    requestExampleMutators.edit(example.uid, 'body.formData', {\n      encoding,\n      value: example.body.formData?.value ?? [],\n    })\n  }\n  // Remove raw if no encoding and not binary\n  else if (!encoding && activeBody !== 'binary') {\n    const { raw: deleteMe, ...body } = example.body\n    requestExampleMutators.edit(example.uid, 'body', body)\n  }\n\n  // Handle headers\n  const headers = [...example.parameters.headers]\n  const contentTypeIdx = headers.findIndex(\n    (h) => h.key.toLowerCase() === 'content-type',\n  )\n\n  if (contentTypeIdx >= 0) {\n    // Update header if exists\n    if (header && headers[contentTypeIdx]) {\n      headers[contentTypeIdx].value = header\n    }\n    // Remove header if we don't want one\n    else if (\n      headers[contentTypeIdx] &&\n      (activeBody !== 'raw' || type === 'none')\n    ) {\n      headers.splice(contentTypeIdx, 1)\n    }\n  }\n  // Add header if doesn't have one\n  else if (header) {\n    const lastHeader = headers[headers.length - 1]\n    // Add header before last if empty to prevent empty row duplication\n    if (lastHeader && lastHeader.key === '' && lastHeader.value === '') {\n      headers.splice(headers.length - 1, 0, {\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    } else {\n      headers.push({\n        key: 'Content-Type',\n        value: header,\n        enabled: true,\n      })\n    }\n  }\n\n  requestExampleMutators.edit(example.uid, 'parameters.headers', headers)\n}\n\nconst handleFileUploadFormData = (rowIdx: number) => {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        const currentParams = formParams.value\n        const updatedParams = [...currentParams]\n        updatedParams[rowIdx] = {\n          ...updatedParams[rowIdx],\n          file,\n          value: updatedParams[rowIdx]?.value || file.name,\n          key: updatedParams[rowIdx]?.key || file.name,\n          enabled: true,\n        }\n        requestExampleMutators.edit(\n          example.uid,\n          'body.formData.value',\n          updatedParams,\n        )\n\n        defaultRow()\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\nconst removeBinaryFile = () =>\n  requestExampleMutators.edit(example.uid, 'body.binary', undefined)\n\nfunction handleRemoveFileFormData(rowIdx: number) {\n  const currentParams = formParams.value\n  const updatedParams = [...currentParams]\n  const param = currentParams[rowIdx]\n  const file = param?.file as File | undefined\n\n  // Empty key value or non updated file name then remove the row\n  if (\n    currentParams.length > 1 &&\n    ((!param?.key && !param?.value) ||\n      (file && param?.key === file.name && param?.value === file.name))\n  ) {\n    updatedParams.splice(rowIdx, 1)\n  } else {\n    // File name updated then remove file only\n    if (updatedParams[rowIdx]) {\n      updatedParams[rowIdx].file = undefined\n    }\n  }\n  requestExampleMutators.edit(example.uid, 'body.formData.value', updatedParams)\n}\n\nfunction handleFileUpload() {\n  const { open } = useFileDialog({\n    onChange: (files) => {\n      const file = files?.[0]\n      if (file) {\n        requestExampleMutators.edit(example.uid, 'body.binary', file)\n      }\n    },\n    multiple: false,\n    accept: '*/*',\n  })\n  open()\n}\n\n// we always add an empty row if its empty :)\nwatch(\n  selectedContentType,\n  (val) => {\n    if (['multipartForm', 'formUrlEncoded'].includes(val?.id || '')) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => example.uid,\n  () => {\n    operation.method &&\n      canMethodHaveBody(operation.method) &&\n      updateActiveBody(activeExampleContentType.value as ContentType)\n\n    // Add extra row on page route change as well\n    if (\n      ['multipartForm', 'formUrlEncoded'].includes(\n        activeExampleContentType.value as ContentType,\n      )\n    ) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst exampleOptions = computed(() => {\n  const contentType = selectedContentType.value?.id\n  const { header } = getBodyType(contentType as ContentType)\n  const content = operation.requestBody?.content || {}\n  const examples = header ? content[header]?.examples || {} : {}\n  return Object.entries(examples).map(([key, value]) => ({\n    id: key,\n    label: key,\n    value,\n  }))\n})\n\nconst selectedExample = computed({\n  get: () => {\n    const rawValue = example.body.raw?.value ?? '{}'\n    try {\n      const parsedValue = JSON.parse(rawValue)\n      const getExample = exampleOptions.value.find((e) => {\n        const exampleValue = e.value as {\n          value: Record<string, string>\n        }\n        return (\n          JSON.stringify(exampleValue.value) === JSON.stringify(parsedValue)\n        )\n      })\n      return getExample ?? exampleOptions.value[0]\n    } catch {\n      return exampleOptions.value[0]\n    }\n  },\n  set: (opt) => {\n    if (opt?.id) {\n      const exampleOption = exampleOptions.value.find((e) => e.id === opt.id)\n      if (exampleOption) {\n        const exampleValue = exampleOption.value as {\n          value: Record<string, string>\n        }\n        updateRequestBody(JSON.stringify(exampleValue.value, null, 2))\n      }\n    }\n  },\n})\n</script>\n<template>\n  <ViewLayoutCollapse>\n    <template #title>{{ title }}</template>\n    <DataTable\n      :columns=\"['']\"\n      presentational>\n      <DataTableRow>\n        <DataTableHeader\n          class=\"relative col-span-full flex h-8 cursor-pointer items-center justify-between !p-0\">\n          <ScalarListbox\n            v-model=\"selectedContentType\"\n            :options=\"contentTypeOptions\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-3 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedContentType?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n          <ScalarListbox\n            v-if=\"exampleOptions.length > 0\"\n            v-model=\"selectedExample\"\n            :options=\"exampleOptions\"\n            side=\"left\"\n            teleport>\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-2 font-normal\"\n              fullWidth\n              variant=\"ghost\">\n              <span>{{ selectedExample?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarListbox>\n        </DataTableHeader>\n      </DataTableRow>\n      <DataTableRow>\n        <template v-if=\"selectedContentType?.id === 'none'\">\n          <div\n            class=\"text-c-3 flex min-h-10 w-full items-center justify-center border-t p-2 text-sm\">\n            <span>No Body</span>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id === 'binaryFile'\">\n          <div\n            class=\"flex items-center justify-center overflow-hidden border-t p-1.5\">\n            <template v-if=\"example.body.binary\">\n              <span\n                class=\"text-c-2 w-full max-w-full overflow-hidden rounded border px-1.5 py-1 text-xs whitespace-nowrap\">\n                {{ (example.body.binary as File).name }}\n              </span>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 ml-1 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"removeBinaryFile\">\n                Delete\n              </ScalarButton>\n            </template>\n            <template v-else>\n              <ScalarButton\n                class=\"bg-b-2 hover:bg-b-3 text-c-2 border-0 shadow-none\"\n                size=\"sm\"\n                variant=\"outlined\"\n                @click=\"handleFileUpload\">\n                <span>Upload File</span>\n                <ScalarIcon\n                  class=\"ml-1\"\n                  icon=\"Upload\"\n                  size=\"xs\"\n                  thickness=\"2.5\" />\n              </ScalarButton>\n            </template>\n          </div>\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'multipartForm'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else-if=\"selectedContentType?.id == 'formUrlEncoded'\">\n          <RequestTable\n            ref=\"tableWrapperRef\"\n            class=\"!m-0 rounded-t-none border-t-0 border-r-0 border-b-0 border-l-0 shadow-none\"\n            :columns=\"['32px', '', '', '104px']\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :items=\"formParams\"\n            showUploadButton\n            :workspace=\"workspace\"\n            @deleteRow=\"deleteRow\"\n            @removeFile=\"handleRemoveFileFormData\"\n            @toggleRow=\"toggleRow\"\n            @updateRow=\"updateRow\"\n            @uploadFile=\"handleFileUploadFormData\" />\n        </template>\n        <template v-else>\n          <!-- TODO: remove this as type hack when we add syntax highlighting -->\n          <CodeInput\n            class=\"border-t px-3\"\n            content=\"\"\n            :envVariables=\"envVariables\"\n            :environment=\"environment\"\n            :language=\"codeInputLanguage as CodeMirrorLanguage\"\n            lineNumbers\n            lint\n            :modelValue=\"example.body?.raw?.value ?? ''\"\n            :workspace=\"workspace\"\n            @update:modelValue=\"updateRequestBody\" />\n        </template>\n      </DataTableRow>\n      <!-- Hacky... but effective, extra table row to trick the last group -->\n      <DataTableRow />\n    </DataTable>\n  </ViewLayoutCollapse>\n</template>\n<style scoped>\n:deep(.cm-content) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTooltip } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  environment,\n  envVariables,\n  workspace,\n  title,\n  paramKey,\n  readOnlyEntries = [],\n} = defineProps<{\n  example: RequestExample\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  title: string\n  label: string\n  paramKey: keyof RequestExample['parameters']\n  readOnlyEntries?: {\n    key: string\n    value: string\n    enabled: boolean\n    route: RouteLocationRaw\n  }[]\n  invalidParams: Set<string>\n}>()\n\nconst { requestExampleMutators } = useWorkspace()\n\nconst params = computed(() => example.parameters[paramKey] ?? [])\n\nonMounted(() => {\n  nextTick(() => {\n    defaultRow()\n  })\n})\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({ enabled: false })\n  const newParams = [...params.value, newParam]\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, newParams)\n}\n\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (!updatedParams[rowIdx]) {\n      return\n    }\n\n    updatedParams[rowIdx] = { ...updatedParams[rowIdx], [field]: value }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx].key !== '' ||\n      updatedParams[rowIdx].value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx].key === '' &&\n      updatedParams[rowIdx].value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n    requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\n/** Toggle a parameter row on or off */\nconst toggleRow = (rowIdx: number, enabled: boolean) =>\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.enabled`,\n    enabled,\n  )\n\nconst deleteAllRows = () => {\n  // filter out params that are enabled or required\n  const exampleParams = params.value.filter((param) => param.required)\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}`,\n    exampleParams,\n  )\n\n  /** ensure one empty row after deleting all rows */\n  nextTick(() => addRow())\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nfunction defaultRow() {\n  /** ensure one empty row by default */\n  if (params.value.length === 0) {\n    addRow()\n  } else if (params.value.length >= 1) {\n    /** ensure we always have a trailing empty row */\n    const lastParam = params.value[params.value.length - 1]\n    if (lastParam && lastParam.key !== '' && lastParam.value !== '') {\n      addRow()\n    }\n  }\n}\n\nconst itemCount = computed(\n  () => params.value.filter((param) => param.key || param.value).length,\n)\n\nconst showTooltip = computed(() => params.value.length > 1)\n\nwatch(\n  () => example,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst hasReadOnlyEntries = computed(() => (readOnlyEntries ?? []).length > 0)\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"group/params\"\n    :itemCount=\"itemCount\">\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=\"Clear optional parameters\"\n          placement=\"left\">\n          <ScalarButton\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"deleteAllRows\">\n            Clear\n            <span class=\"sr-only\">All {{ title }}</span>\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <div ref=\"tableWrapperRef\">\n      <!-- Read-only entries pinned to the top -->\n      <RequestTable\n        v-if=\"hasReadOnlyEntries\"\n        class=\"flex-1\"\n        :class=\"{ 'bg-c-3/5': hasReadOnlyEntries }\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        isGlobal\n        isReadOnly\n        :items=\"readOnlyEntries\"\n        :label\n        :workspace=\"workspace\" />\n      <!-- Dynamic entries -->\n      <RequestTable\n        class=\"flex-1\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        :items=\"params\"\n        :label\n        :workspace=\"workspace\"\n        @toggleRow=\"toggleRow\"\n        @updateRow=\"updateRow\"\n        @deleteRow=\"deleteRow\" />\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTooltip } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  requestExampleParametersSchema,\n  type RequestExample,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  environment,\n  envVariables,\n  workspace,\n  title,\n  paramKey,\n  readOnlyEntries = [],\n} = defineProps<{\n  example: RequestExample\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  title: string\n  label: string\n  paramKey: keyof RequestExample['parameters']\n  readOnlyEntries?: {\n    key: string\n    value: string\n    enabled: boolean\n    route: RouteLocationRaw\n  }[]\n  invalidParams: Set<string>\n}>()\n\nconst { requestExampleMutators } = useWorkspace()\n\nconst params = computed(() => example.parameters[paramKey] ?? [])\n\nonMounted(() => {\n  nextTick(() => {\n    defaultRow()\n  })\n})\n\n/** Add a new row to a given parameter list */\nconst addRow = () => {\n  /** Create a new parameter instance with 'enabled' set to false */\n  const newParam = requestExampleParametersSchema.parse({ enabled: false })\n  const newParams = [...params.value, newParam]\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, newParams)\n}\n\nconst tableWrapperRef = ref<HTMLInputElement | null>(null)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    if (!updatedParams[rowIdx]) {\n      return\n    }\n\n    updatedParams[rowIdx] = { ...updatedParams[rowIdx], [field]: value }\n\n    /** enable row key or value is filled */\n    if (\n      updatedParams[rowIdx].key !== '' ||\n      updatedParams[rowIdx].value !== ''\n    ) {\n      updatedParams[rowIdx].enabled = true\n    }\n\n    /** check key and value input state */\n    if (\n      updatedParams[rowIdx].key === '' &&\n      updatedParams[rowIdx].value === ''\n    ) {\n      /** remove if empty */\n      updatedParams.splice(rowIdx, 1)\n    }\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  } else {\n    /** if there is no row at the index, add a new one */\n    const payload = [requestExampleParametersSchema.parse({ [field]: value })]\n    requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, payload)\n\n    /** focus the new row */\n    nextTick(() => {\n      if (!tableWrapperRef.value) {\n        return\n      }\n      const inputs = tableWrapperRef.value.querySelectorAll('input')\n      const inputsIndex = field === 'key' ? 0 : 1\n      inputs[inputsIndex]?.focus()\n    })\n  }\n\n  // Add a new row if the updated row is the last one\n  if (rowIdx === currentParams.length - 1) {\n    addRow()\n  }\n}\n\n/** Toggle a parameter row on or off */\nconst toggleRow = (rowIdx: number, enabled: boolean) =>\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.enabled`,\n    enabled,\n  )\n\nconst deleteAllRows = () => {\n  // filter out params that are enabled or required\n  const exampleParams = params.value.filter((param) => param.required)\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}`,\n    exampleParams,\n  )\n\n  /** ensure one empty row after deleting all rows */\n  nextTick(() => addRow())\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nfunction defaultRow() {\n  /** ensure one empty row by default */\n  if (params.value.length === 0) {\n    addRow()\n  } else if (params.value.length >= 1) {\n    /** ensure we always have a trailing empty row */\n    const lastParam = params.value[params.value.length - 1]\n    if (lastParam && lastParam.key !== '' && lastParam.value !== '') {\n      addRow()\n    }\n  }\n}\n\nconst itemCount = computed(\n  () => params.value.filter((param) => param.key || param.value).length,\n)\n\nconst showTooltip = computed(() => params.value.length > 1)\n\nwatch(\n  () => example,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      defaultRow()\n    }\n  },\n  { immediate: true },\n)\n\nconst hasReadOnlyEntries = computed(() => (readOnlyEntries ?? []).length > 0)\n</script>\n<template>\n  <ViewLayoutCollapse\n    class=\"group/params\"\n    :itemCount=\"itemCount\">\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=\"Clear optional parameters\"\n          placement=\"left\">\n          <ScalarButton\n            class=\"pr-0.75 pl-1 transition-none\"\n            size=\"sm\"\n            variant=\"ghost\"\n            @click.stop=\"deleteAllRows\">\n            Clear\n            <span class=\"sr-only\">All {{ title }}</span>\n          </ScalarButton>\n        </ScalarTooltip>\n      </div>\n    </template>\n    <div ref=\"tableWrapperRef\">\n      <!-- Read-only entries pinned to the top -->\n      <RequestTable\n        v-if=\"hasReadOnlyEntries\"\n        class=\"flex-1\"\n        :class=\"{ 'bg-c-3/5': hasReadOnlyEntries }\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        isGlobal\n        isReadOnly\n        :items=\"readOnlyEntries\"\n        :label\n        :workspace=\"workspace\" />\n      <!-- Dynamic entries -->\n      <RequestTable\n        class=\"flex-1\"\n        :columns=\"['32px', '', '']\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :invalidParams=\"invalidParams\"\n        :items=\"params\"\n        :label\n        :workspace=\"workspace\"\n        @toggleRow=\"toggleRow\"\n        @updateRow=\"updateRow\"\n        @deleteRow=\"deleteRow\" />\n    </div>\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { Operation, RequestExample } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, watch } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  operation,\n  paramKey,\n  title,\n  environment,\n  envVariables,\n  workspace,\n} = defineProps<{\n  example: RequestExample\n  operation: Operation\n  paramKey: keyof RequestExample['parameters']\n  title: string\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  invalidParams: Set<string>\n}>()\n\nconst { requestMutators, requestExampleMutators } = useWorkspace()\n\nconst params = computed(() =>\n  example.parameters[paramKey].map((param) => ({\n    ...param,\n    enum: param.enum,\n  })),\n)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const parameters = example.parameters[paramKey]\n  const oldKey = parameters[rowIdx]?.key\n  if (!oldKey) {\n    return\n  }\n\n  /** Change variable in path as well */\n  if (field === 'key') {\n    if (parameters[rowIdx]?.required) {\n      /** Prevent updating the key of a required item */\n      return\n    }\n    if (!value) {\n      /** Remove parameter if path params table key is empty */\n      parameters.splice(rowIdx, 1)\n      const regx = new RegExp(`/:${encodeURIComponent(oldKey)}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, '')\n\n      requestMutators.edit(operation.uid, 'path', newPath)\n    } else {\n      /** Update URL with path params table key */\n      const encodedOldKey = encodeURIComponent(oldKey)\n      const encodedNewKey = encodeURIComponent(value)\n      const regx = new RegExp(`(?<=/):${encodedOldKey}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, `:${encodedNewKey}`)\n      requestMutators.edit(operation.uid, 'path', newPath)\n    }\n  }\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.${field}`,\n    value,\n  )\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nconst setPathVariable = (url: string) => {\n  const pathVariables = url.match(REGEX.PATH)?.map((v) => v.slice(1, -1)) || []\n  const parameters = example.parameters[paramKey]\n\n  const paramMap = new Map(parameters.map((param) => [param.key, param]))\n  const updatedParameters = pathVariables.map(\n    (key) => paramMap.get(key) || { key, value: '', enabled: true },\n  )\n\n  parameters.forEach((param) => {\n    /** prevent removing required parameters or with a value */\n    if (!pathVariables.includes(param.key) && (param.value || param.required)) {\n      updatedParameters.push(param)\n    }\n  })\n  parameters.splice(0, parameters.length, ...updatedParameters)\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, parameters)\n}\n\nconst handlePathVariableUpdate = (url: string) => {\n  if (url) {\n    setPathVariable(url)\n  }\n}\n\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (newURL) {\n      handlePathVariableUpdate(newURL)\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutCollapse :itemCount=\"params.length\">\n    <template #title>\n      {{ title }}\n    </template>\n\n    <RequestTable\n      v-if=\"params.length\"\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :envVariables=\"envVariables\"\n      :environment=\"environment\"\n      :invalidParams=\"invalidParams\"\n      :items=\"params\"\n      :workspace=\"workspace\"\n      @updateRow=\"updateRow\"\n      @deleteRow=\"deleteRow\" />\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { Operation, RequestExample } from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, watch } from 'vue'\n\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestTable from '@/views/Request/RequestSection/RequestTable.vue'\n\nconst {\n  example,\n  operation,\n  paramKey,\n  title,\n  environment,\n  envVariables,\n  workspace,\n} = defineProps<{\n  example: RequestExample\n  operation: Operation\n  paramKey: keyof RequestExample['parameters']\n  title: string\n  environment: Environment\n  envVariables: EnvVariable[]\n  workspace: Workspace\n  invalidParams: Set<string>\n}>()\n\nconst { requestMutators, requestExampleMutators } = useWorkspace()\n\nconst params = computed(() =>\n  example.parameters[paramKey].map((param) => ({\n    ...param,\n    enum: param.enum,\n  })),\n)\n\n/** Update a field in a parameter row */\nconst updateRow = (rowIdx: number, field: 'key' | 'value', value: string) => {\n  const parameters = example.parameters[paramKey]\n  const oldKey = parameters[rowIdx]?.key\n  if (!oldKey) {\n    return\n  }\n\n  /** Change variable in path as well */\n  if (field === 'key') {\n    if (parameters[rowIdx]?.required) {\n      /** Prevent updating the key of a required item */\n      return\n    }\n    if (!value) {\n      /** Remove parameter if path params table key is empty */\n      parameters.splice(rowIdx, 1)\n      const regx = new RegExp(`/:${encodeURIComponent(oldKey)}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, '')\n\n      requestMutators.edit(operation.uid, 'path', newPath)\n    } else {\n      /** Update URL with path params table key */\n      const encodedOldKey = encodeURIComponent(oldKey)\n      const encodedNewKey = encodeURIComponent(value)\n      const regx = new RegExp(`(?<=/):${encodedOldKey}(?=[/?#]|$)`, 'g')\n      const newPath = operation.path.replace(regx, `:${encodedNewKey}`)\n      requestMutators.edit(operation.uid, 'path', newPath)\n    }\n  }\n\n  requestExampleMutators.edit(\n    example.uid,\n    `parameters.${paramKey}.${rowIdx}.${field}`,\n    value,\n  )\n}\n\nconst deleteRow = (rowIdx: number) => {\n  const currentParams = params.value\n  if (currentParams.length > rowIdx) {\n    const updatedParams = [...currentParams]\n    updatedParams.splice(rowIdx, 1)\n\n    requestExampleMutators.edit(\n      example.uid,\n      `parameters.${paramKey}`,\n      updatedParams,\n    )\n  }\n}\n\nconst setPathVariable = (url: string) => {\n  const pathVariables = url.match(REGEX.PATH)?.map((v) => v.slice(1, -1)) || []\n  const parameters = example.parameters[paramKey]\n\n  const paramMap = new Map(parameters.map((param) => [param.key, param]))\n  const updatedParameters = pathVariables.map(\n    (key) => paramMap.get(key) || { key, value: '', enabled: true },\n  )\n\n  parameters.forEach((param) => {\n    /** prevent removing required parameters or with a value */\n    if (!pathVariables.includes(param.key) && (param.value || param.required)) {\n      updatedParameters.push(param)\n    }\n  })\n  parameters.splice(0, parameters.length, ...updatedParameters)\n\n  requestExampleMutators.edit(example.uid, `parameters.${paramKey}`, parameters)\n}\n\nconst handlePathVariableUpdate = (url: string) => {\n  if (url) {\n    setPathVariable(url)\n  }\n}\n\nwatch(\n  () => operation.path,\n  (newURL) => {\n    if (newURL) {\n      handlePathVariableUpdate(newURL)\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutCollapse :itemCount=\"params.length\">\n    <template #title>\n      {{ title }}\n    </template>\n\n    <RequestTable\n      v-if=\"params.length\"\n      class=\"flex-1\"\n      :columns=\"['32px', '', '']\"\n      :envVariables=\"envVariables\"\n      :environment=\"environment\"\n      :invalidParams=\"invalidParams\"\n      :items=\"params\"\n      :workspace=\"workspace\"\n      @updateRow=\"updateRow\"\n      @deleteRow=\"deleteRow\" />\n  </ViewLayoutCollapse>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarIcon,\n  type ScalarComboboxOption,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { snippetz, type ClientId, type TargetId } from '@scalar/snippetz'\nimport { computed, ref } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { useWorkspace } from '@/store'\nimport { CodeSnippet } from '@/views/Components/CodeSnippet'\n\nconst { collection, example, operation, server, workspace } = defineProps<{\n  collection: Collection\n  example: RequestExample\n  operation: Operation\n  server: Server | undefined\n  workspace: Workspace\n  environment: EnvVariables\n}>()\n\nconst { securitySchemes, workspaceMutators } = useWorkspace()\n\nconst localSelectedClient = computed(() => {\n  // If the current selection is a custom example\n  if (localSelectedClientState.value.targetKey === 'custom') {\n    // Check if this custom example still exists in the new operation\n    const customExampleExists = codeSamples.value?.some(\n      (sample) => sample.lang === localSelectedClientState.value.clientKey,\n    )\n\n    // If it exists, keep using it\n    if (customExampleExists) {\n      return localSelectedClientState.value\n    }\n  }\n\n  // Otherwise fall back to workspace selection\n  return {\n    targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n    clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n  }\n})\n\nconst codeSamples = computed(\n  () =>\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'],\n)\n\n// Store the actual selected state\nconst localSelectedClientState = ref(\n  codeSamples.value?.length\n    ? {\n        targetKey: 'custom',\n        clientKey: codeSamples.value[0]?.lang,\n      }\n    : {\n        targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n        clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n      },\n)\n\n/**\n * Returns selected security schemes for the request\n */\nconst selectedSecuritySchemes = computed(() => {\n  const uids =\n    operation.selectedSecuritySchemeUids ||\n    collection.selectedSecuritySchemeUids ||\n    []\n  return uids\n    .flat()\n    .map((uid) => securitySchemes[uid])\n    .filter((scheme): scheme is SecurityScheme => Boolean(scheme))\n})\n\n/**\n * Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop\n **/\nconst snippets = computed(() => {\n  const dict: Record<string, string> = {}\n\n  // Get the built-in snippets\n  const builtInOptions = snippetz()\n    .clients()\n    .map((group) => ({\n      label: group.title,\n      options: group.clients.map((plugin) => {\n        dict[`${group.key},${plugin.client}`] = plugin.title\n        return {\n          id: `${group.key},${plugin.client}`,\n          label: plugin.title,\n        }\n      }),\n    }))\n\n  // Get any custom code samples from x-codeSamples\n  const customExamples = (\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'] ||\n    []\n  ).map((sample) => ({\n    id: `custom,${sample.lang}`,\n    label: sample.label || sample.lang,\n  }))\n\n  // If we have custom samples, add them as a new group\n  const options =\n    customExamples.length > 0\n      ? [\n          {\n            id: 'customExamples',\n            label: 'Code Examples',\n            options: customExamples.map((customExample) => ({\n              id: customExample.id,\n              label: customExample.label ?? customExample.id,\n            })),\n          },\n          ...builtInOptions,\n        ]\n      : builtInOptions\n\n  // Add custom samples to the dictionary\n  customExamples.forEach((sample) => {\n    dict[sample.id] = sample.label ?? sample.id\n  })\n\n  return {\n    options,\n    dict,\n  }\n})\n\n/** The currently selected plugin */\nconst selectedPlugin = computed(() => {\n  const client = localSelectedClient.value\n\n  // Handle custom examples\n  if (client.targetKey === 'custom') {\n    const id = `custom,${client.clientKey}`\n    return {\n      id,\n      label: snippets.value.dict[id] ?? 'Unknown',\n    }\n  }\n\n  // Handle regular snippetz plugins\n  const id = `${client.targetKey},${client.clientKey}`\n  return {\n    id,\n    label: snippets.value.dict[id] ?? 'Unknown',\n  }\n})\n\n/** The currently selected target */\nconst selectedTarget = computed(\n  () => localSelectedClient.value.targetKey as TargetId,\n)\n\n/** The currently selected client */\nconst selectedClient = computed(\n  () => localSelectedClient.value.clientKey as ClientId<TargetId>,\n)\n\n/** Update the selection when a new client is picked */\nconst selectClient = (value: ScalarComboboxOption | undefined) => {\n  if (!value) {\n    return\n  }\n  const { id } = value\n  const [target, client] = id.split(',')\n\n  if (!target || !client) {\n    return\n  }\n\n  // Update the state ref\n  localSelectedClientState.value = {\n    targetKey: target,\n    clientKey: client,\n  }\n\n  // Only update workspace for non-custom selections\n  if (target !== 'custom') {\n    workspaceMutators.edit(workspace.uid, 'selectedHttpClient', {\n      targetKey: target,\n      clientKey: client,\n    })\n  }\n}\n\n/** Get the code sample content for a custom example */\nconst customCodeContent = computed(() => {\n  if (!selectedPlugin.value.id.startsWith('custom,')) {\n    return undefined\n  }\n\n  const lang = selectedPlugin.value.id.split(',')[1]\n  const sample = codeSamples.value?.find((s) => s.lang === lang)\n  return sample?.source\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"group/preview w-full border-b-0\"\n      :defaultOpen=\"false\">\n      <template #title>Code Snippet</template>\n      <template #actions>\n        <div class=\"flex flex-1\">\n          <ScalarCombobox\n            :modelValue=\"selectedPlugin\"\n            :options=\"snippets.options\"\n            placement=\"bottom-end\"\n            @update:modelValue=\"selectClient\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedPlugin?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarCombobox>\n        </div>\n      </template>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div\n            class=\"bg-b-1 flex items-center justify-center overflow-hidden border-t\">\n            <!-- Use the given code example -->\n            <template v-if=\"customCodeContent\">\n              <ScalarCodeBlock\n                :content=\"customCodeContent\"\n                :lang=\"selectedPlugin.id.split(',')[1] ?? 'plaintext'\" />\n            </template>\n            <!-- Generate a code snippet -->\n            <template v-else>\n              <CodeSnippet\n                :client=\"selectedClient\"\n                :example=\"example\"\n                :operation=\"operation\"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :server=\"server\"\n                :target=\"selectedTarget\"\n                :environment=\"environment\" />\n            </template>\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n<style scoped>\n:deep(code.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarCombobox,\n  ScalarIcon,\n  type ScalarComboboxOption,\n} from '@scalar/components'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { snippetz, type ClientId, type TargetId } from '@scalar/snippetz'\nimport { computed, ref } from 'vue'\n\nimport DataTable from '@/components/DataTable/DataTable.vue'\nimport DataTableRow from '@/components/DataTable/DataTableRow.vue'\nimport ViewLayoutCollapse from '@/components/ViewLayout/ViewLayoutCollapse.vue'\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { useWorkspace } from '@/store'\nimport { CodeSnippet } from '@/views/Components/CodeSnippet'\n\nconst { collection, example, operation, server, workspace } = defineProps<{\n  collection: Collection\n  example: RequestExample\n  operation: Operation\n  server: Server | undefined\n  workspace: Workspace\n  environment: EnvVariables\n}>()\n\nconst { securitySchemes, workspaceMutators } = useWorkspace()\n\nconst localSelectedClient = computed(() => {\n  // If the current selection is a custom example\n  if (localSelectedClientState.value.targetKey === 'custom') {\n    // Check if this custom example still exists in the new operation\n    const customExampleExists = codeSamples.value?.some(\n      (sample) => sample.lang === localSelectedClientState.value.clientKey,\n    )\n\n    // If it exists, keep using it\n    if (customExampleExists) {\n      return localSelectedClientState.value\n    }\n  }\n\n  // Otherwise fall back to workspace selection\n  return {\n    targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n    clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n  }\n})\n\nconst codeSamples = computed(\n  () =>\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'],\n)\n\n// Store the actual selected state\nconst localSelectedClientState = ref(\n  codeSamples.value?.length\n    ? {\n        targetKey: 'custom',\n        clientKey: codeSamples.value[0]?.lang,\n      }\n    : {\n        targetKey: workspace.selectedHttpClient?.targetKey ?? 'js',\n        clientKey: workspace.selectedHttpClient?.clientKey ?? 'fetch',\n      },\n)\n\n/**\n * Returns selected security schemes for the request\n */\nconst selectedSecuritySchemes = computed(() => {\n  const uids =\n    operation.selectedSecuritySchemeUids ||\n    collection.selectedSecuritySchemeUids ||\n    []\n  return uids\n    .flat()\n    .map((uid) => securitySchemes[uid])\n    .filter((scheme): scheme is SecurityScheme => Boolean(scheme))\n})\n\n/**\n * Group plugins by target/language to show in a dropdown, also build a dictionary in the same loop\n **/\nconst snippets = computed(() => {\n  const dict: Record<string, string> = {}\n\n  // Get the built-in snippets\n  const builtInOptions = snippetz()\n    .clients()\n    .map((group) => ({\n      label: group.title,\n      options: group.clients.map((plugin) => {\n        dict[`${group.key},${plugin.client}`] = plugin.title\n        return {\n          id: `${group.key},${plugin.client}`,\n          label: plugin.title,\n        }\n      }),\n    }))\n\n  // Get any custom code samples from x-codeSamples\n  const customExamples = (\n    operation['x-codeSamples'] ||\n    operation['x-code-samples'] ||\n    operation['x-custom-examples'] ||\n    []\n  ).map((sample) => ({\n    id: `custom,${sample.lang}`,\n    label: sample.label || sample.lang,\n  }))\n\n  // If we have custom samples, add them as a new group\n  const options =\n    customExamples.length > 0\n      ? [\n          {\n            id: 'customExamples',\n            label: 'Code Examples',\n            options: customExamples.map((customExample) => ({\n              id: customExample.id,\n              label: customExample.label ?? customExample.id,\n            })),\n          },\n          ...builtInOptions,\n        ]\n      : builtInOptions\n\n  // Add custom samples to the dictionary\n  customExamples.forEach((sample) => {\n    dict[sample.id] = sample.label ?? sample.id\n  })\n\n  return {\n    options,\n    dict,\n  }\n})\n\n/** The currently selected plugin */\nconst selectedPlugin = computed(() => {\n  const client = localSelectedClient.value\n\n  // Handle custom examples\n  if (client.targetKey === 'custom') {\n    const id = `custom,${client.clientKey}`\n    return {\n      id,\n      label: snippets.value.dict[id] ?? 'Unknown',\n    }\n  }\n\n  // Handle regular snippetz plugins\n  const id = `${client.targetKey},${client.clientKey}`\n  return {\n    id,\n    label: snippets.value.dict[id] ?? 'Unknown',\n  }\n})\n\n/** The currently selected target */\nconst selectedTarget = computed(\n  () => localSelectedClient.value.targetKey as TargetId,\n)\n\n/** The currently selected client */\nconst selectedClient = computed(\n  () => localSelectedClient.value.clientKey as ClientId<TargetId>,\n)\n\n/** Update the selection when a new client is picked */\nconst selectClient = (value: ScalarComboboxOption | undefined) => {\n  if (!value) {\n    return\n  }\n  const { id } = value\n  const [target, client] = id.split(',')\n\n  if (!target || !client) {\n    return\n  }\n\n  // Update the state ref\n  localSelectedClientState.value = {\n    targetKey: target,\n    clientKey: client,\n  }\n\n  // Only update workspace for non-custom selections\n  if (target !== 'custom') {\n    workspaceMutators.edit(workspace.uid, 'selectedHttpClient', {\n      targetKey: target,\n      clientKey: client,\n    })\n  }\n}\n\n/** Get the code sample content for a custom example */\nconst customCodeContent = computed(() => {\n  if (!selectedPlugin.value.id.startsWith('custom,')) {\n    return undefined\n  }\n\n  const lang = selectedPlugin.value.id.split(',')[1]\n  const sample = codeSamples.value?.find((s) => s.lang === lang)\n  return sample?.source\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <ViewLayoutCollapse\n      class=\"group/preview w-full border-b-0\"\n      :defaultOpen=\"false\">\n      <template #title>Code Snippet</template>\n      <template #actions>\n        <div class=\"flex flex-1\">\n          <ScalarCombobox\n            :modelValue=\"selectedPlugin\"\n            :options=\"snippets.options\"\n            placement=\"bottom-end\"\n            @update:modelValue=\"selectClient\">\n            <ScalarButton\n              class=\"text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-1.25 py-0.75 font-normal\"\n              variant=\"ghost\">\n              <span>{{ selectedPlugin?.label }}</span>\n              <ScalarIcon\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </ScalarButton>\n          </ScalarCombobox>\n        </div>\n      </template>\n      <DataTable\n        :columns=\"['']\"\n        presentational>\n        <DataTableRow>\n          <div\n            class=\"bg-b-1 flex items-center justify-center overflow-hidden border-t\">\n            <!-- Use the given code example -->\n            <template v-if=\"customCodeContent\">\n              <ScalarCodeBlock\n                :content=\"customCodeContent\"\n                :lang=\"selectedPlugin.id.split(',')[1] ?? 'plaintext'\" />\n            </template>\n            <!-- Generate a code snippet -->\n            <template v-else>\n              <CodeSnippet\n                :client=\"selectedClient\"\n                :example=\"example\"\n                :operation=\"operation\"\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :server=\"server\"\n                :target=\"selectedTarget\"\n                :environment=\"environment\" />\n            </template>\n          </div>\n        </DataTableRow>\n      </DataTable>\n    </ViewLayoutCollapse>\n  </div>\n</template>\n<style scoped>\n:deep(code.hljs *) {\n  font-size: var(--scalar-small);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { SelectedSecuritySchemeUids } from '@scalar/oas-utils/entities/shared'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody, isDefined, REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useLayout } from '@/hooks'\nimport { matchesDomain } from '@/libs/send-request/set-request-cookies'\nimport { usePluginManager } from '@/plugins'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestBody from '@/views/Request/RequestSection/RequestBody.vue'\nimport RequestParams from '@/views/Request/RequestSection/RequestParams.vue'\nimport RequestPathParams from '@/views/Request/RequestSection/RequestPathParams.vue'\n\nimport RequestAuth from './RequestAuth/RequestAuth.vue'\nimport RequestCodeExample from './RequestCodeExample.vue'\n\nconst {\n  collection,\n  environment,\n  envVariables,\n  example,\n  operation,\n  selectedSecuritySchemeUids,\n  server,\n  workspace,\n} = defineProps<{\n  collection: Collection\n  environment: Environment\n  envVariables: EnvVariable[]\n  example: RequestExample\n  invalidParams: Set<string>\n  operation: Operation\n  selectedSecuritySchemeUids: SelectedSecuritySchemeUids\n  server: Server | undefined\n  workspace: Workspace\n}>()\n\nconst requestSections = [\n  'Auth',\n  'Path Parameters',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n  // 'Scripts',\n] as const\n\ntype Filter = 'All' | (typeof requestSections)[number]\n\nconst { requestMutators, cookies, securitySchemes } = useWorkspace()\nconst { layout } = useLayout()\n\nconst filters = computed<Filter[]>(() => {\n  const allSections = new Set<Filter>(['All', ...requestSections])\n\n  if (!example.parameters.path.length) {\n    allSections.delete('Path Parameters')\n  }\n  if (!canMethodHaveBody(operation.method ?? 'get')) {\n    allSections.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    allSections.delete('Auth')\n  }\n\n  return [...allSections]\n})\n\n/** A list of section ids */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n// If security = [] or [{}] just hide it on readOnly mode\nconst isAuthHidden = computed(\n  () =>\n    layout === 'modal' &&\n    !operation.security &&\n    !Object.keys(securitySchemes ?? {}).length,\n)\n\nconst selectedFilter = ref<Filter>('All')\n\nwatch(\n  () => operation,\n  (newOperation) => {\n    if (\n      selectedFilter.value === 'Body' &&\n      newOperation &&\n      !canMethodHaveBody(newOperation.method)\n    ) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\nconst updateRequestNameHandler = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  requestMutators.edit(operation.uid, 'summary', target.value)\n}\n\n/**\n * Add the global cookies as static entries to the cookies section\n */\nconst activeWorkspaceCookies = computed(() =>\n  (workspace.cookies ?? [])\n    .map((uid) => cookies[uid])\n    .filter(isDefined)\n    .filter((cookie) => cookie.name)\n    .filter((cookie) =>\n      matchesDomain(server?.url || operation.path, cookie.domain),\n    )\n    .map((cookie) => ({\n      key: cookie.name,\n      value: cookie.value,\n      route: {\n        name: 'cookies',\n        params: {\n          cookies: cookie.uid,\n        },\n      },\n      enabled: true,\n    })),\n)\n\n// If the request has no summary, use the path or fallback\nconst handleRequestNamePlaceholder = () => {\n  return operation.summary\n    ? operation.summary\n    : operation.path.replace(REGEX.PROTOCOL, '')\n      ? operation.path.replace(REGEX.PROTOCOL, '')\n      : 'Request Name'\n}\n\nconst labelRequestNameId = useId()\n\n// Plugins\nconst pluginManager = usePluginManager()\n\nconst requestSectionViews = pluginManager.getViewComponents('request.section')\n\nconst updateOperationHandler = (key: keyof Operation, value: string) =>\n  requestMutators.edit(operation.uid, key, value)\n\n// Sets to all when auth filter is hidden but was previously selected to prevent empty section\nwatch(\n  () => isAuthHidden.value,\n  (authHidden) => {\n    if (authHidden && selectedFilter.value === 'Auth') {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          class=\"text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n          :placeholder=\"handleRequestNamePlaceholder()\"\n          :value=\"operation.summary\"\n          @input=\"updateRequestNameHandler\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <RequestAuth\n        v-if=\"\n          collection &&\n          workspace &&\n          (layout !== 'modal' || Object.keys(securitySchemes ?? {}).length)\n        \"\n        v-show=\"\n          !isAuthHidden &&\n          (selectedFilter === 'All' || selectedFilter === 'Auth')\n        \"\n        :id=\"filterIds.Auth\"\n        class=\"request-section-content-auth\"\n        :collection=\"collection\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :isReadOnly=\"layout === 'modal'\"\n        layout=\"client\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        :selectedSecuritySchemeUids=\"selectedSecuritySchemeUids\"\n        :server=\"server\"\n        title=\"Authentication\"\n        :workspace=\"workspace\" />\n      <RequestPathParams\n        v-show=\"\n          (selectedFilter === 'All' || selectedFilter === 'Path Parameters') &&\n          example.parameters.path.length\n        \"\n        :id=\"filterIds['Path Parameters']\"\n        class=\"request-section-content-path-params\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        :operation=\"operation\"\n        paramKey=\"path\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Path Parameters\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Cookies'\"\n        :id=\"filterIds.Cookies\"\n        class=\"request-section-content-cookies\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Cookie\"\n        :operation=\"operation\"\n        paramKey=\"cookies\"\n        :readOnlyEntries=\"activeWorkspaceCookies\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Cookies\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Headers'\"\n        :id=\"filterIds.Headers\"\n        class=\"request-section-content-headers\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Header\"\n        :operation=\"operation\"\n        paramKey=\"headers\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Headers\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Query'\"\n        :id=\"filterIds.Query\"\n        class=\"request-section-content-query\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Parameter\"\n        :operation=\"operation\"\n        paramKey=\"query\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Query Parameters\"\n        :workspace=\"workspace\" />\n      <RequestBody\n        v-if=\"\n          operation.method &&\n          (selectedFilter === 'All' || selectedFilter === 'Body') &&\n          canMethodHaveBody(operation.method)\n        \"\n        :id=\"filterIds.Body\"\n        class=\"request-section-content-body\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Body\"\n        :workspace=\"workspace\" />\n\n      <template\n        v-for=\"(view, index) in requestSectionViews\"\n        :key=\"view.title ?? index\">\n        <ScalarErrorBoundary>\n          <component\n            :is=\"view.component\"\n            v-show=\"selectedFilter === 'All' || selectedFilter === view.title\"\n            :operation=\"operation\"\n            @update:operation=\"updateOperationHandler\" />\n        </ScalarErrorBoundary>\n      </template>\n\n      <!-- Spacer -->\n      <div class=\"flex flex-grow\" />\n\n      <!-- Code Snippet -->\n      <ScalarErrorBoundary>\n        <RequestCodeExample\n          class=\"request-section-content-code-example -mt-1/2 border-t\"\n          :collection=\"collection\"\n          :environment=\"envVariables\"\n          :example=\"example\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :workspace=\"workspace\" />\n      </ScalarErrorBoundary>\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { ScalarErrorBoundary } from '@scalar/components'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport type { SelectedSecuritySchemeUids } from '@scalar/oas-utils/entities/shared'\nimport type {\n  Collection,\n  Operation,\n  RequestExample,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport type { Workspace } from '@scalar/oas-utils/entities/workspace'\nimport { canMethodHaveBody, isDefined, REGEX } from '@scalar/oas-utils/helpers'\nimport { computed, ref, useId, watch } from 'vue'\n\nimport SectionFilter from '@/components/SectionFilter.vue'\nimport ViewLayoutSection from '@/components/ViewLayout/ViewLayoutSection.vue'\nimport { useLayout } from '@/hooks'\nimport { matchesDomain } from '@/libs/send-request/set-request-cookies'\nimport { usePluginManager } from '@/plugins'\nimport { useWorkspace } from '@/store'\nimport type { EnvVariable } from '@/store/active-entities'\nimport RequestBody from '@/views/Request/RequestSection/RequestBody.vue'\nimport RequestParams from '@/views/Request/RequestSection/RequestParams.vue'\nimport RequestPathParams from '@/views/Request/RequestSection/RequestPathParams.vue'\n\nimport RequestAuth from './RequestAuth/RequestAuth.vue'\nimport RequestCodeExample from './RequestCodeExample.vue'\n\nconst {\n  collection,\n  environment,\n  envVariables,\n  example,\n  operation,\n  selectedSecuritySchemeUids,\n  server,\n  workspace,\n} = defineProps<{\n  collection: Collection\n  environment: Environment\n  envVariables: EnvVariable[]\n  example: RequestExample\n  invalidParams: Set<string>\n  operation: Operation\n  selectedSecuritySchemeUids: SelectedSecuritySchemeUids\n  server: Server | undefined\n  workspace: Workspace\n}>()\n\nconst requestSections = [\n  'Auth',\n  'Path Parameters',\n  'Cookies',\n  'Headers',\n  'Query',\n  'Body',\n  // 'Scripts',\n] as const\n\ntype Filter = 'All' | (typeof requestSections)[number]\n\nconst { requestMutators, cookies, securitySchemes } = useWorkspace()\nconst { layout } = useLayout()\n\nconst filters = computed<Filter[]>(() => {\n  const allSections = new Set<Filter>(['All', ...requestSections])\n\n  if (!example.parameters.path.length) {\n    allSections.delete('Path Parameters')\n  }\n  if (!canMethodHaveBody(operation.method ?? 'get')) {\n    allSections.delete('Body')\n  }\n  if (isAuthHidden.value) {\n    allSections.delete('Auth')\n  }\n\n  return [...allSections]\n})\n\n/** A list of section ids */\nconst filterIds = computed(\n  () =>\n    Object.fromEntries(\n      filters.value.map((section) => [section, useId()]),\n    ) as Record<Filter, string>,\n)\n\n// If security = [] or [{}] just hide it on readOnly mode\nconst isAuthHidden = computed(\n  () =>\n    layout === 'modal' &&\n    !operation.security &&\n    !Object.keys(securitySchemes ?? {}).length,\n)\n\nconst selectedFilter = ref<Filter>('All')\n\nwatch(\n  () => operation,\n  (newOperation) => {\n    if (\n      selectedFilter.value === 'Body' &&\n      newOperation &&\n      !canMethodHaveBody(newOperation.method)\n    ) {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n\nconst updateRequestNameHandler = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  requestMutators.edit(operation.uid, 'summary', target.value)\n}\n\n/**\n * Add the global cookies as static entries to the cookies section\n */\nconst activeWorkspaceCookies = computed(() =>\n  (workspace.cookies ?? [])\n    .map((uid) => cookies[uid])\n    .filter(isDefined)\n    .filter((cookie) => cookie.name)\n    .filter((cookie) =>\n      matchesDomain(server?.url || operation.path, cookie.domain),\n    )\n    .map((cookie) => ({\n      key: cookie.name,\n      value: cookie.value,\n      route: {\n        name: 'cookies',\n        params: {\n          cookies: cookie.uid,\n        },\n      },\n      enabled: true,\n    })),\n)\n\n// If the request has no summary, use the path or fallback\nconst handleRequestNamePlaceholder = () => {\n  return operation.summary\n    ? operation.summary\n    : operation.path.replace(REGEX.PROTOCOL, '')\n      ? operation.path.replace(REGEX.PROTOCOL, '')\n      : 'Request Name'\n}\n\nconst labelRequestNameId = useId()\n\n// Plugins\nconst pluginManager = usePluginManager()\n\nconst requestSectionViews = pluginManager.getViewComponents('request.section')\n\nconst updateOperationHandler = (key: keyof Operation, value: string) =>\n  requestMutators.edit(operation.uid, key, value)\n\n// Sets to all when auth filter is hidden but was previously selected to prevent empty section\nwatch(\n  () => isAuthHidden.value,\n  (authHidden) => {\n    if (authHidden && selectedFilter.value === 'Auth') {\n      selectedFilter.value = 'All'\n    }\n  },\n)\n</script>\n<template>\n  <ViewLayoutSection :aria-label=\"`Request: ${operation.summary}`\">\n    <template #title>\n      <div\n        class=\"group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24\">\n        <label\n          v-if=\"layout !== 'modal'\"\n          class=\"pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0\"\n          :for=\"labelRequestNameId\" />\n        <input\n          v-if=\"layout !== 'modal'\"\n          :id=\"labelRequestNameId\"\n          class=\"text-c-1 group-hover-input pointer-events-auto relative z-10 -ml-0.5 h-8 w-full rounded pl-1.25 has-[:focus-visible]:outline md:-ml-1.25\"\n          :placeholder=\"handleRequestNamePlaceholder()\"\n          :value=\"operation.summary\"\n          @input=\"updateRequestNameHandler\" />\n        <span\n          v-else\n          class=\"text-c-1 flex h-8 items-center\">\n          {{ operation.summary }}\n        </span>\n      </div>\n      <SectionFilter\n        v-model=\"selectedFilter\"\n        :filterIds=\"filterIds\"\n        :filters=\"filters\" />\n    </template>\n    <div\n      :id=\"filterIds.All\"\n      class=\"request-section-content custom-scroll relative flex flex-1 flex-col\"\n      :role=\"selectedFilter === 'All' ? 'tabpanel' : 'none'\">\n      <RequestAuth\n        v-if=\"\n          collection &&\n          workspace &&\n          (layout !== 'modal' || Object.keys(securitySchemes ?? {}).length)\n        \"\n        v-show=\"\n          !isAuthHidden &&\n          (selectedFilter === 'All' || selectedFilter === 'Auth')\n        \"\n        :id=\"filterIds.Auth\"\n        class=\"request-section-content-auth\"\n        :collection=\"collection\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :isReadOnly=\"layout === 'modal'\"\n        layout=\"client\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        :selectedSecuritySchemeUids=\"selectedSecuritySchemeUids\"\n        :server=\"server\"\n        title=\"Authentication\"\n        :workspace=\"workspace\" />\n      <RequestPathParams\n        v-show=\"\n          (selectedFilter === 'All' || selectedFilter === 'Path Parameters') &&\n          example.parameters.path.length\n        \"\n        :id=\"filterIds['Path Parameters']\"\n        class=\"request-section-content-path-params\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        :operation=\"operation\"\n        paramKey=\"path\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Path Parameters\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Cookies'\"\n        :id=\"filterIds.Cookies\"\n        class=\"request-section-content-cookies\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Cookie\"\n        :operation=\"operation\"\n        paramKey=\"cookies\"\n        :readOnlyEntries=\"activeWorkspaceCookies\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Cookies\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Headers'\"\n        :id=\"filterIds.Headers\"\n        class=\"request-section-content-headers\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Header\"\n        :operation=\"operation\"\n        paramKey=\"headers\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Headers\"\n        :workspace=\"workspace\" />\n      <RequestParams\n        v-show=\"selectedFilter === 'All' || selectedFilter === 'Query'\"\n        :id=\"filterIds.Query\"\n        class=\"request-section-content-query\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :invalidParams=\"invalidParams\"\n        label=\"Parameter\"\n        :operation=\"operation\"\n        paramKey=\"query\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Query Parameters\"\n        :workspace=\"workspace\" />\n      <RequestBody\n        v-if=\"\n          operation.method &&\n          (selectedFilter === 'All' || selectedFilter === 'Body') &&\n          canMethodHaveBody(operation.method)\n        \"\n        :id=\"filterIds.Body\"\n        class=\"request-section-content-body\"\n        :envVariables=\"envVariables\"\n        :environment=\"environment\"\n        :example=\"example\"\n        :operation=\"operation\"\n        :role=\"selectedFilter === 'All' ? 'none' : 'tabpanel'\"\n        title=\"Body\"\n        :workspace=\"workspace\" />\n\n      <template\n        v-for=\"(view, index) in requestSectionViews\"\n        :key=\"view.title ?? index\">\n        <ScalarErrorBoundary>\n          <component\n            :is=\"view.component\"\n            v-show=\"selectedFilter === 'All' || selectedFilter === view.title\"\n            :operation=\"operation\"\n            @update:operation=\"updateOperationHandler\" />\n        </ScalarErrorBoundary>\n      </template>\n\n      <!-- Spacer -->\n      <div class=\"flex flex-grow\" />\n\n      <!-- Code Snippet -->\n      <ScalarErrorBoundary>\n        <RequestCodeExample\n          class=\"request-section-content-code-example -mt-1/2 border-t\"\n          :collection=\"collection\"\n          :environment=\"envVariables\"\n          :example=\"example\"\n          :operation=\"operation\"\n          :server=\"server\"\n          :workspace=\"workspace\" />\n      </ScalarErrorBoundary>\n    </div>\n  </ViewLayoutSection>\n</template>\n<style scoped>\n.request-section-content {\n  --scalar-border-width: 0.5px;\n}\n.request-section-content-filter {\n  box-shadow: 0 -10px 0 10px var(--scalar-background-1);\n}\n.request-item:focus-within .request-meta-buttons {\n  opacity: 1;\n}\n.group-hover-input {\n  border-width: var(--scalar-border-width);\n  border-color: transparent;\n}\n.group:hover .group-hover-input {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  border-color: var(--scalar-border-color);\n}\n.group-hover-input:focus {\n  background: transparent !important;\n  border-color: var(--scalar-border-color) !important;\n}\n</style>\n"],"mappings":"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"}