@scalar/api-reference 1.49.3 → 1.49.4

package/dist/features/Operation/layouts/ModernLayout.vue.script.js

@@ -0,0 +1,243 @@
+import Badge_default from "../../../components/Badge/Badge.vue.js";
+import Section_default from "../../../components/Section/Section.vue.js";
+import SectionColumn_default from "../../../components/Section/SectionColumn.vue.js";
+import SectionColumns_default from "../../../components/Section/SectionColumns.vue.js";
+import SectionContent_default from "../../../components/Section/SectionContent.vue.js";
+import SectionHeader_default from "../../../components/Section/SectionHeader.vue.js";
+import SectionHeaderTag_default from "../../../components/Section/SectionHeaderTag.vue.js";
+import Anchor_default from "../../../components/Anchor/Anchor.vue.js";
+import { getXKeysFromObject } from "../../specification-extension/helpers.js";
+import SpecificationExtension_default from "../../specification-extension/SpecificationExtension.vue.js";
+import LinkList_default from "../../../components/LinkList/LinkList.vue.js";
+import ExternalDocs_default from "../../external-docs/ExternalDocs.vue.js";
+import OperationPath_default from "../../../components/OperationPath.vue.js";
+import ExampleResponses_default from "../../example-responses/ExampleResponses.vue.js";
+import OperationParameters_default from "../components/OperationParameters.vue.js";
+import OperationResponses_default from "../components/OperationResponses.vue.js";
+import Callbacks_default from "../components/callbacks/Callbacks.vue.js";
+import TestRequestButton_default from "../../test-request-button/TestRequestButton.vue.js";
+import XBadges_default from "../../x-badges/XBadges.vue.js";
+import AskAgentButton_default from "../../ask-agent-button/AskAgentButton.vue.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, useId, withCtx } from "vue";
+import { ScalarErrorBoundary, ScalarMarkdown } from "@scalar/components";
+import { ScalarIconWebhooksLogo } from "@scalar/icons";
+import { getOperationStability, getOperationStabilityColor, isOperationDeprecated } from "@scalar/oas-utils/helpers";
+import { OperationCodeSample } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { getResolvedRef } from "@scalar/workspace-store/helpers/get-resolved-ref";
+//#region src/features/Operation/layouts/ModernLayout.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-row justify-between gap-1" };
+var _hoisted_2 = { class: "flex gap-1" };
+var _hoisted_3 = { class: "flex gap-1" };
+var _hoisted_4 = { class: "operation-details" };
+var _hoisted_5 = { class: "examples" };
+var _hoisted_6 = { class: "flex" };
+var ModernLayout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ModernLayout",
+	props: {
+		id: {},
+		method: {},
+		options: {},
+		path: {},
+		clientOptions: {},
+		isWebhook: { type: Boolean },
+		selectedClient: {},
+		eventBus: {},
+		operation: {},
+		selectedServer: {},
+		selectedSecuritySchemes: {}
+	},
+	setup(__props) {
+		const operationTitle = computed(() => __props.operation.summary || __props.path || "");
+		const labelId = useId();
+		const operationExtensions = computed(() => getXKeysFromObject(__props.operation));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Section_default), {
+				id: __props.id,
+				"aria-labelledby": unref(labelId),
+				label: operationTitle.value,
+				tabindex: "-1",
+				onIntersecting: _cache[1] || (_cache[1] = () => __props.eventBus?.emit("intersecting:nav-item", { id: __props.id }))
+			}, {
+				default: withCtx(() => [createVNode(unref(SectionContent_default), null, {
+					default: withCtx(() => [
+						createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
+							__props.options?.showOperationId && __props.operation.operationId ? (openBlock(), createBlock(unref(Badge_default), { key: 0 }, {
+								default: withCtx(() => [createTextVNode(toDisplayString(__props.operation.operationId), 1)]),
+								_: 1
+							})) : createCommentVNode("", true),
+							unref(getOperationStability)(__props.operation) ? (openBlock(), createBlock(unref(Badge_default), {
+								key: 1,
+								class: normalizeClass(["capitalize", unref(getOperationStabilityColor)(__props.operation)])
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(unref(getOperationStability)(__props.operation)), 1)]),
+								_: 1
+							}, 8, ["class"])) : createCommentVNode("", true),
+							__props.isWebhook ? (openBlock(), createBlock(unref(Badge_default), {
+								key: 2,
+								class: "font-code text-green flex w-fit items-center justify-center gap-1"
+							}, {
+								default: withCtx(() => [createVNode(unref(ScalarIconWebhooksLogo), { weight: "bold" }), _cache[2] || (_cache[2] = createTextVNode("Webhook ", -1))]),
+								_: 1
+							})) : createCommentVNode("", true),
+							createVNode(unref(XBadges_default), {
+								badges: __props.operation["x-badges"],
+								position: "before"
+							}, null, 8, ["badges"])
+						]), createElementVNode("div", _hoisted_3, [createVNode(unref(XBadges_default), {
+							badges: __props.operation["x-badges"],
+							position: "after"
+						}, null, 8, ["badges"])])]),
+						createElementVNode("div", { class: normalizeClass(unref(isOperationDeprecated)(__props.operation) ? "deprecated" : "") }, [createVNode(unref(SectionHeader_default), null, {
+							default: withCtx(() => [createVNode(unref(Anchor_default), { onCopyAnchorUrl: _cache[0] || (_cache[0] = () => __props.eventBus?.emit("copy-url:nav-item", { id: __props.id })) }, {
+								default: withCtx(() => [createVNode(unref(SectionHeaderTag_default), {
+									id: unref(labelId),
+									level: 3
+								}, {
+									default: withCtx(() => [createTextVNode(toDisplayString(operationTitle.value), 1)]),
+									_: 1
+								}, 8, ["id"])]),
+								_: 1
+							})]),
+							_: 1
+						})], 2),
+						createVNode(unref(SectionColumns_default), null, {
+							default: withCtx(() => [createVNode(unref(SectionColumn_default), null, {
+								default: withCtx(() => [createElementVNode("div", _hoisted_4, [
+									createVNode(SpecificationExtension_default, { value: operationExtensions.value }, null, 8, ["value"]),
+									createVNode(unref(ScalarMarkdown), {
+										anchorPrefix: __props.id,
+										"aria-label": "Operation Description",
+										role: "group",
+										transformType: "heading",
+										value: __props.operation.description,
+										withAnchors: "",
+										withImages: ""
+									}, null, 8, ["anchorPrefix", "value"]),
+									createVNode(OperationParameters_default, {
+										breadcrumb: [__props.id],
+										eventBus: __props.eventBus,
+										options: __props.options,
+										parameters: __props.operation.parameters,
+										requestBody: unref(getResolvedRef)(__props.operation.requestBody)
+									}, null, 8, [
+										"breadcrumb",
+										"eventBus",
+										"options",
+										"parameters",
+										"requestBody"
+									]),
+									createVNode(OperationResponses_default, {
+										breadcrumb: [__props.id],
+										collapsableItems: !__props.options.expandAllResponses,
+										eventBus: __props.eventBus,
+										options: __props.options,
+										responses: __props.operation.responses
+									}, null, 8, [
+										"breadcrumb",
+										"collapsableItems",
+										"eventBus",
+										"options",
+										"responses"
+									]),
+									createVNode(unref(ScalarErrorBoundary), null, {
+										default: withCtx(() => [__props.operation.callbacks ? (openBlock(), createBlock(Callbacks_default, {
+											key: 0,
+											callbacks: __props.operation.callbacks,
+											class: "mt-6",
+											eventBus: __props.eventBus,
+											options: __props.options,
+											path: __props.path
+										}, null, 8, [
+											"callbacks",
+											"eventBus",
+											"options",
+											"path"
+										])) : createCommentVNode("", true)]),
+										_: 1
+									})
+								])]),
+								_: 1
+							}), createVNode(unref(SectionColumn_default), null, {
+								default: withCtx(() => [createElementVNode("div", _hoisted_5, [
+									__props.operation.externalDocs ? (openBlock(), createBlock(unref(LinkList_default), { key: 0 }, {
+										default: withCtx(() => [createVNode(unref(ExternalDocs_default), { value: __props.operation.externalDocs }, null, 8, ["value"])]),
+										_: 1
+									})) : createCommentVNode("", true),
+									createVNode(unref(ScalarErrorBoundary), null, {
+										default: withCtx(() => [createVNode(unref(OperationCodeSample), {
+											clientOptions: __props.clientOptions,
+											eventBus: __props.eventBus,
+											fallback: "",
+											isWebhook: __props.isWebhook,
+											method: __props.method,
+											operation: __props.operation,
+											path: __props.path,
+											securitySchemes: __props.selectedSecuritySchemes,
+											selectedClient: __props.selectedClient,
+											selectedServer: __props.selectedServer
+										}, createSlots({
+											header: withCtx(() => [createVNode(OperationPath_default, {
+												class: "font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic",
+												deprecated: __props.operation?.deprecated,
+												path: __props.path
+											}, null, 8, ["deprecated", "path"])]),
+											_: 2
+										}, [!__props.isWebhook ? {
+											name: "footer",
+											fn: withCtx(({ exampleName }) => [createElementVNode("div", _hoisted_6, [createVNode(AskAgentButton_default), !__props.options.hideTestRequestButton ? (openBlock(), createBlock(unref(TestRequestButton_default), {
+												key: 0,
+												id: __props.id,
+												eventBus: __props.eventBus,
+												exampleName,
+												method: __props.method,
+												path: __props.path
+											}, null, 8, [
+												"id",
+												"eventBus",
+												"exampleName",
+												"method",
+												"path"
+											])) : createCommentVNode("", true)])]),
+											key: "0"
+										} : void 0]), 1032, [
+											"clientOptions",
+											"eventBus",
+											"isWebhook",
+											"method",
+											"operation",
+											"path",
+											"securitySchemes",
+											"selectedClient",
+											"selectedServer"
+										])]),
+										_: 1
+									}),
+									createVNode(unref(ScalarErrorBoundary), null, {
+										default: withCtx(() => [__props.operation.responses ? (openBlock(), createBlock(unref(ExampleResponses_default), {
+											key: 0,
+											responses: __props.operation.responses,
+											style: { "margin-top": "12px" }
+										}, null, 8, ["responses"])) : createCommentVNode("", true)]),
+										_: 1
+									})
+								])]),
+								_: 1
+							})]),
+							_: 1
+						})
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"id",
+				"aria-labelledby",
+				"label"
+			]);
+		};
+	}
+});
+//#endregion
+export { ModernLayout_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ModernLayout.vue.script.js.map

package/dist/features/Operation/layouts/ModernLayout.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernLayout.vue.script.js","names":[],"sources":["../../../../src/features/Operation/layouts/ModernLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { OperationCodeSample } from '@scalar/api-client/v2/blocks/operation-code-sample'\nimport type { SecuritySchemeObjectSecret } from '@scalar/api-client/v2/blocks/scalar-auth-selector-block'\nimport { ScalarErrorBoundary, ScalarMarkdown } from '@scalar/components'\nimport { ScalarIconWebhooksLogo } from '@scalar/icons'\nimport {\n  getOperationStability,\n  getOperationStabilityColor,\n  isOperationDeprecated,\n} from '@scalar/oas-utils/helpers'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type {\n  OperationObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, useId } from 'vue'\n\nimport { Anchor } from '@/components/Anchor'\nimport { Badge } from '@/components/Badge'\nimport { LinkList } from '@/components/LinkList'\nimport OperationPath from '@/components/OperationPath.vue'\nimport {\n  Section,\n  SectionColumn,\n  SectionColumns,\n  SectionContent,\n  SectionHeader,\n  SectionHeaderTag,\n} from '@/components/Section'\nimport AskAgentButton from '@/features/ask-agent-button/AskAgentButton.vue'\nimport { ExampleResponses } from '@/features/example-responses'\nimport { ExternalDocs } from '@/features/external-docs'\nimport Callbacks from '@/features/Operation/components/callbacks/Callbacks.vue'\nimport OperationParameters from '@/features/Operation/components/OperationParameters.vue'\nimport OperationResponses from '@/features/Operation/components/OperationResponses.vue'\nimport type { OperationProps } from '@/features/Operation/Operation.vue'\nimport { getXKeysFromObject } from '@/features/specification-extension'\nimport SpecificationExtension from '@/features/specification-extension/SpecificationExtension.vue'\nimport { TestRequestButton } from '@/features/test-request-button'\nimport { XBadges } from '@/features/x-badges'\n\nconst {\n  clientOptions,\n  eventBus,\n  isWebhook,\n  method,\n  operation,\n  options,\n  path,\n  selectedServer,\n  selectedSecuritySchemes,\n  selectedClient,\n} = defineProps<\n  Omit<\n    OperationProps,\n    | 'document'\n    | 'pathValue'\n    | 'server'\n    | 'isCollapsed'\n    | 'securitySchemes'\n    | 'authStore'\n  > & {\n    /** Operation object with path params */\n    operation: OperationObject\n    /** The selected server for the operation */\n    selectedServer: ServerObject | null\n    /** The selected security schemes for the operation */\n    selectedSecuritySchemes: SecuritySchemeObjectSecret[]\n  }\n>()\n\nconst operationTitle = computed(() => operation.summary || path || '')\n\nconst labelId = useId()\n\nconst operationExtensions = computed(() => getXKeysFromObject(operation))\n</script>\n\n<template>\n  <Section\n    :id=\"id\"\n    :aria-labelledby=\"labelId\"\n    :label=\"operationTitle\"\n    tabindex=\"-1\"\n    @intersecting=\"() => eventBus?.emit('intersecting:nav-item', { id })\">\n    <SectionContent>\n      <div class=\"flex flex-row justify-between gap-1\">\n        <!-- Left -->\n        <div class=\"flex gap-1\">\n          <!-- Operation ID -->\n          <Badge v-if=\"options?.showOperationId && operation.operationId\">\n            {{ operation.operationId }}\n          </Badge>\n          <!-- Stability badge -->\n          <Badge\n            v-if=\"getOperationStability(operation)\"\n            class=\"capitalize\"\n            :class=\"getOperationStabilityColor(operation)\">\n            {{ getOperationStability(operation) }}\n          </Badge>\n          <!-- Webhook badge -->\n          <Badge\n            v-if=\"isWebhook\"\n            class=\"font-code text-green flex w-fit items-center justify-center gap-1\">\n            <ScalarIconWebhooksLogo weight=\"bold\" />Webhook\n          </Badge>\n          <!-- x-badges before -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"before\" />\n        </div>\n        <!-- Right -->\n        <div class=\"flex gap-1\">\n          <!-- x-badges after -->\n          <XBadges\n            :badges=\"operation['x-badges']\"\n            position=\"after\" />\n        </div>\n      </div>\n      <div :class=\"isOperationDeprecated(operation) ? 'deprecated' : ''\">\n        <SectionHeader>\n          <Anchor\n            @copyAnchorUrl=\"() => eventBus?.emit('copy-url:nav-item', { id })\">\n            <SectionHeaderTag\n              :id=\"labelId\"\n              :level=\"3\">\n              {{ operationTitle }}\n            </SectionHeaderTag>\n          </Anchor>\n        </SectionHeader>\n      </div>\n      <SectionColumns>\n        <SectionColumn>\n          <div class=\"operation-details\">\n            <SpecificationExtension :value=\"operationExtensions\" />\n            <ScalarMarkdown\n              :anchorPrefix=\"id\"\n              aria-label=\"Operation Description\"\n              role=\"group\"\n              transformType=\"heading\"\n              :value=\"operation.description\"\n              withAnchors\n              withImages />\n            <OperationParameters\n              :breadcrumb=\"[id]\"\n              :eventBus\n              :options\n              :parameters=\"operation.parameters\"\n              :requestBody=\"getResolvedRef(operation.requestBody)\" />\n            <OperationResponses\n              :breadcrumb=\"[id]\"\n              :collapsableItems=\"!options.expandAllResponses\"\n              :eventBus\n              :options\n              :responses=\"operation.responses\" />\n\n            <!-- Callbacks -->\n            <ScalarErrorBoundary>\n              <Callbacks\n                v-if=\"operation.callbacks\"\n                :callbacks=\"operation.callbacks\"\n                class=\"mt-6\"\n                :eventBus\n                :options\n                :path />\n            </ScalarErrorBoundary>\n          </div>\n        </SectionColumn>\n        <SectionColumn>\n          <div class=\"examples\">\n            <!-- External Docs -->\n            <LinkList v-if=\"operation.externalDocs\">\n              <ExternalDocs :value=\"operation.externalDocs\" />\n            </LinkList>\n\n            <!-- New Example Request -->\n            <ScalarErrorBoundary>\n              <OperationCodeSample\n                :clientOptions\n                :eventBus\n                fallback\n                :isWebhook\n                :method\n                :operation\n                :path\n                :securitySchemes=\"selectedSecuritySchemes\"\n                :selectedClient\n                :selectedServer>\n                <template #header>\n                  <OperationPath\n                    class=\"font-code text-c-2 [&_em]:text-c-1 [&_em]:not-italic\"\n                    :deprecated=\"operation?.deprecated\"\n                    :path=\"path\" />\n                </template>\n                <template\n                  v-if=\"!isWebhook\"\n                  #footer=\"{ exampleName }\">\n                  <div class=\"flex\">\n                    <AskAgentButton />\n                    <TestRequestButton\n                      v-if=\"!options.hideTestRequestButton\"\n                      :id\n                      :eventBus\n                      :exampleName\n                      :method\n                      :path />\n                  </div>\n                </template>\n              </OperationCodeSample>\n            </ScalarErrorBoundary>\n\n            <ScalarErrorBoundary>\n              <ExampleResponses\n                v-if=\"operation.responses\"\n                :responses=\"operation.responses\"\n                style=\"margin-top: 12px\" />\n            </ScalarErrorBoundary>\n          </div>\n        </SectionColumn>\n      </SectionColumns>\n    </SectionContent>\n  </Section>\n</template>\n\n<style scoped>\n.examples {\n  position: sticky;\n  top: calc(var(--refs-viewport-offset) + 24px);\n}\n\n.examples > * {\n  max-height: calc((var(--refs-viewport-height) - 60px) / 2);\n  position: relative;\n}\n\n.examples > *:first-of-type:last-of-type {\n  max-height: calc((var(--refs-viewport-height) - 60px));\n}\n\n/*\n * Don't constrain card height on mobile\n * (or zoomed in screens)\n */\n@media (max-width: 600px) {\n  .examples > * {\n    max-height: unset;\n  }\n}\n.deprecated * {\n  text-decoration: line-through;\n}\n</style>\n"],"mappings":"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"}

