@scalar/api-client 2.38.3 → 2.39.0

package/dist/views/Request/RequestSection/RequestSection.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestSection.vue.js","names":[],"sources":["../../../../src/views/Request/RequestSection/RequestSection.vue"],"sourcesContent":["<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":""}

package/dist/views/Request/RequestSection/RequestSection.vue.script.js

@@ -0,0 +1,297 @@
+import { useLayout } from "../../../hooks/useLayout.js";
+import { usePluginManager } from "../../../plugins/hooks/usePluginManager.js";
+import { matchesDomain } from "../../../libs/send-request/set-request-cookies.js";
+import { useWorkspace } from "../../../store/store.js";
+import SectionFilter_default from "../../../components/SectionFilter.vue.js";
+import ViewLayoutSection_default from "../../../components/ViewLayout/ViewLayoutSection.vue.js";
+import RequestBody_default from "./RequestBody.vue.js";
+import RequestParams_default from "./RequestParams.vue.js";
+import RequestPathParams_default from "./RequestPathParams.vue.js";
+import RequestAuth_default from "./RequestAuth/RequestAuth.vue.js";
+import RequestCodeExample_default from "./RequestCodeExample.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
+import { ScalarErrorBoundary } from "@scalar/components";
+import { REGEX, canMethodHaveBody, isDefined } from "@scalar/oas-utils/helpers";
+//#region src/views/Request/RequestSection/RequestSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "group pointer-events-none flex flex-1 items-center gap-1 lg:pr-24" };
+var _hoisted_2 = ["for"];
+var _hoisted_3 = [
+	"id",
+	"placeholder",
+	"value"
+];
+var _hoisted_4 = {
+	key: 2,
+	class: "text-c-1 flex h-8 items-center"
+};
+var _hoisted_5 = ["id", "role"];
+var RequestSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestSection",
+	props: {
+		collection: {},
+		environment: {},
+		envVariables: {},
+		example: {},
+		invalidParams: {},
+		operation: {},
+		selectedSecuritySchemeUids: {},
+		server: {},
+		workspace: {}
+	},
+	setup(__props) {
+		const requestSections = [
+			"Auth",
+			"Path Parameters",
+			"Cookies",
+			"Headers",
+			"Query",
+			"Body"
+		];
+		const { requestMutators, cookies, securitySchemes } = useWorkspace();
+		const { layout } = useLayout();
+		const filters = computed(() => {
+			const allSections = new Set(["All", ...requestSections]);
+			if (!__props.example.parameters.path.length) allSections.delete("Path Parameters");
+			if (!canMethodHaveBody(__props.operation.method ?? "get")) allSections.delete("Body");
+			if (isAuthHidden.value) allSections.delete("Auth");
+			return [...allSections];
+		});
+		/** A list of section ids */
+		const filterIds = computed(() => Object.fromEntries(filters.value.map((section) => [section, useId()])));
+		const isAuthHidden = computed(() => layout === "modal" && !__props.operation.security && !Object.keys(securitySchemes ?? {}).length);
+		const selectedFilter = ref("All");
+		watch(() => __props.operation, (newOperation) => {
+			if (selectedFilter.value === "Body" && newOperation && !canMethodHaveBody(newOperation.method)) selectedFilter.value = "All";
+		});
+		const updateRequestNameHandler = (event) => {
+			const target = event.target;
+			requestMutators.edit(__props.operation.uid, "summary", target.value);
+		};
+		/**
+		* Add the global cookies as static entries to the cookies section
+		*/
+		const activeWorkspaceCookies = computed(() => (__props.workspace.cookies ?? []).map((uid) => cookies[uid]).filter(isDefined).filter((cookie) => cookie.name).filter((cookie) => matchesDomain(__props.server?.url || __props.operation.path, cookie.domain)).map((cookie) => ({
+			key: cookie.name,
+			value: cookie.value,
+			route: {
+				name: "cookies",
+				params: { cookies: cookie.uid }
+			},
+			enabled: true
+		})));
+		const handleRequestNamePlaceholder = () => {
+			return __props.operation.summary ? __props.operation.summary : __props.operation.path.replace(REGEX.PROTOCOL, "") ? __props.operation.path.replace(REGEX.PROTOCOL, "") : "Request Name";
+		};
+		const labelRequestNameId = useId();
+		const requestSectionViews = usePluginManager().getViewComponents("request.section");
+		const updateOperationHandler = (key, value) => requestMutators.edit(__props.operation.uid, key, value);
+		watch(() => isAuthHidden.value, (authHidden) => {
+			if (authHidden && selectedFilter.value === "Auth") selectedFilter.value = "All";
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(ViewLayoutSection_default, { "aria-label": `Request: ${__props.operation.summary}` }, {
+				title: withCtx(() => [createElementVNode("div", _hoisted_1, [unref(layout) !== "modal" ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					class: "pointer-events-auto absolute top-0 left-0 h-full w-full cursor-text opacity-0",
+					for: unref(labelRequestNameId)
+				}, null, 8, _hoisted_2)) : createCommentVNode("", true), unref(layout) !== "modal" ? (openBlock(), createElementBlock("input", {
+					key: 1,
+					id: unref(labelRequestNameId),
+					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",
+					placeholder: handleRequestNamePlaceholder(),
+					value: __props.operation.summary,
+					onInput: updateRequestNameHandler
+				}, null, 40, _hoisted_3)) : (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.operation.summary), 1))]), createVNode(SectionFilter_default, {
+					modelValue: selectedFilter.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedFilter.value = $event),
+					filterIds: filterIds.value,
+					filters: filters.value
+				}, null, 8, [
+					"modelValue",
+					"filterIds",
+					"filters"
+				])]),
+				default: withCtx(() => [createElementVNode("div", {
+					id: filterIds.value.All,
+					class: "request-section-content custom-scroll relative flex flex-1 flex-col",
+					role: selectedFilter.value === "All" ? "tabpanel" : "none"
+				}, [
+					__props.collection && __props.workspace && (unref(layout) !== "modal" || Object.keys(unref(securitySchemes) ?? {}).length) ? withDirectives((openBlock(), createBlock(RequestAuth_default, {
+						key: 0,
+						id: filterIds.value.Auth,
+						class: "request-section-content-auth",
+						collection: __props.collection,
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						isReadOnly: unref(layout) === "modal",
+						layout: "client",
+						operation: __props.operation,
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						selectedSecuritySchemeUids: __props.selectedSecuritySchemeUids,
+						server: __props.server,
+						title: "Authentication",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"collection",
+						"envVariables",
+						"environment",
+						"isReadOnly",
+						"operation",
+						"role",
+						"selectedSecuritySchemeUids",
+						"server",
+						"workspace"
+					])), [[vShow, !isAuthHidden.value && (selectedFilter.value === "All" || selectedFilter.value === "Auth")]]) : createCommentVNode("", true),
+					withDirectives(createVNode(RequestPathParams_default, {
+						id: filterIds.value["Path Parameters"],
+						class: "request-section-content-path-params",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						operation: __props.operation,
+						paramKey: "path",
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Path Parameters",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"role",
+						"workspace"
+					]), [[vShow, (selectedFilter.value === "All" || selectedFilter.value === "Path Parameters") && __props.example.parameters.path.length]]),
+					withDirectives(createVNode(RequestParams_default, {
+						id: filterIds.value.Cookies,
+						class: "request-section-content-cookies",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						label: "Cookie",
+						operation: __props.operation,
+						paramKey: "cookies",
+						readOnlyEntries: activeWorkspaceCookies.value,
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Cookies",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"readOnlyEntries",
+						"role",
+						"workspace"
+					]), [[vShow, selectedFilter.value === "All" || selectedFilter.value === "Cookies"]]),
+					withDirectives(createVNode(RequestParams_default, {
+						id: filterIds.value.Headers,
+						class: "request-section-content-headers",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						label: "Header",
+						operation: __props.operation,
+						paramKey: "headers",
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Headers",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"role",
+						"workspace"
+					]), [[vShow, selectedFilter.value === "All" || selectedFilter.value === "Headers"]]),
+					withDirectives(createVNode(RequestParams_default, {
+						id: filterIds.value.Query,
+						class: "request-section-content-query",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						invalidParams: __props.invalidParams,
+						label: "Parameter",
+						operation: __props.operation,
+						paramKey: "query",
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Query Parameters",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"invalidParams",
+						"operation",
+						"role",
+						"workspace"
+					]), [[vShow, selectedFilter.value === "All" || selectedFilter.value === "Query"]]),
+					__props.operation.method && (selectedFilter.value === "All" || selectedFilter.value === "Body") && unref(canMethodHaveBody)(__props.operation.method) ? (openBlock(), createBlock(RequestBody_default, {
+						key: 1,
+						id: filterIds.value.Body,
+						class: "request-section-content-body",
+						envVariables: __props.envVariables,
+						environment: __props.environment,
+						example: __props.example,
+						operation: __props.operation,
+						role: selectedFilter.value === "All" ? "none" : "tabpanel",
+						title: "Body",
+						workspace: __props.workspace
+					}, null, 8, [
+						"id",
+						"envVariables",
+						"environment",
+						"example",
+						"operation",
+						"role",
+						"workspace"
+					])) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(requestSectionViews), (view, index) => {
+						return openBlock(), createBlock(unref(ScalarErrorBoundary), { key: view.title ?? index }, {
+							default: withCtx(() => [withDirectives((openBlock(), createBlock(resolveDynamicComponent(view.component), {
+								operation: __props.operation,
+								"onUpdate:operation": updateOperationHandler
+							}, null, 40, ["operation"])), [[vShow, selectedFilter.value === "All" || selectedFilter.value === view.title]])]),
+							_: 2
+						}, 1024);
+					}), 128)),
+					_cache[1] || (_cache[1] = createElementVNode("div", { class: "flex flex-grow" }, null, -1)),
+					createVNode(unref(ScalarErrorBoundary), null, {
+						default: withCtx(() => [createVNode(RequestCodeExample_default, {
+							class: "request-section-content-code-example -mt-1/2 border-t",
+							collection: __props.collection,
+							environment: __props.envVariables,
+							example: __props.example,
+							operation: __props.operation,
+							server: __props.server,
+							workspace: __props.workspace
+						}, null, 8, [
+							"collection",
+							"environment",
+							"example",
+							"operation",
+							"server",
+							"workspace"
+						])]),
+						_: 1
+					})
+				], 8, _hoisted_5)]),
+				_: 1
+			}, 8, ["aria-label"]);
+		};
+	}
+});
+//#endregion
+export { RequestSection_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestSection.vue.script.js.map

package/dist/views/Request/RequestSection/RequestSection.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestSection.vue.script.js","names":[],"sources":["../../../../src/views/Request/RequestSection/RequestSection.vue"],"sourcesContent":["<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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"}

package/dist/views/Request/RequestSection/RequestTable.vue.d.ts

@@ -2,7 +2,7 @@ import type { Environment } from '@scalar/oas-utils/entities/environment';
 import type { RequestExampleParameter } from '@scalar/oas-utils/entities/spec';
 import type { Workspace } from '@scalar/oas-utils/entities/workspace';
 import { type RouteLocationRaw } from 'vue-router';
-import type { EnvVariable } from '@/store/active-entities';
+import type { EnvVariable } from '../../../store/active-entities.js';
 type __VLS_Props = {
     items?: (RequestExampleParameter & {
         route?: RouteLocationRaw;

package/dist/views/Request/RequestSection/RequestTable.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import RequestTable_vue_vue_type_script_setup_true_lang_default from "./RequestTable.vue.script.js";
+/* empty css                           */
+//#region src/views/Request/RequestSection/RequestTable.vue
+var RequestTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-04661eb4"]]);
+//#endregion
+export { RequestTable_default as default };
+
+//# sourceMappingURL=RequestTable.vue.js.map

package/dist/views/Request/RequestSection/RequestTable.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestTable.vue.js","names":[],"sources":["../../../../src/views/Request/RequestSection/RequestTable.vue"],"sourcesContent":["<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"],"mappings":""}