@scalar/api-client 2.38.1 → 2.38.2

package/dist/code-input-iq-moLxi.js

@@ -0,0 +1,775 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BmmBcIzD.js";
+import { Fragment, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, toRef, unref, useAttrs, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { ScalarButton, ScalarComboboxMultiselect, ScalarDropdown, ScalarDropdownDivider, ScalarDropdownItem, ScalarIcon, ScalarTeleport, ScalarTooltip } from "@scalar/components";
+import { isDefined } from "@scalar/helpers/array/is-defined";
+import { ScalarIconPlus } from "@scalar/icons";
+import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType, colorPicker, useCodeMirror, useDropdown } from "@scalar/use-codemirror";
+import { nanoid } from "nanoid";
+import { onClickOutside } from "@vueuse/core";
+import Fuse from "fuse.js";
+import { REGEX } from "@scalar/helpers/regex/regex-helpers";
+//#region src/v2/components/data-table/DataTableInputSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = { class: "group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline" };
+var _hoisted_2$2 = { class: "text-c-1 whitespace-nowrap" };
+var _hoisted_3$2 = { class: "text-c-1 overflow-hidden text-ellipsis" };
+var _hoisted_4$2 = { class: "overflow-hidden text-ellipsis" };
+var _hoisted_5$1 = { class: "flex h-4 w-4 items-center justify-center" };
+//#endregion
+//#region src/v2/components/data-table/DataTableInputSelect.vue
+var DataTableInputSelect_default = /* @__PURE__ */ defineComponent({
+	__name: "DataTableInputSelect",
+	props: {
+		modelValue: { type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		] },
+		value: {},
+		default: { type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		] },
+		canAddCustomValue: {
+			type: Boolean,
+			default: true
+		},
+		type: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const options = computed(() => props.value ?? []);
+		const addingCustomValue = ref(false);
+		const customValue = ref("");
+		const inputRef = ref(null);
+		watch(customValue, (newValue) => {
+			emit("update:modelValue", newValue);
+		});
+		const updateSelected = (value) => {
+			emit("update:modelValue", value);
+			addingCustomValue.value = false;
+		};
+		const addCustomValue = () => {
+			if (customValue.value.trim()) updateSelected(customValue.value);
+		};
+		const handleBlur = () => {
+			if (!customValue.value.trim()) emit("update:modelValue", "");
+			addingCustomValue.value = false;
+		};
+		const isSelected = (value) => {
+			return props.modelValue.toString() === value;
+		};
+		watch(addingCustomValue, (newValue) => {
+			if (newValue) nextTick(() => {
+				inputRef.value?.focus();
+			});
+		});
+		const initialValue = computed(() => {
+			return props.modelValue !== void 0 ? props.modelValue : props.default;
+		});
+		/** Options for the array type */
+		const arrayOptions = computed(() => options.value.map((option) => {
+			const id = option.toString();
+			return {
+				id,
+				label: id,
+				value: id
+			};
+		}));
+		/** Filter the options by what is selected */
+		const selectedArrayOptions = computed(() => {
+			const selectedValues = new Set(props.modelValue.toString().split(","));
+			return arrayOptions.value.filter((option) => selectedValues.has(option.id));
+		});
+		/** Update the model value when the selected options change */
+		const updateSelectedOptions = (selectedOptions) => {
+			emit("update:modelValue", selectedOptions.map((option) => option.value).join(","));
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [__props.type === "array" ? (openBlock(), createBlock(unref(ScalarComboboxMultiselect), {
+				key: 0,
+				modelValue: selectedArrayOptions.value,
+				options: arrayOptions.value,
+				"onUpdate:modelValue": updateSelectedOptions
+			}, {
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					class: "custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none",
+					fullWidth: "",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_2$2, toDisplayString(selectedArrayOptions.value.length > 0 ? selectedArrayOptions.value.map((option) => option.label).join(", ") : "Select a value"), 1), createVNode(unref(ScalarIcon), {
+						class: "min-w-4",
+						icon: "ChevronDown",
+						size: "md"
+					})]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["modelValue", "options"])) : addingCustomValue.value ? withDirectives((openBlock(), createElementBlock("input", {
+				key: 1,
+				ref_key: "inputRef",
+				ref: inputRef,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customValue.value = $event),
+				class: "text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none",
+				placeholder: "Value",
+				type: "text",
+				onBlur: handleBlur,
+				onKeyup: withKeys(addCustomValue, ["enter"])
+			}, null, 544)), [[vModelText, customValue.value]]) : (openBlock(), createBlock(unref(ScalarDropdown), {
+				key: 2,
+				resize: "",
+				value: initialValue.value
+			}, {
+				items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option) => {
+					return openBlock(), createBlock(unref(ScalarDropdownItem), {
+						key: option,
+						class: "group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap",
+						value: option,
+						onClick: ($event) => updateSelected(option)
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-4 w-4 items-center justify-center rounded-full p-[3px]", isSelected(option) ? "bg-c-accent text-b-1" : "shadow-border text-transparent"]) }, [createVNode(unref(ScalarIcon), {
+							class: "size-2.5",
+							icon: "Checkmark",
+							thickness: "3"
+						})], 2), createElementVNode("span", _hoisted_4$2, toDisplayString(option), 1)]),
+						_: 2
+					}, 1032, ["value", "onClick"]);
+				}), 128)), __props.canAddCustomValue ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [options.value.length ? (openBlock(), createBlock(unref(ScalarDropdownDivider), { key: 0 })) : createCommentVNode("", true), createVNode(unref(ScalarDropdownItem), {
+					class: "flex items-center gap-1.5",
+					onClick: _cache[1] || (_cache[1] = ($event) => addingCustomValue.value = true)
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_5$1, [createVNode(unref(ScalarIcon), {
+						icon: "Add",
+						size: "sm"
+					})]), _cache[2] || (_cache[2] = createElementVNode("span", null, "Add value", -1))]),
+					_: 1
+				})], 64)) : createCommentVNode("", true)]),
+				default: withCtx(() => [createVNode(unref(ScalarButton), {
+					class: "size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none",
+					variant: "ghost"
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_3$2, toDisplayString(initialValue.value ?? "Select a value"), 1), createVNode(unref(ScalarIcon), {
+						icon: "ChevronDown",
+						size: "md"
+					})]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["value"]))]);
+		};
+	}
+});
+//#endregion
+//#region src/v2/features/environments/components/EnvironmentVariablesDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = {
+	key: 0,
+	class: "gap-1/2 flex flex-col"
+};
+var _hoisted_2$1 = ["onClick"];
+var _hoisted_3$1 = { class: "flex items-center gap-2 whitespace-nowrap" };
+var _hoisted_4$1 = { class: "w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap" };
+//#endregion
+//#region src/v2/features/environments/components/EnvironmentVariablesDropdown.vue
+var EnvironmentVariablesDropdown_default = /* @__PURE__ */ defineComponent({
+	__name: "EnvironmentVariablesDropdown",
+	props: {
+		query: {},
+		environment: {},
+		dropdownPosition: {}
+	},
+	emits: ["select", "redirect"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const isOpen = ref(true);
+		const dropdownRef = ref(null);
+		const selectedVariableIndex = ref(0);
+		const redirectToEnvironment = () => {
+			emit("redirect");
+			isOpen.value = false;
+		};
+		/** Normalize the variables to have a name and value */
+		const normalizedVariables = computed(() => __props.environment.variables.map((v) => ({
+			key: v.name,
+			value: typeof v.value === "string" ? v.value : v.value.default
+		})));
+		const fuse = new Fuse(normalizedVariables.value, { keys: ["key", "value"] });
+		const filteredVariables = computed(() => {
+			if (!__props.query)
+ /** return the last 4 environment variables on first display */
+			return normalizedVariables.value.slice(-4).filter(({ key, value }) => key !== "" || value !== "");
+			/** filter environment variables by name */
+			const result = fuse.search(__props.query, { limit: 10 });
+			if (result.length > 0) return result.map((res) => res.item).filter(({ key, value }) => key !== "" || value !== "");
+			return [];
+		});
+		const selectVariable = (variableKey) => {
+			emit("select", variableKey);
+		};
+		const handleArrowKey = (direction) => {
+			const offset = direction === "up" ? -1 : 1;
+			const length = filteredVariables.value.length;
+			if (length === 0) return;
+			selectedVariableIndex.value = (selectedVariableIndex.value + offset + length) % length;
+		};
+		const handleSelect = () => {
+			if (selectedVariableIndex.value >= 0) {
+				const selectedVariable = filteredVariables.value[selectedVariableIndex.value];
+				if (selectedVariable) selectVariable(selectedVariable.key);
+			}
+		};
+		__expose({
+			handleArrowKey,
+			handleSelect
+		});
+		onMounted(() => {
+			selectedVariableIndex.value = 0;
+		});
+		const dropdownStyle = computed(() => {
+			return {
+				left: (__props.dropdownPosition?.left ?? 0) + "px",
+				top: (__props.dropdownPosition?.top ?? 0) + 5 + "px"
+			};
+		});
+		onClickOutside(dropdownRef, () => {
+			isOpen.value = false;
+		}, { ignore: [dropdownRef] });
+		return (_ctx, _cache) => {
+			return isOpen.value ? (openBlock(), createBlock(unref(ScalarTeleport), {
+				key: 0,
+				class: "scalar-client"
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "dropdownRef",
+					ref: dropdownRef,
+					class: "custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75",
+					style: normalizeStyle(dropdownStyle.value)
+				}, [filteredVariables.value.length ? (openBlock(), createElementBlock("ul", _hoisted_1$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredVariables.value, (item, index) => {
+					return openBlock(), createElementBlock("li", {
+						key: item.key,
+						class: normalizeClass(["font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150", { "bg-b-2": index === selectedVariableIndex.value }]),
+						onClick: ($event) => selectVariable(item.key)
+					}, [createElementVNode("div", _hoisted_3$1, [createElementVNode("span", {
+						class: "h-2.25 w-2.25 min-w-2.25 rounded-full",
+						style: normalizeStyle({ backgroundColor: __props.environment.color })
+					}, null, 4), createTextVNode(" " + toDisplayString(item.key), 1)]), createElementVNode("span", _hoisted_4$1, toDisplayString(item.value), 1)], 10, _hoisted_2$1);
+				}), 128))])) : (openBlock(), createBlock(unref(ScalarButton), {
+					key: 1,
+					class: "font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150",
+					variant: "outlined",
+					onClick: redirectToEnvironment
+				}, {
+					default: withCtx(() => [createVNode(unref(ScalarIconPlus), { class: "size-3" }), _cache[0] || (_cache[0] = createTextVNode(" Add Variable ", -1))]),
+					_: 1
+				})), _cache[1] || (_cache[1] = createElementVNode("div", { class: "bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg" }, null, -1))], 4)]),
+				_: 1
+			})) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region src/v2/components/code-input/code-variable-widget.ts
+/**
+* Displays the value of a variable of the active environment in a pill.
+* Uses Vue for tooltip functionality.
+*/
+var PillWidget = class PillWidget extends WidgetType {
+	app;
+	pillColor;
+	variableInfo;
+	constructor(variableName, environment) {
+		super();
+		this.variableName = variableName;
+		this.pillColor = environment?.color || "var(--scalar-color-1)";
+		const variable = environment?.variables?.find((v) => v.name === variableName);
+		const value = variable ? typeof variable.value === "string" ? variable.value : variable.value?.default : void 0;
+		this.variableInfo = {
+			value: value || "No value",
+			hasValue: Boolean(value)
+		};
+	}
+	toDOM() {
+		const span = document.createElement("span");
+		span.className = "cm-pill";
+		span.textContent = this.variableName;
+		span.style.setProperty("--tw-bg-base", this.pillColor);
+		span.style.opacity = this.variableInfo.hasValue ? "1" : "0.5";
+		this.app = createApp(defineComponent({ render: () => {
+			const tooltipTrigger = h("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [h("span", this.variableName)]);
+			return h(ScalarTooltip, {
+				content: this.variableInfo.value,
+				delay: 0,
+				placement: "bottom",
+				offset: 6
+			}, { default: () => tooltipTrigger });
+		} }));
+		this.app.mount(span);
+		return span;
+	}
+	destroy() {
+		if (this.app) {
+			this.app.unmount();
+			this.app = null;
+		}
+	}
+	eq(other) {
+		return other instanceof PillWidget && other.variableName === this.variableName && other.pillColor === this.pillColor && other.variableInfo.value === this.variableInfo.value && other.variableInfo.hasValue === this.variableInfo.hasValue;
+	}
+	ignoreEvent() {
+		return false;
+	}
+};
+/**
+* Styles the active environment variable pill.
+* This plugin creates decorations for environment variables in the editor.
+*/
+var pillPlugin = (props) => ViewPlugin.fromClass(class {
+	decorations;
+	lastEnvironment;
+	constructor(view) {
+		this.lastEnvironment = props.environment;
+		this.decorations = this.buildDecorations(view);
+	}
+	update(update) {
+		if (props.environment !== this.lastEnvironment) {
+			this.lastEnvironment = props.environment;
+			this.decorations = this.buildDecorations(update.view);
+			return;
+		}
+		if (update.docChanged || update.viewportChanged) this.decorations = this.buildDecorations(update.view);
+	}
+	buildDecorations(view) {
+		const builder = new RangeSetBuilder();
+		for (const { from, to } of view.visibleRanges) {
+			const text = view.state.doc.sliceString(from, to);
+			const regex = new RegExp(REGEX.VARIABLES.source, REGEX.VARIABLES.flags);
+			let match;
+			while ((match = regex.exec(text)) !== null) {
+				const start = from + match.index;
+				const end = start + match[0].length;
+				const variableName = match[1] ?? "";
+				if (view.state.doc.sliceString(start, end).includes("\n")) continue;
+				builder.add(start, end, Decoration.widget({
+					widget: new PillWidget(variableName, props.environment),
+					side: 1
+				}));
+			}
+		}
+		return builder.finish();
+	}
+}, { decorations: (v) => v.decorations });
+/**
+* Custom backspace handler for the editor.
+* Handles special cases like removing entire variable syntax and clearing all content.
+*/
+var backspaceCommand = EditorView.domEventHandlers({ keydown(event, view) {
+	if (event.key !== "Backspace") return false;
+	const { state } = view;
+	const { from, to } = state.selection.main;
+	if (from === 0 && to === state.doc.length) {
+		view.dispatch({
+			changes: {
+				from: 0,
+				to: state.doc.length
+			},
+			selection: { anchor: 0 }
+		});
+		event.preventDefault();
+		return true;
+	}
+	if (from === to && from >= 2) {
+		if (state.doc.sliceString(from - 2, from) === "}}") {
+			view.dispatch({
+				changes: {
+					from: from - 2,
+					to: from
+				},
+				selection: { anchor: from - 2 }
+			});
+			event.preventDefault();
+			return true;
+		}
+	}
+	return false;
+} });
+//#endregion
+//#region src/v2/components/code-input/CodeInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "whitespace-nowrap" };
+var _hoisted_2 = ["id"];
+var _hoisted_3 = {
+	key: 0,
+	class: "z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block",
+	role: "alert"
+};
+var _hoisted_4 = {
+	key: 5,
+	class: "centered-y text-orange absolute right-7 text-xs"
+};
+var _hoisted_5 = {
+	key: 6,
+	class: "centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1"
+};
+var _hoisted_6 = {
+	key: 7,
+	class: "required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0"
+};
+//#endregion
+//#region src/v2/components/code-input/CodeInput.vue
+var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "CodeInput",
+	props: {
+		modelValue: { type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		] },
+		environment: {},
+		type: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		},
+		layout: { default: "desktop" },
+		enum: {},
+		examples: {},
+		default: { type: [
+			String,
+			Number,
+			Boolean,
+			Array,
+			Object
+		] },
+		nullable: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: {},
+		required: { type: Boolean },
+		colorPicker: {
+			type: Boolean,
+			default: false
+		},
+		lineNumbers: {
+			type: Boolean,
+			default: false
+		},
+		lint: {
+			type: Boolean,
+			default: false
+		},
+		lineWrapping: {
+			type: Boolean,
+			default: false
+		},
+		language: {},
+		extensions: { default: () => [] },
+		disableTabIndent: {
+			type: Boolean,
+			default: false
+		},
+		disableEnter: {
+			type: Boolean,
+			default: false
+		},
+		disableCloseBrackets: {
+			type: Boolean,
+			default: false
+		},
+		emitOnBlur: {
+			type: Boolean,
+			default: true
+		},
+		withVariables: {
+			type: Boolean,
+			default: true
+		},
+		alwaysEmitChange: {
+			type: Boolean,
+			default: false
+		},
+		handleFieldChange: { type: Function },
+		handleFieldSubmit: { type: Function },
+		linethrough: { type: Boolean }
+	},
+	emits: [
+		"update:modelValue",
+		"submit",
+		"blur",
+		"redirectToEnvironment"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const attrs = useAttrs();
+		const componentId = attrs.id || `id-${nanoid()}`;
+		const isFocused = ref(false);
+		/**
+		* Determines if we should render a select dropdown for boolean types.
+		*/
+		const isBooleanMode = computed(() => {
+			if (__props.enum?.length) return false;
+			return __props.type === "boolean" || Array.isArray(__props.type) && __props.type.includes("boolean");
+		});
+		/**
+		* Options for boolean select mode.
+		*/
+		const booleanOptions = computed(() => __props.nullable ? [
+			"true",
+			"false",
+			"null"
+		] : ["true", "false"]);
+		/**
+		* Default type when dealing with type arrays.
+		* Finds the first non-null type.
+		*/
+		const defaultType = computed(() => {
+			if (Array.isArray(__props.type)) return __props.type.find((t) => t !== "null") ?? "string";
+			return __props.type;
+		});
+		/**
+		* Handles value changes during typing.
+		*/
+		const handleChange = (value) => {
+			if (!__props.alwaysEmitChange && value === serializeValue(__props.modelValue)) return;
+			if (__props.handleFieldChange) __props.handleFieldChange(value);
+			else emit("update:modelValue", value);
+		};
+		/**
+		* Handles form submission (enter key or blur with emitOnBlur).
+		*/
+		const handleSubmit = (value) => {
+			if (__props.handleFieldSubmit) __props.handleFieldSubmit(value);
+			else emit("submit", value);
+		};
+		/**
+		* Handles input blur event.
+		*/
+		const handleBlur = (value) => {
+			isFocused.value = false;
+			if (__props.emitOnBlur && __props.modelValue) handleSubmit(value);
+			emit("blur", value);
+		};
+		/**
+		* Handles model value updates from select components.
+		*/
+		const handleSelectChange = (value) => emit("update:modelValue", value);
+		/**
+		* Build extensions array.
+		* Note: Extensions are not reactive after initialization.
+		*/
+		const buildExtensions = () => {
+			const extensionsList = [...__props.extensions];
+			if (__props.colorPicker) extensionsList.push(colorPicker);
+			return extensionsList;
+		};
+		/**
+		* Reactive pill plugin for environment variable visualization.
+		*/
+		const pillPluginExtension = computed(() => pillPlugin({
+			environment: __props.environment,
+			isReadOnly: __props.layout === "modal"
+		}));
+		/**
+		* Combined extensions for CodeMirror.
+		*/
+		const codeMirrorExtensions = computed(() => [
+			...buildExtensions(),
+			pillPluginExtension.value,
+			backspaceCommand
+		]);
+		const codeMirrorRef = ref(null);
+		/** Converts the model value to a string for CodeMirror */
+		const serializeValue = (value) => {
+			if (typeof value === "string") return value;
+			return JSON.stringify(value);
+		};
+		const { codeMirror } = useCodeMirror({
+			content: toRef(() => serializeValue(__props.modelValue)),
+			onChange: (value) => {
+				handleChange(value);
+				updateDropdownVisibility();
+			},
+			onFocus: () => {
+				isFocused.value = true;
+			},
+			onBlur: handleBlur,
+			codeMirrorRef,
+			disableTabIndent: toRef(() => __props.disableTabIndent),
+			disableEnter: toRef(() => __props.disableEnter),
+			disableCloseBrackets: toRef(() => __props.disableCloseBrackets),
+			lineNumbers: toRef(() => __props.lineNumbers),
+			language: toRef(() => __props.language),
+			lint: toRef(() => __props.lint),
+			extensions: codeMirrorExtensions,
+			placeholder: toRef(() => __props.placeholder)
+		});
+		/**
+		* Handle autofocus attribute.
+		*/
+		watch(codeMirror, () => {
+			if (codeMirror.value && Object.hasOwn(attrs, "autofocus")) codeMirror.value.focus();
+		});
+		const showDropdown = ref(false);
+		const dropdownQuery = ref("");
+		const dropdownPosition = ref({
+			left: 0,
+			top: 0
+		});
+		const dropdownRef = ref(null);
+		const { handleDropdownSelect, updateDropdownVisibility } = useDropdown({
+			codeMirror,
+			query: dropdownQuery,
+			showDropdown,
+			dropdownPosition
+		});
+		/**
+		* Determines if the environment variable dropdown should be visible.
+		*/
+		const displayVariablesDropdown = computed(() => {
+			return showDropdown.value && __props.withVariables && __props.layout !== "modal" && Boolean(__props.environment);
+		});
+		/**
+		* Handles keyboard navigation for dropdown and form submission.
+		*/
+		const handleKeyDown = (key, event) => {
+			if (showDropdown.value) {
+				if (key === "down" || key === "up") {
+					event.preventDefault();
+					dropdownRef.value?.handleArrowKey(key);
+				} else if (key === "enter") {
+					event.preventDefault();
+					dropdownRef.value?.handleSelect();
+				}
+				return;
+			}
+			if (key === "escape" && !__props.disableTabIndent) event.stopPropagation();
+			if (key === "enter" && event.target instanceof HTMLDivElement) handleSubmit(event.target.textContent ?? "");
+		};
+		__expose({
+			focus: (position) => {
+				if (!codeMirror.value) return;
+				codeMirror.value.focus();
+				if (!isDefined(position)) return;
+				const anchor = (() => {
+					if (position === "start") return 0;
+					if (position === "end") return codeMirror.value.state.doc.length;
+					return position;
+				})();
+				codeMirror.value.dispatch({
+					selection: { anchor },
+					scrollIntoView: true
+				});
+			},
+			isFocused,
+			handleChange,
+			handleSubmit,
+			handleBlur,
+			booleanOptions,
+			codeMirror,
+			modelValue: __props.modelValue,
+			cursorPosition: () => codeMirror.value?.state.selection.main.head,
+			serializeValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				__props.disabled ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["text-c-2 flex cursor-default items-center justify-center", {
+						"font-code pr-2 pl-1 text-base": __props.layout === "modal",
+						"px-2": __props.layout !== "modal",
+						"line-through": __props.linethrough
+					}]),
+					"data-testid": "code-input-disabled"
+				}, [createElementVNode("span", _hoisted_1, toDisplayString(__props.modelValue), 1)], 2)) : __props.enum?.length ? (openBlock(), createBlock(DataTableInputSelect_default, {
+					key: 1,
+					default: __props.default,
+					modelValue: __props.modelValue,
+					type: defaultType.value,
+					value: __props.enum,
+					"onUpdate:modelValue": handleSelectChange
+				}, null, 8, [
+					"default",
+					"modelValue",
+					"type",
+					"value"
+				])) : isBooleanMode.value ? (openBlock(), createBlock(DataTableInputSelect_default, {
+					key: 2,
+					default: __props.default,
+					modelValue: __props.modelValue,
+					value: booleanOptions.value,
+					"onUpdate:modelValue": handleSelectChange
+				}, null, 8, [
+					"default",
+					"modelValue",
+					"value"
+				])) : __props.examples?.length ? (openBlock(), createBlock(DataTableInputSelect_default, {
+					key: 3,
+					default: __props.default,
+					modelValue: __props.modelValue,
+					value: __props.examples,
+					"onUpdate:modelValue": handleSelectChange
+				}, null, 8, [
+					"default",
+					"modelValue",
+					"value"
+				])) : (openBlock(), createElementBlock("div", mergeProps({
+					key: 4,
+					id: unref(componentId)
+				}, _ctx.$attrs, {
+					ref_key: "codeMirrorRef",
+					ref: codeMirrorRef,
+					class: ["group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline", {
+						"line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1": __props.lineWrapping,
+						"flow-code-input--error": __props.error,
+						"line-through": __props.linethrough
+					}],
+					onKeydown: [
+						_cache[0] || (_cache[0] = withKeys(withModifiers(($event) => handleKeyDown("down", $event), ["stop"]), ["down"])),
+						_cache[1] || (_cache[1] = withKeys(($event) => handleKeyDown("enter", $event), ["enter"])),
+						_cache[2] || (_cache[2] = withKeys(($event) => handleKeyDown("escape", $event), ["escape"])),
+						_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => handleKeyDown("up", $event), ["stop"]), ["up"]))
+					]
+				}), [!__props.disableTabIndent ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[5] || (_cache[5] = [
+					createTextVNode(" Press ", -1),
+					createElementVNode("kbd", { class: "-mx-0.25 rounded border px-0.5 font-mono" }, "Esc", -1),
+					createTextVNode(" then ", -1),
+					createElementVNode("kbd", { class: "-mx-0.25 rounded border px-0.5 font-mono" }, "Tab", -1),
+					createTextVNode(" to exit ", -1)
+				])])) : createCommentVNode("", true)], 16, _hoisted_2)),
+				_ctx.$slots.warning ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "warning", {}, void 0, true)])) : createCommentVNode("", true),
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "icon", {}, void 0, true)])) : createCommentVNode("", true),
+				__props.required ? (openBlock(), createElementBlock("div", _hoisted_6, " Required ")) : createCommentVNode("", true),
+				displayVariablesDropdown.value && __props.environment ? (openBlock(), createBlock(EnvironmentVariablesDropdown_default, {
+					key: 8,
+					ref_key: "dropdownRef",
+					ref: dropdownRef,
+					dropdownPosition: dropdownPosition.value,
+					environment: __props.environment,
+					query: dropdownQuery.value,
+					onRedirect: _cache[4] || (_cache[4] = ($event) => emit("redirectToEnvironment")),
+					onSelect: unref(handleDropdownSelect)
+				}, null, 8, [
+					"dropdownPosition",
+					"environment",
+					"query",
+					"onSelect"
+				])) : createCommentVNode("", true)
+			], 64);
+		};
+	}
+}), [["__scopeId", "data-v-776dfdde"]]);
+//#endregion
+export { DataTableInputSelect_default as n, CodeInput_default as t };
+
+//# sourceMappingURL=code-input-iq-moLxi.js.map