package/dist/features/Search/components/SearchButton.vue.js

@@ -0,0 +1,7 @@
+import SearchButton_vue_vue_type_script_setup_true_lang_default from "./SearchButton.vue.script.js";
+//#region src/features/Search/components/SearchButton.vue
+var SearchButton_default = SearchButton_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SearchButton_default as default };
+
+//# sourceMappingURL=SearchButton.vue.js.map

package/dist/features/Search/components/SearchButton.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchButton.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchButton,\n  useModal,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport SearchModal from './SearchModal.vue'\n\nconst { searchHotKey = 'k', hideModels = false } = defineProps<{\n  forceIcon?: boolean\n  searchHotKey?: string\n  hideModels?: boolean\n  document?: OpenApiDocument\n  eventBus: WorkspaceEventBus\n}>()\n\nconst button = ref<InstanceType<typeof ScalarSidebarSearchButton>>()\nconst modalState = useModal()\n\nconst handleHotKey = (e: KeyboardEvent) => {\n  if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === searchHotKey) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (modalState.open) {\n      modalState.hide()\n    } else {\n      modalState.show()\n    }\n  }\n}\n\nwatch(\n  () => modalState.open,\n  async (next, prev) => {\n    // Return focus to the button when the modal is closed\n    if (!next && prev) {\n      await nextTick()\n      button.value?.$el.focus()\n    }\n  },\n)\n\n// Handle keyboard shortcuts\n// TODO: we can move this to the hotkey event bus but we would need to set up a custom key from the searchHotKey config\n// and make sure it works correctly inside the references first\nonMounted(() => window.addEventListener('keydown', handleHotKey))\nonBeforeUnmount(() => window.removeEventListener('keydown', handleHotKey))\n\nfunction handleClick() {\n  modalState.show()\n}\n</script>\n<template>\n  <ScalarIconButton\n    v-if=\"forceIcon\"\n    :icon=\"ScalarIconMagnifyingGlass\"\n    label=\"Search\"\n    @click=\"handleClick\" />\n  <ScalarSidebarSearchButton\n    v-else\n    ref=\"button\"\n    class=\"w-full\"\n    :class=\"$attrs.class\"\n    @click=\"handleClick\">\n    <span class=\"sr-only\">Open Search</span>\n    <span\n      aria-hidden=\"true\"\n      class=\"sidebar-search-placeholder\">\n      Search\n    </span>\n    <template #shortcut>\n      <template v-if=\"isMacOS()\">\n        <span class=\"sr-only\">Command</span>\n        <span aria-hidden=\"true\">⌘</span>\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">CTRL</span>\n        <span aria-hidden=\"true\">⌃</span>\n      </template>\n      {{ searchHotKey }}\n    </template>\n  </ScalarSidebarSearchButton>\n\n  <SearchModal\n    :document\n    :eventBus=\"eventBus\"\n    :hideModels=\"hideModels\"\n    :modalState=\"modalState\" />\n</template>\n"],"mappings":""}

package/dist/features/Search/components/SearchButton.vue.script.js

@@ -0,0 +1,77 @@
+import SearchModal_default from "./SearchModal.vue.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarIconButton, ScalarSidebarSearchButton, useModal } from "@scalar/components";
+import { ScalarIconMagnifyingGlass } from "@scalar/icons";
+import { isMacOS } from "@scalar/helpers/general/is-mac-os";
+//#region src/features/Search/components/SearchButton.vue?vue&type=script&setup=true&lang.ts
+var SearchButton_vue_vue_type_script_setup_true_lang_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 { SearchButton_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SearchButton.vue.script.js.map

package/dist/features/Search/components/SearchButton.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchButton.vue.script.js","names":["$attrs"],"sources":["../../../../src/features/Search/components/SearchButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconButton,\n  ScalarSidebarSearchButton,\n  useModal,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport SearchModal from './SearchModal.vue'\n\nconst { searchHotKey = 'k', hideModels = false } = defineProps<{\n  forceIcon?: boolean\n  searchHotKey?: string\n  hideModels?: boolean\n  document?: OpenApiDocument\n  eventBus: WorkspaceEventBus\n}>()\n\nconst button = ref<InstanceType<typeof ScalarSidebarSearchButton>>()\nconst modalState = useModal()\n\nconst handleHotKey = (e: KeyboardEvent) => {\n  if ((isMacOS() ? e.metaKey : e.ctrlKey) && e.key === searchHotKey) {\n    e.preventDefault()\n    e.stopPropagation()\n\n    if (modalState.open) {\n      modalState.hide()\n    } else {\n      modalState.show()\n    }\n  }\n}\n\nwatch(\n  () => modalState.open,\n  async (next, prev) => {\n    // Return focus to the button when the modal is closed\n    if (!next && prev) {\n      await nextTick()\n      button.value?.$el.focus()\n    }\n  },\n)\n\n// Handle keyboard shortcuts\n// TODO: we can move this to the hotkey event bus but we would need to set up a custom key from the searchHotKey config\n// and make sure it works correctly inside the references first\nonMounted(() => window.addEventListener('keydown', handleHotKey))\nonBeforeUnmount(() => window.removeEventListener('keydown', handleHotKey))\n\nfunction handleClick() {\n  modalState.show()\n}\n</script>\n<template>\n  <ScalarIconButton\n    v-if=\"forceIcon\"\n    :icon=\"ScalarIconMagnifyingGlass\"\n    label=\"Search\"\n    @click=\"handleClick\" />\n  <ScalarSidebarSearchButton\n    v-else\n    ref=\"button\"\n    class=\"w-full\"\n    :class=\"$attrs.class\"\n    @click=\"handleClick\">\n    <span class=\"sr-only\">Open Search</span>\n    <span\n      aria-hidden=\"true\"\n      class=\"sidebar-search-placeholder\">\n      Search\n    </span>\n    <template #shortcut>\n      <template v-if=\"isMacOS()\">\n        <span class=\"sr-only\">Command</span>\n        <span aria-hidden=\"true\">⌘</span>\n      </template>\n      <template v-else>\n        <span class=\"sr-only\">CTRL</span>\n        <span aria-hidden=\"true\">⌃</span>\n      </template>\n      {{ searchHotKey }}\n    </template>\n  </ScalarSidebarSearchButton>\n\n  <SearchModal\n    :document\n    :eventBus=\"eventBus\"\n    :hideModels=\"hideModels\"\n    :modalState=\"modalState\" />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAsBA,MAAM,SAAS,KAAoD;EACnE,MAAM,aAAa,UAAS;EAE5B,MAAM,gBAAgB,MAAqB;AACzC,QAAK,SAAS,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,QAAA,cAAc;AACjE,MAAE,gBAAe;AACjB,MAAE,iBAAgB;AAElB,QAAI,WAAW,KACb,YAAW,MAAK;QAEhB,YAAW,MAAK;;;AAKtB,cACQ,WAAW,MACjB,OAAO,MAAM,SAAS;AAEpB,OAAI,CAAC,QAAQ,MAAM;AACjB,UAAM,UAAS;AACf,WAAO,OAAO,IAAI,OAAM;;IAG9B;AAKA,kBAAgB,OAAO,iBAAiB,WAAW,aAAa,CAAA;AAChE,wBAAsB,OAAO,oBAAoB,WAAW,aAAa,CAAA;EAEzE,SAAS,cAAc;AACrB,cAAW,MAAK;;;2DAKR,QAAA,aAAA,WAAA,EADR,YAIyB,MAAA,iBAAA,EAAA;;IAFtB,MAAM,MAAA,0BAAyB;IAChC,OAAM;IACL,SAAO;0CACV,YAuB4B,MAAA,0BAAA,EAAA;;aArBtB;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,UACEA,KAAAA,OAAO,MAAK,CAAA;IACnB,SAAO;;IAOG,UAAQ,cAIN,CAHK,MAAA,QAAO,EAAA,IAAA,WAAA,EAAvB,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAoC,QAAA,EAA9B,OAAM,WAAS,EAAC,WAAO,GAAA,GAAA,OAAA,OAAA,OAAA,KAC7B,mBAAiC,QAAA,EAA3B,eAAY,QAAM,EAAC,KAAC,GAAA,EAAA,EAAA,GAAA,KAAA,WAAA,EAE5B,mBAGW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAFT,mBAAiC,QAAA,EAA3B,OAAM,WAAS,EAAC,QAAI,GAAA,GAAA,OAAA,OAAA,OAAA,KAC1B,mBAAiC,QAAA,EAA3B,eAAY,QAAM,EAAC,KAAC,GAAA,EAAA,EAAA,GAAA,GAAA,gBACjB,MACX,gBAAG,QAAA,aAAY,EAAA,EAAA,CAAA,CAAA;2BAfuB,CAAA,OAAA,OAAA,OAAA,KAAxC,mBAAwC,QAAA,EAAlC,OAAM,WAAS,EAAC,eAAW,GAAA,GAAA,OAAA,OAAA,OAAA,KACjC,mBAIO,QAAA;KAHL,eAAY;KACZ,OAAM;OAA6B,YAErC,GAAA,EAAA,CAAA;;sBAcF,YAI6B,qBAAA;IAH1B,UAAA,QAAA;IACA,UAAU,QAAA;IACV,YAAY,QAAA;IACZ,YAAY,MAAA,WAAU"}

package/dist/features/Search/components/SearchModal.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import SearchModal_vue_vue_type_script_setup_true_lang_default from "./SearchModal.vue.script.js";
+/* empty css                          */
+//#region src/features/Search/components/SearchModal.vue
+var SearchModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(SearchModal_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c1c368f9"]]);
+//#endregion
+export { SearchModal_default as default };
+
+//# sourceMappingURL=SearchModal.vue.js.map

package/dist/features/Search/components/SearchModal.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchModal.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarModal,\n  ScalarSearchInput,\n  ScalarSearchResultList,\n  type ModalState,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n  modalState: ModalState\n  document: OpenApiDocument | undefined\n  eventBus: WorkspaceEventBus\n}>()\n\n/** Base id for the search form */\nconst id = nanoid()\n/** An id for the results listbox */\nconst listboxId = `${id}-search-result`\n/** An id for the results instructions */\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(() => props.document)\n\nconst selectedIndex = ref<number | undefined>(undefined)\n\n/** Clear the query value when the modal is opened */\nwatch(\n  () => props.modalState.open,\n  (open) => {\n    if (open) {\n      query.value = ''\n    }\n  },\n)\n\n/** Keyboard navigation */\nconst navigateSearchResults = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = results.value.length\n\n  if (typeof selectedIndex.value === 'number') {\n    // Ensures we loop around the array by using the remainder\n    selectedIndex.value = (selectedIndex.value + offset + length) % length\n  } else {\n    // If no index is selected, we select the first or last item depending on the direction\n\n    selectedIndex.value = offset === -1 ? length - 1 : 0\n  }\n}\n\n/** Handle the selection of a search result */\nfunction handleSelect(idx: number | undefined) {\n  if (typeof idx !== 'number' || !results.value[idx]) {\n    return\n  }\n\n  const result = results.value[idx]\n  props.modalState.hide()\n  props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/**\n * Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n  const selectedResult = results.value[selectedIndex.value ?? -1]\n\n  return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n  <ScalarModal\n    aria-label=\"Reference Search\"\n    :state=\"modalState\"\n    variant=\"search\">\n    <div\n      class=\"mb-0 flex flex-col\"\n      role=\"search\">\n      <ScalarSearchInput\n        v-model=\"query\"\n        :aria-activedescendant=\"activeDescendantId\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-describedby=\"instructionsId\"\n        role=\"combobox\"\n        @blur=\"selectedIndex = undefined\"\n        @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n        @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n        @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n    </div>\n    <ScalarSearchResultList\n      :id=\"listboxId\"\n      aria-label=\"Reference Search Results\"\n      class=\"custom-scroll p-1 pt-0\"\n      :noResults=\"!results.length\">\n      <template #query>\n        {{ query }}\n      </template>\n      <SearchResult\n        v-for=\"(result, idx) in results\"\n        :id=\"`search-result-${result.item.id}`\"\n        :key=\"result.refIndex\"\n        :isSelected=\"selectedIndex === idx\"\n        :result=\"result\"\n        @click.prevent=\"() => handleSelect(idx)\" />\n    </ScalarSearchResultList>\n    <div\n      :id=\"instructionsId\"\n      class=\"ref-search-meta\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        <span>↑↓ Navigate</span>\n        <span>⏎ Select</span>\n      </span>\n      <span class=\"sr-only\">\n        Press up arrow / down arrow to navigate, enter to select, type to filter\n        results\n      </span>\n    </div>\n  </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n  background: var(--scalar-background-1);\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-bottom-right-radius: var(--scalar-radius-lg);\n  padding: 6px 12px;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  display: flex;\n  gap: 12px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":""}

package/dist/features/Search/components/SearchModal.vue.script.js

@@ -0,0 +1,115 @@
+import { useSearchIndex } from "../hooks/useSearchIndex.js";
+import SearchResult_default from "./SearchResult.vue.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
+import { ScalarModal, ScalarSearchInput, ScalarSearchResultList } from "@scalar/components";
+import { nanoid } from "nanoid";
+//#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"
+};
+var SearchModal_vue_vue_type_script_setup_true_lang_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"]);
+		};
+	}
+});
+//#endregion
+export { SearchModal_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SearchModal.vue.script.js.map

package/dist/features/Search/components/SearchModal.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchModal.vue.script.js","names":[],"sources":["../../../../src/features/Search/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarModal,\n  ScalarSearchInput,\n  ScalarSearchResultList,\n  type ModalState,\n} from '@scalar/components'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, watch } from 'vue'\n\nimport { useSearchIndex } from '@/features/Search/hooks/useSearchIndex'\n\nimport SearchResult from './SearchResult.vue'\n\nconst props = defineProps<{\n  modalState: ModalState\n  document: OpenApiDocument | undefined\n  eventBus: WorkspaceEventBus\n}>()\n\n/** Base id for the search form */\nconst id = nanoid()\n/** An id for the results listbox */\nconst listboxId = `${id}-search-result`\n/** An id for the results instructions */\nconst instructionsId = `${id}-search-instructions`\n\nconst { query, results } = useSearchIndex(() => props.document)\n\nconst selectedIndex = ref<number | undefined>(undefined)\n\n/** Clear the query value when the modal is opened */\nwatch(\n  () => props.modalState.open,\n  (open) => {\n    if (open) {\n      query.value = ''\n    }\n  },\n)\n\n/** Keyboard navigation */\nconst navigateSearchResults = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = results.value.length\n\n  if (typeof selectedIndex.value === 'number') {\n    // Ensures we loop around the array by using the remainder\n    selectedIndex.value = (selectedIndex.value + offset + length) % length\n  } else {\n    // If no index is selected, we select the first or last item depending on the direction\n\n    selectedIndex.value = offset === -1 ? length - 1 : 0\n  }\n}\n\n/** Handle the selection of a search result */\nfunction handleSelect(idx: number | undefined) {\n  if (typeof idx !== 'number' || !results.value[idx]) {\n    return\n  }\n\n  const result = results.value[idx]\n  props.modalState.hide()\n  props.eventBus.emit('scroll-to:nav-item', { id: result.item.id })\n}\n\n/**\n * Active descendant id for the search input\n * NOTE: Result items MUST share this id for the aria-activedescendant attribute to work correctly\n */\nconst activeDescendantId = computed(() => {\n  const selectedResult = results.value[selectedIndex.value ?? -1]\n\n  return selectedResult ? `search-result-${selectedResult.item.id}` : undefined\n})\n</script>\n<template>\n  <ScalarModal\n    aria-label=\"Reference Search\"\n    :state=\"modalState\"\n    variant=\"search\">\n    <div\n      class=\"mb-0 flex flex-col\"\n      role=\"search\">\n      <ScalarSearchInput\n        v-model=\"query\"\n        :aria-activedescendant=\"activeDescendantId\"\n        aria-autocomplete=\"list\"\n        :aria-controls=\"listboxId\"\n        :aria-describedby=\"instructionsId\"\n        role=\"combobox\"\n        @blur=\"selectedIndex = undefined\"\n        @keydown.down.stop.prevent=\"navigateSearchResults('down')\"\n        @keydown.enter.stop.prevent=\"() => handleSelect(selectedIndex)\"\n        @keydown.up.stop.prevent=\"navigateSearchResults('up')\" />\n    </div>\n    <ScalarSearchResultList\n      :id=\"listboxId\"\n      aria-label=\"Reference Search Results\"\n      class=\"custom-scroll p-1 pt-0\"\n      :noResults=\"!results.length\">\n      <template #query>\n        {{ query }}\n      </template>\n      <SearchResult\n        v-for=\"(result, idx) in results\"\n        :id=\"`search-result-${result.item.id}`\"\n        :key=\"result.refIndex\"\n        :isSelected=\"selectedIndex === idx\"\n        :result=\"result\"\n        @click.prevent=\"() => handleSelect(idx)\" />\n    </ScalarSearchResultList>\n    <div\n      :id=\"instructionsId\"\n      class=\"ref-search-meta\">\n      <span\n        aria-hidden=\"true\"\n        class=\"contents\">\n        <span>↑↓ Navigate</span>\n        <span>⏎ Select</span>\n      </span>\n      <span class=\"sr-only\">\n        Press up arrow / down arrow to navigate, enter to select, type to filter\n        results\n      </span>\n    </div>\n  </ScalarModal>\n</template>\n<style scoped>\n.ref-search-meta {\n  background: var(--scalar-background-1);\n  border-bottom-left-radius: var(--scalar-radius-lg);\n  border-bottom-right-radius: var(--scalar-radius-lg);\n  padding: 6px 12px;\n  font-size: var(--scalar-font-size-4);\n  color: var(--scalar-color-3);\n  font-weight: var(--scalar-semibold);\n  display: flex;\n  gap: 12px;\n  border-top: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;;EAOd,MAAM,KAAK,QAAO;;EAElB,MAAM,YAAY,GAAG,GAAG;;EAExB,MAAM,iBAAiB,GAAG,GAAG;EAE7B,MAAM,EAAE,OAAO,YAAY,qBAAqB,MAAM,SAAQ;EAE9D,MAAM,gBAAgB,IAAwB,KAAA,EAAS;;AAGvD,cACQ,MAAM,WAAW,OACtB,SAAS;AACR,OAAI,KACF,OAAM,QAAQ;IAGpB;;EAGA,MAAM,yBAAyB,cAA6B;GAC1D,MAAM,SAAS,cAAc,OAAO,KAAK;GACzC,MAAM,SAAS,QAAQ,MAAM;AAE7B,OAAI,OAAO,cAAc,UAAU,SAEjC,eAAc,SAAS,cAAc,QAAQ,SAAS,UAAU;OAIhE,eAAc,QAAQ,WAAW,KAAK,SAAS,IAAI;;;EAKvD,SAAS,aAAa,KAAyB;AAC7C,OAAI,OAAO,QAAQ,YAAY,CAAC,QAAQ,MAAM,KAC5C;GAGF,MAAM,SAAS,QAAQ,MAAM;AAC7B,SAAM,WAAW,MAAK;AACtB,SAAM,SAAS,KAAK,sBAAsB,EAAE,IAAI,OAAO,KAAK,IAAI,CAAA;;;;;;EAOlE,MAAM,qBAAqB,eAAe;GACxC,MAAM,iBAAiB,QAAQ,MAAM,cAAc,SAAS;AAE5D,UAAO,iBAAiB,iBAAiB,eAAe,KAAK,OAAO,KAAA;IACrE;;uBAGC,YAiDc,MAAA,YAAA,EAAA;IAhDZ,cAAW;IACV,OAAO,QAAA;IACR,SAAQ;;2BAeF;KAdN,mBAcM,OAdN,YAcM,CAXJ,YAU2D,MAAA,kBAAA,EAAA;kBAThD,MAAA,MAAK;wFAAA,QAAA,SAAA;MACb,yBAAuB,mBAAA;MACxB,qBAAkB;MACjB,iBAAe;MACf,oBAAkB;MACnB,MAAK;MACJ,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAgB,KAAA;MACtB,WAAO;oEAAoB,sBAAqB,OAAA,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,OAAA,CAAA;8DACd,aAAa,cAAA,MAAa,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,QAAA,CAAA;oEACnC,sBAAqB,KAAA,EAAA,CAAA,QAAA,UAAA,CAAA,EAAA,CAAA,KAAA,CAAA;;;KAEnD,YAeyB,MAAA,uBAAA,EAAA;MAdtB,IAAI;MACL,cAAW;MACX,OAAM;MACL,WAAS,CAAG,MAAA,QAAO,CAAC;;MACV,OAAK,cACH,CAAA,gBAAA,gBAAR,MAAA,MAAK,CAAA,EAAA,EAAA,CAAA,CAAA;6BAGwB,EAAA,UAAA,KAAA,EADlC,mBAM6C,UAAA,MAAA,WALnB,MAAA,QAAO,GAAvB,QAAQ,QAAG;2BADrB,YAM6C,sBAAA;QAJ1C,IAAE,iBAAmB,OAAO,KAAK;QACjC,KAAK,OAAO;QACZ,YAAY,cAAA,UAAkB;QACtB;QACR,SAAK,oBAAgB,aAAa,IAAG,EAAA,CAAA,UAAA,CAAA;;;;;;;;;;KAE1C,mBAaM,OAAA;MAZH,IAAI;MACL,OAAM;uCACN,mBAKO,QAAA;MAJL,eAAY;MACZ,OAAM;SACN,mBAAwB,QAAA,MAAlB,cAAW,EACjB,mBAAqB,QAAA,MAAf,WAAQ,CAAA,EAAA,GAAA,EAEhB,mBAGO,QAAA,EAHD,OAAM,WAAS,EAAC,sFAGtB,GAAA,CAAA,EAAA,CAAA"}

package/dist/features/Search/components/SearchResult.vue.js

@@ -0,0 +1,7 @@
+import SearchResult_vue_vue_type_script_setup_true_lang_default from "./SearchResult.vue.script.js";
+//#region src/features/Search/components/SearchResult.vue
+var SearchResult_default = SearchResult_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SearchResult_default as default };
+
+//# sourceMappingURL=SearchResult.vue.js.map

