@scalar/api-client 2.38.4 → 2.39.0

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

@@ -0,0 +1,294 @@
+import { useLayout } from "../../hooks/useLayout.js";
+import EnvironmentVariableDropdown_default from "../../views/Environment/EnvironmentVariableDropdown.vue.js";
+import DataTableInputSelect_default from "../DataTable/DataTableInputSelect.vue.js";
+import { backspaceCommand, pillPlugin } from "./codeVariableWidget.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, toRef, unref, useAttrs, watch, withKeys, withModifiers } from "vue";
+import { colorPicker, useCodeMirror, useDropdown } from "@scalar/use-codemirror";
+import { nanoid } from "nanoid";
+//#region src/components/CodeInput/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"
+};
+var CodeInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "CodeInput",
+	props: {
+		colorPicker: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {},
+		error: { type: Boolean },
+		emitOnBlur: {
+			type: Boolean,
+			default: true
+		},
+		extensions: { default: () => [] },
+		lineNumbers: { type: Boolean },
+		lint: { type: Boolean },
+		disableTabIndent: {
+			type: Boolean,
+			default: false
+		},
+		language: {},
+		handleFieldSubmit: {},
+		handleFieldChange: {},
+		placeholder: {},
+		required: { type: Boolean },
+		disableEnter: {
+			type: Boolean,
+			default: false
+		},
+		disableCloseBrackets: {
+			type: Boolean,
+			default: false
+		},
+		enum: {},
+		examples: {},
+		type: {},
+		nullable: {
+			type: Boolean,
+			default: false
+		},
+		withVariables: {
+			type: Boolean,
+			default: true
+		},
+		importCurl: { type: Boolean },
+		default: {},
+		environment: {},
+		envVariables: {},
+		lineWrapping: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"submit",
+		"update:modelValue",
+		"curl",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const uid = attrs.id || `id-${nanoid()}`;
+		const isFocused = ref(false);
+		const showDropdown = ref(false);
+		const dropdownQuery = ref("");
+		const dropdownPosition = ref({
+			left: 0,
+			top: 0
+		});
+		const dropdownRef = ref(null);
+		const { layout } = useLayout();
+		/** Change is emitted during typing. This does not trigger validation */
+		function handleChange(value) {
+			if (value === props.modelValue) return null;
+			if (props.importCurl && value.trim().toLowerCase().startsWith("curl")) {
+				emit("curl", value);
+				codeMirror.value?.dispatch({ changes: {
+					from: 0,
+					to: codeMirror.value.state.doc.length,
+					insert: String(props.modelValue)
+				} });
+				return null;
+			}
+			return props.handleFieldChange ? props.handleFieldChange(value) : emit("update:modelValue", value);
+		}
+		/** Submit is emitted on blur and enter. This will trigger validation */
+		function handleSubmit(value) {
+			return props.handleFieldSubmit ? props.handleFieldSubmit(value) : emit("submit", value);
+		}
+		/** Optional submit on blur.  */
+		function handleBlur(value) {
+			isFocused.value = false;
+			if (props.emitOnBlur && props.modelValue) handleSubmit(value);
+			emit("blur", value);
+		}
+		const extensions = [...props.extensions];
+		if (props.colorPicker) extensions.push(colorPicker);
+		const pillPluginExtension = computed(() => pillPlugin({
+			environment: props.environment,
+			envVariables: props.envVariables,
+			isReadOnly: layout === "modal"
+		}));
+		const baseExtensions = computed(() => [
+			...extensions,
+			pillPluginExtension.value,
+			backspaceCommand
+		]);
+		const codeMirrorRef = ref(null);
+		const { codeMirror } = useCodeMirror({
+			content: toRef(() => props.modelValue !== void 0 ? String(props.modelValue) : ""),
+			onChange: (value) => {
+				handleChange(value);
+				updateDropdownVisibility();
+			},
+			onFocus: () => isFocused.value = true,
+			onBlur: (val) => handleBlur(val),
+			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: baseExtensions,
+			placeholder: toRef(() => props.placeholder)
+		});
+		codeMirror.value?.focus();
+		watch(codeMirror, () => {
+			if (codeMirror.value && Object.hasOwn(attrs, "autofocus")) codeMirror.value.focus();
+		});
+		const { handleDropdownSelect, updateDropdownVisibility } = useDropdown({
+			codeMirror,
+			query: dropdownQuery,
+			showDropdown,
+			dropdownPosition
+		});
+		const booleanOptions = computed(() => props.nullable ? [
+			"true",
+			"false",
+			"null"
+		] : ["true", "false"]);
+		const handleKeyDown = (key, event) => {
+			if (showDropdown.value) {
+				if (key === "down") {
+					event.preventDefault();
+					dropdownRef.value?.handleArrowKey("down");
+				} else if (key === "up") {
+					event.preventDefault();
+					dropdownRef.value?.handleArrowKey("up");
+				} else if (key === "enter") {
+					event.preventDefault();
+					dropdownRef.value?.handleSelect();
+				}
+			} else if (key === "escape") {
+				if (!props.disableTabIndent) event.stopPropagation();
+			} else if (key === "enter" && event.target instanceof HTMLDivElement) handleSubmit(event.target.textContent ?? "");
+		};
+		const defaultType = computed(() => {
+			return Array.isArray(props.type) ? props.type.find((type) => type !== "null") ?? "string" : props.type;
+		});
+		const displayVariablesDropdown = computed(() => showDropdown.value && props.withVariables && layout !== "modal" && props.environment);
+		__expose({
+			focus: () => {
+				codeMirror.value?.focus();
+			},
+			handleChange,
+			handleSubmit,
+			handleBlur,
+			booleanOptions,
+			codeMirror,
+			modelValue: props.modelValue
+		});
+		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", unref(layout) === "modal" ? "font-code pr-2 pl-1 text-base" : "px-2"]),
+					"data-testid": "code-input-disabled"
+				}, [createElementVNode("span", _hoisted_1, toDisplayString(__props.modelValue), 1)], 2)) : props.enum && props.enum.length ? (openBlock(), createBlock(DataTableInputSelect_default, {
+					key: 1,
+					default: props.default,
+					modelValue: __props.modelValue,
+					type: defaultType.value,
+					value: props.enum,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+				}, null, 8, [
+					"default",
+					"modelValue",
+					"type",
+					"value"
+				])) : __props.type === "boolean" || __props.type?.includes("boolean") ? (openBlock(), createBlock(DataTableInputSelect_default, {
+					key: 2,
+					default: props.default,
+					modelValue: __props.modelValue,
+					value: booleanOptions.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => emit("update:modelValue", $event))
+				}, null, 8, [
+					"default",
+					"modelValue",
+					"value"
+				])) : props.examples && props.examples.length ? (openBlock(), createBlock(DataTableInputSelect_default, {
+					key: 3,
+					default: props.default,
+					modelValue: props.modelValue,
+					value: props.examples,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event))
+				}, null, 8, [
+					"default",
+					"modelValue",
+					"value"
+				])) : (openBlock(), createElementBlock("div", mergeProps({
+					key: 4,
+					id: unref(uid)
+				}, _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
+					}],
+					onKeydown: [
+						_cache[3] || (_cache[3] = withKeys(withModifiers(($event) => handleKeyDown("down", $event), ["stop"]), ["down"])),
+						_cache[4] || (_cache[4] = withKeys(($event) => handleKeyDown("enter", $event), ["enter"])),
+						_cache[5] || (_cache[5] = withKeys(($event) => handleKeyDown("escape", $event), ["escape"])),
+						_cache[6] || (_cache[6] = withKeys(withModifiers(($event) => handleKeyDown("up", $event), ["stop"]), ["up"]))
+					]
+				}), [!__props.disableTabIndent ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[7] || (_cache[7] = [
+					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 ? (openBlock(), createBlock(EnvironmentVariableDropdown_default, {
+					key: 8,
+					ref_key: "dropdownRef",
+					ref: dropdownRef,
+					dropdownPosition: dropdownPosition.value,
+					envVariables: __props.envVariables,
+					environment: __props.environment,
+					query: dropdownQuery.value,
+					onSelect: unref(handleDropdownSelect)
+				}, null, 8, [
+					"dropdownPosition",
+					"envVariables",
+					"environment",
+					"query",
+					"onSelect"
+				])) : createCommentVNode("", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { CodeInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CodeInput.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.vue.script.js","names":["$attrs","$slots"],"sources":["../../../src/components/CodeInput/CodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      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\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    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\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":"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"}

package/dist/components/CodeInput/codeVariableWidget.d.ts

@@ -1,6 +1,6 @@
 import type { Environment } from '@scalar/oas-utils/entities/environment';
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@scalar/use-codemirror';
-import { type EnvVariables } from '../../libs/env-helpers';
+import { type EnvVariables } from '../../libs/env-helpers.js';
 /**
  * Styles the active environment variable pill
  */

package/dist/components/CodeInput/codeVariableWidget.js

@@ -0,0 +1,135 @@
+import { getEnvColor } from "../../libs/env-helpers.js";
+import { parseEnvVariables } from "../../libs/environment-parser.js";
+import { createApp, defineComponent, h } from "vue";
+import { ScalarTooltip } from "@scalar/components";
+import { REGEX } from "@scalar/oas-utils/helpers";
+import { ScalarIconGlobe } from "@scalar/icons";
+import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType } from "@scalar/use-codemirror";
+import { nanoid } from "nanoid";
+//#region src/components/CodeInput/codeVariableWidget.ts
+/**
+* Displays the value of a variable of the active environment in a pill
+*/
+var PillWidget = class PillWidget extends WidgetType {
+	app;
+	uid;
+	environment;
+	envVariables;
+	isReadOnly;
+	constructor(variableName, environment, envVariables, isReadOnly) {
+		super();
+		this.variableName = variableName;
+		this.variableName = variableName;
+		this.environment = environment;
+		this.envVariables = envVariables;
+		this.isReadOnly = isReadOnly ?? false;
+		this.uid = nanoid();
+	}
+	toDOM() {
+		const span = document.createElement("span");
+		span.className = "cm-pill";
+		span.textContent = `${this.variableName}`;
+		this.app = createApp(defineComponent({
+			props: { variableName: {
+				type: String,
+				default: null
+			} },
+			render: () => {
+				const val = this.envVariables ? parseEnvVariables(this.envVariables).find((thing) => thing.key === this.variableName) : void 0;
+				const isGlobal = val?.source === "global";
+				const pillColor = isGlobal ? "var(--scalar-color-1)" : val && this.environment && this.environment.name !== "No Environment" ? getEnvColor(this.environment) : "var(--scalar-color-1)";
+				span.style.setProperty("--tw-bg-base", pillColor);
+				span.style.opacity = val?.value ? "1" : "0.5";
+				const tooltipContent = val?.value || "No value";
+				const tooltipTrigger = h("div", { class: "flex items-center gap-1 whitespace-nowrap" }, [(isGlobal || this.environment?.name === "No Environment" && val?.value) && h(ScalarIconGlobe, {
+					class: "size-3 -ml-1",
+					icon: "Globe"
+				}), h("span", this.variableName)]);
+				return h(ScalarTooltip, {
+					content: tooltipContent,
+					delay: 0,
+					placement: "bottom",
+					offset: 6
+				}, { default: () => tooltipTrigger });
+			}
+		}), { variableName: this.variableName });
+		this.app.mount(span);
+		return span;
+	}
+	destroy() {
+		if (this.app) this.app.unmount();
+	}
+	eq(other) {
+		return other instanceof PillWidget && other.variableName === this.variableName && other.uid === this.uid;
+	}
+	ignoreEvent() {
+		return false;
+	}
+};
+/**
+* Styles the active environment variable pill
+*/
+var pillPlugin = (props) => ViewPlugin.fromClass(class {
+	decorations;
+	constructor(view) {
+		this.decorations = this.buildDecorations(view);
+	}
+	update(update) {
+		if (update.docChanged || update.viewportChanged) requestAnimationFrame(() => {
+			this.decorations = this.buildDecorations(update.view);
+			update.view.update([]);
+		});
+	}
+	buildDecorations(view) {
+		const builder = new RangeSetBuilder();
+		for (const { from, to } of view.visibleRanges) {
+			const text = view.state.doc.sliceString(from, to);
+			let match;
+			while ((match = REGEX.VARIABLES.exec(text)) !== null) {
+				const start = from + match.index;
+				const end = start + match[0].length;
+				const variableName = match[1] ?? "";
+				builder.add(start, end, Decoration.widget({
+					widget: new PillWidget(variableName, props.environment, props.envVariables, props.isReadOnly),
+					side: 1
+				}));
+			}
+		}
+		return builder.finish();
+	}
+}, { decorations: (v) => v.decorations });
+var backspaceCommand = EditorView.domEventHandlers({ keydown(event, view) {
+	if (event.key === "Backspace") {
+		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 > 0) {
+			if (state.doc.sliceString(from - 2, from) === "}}") {
+				view.dispatch({
+					changes: {
+						from: from - 2,
+						to
+					},
+					selection: { anchor: from - 2 }
+				});
+				event.preventDefault();
+				return true;
+			}
+		}
+	}
+	return false;
+} });
+//#endregion
+export { backspaceCommand, pillPlugin };
+
+//# sourceMappingURL=codeVariableWidget.js.map

package/dist/components/CodeInput/codeVariableWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeVariableWidget.js","names":[],"sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"sourcesContent":["import { ScalarTooltip } from '@scalar/components'\nimport { ScalarIconGlobe } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { createApp, defineComponent, h } from 'vue'\n\nimport { parseEnvVariables } from '@/libs'\nimport { type EnvVariables, getEnvColor } from '@/libs/env-helpers'\n\n/**\n * Displays the value of a variable of the active environment in a pill\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private uid: string\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean\n\n  constructor(\n    private variableName: string,\n    environment: Environment | undefined,\n    envVariables: EnvVariables | undefined,\n    isReadOnly: boolean | undefined,\n  ) {\n    super()\n    this.variableName = variableName\n    this.environment = environment\n    this.envVariables = envVariables\n    this.isReadOnly = isReadOnly ?? false\n    this.uid = nanoid()\n  }\n\n  toDOM() {\n    const span = document.createElement('span')\n    span.className = 'cm-pill'\n    span.textContent = `${this.variableName}`\n\n    const tooltipComponent = defineComponent({\n      props: { variableName: { type: String, default: null } },\n      render: () => {\n        const val = this.envVariables\n          ? parseEnvVariables(this.envVariables).find((thing) => thing.key === this.variableName)\n          : undefined\n\n        // Set the pill color based on the environment source or fallback to default color\n        const isGlobal = val?.source === 'global'\n        const pillColor = isGlobal\n          ? 'var(--scalar-color-1)'\n          : val && this.environment && this.environment.name !== 'No Environment'\n            ? getEnvColor(this.environment)\n            : 'var(--scalar-color-1)'\n\n        span.style.setProperty('--tw-bg-base', pillColor)\n\n        // Set opacity based on the existence of a value\n        span.style.opacity = val?.value ? '1' : '0.5'\n\n        // Tooltip content as string\n        const tooltipContent = val?.value || 'No value'\n\n        // Tooltip trigger element\n        const tooltipTrigger = h('div', { class: 'flex items-center gap-1 whitespace-nowrap' }, [\n          (isGlobal || (this.environment?.name === 'No Environment' && val?.value)) &&\n            h(ScalarIconGlobe, { class: 'size-3 -ml-1', icon: 'Globe' }),\n          h('span', this.variableName),\n        ])\n\n        return h(\n          ScalarTooltip,\n          {\n            content: tooltipContent,\n            delay: 0,\n            placement: 'bottom',\n            offset: 6,\n          },\n          {\n            default: () => tooltipTrigger,\n          },\n        )\n      },\n    })\n\n    this.app = createApp(tooltipComponent, { variableName: this.variableName })\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy() {\n    if (this.app) {\n      this.app.unmount()\n    }\n  }\n\n  override eq(other: WidgetType) {\n    return other instanceof PillWidget && other.variableName === this.variableName && other.uid === this.uid\n  }\n\n  override ignoreEvent() {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill\n */\nexport const pillPlugin = (props: {\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean | undefined\n}) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n\n      constructor(view: EditorView) {\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate) {\n        if (update.docChanged || update.viewportChanged) {\n          requestAnimationFrame(() => {\n            this.decorations = this.buildDecorations(update.view)\n            update.view.update([])\n          })\n        }\n      }\n\n      buildDecorations(view: EditorView) {\n        const builder = new RangeSetBuilder<Decoration>()\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n          let match\n\n          while ((match = REGEX.VARIABLES.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment, props.envVariables, props.isReadOnly),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view) {\n    if (event.key === 'Backspace') {\n      const { state } = view\n      const { from, to } = state.selection.main\n\n      // Prevent breaking line content addition on pill removal\n      if (from === 0 && to === state.doc.length) {\n        view.dispatch({\n          changes: { from: 0, to: state.doc.length },\n          selection: { anchor: 0 },\n        })\n        event.preventDefault()\n        return true\n      }\n\n      if (from === to && from > 0) {\n        const before = state.doc.sliceString(from - 2, from)\n        if (before === '}}') {\n          view.dispatch({\n            changes: { from: from - 2, to },\n            selection: { anchor: from - 2 },\n          })\n          event.preventDefault()\n          return true\n        }\n      }\n    }\n    return false\n  },\n})\n"],"mappings":"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"}

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

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

package/dist/components/CodeInput/index.js

@@ -1,2 +1,2 @@
-import { t as CodeInput_default } from "../../CodeInput-BTN8cC5h.js";
+import CodeInput_default from "./CodeInput.vue.js";
 export { CodeInput_default as CodeInput };

package/dist/components/CommandPalette/CommandActionForm.vue.js

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

package/dist/components/CommandPalette/CommandActionForm.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionForm.vue.js","names":[],"sources":["../../../src/components/CommandPalette/CommandActionForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, useBindCx, type LoadingState } from '@scalar/components'\n\nconst { loader, disabled = false } = defineProps<{\n  loader?: LoadingState\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (event: 'submit'): void\n  (event: 'cancel'): void\n  (event: 'back', e: KeyboardEvent): void\n}>()\n\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    class=\"flex w-full flex-col gap-3\"\n    @keydown.enter.stop\n    @submit.prevent.stop=\"!disabled && $emit('submit')\">\n    <div v-bind=\"cx('relative flex min-h-20 flex-col rounded')\">\n      <slot />\n    </div>\n    <div class=\"flex gap-2\">\n      <div class=\"flex max-h-8 flex-1\">\n        <slot name=\"options\" />\n      </div>\n      <ScalarButton\n        class=\"max-h-8 px-3 text-xs\"\n        :disabled=\"disabled\"\n        :loader\n        type=\"submit\">\n        <slot name=\"submit\">Continue</slot>\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":""}

