@scalar/api-client 2.38.4 → 2.39.0

package/dist/components/Sidebar/SidebarListElementActions.vue.script.js

@@ -0,0 +1,97 @@
+import DeleteSidebarListElement_default from "./Actions/DeleteSidebarListElement.vue.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, unref, withCtx, withModifiers } from "vue";
+import { ScalarIcon, ScalarModal, useModal } from "@scalar/components";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
+//#region src/components/Sidebar/SidebarListElementActions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "absolute right-1 flex opacity-0 group-hover:opacity-100" };
+var ModalAction = /* @__PURE__ */ function(ModalAction) {
+	ModalAction["Delete"] = "Delete";
+	ModalAction["None"] = "None";
+	return ModalAction;
+}(ModalAction || {});
+var SidebarListElementActions_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarListElementActions",
+	props: {
+		variable: {},
+		warningMessage: {},
+		isCopyable: { type: Boolean },
+		isDeletable: { type: Boolean },
+		isRenameable: { type: Boolean }
+	},
+	emits: ["delete", "rename"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const currentAction = ref({
+			action: ModalAction.None,
+			name: ""
+		});
+		const modalState = useModal();
+		const { copyToClipboard } = useClipboard();
+		function startActionFlow(action) {
+			currentAction.value = {
+				action,
+				name: __props.variable.name
+			};
+			modalState.show();
+		}
+		function handleModalClose() {
+			modalState.hide();
+			currentAction.value = {
+				action: ModalAction.None,
+				name: ""
+			};
+		}
+		function handleDelete(id) {
+			emit("delete", id);
+			handleModalClose();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [
+				__props.isCopyable ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]",
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(copyToClipboard)(__props.variable.name))
+				}, [createVNode(unref(ScalarIcon), {
+					class: "h-3 w-3",
+					icon: "Clipboard"
+				})])) : createCommentVNode("", true),
+				__props.isRenameable ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]",
+					type: "button",
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("rename", __props.variable.uid))
+				}, [createVNode(unref(ScalarIcon), {
+					class: "h-3 w-3",
+					icon: "Edit"
+				})])) : createCommentVNode("", true),
+				!__props.variable.isDefault && __props.isDeletable ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					class: "text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-1",
+					type: "button",
+					onClick: _cache[2] || (_cache[2] = withModifiers(($event) => startActionFlow(ModalAction.Delete), ["prevent"]))
+				}, [createVNode(unref(ScalarIcon), {
+					class: "h-3.5 w-3.5",
+					icon: "Close"
+				})])) : createCommentVNode("", true)
+			]), createVNode(unref(ScalarModal), {
+				size: "sm",
+				state: unref(modalState),
+				title: `${currentAction.value.action} ${currentAction.value.name}`
+			}, {
+				default: withCtx(() => [currentAction.value.action === ModalAction.Delete ? (openBlock(), createBlock(DeleteSidebarListElement_default, {
+					key: 0,
+					variableName: currentAction.value.name,
+					warningMessage: __props.warningMessage,
+					onClose: handleModalClose,
+					onDelete: _cache[3] || (_cache[3] = ($event) => handleDelete(__props.variable.uid))
+				}, null, 8, ["variableName", "warningMessage"])) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["state", "title"])], 64);
+		};
+	}
+});
+//#endregion
+export { SidebarListElementActions_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarListElementActions.vue.script.js.map

package/dist/components/Sidebar/SidebarListElementActions.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarListElementActions.vue.script.js","names":[],"sources":["../../../src/components/Sidebar/SidebarListElementActions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIcon, ScalarModal, useModal } from '@scalar/components'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { ref } from 'vue'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\n\nconst { variable } = defineProps<{\n  variable: {\n    uid: string\n    name: string\n    isDefault: boolean\n  }\n  warningMessage: string | undefined\n  isCopyable?: boolean\n  isDeletable?: boolean\n  isRenameable?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'delete', id: string): void\n  (e: 'rename', id: string): void\n}>()\n\nenum ModalAction {\n  Delete = 'Delete',\n  None = 'None',\n}\n\nconst currentAction = ref({ action: ModalAction.None, name: '' })\n\nconst modalState = useModal()\nconst { copyToClipboard } = useClipboard()\n\nfunction startActionFlow(action: ModalAction) {\n  currentAction.value = { action, name: variable.name }\n  modalState.show()\n}\n\nfunction handleModalClose() {\n  modalState.hide()\n  currentAction.value = { action: ModalAction.None, name: '' }\n}\n\nfunction handleDelete(id: string) {\n  emit('delete', id)\n  handleModalClose()\n}\n</script>\n<template>\n  <div class=\"absolute right-1 flex opacity-0 group-hover:opacity-100\">\n    <button\n      v-if=\"isCopyable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"copyToClipboard(variable.name)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Clipboard\" />\n    </button>\n    <button\n      v-if=\"isRenameable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-[5px]\"\n      type=\"button\"\n      @click=\"emit('rename', variable.uid)\">\n      <ScalarIcon\n        class=\"h-3 w-3\"\n        icon=\"Edit\" />\n    </button>\n    <button\n      v-if=\"!variable.isDefault && isDeletable\"\n      class=\"text-c-3 hover:bg-b-3 hover:text-c-1 rounded p-1\"\n      type=\"button\"\n      @click.prevent=\"startActionFlow(ModalAction.Delete)\">\n      <ScalarIcon\n        class=\"h-3.5 w-3.5\"\n        icon=\"Close\" />\n    </button>\n  </div>\n  <ScalarModal\n    size=\"sm\"\n    :state=\"modalState\"\n    :title=\"`${currentAction.action} ${currentAction.name}`\">\n    <DeleteSidebarListElement\n      v-if=\"currentAction.action === ModalAction.Delete\"\n      :variableName=\"currentAction.name\"\n      :warningMessage=\"warningMessage\"\n      @close=\"handleModalClose\"\n      @delete=\"handleDelete(variable.uid)\" />\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;AAwBA,IAAK,cAAL,yBAAA,aAAA;AACE,aAAA,YAAA;AACA,aAAA,UAAA;;EAFG,eAAA,EAAA,CAGL;;;;;;;;;;;;EARA,MAAM,OAAO;EAUb,MAAM,gBAAgB,IAAI;GAAE,QAAQ,YAAY;GAAM,MAAM;GAAI,CAAA;EAEhE,MAAM,aAAa,UAAS;EAC5B,MAAM,EAAE,oBAAoB,cAAa;EAEzC,SAAS,gBAAgB,QAAqB;AAC5C,iBAAc,QAAQ;IAAE;IAAQ,MAAM,QAAA,SAAS;IAAK;AACpD,cAAW,MAAK;;EAGlB,SAAS,mBAAmB;AAC1B,cAAW,MAAK;AAChB,iBAAc,QAAQ;IAAE,QAAQ,YAAY;IAAM,MAAM;IAAG;;EAG7D,SAAS,aAAa,IAAY;AAChC,QAAK,UAAU,GAAE;AACjB,qBAAiB;;;2DAIjB,mBA4BM,OA5BN,YA4BM;IA1BI,QAAA,cAAA,WAAA,EADR,mBAQS,UAAA;;KANP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,gBAAe,CAAC,QAAA,SAAS,KAAI;QACrC,YAEqB,MAAA,WAAA,EAAA;KADnB,OAAM;KACN,MAAK;;IAGD,QAAA,gBAAA,WAAA,EADR,mBAQS,UAAA;;KANP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,QAAA,SAAS,IAAG;QACnC,YAEgB,MAAA,WAAA,EAAA;KADd,OAAM;KACN,MAAK;;KAGA,QAAA,SAAS,aAAa,QAAA,eAAA,WAAA,EAD/B,mBAQS,UAAA;;KANP,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAU,gBAAgB,YAAY,OAAM,EAAA,CAAA,UAAA,CAAA;QAClD,YAEiB,MAAA,WAAA,EAAA;KADf,OAAM;KACN,MAAK;;OAGX,YAUc,MAAA,YAAA,EAAA;IATZ,MAAK;IACJ,OAAO,MAAA,WAAU;IACjB,OAAK,GAAK,cAAA,MAAc,OAAM,GAAI,cAAA,MAAc;;2BAMR,CAJjC,cAAA,MAAc,WAAW,YAAY,UAAA,WAAA,EAD7C,YAKyC,kCAAA;;KAHtC,cAAc,cAAA,MAAc;KAC5B,gBAAgB,QAAA;KAChB,SAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,aAAa,QAAA,SAAS,IAAG"}