package/dist/features/Search/components/SearchResult.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResult.vue.js","names":[],"sources":["../../../../src/features/Search/components/SearchResult.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarSearchResultItem } from '@scalar/components'\nimport {\n  ScalarIconBracketsCurly,\n  ScalarIconTag,\n  ScalarIconTerminalWindow,\n  ScalarIconTextAlignLeft,\n} from '@scalar/icons'\nimport type { ScalarIconComponent } from '@scalar/icons/types'\nimport { HttpMethod } from '@scalar/sidebar'\nimport type { FuseResult } from 'fuse.js'\n\nimport type { EntryType, FuseData } from '@/features/Search/types'\n\ndefineProps<{\n  id: string\n  isSelected: boolean\n  result: FuseResult<FuseData>\n}>()\n\nconst ENTRY_ICONS: { [x in EntryType]: ScalarIconComponent } = {\n  heading: ScalarIconTextAlignLeft,\n  model: ScalarIconBracketsCurly,\n  operation: ScalarIconTerminalWindow,\n  tag: ScalarIconTag,\n  webhook: ScalarIconTerminalWindow,\n}\n\nconst ENTRY_LABELS: { [x in EntryType]: string } = {\n  heading: 'Heading',\n  operation: 'Operation',\n  tag: 'Tag',\n  model: 'Model',\n  webhook: 'Webhook',\n}\n</script>\n\n<template>\n  <ScalarSearchResultItem\n    :id=\"id\"\n    :icon=\"ENTRY_ICONS[result.item.type]\"\n    :selected=\"isSelected\">\n    <span\n      :class=\"{\n        'text-decoration-line':\n          result.item.entry.type === 'operation' &&\n          result.item.entry.isDeprecated,\n      }\">\n      <span class=\"sr-only\">\n        {{ ENTRY_LABELS[result.item.type] }}:&nbsp;\n        <template\n          v-if=\"\n            result.item.entry.type === 'operation' &&\n            result.item.entry.isDeprecated\n          \">\n          (Deprecated)&nbsp;\n        </template>\n      </span>\n      {{ result.item.title }}\n      <span class=\"sr-only\">,</span>\n    </span>\n    <template\n      v-if=\"\n        result.item.type !== 'webhook' &&\n        (result.item.method || result.item.path) &&\n        result.item.path !== result.item.title\n      \"\n      #description>\n      <span class=\"inline-flex items-center gap-1\">\n        <template v-if=\"result.item.type === 'operation'\">\n          <HttpMethod\n            aria-hidden=\"true\"\n            :method=\"result.item.method ?? 'get'\" />\n          <span class=\"sr-only\">\n            HTTP Method: {{ result.item.method ?? 'get' }}\n          </span>\n        </template>\n        <span class=\"sr-only\">Path:&nbsp;</span>\n        {{ result.item.path }}\n      </span>\n    </template>\n    <template\n      v-else-if=\"result.item.description\"\n      #description>\n      <span class=\"sr-only\">Description:&nbsp;</span>\n      {{ result.item.description }}\n    </template>\n  </ScalarSearchResultItem>\n</template>\n"],"mappings":""}

package/dist/features/Search/components/SearchResult.vue.script.js

@@ -0,0 +1,69 @@
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarSearchResultItem } from "@scalar/components";
+import { HttpMethod } from "@scalar/sidebar";
+import { ScalarIconBracketsCurly, ScalarIconTag, ScalarIconTerminalWindow, ScalarIconTextAlignLeft } from "@scalar/icons";
+//#region src/features/Search/components/SearchResult.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "sr-only" };
+var _hoisted_2 = { class: "inline-flex items-center gap-1" };
+var _hoisted_3 = { class: "sr-only" };
+var SearchResult_vue_vue_type_script_setup_true_lang_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, [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
+export { SearchResult_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SearchResult.vue.script.js.map