@scalar/api-client 2.38.4 → 2.39.1

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

@@ -0,0 +1,307 @@
+import { PathId } from "../../routes.js";
+import { useActiveEntities } from "../../store/active-entities.js";
+import { useLayout } from "../../hooks/useLayout.js";
+import { useSidebar } from "../../hooks/useSidebar.js";
+import { createInitialRequest } from "../../store/requests.js";
+import { useWorkspace } from "../../store/store.js";
+import HttpMethod_default from "../../components/HttpMethod/HttpMethod.vue.js";
+import Sidebar_default from "../../components/Sidebar/Sidebar.vue.js";
+import ScalarAsciiArt_default from "../../components/ScalarAsciiArt.vue.js";
+import rabbit_default from "../../assets/rabbit.ascii.virtual.js";
+import rabbitjump_default from "../../assets/rabbitjump.ascii.virtual.js";
+import WorkspaceDropdown_default from "./components/WorkspaceDropdown.vue.js";
+import SidebarButton_default from "../../components/Sidebar/SidebarButton.vue.js";
+import EnvironmentSelector_default from "../../components/EnvironmentSelector/EnvironmentSelector.vue.js";
+import { useSearch } from "../../components/Search/useSearch.js";
+import { dragHandlerFactory } from "./handle-drag.js";
+import RequestSidebarItemMenu_default from "./RequestSidebarItemMenu.vue.js";
+import { isGettingStarted } from "./RequestSection/helpers/getting-started.js";
+import RequestSidebarItem_default from "./RequestSidebarItem.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { ScalarButton, ScalarIcon, ScalarSearchResultItem, ScalarSearchResultList, ScalarSidebarSearchInput } from "@scalar/components";
+import { useToasts } from "@scalar/use-toasts";
+import { useRouter } from "vue-router";
+import { LibraryIcon } from "@scalar/icons/library";
+//#region src/views/Request/RequestSidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "bg-b-1 sticky top-0 z-20 flex h-12 items-center px-3" };
+var _hoisted_2 = {
+	key: 1,
+	class: "text-c-3"
+};
+var _hoisted_3 = ["aria-pressed"];
+var _hoisted_4 = { class: "sr-only" };
+var _hoisted_5 = {
+	key: 0,
+	class: "search-button-fade sticky top-12 z-10 px-3 py-2.5 pt-0 focus-within:z-20",
+	role: "search"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "contents"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "empty-sidebar-item-content px-2.5 py-2.5"
+};
+var _hoisted_8 = { class: "rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]" };
+var RequestSidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RequestSidebar",
+	emits: ["newTab", "clearDrafts"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { isSidebarOpen, setCollapsedSidebarFolder, toggleSidebarOpen } = useSidebar();
+		const { layout } = useLayout();
+		const workspaceContext = useWorkspace();
+		const { activeCollection, activeWorkspaceCollections, activeRequest, activeWorkspaceRequests, activeWorkspace } = useActiveEntities();
+		const { findRequestParents, events, requestMutators, requests } = workspaceContext;
+		const { handleDragEnd, isDroppable } = dragHandlerFactory(activeWorkspace, workspaceContext);
+		const { replace } = useRouter();
+		const openCommandPaletteImport = () => {
+			events.commandPalette.emit({ commandName: "Import from OpenAPI/Swagger/Postman/cURL" });
+		};
+		const searchResultsId = useId();
+		const { toast } = useToasts();
+		/** The currently selected sidebarMenuItem for the context menu */
+		const menuItem = reactive({ open: false });
+		const isSearchVisible = ref(false);
+		/** Watch to see if activeRequest changes and ensure we open any folders */
+		watch(activeRequest, (request) => {
+			if (!request) return;
+			findRequestParents(request).forEach((uid) => setCollapsedSidebarFolder(uid, true));
+		}, { immediate: true });
+		const { searchText, searchResultsWithPlaceholderResults, selectedSearchResult, onSearchResultClick, fuseSearch, searchInputRef, searchResultRefs, navigateSearchResults, selectSearchResult } = useSearch();
+		const searchToggleRef = ref();
+		/** Handle hotkey events from the bus */
+		const handleHotKey = (event) => {
+			if (!event) return;
+			if (event.toggleSidebar) toggleSidebarOpen();
+			if (event.focusRequestSearch) searchInputRef.value?.focus();
+		};
+		onMounted(() => events.hotKeys.on(handleHotKey));
+		/**
+		* Need to manually remove listener on unmount due to vueuse memory leak
+		*
+		* @see https://github.com/vueuse/vueuse/issues/3498#issuecomment-2055546566
+		*/
+		onBeforeUnmount(() => {
+			events.hotKeys.off(handleHotKey);
+		});
+		const handleToggleWatchMode = (item) => {
+			if (item?.documentUrl) {
+				item.watchMode = !item.watchMode;
+				const currentCollection = activeWorkspaceCollections.value.find((collection) => collection.uid === item.entity.uid);
+				if (currentCollection) currentCollection.watchMode = item.watchMode;
+			}
+		};
+		watch(() => activeWorkspaceCollections.value.map((collection) => collection.watchMode), (newWatchModes, oldWatchModes) => {
+			newWatchModes.forEach((newWatchMode, index) => {
+				if (layout !== "modal" && newWatchMode !== oldWatchModes[index] && activeWorkspaceCollections.value[index]?.info?.title !== "Drafts" && activeWorkspaceCollections.value[index]) {
+					const currentCollection = activeWorkspaceCollections.value[index];
+					if (!currentCollection) return;
+					toast(`${currentCollection.info?.title}: Watch Mode ${newWatchMode ? "enabled" : "disabled"}`, "info");
+				}
+			});
+		});
+		/** Screen reader label for the search input */
+		const srLabel = computed(() => {
+			const results = searchResultsWithPlaceholderResults.value;
+			if (!results.length) return "No results found";
+			const result = results[selectedSearchResult.value]?.item;
+			if (!result) return "No result selected";
+			const resultsFoundLabel = searchText.value.length ? `${results.length} result${results.length === 1 ? "" : "s"} found, ` : "";
+			const selectedResultDescription = `, HTTP Method ${result.httpVerb}, Path ${result.path}`;
+			return `${resultsFoundLabel}Selected: ${`${result.title} ${selectedResultDescription}`}`;
+		});
+		const handleClearDrafts = () => {
+			const draftCollection = activeWorkspaceCollections.value.find((collection) => collection.info?.title === "Drafts");
+			if (draftCollection) draftCollection.requests.forEach((requestUid) => {
+				if (requests[requestUid]) requestMutators.delete(requests[requestUid], draftCollection.uid);
+			});
+			if (activeWorkspaceRequests.value.length) {
+				const firstRequest = activeWorkspaceCollections.value[0]?.requests[0];
+				if (firstRequest) replace({
+					name: "request",
+					params: { [PathId.Request]: firstRequest }
+				});
+			} else {
+				const { request } = createInitialRequest();
+				if (draftCollection) {
+					requestMutators.add(request, draftCollection.uid);
+					replace({
+						name: "request",
+						params: { [PathId.Request]: request.uid }
+					});
+				}
+			}
+		};
+		watch(isSearchVisible, (isVisible) => {
+			if (!isVisible) searchText.value = "";
+		});
+		const showGettingStarted = computed(() => isGettingStarted(activeWorkspaceCollections.value, activeWorkspaceRequests.value, requests));
+		/** We ensure in modal mode we only show the current requests collection */
+		const collections = computed(() => {
+			if (layout === "modal" && activeCollection.value) return [activeCollection.value];
+			return activeWorkspaceCollections.value;
+		});
+		/** Hide the search input if the text is empty */
+		function handleBlur(e) {
+			if (!searchText.value && e.relatedTarget !== searchToggleRef.value) isSearchVisible.value = false;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [withDirectives(createVNode(unref(Sidebar_default), { class: normalizeClass([unref(isSidebarOpen) ? "sidebar-active-width" : ""]) }, createSlots({
+				content: withCtx(() => [
+					createElementVNode("div", _hoisted_1, [
+						createElementVNode("div", { class: normalizeClass(["size-8", { "xl:hidden": unref(layout) !== "modal" }]) }, null, 2),
+						unref(layout) !== "modal" ? (openBlock(), createBlock(unref(WorkspaceDropdown_default), { key: 0 })) : createCommentVNode("", true),
+						unref(layout) !== "modal" ? (openBlock(), createElementBlock("span", _hoisted_2, " / ")) : createCommentVNode("", true),
+						unref(layout) !== "modal" ? (openBlock(), createBlock(EnvironmentSelector_default, { key: 2 })) : createCommentVNode("", true),
+						createElementVNode("button", {
+							ref_key: "searchToggleRef",
+							ref: searchToggleRef,
+							"aria-pressed": isSearchVisible.value,
+							class: "ml-auto",
+							type: "button",
+							onClick: _cache[0] || (_cache[0] = ($event) => isSearchVisible.value = !isSearchVisible.value)
+						}, [createElementVNode("span", _hoisted_4, toDisplayString(isSearchVisible.value ? "Hide" : "Show") + " search ", 1), createVNode(unref(ScalarIcon), {
+							class: "text-c-3 hover:bg-b-2 max-h-8 max-w-8 rounded-lg p-1.75 text-sm",
+							icon: "Search"
+						})], 8, _hoisted_3)
+					]),
+					isSearchVisible.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(ScalarSidebarSearchInput), {
+						ref_key: "searchInputRef",
+						ref: searchInputRef,
+						modelValue: unref(searchText),
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(searchText) ? searchText.value = $event : null),
+						autofocus: "",
+						"aria-controls": unref(searchResultsId),
+						label: srLabel.value,
+						onInput: unref(fuseSearch),
+						onKeydown: [
+							_cache[2] || (_cache[2] = withKeys(withModifiers(($event) => unref(navigateSearchResults)("down"), ["stop"]), ["down"])),
+							_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => unref(selectSearchResult)(), ["stop"]), ["enter"])),
+							_cache[4] || (_cache[4] = withKeys(withModifiers(($event) => unref(navigateSearchResults)("up"), ["stop"]), ["up"]))
+						],
+						onBlur: handleBlur
+					}, null, 8, [
+						"modelValue",
+						"aria-controls",
+						"label",
+						"onInput"
+					])])) : createCommentVNode("", true),
+					createElementVNode("div", {
+						class: normalizeClass(["gap-1/2 flex flex-1 flex-col overflow-visible overflow-y-auto px-3 pt-0 pb-3", [{ "pb-14": unref(layout) !== "modal" }, { "h-[calc(100%-273.5px)]": showGettingStarted.value }]]),
+						onDragenter: _cache[7] || (_cache[7] = withModifiers(() => {}, ["prevent"])),
+						onDragover: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"]))
+					}, [unref(searchText) ? (openBlock(), createBlock(unref(ScalarSearchResultList), {
+						key: 0,
+						id: unref(searchResultsId),
+						"aria-label": "Search Results",
+						class: "gap-px",
+						noResults: !unref(searchResultsWithPlaceholderResults).length
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(searchResultsWithPlaceholderResults), (entry, index) => {
+							return openBlock(), createBlock(unref(ScalarSearchResultItem), {
+								id: `#search-input-${entry.item.id}`,
+								key: entry.refIndex,
+								ref_for: true,
+								ref: (el) => unref(searchResultRefs)[index] = el,
+								selected: unref(selectedSearchResult) === index,
+								class: "px-2",
+								href: entry.item.link,
+								onClick: withModifiers(($event) => unref(onSearchResultClick)(entry), ["prevent"]),
+								onFocus: ($event) => selectedSearchResult.value = index
+							}, {
+								addon: withCtx(() => [_cache[10] || (_cache[10] = createElementVNode("span", { class: "sr-only" }, "HTTP Method:", -1)), createVNode(HttpMethod_default, {
+									class: "font-bold",
+									method: entry.item.httpVerb ?? "get"
+								}, null, 8, ["method"])]),
+								default: withCtx(() => [createTextVNode(toDisplayString(entry.item.title) + " ", 1)]),
+								_: 2
+							}, 1032, [
+								"id",
+								"selected",
+								"href",
+								"onClick",
+								"onFocus"
+							]);
+						}), 128))]),
+						_: 1
+					}, 8, ["id", "noResults"])) : (openBlock(), createElementBlock("nav", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(collections.value, (collection) => {
+						return openBlock(), createBlock(RequestSidebarItem_default, {
+							key: collection.uid,
+							isDraggable: unref(layout) !== "modal" && collection.info?.title !== "Drafts",
+							isDroppable: unref(isDroppable),
+							menuItem,
+							parentUids: [],
+							uid: collection.uid,
+							onNewTab: _cache[5] || (_cache[5] = (name, uid) => emit("newTab", {
+								name,
+								uid
+							})),
+							onOnDragEnd: unref(handleDragEnd),
+							onOpenMenu: _cache[6] || (_cache[6] = (item) => Object.assign(menuItem, item))
+						}, {
+							leftIcon: withCtx(() => [collection.info?.title === "Drafts" ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								class: "text-sidebar-c-2",
+								icon: "Scribble",
+								thickness: "2.25"
+							})) : (openBlock(), createBlock(unref(LibraryIcon), {
+								key: 1,
+								class: "text-sidebar-c-2 size-3.5 min-w-3.5 stroke-2",
+								src: collection["x-scalar-icon"] || "interface-content-folder"
+							}, null, 8, ["src"]))]),
+							_: 2
+						}, 1032, [
+							"isDraggable",
+							"isDroppable",
+							"menuItem",
+							"uid",
+							"onOnDragEnd"
+						]);
+					}), 128))]))], 34)
+				]),
+				button: withCtx(() => [createElementVNode("div", { class: normalizeClass({ "empty-sidebar-item": showGettingStarted.value }) }, [
+					showGettingStarted.value ? (openBlock(), createElementBlock("div", _hoisted_7, [createElementVNode("div", _hoisted_8, [createVNode(ScalarAsciiArt_default, {
+						art: unref(rabbit_default),
+						class: "rabbitsit font-bold"
+					}, null, 8, ["art"]), createVNode(ScalarAsciiArt_default, {
+						art: unref(rabbitjump_default),
+						class: "rabbitjump absolute top-0 left-0 font-bold"
+					}, null, 8, ["art"])]), _cache[11] || (_cache[11] = createElementVNode("div", { class: "mt-2 mb-2 text-center text-sm text-balance" }, [createElementVNode("b", { class: "font-medium" }, "Let's Get Started"), createElementVNode("p", { class: "mt-2" }, " Create request, folder, collection or import from OpenAPI/Postman ")], -1))])) : createCommentVNode("", true),
+					unref(layout) !== "modal" ? (openBlock(), createBlock(unref(ScalarButton), {
+						key: 1,
+						class: normalizeClass(["mb-1.5 hidden h-fit w-full p-1.5 opacity-0", { "flex opacity-100": showGettingStarted.value }]),
+						onClick: openCommandPaletteImport
+					}, {
+						default: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode(" Import Collection ", -1)])]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("", true),
+					unref(layout) !== "modal" ? (openBlock(), createBlock(SidebarButton_default, {
+						key: 2,
+						click: unref(events).commandPalette.emit,
+						hotkey: "K"
+					}, {
+						title: withCtx(() => [..._cache[13] || (_cache[13] = [createTextVNode(" Add Item ", -1)])]),
+						_: 1
+					}, 8, ["click"])) : createCommentVNode("", true)
+				], 2)]),
+				_: 2
+			}, [unref(layout) !== "modal" ? {
+				name: "header",
+				fn: withCtx(() => []),
+				key: "0"
+			} : void 0]), 1032, ["class"]), [[vShow, unref(isSidebarOpen)]]), unref(layout) !== "modal" && menuItem ? (openBlock(), createBlock(RequestSidebarItemMenu_default, {
+				key: 0,
+				menuItem,
+				onClearDrafts: handleClearDrafts,
+				onCloseMenu: _cache[9] || (_cache[9] = ($event) => menuItem.open = false),
+				onToggleWatchMode: handleToggleWatchMode
+			}, null, 8, ["menuItem"])) : createCommentVNode("", true)], 64);
+		};
+	}
+});
+//#endregion
+export { RequestSidebar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RequestSidebar.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestSidebar.vue.script.js","names":[],"sources":["../../../src/views/Request/RequestSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarSearchResultItem,\n  ScalarSearchResultList,\n  ScalarSidebarSearchInput,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useToasts } from '@scalar/use-toasts'\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  reactive,\n  ref,\n  useId,\n  watch,\n} from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport Rabbit from '@/assets/rabbit.ascii?raw'\nimport RabbitJump from '@/assets/rabbitjump.ascii?raw'\nimport { Sidebar } from '@/components'\nimport EnvironmentSelector from '@/components/EnvironmentSelector/EnvironmentSelector.vue'\nimport HttpMethod from '@/components/HttpMethod/HttpMethod.vue'\nimport ScalarAsciiArt from '@/components/ScalarAsciiArt.vue'\nimport { useSearch } from '@/components/Search/useSearch'\nimport SidebarButton from '@/components/Sidebar/SidebarButton.vue'\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport type { HotKeyEvent } from '@/libs'\nimport { PathId } from '@/routes'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\nimport { createInitialRequest } from '@/store/requests'\nimport { dragHandlerFactory } from '@/views/Request/handle-drag'\nimport RequestSidebarItemMenu from '@/views/Request/RequestSidebarItemMenu.vue'\nimport type { SidebarItem, SidebarMenuItem } from '@/views/Request/types'\n\nimport { WorkspaceDropdown } from './components'\nimport { isGettingStarted } from './RequestSection/helpers/getting-started'\nimport RequestSidebarItem from './RequestSidebarItem.vue'\n\nconst emit = defineEmits<{\n  (e: 'newTab', { name, uid }: { name: string; uid: string }): void\n  (e: 'clearDrafts'): void\n}>()\n\nconst { isSidebarOpen, setCollapsedSidebarFolder, toggleSidebarOpen } =\n  useSidebar()\nconst { layout } = useLayout()\n\nconst workspaceContext = useWorkspace()\nconst {\n  activeCollection,\n  activeWorkspaceCollections,\n  activeRequest,\n  activeWorkspaceRequests,\n  activeWorkspace,\n} = useActiveEntities()\nconst { findRequestParents, events, requestMutators, requests } =\n  workspaceContext\n\nconst { handleDragEnd, isDroppable } = dragHandlerFactory(\n  activeWorkspace,\n  workspaceContext,\n)\nconst { replace } = useRouter()\nconst openCommandPaletteImport = () => {\n  events.commandPalette.emit({\n    commandName: 'Import from OpenAPI/Swagger/Postman/cURL',\n  })\n}\nconst searchResultsId = useId()\nconst { toast } = useToasts()\n/** The currently selected sidebarMenuItem for the context menu */\nconst menuItem = reactive<SidebarMenuItem>({ open: false })\nconst isSearchVisible = ref(false)\n\n/** Watch to see if activeRequest changes and ensure we open any folders */\nwatch(\n  activeRequest,\n  (request) => {\n    if (!request) {\n      return\n    }\n\n    // Ensure the sidebar folders are open\n    findRequestParents(request).forEach((uid: string) =>\n      setCollapsedSidebarFolder(uid, true),\n    )\n  },\n  { immediate: true },\n)\n\nconst {\n  searchText,\n  searchResultsWithPlaceholderResults,\n  selectedSearchResult,\n  onSearchResultClick,\n  fuseSearch,\n  searchInputRef,\n  searchResultRefs,\n  navigateSearchResults,\n  selectSearchResult,\n} = useSearch()\n\nconst searchToggleRef = ref<HTMLButtonElement>()\n\n/** Handle hotkey events from the bus */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.toggleSidebar) {\n    toggleSidebarOpen()\n  }\n  if (event.focusRequestSearch) {\n    searchInputRef.value?.focus()\n  }\n}\n\nonMounted(() => events.hotKeys.on(handleHotKey))\n\n/**\n * Need to manually remove listener on unmount due to vueuse memory leak\n *\n * @see https://github.com/vueuse/vueuse/issues/3498#issuecomment-2055546566\n */\nonBeforeUnmount(() => {\n  events.hotKeys.off(handleHotKey)\n})\n\nconst handleToggleWatchMode = (item?: SidebarItem) => {\n  if (item?.documentUrl) {\n    item.watchMode = !item.watchMode\n    const currentCollection = activeWorkspaceCollections.value.find(\n      (collection: Collection) => collection.uid === item.entity.uid,\n    )\n    if (currentCollection) {\n      currentCollection.watchMode = item.watchMode\n    }\n  }\n}\n\nwatch(\n  () =>\n    activeWorkspaceCollections.value.map(\n      (collection: Collection) => collection.watchMode,\n    ),\n  (newWatchModes, oldWatchModes) => {\n    newWatchModes.forEach((newWatchMode: boolean, index: number) => {\n      if (\n        layout !== 'modal' &&\n        newWatchMode !== oldWatchModes[index] &&\n        activeWorkspaceCollections.value[index]?.info?.title !== 'Drafts' &&\n        activeWorkspaceCollections.value[index]\n      ) {\n        const currentCollection = activeWorkspaceCollections.value[index]\n        if (!currentCollection) {\n          return\n        }\n\n        const message = `${currentCollection.info?.title}: Watch Mode ${newWatchMode ? 'enabled' : 'disabled'}`\n        toast(message, 'info')\n      }\n    })\n  },\n)\n\n/** Screen reader label for the search input */\nconst srLabel = computed<string>(() => {\n  const results = searchResultsWithPlaceholderResults.value\n  if (!results.length) {\n    return 'No results found'\n  }\n\n  const result = results[selectedSearchResult.value]?.item\n  if (!result) {\n    return 'No result selected'\n  }\n\n  const resultsFoundLabel = searchText.value.length\n    ? `${results.length} result${results.length === 1 ? '' : 's'} found, `\n    : ''\n\n  const selectedResultDescription = `, HTTP Method ${result.httpVerb}, Path ${result.path}`\n\n  const selectedResultLabel = `${result.title} ${selectedResultDescription}`\n\n  return `${resultsFoundLabel}Selected: ${selectedResultLabel}`\n})\n\nconst handleClearDrafts = () => {\n  const draftCollection = activeWorkspaceCollections.value.find(\n    (collection: Collection) => collection.info?.title === 'Drafts',\n  )\n\n  if (draftCollection) {\n    draftCollection.requests.forEach((requestUid: string) => {\n      if (requests[requestUid]) {\n        requestMutators.delete(requests[requestUid], draftCollection.uid)\n      }\n    })\n  }\n\n  const hasRequests = activeWorkspaceRequests.value.length\n\n  // First request in the first collection\n  if (hasRequests) {\n    const firstCollection = activeWorkspaceCollections.value[0]\n    const firstRequest = firstCollection?.requests[0]\n\n    if (firstRequest) {\n      replace({\n        name: 'request',\n        params: {\n          [PathId.Request]: firstRequest,\n        },\n      })\n    }\n  }\n  // Create a new request and go to it\n  else {\n    const { request } = createInitialRequest()\n\n    if (draftCollection) {\n      requestMutators.add(request, draftCollection.uid)\n\n      replace({\n        name: 'request',\n        params: {\n          [PathId.Request]: request.uid,\n        },\n      })\n    }\n  }\n}\n\nwatch(isSearchVisible, (isVisible) => {\n  // If we're hiding the search, clear the text\n  if (!isVisible) {\n    searchText.value = ''\n  }\n})\n\nconst showGettingStarted = computed(() =>\n  isGettingStarted(\n    activeWorkspaceCollections.value,\n    activeWorkspaceRequests.value,\n    requests,\n  ),\n)\n\n/** We ensure in modal mode we only show the current requests collection */\nconst collections = computed(() => {\n  if (layout === 'modal' && activeCollection.value) {\n    return [activeCollection.value]\n  }\n  return activeWorkspaceCollections.value\n})\n\n/** Hide the search input if the text is empty */\nfunction handleBlur(e: FocusEvent) {\n  // We have to check the blur did not come from the search toggle button\n  // otherwise the search will show again form the click event\n  if (!searchText.value && e.relatedTarget !== searchToggleRef.value) {\n    isSearchVisible.value = false\n  }\n}\n</script>\n<template>\n  <Sidebar\n    v-show=\"isSidebarOpen\"\n    :class=\"[isSidebarOpen ? 'sidebar-active-width' : '']\">\n    <template\n      v-if=\"layout !== 'modal'\"\n      #header />\n    <template #content>\n      <div class=\"bg-b-1 sticky top-0 z-20 flex h-12 items-center px-3\">\n        <!-- Holds space for the sidebar toggle -->\n        <div\n          class=\"size-8\"\n          :class=\"{ 'xl:hidden': layout !== 'modal' }\" />\n        <WorkspaceDropdown v-if=\"layout !== 'modal'\" />\n        <span\n          v-if=\"layout !== 'modal'\"\n          class=\"text-c-3\">\n          /\n        </span>\n        <EnvironmentSelector v-if=\"layout !== 'modal'\" />\n        <button\n          ref=\"searchToggleRef\"\n          :aria-pressed=\"isSearchVisible\"\n          class=\"ml-auto\"\n          type=\"button\"\n          @click=\"isSearchVisible = !isSearchVisible\">\n          <span class=\"sr-only\">\n            {{ isSearchVisible ? 'Hide' : 'Show' }} search\n          </span>\n          <ScalarIcon\n            class=\"text-c-3 hover:bg-b-2 max-h-8 max-w-8 rounded-lg p-1.75 text-sm\"\n            icon=\"Search\" />\n        </button>\n      </div>\n      <div\n        v-if=\"isSearchVisible\"\n        class=\"search-button-fade sticky top-12 z-10 px-3 py-2.5 pt-0 focus-within:z-20\"\n        role=\"search\">\n        <ScalarSidebarSearchInput\n          ref=\"searchInputRef\"\n          v-model=\"searchText\"\n          autofocus\n          :aria-controls=\"searchResultsId\"\n          :label=\"srLabel\"\n          @input=\"fuseSearch\"\n          @keydown.down.stop=\"navigateSearchResults('down')\"\n          @keydown.enter.stop=\"selectSearchResult()\"\n          @keydown.up.stop=\"navigateSearchResults('up')\"\n          @blur=\"handleBlur\" />\n      </div>\n      <div\n        class=\"gap-1/2 flex flex-1 flex-col overflow-visible overflow-y-auto px-3 pt-0 pb-3\"\n        :class=\"[\n          {\n            'pb-14': layout !== 'modal',\n          },\n          {\n            'h-[calc(100%-273.5px)]': showGettingStarted,\n          },\n        ]\"\n        @dragenter.prevent\n        @dragover.prevent>\n        <template v-if=\"searchText\">\n          <ScalarSearchResultList\n            :id=\"searchResultsId\"\n            aria-label=\"Search Results\"\n            class=\"gap-px\"\n            :noResults=\"!searchResultsWithPlaceholderResults.length\">\n            <ScalarSearchResultItem\n              v-for=\"(entry, index) in searchResultsWithPlaceholderResults\"\n              :id=\"`#search-input-${entry.item.id}`\"\n              :key=\"entry.refIndex\"\n              :ref=\"(el) => (searchResultRefs[index] = el as HTMLElement)\"\n              :selected=\"selectedSearchResult === index\"\n              class=\"px-2\"\n              :href=\"entry.item.link\"\n              @click.prevent=\"onSearchResultClick(entry)\"\n              @focus=\"selectedSearchResult = index\">\n              {{ entry.item.title }}\n              <template #addon>\n                <span class=\"sr-only\">HTTP Method:</span>\n                <HttpMethod\n                  class=\"font-bold\"\n                  :method=\"entry.item.httpVerb ?? 'get'\" />\n              </template>\n            </ScalarSearchResultItem>\n          </ScalarSearchResultList>\n        </template>\n        <nav\n          v-else\n          class=\"contents\">\n          <!-- Collection -->\n          <RequestSidebarItem\n            v-for=\"collection in collections\"\n            :key=\"collection.uid\"\n            :isDraggable=\"\n              layout !== 'modal' && collection.info?.title !== 'Drafts'\n            \"\n            :isDroppable=\"isDroppable\"\n            :menuItem=\"menuItem\"\n            :parentUids=\"[]\"\n            :uid=\"collection.uid\"\n            @newTab=\"(name, uid) => emit('newTab', { name, uid })\"\n            @onDragEnd=\"handleDragEnd\"\n            @openMenu=\"(item) => Object.assign(menuItem, item)\">\n            <template #leftIcon>\n              <ScalarIcon\n                v-if=\"collection.info?.title === 'Drafts'\"\n                class=\"text-sidebar-c-2\"\n                icon=\"Scribble\"\n                thickness=\"2.25\" />\n              <LibraryIcon\n                v-else\n                class=\"text-sidebar-c-2 size-3.5 min-w-3.5 stroke-2\"\n                :src=\"\n                  collection['x-scalar-icon'] || 'interface-content-folder'\n                \" />\n            </template>\n          </RequestSidebarItem>\n        </nav>\n      </div>\n    </template>\n    <template #button>\n      <div\n        :class=\"{\n          'empty-sidebar-item': showGettingStarted,\n        }\">\n        <div\n          v-if=\"showGettingStarted\"\n          class=\"empty-sidebar-item-content px-2.5 py-2.5\">\n          <div class=\"rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]\">\n            <ScalarAsciiArt\n              :art=\"Rabbit\"\n              class=\"rabbitsit font-bold\" />\n            <ScalarAsciiArt\n              :art=\"RabbitJump\"\n              class=\"rabbitjump absolute top-0 left-0 font-bold\" />\n          </div>\n          <div class=\"mt-2 mb-2 text-center text-sm text-balance\">\n            <b class=\"font-medium\">Let's Get Started</b>\n            <p class=\"mt-2\">\n              Create request, folder, collection or import from OpenAPI/Postman\n            </p>\n          </div>\n        </div>\n        <ScalarButton\n          v-if=\"layout !== 'modal'\"\n          class=\"mb-1.5 hidden h-fit w-full p-1.5 opacity-0\"\n          :class=\"{\n            'flex opacity-100': showGettingStarted,\n          }\"\n          @click=\"openCommandPaletteImport\">\n          Import Collection\n        </ScalarButton>\n        <SidebarButton\n          v-if=\"layout !== 'modal'\"\n          :click=\"events.commandPalette.emit\"\n          hotkey=\"K\">\n          <template #title> Add Item </template>\n        </SidebarButton>\n      </div>\n    </template>\n  </Sidebar>\n\n  <!-- Menu -->\n  <RequestSidebarItemMenu\n    v-if=\"layout !== 'modal' && menuItem\"\n    :menuItem=\"menuItem\"\n    @clearDrafts=\"handleClearDrafts\"\n    @closeMenu=\"menuItem.open = false\"\n    @toggleWatchMode=\"handleToggleWatchMode\" />\n</template>\n<style scoped>\n.search-button-fade {\n  background: linear-gradient(\n    var(--scalar-background-1) 32px,\n    color-mix(in srgb, var(--scalar-background-1), transparent) 38px,\n    transparent\n  );\n}\n.empty-sidebar-item-content {\n  display: none;\n}\n.empty-sidebar-item .empty-sidebar-item-content {\n  display: block;\n}\n.rabbitjump {\n  opacity: 0;\n}\n.empty-sidebar-item:hover .rabbitjump {\n  opacity: 1;\n  animation: rabbitAnimation 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbitsit {\n  opacity: 0;\n  animation: rabbitAnimation2 0.5s steps(1) infinite;\n}\n.empty-sidebar-item:hover .rabbit-ascii {\n  animation: rabbitRun 8s infinite linear;\n}\n@keyframes rabbitRun {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  25% {\n    transform: translate3d(250px, 0, 0);\n  }\n  25.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  75% {\n    transform: translate3d(250px, 0, 0);\n  }\n  75.01% {\n    transform: translate3d(-250px, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n@keyframes rabbitAnimation {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n}\n@keyframes rabbitAnimation2 {\n  0%,\n  100% {\n    opacity: 0;\n  }\n  50% {\n    opacity: 1;\n    transform: translate3d(0, -8px, 0);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/views/Request/RequestSidebarItem.vue.js

@@ -0,0 +1,10 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import RequestSidebarItem_vue_vue_type_script_setup_true_lang_default from "./RequestSidebarItem.vue.script.js";
+/* empty css                                 */
+/* empty css                                   */
+//#region src/views/Request/RequestSidebarItem.vue
+var RequestSidebarItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestSidebarItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b2f06757"]]);
+//#endregion
+export { RequestSidebarItem_default as default };
+
+//# sourceMappingURL=RequestSidebarItem.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RequestSidebarItem.vue.js","names":[],"sources":["../../../src/views/Request/RequestSidebarItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarSidebarGroupToggle,\n  ScalarTooltip,\n} from '@scalar/components'\nimport {\n  Draggable,\n  type DraggableProps,\n  type DraggingItem,\n  type HoveredItem,\n} from '@scalar/draggable'\nimport type { Collection, Request } from '@scalar/oas-utils/entities/spec'\nimport { shouldIgnoreEntity } from '@scalar/oas-utils/helpers'\nimport { computed, nextTick, ref } from 'vue'\nimport { RouterLink, useRouter } from 'vue-router'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { useLayout } from '@/hooks/useLayout'\nimport { useSidebar } from '@/hooks/useSidebar'\nimport { getModifiers } from '@/libs'\nimport { PathId } from '@/routes'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\nimport type { SidebarItem, SidebarMenuItem } from '@/views/Request/types'\n\nconst {\n  isDraggable = false,\n  isDroppable = false,\n  parentUids,\n  uid,\n  menuItem,\n} = defineProps<{\n  /**\n   * Toggle dragging on and off\n   *\n   * @default false\n   */\n  isDraggable?: boolean\n  /**\n   * Prevents items from being hovered and dropped into\n   *\n   * @default false\n   */\n  isDroppable?: DraggableProps['isDroppable']\n  /** Both indicate the level and provide a way to traverse upwards */\n  parentUids: string[]\n  /** uid of a Collection, Tag, Request or RequestExample */\n  uid: string\n  /** To keep track of the menu being open */\n  menuItem: SidebarMenuItem\n}>()\n\nconst emit = defineEmits<{\n  onDragEnd: [draggingItem: DraggingItem, hoveredItem: HoveredItem]\n  newTab: [name: string, uid: string]\n  openMenu: [menuItem: SidebarMenuItem]\n}>()\n\ndefineSlots<{\n  leftIcon(): void\n}>()\n\nconst { activeCollection, activeRequest, activeRouterParams, activeWorkspace } =\n  useActiveEntities()\nconst {\n  collections,\n  tags,\n  requests,\n  requestExamples,\n  collectionMutators,\n  tagMutators,\n  requestMutators,\n  requestExampleMutators,\n  events,\n} = useWorkspace()\nconst router = useRouter()\nconst { collapsedSidebarFolders, toggleSidebarFolder } = useSidebar()\nconst { layout } = useLayout()\n\n/** Normalize properties across different types for easy consumption */\nconst item = computed<SidebarItem>(() => {\n  const collection = collections[uid]\n  const tag = tags[uid]\n  const request = requests[uid]\n  const requestExample = requestExamples[uid]\n\n  if (collection) {\n    return {\n      title: collection.info?.title || 'Untitled Collection',\n      entity: collection,\n      resourceTitle: 'Collection',\n      children: collection.children,\n      icon: collection['x-scalar-icon'],\n      documentUrl: collection.documentUrl,\n      watchMode: collection.watchMode,\n      to:\n        collection.uid && collection?.info?.title !== 'Drafts'\n          ? {\n              name: 'collection',\n              params: {\n                [PathId.Workspace]: activeWorkspace.value?.uid,\n                [PathId.Collection]: collection.uid,\n              },\n            }\n          : undefined,\n      warning:\n        \"This cannot be undone. You're about to delete the collection and all folders and requests inside it.\",\n      edit: (name: string, icon?: string) => {\n        collectionMutators.edit(collection.uid, 'info.title', name)\n        if (icon) {\n          collectionMutators.edit(collection.uid, 'x-scalar-icon', icon)\n        }\n      },\n      delete: () => {\n        if (activeWorkspace.value) {\n          collectionMutators.delete(collection, activeWorkspace.value)\n        }\n      },\n    }\n  }\n\n  if (tag) {\n    return {\n      title: tag.name,\n      entity: tag,\n      resourceTitle: 'Tag',\n      children: tag.children,\n      warning:\n        \"This cannot be undone. You're about to delete the tag and all requests inside it\",\n      edit: (name: string) => tagMutators.edit(tag.uid, 'name', name),\n      delete: () =>\n        parentUids[0] &&\n        tagMutators.delete(tag, parentUids[0] as Collection['uid']),\n    }\n  }\n\n  if (request) {\n    return {\n      title: request.summary ?? request.path,\n      to: {\n        name: 'request',\n        params: {\n          workspace: activeWorkspace.value?.uid,\n          request: request.uid,\n        },\n      },\n      method: request.method,\n      entity: request,\n      resourceTitle: 'Request',\n      warning: \"This cannot be undone. You're about to delete the request.\",\n      children: request.examples.slice(1),\n      edit: (name: string) =>\n        requestMutators.edit(request.uid, 'summary', name),\n      delete: () =>\n        parentUids[0] &&\n        requestMutators.delete(request, parentUids[0] as Collection['uid']),\n    }\n  }\n\n  if (requestExample?.requestUid) {\n    return {\n      title: requestExample.name,\n      to: {\n        name: 'request.examples',\n        params: {\n          workspace: activeWorkspace.value?.uid,\n          request: requestExample.requestUid,\n          examples: requestExample.uid,\n        },\n      },\n      method: requests[requestExample.requestUid]?.method,\n      entity: requestExample,\n      resourceTitle: 'Example',\n      warning:\n        \"This cannot be undone. You're about to delete the example from the request.\",\n      children: [],\n      edit: (name: string) =>\n        requestExampleMutators.edit(requestExample.uid, 'name', name),\n      delete: () => requestExampleMutators.delete(requestExample),\n    }\n  }\n\n  // Catch all item which we should never see\n  return {\n    title: 'Unknown',\n    entity: {\n      uid: '',\n      type: 'unknown',\n    },\n    resourceTitle: 'Unknown',\n    children: [],\n    edit: () => null,\n    delete: () => null,\n  } satisfies SidebarItem\n})\n\n/** Checks to see if it is a draft collection with the title of Drafts */\nconst isDraftCollection = computed(\n  () =>\n    item.value.entity.type === 'collection' && item.value.title === 'Drafts',\n)\n\nconst highlightClasses = 'hover:bg-sidebar-b-active indent-padding-left'\n\n/** Due to the nesting, we need a dynamic left offset for hover and active backgrounds */\nconst leftOffset = computed(() => {\n  if (!parentUids.length) {\n    return '12px'\n  }\n  if (layout === 'modal') {\n    return `${(parentUids.length - 1) * 12}px`\n  }\n  return `${parentUids.length * 12}px`\n})\nconst paddingOffset = computed(() => {\n  if (!parentUids.length) {\n    return '0px'\n  }\n  if (layout === 'modal') {\n    return `${(parentUids.length - 1) * 12}px`\n  }\n  return `${parentUids.length * 12}px`\n})\n\n/**\n * Show folders if they are open,\n * show examples if there are more than one and the request is active\n */\nconst showChildren = computed(\n  () =>\n    collapsedSidebarFolders[uid] ||\n    (activeRequest.value?.uid === uid &&\n      (item.value.entity as Request).examples.length > 1),\n)\n\n/** Since we have exact routing, we should check if the default request is active */\nconst isDefaultActive = computed(\n  () =>\n    typeof router.currentRoute.value.name === 'string' &&\n    router.currentRoute.value.name.startsWith('request') &&\n    activeRouterParams.value[PathId.Request] === 'default' &&\n    activeRequest.value?.uid === uid,\n)\n\n/** The draggable component */\nconst draggableRef = ref<{\n  draggingItem: DraggingItem\n  hoveredItem: HoveredItem\n} | null>(null)\n\n/** Calculate offsets which change a little depending on whats being dragged and hovered over */\nconst getDraggableOffsets = computed(() => {\n  let ceiling = 0.5\n  let floor = 0.5\n\n  if (!draggableRef.value) {\n    return { ceiling, floor }\n  }\n  const { draggingItem } = draggableRef.value\n\n  // If hovered over is collection && dragging is not a collection\n  if (\n    !collections[draggingItem?.id] &&\n    item.value.entity.type === 'collection'\n  ) {\n    ceiling = 1\n    floor = 0\n  }\n  // Has children but is not a request or a collection\n  else if (item.value.entity.type === 'tag') {\n    ceiling = 0.8\n    floor = 0.2\n  }\n\n  return { ceiling, floor }\n})\n\n/** Guard to check if an element is able to be dropped on */\nconst _isDroppable = (draggingItem: DraggingItem, hoveredItem: HoveredItem) => {\n  // Cannot drop in read only mode\n  if (layout === 'modal') {\n    return false\n  }\n  // RequestExamples cannot be dropped on\n  if (requestExamples[hoveredItem.id]) {\n    return false\n  }\n  // Collection cannot be dropped into another collection\n  if (collections[draggingItem.id]) {\n    return false\n  }\n\n  return true\n}\n\nconst handleNavigation = (event: KeyboardEvent, _item: SidebarItem) => {\n  if (event) {\n    const modifier = getModifiers(['default'])\n    const isModifierPressed = modifier.some((key) => event[key])\n\n    if (isModifierPressed) {\n      emit('newTab', _item.title || '', _item.entity.uid)\n    } else if (_item.to) {\n      router.push(_item.to)\n    }\n\n    nextTick(() => events.focusAddressBar.emit())\n  }\n}\n\nfunction addRequest(entityUid: string) {\n  const collectionUid = parentUids[0]\n    ? collections[parentUids[0]]?.uid || ''\n    : entityUid\n\n  // If the entity is a tag, add the tag name to the request\n  const requestData =\n    parentUids[0] && tags[entityUid]?.name\n      ? { tags: [tags[entityUid].name] }\n      : {}\n\n  const newRequest = requestMutators.add(\n    requestData,\n    collectionUid as Collection['uid'],\n  )\n\n  if (newRequest) {\n    router.push({\n      name: 'request',\n      params: {\n        workspace: activeWorkspace.value?.uid,\n        request: newRequest.uid,\n      },\n    })\n\n    // Focus the address bar\n    events.hotKeys.emit({\n      focusAddressBar: new KeyboardEvent('keydown', { key: 'l' }),\n    })\n  }\n}\n\nconst watchIconColor = computed(() => {\n  const { uid: _uid, watchModeStatus } = activeCollection.value || {}\n\n  if (_uid !== item.value.entity.uid) {\n    return 'text-c-3'\n  }\n  if (watchModeStatus === 'WATCHING') {\n    return 'text-c-1'\n  }\n  if (watchModeStatus === 'ERROR') {\n    return 'text-red'\n  }\n  return 'text-c-3'\n})\n\nconst hasDraftRequests = computed(() => {\n  return (\n    item.value.title === 'Drafts' &&\n    layout !== 'modal' &&\n    item.value.children.length > 0\n  )\n})\n\n/**\n * Check if the item should be shown.\n * This is used to hide items that are marked as hidden/internal.\n */\nconst shouldShowItem = computed(() => {\n  const request = requests[uid]\n  if (request) {\n    return !shouldIgnoreEntity(request)\n  }\n\n  const tag = tags[uid]\n  if (tag) {\n    return !shouldIgnoreEntity(tag)\n  }\n\n  return true\n})\n</script>\n\n<template>\n  <li\n    v-if=\"shouldShowItem\"\n    class=\"relative flex flex-row\"\n    :class=\"[\n      (layout === 'modal' && parentUids.length > 1) ||\n      (layout !== 'modal' && parentUids.length)\n        ? 'before:bg-border indent-border-line-offset mb-[.5px] before:pointer-events-none before:absolute before:top-0 before:left-[calc(.75rem_+_.5px)] before:z-1 before:h-[calc(100%_+_.5px)] before:w-[.5px] last:mb-0 last:before:h-full'\n        : '',\n    ]\">\n    <Draggable\n      :id=\"item.entity.uid\"\n      ref=\"draggableRef\"\n      :ceiling=\"getDraggableOffsets.ceiling\"\n      class=\"gap-1/2 flex flex-1 flex-col text-base/5\"\n      :floor=\"getDraggableOffsets.floor\"\n      :isDraggable=\"isDraggable\"\n      :isDroppable=\"isDroppable\"\n      :parentIds=\"parentUids\"\n      @onDragEnd=\"(...args) => $emit('onDragEnd', ...args)\">\n      <!-- Request -->\n      <RouterLink\n        v-if=\"\n          (item.entity.type === 'request' ||\n            item.entity.type === 'requestExample') &&\n          item.to\n        \"\n        v-slot=\"{ isExactActive }\"\n        class=\"group no-underline\"\n        :to=\"item.to\"\n        @click.prevent=\"\n          (event: KeyboardEvent) => handleNavigation(event, item)\n        \">\n        <div\n          class=\"relative flex min-h-8 w-full cursor-pointer flex-row items-start justify-between gap-0.5 rounded py-1.5 pr-2\"\n          :class=\"[\n            highlightClasses,\n            isExactActive || isDefaultActive\n              ? 'bg-sidebar-b-active text-sidebar-c-active font-medium transition-none'\n              : 'text-sidebar-c-2',\n          ]\">\n          <span class=\"line-clamp-1 w-full pl-2 break-all\">\n            {{ item.title || 'Untitled' }}\n          </span>\n          <div class=\"flex flex-row items-center gap-1\">\n            <!-- Menu -->\n            <div class=\"relative\">\n              <ScalarButton\n                v-if=\"layout !== 'modal'\"\n                class=\"hover:bg-b-3 hidden aspect-square h-fit px-0.5 py-0 opacity-0 group-hover:flex group-hover:opacity-100 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n                :class=\"{\n                  flex:\n                    menuItem?.item?.entity.uid === item.entity.uid &&\n                    menuItem.open,\n                }\"\n                size=\"sm\"\n                type=\"button\"\n                variant=\"ghost\"\n                @click.stop.prevent=\"\n                  (ev: MouseEvent) =>\n                    $emit('openMenu', {\n                      item,\n                      parentUids,\n                      targetRef: ev.currentTarget as HTMLButtonElement,\n                      open: !menuItem.open,\n                    })\n                \">\n                <ScalarIcon\n                  icon=\"Ellipses\"\n                  size=\"md\" />\n              </ScalarButton>\n            </div>\n            <span class=\"flex items-start\">\n              &hairsp;\n              <span class=\"sr-only\">HTTP Method:</span>\n              <HttpMethod\n                v-if=\"item.method\"\n                class=\"font-bold\"\n                :method=\"item.method\" />\n            </span>\n          </div>\n        </div>\n      </RouterLink>\n\n      <!-- Collection -->\n      <RouterLink\n        v-else-if=\"\n          (layout !== 'modal' || parentUids.length) &&\n          item.entity.type === 'collection' &&\n          item.to\n        \"\n        :aria-expanded=\"Boolean(collapsedSidebarFolders[item.entity.uid])\"\n        class=\"hover:bg-b-2 group relative flex w-full flex-row justify-start gap-1.5 rounded p-1.5 no-underline focus-visible:z-10\"\n        :class=\"[\n          highlightClasses,\n          {\n            'bg-sidebar-b-active text-sidebar-c-active transition-none':\n              typeof router.currentRoute.value.name === 'string' &&\n              router.currentRoute.value.name.startsWith('collection') &&\n              router.currentRoute.value.params[PathId.Collection] ===\n                item.entity.uid,\n            'text-c-2': item.title === 'Untitled Collection',\n          },\n        ]\"\n        :to=\"item.to\">\n        <span\n          class=\"flex h-5 max-w-[14px] shrink-0 items-center justify-center\">\n          <slot name=\"leftIcon\" />\n          &hairsp;\n        </span>\n        <div class=\"flex flex-1 flex-row justify-between font-medium\">\n          <span class=\"line-clamp-1 w-full text-left break-all\">\n            {{ item.title }}\n          </span>\n          <div class=\"relative flex h-fit items-center justify-end gap-0.5\">\n            <div\n              class=\"items-center gap-px opacity-0 group-hover:flex group-hover:opacity-100 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n              :class=\"{\n                flex: menuItem.open,\n                hidden:\n                  !menuItem.open ||\n                  menuItem.item?.entity.uid !== item.entity.uid,\n              }\">\n              <ScalarButton\n                v-if=\"\n                  (layout !== 'modal' && !isDraftCollection) ||\n                  (isDraftCollection && hasDraftRequests)\n                \"\n                class=\"hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n                size=\"sm\"\n                variant=\"ghost\"\n                @click.stop.prevent=\"\n                  (ev: MouseEvent) =>\n                    $emit('openMenu', {\n                      item,\n                      parentUids,\n                      targetRef: (ev.currentTarget as HTMLElement)\n                        ?.parentNode as HTMLButtonElement,\n                      open: true,\n                    })\n                \">\n                <ScalarIcon\n                  icon=\"Ellipses\"\n                  size=\"md\" />\n              </ScalarButton>\n              <ScalarButton\n                v-if=\"layout !== 'modal'\"\n                class=\"hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n                size=\"sm\"\n                variant=\"ghost\"\n                @click.stop.prevent=\"addRequest(item.entity.uid)\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"md\"\n                  thickness=\"2\" />\n              </ScalarButton>\n            </div>\n            <ScalarTooltip\n              v-if=\"item.watchMode\"\n              :content=\"`Watching: ${item.documentUrl}`\"\n              :offset=\"12\"\n              placement=\"right\">\n              <button\n                class=\"flex items-center justify-center\"\n                type=\"button\">\n                <ScalarIcon\n                  class=\"ml-0.5 text-sm\"\n                  :class=\"watchIconColor\"\n                  icon=\"Watch\"\n                  size=\"md\"\n                  thickness=\"2\" />\n              </button>\n            </ScalarTooltip>\n            <span\n              class=\"flex cursor-pointer items-center justify-center\"\n              @click.stop.prevent=\"toggleSidebarFolder(item.entity.uid)\">\n              <ScalarSidebarGroupToggle\n                class=\"text-c-3 hover:text-c-1 shrink-0\"\n                :open=\"Boolean(collapsedSidebarFolders[item.entity.uid])\" />\n            </span>\n          </div>\n        </div>\n      </RouterLink>\n\n      <!-- Tag -->\n      <button\n        v-else-if=\"layout !== 'modal' || parentUids.length\"\n        :aria-expanded=\"Boolean(collapsedSidebarFolders[item.entity.uid])\"\n        class=\"hover:bg-b-2 group relative flex w-full flex-row justify-start gap-1.5 rounded p-1.5 focus-visible:z-10\"\n        :class=\"[highlightClasses]\"\n        type=\"button\"\n        @click=\"toggleSidebarFolder(item.entity.uid)\">\n        <span\n          class=\"flex h-5 max-w-[14px] shrink-0 items-center justify-center\">\n          <slot name=\"leftIcon\" />\n          &hairsp;\n        </span>\n        <div class=\"flex flex-1 flex-row justify-between\">\n          <span class=\"line-clamp-1 w-full text-left font-medium break-all\">\n            {{ item.title }}\n          </span>\n          <div class=\"relative flex h-fit items-center justify-end gap-0.5\">\n            <div\n              class=\"items-center gap-px opacity-0 group-hover:flex group-hover:opacity-100 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n              :class=\"{\n                flex: menuItem.open,\n                hidden:\n                  !menuItem.open ||\n                  menuItem.item?.entity.uid !== item.entity.uid,\n              }\">\n              <ScalarButton\n                v-if=\"\n                  (layout !== 'modal' && !isDraftCollection) ||\n                  (isDraftCollection && hasDraftRequests)\n                \"\n                class=\"hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n                size=\"sm\"\n                variant=\"ghost\"\n                @click.stop.prevent=\"\n                  (ev: MouseEvent) =>\n                    $emit('openMenu', {\n                      item,\n                      parentUids,\n                      targetRef: (ev.currentTarget as HTMLElement)\n                        ?.parentNode as HTMLButtonElement,\n                      open: true,\n                    })\n                \">\n                <ScalarIcon\n                  icon=\"Ellipses\"\n                  size=\"md\" />\n              </ScalarButton>\n              <ScalarButton\n                v-if=\"layout !== 'modal'\"\n                class=\"hover:bg-b-3 hover:text-c-1 aspect-square h-fit px-0.5 py-0 group-focus-visible:opacity-100 group-has-[:focus-visible]:opacity-100\"\n                size=\"sm\"\n                variant=\"ghost\"\n                @click.stop.prevent=\"addRequest(item.entity.uid)\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"md\"\n                  thickness=\"2\" />\n              </ScalarButton>\n            </div>\n            <ScalarTooltip\n              v-if=\"item.watchMode\"\n              content=\"Watching: {{ item.documentUrl }}\"\n              :offset=\"12\"\n              placement=\"right\">\n              <button\n                class=\"flex items-center justify-center\"\n                type=\"button\">\n                <ScalarIcon\n                  class=\"ml-0.5 text-sm\"\n                  :class=\"watchIconColor\"\n                  icon=\"Watch\"\n                  size=\"md\"\n                  thickness=\"2\" />\n              </button>\n            </ScalarTooltip>\n            <span\n              class=\"flex cursor-pointer items-center justify-center\"\n              @click.stop.prevent=\"toggleSidebarFolder(item.entity.uid)\">\n              <ScalarSidebarGroupToggle\n                class=\"text-c-3 hover:text-c-1 shrink-0\"\n                :open=\"Boolean(collapsedSidebarFolders[item.entity.uid])\" />\n            </span>\n          </div>\n        </div>\n      </button>\n\n      <!-- Children -->\n      <ul v-if=\"showChildren\">\n        <!-- We never want to show the first example -->\n        <RequestSidebarItem\n          v-for=\"childUid in item.children\"\n          :key=\"childUid\"\n          :isDraggable=\"!requestExamples[childUid]\"\n          :isDroppable=\"_isDroppable\"\n          :menuItem=\"menuItem\"\n          :parentUids=\"[...parentUids, uid]\"\n          :uid=\"childUid\"\n          @newTab=\"(name, uid) => $emit('newTab', name, uid)\"\n          @onDragEnd=\"(...args) => $emit('onDragEnd', ...args)\"\n          @openMenu=\"(item) => $emit('openMenu', item)\" />\n        <ScalarButton\n          v-if=\"item.children.length === 0\"\n          class=\"text-c-1 hover:bg-b-2 flex h-8 w-full justify-start gap-1.5 py-0 text-xs\"\n          :class=\"parentUids.length ? 'pl-9' : ''\"\n          variant=\"ghost\"\n          @click=\"addRequest(item.entity.uid)\">\n          <ScalarIcon\n            icon=\"Add\"\n            size=\"sm\" />\n          <span>Add Request</span>\n        </ScalarButton>\n      </ul>\n    </Draggable>\n  </li>\n</template>\n<style>\n@import '@scalar/draggable/style.css';\n</style>\n<style scoped>\n.indent-border-line-offset:before {\n  left: v-bind(leftOffset);\n}\n.indent-padding-left {\n  padding-left: calc(v-bind(paddingOffset) + 6px);\n}\n.sidebar-folderitem :deep(.ellipsis-position) {\n  right: 6px;\n  transform: none;\n}\n</style>\n"],"mappings":""}