package/dist/components/CommandPalette/CommandActionForm.vue.script.js

@@ -0,0 +1,42 @@
+import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, unref, withCtx, withKeys, withModifiers } from "vue";
+import { ScalarButton, useBindCx } from "@scalar/components";
+//#region src/components/CommandPalette/CommandActionForm.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex gap-2" };
+var _hoisted_2 = { class: "flex max-h-8 flex-1" };
+var CommandActionForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CommandActionForm",
+	props: {
+		loader: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"submit",
+		"cancel",
+		"back"
+	],
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: "flex w-full flex-col gap-3",
+				onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers(() => {}, ["stop"]), ["enter"])),
+				onSubmit: _cache[1] || (_cache[1] = withModifiers(($event) => !__props.disabled && _ctx.$emit("submit"), ["prevent", "stop"]))
+			}, [createElementVNode("div", normalizeProps(guardReactiveProps(unref(cx)("relative flex min-h-20 flex-col rounded"))), [renderSlot(_ctx.$slots, "default")], 16), createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "options")]), createVNode(unref(ScalarButton), {
+				class: "max-h-8 px-3 text-xs",
+				disabled: __props.disabled,
+				loader: __props.loader,
+				type: "submit"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "submit", {}, () => [_cache[2] || (_cache[2] = createTextVNode("Continue", -1))])]),
+				_: 3
+			}, 8, ["disabled", "loader"])])], 32);
+		};
+	}
+});
+//#endregion
+export { CommandActionForm_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CommandActionForm.vue.script.js.map

package/dist/components/CommandPalette/CommandActionForm.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionForm.vue.script.js","names":["$emit"],"sources":["../../../src/components/CommandPalette/CommandActionForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, useBindCx, type LoadingState } from '@scalar/components'\n\nconst { loader, disabled = false } = defineProps<{\n  loader?: LoadingState\n  disabled?: boolean\n}>()\n\ndefineEmits<{\n  (event: 'submit'): void\n  (event: 'cancel'): void\n  (event: 'back', e: KeyboardEvent): void\n}>()\n\nconst { cx } = useBindCx()\n</script>\n<template>\n  <form\n    class=\"flex w-full flex-col gap-3\"\n    @keydown.enter.stop\n    @submit.prevent.stop=\"!disabled && $emit('submit')\">\n    <div v-bind=\"cx('relative flex min-h-20 flex-col rounded')\">\n      <slot />\n    </div>\n    <div class=\"flex gap-2\">\n      <div class=\"flex max-h-8 flex-1\">\n        <slot name=\"options\" />\n      </div>\n      <ScalarButton\n        class=\"max-h-8 px-3 text-xs\"\n        :disabled=\"disabled\"\n        :loader\n        type=\"submit\">\n        <slot name=\"submit\">Continue</slot>\n      </ScalarButton>\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAcA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAmBO,QAAA;IAlBL,OAAM;IACL,WAAO,OAAA,OAAA,OAAA,KAAA,SAAA,oBAAR,IAAmB,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA;IAClB,UAAM,OAAA,OAAA,OAAA,KAAA,eAAA,WAAA,CAAgB,QAAA,YAAYA,KAAAA,MAAK,SAAA,EAAA,CAAA,WAAA,OAAA,CAAA;OACxC,mBAEM,OAAA,eAAA,mBAFO,MAAA,GAAE,CAAA,0CAAA,CAAA,CAAA,EAAA,CACb,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAEV,mBAWM,OAXN,YAWM,CAVJ,mBAEM,OAFN,YAEM,CADJ,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA,EAEzB,YAMe,MAAA,aAAA,EAAA;IALb,OAAM;IACL,UAAU,QAAA;IACV,QAAA,QAAA;IACD,MAAK;;2BAC8B,CAAnC,WAAmC,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAf,YAAQ,GAAA,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/CommandPalette/CommandActionInput.vue.js

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

