@scalar/api-client 2.38.4 → 2.39.0

package/dist/v2/features/command-palette/components/CommandPaletteExample.vue.script.js

@@ -0,0 +1,207 @@
+import HttpMethod_default from "../../../blocks/operation-code-sample/components/HttpMethod.vue.js";
+import CommandActionForm_default from "./CommandActionForm.vue.js";
+import CommandActionInput_default from "./CommandActionInput.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarButton, ScalarDropdown, ScalarDropdownItem, ScalarIcon, ScalarListbox } from "@scalar/components";
+//#region src/v2/features/command-palette/components/CommandPaletteExample.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex flex-1 gap-1"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "text-c-1 truncate"
+};
+var _hoisted_3 = {
+	key: 1,
+	class: "text-c-3"
+};
+var _hoisted_4 = { class: "flex items-center gap-2" };
+var _hoisted_5 = { class: "custom-scroll max-h-40" };
+var _hoisted_6 = { class: "truncate" };
+var CommandPaletteExample_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CommandPaletteExample",
+	props: {
+		workspaceStore: {},
+		eventBus: {},
+		documentName: {},
+		operationId: {},
+		example: {}
+	},
+	emits: ["close", "back"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		/** Operation option type for selectors */
+		const isEditMode = computed(() => __props.example !== void 0);
+		const exampleName = ref(__props.example?.name ?? "");
+		const exampleNameTrimmed = computed(() => exampleName.value.trim());
+		/** All available documents (collections) in the workspace */
+		const availableDocuments = computed(() => Object.entries(__props.workspaceStore.workspace.documents).map(([name, document]) => ({
+			id: name,
+			label: document.info.title || name
+		})));
+		const selectedDocument = ref(__props.documentName ? availableDocuments.value.find((document) => document.id === __props.documentName) : availableDocuments.value[0] ?? void 0);
+		/**
+		* Recursively traverse navigation entries to find all operations.
+		* Operations can be nested under tags or at the document level.
+		*/
+		const getAllOperations = (entries) => {
+			const operations = [];
+			for (const entry of entries) {
+				if (entry.type === "operation") operations.push(entry);
+				/** Recursively traverse child entries if they exist */
+				if ("children" in entry && entry.children) operations.push(...getAllOperations(entry.children));
+			}
+			return operations;
+		};
+		/** All available operations for the selected document */
+		const availableOperations = computed(() => {
+			if (!selectedDocument.value) return [];
+			const document = __props.workspaceStore.workspace.documents[selectedDocument.value.id];
+			if (!document || !document["x-scalar-navigation"]) return [];
+			const navigation = document["x-scalar-navigation"];
+			return getAllOperations(navigation.children ?? []).map((operation) => ({
+				id: operation.id,
+				label: `${operation.method.toUpperCase()} ${operation.path}`,
+				path: operation.path,
+				method: operation.method,
+				exampleNames: operation.children?.filter((child) => child.type === "example").map((child) => child.name) ?? []
+			}));
+		});
+		const selectedOperation = ref(__props.operationId ? availableOperations.value.find((operation) => operation.id === __props.operationId) : void 0);
+		/** Reset operation selection when document changes */
+		watch(selectedDocument, () => {
+			selectedOperation.value = __props.operationId ? availableOperations.value.find((operation) => operation.id === __props.operationId) : availableOperations.value[0] ?? void 0;
+		}, { immediate: true });
+		/** Handle operation selection from dropdown */
+		const handleSelect = (operation) => {
+			if (operation) selectedOperation.value = operation;
+		};
+		/**
+		* Check if the form should be disabled.
+		* Disabled when any required field is missing or empty.
+		*/
+		const isDisabled = computed(() => {
+			if (!exampleNameTrimmed.value || !selectedDocument.value || !selectedOperation.value) return true;
+			if (isEditMode.value && __props.example) {
+				if (exampleNameTrimmed.value === __props.example.name) return true;
+			}
+			if (selectedOperation.value.exampleNames.some((name) => name === exampleNameTrimmed.value && name !== __props.example?.name)) return true;
+			return false;
+		});
+		/**
+		* Navigate to the example route which will create it automatically.
+		* The route handler will create the example with the provided details.
+		*/
+		const handleSubmit = () => {
+			if (isDisabled.value || !selectedDocument.value || !selectedOperation.value) return;
+			if (isEditMode.value && __props.example) {
+				__props.eventBus.emit("operation:rename:example", {
+					documentName: selectedDocument.value.id,
+					meta: {
+						path: selectedOperation.value.path,
+						method: selectedOperation.value.method,
+						exampleKey: __props.example.name
+					},
+					payload: { name: exampleNameTrimmed.value }
+				});
+				emit("close");
+				return;
+			}
+			__props.eventBus.emit("operation:create:draft-example", {
+				documentName: selectedDocument.value.id,
+				meta: {
+					path: selectedOperation.value.path,
+					method: selectedOperation.value.method
+				},
+				exampleName: exampleNameTrimmed.value
+			});
+			emit("close");
+		};
+		/** Handle back navigation when user presses backspace on empty input */
+		const handleBack = (event) => {
+			if (isEditMode.value) return;
+			emit("back", event);
+		};
+		/** Handle cancel action in edit mode */
+		const handleCancel = () => {
+			emit("close");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CommandActionForm_default, {
+				disabled: isDisabled.value,
+				onSubmit: handleSubmit
+			}, {
+				options: withCtx(() => [!isEditMode.value ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ScalarListbox), {
+					modelValue: selectedDocument.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedDocument.value = $event),
+					options: availableDocuments.value
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarButton), {
+						class: "hover:bg-b-2 max-h-8 w-[150px] min-w-[150px] justify-between gap-1 p-2 text-xs",
+						variant: "outlined"
+					}, {
+						default: withCtx(() => [createElementVNode("span", { class: normalizeClass(selectedDocument.value ? "text-c-1 truncate" : "text-c-3") }, toDisplayString(selectedDocument.value ? selectedDocument.value.label : "Select Document"), 3), createVNode(unref(ScalarIcon), {
+							class: "text-c-3",
+							icon: "ChevronDown",
+							size: "md"
+						})]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["modelValue", "options"]), createVNode(unref(ScalarDropdown), {
+					placement: "bottom",
+					resize: ""
+				}, {
+					items: withCtx(() => [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(availableOperations.value, (operation) => {
+						return openBlock(), createBlock(unref(ScalarDropdownItem), {
+							key: operation.id,
+							class: "flex h-7 w-full items-center justify-between px-1 pr-[26px]",
+							onClick: ($event) => handleSelect(operation)
+						}, {
+							default: withCtx(() => [createElementVNode("span", _hoisted_6, toDisplayString(operation.path), 1), createVNode(HttpMethod_default, { method: operation.method }, null, 8, ["method"])]),
+							_: 2
+						}, 1032, ["onClick"]);
+					}), 128))])]),
+					default: withCtx(() => [createVNode(unref(ScalarButton), {
+						class: "hover:bg-b-2 max-h-8 w-full justify-between gap-1 p-2 text-xs",
+						disabled: !availableOperations.value.length,
+						variant: "outlined"
+					}, {
+						default: withCtx(() => [selectedOperation.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(selectedOperation.value.path), 1)) : (openBlock(), createElementBlock("span", _hoisted_3, " Select Operation ")), createElementVNode("div", _hoisted_4, [selectedOperation.value ? (openBlock(), createBlock(HttpMethod_default, {
+							key: 0,
+							method: selectedOperation.value.method
+						}, null, 8, ["method"])) : createCommentVNode("", true), createVNode(unref(ScalarIcon), {
+							class: "text-c-3",
+							icon: "ChevronDown",
+							size: "md"
+						})])]),
+						_: 1
+					}, 8, ["disabled"])]),
+					_: 1
+				})])) : (openBlock(), createBlock(unref(ScalarButton), {
+					key: 1,
+					class: "max-h-8 px-3 text-xs",
+					variant: "outlined",
+					onClick: handleCancel
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Cancel ", -1)])]),
+					_: 1
+				}))]),
+				submit: withCtx(() => [createTextVNode(toDisplayString(isEditMode.value ? "Save" : "Create Example"), 1)]),
+				default: withCtx(() => [createVNode(CommandActionInput_default, {
+					modelValue: exampleName.value,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => exampleName.value = $event),
+					label: "Example Name",
+					placeholder: "Example Name",
+					onDelete: handleBack
+				}, null, 8, ["modelValue"])]),
+				_: 1
+			}, 8, ["disabled"]);
+		};
+	}
+});
+//#endregion
+export { CommandPaletteExample_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CommandPaletteExample.vue.script.js.map

package/dist/v2/features/command-palette/components/CommandPaletteExample.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteExample.vue.script.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteExample.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Palette Example Component\n *\n * Provides a form for creating a new example for an API operation.\n * Users can name the example, select a document (collection), and choose an operation.\n * Automatically navigates to the example route which creates the example.\n *\n * @example\n * <CommandPaletteExample\n *   :workspaceStore=\"workspaceStore\"\n *   @close=\"handleClose\"\n *   @back=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandPaletteExample',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarDropdown,\n  ScalarDropdownItem,\n  ScalarIcon,\n  ScalarListbox,\n} from '@scalar/components'\nimport type { HttpMethod } from '@scalar/helpers/http/http-methods'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type {\n  TraversedEntry,\n  TraversedExample,\n  TraversedOperation,\n} from '@scalar/workspace-store/schemas/navigation'\nimport { computed, ref, watch } from 'vue'\n\nimport HttpMethodBadge from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\n\nimport CommandActionForm from './CommandActionForm.vue'\nimport CommandActionInput from './CommandActionInput.vue'\n\nconst { workspaceStore, eventBus, documentName, operationId, example } =\n  defineProps<{\n    /** The workspace store for accessing documents and operations */\n    workspaceStore: WorkspaceStore\n    /** Event bus for emitting operation creation events */\n    eventBus: WorkspaceEventBus\n    /** Document id to create the example for */\n    documentName?: string\n    /** Preselected path and method to create the example for */\n    operationId?: string\n    /** Existing example for edit mode */\n    example?: TraversedExample\n  }>()\n\nconst emit = defineEmits<{\n  /** Emitted when the example is created successfully */\n  (event: 'close'): void\n  /** Emitted when user navigates back (e.g., backspace on empty input) */\n  (event: 'back', keyboardEvent: KeyboardEvent): void\n}>()\n\n/** Operation option type for selectors */\ntype OperationOption = {\n  id: string\n  label: string\n  path: string\n  method: HttpMethod\n  exampleNames: string[]\n}\n\nconst isEditMode = computed(() => example !== undefined)\n\nconst exampleName = ref(example?.name ?? '')\nconst exampleNameTrimmed = computed(() => exampleName.value.trim())\n\n/** All available documents (collections) in the workspace */\nconst availableDocuments = computed(() =>\n  Object.entries(workspaceStore.workspace.documents).map(\n    ([name, document]) => ({\n      id: name,\n      label: document.info.title || name,\n    }),\n  ),\n)\n\nconst selectedDocument = ref<{ id: string; label: string } | undefined>(\n  documentName\n    ? availableDocuments.value.find((document) => document.id === documentName)\n    : (availableDocuments.value[0] ?? undefined),\n)\n\n/**\n * Recursively traverse navigation entries to find all operations.\n * Operations can be nested under tags or at the document level.\n */\nconst getAllOperations = (entries: TraversedEntry[]): TraversedOperation[] => {\n  const operations: TraversedOperation[] = []\n\n  for (const entry of entries) {\n    if (entry.type === 'operation') {\n      operations.push(entry)\n    }\n\n    /** Recursively traverse child entries if they exist */\n    if ('children' in entry && entry.children) {\n      operations.push(...getAllOperations(entry.children))\n    }\n  }\n\n  return operations\n}\n\n/** All available operations for the selected document */\nconst availableOperations = computed(() => {\n  if (!selectedDocument.value) {\n    return []\n  }\n\n  const document = workspaceStore.workspace.documents[selectedDocument.value.id]\n  if (!document || !document['x-scalar-navigation']) {\n    return []\n  }\n\n  const navigation = document['x-scalar-navigation']\n  const operations = getAllOperations(navigation.children ?? [])\n\n  return operations.map((operation) => ({\n    id: operation.id,\n    label: `${operation.method.toUpperCase()} ${operation.path}`,\n    path: operation.path,\n    method: operation.method,\n    exampleNames:\n      operation.children\n        ?.filter((child): child is TraversedExample => child.type === 'example')\n        .map((child) => child.name) ?? [],\n  }))\n})\n\nconst selectedOperation = ref<OperationOption | undefined>(\n  operationId\n    ? availableOperations.value.find(\n        (operation) => operation.id === operationId,\n      )\n    : undefined,\n)\n\n/** Reset operation selection when document changes */\nwatch(\n  selectedDocument,\n  () => {\n    selectedOperation.value = operationId\n      ? availableOperations.value.find(\n          (operation) => operation.id === operationId,\n        )\n      : (availableOperations.value[0] ?? undefined)\n  },\n  { immediate: true },\n)\n\n/** Handle operation selection from dropdown */\nconst handleSelect = (operation: OperationOption | undefined): void => {\n  if (operation) {\n    selectedOperation.value = operation\n  }\n}\n\n/**\n * Check if the form should be disabled.\n * Disabled when any required field is missing or empty.\n */\nconst isDisabled = computed<boolean>(() => {\n  if (\n    !exampleNameTrimmed.value ||\n    !selectedDocument.value ||\n    !selectedOperation.value\n  ) {\n    return true\n  }\n\n  if (isEditMode.value && example) {\n    if (exampleNameTrimmed.value === example.name) {\n      return true\n    }\n  }\n\n  if (\n    selectedOperation.value.exampleNames.some(\n      (name) => name === exampleNameTrimmed.value && name !== example?.name,\n    )\n  ) {\n    return true\n  }\n\n  return false\n})\n\n/**\n * Navigate to the example route which will create it automatically.\n * The route handler will create the example with the provided details.\n */\nconst handleSubmit = (): void => {\n  if (isDisabled.value || !selectedDocument.value || !selectedOperation.value) {\n    return\n  }\n\n  if (isEditMode.value && example) {\n    eventBus.emit('operation:rename:example', {\n      documentName: selectedDocument.value.id,\n      meta: {\n        path: selectedOperation.value.path,\n        method: selectedOperation.value.method,\n        exampleKey: example.name,\n      },\n      payload: {\n        name: exampleNameTrimmed.value,\n      },\n    })\n    emit('close')\n    return\n  }\n\n  eventBus.emit('operation:create:draft-example', {\n    documentName: selectedDocument.value.id,\n    meta: {\n      path: selectedOperation.value.path,\n      method: selectedOperation.value.method,\n    },\n    exampleName: exampleNameTrimmed.value,\n  })\n\n  emit('close')\n}\n\n/** Handle back navigation when user presses backspace on empty input */\nconst handleBack = (event: KeyboardEvent): void => {\n  if (isEditMode.value) {\n    return\n  }\n\n  emit('back', event)\n}\n\n/** Handle cancel action in edit mode */\nconst handleCancel = (): void => {\n  emit('close')\n}\n</script>\n<template>\n  <CommandActionForm\n    :disabled=\"isDisabled\"\n    @submit=\"handleSubmit\">\n    <CommandActionInput\n      v-model=\"exampleName\"\n      label=\"Example Name\"\n      placeholder=\"Example Name\"\n      @delete=\"handleBack\" />\n\n    <!-- Selectors for document and operation -->\n    <template #options>\n      <div\n        v-if=\"!isEditMode\"\n        class=\"flex flex-1 gap-1\">\n        <!-- Document (collection) selector -->\n        <ScalarListbox\n          v-model=\"selectedDocument\"\n          :options=\"availableDocuments\">\n          <ScalarButton\n            class=\"hover:bg-b-2 max-h-8 w-[150px] min-w-[150px] justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span :class=\"selectedDocument ? 'text-c-1 truncate' : 'text-c-3'\">\n              {{\n                selectedDocument ? selectedDocument.label : 'Select Document'\n              }}\n            </span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"md\" />\n          </ScalarButton>\n        </ScalarListbox>\n\n        <!-- Operation selector (path + method) -->\n        <ScalarDropdown\n          placement=\"bottom\"\n          resize>\n          <ScalarButton\n            class=\"hover:bg-b-2 max-h-8 w-full justify-between gap-1 p-2 text-xs\"\n            :disabled=\"!availableOperations.length\"\n            variant=\"outlined\">\n            <span\n              v-if=\"selectedOperation\"\n              class=\"text-c-1 truncate\">\n              {{ selectedOperation.path }}\n            </span>\n            <span\n              v-else\n              class=\"text-c-3\">\n              Select Operation\n            </span>\n            <div class=\"flex items-center gap-2\">\n              <HttpMethodBadge\n                v-if=\"selectedOperation\"\n                :method=\"selectedOperation.method\" />\n              <ScalarIcon\n                class=\"text-c-3\"\n                icon=\"ChevronDown\"\n                size=\"md\" />\n            </div>\n          </ScalarButton>\n\n          <!-- Dropdown list of all operations -->\n          <template #items>\n            <div class=\"custom-scroll max-h-40\">\n              <ScalarDropdownItem\n                v-for=\"operation in availableOperations\"\n                :key=\"operation.id\"\n                class=\"flex h-7 w-full items-center justify-between px-1 pr-[26px]\"\n                @click=\"handleSelect(operation)\">\n                <span class=\"truncate\">{{ operation.path }}</span>\n                <HttpMethodBadge :method=\"operation.method\" />\n              </ScalarDropdownItem>\n            </div>\n          </template>\n        </ScalarDropdown>\n      </div>\n\n      <ScalarButton\n        v-else\n        class=\"max-h-8 px-3 text-xs\"\n        variant=\"outlined\"\n        @click=\"handleCancel\">\n        Cancel\n      </ScalarButton>\n    </template>\n\n    <template #submit>{{ isEditMode ? 'Save' : 'Create Example' }}</template>\n  </CommandActionForm>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/command-palette/components/CommandPaletteImport.vue.d.ts

@@ -4,31 +4,11 @@ import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
 /**
  * Command Palette Import Component
  *
- * Provides a form for importing API specifications from various sources:
- * - OpenAPI/Swagger documents (URL, file, or pasted JSON/YAML)
- * - Postman collections (URL, file, or pasted JSON)
- * - cURL commands (automatically redirects to cURL import command)
+ * Provides a form for importing OpenAPI descriptions from URL, file, or pasted JSON/YAML.
+ * Postman collection JSON and Postman files open {@link CommandPaletteImportPostman}.
+ * cURL commands redirect to {@link CommandPaletteImportCurl}.
  *
  * Supports watch mode for URL imports to automatically update when content changes.
- *
- * @example
- * <CommandPaletteImport
- *   :workspaceStore="workspaceStore"
- *   @close="handleClose"
- *   @back="handleBack"
- *   @open-command="handleOpenCommand"
- * />
- *
- * @example Custom file upload button
- * <CommandPaletteImport
- *   :workspaceStore="workspaceStore"
- *   @close="handleClose">
- *   <template #fileUpload="{ import: importDocument }">
- *     <button @click="() => importDocument(source, 'file')">
- *       Custom Upload
- *     </button>
- *   </template>
- * </CommandPaletteImport>
  */
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/v2/features/command-palette/components/CommandPaletteImport.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteImport.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteImport.vue"],"names":[],"mappings":"AA0XA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAoBvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,+CAA+C;oBAC/B,cAAc;IAC9B,uDAAuD;cAC7C,iBAAiB;IAC3B,oCAAoC;iBACvB,YAAY;;;;;IALzB,+CAA+C;oBAC/B,cAAc;IAC9B,uDAAuD;cAC7C,iBAAiB;IAC3B,oCAAoC;iBACvB,YAAY;;;;;IAczB,oEAAoE;sBAClD;QAChB,8DAA8D;QAC9D,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAChE,GAAG,IAAI;EAwdN,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CommandPaletteImport.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteImport.vue"],"names":[],"mappings":"AAoXA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAmBvE;;;;;;;;GAQG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB,+CAA+C;oBAC/B,cAAc;IAC9B,uDAAuD;cAC7C,iBAAiB;IAC3B,oCAAoC;iBACvB,YAAY;;;;;IALzB,+CAA+C;oBAC/B,cAAc;IAC9B,uDAAuD;cAC7C,iBAAiB;IAC3B,oCAAoC;iBACvB,YAAY;;;;;IAczB,oEAAoE;sBAClD;QAChB,8DAA8D;QAC9D,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;KAChE,GAAG,IAAI;EAueN,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/features/command-palette/components/CommandPaletteImport.vue.js

@@ -0,0 +1,7 @@
+import CommandPaletteImport_vue_vue_type_script_setup_true_lang_default from "./CommandPaletteImport.vue.script.js";
+//#region src/v2/features/command-palette/components/CommandPaletteImport.vue
+var CommandPaletteImport_default = CommandPaletteImport_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CommandPaletteImport_default as default };
+
+//# sourceMappingURL=CommandPaletteImport.vue.js.map

