support array value in query

Author: KianNH

src/components/APIRequest.astro

@@ -67,11 +67,20 @@ if (extraneousParameters.length > 0) {
 }
 
 for (const parameter of endpointParameters) {
-	if (parameter.in === "path" && parameters?.[parameter.name]) {
-		const encoded = encodeURIComponent(`{${parameter.name}}`);
-		url.pathname = url.pathname.replace(encoded, parameters[parameter.name]);
-	} else if (parameter.in === "query" && parameters?.[parameter.name]) {
-		url.searchParams.set(parameter.name, parameters[parameter.name]);
+	const value = parameters?.[parameter.name];
+	if (value) {
+		if (parameter.in === "path") {
+			const encoded = encodeURIComponent(`{${parameter.name}}`);
+			url.pathname = url.pathname.replace(encoded, value);
+		} else if (parameter.in === "query") {
+			if (Array.isArray(value)) {
+				for (const v of value) {
+					url.searchParams.append(parameter.name, v);
+				}
+			} else {
+				url.searchParams.set(parameter.name, value);
+			}
+		}
 	}
 }
 

src/components/CURL.astro

@@ -15,7 +15,9 @@ const props = z.object({
 	headers: z.record(z.string(), z.string()).default({}),
 	json: z.union([Record, z.array(Record)]).optional(),
 	form: Record.optional(),
-	query: z.record(z.string(), z.string()).optional(),
+	query: z
+		.record(z.string(), z.union([z.string(), z.array(z.string())]))
+		.optional(),
 	code: z
 		.custom<Omit<ComponentProps<typeof Code>, "code" | "lang">>()
 		.optional(),
@@ -38,7 +40,13 @@ if (json && form) {
 const url = new URL(baseUrl);
 if (query) {
 	for (const [key, value] of Object.entries(query)) {
-		url.searchParams.set(key, value);
+		if (Array.isArray(value)) {
+			for (const v of value) {
+				url.searchParams.append(key, v);
+			}
+		} else {
+			url.searchParams.set(key, value);
+		}
 	}
 }
 

src/content/docs/style-guide/components/api-request.mdx

@@ -8,6 +8,8 @@ styleGuide:
 
 ```mdx
 import { APIRequest } from "~/components";
+
+;
 ```
 
 ## Usage
@@ -19,7 +21,7 @@ import { APIRequest } from "~/components";
 	path="/zones/{zone_id}/api_gateway/settings/schema_validation"
 	method="PUT"
 	json={{
-		validation_default_mitigation_action: "block"
+		validation_default_mitigation_action: "block",
 	}}
 />
 
@@ -36,7 +38,7 @@ import { APIRequest } from "~/components";
 	method="POST"
 	form={{
 		requireSignedURLs: true,
-		metadata: '{"key":"value"}'
+		metadata: '{"key":"value"}',
 	}}
 />
 
@@ -59,7 +61,7 @@ import { APIRequest } from "~/components";
 	path="/zones/{zone_id}/page_shield/scripts"
 	method="GET"
 	parameters={{
-		direction: "asc"
+		direction: "asc",
 	}}
 />
 ```
@@ -115,4 +117,4 @@ If required properties are missing, the component will throw an error.
 
 The FormData payload to send.
 
-This field is not currently validated against the schema.
+This field is not currently validated against the schema.

src/content/docs/style-guide/components/curl.mdx

@@ -25,10 +25,10 @@ import { CURL } from "~/components";
 	}}
 	query={{
 		foo: "bar",
-		bar: "baz",
+		bar: ["baz", "qux"],
 	}}
 	code={{
-		mark: "value"
+		mark: "value",
 	}}
 />
 
@@ -39,7 +39,7 @@ import { CURL } from "~/components";
 		key: "value",
 	}}
 	code={{
-		mark: "value"
+		mark: "value",
 	}}
 />
 ```
@@ -94,4 +94,4 @@ An object of Expressive Code props, the following props are available:
 
 - [Base Props](https://expressive-code.com/key-features/code-component/#available-props)
 - [Line Marker Props](https://expressive-code.com/key-features/text-markers/#props)
-- [Collapsible Sections Props](https://expressive-code.com/plugins/collapsible-sections/#props)
+- [Collapsible Sections Props](https://expressive-code.com/plugins/collapsible-sections/#props)