package/dist/components/CommandPalette/CommandActionInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandActionInput.vue.js","names":[],"sources":["../../../src/components/CommandPalette/CommandActionInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref } from 'vue'\n\nconst props = defineProps<{\n  modelValue?: string\n  placeholder?: string\n  autofocus?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n  (e: 'onDelete', event: KeyboardEvent): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst input = ref<HTMLInputElement | null>(null)\nonMounted(() =>\n  nextTick(() => {\n    if (props.autofocus) {\n      input.value?.focus()\n    }\n  }),\n)\n\nconst model = computed<string>({\n  get: () => props.modelValue ?? '',\n  set: (v) => emit('update:modelValue', v),\n})\n\n/** Re-emits enter as a submit event for the form  */\nfunction handleEnter(event: KeyboardEvent) {\n  if (event.shiftKey || !event.target) {\n    return\n  }\n  event.preventDefault()\n  const target = event.target as HTMLTextAreaElement\n  const submitEvent = new Event('submit', { cancelable: true })\n  target.form?.dispatchEvent(submitEvent)\n}\n\n/** Emits a back event if the input is empty */\nfunction handleBack(event: KeyboardEvent) {\n  if (model.value !== '') {\n    return\n  }\n  event.preventDefault()\n  event.stopPropagation()\n  emit('onDelete', event)\n}\n</script>\n<template>\n  <textarea\n    id=\"command-action-input\"\n    ref=\"input\"\n    v-model=\"model\"\n    class=\"min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1\"\n    :placeholder=\"props.placeholder ?? ''\"\n    wrap=\"hard\"\n    v-bind=\"$attrs\"\n    @keydown.delete=\"handleBack($event)\"\n    @keydown.enter=\"handleEnter($event)\" />\n</template>\n"],"mappings":""}