package/dist/components/Sidebar/SidebarToggle.vue.js

@@ -0,0 +1,7 @@
+import SidebarToggle_vue_vue_type_script_setup_true_lang_default from "./SidebarToggle.vue.script.js";
+//#region src/components/Sidebar/SidebarToggle.vue
+var SidebarToggle_default = SidebarToggle_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SidebarToggle_default as default };
+
+//# sourceMappingURL=SidebarToggle.vue.js.map

package/dist/components/Sidebar/SidebarToggle.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.vue.js","names":[],"sources":["../../../src/components/Sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useSidebar } from '@/hooks/useSidebar'\n\nconst { isSidebarOpen, toggleSidebarOpen } = useSidebar()\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded-lg p-2\"\n    type=\"button\"\n    @click=\"toggleSidebarOpen\">\n    <span class=\"sr-only\">{{ isSidebarOpen ? 'Hide' : 'Show' }} sidebar</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":""}

package/dist/components/Sidebar/SidebarToggle.vue.script.js

@@ -0,0 +1,47 @@
+import { useSidebar } from "../../hooks/useSidebar.js";
+import { createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref } from "vue";
+//#region src/components/Sidebar/SidebarToggle.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-pressed"];
+var _hoisted_2 = { class: "sr-only" };
+var _hoisted_3 = {
+	class: "size-4",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+var _hoisted_4 = { "clip-path": "url(#mask)" };
+var SidebarToggle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarToggle",
+	setup(__props) {
+		const { isSidebarOpen, toggleSidebarOpen } = useSidebar();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				"aria-pressed": unref(isSidebarOpen),
+				class: "scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded-lg p-2",
+				type: "button",
+				onClick: _cache[0] || (_cache[0] = (...args) => unref(toggleSidebarOpen) && unref(toggleSidebarOpen)(...args))
+			}, [createElementVNode("span", _hoisted_2, toDisplayString(unref(isSidebarOpen) ? "Hide" : "Show") + " sidebar", 1), (openBlock(), createElementBlock("svg", _hoisted_3, [
+				_cache[1] || (_cache[1] = createElementVNode("defs", null, [createElementVNode("clipPath", { id: "mask" }, [createElementVNode("path", {
+					"clip-rule": "evenodd",
+					d: "M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z"
+				})])], -1)),
+				createElementVNode("g", _hoisted_4, [createElementVNode("path", {
+					class: normalizeClass(["transition-transform duration-300", unref(isSidebarOpen) ? "translate-x-0" : "-translate-x-1/2"]),
+					d: "M1 3.2h8v17.5H1z",
+					fill: "currentColor"
+				}, null, 2)]),
+				_cache[2] || (_cache[2] = createElementVNode("path", {
+					d: "M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5",
+					stroke: "currentColor",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"stroke-width": "2"
+				}, null, -1))
+			]))], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SidebarToggle_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarToggle.vue.script.js.map

package/dist/components/Sidebar/SidebarToggle.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.vue.script.js","names":[],"sources":["../../../src/components/Sidebar/SidebarToggle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useSidebar } from '@/hooks/useSidebar'\n\nconst { isSidebarOpen, toggleSidebarOpen } = useSidebar()\n</script>\n<template>\n  <button\n    :aria-pressed=\"isSidebarOpen\"\n    class=\"scalar-sidebar-toggle text-c-3 hover:bg-b-2 active:text-c-1 rounded-lg p-2\"\n    type=\"button\"\n    @click=\"toggleSidebarOpen\">\n    <span class=\"sr-only\">{{ isSidebarOpen ? 'Hide' : 'Show' }} sidebar</span>\n    <svg\n      class=\"size-4\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <defs>\n        <clipPath id=\"mask\">\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M9 3.2H4c-1.7 0-3 1.3-3 3v11.5c0 1.7 1.3 3 3 3h5V3.2z\" />\n        </clipPath>\n      </defs>\n      <g clip-path=\"url(#mask)\">\n        <path\n          class=\"transition-transform duration-300\"\n          :class=\"isSidebarOpen ? 'translate-x-0' : '-translate-x-1/2'\"\n          d=\"M1 3.2h8v17.5H1z\"\n          fill=\"currentColor\" />\n      </g>\n      <path\n        d=\"M20 20.8H4c-1.7 0-3-1.3-3-3V6.2c0-1.7 1.3-3 3-3h16c1.7 0 3 1.3 3 3v11.5c0 1.7-1.3 3-3 3zM9 3.2v17.5\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\" />\n    </svg>\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAGA,MAAM,EAAE,eAAe,sBAAsB,YAAW;;uBAGtD,mBAgCS,UAAA;IA/BN,gBAAc,MAAA,cAAa;IAC5B,OAAM;IACN,MAAK;IACJ,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,MAAA,kBAAA,IAAA,MAAA,kBAAA,CAAA,GAAA,KAAiB;OACzB,mBAA0E,QAA1E,YAA0E,gBAAjD,MAAA,cAAa,GAAA,SAAA,OAAA,GAAqB,YAAQ,EAAA,GAAA,WAAA,EACnE,mBAyBM,OAzBN,YAyBM;8BApBJ,mBAMO,QAAA,MAAA,CALL,mBAIW,YAAA,EAJD,IAAG,QAAM,EAAA,CACjB,mBAE8D,QAAA;KAD5D,aAAU;KACV,GAAE;;IAGR,mBAMI,KANJ,YAMI,CALF,mBAIwB,QAAA;KAHtB,OAAK,eAAA,CAAC,qCACE,MAAA,cAAa,GAAA,kBAAA,mBAAA,CAAA;KACrB,GAAE;KACF,MAAK;;8BAET,mBAKqB,QAAA;KAJnB,GAAE;KACF,QAAO;KACP,kBAAe;KACf,mBAAgB;KAChB,gBAAa"}