package/dist/v2/features/command-palette/components/CommandPaletteImport.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteImport.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteImport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Palette Import Component\n *\n * Provides a form for importing OpenAPI descriptions from URL, file, or pasted JSON/YAML.\n * Postman collection JSON and Postman files open {@link CommandPaletteImportPostman}.\n * cURL commands redirect to {@link CommandPaletteImportCurl}.\n *\n * Supports watch mode for URL imports to automatically update when content changes.\n */\nexport default {\n  name: 'CommandPaletteImport',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarIcon,\n  ScalarTooltip,\n  useLoadingState,\n} from '@scalar/components'\nimport { isLocalUrl } from '@scalar/helpers/url/is-local-url'\nimport type { LoaderPlugin } from '@scalar/json-magic/bundle'\nimport { useToasts } from '@scalar/use-toasts'\nimport {\n  createWorkspaceStore,\n  type WorkspaceStore,\n} from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { useFileDialog } from '@/hooks'\nimport { getOpenApiDocumentDetails } from '@/v2/features/command-palette/helpers/get-openapi-document-details'\nimport { importDocumentToWorkspace } from '@/v2/features/command-palette/helpers/import-document-to-workspace'\nimport { isPostmanCollection } from '@/v2/features/command-palette/helpers/is-postman-collection'\nimport {\n  loadDocumentFromSource,\n  type ImportEventData,\n} from '@/v2/features/command-palette/helpers/load-document-from-source'\nimport { isUrl } from '@/v2/helpers/is-url'\n\nimport CommandActionForm from './CommandActionForm.vue'\nimport CommandActionInput from './CommandActionInput.vue'\nimport WatchModeToggle from './WatchModeToggle.vue'\n\nconst { workspaceStore, eventBus, fileLoader } = defineProps<{\n  /** The workspace store for adding documents */\n  workspaceStore: WorkspaceStore\n  /** Event bus for emitting operation creation events */\n  eventBus: WorkspaceEventBus\n  /** Loader plugin for file import */\n  fileLoader?: LoaderPlugin\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the import is complete or cancelled */\n  (event: 'close'): void\n  /** Emitted when user navigates back (e.g., backspace on empty input) */\n  (event: 'back', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineSlots<{\n  /** Slot for custom file upload component that can trigger import */\n  fileUpload(props: {\n    /** Function to trigger import with source content and type */\n    import: (source: string, type: 'file' | 'raw') => Promise<void>\n  }): void\n}>()\n\nconst { toast } = useToasts()\n\nconst router = useRouter()\nconst loader = useLoadingState()\n\nconst inputContent = ref('')\nconst watchMode = ref(false)\n\n/** Check if the input content is a URL */\nconst isUrlInput = computed<boolean>(() => isUrl(inputContent.value))\nconst isLocalUrlInput = computed<boolean>(\n  () => isUrlInput.value && isLocalUrl(inputContent.value),\n)\n\nconst documentDetails = computed(() =>\n  getOpenApiDocumentDetails(inputContent.value),\n)\n\n/** Get the document type for syntax highlighting */\nconst documentType = computed<string>(() =>\n  documentDetails.value ? documentDetails.value.type : 'json',\n)\n\n/** Check if the form should be disabled (when input is empty) */\nconst isDisabled = computed<boolean>(() => {\n  return !inputContent.value.trim()\n})\n\n/**\n * Toggle watchMode based on whether the input is a local URL.\n * Only enables watch mode for local URLs, not for files or pasted content.\n */\nwatch(isLocalUrlInput, (value: boolean) => {\n  watchMode.value = value\n})\n\n/**\n * Handles errors during the import process.\n * Shows an error toast, invalidates the loader to show an error state,\n * and closes the command palette modal.\n *\n * @param errorMessage - The error message to display and log\n */\nconst handleImportError = async (errorMessage: string) => {\n  // Log the error\n  console.error(errorMessage)\n  toast(errorMessage, 'error')\n\n  // Invalidate the loader to show the error state\n  await loader.invalidate()\n\n  // Close the command palette\n  emit('close')\n}\n\n/**\n * Directly imports a document into the workspace without showing the modal.\n * This is used when there is only one workspace and it is empty.\n */\nconst handleImport = async (\n  newSource: string,\n  type?: ImportEventData['type'],\n): Promise<void> => {\n  loader.start()\n\n  const TEMP_DOCUMENT_NAME = 'drafts'\n\n  // First load the document into a draft store\n  // This is to get the title of the document so we can generate a unique slug for store\n  const draftStore = createWorkspaceStore({\n    fileLoader,\n    meta: {\n      /** Ensure we use the active proxy to fetch documents */\n      'x-scalar-active-proxy':\n        workspaceStore.workspace['x-scalar-active-proxy'],\n    },\n  })\n\n  const eventType = (() => {\n    if (type) {\n      return type\n    }\n\n    if (isUrlInput.value) {\n      return 'url'\n    }\n\n    return 'raw'\n  })()\n\n  const isSuccessfullyLoaded = await loadDocumentFromSource(\n    draftStore,\n    { source: newSource, type: eventType },\n    TEMP_DOCUMENT_NAME,\n    watchMode.value,\n  )\n\n  if (!isSuccessfullyLoaded) {\n    return handleImportError('Failed to import document')\n  }\n\n  const importResult = await importDocumentToWorkspace({\n    workspaceStore,\n    workspaceState: draftStore.exportWorkspace(),\n    name: TEMP_DOCUMENT_NAME,\n  })\n\n  if (!importResult.ok) {\n    return handleImportError(importResult.error)\n  }\n\n  // Validate the loader to show the success state\n  await loader.validate()\n\n  // Navigate to the document overview page\n  navigateToDocument(importResult.slug)\n\n  // Close the command palette\n  emit('close')\n}\n\n/** Navigate to the document overview page after successful import */\nconst navigateToDocument = (documentName: string): void => {\n  router.push({\n    name: 'document.overview',\n    params: { documentSlug: documentName },\n  })\n}\n\n/**\n * Handle file selection and import from file dialog.\n * Reads the file as text and imports it as OpenAPI or Postman collection.\n * Shows loading state during the import process.\n */\nconst { open: openSpecFileDialog } = useFileDialog({\n  onChange: (files) => {\n    const [file] = files ?? []\n\n    if (!file) {\n      return\n    }\n\n    loader.start()\n\n    const onLoad = async (event: ProgressEvent<FileReader>): Promise<void> => {\n      const text = event.target?.result as string\n      if (isPostmanCollection(text)) {\n        eventBus.emit('ui:open:command-palette', {\n          action: 'import-postman-collection',\n          payload: {\n            inputValue: text,\n          },\n        })\n        await loader.clear()\n        return\n      }\n      await handleImport(text, 'raw')\n    }\n\n    const reader = new FileReader()\n    reader.onload = onLoad\n    reader.readAsText(file)\n  },\n  multiple: false,\n  accept: '.json,.yaml,.yml',\n})\n\n/**\n * Handle input changes.\n * Detects cURL commands and redirects to the cURL import command.\n */\nconst handleInput = (value: string): void => {\n  const trimmed = value.trim()\n\n  if (trimmed.toLowerCase().startsWith('curl')) {\n    return eventBus.emit('ui:open:command-palette', {\n      action: 'import-curl-command',\n      payload: {\n        inputValue: value,\n      },\n    })\n  }\n\n  if (isPostmanCollection(trimmed)) {\n    return eventBus.emit('ui:open:command-palette', {\n      action: 'import-postman-collection',\n      payload: {\n        inputValue: value,\n      },\n    })\n  }\n\n  inputContent.value = value\n}\n\n/** Handle back navigation when user presses backspace on empty input */\nconst handleBack = (event: KeyboardEvent): void => {\n  emit('back', event)\n}\n</script>\n<template>\n  <CommandActionForm\n    :disabled=\"isDisabled\"\n    :loader\n    @submit=\"handleImport(inputContent)\">\n    <!-- URL or cURL input mode -->\n    <template v-if=\"!documentDetails || isUrlInput\">\n      <CommandActionInput\n        :modelValue=\"inputContent\"\n        placeholder=\"OpenAPI/Swagger/Postman URL or cURL\"\n        @delete=\"handleBack\"\n        @update:modelValue=\"handleInput\" />\n    </template>\n\n    <!-- Preview mode for pasted content -->\n    <template v-else>\n      <!-- Preview header with clear button -->\n      <div class=\"flex justify-between\">\n        <div class=\"text-c-2 min-h-8 w-full py-2 pl-12 text-center text-xs\">\n          Preview\n        </div>\n        <ScalarButton\n          class=\"hover:bg-b-2 relative ml-auto max-h-8 gap-1.5 p-2 text-xs\"\n          variant=\"ghost\"\n          @click=\"inputContent = ''\">\n          Clear\n        </ScalarButton>\n      </div>\n\n      <!-- Code preview with syntax highlighting -->\n      <ScalarCodeBlock\n        v-if=\"documentDetails && !isUrlInput\"\n        class=\"bg-b-2 mt-1 max-h-[40dvh] rounded border px-2 py-1 text-sm\"\n        :content=\"inputContent\"\n        :copy=\"false\"\n        :lang=\"documentType\" />\n    </template>\n\n    <!-- Actions: File upload and watch mode toggle -->\n    <template #options>\n      <div class=\"flex w-full flex-row items-center justify-between gap-3\">\n        <!-- Custom file upload slot or default button -->\n        <slot\n          :import=\"handleImport\"\n          name=\"fileUpload\">\n          <!-- Default file upload button -->\n          <ScalarButton\n            class=\"hover:bg-b-2 relative max-h-8 gap-1.5 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"openSpecFileDialog\">\n            JSON, or YAML File\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"Upload\"\n              size=\"md\" />\n          </ScalarButton>\n        </slot>\n\n        <!-- Watch mode toggle (only enabled for URL imports) -->\n        <ScalarTooltip\n          :content=\"\n            isUrlInput\n              ? 'Watch mode automatically updates the API client when the OpenAPI URL content changes, ensuring your client remains up-to-date.'\n              : 'Watch mode is only available for URL imports. When enabled it automatically updates the API client when the OpenAPI URL content changes.'\n          \"\n          placement=\"bottom\">\n          <WatchModeToggle\n            v-model=\"watchMode\"\n            :disabled=\"!isUrlInput\" />\n        </ScalarTooltip>\n      </div>\n    </template>\n\n    <!-- Dynamic submit button text based on import type -->\n    <template #submit>\n      Import\n      <template v-if=\"isUrlInput\">from URL</template>\n      <template v-else-if=\"documentDetails && documentType\">\n        <template v-if=\"documentDetails.title\">\n          \"{{ documentDetails.title }}\"\n        </template>\n        <template v-else>\n          {{ documentDetails.version }}\n        </template>\n      </template>\n      <template v-else>Collection</template>\n    </template>\n  </CommandActionForm>\n</template>\n"],"mappings":""}

package/dist/v2/features/command-palette/components/CommandPaletteImport.vue.script.js

@@ -0,0 +1,206 @@
+import { useFileDialog } from "../../../../hooks/useFileDialog.js";
+import CommandActionForm_default from "./CommandActionForm.vue.js";
+import CommandActionInput_default from "./CommandActionInput.vue.js";
+import { isUrl } from "../../../helpers/is-url.js";
+import { getOpenApiDocumentDetails } from "../helpers/get-openapi-document-details.js";
+import { importDocumentToWorkspace } from "../helpers/import-document-to-workspace.js";
+import { isPostmanCollection } from "../helpers/is-postman-collection.js";
+import { loadDocumentFromSource } from "../helpers/load-document-from-source.js";
+import WatchModeToggle_default from "./WatchModeToggle.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
+import { ScalarButton, ScalarCodeBlock, ScalarIcon, ScalarTooltip, useLoadingState } from "@scalar/components";
+import { useToasts } from "@scalar/use-toasts";
+import { useRouter } from "vue-router";
+import { createWorkspaceStore } from "@scalar/workspace-store/client";
+import { isLocalUrl } from "@scalar/helpers/url/is-local-url";
+//#region src/v2/features/command-palette/components/CommandPaletteImport.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex justify-between" };
+var _hoisted_2 = { class: "flex w-full flex-row items-center justify-between gap-3" };
+var CommandPaletteImport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "CommandPaletteImport",
+	props: {
+		workspaceStore: {},
+		eventBus: {},
+		fileLoader: {}
+	},
+	emits: ["close", "back"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const { toast } = useToasts();
+		const router = useRouter();
+		const loader = useLoadingState();
+		const inputContent = ref("");
+		const watchMode = ref(false);
+		/** Check if the input content is a URL */
+		const isUrlInput = computed(() => isUrl(inputContent.value));
+		const isLocalUrlInput = computed(() => isUrlInput.value && isLocalUrl(inputContent.value));
+		const documentDetails = computed(() => getOpenApiDocumentDetails(inputContent.value));
+		/** Get the document type for syntax highlighting */
+		const documentType = computed(() => documentDetails.value ? documentDetails.value.type : "json");
+		/** Check if the form should be disabled (when input is empty) */
+		const isDisabled = computed(() => {
+			return !inputContent.value.trim();
+		});
+		/**
+		* Toggle watchMode based on whether the input is a local URL.
+		* Only enables watch mode for local URLs, not for files or pasted content.
+		*/
+		watch(isLocalUrlInput, (value) => {
+			watchMode.value = value;
+		});
+		/**
+		* Handles errors during the import process.
+		* Shows an error toast, invalidates the loader to show an error state,
+		* and closes the command palette modal.
+		*
+		* @param errorMessage - The error message to display and log
+		*/
+		const handleImportError = async (errorMessage) => {
+			console.error(errorMessage);
+			toast(errorMessage, "error");
+			await loader.invalidate();
+			emit("close");
+		};
+		/**
+		* Directly imports a document into the workspace without showing the modal.
+		* This is used when there is only one workspace and it is empty.
+		*/
+		const handleImport = async (newSource, type) => {
+			loader.start();
+			const TEMP_DOCUMENT_NAME = "drafts";
+			const draftStore = createWorkspaceStore({
+				fileLoader: __props.fileLoader,
+				meta: { "x-scalar-active-proxy": __props.workspaceStore.workspace["x-scalar-active-proxy"] }
+			});
+			if (!await loadDocumentFromSource(draftStore, {
+				source: newSource,
+				type: (() => {
+					if (type) return type;
+					if (isUrlInput.value) return "url";
+					return "raw";
+				})()
+			}, TEMP_DOCUMENT_NAME, watchMode.value)) return handleImportError("Failed to import document");
+			const importResult = await importDocumentToWorkspace({
+				workspaceStore: __props.workspaceStore,
+				workspaceState: draftStore.exportWorkspace(),
+				name: TEMP_DOCUMENT_NAME
+			});
+			if (!importResult.ok) return handleImportError(importResult.error);
+			await loader.validate();
+			navigateToDocument(importResult.slug);
+			emit("close");
+		};
+		/** Navigate to the document overview page after successful import */
+		const navigateToDocument = (documentName) => {
+			router.push({
+				name: "document.overview",
+				params: { documentSlug: documentName }
+			});
+		};
+		/**
+		* Handle file selection and import from file dialog.
+		* Reads the file as text and imports it as OpenAPI or Postman collection.
+		* Shows loading state during the import process.
+		*/
+		const { open: openSpecFileDialog } = useFileDialog({
+			onChange: (files) => {
+				const [file] = files ?? [];
+				if (!file) return;
+				loader.start();
+				const onLoad = async (event) => {
+					const text = event.target?.result;
+					if (isPostmanCollection(text)) {
+						__props.eventBus.emit("ui:open:command-palette", {
+							action: "import-postman-collection",
+							payload: { inputValue: text }
+						});
+						await loader.clear();
+						return;
+					}
+					await handleImport(text, "raw");
+				};
+				const reader = new FileReader();
+				reader.onload = onLoad;
+				reader.readAsText(file);
+			},
+			multiple: false,
+			accept: ".json,.yaml,.yml"
+		});
+		/**
+		* Handle input changes.
+		* Detects cURL commands and redirects to the cURL import command.
+		*/
+		const handleInput = (value) => {
+			const trimmed = value.trim();
+			if (trimmed.toLowerCase().startsWith("curl")) return __props.eventBus.emit("ui:open:command-palette", {
+				action: "import-curl-command",
+				payload: { inputValue: value }
+			});
+			if (isPostmanCollection(trimmed)) return __props.eventBus.emit("ui:open:command-palette", {
+				action: "import-postman-collection",
+				payload: { inputValue: value }
+			});
+			inputContent.value = value;
+		};
+		/** Handle back navigation when user presses backspace on empty input */
+		const handleBack = (event) => {
+			emit("back", event);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CommandActionForm_default, {
+				disabled: isDisabled.value,
+				loader: unref(loader),
+				onSubmit: _cache[2] || (_cache[2] = ($event) => handleImport(inputContent.value))
+			}, {
+				options: withCtx(() => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "fileUpload", { import: handleImport }, () => [createVNode(unref(ScalarButton), {
+					class: "hover:bg-b-2 relative max-h-8 gap-1.5 p-2 text-xs",
+					variant: "outlined",
+					onClick: unref(openSpecFileDialog)
+				}, {
+					default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" JSON, or YAML File ", -1)), createVNode(unref(ScalarIcon), {
+						class: "text-c-3",
+						icon: "Upload",
+						size: "md"
+					})]),
+					_: 1
+				}, 8, ["onClick"])]), createVNode(unref(ScalarTooltip), {
+					content: isUrlInput.value ? "Watch mode automatically updates the API client when the OpenAPI URL content changes, ensuring your client remains up-to-date." : "Watch mode is only available for URL imports. When enabled it automatically updates the API client when the OpenAPI URL content changes.",
+					placement: "bottom"
+				}, {
+					default: withCtx(() => [createVNode(WatchModeToggle_default, {
+						modelValue: watchMode.value,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => watchMode.value = $event),
+						disabled: !isUrlInput.value
+					}, null, 8, ["modelValue", "disabled"])]),
+					_: 1
+				}, 8, ["content"])])]),
+				submit: withCtx(() => [_cache[6] || (_cache[6] = createTextVNode(" Import ", -1)), isUrlInput.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode("from URL")], 64)) : documentDetails.value && documentType.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [documentDetails.value.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" \"" + toDisplayString(documentDetails.value.title) + "\" ", 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(documentDetails.value.version), 1)], 64))], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode("Collection")], 64))]),
+				default: withCtx(() => [!documentDetails.value || isUrlInput.value ? (openBlock(), createBlock(CommandActionInput_default, {
+					key: 0,
+					modelValue: inputContent.value,
+					placeholder: "OpenAPI/Swagger/Postman URL or cURL",
+					onDelete: handleBack,
+					"onUpdate:modelValue": handleInput
+				}, null, 8, ["modelValue"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_1, [_cache[4] || (_cache[4] = createElementVNode("div", { class: "text-c-2 min-h-8 w-full py-2 pl-12 text-center text-xs" }, " Preview ", -1)), createVNode(unref(ScalarButton), {
+					class: "hover:bg-b-2 relative ml-auto max-h-8 gap-1.5 p-2 text-xs",
+					variant: "ghost",
+					onClick: _cache[0] || (_cache[0] = ($event) => inputContent.value = "")
+				}, {
+					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Clear ", -1)])]),
+					_: 1
+				})]), documentDetails.value && !isUrlInput.value ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
+					key: 0,
+					class: "bg-b-2 mt-1 max-h-[40dvh] rounded border px-2 py-1 text-sm",
+					content: inputContent.value,
+					copy: false,
+					lang: documentType.value
+				}, null, 8, ["content", "lang"])) : createCommentVNode("", true)], 64))]),
+				_: 3
+			}, 8, ["disabled", "loader"]);
+		};
+	}
+});
+//#endregion
+export { CommandPaletteImport_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CommandPaletteImport.vue.script.js.map

package/dist/v2/features/command-palette/components/CommandPaletteImport.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteImport.vue.script.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteImport.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Palette Import Component\n *\n * Provides a form for importing OpenAPI descriptions from URL, file, or pasted JSON/YAML.\n * Postman collection JSON and Postman files open {@link CommandPaletteImportPostman}.\n * cURL commands redirect to {@link CommandPaletteImportCurl}.\n *\n * Supports watch mode for URL imports to automatically update when content changes.\n */\nexport default {\n  name: 'CommandPaletteImport',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarCodeBlock,\n  ScalarIcon,\n  ScalarTooltip,\n  useLoadingState,\n} from '@scalar/components'\nimport { isLocalUrl } from '@scalar/helpers/url/is-local-url'\nimport type { LoaderPlugin } from '@scalar/json-magic/bundle'\nimport { useToasts } from '@scalar/use-toasts'\nimport {\n  createWorkspaceStore,\n  type WorkspaceStore,\n} from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref, watch } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { useFileDialog } from '@/hooks'\nimport { getOpenApiDocumentDetails } from '@/v2/features/command-palette/helpers/get-openapi-document-details'\nimport { importDocumentToWorkspace } from '@/v2/features/command-palette/helpers/import-document-to-workspace'\nimport { isPostmanCollection } from '@/v2/features/command-palette/helpers/is-postman-collection'\nimport {\n  loadDocumentFromSource,\n  type ImportEventData,\n} from '@/v2/features/command-palette/helpers/load-document-from-source'\nimport { isUrl } from '@/v2/helpers/is-url'\n\nimport CommandActionForm from './CommandActionForm.vue'\nimport CommandActionInput from './CommandActionInput.vue'\nimport WatchModeToggle from './WatchModeToggle.vue'\n\nconst { workspaceStore, eventBus, fileLoader } = defineProps<{\n  /** The workspace store for adding documents */\n  workspaceStore: WorkspaceStore\n  /** Event bus for emitting operation creation events */\n  eventBus: WorkspaceEventBus\n  /** Loader plugin for file import */\n  fileLoader?: LoaderPlugin\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the import is complete or cancelled */\n  (event: 'close'): void\n  /** Emitted when user navigates back (e.g., backspace on empty input) */\n  (event: 'back', keyboardEvent: KeyboardEvent): void\n}>()\n\ndefineSlots<{\n  /** Slot for custom file upload component that can trigger import */\n  fileUpload(props: {\n    /** Function to trigger import with source content and type */\n    import: (source: string, type: 'file' | 'raw') => Promise<void>\n  }): void\n}>()\n\nconst { toast } = useToasts()\n\nconst router = useRouter()\nconst loader = useLoadingState()\n\nconst inputContent = ref('')\nconst watchMode = ref(false)\n\n/** Check if the input content is a URL */\nconst isUrlInput = computed<boolean>(() => isUrl(inputContent.value))\nconst isLocalUrlInput = computed<boolean>(\n  () => isUrlInput.value && isLocalUrl(inputContent.value),\n)\n\nconst documentDetails = computed(() =>\n  getOpenApiDocumentDetails(inputContent.value),\n)\n\n/** Get the document type for syntax highlighting */\nconst documentType = computed<string>(() =>\n  documentDetails.value ? documentDetails.value.type : 'json',\n)\n\n/** Check if the form should be disabled (when input is empty) */\nconst isDisabled = computed<boolean>(() => {\n  return !inputContent.value.trim()\n})\n\n/**\n * Toggle watchMode based on whether the input is a local URL.\n * Only enables watch mode for local URLs, not for files or pasted content.\n */\nwatch(isLocalUrlInput, (value: boolean) => {\n  watchMode.value = value\n})\n\n/**\n * Handles errors during the import process.\n * Shows an error toast, invalidates the loader to show an error state,\n * and closes the command palette modal.\n *\n * @param errorMessage - The error message to display and log\n */\nconst handleImportError = async (errorMessage: string) => {\n  // Log the error\n  console.error(errorMessage)\n  toast(errorMessage, 'error')\n\n  // Invalidate the loader to show the error state\n  await loader.invalidate()\n\n  // Close the command palette\n  emit('close')\n}\n\n/**\n * Directly imports a document into the workspace without showing the modal.\n * This is used when there is only one workspace and it is empty.\n */\nconst handleImport = async (\n  newSource: string,\n  type?: ImportEventData['type'],\n): Promise<void> => {\n  loader.start()\n\n  const TEMP_DOCUMENT_NAME = 'drafts'\n\n  // First load the document into a draft store\n  // This is to get the title of the document so we can generate a unique slug for store\n  const draftStore = createWorkspaceStore({\n    fileLoader,\n    meta: {\n      /** Ensure we use the active proxy to fetch documents */\n      'x-scalar-active-proxy':\n        workspaceStore.workspace['x-scalar-active-proxy'],\n    },\n  })\n\n  const eventType = (() => {\n    if (type) {\n      return type\n    }\n\n    if (isUrlInput.value) {\n      return 'url'\n    }\n\n    return 'raw'\n  })()\n\n  const isSuccessfullyLoaded = await loadDocumentFromSource(\n    draftStore,\n    { source: newSource, type: eventType },\n    TEMP_DOCUMENT_NAME,\n    watchMode.value,\n  )\n\n  if (!isSuccessfullyLoaded) {\n    return handleImportError('Failed to import document')\n  }\n\n  const importResult = await importDocumentToWorkspace({\n    workspaceStore,\n    workspaceState: draftStore.exportWorkspace(),\n    name: TEMP_DOCUMENT_NAME,\n  })\n\n  if (!importResult.ok) {\n    return handleImportError(importResult.error)\n  }\n\n  // Validate the loader to show the success state\n  await loader.validate()\n\n  // Navigate to the document overview page\n  navigateToDocument(importResult.slug)\n\n  // Close the command palette\n  emit('close')\n}\n\n/** Navigate to the document overview page after successful import */\nconst navigateToDocument = (documentName: string): void => {\n  router.push({\n    name: 'document.overview',\n    params: { documentSlug: documentName },\n  })\n}\n\n/**\n * Handle file selection and import from file dialog.\n * Reads the file as text and imports it as OpenAPI or Postman collection.\n * Shows loading state during the import process.\n */\nconst { open: openSpecFileDialog } = useFileDialog({\n  onChange: (files) => {\n    const [file] = files ?? []\n\n    if (!file) {\n      return\n    }\n\n    loader.start()\n\n    const onLoad = async (event: ProgressEvent<FileReader>): Promise<void> => {\n      const text = event.target?.result as string\n      if (isPostmanCollection(text)) {\n        eventBus.emit('ui:open:command-palette', {\n          action: 'import-postman-collection',\n          payload: {\n            inputValue: text,\n          },\n        })\n        await loader.clear()\n        return\n      }\n      await handleImport(text, 'raw')\n    }\n\n    const reader = new FileReader()\n    reader.onload = onLoad\n    reader.readAsText(file)\n  },\n  multiple: false,\n  accept: '.json,.yaml,.yml',\n})\n\n/**\n * Handle input changes.\n * Detects cURL commands and redirects to the cURL import command.\n */\nconst handleInput = (value: string): void => {\n  const trimmed = value.trim()\n\n  if (trimmed.toLowerCase().startsWith('curl')) {\n    return eventBus.emit('ui:open:command-palette', {\n      action: 'import-curl-command',\n      payload: {\n        inputValue: value,\n      },\n    })\n  }\n\n  if (isPostmanCollection(trimmed)) {\n    return eventBus.emit('ui:open:command-palette', {\n      action: 'import-postman-collection',\n      payload: {\n        inputValue: value,\n      },\n    })\n  }\n\n  inputContent.value = value\n}\n\n/** Handle back navigation when user presses backspace on empty input */\nconst handleBack = (event: KeyboardEvent): void => {\n  emit('back', event)\n}\n</script>\n<template>\n  <CommandActionForm\n    :disabled=\"isDisabled\"\n    :loader\n    @submit=\"handleImport(inputContent)\">\n    <!-- URL or cURL input mode -->\n    <template v-if=\"!documentDetails || isUrlInput\">\n      <CommandActionInput\n        :modelValue=\"inputContent\"\n        placeholder=\"OpenAPI/Swagger/Postman URL or cURL\"\n        @delete=\"handleBack\"\n        @update:modelValue=\"handleInput\" />\n    </template>\n\n    <!-- Preview mode for pasted content -->\n    <template v-else>\n      <!-- Preview header with clear button -->\n      <div class=\"flex justify-between\">\n        <div class=\"text-c-2 min-h-8 w-full py-2 pl-12 text-center text-xs\">\n          Preview\n        </div>\n        <ScalarButton\n          class=\"hover:bg-b-2 relative ml-auto max-h-8 gap-1.5 p-2 text-xs\"\n          variant=\"ghost\"\n          @click=\"inputContent = ''\">\n          Clear\n        </ScalarButton>\n      </div>\n\n      <!-- Code preview with syntax highlighting -->\n      <ScalarCodeBlock\n        v-if=\"documentDetails && !isUrlInput\"\n        class=\"bg-b-2 mt-1 max-h-[40dvh] rounded border px-2 py-1 text-sm\"\n        :content=\"inputContent\"\n        :copy=\"false\"\n        :lang=\"documentType\" />\n    </template>\n\n    <!-- Actions: File upload and watch mode toggle -->\n    <template #options>\n      <div class=\"flex w-full flex-row items-center justify-between gap-3\">\n        <!-- Custom file upload slot or default button -->\n        <slot\n          :import=\"handleImport\"\n          name=\"fileUpload\">\n          <!-- Default file upload button -->\n          <ScalarButton\n            class=\"hover:bg-b-2 relative max-h-8 gap-1.5 p-2 text-xs\"\n            variant=\"outlined\"\n            @click=\"openSpecFileDialog\">\n            JSON, or YAML File\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"Upload\"\n              size=\"md\" />\n          </ScalarButton>\n        </slot>\n\n        <!-- Watch mode toggle (only enabled for URL imports) -->\n        <ScalarTooltip\n          :content=\"\n            isUrlInput\n              ? 'Watch mode automatically updates the API client when the OpenAPI URL content changes, ensuring your client remains up-to-date.'\n              : 'Watch mode is only available for URL imports. When enabled it automatically updates the API client when the OpenAPI URL content changes.'\n          \"\n          placement=\"bottom\">\n          <WatchModeToggle\n            v-model=\"watchMode\"\n            :disabled=\"!isUrlInput\" />\n        </ScalarTooltip>\n      </div>\n    </template>\n\n    <!-- Dynamic submit button text based on import type -->\n    <template #submit>\n      Import\n      <template v-if=\"isUrlInput\">from URL</template>\n      <template v-else-if=\"documentDetails && documentType\">\n        <template v-if=\"documentDetails.title\">\n          \"{{ documentDetails.title }}\"\n        </template>\n        <template v-else>\n          {{ documentDetails.version }}\n        </template>\n      </template>\n      <template v-else>Collection</template>\n    </template>\n  </CommandActionForm>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/command-palette/components/CommandPaletteImportCurl.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import CommandPaletteImportCurl_vue_vue_type_script_setup_true_lang_default from "./CommandPaletteImportCurl.vue.script.js";
+/* empty css                                       */
+//#region src/v2/features/command-palette/components/CommandPaletteImportCurl.vue
+var CommandPaletteImportCurl_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CommandPaletteImportCurl_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-f4568236"]]);
+//#endregion
+export { CommandPaletteImportCurl_default as default };
+
+//# sourceMappingURL=CommandPaletteImportCurl.vue.js.map

package/dist/v2/features/command-palette/components/CommandPaletteImportCurl.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPaletteImportCurl.vue.js","names":[],"sources":["../../../../../src/v2/features/command-palette/components/CommandPaletteImportCurl.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Command Palette Import cURL Component\n *\n * Provides a form for importing API requests from cURL commands.\n * Parses the cURL command to extract the HTTP method, URL, path, headers,\n * and body, then creates a new operation in the selected document.\n *\n * Validates that no conflicting operation exists at the same path/method.\n *\n * @example\n * <CommandPaletteImportCurl\n *   :workspaceStore=\"workspaceStore\"\n *   :eventBus=\"eventBus\"\n *   :curl=\"curlCommand\"\n *   @close=\"handleClose\"\n *   @back=\"handleBack\"\n * />\n */\nexport default {\n  name: 'CommandPaletteImportCurl',\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarListbox,\n  type ScalarComboboxOption,\n} from '@scalar/components'\nimport type { WorkspaceStore } from '@scalar/workspace-store/client'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport { computed, ref } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport HttpMethod from '@/v2/blocks/operation-code-sample/components/HttpMethod.vue'\nimport CommandActionForm from '@/v2/features/command-palette/components/CommandActionForm.vue'\nimport CommandActionInput from '@/v2/features/command-palette/components/CommandActionInput.vue'\nimport { getOperationFromCurl } from '@/v2/features/command-palette/helpers/get-operation-from-curl'\n\nconst { workspaceStore, inputValue, eventBus } = defineProps<{\n  /** The workspace store for accessing documents and operations */\n  workspaceStore: WorkspaceStore\n  /** Event bus for emitting operation creation events */\n  eventBus: WorkspaceEventBus\n  /** The cURL command string to parse and import */\n  inputValue: string\n}>()\n\nconst emit = defineEmits<{\n  /** Emitted when the import is complete */\n  (event: 'close'): void\n  /** Emitted when user navigates back (e.g., backspace on empty input) */\n  (event: 'back', keyboardEvent: KeyboardEvent): void\n}>()\n\nconst router = useRouter()\n\nconst exampleKey = ref('')\n\n/** Trimmed version of the example key for validation and submission */\nconst exampleKeyTrimmed = computed<string>(() => exampleKey.value.trim())\n\n/** Parse the cURL command to extract path, method, and operation details */\nconst { path, method, operation } = getOperationFromCurl(inputValue)\n\n/** List of all available documents (collections) in the workspace */\nconst documents = computed(() =>\n  Object.keys(workspaceStore.workspace.documents).map((document) => ({\n    id: document,\n    label: document,\n  })),\n)\n\nconst selectedDocument = ref<ScalarComboboxOption | undefined>(\n  documents.value[0],\n)\n\n/**\n * Check if the form should be disabled.\n * Disabled when:\n * - Example key is empty\n * - No document is selected\n * - An operation with the same path and method already exists in the selected document\n */\nconst isDisabled = computed<boolean>(() => {\n  if (!exampleKeyTrimmed.value || !selectedDocument.value) {\n    return true\n  }\n\n  /** Prevent creating duplicate operations at the same path/method */\n  const document = workspaceStore.workspace.documents[selectedDocument.value.id]\n  if (document?.paths?.[path]?.[method]) {\n    return true\n  }\n\n  return false\n})\n\n/**\n * Handle the import submission.\n * Creates a new operation in the selected document from the parsed cURL command.\n */\nconst handleImportClick = (): void => {\n  const documentName = selectedDocument.value\n\n  if (isDisabled.value || !documentName) {\n    return\n  }\n\n  /** Re-parse with the example key to include it in the operation */\n  const result = getOperationFromCurl(inputValue, exampleKeyTrimmed.value)\n\n  eventBus.emit('operation:create:operation', {\n    documentName: documentName.id,\n    path: result.path,\n    method: result.method,\n    operation: result.operation,\n    exampleKey: exampleKeyTrimmed.value,\n    callback: (success) => {\n      if (success) {\n        // build the sidebar\n        workspaceStore.buildSidebar(documentName.id)\n\n        const path = result.path.startsWith('/')\n          ? result.path\n          : `/${result.path}`\n\n        // navigate to the operation\n        router.push({\n          name: 'example',\n          params: {\n            documentSlug: documentName.id,\n            pathEncoded: encodeURIComponent(path),\n            method: result.method,\n            exampleName: exampleKeyTrimmed.value,\n          },\n        })\n      }\n    },\n  })\n\n  emit('close')\n}\n\n/** Handle back navigation when user presses backspace on empty input */\nconst handleBack = (event: KeyboardEvent): void => {\n  emit('back', event)\n}\n</script>\n<template>\n  <CommandActionForm\n    :disabled=\"isDisabled\"\n    @submit=\"handleImportClick\">\n    <!-- Example key input -->\n    <CommandActionInput\n      v-model=\"exampleKey\"\n      placeholder=\"Curl example key (e.g., example-1)\"\n      @delete=\"handleBack\" />\n\n    <!-- Preview of the parsed cURL request (method + URL + path) -->\n    <div class=\"flex flex-1 flex-col gap-2\">\n      <div\n        class=\"flex h-9 flex-row items-center gap-2 rounded border p-[3px] text-sm\">\n        <HttpMethod\n          class=\"border-r-1 px-1\"\n          :method=\"method\" />\n        <span class=\"scroll-timeline-x whitespace-nowrap\">\n          {{ operation.servers?.[0]?.url || '' }}{{ path }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Document selector -->\n    <template #options>\n      <div class=\"flex items-center gap-2\">\n        <ScalarListbox\n          v-model=\"selectedDocument\"\n          :options=\"documents\">\n          <ScalarButton\n            class=\"hover:bg-b-2 max-h-8 w-full justify-between gap-1 p-2 text-xs\"\n            variant=\"outlined\">\n            <span\n              class=\"whitespace-nowrap\"\n              :class=\"selectedDocument ? 'text-c-1' : 'text-c-3'\">\n              {{\n                selectedDocument ? selectedDocument.label : 'Select Collection'\n              }}\n            </span>\n            <ScalarIcon\n              class=\"text-c-3\"\n              icon=\"ChevronDown\"\n              size=\"md\" />\n          </ScalarButton>\n        </ScalarListbox>\n      </div>\n    </template>\n\n    <template #submit>Import Request</template>\n  </CommandActionForm>\n</template>\n<style scoped>\n/**\n * Custom horizontal scroll for the URL preview.\n * Hides scrollbar for a cleaner appearance while maintaining scroll functionality.\n */\n.scroll-timeline-x {\n  overflow: auto;\n  scroll-timeline: --scroll-timeline x;\n  /* Firefox support */\n  scroll-timeline: --scroll-timeline horizontal;\n  /* Hide scrollbar in IE and Edge */\n  -ms-overflow-style: none;\n  /* Hide scrollbar in Firefox */\n  scrollbar-width: none;\n}\n\n/* Hide scrollbar in Chrome, Safari, and Opera */\n.scroll-timeline-x::-webkit-scrollbar {\n  display: none;\n}\n</style>\n"],"mappings":""}