@scalar/api-reference 1.49.0 → 1.49.1

package/dist/SearchButton-xzhIpMCZ.js

@@ -0,0 +1,621 @@
+import { d as _plugin_vue_export_helper_default } from "./ExternalDocs-phu7GxpZ.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, toValue, unref, watch, withCtx, withKeys, withModifiers } from "vue";
+import { ScalarIconButton, ScalarListbox, ScalarModal, ScalarSearchInput, ScalarSearchResultItem, ScalarSearchResultList, ScalarSidebarSearchButton, useModal } from "@scalar/components";
+import { HttpMethod } from "@scalar/sidebar";
+import { ScalarIconBracketsCurly, ScalarIconCaretDown, ScalarIconMagnifyingGlass, ScalarIconTag, ScalarIconTerminalWindow, ScalarIconTextAlignLeft } from "@scalar/icons";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+import { isObjectSchema } from "@scalar/workspace-store/schemas/v3.1/strict/type-guards";
+import { nanoid } from "nanoid";
+import { isMacOS } from "@scalar/helpers/general/is-mac-os";
+import Fuse from "fuse.js";
+import { isDereferenced } from "@scalar/openapi-types/helpers";
+//#region src/features/multiple-documents/DocumentSelector.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = {
+	key: 0,
+	class: "document-selector p-3 pb-0"
+};
+var _hoisted_2$1 = {
+	class: "group/dropdown-label text-c-2 hover:text-c-1 flex w-full cursor-pointer items-center gap-1 font-medium",
+	type: "button"
+};
+var _hoisted_3$1 = { class: "overflow-hidden text-base text-ellipsis" };
+//#endregion
+//#region src/features/multiple-documents/DocumentSelector.vue
+var DocumentSelector_default = /* @__PURE__ */ defineComponent({
+	__name: "DocumentSelector",
+	props: {
+		options: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const formattedOptions = computed(() => props.options.map((o) => ({
+			id: o.id,
+			label: o.label
+		})));
+		const selected = computed(() => formattedOptions.value.find((o) => o.id === props.modelValue));
+		return (_ctx, _cache) => {
+			return __props.options.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [createVNode(unref(ScalarListbox), {
+				modelValue: selected.value,
+				options: formattedOptions.value,
+				resize: "",
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = (e) => emit("update:modelValue", e.id))
+			}, {
+				default: withCtx(({ open }) => [createElementVNode("button", _hoisted_2$1, [createElementVNode("span", _hoisted_3$1, toDisplayString(selected.value?.label || "Select API"), 1), createVNode(unref(ScalarIconCaretDown), {
+					class: normalizeClass(["size-3 text-current transition-transform", { "rotate-180": open }]),
+					weight: "bold"
+				}, null, 8, ["class"])])]),
+				_: 1
+			}, 8, ["modelValue", "options"])])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region src/features/Search/helpers/create-fuse-instance.ts
+/**
+* Create a Fuse instance for searching the API reference.
+*
+* Doesn't have any data yet, so it's empty.
+*/
+function createFuseInstance() {
+	return new Fuse([], {
+		keys: [
+			{
+				name: "title",
+				weight: .7
+			},
+			{
+				name: "description",
+				weight: .3
+			},
+			{
+				name: "body",
+				weight: .2
+			},
+			{
+				name: "operationId",
+				weight: .6
+			},
+			{
+				name: "path",
+				weight: .5
+			},
+			{
+				name: "tag",
+				weight: .4
+			},
+			{
+				name: "method",
+				weight: .3
+			}
+		],
+		threshold: .3,
+		distance: 100,
+		includeScore: true,
+		includeMatches: true,
+		ignoreLocation: true,
+		useExtendedSearch: true,
+		findAllMatches: true
+	});
+}
+//#endregion
+//#region src/helpers/openapi.ts
+/**
+* Resolves a schema reference from workspace-store to a SchemaObject.
+* Bridges SchemaReferenceType (which uses '$ref-value': unknown) to NodeInput (which uses '$ref-value': SchemaObject).
+*/
+function resolveSchemaRef(ref) {
+	return getResolvedRef(ref);
+}
+/**
+* Formats a property object into a string.
+*/
+function formatProperty(key, obj) {
+	let output = key;
+	const isRequired = obj.required?.includes(key);
+	output += isRequired ? " REQUIRED " : " optional ";
+	const propRef = obj.properties[key];
+	if (!propRef) return output;
+	const property = resolveSchemaRef(propRef);
+	if (property && typeof property === "object" && "type" in property) {
+		output += property.type ?? "";
+		if ("description" in property && typeof property.description === "string") output += " " + property.description;
+	}
+	return output;
+}
+/**
+* Recursively logs the properties of an object.
+*/
+function recursiveLogger(obj) {
+	const results = ["Body"];
+	const schema = getResolvedRef(obj?.schema);
+	if (!schema || !isObjectSchema(schema) || !schema.properties) return results;
+	const properties = schema.properties;
+	const schemaWithProps = {
+		properties,
+		required: schema.required
+	};
+	Object.keys(properties).forEach((key) => {
+		if (!obj.schema) return;
+		results.push(formatProperty(key, schemaWithProps));
+		const propRef = properties[key];
+		if (!propRef) return;
+		const property = resolveSchemaRef(propRef);
+		if (property && isObjectSchema(property) && property.properties) {
+			const nestedProperties = property.properties;
+			Object.keys(nestedProperties).forEach((subKey) => {
+				const ref = nestedProperties[subKey];
+				if (!ref) return;
+				const nested = resolveSchemaRef(ref);
+				const typeStr = nested && typeof nested === "object" && "type" in nested ? nested.type ?? "" : "";
+				results.push(`${subKey} ${typeStr}`);
+			});
+		}
+	});
+	return results;
+}
+/**
+* Extracts the request body from an operation.
+*/
+function extractRequestBody(operation) {
+	try {
+		const media = getResolvedRef(operation?.requestBody)?.content?.["application/json"];
+		if (!media) throw new Error("Body not found");
+		return recursiveLogger(media);
+	} catch (_error) {
+		return false;
+	}
+}
+/**
+* Deep merge for objects
+*/
+function deepMerge(source, target) {
+	for (const [key, val] of Object.entries(source)) if (val !== null && typeof val === "object") {
+		target[key] ??= new val.__proto__.constructor();
+		deepMerge(val, target[key]);
+	} else if (typeof val !== "undefined") target[key] = val;
+	return target;
+}
+/**
+* Creates an empty specification object.
+* The returning object has the same structure as a valid OpenAPI specification, but everything is empty.
+*/
+function createEmptySpecification(partialSpecification) {
+	return deepMerge(partialSpecification ?? {}, {
+		info: {
+			title: "",
+			description: "",
+			termsOfService: "",
+			version: "",
+			license: {
+				name: "",
+				url: ""
+			},
+			contact: { email: "" }
+		},
+		servers: [],
+		tags: []
+	});
+}
+/**
+* This function creates a parameter map from an Operation Object, that's easier to consume.
+*
+* TODO: Isn't it easier to just stick to the OpenAPI structure, without transforming it?
+*/
+function createParameterMap(operation) {
+	const map = {
+		path: [],
+		query: [],
+		header: [],
+		cookie: [],
+		body: [],
+		formData: []
+	};
+	const parameters = operation.parameters ?? [];
+	if (parameters) parameters.forEach((parameter) => {
+		if (!isDereferenced(parameter)) return;
+		if (typeof parameter === "object" && parameter !== null && "$ref" in parameter) return;
+		if (parameter.in === "path") map.path.push(parameter);
+		else if (parameter.in === "query") map.query.push(parameter);
+		else if (parameter.in === "header") map.header.push(parameter);
+		else if (parameter.in === "cookie") map.cookie.push(parameter);
+		else if (parameter.in === "body") map.body.push(parameter);
+		else if (parameter.in === "formData") map.formData.push(parameter);
+	});
+	return map;
+}
+//#endregion
+//#region src/features/Search/helpers/create-search-index.ts
+/**
+* Create a search index from a list of entries.
+*/
+function createSearchIndex(document) {
+	const index = [];
+	/**
+	* Recursively processes entries and their children to build the search index.
+	*/
+	function processEntries(entriesToProcess) {
+		entriesToProcess.forEach((entry) => {
+			addEntryToIndex(entry, index, document);
+			if ("children" in entry && entry.children) processEntries(entry.children);
+		});
+	}
+	processEntries(document?.["x-scalar-navigation"]?.children ?? []);
+	return index;
+}
+/**
+* Adds a single entry to the search index, handling all entry types recursively.
+*/
+function addEntryToIndex(entry, index, document) {
+	if (entry.type === "operation") {
+		const operation = getResolvedRef(document?.paths?.[entry.path]?.[entry.method]) ?? {};
+		const requestBodyOrParameterMap = extractRequestBody(operation) || createParameterMap(operation);
+		const body = typeof requestBodyOrParameterMap !== "boolean" ? requestBodyOrParameterMap : null;
+		index.push({
+			type: "operation",
+			title: entry.title,
+			id: entry.id,
+			description: operation.description || "",
+			method: entry.method,
+			path: entry.path,
+			body: body || "",
+			operationId: operation.operationId,
+			entry
+		});
+		return;
+	}
+	if (entry.type === "webhook") {
+		const webhook = getResolvedRef(document?.webhooks?.[entry.name]?.[entry.method]) ?? {};
+		index.push({
+			id: entry.id,
+			type: "webhook",
+			title: entry.title,
+			description: "Webhook",
+			method: entry.method,
+			body: webhook.description || "",
+			operationId: webhook.operationId,
+			entry
+		});
+		return;
+	}
+	if (entry.type === "model") {
+		const description = getResolvedRef(document?.components?.schemas?.[entry.name])?.description ?? "";
+		index.push({
+			type: "model",
+			title: entry.title,
+			description: "Model",
+			id: entry.id,
+			body: description,
+			entry
+		});
+		return;
+	}
+	if (entry.type === "models") {
+		index.push({
+			id: entry.id,
+			type: "heading",
+			title: "Models",
+			description: "Heading",
+			body: "",
+			entry
+		});
+		return;
+	}
+	if (entry.type === "tag" && entry.isWebhooks === true) {
+		index.push({
+			id: entry.id,
+			type: "heading",
+			title: "Webhooks",
+			description: "Heading",
+			body: "",
+			entry
+		});
+		return;
+	}
+	if (entry.type === "tag" && entry.isGroup === false) {
+		index.push({
+			id: entry.id,
+			title: entry.title,
+			description: entry.description || "",
+			type: "tag",
+			body: "",
+			entry
+		});
+		return;
+	}
+	if (entry.type === "tag" && entry.isGroup === true) {
+		index.push({
+			id: entry.id,
+			title: entry.title,
+			description: "Tag Group",
+			type: "tag",
+			body: "",
+			entry
+		});
+		return;
+	}
+	if (entry.type === "text") {
+		index.push({
+			id: entry.id,
+			type: "heading",
+			title: entry.title ?? "",
+			description: "Heading",
+			body: "",
+			entry
+		});
+		return;
+	}
+}
+//#endregion
+//#region src/features/Search/hooks/useSearchIndex.ts
+var MAX_SEARCH_RESULTS = 25;
+/**
+* Creates the search index from an OpenAPI document.
+*/
+function useSearchIndex(document) {
+	/** When the document changes we replace the search index */
+	const fuse = computed(() => {
+		const instance = createFuseInstance();
+		instance.setCollection(createSearchIndex(toValue(document)));
+		return instance;
+	});
+	const query = ref("");
+	return {
+		results: computed(() => {
+			if (query.value.length !== 0) return fuse.value.search(query.value, { limit: MAX_SEARCH_RESULTS });
+			return fuse.value._docs.slice(0, MAX_SEARCH_RESULTS).map((item, index) => ({
+				item,
+				refIndex: index
+			}));
+		}),
+		query
+	};
+}
+//#endregion
+//#region src/features/Search/components/SearchResult.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "sr-only" };
+var _hoisted_2 = { class: "inline-flex items-center gap-1" };
+var _hoisted_3 = { class: "sr-only" };
+//#endregion
+//#region src/features/Search/components/SearchResult.vue
+var SearchResult_default = /* @__PURE__ */ defineComponent({
+	__name: "SearchResult",
+	props: {
+		id: {},
+		isSelected: { type: Boolean },
+		result: {}
+	},
+	setup(__props) {
+		const ENTRY_ICONS = {
+			heading: ScalarIconTextAlignLeft,
+			model: ScalarIconBracketsCurly,
+			operation: ScalarIconTerminalWindow,
+			tag: ScalarIconTag,
+			webhook: ScalarIconTerminalWindow
+		};
+		const ENTRY_LABELS = {
+			heading: "Heading",
+			operation: "Operation",
+			tag: "Tag",
+			model: "Model",
+			webhook: "Webhook"
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarSearchResultItem), {
+				id: __props.id,
+				icon: ENTRY_ICONS[__props.result.item.type],
+				selected: __props.isSelected
+			}, createSlots({
+				default: withCtx(() => [createElementVNode("span", { class: normalizeClass({ "text-decoration-line": __props.result.item.entry.type === "operation" && __props.result.item.entry.isDeprecated }) }, [
+					createElementVNode("span", _hoisted_1$1, [createTextVNode(toDisplayString(ENTRY_LABELS[__props.result.item.type]) + ":\xA0 ", 1), __props.result.item.entry.type === "operation" && __props.result.item.entry.isDeprecated ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" (Deprecated)\xA0 ")], 64)) : createCommentVNode("", true)]),
+					createTextVNode(" " + toDisplayString(__props.result.item.title) + " ", 1),
+					_cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, ",", -1))
+				], 2)]),
+				_: 2
+			}, [__props.result.item.type !== "webhook" && (__props.result.item.method || __props.result.item.path) && __props.result.item.path !== __props.result.item.title ? {
+				name: "description",
+				fn: withCtx(() => [createElementVNode("span", _hoisted_2, [
+					__props.result.item.type === "operation" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(HttpMethod), {
+						"aria-hidden": "true",
+						method: __props.result.item.method ?? "get"
+					}, null, 8, ["method"]), createElementVNode("span", _hoisted_3, " HTTP Method: " + toDisplayString(__props.result.item.method ?? "get"), 1)], 64)) : createCommentVNode("", true),
+					_cache[1] || (_cache[1] = createElementVNode("span", { class: "sr-only" }, "Path:\xA0", -1)),
+					createTextVNode(" " + toDisplayString(__props.result.item.path), 1)
+				])]),
+				key: "0"
+			} : __props.result.item.description ? {
+				name: "description",
+				fn: withCtx(() => [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Description:\xA0", -1)), createTextVNode(" " + toDisplayString(__props.result.item.description), 1)]),
+				key: "1"
+			} : void 0]), 1032, [
+				"id",
+				"icon",
+				"selected"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/features/Search/components/SearchModal.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "mb-0 flex flex-col",
+	role: "search"
+};
+//#endregion
+//#region src/features/Search/components/SearchModal.vue
+var SearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "SearchModal",
+	props: {
+		modalState: {},
+		document: {},
+		eventBus: {}
+	},
+	setup(__props) {
+		const props = __props;
+		/** Base id for the search form */
+		const id = nanoid();
+		/** An id for the results listbox */
+		const listboxId = `${id}-search-result`;
+		/** An id for the results instructions */
+		const instructionsId = `${id}-search-instructions`;
+		const { query, results } = useSearchIndex(() => props.document);
+		const selectedIndex = ref(void 0);
+		/** Clear the query value when the modal is opened */
+		watch(() => props.modalState.open, (open) => {
+			if (open) query.value = "";
+		});
+		/** Keyboard navigation */
+		const navigateSearchResults = (direction) => {
+			const offset = direction === "up" ? -1 : 1;
+			const length = results.value.length;
+			if (typeof selectedIndex.value === "number") selectedIndex.value = (selectedIndex.value + offset + length) % length;
+			else selectedIndex.value = offset === -1 ? length - 1 : 0;
+		};
+		/** Handle the selection of a search result */
+		function handleSelect(idx) {
+			if (typeof idx !== "number" || !results.value[idx]) return;
+			const result = results.value[idx];
+			props.modalState.hide();
+			props.eventBus.emit("scroll-to:nav-item", { id: result.item.id });
+		}
+		/**
+		* Active descendant id for the search input
+		* NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly
+		*/
+		const activeDescendantId = computed(() => {
+			const selectedResult = results.value[selectedIndex.value ?? -1];
+			return selectedResult ? `search-result-${selectedResult.item.id}` : void 0;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarModal), {
+				"aria-label": "Reference Search",
+				state: __props.modalState,
+				variant: "search"
+			}, {
+				default: withCtx(() => [
+					createElementVNode("div", _hoisted_1, [createVNode(unref(ScalarSearchInput), {
+						modelValue: unref(query),
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(query) ? query.value = $event : null),
+						"aria-activedescendant": activeDescendantId.value,
+						"aria-autocomplete": "list",
+						"aria-controls": listboxId,
+						"aria-describedby": instructionsId,
+						role: "combobox",
+						onBlur: _cache[1] || (_cache[1] = ($event) => selectedIndex.value = void 0),
+						onKeydown: [
+							_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => navigateSearchResults("down"), ["stop", "prevent"]), ["down"])),
+							_cache[3] || (_cache[3] = withKeys(withModifiers(() => handleSelect(selectedIndex.value), ["stop", "prevent"]), ["enter"])),
+							_cache[4] || (_cache[4] = withKeys(withModifiers(($event) => navigateSearchResults("up"), ["stop", "prevent"]), ["up"]))
+						]
+					}, null, 8, ["modelValue", "aria-activedescendant"])]),
+					createVNode(unref(ScalarSearchResultList), {
+						id: listboxId,
+						"aria-label": "Reference Search Results",
+						class: "custom-scroll p-1 pt-0",
+						noResults: !unref(results).length
+					}, {
+						query: withCtx(() => [createTextVNode(toDisplayString(unref(query)), 1)]),
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(results), (result, idx) => {
+							return openBlock(), createBlock(SearchResult_default, {
+								id: `search-result-${result.item.id}`,
+								key: result.refIndex,
+								isSelected: selectedIndex.value === idx,
+								result,
+								onClick: withModifiers(() => handleSelect(idx), ["prevent"])
+							}, null, 8, [
+								"id",
+								"isSelected",
+								"result",
+								"onClick"
+							]);
+						}), 128))]),
+						_: 1
+					}, 8, ["noResults"]),
+					createElementVNode("div", {
+						id: instructionsId,
+						class: "ref-search-meta"
+					}, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
+						"aria-hidden": "true",
+						class: "contents"
+					}, [createElementVNode("span", null, "↑↓ Navigate"), createElementVNode("span", null, "⏎ Select")], -1), createElementVNode("span", { class: "sr-only" }, " Press up arrow / down arrow to navigate, enter to select, type to filter results ", -1)])])
+				]),
+				_: 1
+			}, 8, ["state"]);
+		};
+	}
+}), [["__scopeId", "data-v-c1c368f9"]]);
+//#endregion
+//#region src/features/Search/components/SearchButton.vue
+var SearchButton_default = /* @__PURE__ */ defineComponent({
+	__name: "SearchButton",
+	props: {
+		forceIcon: { type: Boolean },
+		searchHotKey: { default: "k" },
+		hideModels: {
+			type: Boolean,
+			default: false
+		},
+		document: {},
+		eventBus: {}
+	},
+	setup(__props) {
+		const button = ref();
+		const modalState = useModal();
+		const handleHotKey = (e) => {
+			if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === __props.searchHotKey) {
+				e.preventDefault();
+				e.stopPropagation();
+				if (modalState.open) modalState.hide();
+				else modalState.show();
+			}
+		};
+		watch(() => modalState.open, async (next, prev) => {
+			if (!next && prev) {
+				await nextTick();
+				button.value?.$el.focus();
+			}
+		});
+		onMounted(() => window.addEventListener("keydown", handleHotKey));
+		onBeforeUnmount(() => window.removeEventListener("keydown", handleHotKey));
+		function handleClick() {
+			modalState.show();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [__props.forceIcon ? (openBlock(), createBlock(unref(ScalarIconButton), {
+				key: 0,
+				icon: unref(ScalarIconMagnifyingGlass),
+				label: "Search",
+				onClick: handleClick
+			}, null, 8, ["icon"])) : (openBlock(), createBlock(unref(ScalarSidebarSearchButton), {
+				key: 1,
+				ref_key: "button",
+				ref: button,
+				class: normalizeClass(["w-full", _ctx.$attrs.class]),
+				onClick: handleClick
+			}, {
+				shortcut: withCtx(() => [unref(isMacOS)() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, "Command", -1)), _cache[1] || (_cache[1] = createElementVNode("span", { "aria-hidden": "true" }, "⌘", -1))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "CTRL", -1)), _cache[3] || (_cache[3] = createElementVNode("span", { "aria-hidden": "true" }, "⌃", -1))], 64)), createTextVNode(" " + toDisplayString(__props.searchHotKey), 1)]),
+				default: withCtx(() => [_cache[4] || (_cache[4] = createElementVNode("span", { class: "sr-only" }, "Open Search", -1)), _cache[5] || (_cache[5] = createElementVNode("span", {
+					"aria-hidden": "true",
+					class: "sidebar-search-placeholder"
+				}, " Search ", -1))]),
+				_: 1
+			}, 8, ["class"])), createVNode(SearchModal_default, {
+				document: __props.document,
+				eventBus: __props.eventBus,
+				hideModels: __props.hideModels,
+				modalState: unref(modalState)
+			}, null, 8, [
+				"document",
+				"eventBus",
+				"hideModels",
+				"modalState"
+			])], 64);
+		};
+	}
+});
+//#endregion
+export { DocumentSelector_default as i, SearchModal_default as n, createEmptySpecification as r, SearchButton_default as t };
+
+//# sourceMappingURL=SearchButton-xzhIpMCZ.js.map