package/dist/components/Sidebar/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Sidebar } from './Sidebar.vue';
+export { default as Sidebar } from './Sidebar.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/index.js

@@ -1,2 +1,2 @@
-import { t as Sidebar_default } from "../../Sidebar-CRxdl38Y.js";
+import Sidebar_default from "./Sidebar.vue.js";
 export { Sidebar_default as Sidebar };

package/dist/components/TopNav/TopNav.vue.js

@@ -0,0 +1,7 @@
+import TopNav_vue_vue_type_script_setup_true_lang_default from "./TopNav.vue.script.js";
+//#region src/components/TopNav/TopNav.vue
+var TopNav_default = TopNav_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TopNav_default as default };
+
+//# sourceMappingURL=TopNav.vue.js.map

package/dist/components/TopNav/TopNav.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.vue.js","names":[],"sources":["../../../src/components/TopNav/TopNav.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  type Icon,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { ROUTES } from '@/constants'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\nimport { ContextMenu } from '@/v2/components/context-menu'\n\nimport TopNavItem from './TopNavItem.vue'\n\nconst props = defineProps<{\n  openNewTab: { name: string; uid: string } | null\n}>()\nconst { activeRequest, activeCollection } = useActiveEntities()\nconst router = useRouter()\nconst { events } = useWorkspace()\nconst { copyToClipboard } = useClipboard()\n\n/** Nav Items list */\nconst topNavItems = reactive([\n  {\n    label: '',\n    path: '',\n    icon: 'Add' as Icon | Collection['x-scalar-icon'],\n    isCollection: false,\n  },\n])\nconst activeNavItemIdx = ref(0)\nconst activeNavItemIdxValue = computed(() => activeNavItemIdx.value)\n\n/**\n * Check if the current route is a collection\n */\nconst isCollection = computed(() => {\n  return router.currentRoute.value.name?.toString().startsWith('collection.')\n})\n\n/**\n * Logic to handle adding a nav item\n * based on the current route\n */\nfunction handleNavLabelAdd() {\n  // Collection\n  if (isCollection.value) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeCollection.value?.info?.title || 'Untitled Collection',\n      path: router.currentRoute.value.path,\n      icon: activeCollection.value?.['x-scalar-icon'] || 'Collection',\n      isCollection: true,\n    }\n\n    return\n  }\n\n  // Request\n  if (router.currentRoute.value.name?.toString().startsWith('request')) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRequest.value?.summary || '',\n      path: router.currentRoute.value.path,\n      icon: 'ExternalLink',\n      isCollection: false,\n    }\n\n    return\n  }\n\n  // Something from the sidebar\n  const activeRoute = ROUTES.find((route) => {\n    return route.to.name.startsWith(\n      router.currentRoute.value.name?.toString() ?? '',\n    )\n  })\n\n  if (activeRoute) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRoute.displayName,\n      path: router.currentRoute.value.path,\n      icon: activeRoute.icon,\n      isCollection: false,\n    }\n\n    return\n  }\n}\n\nfunction handleNavRoute() {\n  const path = topNavItems[activeNavItemIdx.value]?.path\n  if (path) {\n    router.push(path)\n  }\n}\n\n/**\n * adding a nav item sets the new index and nav item\n * based on the route\n */\nfunction addNavItem() {\n  topNavItems.push({\n    label: '',\n    path: '',\n    icon: 'Add' as Icon,\n    isCollection: false,\n  })\n  activeNavItemIdx.value = topNavItems.length - 1\n  handleNavLabelAdd()\n}\n\nfunction setNavItemIdx(idx: number) {\n  activeNavItemIdx.value = idx\n  handleNavRoute()\n}\n\n// when the route changes we need update the active nav item\nwatch(\n  () => router.currentRoute.value.path,\n  () => {\n    handleNavLabelAdd()\n  },\n  { immediate: true },\n)\n\nfunction removeNavItem(idx: number) {\n  topNavItems.splice(idx, 1)\n  activeNavItemIdx.value = Math.min(\n    activeNavItemIdx.value,\n    topNavItems.length - 1,\n  )\n  handleNavRoute()\n}\n\nconst copyUrl = async (idx: number) => {\n  if (!topNavItems[idx]?.path) {\n    return\n  }\n\n  const fullUrl = new URL(window.location.href)\n  fullUrl.pathname = topNavItems[idx].path\n  await copyToClipboard(fullUrl.toString())\n}\n\nconst closeOtherTabs = (idx: number) => {\n  topNavItems.splice(0, idx)\n  topNavItems.splice(1)\n  activeNavItemIdx.value = 0\n  handleNavRoute()\n}\n\n/** Handle hotkeys */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.addTopNav) {\n    addNavItem()\n  }\n  if (event.closeTopNav) {\n    removeNavItem(activeNavItemIdx.value)\n  }\n  if (event.navigateTopNavLeft) {\n    setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0))\n  }\n  if (event.navigateTopNavRight) {\n    setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1))\n  }\n  if (event.jumpToTab) {\n    const tabIndex = Number(event.jumpToTab.key) - 1\n    if (tabIndex >= 0 && tabIndex < topNavItems.length) {\n      setNavItemIdx(tabIndex)\n    }\n  }\n  if (event.jumpToLastTab) {\n    setNavItemIdx(topNavItems.length - 1)\n  }\n}\n\nconst addTopNavTab = (item: { name: string; uid: string }) => {\n  topNavItems.push({\n    label: item.name,\n    path: item.uid,\n    icon: 'ExternalLink',\n    isCollection: false,\n  })\n}\n\nwatch(\n  () => props.openNewTab,\n  (openNewTab) => {\n    if (openNewTab) {\n      addTopNavTab(openNewTab)\n    }\n  },\n  { immediate: true },\n)\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <nav class=\"mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2\">\n    <!-- Add a draggable overlay -->\n    <div class=\"app-drag-region absolute inset-0\" />\n    <div\n      class=\"relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium\">\n      <template v-if=\"topNavItems.length === 1\">\n        <div class=\"h-full w-full overflow-hidden\">\n          <ContextMenu\n            triggerClass=\"flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap\">\n            <template #trigger>\n              <LibraryIcon\n                v-if=\"isCollection\"\n                class=\"size-3.5 min-w-3.5 stroke-2\"\n                :src=\"activeCollection?.['x-scalar-icon'] || 'Collection'\" />\n              <ScalarIcon\n                v-else-if=\"topNavItems[0]?.icon\"\n                :icon=\"topNavItems[0]?.icon as Icon\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n              <span>{{ topNavItems[0]?.label }}</span>\n            </template>\n            <template #content>\n              <ScalarFloating placement=\"right-start\">\n                <template #floating>\n                  <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"addNavItem\">\n                      <ScalarIcon\n                        icon=\"AddTab\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      New Tab\n                      <ScalarHotkey\n                        class=\"bg-b-2 ml-auto\"\n                        hotkey=\"T\" />\n                    </ScalarDropdownButton>\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"copyUrl(activeNavItemIdxValue)\">\n                      <ScalarIcon\n                        icon=\"Link\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      Copy URL\n                    </ScalarDropdownButton>\n                  </ScalarDropdownMenu>\n                </template>\n              </ScalarFloating>\n            </template>\n          </ContextMenu>\n        </div>\n      </template>\n      <template v-else>\n        <TopNavItem\n          v-for=\"(topNavItem, index) in topNavItems\"\n          :key=\"topNavItem.path\"\n          :active=\"index === activeNavItemIdxValue\"\n          :hotkey=\"(index + 1).toString()\"\n          :icon=\"\n            topNavItem.isCollection\n              ? ((activeCollection?.['x-scalar-icon'] || 'Collection') as Icon)\n              : (topNavItem.icon as Icon)\n          \"\n          :isCollection=\"topNavItem.isCollection || false\"\n          :label=\"topNavItem.label\"\n          @click=\"setNavItemIdx(index)\"\n          @close=\"removeNavItem(index)\"\n          @closeOtherTabs=\"closeOtherTabs(index)\"\n          @copyUrl=\"copyUrl(index)\"\n          @newTab=\"addNavItem\" />\n      </template>\n      <button\n        class=\"text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5\"\n        type=\"button\"\n        @click=\"addNavItem\">\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"sm\"\n          thickness=\"2.5\" />\n      </button>\n    </div>\n  </nav>\n</template>\n"],"mappings":""}

package/dist/components/TopNav/TopNav.vue.script.js

@@ -0,0 +1,232 @@
+import { ROUTES } from "../../constants.js";
+import { useActiveEntities } from "../../store/active-entities.js";
+import { useWorkspace } from "../../store/store.js";
+import ContextMenu_default from "../../v2/components/context-menu/ContextMenu.vue.js";
+import TopNavItem_default from "./TopNavItem.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarDropdownButton, ScalarDropdownMenu, ScalarFloating, ScalarHotkey, ScalarIcon } from "@scalar/components";
+import { useRouter } from "vue-router";
+import { LibraryIcon } from "@scalar/icons/library";
+import { useClipboard } from "@scalar/use-hooks/useClipboard";
+//#region src/components/TopNav/TopNav.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2" };
+var _hoisted_2 = { class: "relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium" };
+var _hoisted_3 = {
+	key: 0,
+	class: "h-full w-full overflow-hidden"
+};
+var TopNav_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "TopNav",
+	props: { openNewTab: {} },
+	setup(__props) {
+		const props = __props;
+		const { activeRequest, activeCollection } = useActiveEntities();
+		const router = useRouter();
+		const { events } = useWorkspace();
+		const { copyToClipboard } = useClipboard();
+		/** Nav Items list */
+		const topNavItems = reactive([{
+			label: "",
+			path: "",
+			icon: "Add",
+			isCollection: false
+		}]);
+		const activeNavItemIdx = ref(0);
+		const activeNavItemIdxValue = computed(() => activeNavItemIdx.value);
+		/**
+		* Check if the current route is a collection
+		*/
+		const isCollection = computed(() => {
+			return router.currentRoute.value.name?.toString().startsWith("collection.");
+		});
+		/**
+		* Logic to handle adding a nav item
+		* based on the current route
+		*/
+		function handleNavLabelAdd() {
+			if (isCollection.value) {
+				topNavItems[activeNavItemIdx.value] = {
+					label: activeCollection.value?.info?.title || "Untitled Collection",
+					path: router.currentRoute.value.path,
+					icon: activeCollection.value?.["x-scalar-icon"] || "Collection",
+					isCollection: true
+				};
+				return;
+			}
+			if (router.currentRoute.value.name?.toString().startsWith("request")) {
+				topNavItems[activeNavItemIdx.value] = {
+					label: activeRequest.value?.summary || "",
+					path: router.currentRoute.value.path,
+					icon: "ExternalLink",
+					isCollection: false
+				};
+				return;
+			}
+			const activeRoute = ROUTES.find((route) => {
+				return route.to.name.startsWith(router.currentRoute.value.name?.toString() ?? "");
+			});
+			if (activeRoute) {
+				topNavItems[activeNavItemIdx.value] = {
+					label: activeRoute.displayName,
+					path: router.currentRoute.value.path,
+					icon: activeRoute.icon,
+					isCollection: false
+				};
+				return;
+			}
+		}
+		function handleNavRoute() {
+			const path = topNavItems[activeNavItemIdx.value]?.path;
+			if (path) router.push(path);
+		}
+		/**
+		* adding a nav item sets the new index and nav item
+		* based on the route
+		*/
+		function addNavItem() {
+			topNavItems.push({
+				label: "",
+				path: "",
+				icon: "Add",
+				isCollection: false
+			});
+			activeNavItemIdx.value = topNavItems.length - 1;
+			handleNavLabelAdd();
+		}
+		function setNavItemIdx(idx) {
+			activeNavItemIdx.value = idx;
+			handleNavRoute();
+		}
+		watch(() => router.currentRoute.value.path, () => {
+			handleNavLabelAdd();
+		}, { immediate: true });
+		function removeNavItem(idx) {
+			topNavItems.splice(idx, 1);
+			activeNavItemIdx.value = Math.min(activeNavItemIdx.value, topNavItems.length - 1);
+			handleNavRoute();
+		}
+		const copyUrl = async (idx) => {
+			if (!topNavItems[idx]?.path) return;
+			const fullUrl = new URL(window.location.href);
+			fullUrl.pathname = topNavItems[idx].path;
+			await copyToClipboard(fullUrl.toString());
+		};
+		const closeOtherTabs = (idx) => {
+			topNavItems.splice(0, idx);
+			topNavItems.splice(1);
+			activeNavItemIdx.value = 0;
+			handleNavRoute();
+		};
+		/** Handle hotkeys */
+		const handleHotKey = (event) => {
+			if (!event) return;
+			if (event.addTopNav) addNavItem();
+			if (event.closeTopNav) removeNavItem(activeNavItemIdx.value);
+			if (event.navigateTopNavLeft) setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0));
+			if (event.navigateTopNavRight) setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1));
+			if (event.jumpToTab) {
+				const tabIndex = Number(event.jumpToTab.key) - 1;
+				if (tabIndex >= 0 && tabIndex < topNavItems.length) setNavItemIdx(tabIndex);
+			}
+			if (event.jumpToLastTab) setNavItemIdx(topNavItems.length - 1);
+		};
+		const addTopNavTab = (item) => {
+			topNavItems.push({
+				label: item.name,
+				path: item.uid,
+				icon: "ExternalLink",
+				isCollection: false
+			});
+		};
+		watch(() => props.openNewTab, (openNewTab) => {
+			if (openNewTab) addTopNavTab(openNewTab);
+		}, { immediate: true });
+		onMounted(() => events.hotKeys.on(handleHotKey));
+		onBeforeUnmount(() => events.hotKeys.off(handleHotKey));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", _hoisted_1, [_cache[3] || (_cache[3] = createElementVNode("div", { class: "app-drag-region absolute inset-0" }, null, -1)), createElementVNode("div", _hoisted_2, [topNavItems.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(unref(ContextMenu_default), { triggerClass: "flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap" }, {
+				trigger: withCtx(() => [isCollection.value ? (openBlock(), createBlock(unref(LibraryIcon), {
+					key: 0,
+					class: "size-3.5 min-w-3.5 stroke-2",
+					src: unref(activeCollection)?.["x-scalar-icon"] || "Collection"
+				}, null, 8, ["src"])) : topNavItems[0]?.icon ? (openBlock(), createBlock(unref(ScalarIcon), {
+					key: 1,
+					icon: topNavItems[0]?.icon,
+					size: "xs",
+					thickness: "2.5"
+				}, null, 8, ["icon"])) : createCommentVNode("", true), createElementVNode("span", null, toDisplayString(topNavItems[0]?.label), 1)]),
+				content: withCtx(() => [createVNode(unref(ScalarFloating), { placement: "right-start" }, {
+					floating: withCtx(() => [createVNode(unref(ScalarDropdownMenu), { class: "scalar-app scalar-client" }, {
+						default: withCtx(() => [createVNode(unref(ScalarDropdownButton), {
+							class: "flex items-center gap-1.5",
+							onClick: addNavItem
+						}, {
+							default: withCtx(() => [
+								createVNode(unref(ScalarIcon), {
+									icon: "AddTab",
+									size: "sm",
+									thickness: "1.5"
+								}),
+								_cache[1] || (_cache[1] = createTextVNode(" New Tab ", -1)),
+								createVNode(unref(ScalarHotkey), {
+									class: "bg-b-2 ml-auto",
+									hotkey: "T"
+								})
+							]),
+							_: 1
+						}), createVNode(unref(ScalarDropdownButton), {
+							class: "flex items-center gap-1.5",
+							onClick: _cache[0] || (_cache[0] = ($event) => copyUrl(activeNavItemIdxValue.value))
+						}, {
+							default: withCtx(() => [createVNode(unref(ScalarIcon), {
+								icon: "Link",
+								size: "sm",
+								thickness: "1.5"
+							}), _cache[2] || (_cache[2] = createTextVNode(" Copy URL ", -1))]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			})])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(topNavItems, (topNavItem, index) => {
+				return openBlock(), createBlock(TopNavItem_default, {
+					key: topNavItem.path,
+					active: index === activeNavItemIdxValue.value,
+					hotkey: (index + 1).toString(),
+					icon: topNavItem.isCollection ? unref(activeCollection)?.["x-scalar-icon"] || "Collection" : topNavItem.icon,
+					isCollection: topNavItem.isCollection || false,
+					label: topNavItem.label,
+					onClick: ($event) => setNavItemIdx(index),
+					onClose: ($event) => removeNavItem(index),
+					onCloseOtherTabs: ($event) => closeOtherTabs(index),
+					onCopyUrl: ($event) => copyUrl(index),
+					onNewTab: addNavItem
+				}, null, 8, [
+					"active",
+					"hotkey",
+					"icon",
+					"isCollection",
+					"label",
+					"onClick",
+					"onClose",
+					"onCloseOtherTabs",
+					"onCopyUrl"
+				]);
+			}), 128)), createElementVNode("button", {
+				class: "text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5",
+				type: "button",
+				onClick: addNavItem
+			}, [createVNode(unref(ScalarIcon), {
+				icon: "Add",
+				size: "sm",
+				thickness: "2.5"
+			})])])]);
+		};
+	}
+});
+//#endregion
+export { TopNav_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TopNav.vue.script.js.map

package/dist/components/TopNav/TopNav.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.vue.script.js","names":[],"sources":["../../../src/components/TopNav/TopNav.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  type Icon,\n} from '@scalar/components'\nimport { LibraryIcon } from '@scalar/icons/library'\nimport type { Collection } from '@scalar/oas-utils/entities/spec'\nimport { useClipboard } from '@scalar/use-hooks/useClipboard'\nimport { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { ROUTES } from '@/constants'\nimport type { HotKeyEvent } from '@/libs'\nimport { useWorkspace } from '@/store'\nimport { useActiveEntities } from '@/store/active-entities'\nimport { ContextMenu } from '@/v2/components/context-menu'\n\nimport TopNavItem from './TopNavItem.vue'\n\nconst props = defineProps<{\n  openNewTab: { name: string; uid: string } | null\n}>()\nconst { activeRequest, activeCollection } = useActiveEntities()\nconst router = useRouter()\nconst { events } = useWorkspace()\nconst { copyToClipboard } = useClipboard()\n\n/** Nav Items list */\nconst topNavItems = reactive([\n  {\n    label: '',\n    path: '',\n    icon: 'Add' as Icon | Collection['x-scalar-icon'],\n    isCollection: false,\n  },\n])\nconst activeNavItemIdx = ref(0)\nconst activeNavItemIdxValue = computed(() => activeNavItemIdx.value)\n\n/**\n * Check if the current route is a collection\n */\nconst isCollection = computed(() => {\n  return router.currentRoute.value.name?.toString().startsWith('collection.')\n})\n\n/**\n * Logic to handle adding a nav item\n * based on the current route\n */\nfunction handleNavLabelAdd() {\n  // Collection\n  if (isCollection.value) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeCollection.value?.info?.title || 'Untitled Collection',\n      path: router.currentRoute.value.path,\n      icon: activeCollection.value?.['x-scalar-icon'] || 'Collection',\n      isCollection: true,\n    }\n\n    return\n  }\n\n  // Request\n  if (router.currentRoute.value.name?.toString().startsWith('request')) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRequest.value?.summary || '',\n      path: router.currentRoute.value.path,\n      icon: 'ExternalLink',\n      isCollection: false,\n    }\n\n    return\n  }\n\n  // Something from the sidebar\n  const activeRoute = ROUTES.find((route) => {\n    return route.to.name.startsWith(\n      router.currentRoute.value.name?.toString() ?? '',\n    )\n  })\n\n  if (activeRoute) {\n    topNavItems[activeNavItemIdx.value] = {\n      label: activeRoute.displayName,\n      path: router.currentRoute.value.path,\n      icon: activeRoute.icon,\n      isCollection: false,\n    }\n\n    return\n  }\n}\n\nfunction handleNavRoute() {\n  const path = topNavItems[activeNavItemIdx.value]?.path\n  if (path) {\n    router.push(path)\n  }\n}\n\n/**\n * adding a nav item sets the new index and nav item\n * based on the route\n */\nfunction addNavItem() {\n  topNavItems.push({\n    label: '',\n    path: '',\n    icon: 'Add' as Icon,\n    isCollection: false,\n  })\n  activeNavItemIdx.value = topNavItems.length - 1\n  handleNavLabelAdd()\n}\n\nfunction setNavItemIdx(idx: number) {\n  activeNavItemIdx.value = idx\n  handleNavRoute()\n}\n\n// when the route changes we need update the active nav item\nwatch(\n  () => router.currentRoute.value.path,\n  () => {\n    handleNavLabelAdd()\n  },\n  { immediate: true },\n)\n\nfunction removeNavItem(idx: number) {\n  topNavItems.splice(idx, 1)\n  activeNavItemIdx.value = Math.min(\n    activeNavItemIdx.value,\n    topNavItems.length - 1,\n  )\n  handleNavRoute()\n}\n\nconst copyUrl = async (idx: number) => {\n  if (!topNavItems[idx]?.path) {\n    return\n  }\n\n  const fullUrl = new URL(window.location.href)\n  fullUrl.pathname = topNavItems[idx].path\n  await copyToClipboard(fullUrl.toString())\n}\n\nconst closeOtherTabs = (idx: number) => {\n  topNavItems.splice(0, idx)\n  topNavItems.splice(1)\n  activeNavItemIdx.value = 0\n  handleNavRoute()\n}\n\n/** Handle hotkeys */\nconst handleHotKey = (event?: HotKeyEvent) => {\n  if (!event) {\n    return\n  }\n  if (event.addTopNav) {\n    addNavItem()\n  }\n  if (event.closeTopNav) {\n    removeNavItem(activeNavItemIdx.value)\n  }\n  if (event.navigateTopNavLeft) {\n    setNavItemIdx(Math.max(activeNavItemIdx.value - 1, 0))\n  }\n  if (event.navigateTopNavRight) {\n    setNavItemIdx(Math.min(activeNavItemIdx.value + 1, topNavItems.length - 1))\n  }\n  if (event.jumpToTab) {\n    const tabIndex = Number(event.jumpToTab.key) - 1\n    if (tabIndex >= 0 && tabIndex < topNavItems.length) {\n      setNavItemIdx(tabIndex)\n    }\n  }\n  if (event.jumpToLastTab) {\n    setNavItemIdx(topNavItems.length - 1)\n  }\n}\n\nconst addTopNavTab = (item: { name: string; uid: string }) => {\n  topNavItems.push({\n    label: item.name,\n    path: item.uid,\n    icon: 'ExternalLink',\n    isCollection: false,\n  })\n}\n\nwatch(\n  () => props.openNewTab,\n  (openNewTab) => {\n    if (openNewTab) {\n      addTopNavTab(openNewTab)\n    }\n  },\n  { immediate: true },\n)\n\nonMounted(() => events.hotKeys.on(handleHotKey))\nonBeforeUnmount(() => events.hotKeys.off(handleHotKey))\n</script>\n<template>\n  <nav class=\"mac:pl-[72px] t-app__top-nav relative flex h-10 pl-2\">\n    <!-- Add a draggable overlay -->\n    <div class=\"app-drag-region absolute inset-0\" />\n    <div\n      class=\"relative flex h-10 flex-1 items-center gap-1.5 overflow-hidden pr-2.5 text-base font-medium\">\n      <template v-if=\"topNavItems.length === 1\">\n        <div class=\"h-full w-full overflow-hidden\">\n          <ContextMenu\n            triggerClass=\"flex custom-scroll gap-1.5 h-full items-center justify-center w-full whitespace-nowrap\">\n            <template #trigger>\n              <LibraryIcon\n                v-if=\"isCollection\"\n                class=\"size-3.5 min-w-3.5 stroke-2\"\n                :src=\"activeCollection?.['x-scalar-icon'] || 'Collection'\" />\n              <ScalarIcon\n                v-else-if=\"topNavItems[0]?.icon\"\n                :icon=\"topNavItems[0]?.icon as Icon\"\n                size=\"xs\"\n                thickness=\"2.5\" />\n              <span>{{ topNavItems[0]?.label }}</span>\n            </template>\n            <template #content>\n              <ScalarFloating placement=\"right-start\">\n                <template #floating>\n                  <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"addNavItem\">\n                      <ScalarIcon\n                        icon=\"AddTab\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      New Tab\n                      <ScalarHotkey\n                        class=\"bg-b-2 ml-auto\"\n                        hotkey=\"T\" />\n                    </ScalarDropdownButton>\n                    <ScalarDropdownButton\n                      class=\"flex items-center gap-1.5\"\n                      @click=\"copyUrl(activeNavItemIdxValue)\">\n                      <ScalarIcon\n                        icon=\"Link\"\n                        size=\"sm\"\n                        thickness=\"1.5\" />\n                      Copy URL\n                    </ScalarDropdownButton>\n                  </ScalarDropdownMenu>\n                </template>\n              </ScalarFloating>\n            </template>\n          </ContextMenu>\n        </div>\n      </template>\n      <template v-else>\n        <TopNavItem\n          v-for=\"(topNavItem, index) in topNavItems\"\n          :key=\"topNavItem.path\"\n          :active=\"index === activeNavItemIdxValue\"\n          :hotkey=\"(index + 1).toString()\"\n          :icon=\"\n            topNavItem.isCollection\n              ? ((activeCollection?.['x-scalar-icon'] || 'Collection') as Icon)\n              : (topNavItem.icon as Icon)\n          \"\n          :isCollection=\"topNavItem.isCollection || false\"\n          :label=\"topNavItem.label\"\n          @click=\"setNavItemIdx(index)\"\n          @close=\"removeNavItem(index)\"\n          @closeOtherTabs=\"closeOtherTabs(index)\"\n          @copyUrl=\"copyUrl(index)\"\n          @newTab=\"addNavItem\" />\n      </template>\n      <button\n        class=\"text-c-3 hover:bg-b-3 app-no-drag-region rounded p-1.5\"\n        type=\"button\"\n        @click=\"addNavItem\">\n        <ScalarIcon\n          icon=\"Add\"\n          size=\"sm\"\n          thickness=\"2.5\" />\n      </button>\n    </div>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/components/TopNav/TopNavItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TopNav/TopNavItem.vue"],"names":[],"mappings":"AAoMA,OAAO,EASL,KAAK,IAAI,EACV,MAAM,oBAAoB,CAAA;AAI3B,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AAyaF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"TopNavItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TopNav/TopNavItem.vue"],"names":[],"mappings":"AAqMA,OAAO,EAQL,KAAK,IAAI,EACV,MAAM,oBAAoB,CAAA;AAM3B,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AAyaF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/TopNav/TopNavItem.vue.js

@@ -0,0 +1,9 @@
+import TopNavItem_vue_vue_type_script_setup_true_lang_default from "./TopNavItem.vue.script.js";
+/* empty css                         */
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+//#region src/components/TopNav/TopNavItem.vue
+var TopNavItem_default = /* @__PURE__ */ _plugin_vue_export_helper_default(TopNavItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-5f5771c8"]]);
+//#endregion
+export { TopNavItem_default as default };
+
+//# sourceMappingURL=TopNavItem.vue.js.map

package/dist/components/TopNav/TopNavItem.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavItem.vue.js","names":[],"sources":["../../../src/components/TopNav/TopNavItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarDropdownButton,\n  ScalarDropdownDivider,\n  ScalarDropdownMenu,\n  ScalarFloating,\n  ScalarHotkey,\n  ScalarIcon,\n  ScalarTooltip,\n  type Icon,\n} from '@scalar/components'\nimport { isMacOS } from '@scalar/helpers/general/is-mac-os'\nimport { LibraryIcon } from '@scalar/icons/library'\n\nimport { ContextMenu } from '@/v2/components/context-menu'\n\ndefineProps<{\n  hotkey?: string\n  active: boolean\n  label: string\n  icon: Icon\n  isCollection?: boolean\n}>()\n\ndefineEmits<{\n  (e: 'click'): void\n  (e: 'close'): void\n  (e: 'newTab'): void\n  (e: 'copyUrl'): void\n  (e: 'closeOtherTabs'): void\n}>()\n</script>\n\n<template>\n  <ContextMenu triggerClass=\"overflow-hidden w-full\">\n    <template #trigger>\n      <ScalarTooltip\n        :content=\"`${isMacOS() ? '⌘' : '^'} ${hotkey}`\"\n        placement=\"bottom\">\n        <div\n          class=\"nav-item app-no-drag-region\"\n          :class=\"{ 'nav-item__active': active }\"\n          @click=\"$emit('click')\">\n          <div\n            class=\"nav-item-icon-copy flex flex-1 items-center justify-center gap-1.5\">\n            <LibraryIcon\n              v-if=\"isCollection\"\n              class=\"size-3.5 min-w-3.5 stroke-2\"\n              :src=\"icon\" />\n            <ScalarIcon\n              v-else\n              :icon=\"icon\"\n              size=\"xs\"\n              thickness=\"2.5\" />\n            <span class=\"custom-scroll nav-item-copy text-sm\">{{ label }}</span>\n          </div>\n          <button\n            class=\"nav-item-close\"\n            type=\"button\"\n            @click=\"$emit('close')\">\n            <ScalarIcon\n              icon=\"Close\"\n              thickness=\"1.75\" />\n          </button>\n        </div>\n      </ScalarTooltip>\n    </template>\n    <template #content>\n      <ScalarFloating placement=\"right-start\">\n        <template #floating>\n          <ScalarDropdownMenu class=\"scalar-app scalar-client\">\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('newTab')\">\n              <ScalarIcon\n                icon=\"AddTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              New Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"T\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('copyUrl')\">\n              <ScalarIcon\n                icon=\"Link\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Copy URL\n            </ScalarDropdownButton>\n            <ScalarDropdownDivider />\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('close')\">\n              <ScalarIcon\n                icon=\"CloseTab\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Tab\n              <ScalarHotkey\n                class=\"bg-b-2 ml-auto\"\n                hotkey=\"W\" />\n            </ScalarDropdownButton>\n            <ScalarDropdownButton\n              class=\"flex items-center gap-1.5\"\n              @click=\"$emit('closeOtherTabs')\">\n              <ScalarIcon\n                icon=\"CloseTabs\"\n                size=\"sm\"\n                thickness=\"1.5\" />\n              Close Other Tabs\n            </ScalarDropdownButton>\n          </ScalarDropdownMenu>\n        </template>\n      </ScalarFloating>\n    </template>\n  </ContextMenu>\n</template>\n\n<style scoped>\n.nav-item {\n  padding: 0 1rem;\n  cursor: pointer;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: var(--scalar-radius-lg);\n  background: var(--scalar-background-3);\n  border: var(--scalar-border-width) solid var(--scalar-background-2);\n  color: var(--scalar-color-3);\n  padding: 4.5px;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n.dark-mode .nav-item {\n  background: color-mix(in srgb, var(--scalar-background-2), transparent);\n}\n.nav-item-icon-copy {\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  mask-image: linear-gradient(\n    to left,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n.nav-item:hover .nav-item-icon-copy {\n  mask-image: linear-gradient(\n    to left,\n    transparent 20px,\n    var(--scalar-background-2) 40px\n  );\n}\n.nav-item-copy {\n  max-width: calc(100% - 20px);\n}\n.nav-item:hover {\n  color: var(--scalar-color-1);\n}\n.nav-item__active {\n  background-color: var(--scalar-background-1);\n  color: var(--scalar-color-1);\n  border-color: var(--scalar-border-color);\n}\n.dark-mode .nav-item__active {\n  background-color: var(--scalar-background-2);\n}\n.nav-item-close {\n  position: absolute;\n  right: 3px;\n  padding: 2px;\n  border-radius: var(--scalar-radius);\n  background: transparent;\n  max-width: 20px;\n  stroke-width: 1.5px;\n  color: var(--scalar-color-3);\n  margin-left: -20px;\n  opacity: 0;\n}\n.nav-item:hover .nav-item-close {\n  opacity: 1;\n}\n.nav-item-close:hover {\n  background-color: var(--scalar-background-4);\n}\n.nav-item__active .nav-item-close:hover {\n  background-color: var(--scalar-background-2);\n}\n</style>\n"],"mappings":""}