package/dist/components/CommandPalette/CommandActionInput.vue.script.js

@@ -0,0 +1,55 @@
+import { computed, createElementBlock, defineComponent, mergeProps, nextTick, onMounted, openBlock, ref, vModelText, withDirectives, withKeys } from "vue";
+//#region src/components/CommandPalette/CommandActionInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["placeholder"];
+var CommandActionInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "CommandActionInput",
+	props: {
+		modelValue: {},
+		placeholder: {},
+		autofocus: { type: Boolean }
+	},
+	emits: ["update:modelValue", "onDelete"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const input = ref(null);
+		onMounted(() => nextTick(() => {
+			if (props.autofocus) input.value?.focus();
+		}));
+		const model = computed({
+			get: () => props.modelValue ?? "",
+			set: (v) => emit("update:modelValue", v)
+		});
+		/** Re-emits enter as a submit event for the form  */
+		function handleEnter(event) {
+			if (event.shiftKey || !event.target) return;
+			event.preventDefault();
+			const target = event.target;
+			const submitEvent = new Event("submit", { cancelable: true });
+			target.form?.dispatchEvent(submitEvent);
+		}
+		/** Emits a back event if the input is empty */
+		function handleBack(event) {
+			if (model.value !== "") return;
+			event.preventDefault();
+			event.stopPropagation();
+			emit("onDelete", event);
+		}
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
+				id: "command-action-input",
+				ref_key: "input",
+				ref: input,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				class: "min-h-8 w-full flex-1 resize-none border border-transparent py-1.5 pl-8.5 text-sm outline-none focus:border-b-1",
+				placeholder: props.placeholder ?? "",
+				wrap: "hard"
+			}, _ctx.$attrs, { onKeydown: [_cache[1] || (_cache[1] = withKeys(($event) => handleBack($event), ["delete"])), _cache[2] || (_cache[2] = withKeys(($event) => handleEnter($event), ["enter"]))] }), null, 16, _hoisted_1)), [[vModelText, model.value]]);
+		};
+	}
+});
+//#endregion
+export { CommandActionInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CommandActionInput.vue.script.js.map