@scalar/api-client 2.38.4 → 2.39.0

package/dist/v2/components/callout/Callout.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.vue.script.js","names":[],"sources":["../../../../src/v2/components/callout/Callout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarIconCheckCircle,\n  ScalarIconInfo,\n  ScalarIconWarning,\n  ScalarIconWarningCircle,\n} from '@scalar/icons'\n\ntype CalloutType = 'info' | 'success' | 'warning' | 'danger' | 'neutral'\n\nconst { type } = defineProps<{\n  type: CalloutType\n}>()\n\nconst slots = defineSlots<{\n  default: () => string\n  actions?: () => string\n}>()\n\nconst iconsMapping = {\n  info: ScalarIconInfo,\n  success: ScalarIconCheckCircle,\n  warning: ScalarIconWarning,\n  danger: ScalarIconWarningCircle,\n  neutral: ScalarIconInfo,\n} satisfies Record<CalloutType, unknown>\n</script>\n\n<template>\n  <div :class=\"`callout t-editor__callout callout__${type}`\">\n    <div class=\"flex w-full flex-col gap-2\">\n      <div class=\"flex items-start gap-2\">\n        <div\n          class=\"callout-content__icon\"\n          data-scalar-name=\"callout-icon\">\n          <component\n            :is=\"iconsMapping[type]\"\n            class=\"size-5 shrink-0\" />\n        </div>\n        <div class=\"callout-content__text\">\n          <slots.default />\n        </div>\n      </div>\n      <div\n        v-if=\"slots.actions\"\n        class=\"flex justify-end gap-2\">\n        <slots.actions />\n      </div>\n    </div>\n  </div>\n</template>\n<style scoped>\n/* ----------------------------------------------------- */\n/* Custom Callout Styles */\n\n.dark-mode .t-editor__callout,\n.light-mode .t-editor__callout {\n  --callout-font-size: var(--scalar-small);\n\n  --callout-neutral-primary: var(--scalar-color-3);\n  --callout-neutral-secondary: color-mix(\n    in srgb,\n    var(--scalar-background-2),\n    transparent 50%\n  );\n  --callout-neutral-font-color: var(--scalar-color-1);\n\n  --callout-success-primary: var(--scalar-color-green);\n  --callout-success-secondary: color-mix(\n    in srgb,\n    var(--scalar-color-green),\n    transparent 97%\n  );\n  --callout-success-font-color: var(--scalar-color-1);\n\n  --callout-danger-primary: var(--scalar-color-red);\n  --callout-danger-secondary: color-mix(\n    in srgb,\n    var(--scalar-color-red),\n    transparent 97%\n  );\n  --callout-danger-font-color: var(--scalar-color-1);\n\n  --callout-warning-primary: var(--scalar-color-yellow);\n  --callout-warning-secondary: color-mix(\n    in srgb,\n    var(--scalar-color-yellow),\n    transparent 97%\n  );\n  --callout-warning-font-color: var(--scalar-color-1);\n\n  --callout-info-primary: var(--scalar-color-blue);\n  --callout-info-secondary: color-mix(\n    in srgb,\n    var(--scalar-color-blue),\n    transparent 97%\n  );\n  --callout-info-font-color: var(--scalar-color-1);\n\n  --callout-line-height: 22px;\n}\n\n.t-editor__callout {\n  border-radius: var(--scalar-radius);\n  margin-top: var(--scalar-block-spacing);\n  padding: 10px 14px;\n\n  --callout-primary: var(--scalar-border-color);\n  --callout-secondary: var(--scalar-background-2);\n  --callout-svg: var(--callout-primary);\n\n  background: var(--callout-secondary);\n  border: var(--scalar-border-width) solid\n    color-mix(in srgb, var(--callout-primary), transparent 50%);\n}\n\n.t-editor__callout .callout-content__text {\n  font-size: var(--callout-font-size);\n  flex: 1 1 0%;\n  line-height: var(--callout-line-height);\n}\n\n.t-editor__callout .callout-content__icon {\n  position: relative;\n  border-radius: var(--scalar-radius);\n  width: 18px;\n  height: fit-content;\n  color: var(--callout-svg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.t-editor__callout .callout-content__icon svg,\n.t-editor__callout .callout-content__icon img {\n  width: 18px;\n  height: 18px;\n}\n\n/* vertical align icon to text, don't remove this */\n.t-editor__callout .callout-content__icon:before {\n  content: '\\200b';\n  line-height: var(--callout-line-height);\n}\n\n/* Apply callout colors */\n.t-editor__callout.callout__neutral {\n  --callout-primary: var(--callout-neutral-primary);\n  --callout-secondary: var(--callout-neutral-secondary);\n  --callout-font-color: var(--callout-neutral-font-color);\n  --callout-svg: var(--callout-neutral-font-color);\n}\n\n.t-editor__callout.callout__info {\n  --callout-primary: var(--callout-info-primary);\n  --callout-secondary: var(--callout-info-secondary);\n  --callout-font-color: var(--callout-info-font-color);\n  --callout-svg: var(--callout-info-primary);\n}\n\n.t-editor__callout.callout__warning {\n  --callout-primary: var(--callout-warning-primary);\n  --callout-secondary: var(--callout-warning-secondary);\n  --callout-font-color: var(--callout-warning-font-color);\n  --callout-svg: var(--callout-warning-primary);\n}\n\n.t-editor__callout.callout__success {\n  --callout-primary: var(--callout-success-primary);\n  --callout-secondary: var(--callout-success-secondary);\n  --callout-font-color: var(--callout-success-font-color);\n  --callout-svg: var(--callout-success-primary);\n}\n\n.t-editor__callout.callout__danger {\n  --callout-primary: var(--callout-danger-primary);\n  --callout-secondary: var(--callout-danger-secondary);\n  --callout-font-color: var(--callout-danger-font-color);\n  --callout-svg: var(--callout-danger-primary);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAcA,MAAM,QAAQ,UAAA;EAKd,MAAM,eAAe;GACnB,MAAM;GACN,SAAS;GACT,SAAS;GACT,QAAQ;GACR,SAAS;GACV;;uBAIC,mBAoBM,OAAA,EApBA,OAAK,eAAA,sCAAwC,QAAA,OAAI,EAAA,EAAA,CACrD,mBAkBM,OAlBN,YAkBM,CAjBJ,mBAWM,OAXN,YAWM,CAVJ,mBAMM,OANN,YAMM,EAAA,WAAA,EAHJ,YAE4B,wBADrB,aAAa,QAAA,MAAI,EAAA,EACtB,OAAM,mBAAiB,CAAA,EAAA,CAAA,EAE3B,mBAEM,OAFN,YAEM,CADJ,YAAiB,MAAA,QAAA,CAAA,CAAA,CAAA,CAAA,EAIb,MAAM,WAAA,WAAA,EADd,mBAIM,OAJN,YAIM,CADJ,YAAiB,MAAA,QAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/v2/components/code-input/CodeInput.vue.js

@@ -0,0 +1,10 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import CodeInput_vue_vue_type_script_setup_true_lang_default from "./CodeInput.vue.script.js";
+/* empty css                        */
+/* empty css                          */
+//#region src/v2/components/code-input/CodeInput.vue
+var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CodeInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-776dfdde"]]);
+//#endregion
+export { CodeInput_default as default };
+
+//# sourceMappingURL=CodeInput.vue.js.map

package/dist/v2/components/code-input/CodeInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.vue.js","names":[],"sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeInputModelValue =\n  | string\n  | number\n  | boolean\n  | Array<string | number | boolean>\n  | Record<string, unknown>\n\n/**\n * CodeInput\n *\n * A versatile input component that adapts its rendering based on props:\n * - Disabled mode: Read-only text display\n * - Select mode: Dropdown for enums, booleans, or examples\n * - Editor mode: CodeMirror with environment variable support\n *\n * Type `{{` to trigger environment variable autocomplete when an environment is provided.\n * It takes in any data but always will emit a string value,\n * this string should then be parsed in accordance to the schema or content type.\n *\n * @example\n * ```vue\n * <!-- Basic input with environment variables -->\n * <CodeInput v-model=\"value\" :environment=\"env\" />\n *\n * <!-- Boolean select -->\n * <CodeInput v-model=\"flag\" type=\"boolean\" />\n *\n * <!-- JSON editor with linting -->\n * <CodeInput v-model=\"data\" language=\"json\" :lint=\"true\" />\n * ```\n */\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport DataTableInputSelect from '@/v2/components/data-table/DataTableInputSelect.vue'\nimport EnvironmentVariableDropdown from '@/v2/features/environments/components/EnvironmentVariablesDropdown.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { backspaceCommand, pillPlugin } from './code-variable-widget'\n\ntype Props = {\n  modelValue: CodeInputModelValue\n  /** Environment for variable substitution. Pass undefined to disable environment variables */\n  environment: XScalarEnvironment | undefined\n  /** Type of the input value, affects rendering mode for booleans */\n  type?: string | string[]\n  /** Render as disabled text display */\n  disabled?: boolean\n  /** Show error styling */\n  error?: boolean\n  /** Layout context affects styling and behavior */\n  layout?: ClientLayout\n  /** Predefined enum values, triggers select mode */\n  enum?: string[]\n  /** Example values, triggers select mode */\n  examples?: string[]\n  /** Default value to show in select mode */\n  default?: Props['modelValue']\n  /** Allow null in boolean select options */\n  nullable?: boolean\n  /** Placeholder text for empty input */\n  placeholder?: string\n  /** Show required indicator */\n  required?: boolean\n  /** Enable color picker extension */\n  colorPicker?: boolean\n  /** Show line numbers in editor */\n  lineNumbers?: boolean\n  /** Enable linting */\n  lint?: boolean\n  /** Enable line wrapping */\n  lineWrapping?: boolean\n  /** CodeMirror language mode */\n  language?: CodeMirrorLanguage\n  /** Additional CodeMirror extensions */\n  extensions?: Extension[]\n  /** Disable tab key for indentation */\n  disableTabIndent?: boolean\n  /** Disable enter key */\n  disableEnter?: boolean\n  /** Disable automatic bracket closing */\n  disableCloseBrackets?: boolean\n  /** Emit submit event on blur */\n  emitOnBlur?: boolean\n  /** Enable environment variable pills */\n  withVariables?: boolean\n  /** Emit change event even if the value is the same */\n  alwaysEmitChange?: boolean\n  /** Custom change handler, prevents default emit */\n  handleFieldChange?: (value: string) => void\n  /** Custom submit handler, prevents default emit */\n  handleFieldSubmit?: (value: string) => void\n  /** Put a linethrough on the input text */\n  linethrough?: boolean\n}\n\nconst {\n  modelValue,\n  environment,\n  type,\n  disabled = false,\n  error = false,\n  layout = 'desktop',\n  enum: enumProp,\n  examples,\n  default: defaultProp,\n  nullable = false,\n  placeholder,\n  required,\n  colorPicker = false,\n  lineNumbers = false,\n  lint = false,\n  lineWrapping = false,\n  language,\n  extensions = [],\n  disableTabIndent = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  emitOnBlur = true,\n  alwaysEmitChange = false,\n  withVariables = true,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string]\n  'blur': [value: string]\n  'redirectToEnvironment': []\n}>()\n\n// ---------------------------------------------------------------------------\n// Component identity and focus state\n\nconst attrs = useAttrs() as { id?: string }\nconst componentId = attrs.id || `id-${nanoid()}`\nconst isFocused = ref(false)\n\n// ---------------------------------------------------------------------------\n// Rendering mode detection\n\n/**\n * Determines if we should render a select dropdown for boolean types.\n */\nconst isBooleanMode = computed((): boolean => {\n  if (enumProp?.length) {\n    return false\n  }\n  return type === 'boolean' || (Array.isArray(type) && type.includes('boolean'))\n})\n\n/**\n * Options for boolean select mode.\n */\nconst booleanOptions = computed((): string[] =>\n  nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\n/**\n * Default type when dealing with type arrays.\n * Finds the first non-null type.\n */\nconst defaultType = computed((): string | undefined => {\n  if (Array.isArray(type)) {\n    return type.find((t) => t !== 'null') ?? 'string'\n  }\n  return type\n})\n\n// ---------------------------------------------------------------------------\n// Event handlers\n\n/**\n * Handles value changes during typing.\n */\nconst handleChange = (value: string): void => {\n  if (!alwaysEmitChange && value === serializeValue(modelValue)) {\n    return\n  }\n\n  // Use custom handler or emit update\n  if (handleFieldChange) {\n    handleFieldChange(value)\n  } else {\n    emit('update:modelValue', value)\n  }\n}\n\n/**\n * Handles form submission (enter key or blur with emitOnBlur).\n */\nconst handleSubmit = (value: string): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value)\n  }\n\n  emit('blur', value)\n}\n\n/**\n * Handles model value updates from select components.\n */\nconst handleSelectChange = (value: string): void =>\n  emit('update:modelValue', value)\n\n// ---------------------------------------------------------------------------\n// CodeMirror setup\n\n/**\n * Build extensions array.\n * Note: Extensions are not reactive after initialization.\n */\nconst buildExtensions = (): Extension[] => {\n  const extensionsList: Extension[] = [...extensions]\n\n  if (colorPicker) {\n    extensionsList.push(colorPickerExtension)\n  }\n\n  return extensionsList\n}\n\n/**\n * Reactive pill plugin for environment variable visualization.\n */\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n/**\n * Combined extensions for CodeMirror.\n */\nconst codeMirrorExtensions = computed((): Extension[] => [\n  ...buildExtensions(),\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\n/** Converts the model value to a string for CodeMirror */\nconst serializeValue = (value: CodeInputModelValue): string => {\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() => serializeValue(modelValue)),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => {\n    isFocused.value = true\n  },\n  onBlur: handleBlur,\n  codeMirrorRef,\n  disableTabIndent: toRef(() => disableTabIndent),\n  disableEnter: toRef(() => disableEnter),\n  disableCloseBrackets: toRef(() => disableCloseBrackets),\n  lineNumbers: toRef(() => lineNumbers),\n  language: toRef(() => language),\n  lint: toRef(() => lint),\n  extensions: codeMirrorExtensions,\n  placeholder: toRef(() => placeholder),\n})\n\n/**\n * Handle autofocus attribute.\n */\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\n// ---------------------------------------------------------------------------\n// Environment variable dropdown\n\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 { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n/**\n * Determines if the environment variable dropdown should be visible.\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    Boolean(environment)\n  )\n})\n\n// ---------------------------------------------------------------------------\n// Keyboard event handling\n\n/**\n * Handles keyboard navigation for dropdown and form submission.\n */\nconst handleKeyDown = (key: string, event: KeyboardEvent): void => {\n  if (showDropdown.value) {\n    if (key === 'down' || key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey(key)\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n    return\n  }\n\n  if (key === 'escape' && !disableTabIndent) {\n    event.stopPropagation()\n  }\n\n  if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n\ndefineExpose({\n  /**\n   * Focus the codemirror element\n   *\n   * @param cursorAtEnd boolean place the cursor at the end of the input\n   */\n  focus: (position?: 'start' | 'end' | number) => {\n    if (!codeMirror.value) {\n      return\n    }\n    codeMirror.value.focus()\n\n    if (!isDefined(position)) {\n      return\n    }\n\n    const anchor = (() => {\n      if (position === 'start') {\n        return 0\n      }\n      if (position === 'end') {\n        return codeMirror.value.state.doc.length\n      }\n      return position\n    })()\n\n    // Move the cursor to the specified position\n    codeMirror.value.dispatch({\n      selection: { anchor },\n      scrollIntoView: true,\n    })\n  },\n  isFocused,\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue,\n  cursorPosition: () => codeMirror.value?.state.selection.main.head,\n  serializeValue,\n})\n</script>\n\n<template>\n  <!-- Disabled mode: read-only text display -->\n  <div\n    v-if=\"disabled\"\n    class=\"text-c-2 flex cursor-default items-center justify-center\"\n    :class=\"{\n      'font-code pr-2 pl-1 text-base': layout === 'modal',\n      'px-2': layout !== 'modal',\n      'line-through': linethrough,\n    }\"\n    data-testid=\"code-input-disabled\">\n    <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n  </div>\n\n  <!-- Enum mode: select dropdown with predefined values -->\n  <DataTableInputSelect\n    v-else-if=\"enumProp?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :type=\"defaultType\"\n    :value=\"enumProp\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Boolean mode: select dropdown with true/false (and optionally null) -->\n  <DataTableInputSelect\n    v-else-if=\"isBooleanMode\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"booleanOptions\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Examples mode: select dropdown with example values -->\n  <DataTableInputSelect\n    v-else-if=\"examples?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"examples\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Editor mode: CodeMirror with environment variable support -->\n  <div\n    v-else\n    :id=\"componentId\"\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      'line-through': linethrough,\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    <!-- Tab exit hint (shown when focused) -->\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\n  <!-- Warning slot (positioned absolutely) -->\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\n  <!-- Icon slot (positioned absolutely) -->\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\n  <!-- Required indicator -->\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\n  <!-- Environment variable autocomplete dropdown -->\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown && environment\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('redirectToEnvironment')\"\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  color: var(--scalar-color-1) !important;\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n}\n.light-mode .cm-pill {\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":""}

package/dist/v2/components/code-input/CodeInput.vue.script.js

@@ -0,0 +1,380 @@
+import DataTableInputSelect_default from "../data-table/DataTableInputSelect.vue.js";
+import EnvironmentVariablesDropdown_default from "../../features/environments/components/EnvironmentVariablesDropdown.vue.js";
+import { backspaceCommand, pillPlugin } from "./code-variable-widget.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 { isDefined } from "@scalar/helpers/array/is-defined";
+import { colorPicker, useCodeMirror, useDropdown } from "@scalar/use-codemirror";
+import { nanoid } from "nanoid";
+//#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"
+};
+var CodeInput_vue_vue_type_script_setup_true_lang_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);
+		};
+	}
+});
+//#endregion
+export { CodeInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CodeInput.vue.script.js.map

package/dist/v2/components/code-input/CodeInput.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.vue.script.js","names":["$attrs","$slots"],"sources":["../../../../src/v2/components/code-input/CodeInput.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type CodeInputModelValue =\n  | string\n  | number\n  | boolean\n  | Array<string | number | boolean>\n  | Record<string, unknown>\n\n/**\n * CodeInput\n *\n * A versatile input component that adapts its rendering based on props:\n * - Disabled mode: Read-only text display\n * - Select mode: Dropdown for enums, booleans, or examples\n * - Editor mode: CodeMirror with environment variable support\n *\n * Type `{{` to trigger environment variable autocomplete when an environment is provided.\n * It takes in any data but always will emit a string value,\n * this string should then be parsed in accordance to the schema or content type.\n *\n * @example\n * ```vue\n * <!-- Basic input with environment variables -->\n * <CodeInput v-model=\"value\" :environment=\"env\" />\n *\n * <!-- Boolean select -->\n * <CodeInput v-model=\"flag\" type=\"boolean\" />\n *\n * <!-- JSON editor with linting -->\n * <CodeInput v-model=\"data\" language=\"json\" :lint=\"true\" />\n * ```\n */\nexport default {\n  inheritAttrs: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { isDefined } from '@scalar/helpers/array/is-defined'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport DataTableInputSelect from '@/v2/components/data-table/DataTableInputSelect.vue'\nimport EnvironmentVariableDropdown from '@/v2/features/environments/components/EnvironmentVariablesDropdown.vue'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport { backspaceCommand, pillPlugin } from './code-variable-widget'\n\ntype Props = {\n  modelValue: CodeInputModelValue\n  /** Environment for variable substitution. Pass undefined to disable environment variables */\n  environment: XScalarEnvironment | undefined\n  /** Type of the input value, affects rendering mode for booleans */\n  type?: string | string[]\n  /** Render as disabled text display */\n  disabled?: boolean\n  /** Show error styling */\n  error?: boolean\n  /** Layout context affects styling and behavior */\n  layout?: ClientLayout\n  /** Predefined enum values, triggers select mode */\n  enum?: string[]\n  /** Example values, triggers select mode */\n  examples?: string[]\n  /** Default value to show in select mode */\n  default?: Props['modelValue']\n  /** Allow null in boolean select options */\n  nullable?: boolean\n  /** Placeholder text for empty input */\n  placeholder?: string\n  /** Show required indicator */\n  required?: boolean\n  /** Enable color picker extension */\n  colorPicker?: boolean\n  /** Show line numbers in editor */\n  lineNumbers?: boolean\n  /** Enable linting */\n  lint?: boolean\n  /** Enable line wrapping */\n  lineWrapping?: boolean\n  /** CodeMirror language mode */\n  language?: CodeMirrorLanguage\n  /** Additional CodeMirror extensions */\n  extensions?: Extension[]\n  /** Disable tab key for indentation */\n  disableTabIndent?: boolean\n  /** Disable enter key */\n  disableEnter?: boolean\n  /** Disable automatic bracket closing */\n  disableCloseBrackets?: boolean\n  /** Emit submit event on blur */\n  emitOnBlur?: boolean\n  /** Enable environment variable pills */\n  withVariables?: boolean\n  /** Emit change event even if the value is the same */\n  alwaysEmitChange?: boolean\n  /** Custom change handler, prevents default emit */\n  handleFieldChange?: (value: string) => void\n  /** Custom submit handler, prevents default emit */\n  handleFieldSubmit?: (value: string) => void\n  /** Put a linethrough on the input text */\n  linethrough?: boolean\n}\n\nconst {\n  modelValue,\n  environment,\n  type,\n  disabled = false,\n  error = false,\n  layout = 'desktop',\n  enum: enumProp,\n  examples,\n  default: defaultProp,\n  nullable = false,\n  placeholder,\n  required,\n  colorPicker = false,\n  lineNumbers = false,\n  lint = false,\n  lineWrapping = false,\n  language,\n  extensions = [],\n  disableTabIndent = false,\n  disableEnter = false,\n  disableCloseBrackets = false,\n  emitOnBlur = true,\n  alwaysEmitChange = false,\n  withVariables = true,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string]\n  'blur': [value: string]\n  'redirectToEnvironment': []\n}>()\n\n// ---------------------------------------------------------------------------\n// Component identity and focus state\n\nconst attrs = useAttrs() as { id?: string }\nconst componentId = attrs.id || `id-${nanoid()}`\nconst isFocused = ref(false)\n\n// ---------------------------------------------------------------------------\n// Rendering mode detection\n\n/**\n * Determines if we should render a select dropdown for boolean types.\n */\nconst isBooleanMode = computed((): boolean => {\n  if (enumProp?.length) {\n    return false\n  }\n  return type === 'boolean' || (Array.isArray(type) && type.includes('boolean'))\n})\n\n/**\n * Options for boolean select mode.\n */\nconst booleanOptions = computed((): string[] =>\n  nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\n/**\n * Default type when dealing with type arrays.\n * Finds the first non-null type.\n */\nconst defaultType = computed((): string | undefined => {\n  if (Array.isArray(type)) {\n    return type.find((t) => t !== 'null') ?? 'string'\n  }\n  return type\n})\n\n// ---------------------------------------------------------------------------\n// Event handlers\n\n/**\n * Handles value changes during typing.\n */\nconst handleChange = (value: string): void => {\n  if (!alwaysEmitChange && value === serializeValue(modelValue)) {\n    return\n  }\n\n  // Use custom handler or emit update\n  if (handleFieldChange) {\n    handleFieldChange(value)\n  } else {\n    emit('update:modelValue', value)\n  }\n}\n\n/**\n * Handles form submission (enter key or blur with emitOnBlur).\n */\nconst handleSubmit = (value: string): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value)\n  }\n\n  emit('blur', value)\n}\n\n/**\n * Handles model value updates from select components.\n */\nconst handleSelectChange = (value: string): void =>\n  emit('update:modelValue', value)\n\n// ---------------------------------------------------------------------------\n// CodeMirror setup\n\n/**\n * Build extensions array.\n * Note: Extensions are not reactive after initialization.\n */\nconst buildExtensions = (): Extension[] => {\n  const extensionsList: Extension[] = [...extensions]\n\n  if (colorPicker) {\n    extensionsList.push(colorPickerExtension)\n  }\n\n  return extensionsList\n}\n\n/**\n * Reactive pill plugin for environment variable visualization.\n */\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n/**\n * Combined extensions for CodeMirror.\n */\nconst codeMirrorExtensions = computed((): Extension[] => [\n  ...buildExtensions(),\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\n/** Converts the model value to a string for CodeMirror */\nconst serializeValue = (value: CodeInputModelValue): string => {\n  if (typeof value === 'string') {\n    return value\n  }\n  return JSON.stringify(value)\n}\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() => serializeValue(modelValue)),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => {\n    isFocused.value = true\n  },\n  onBlur: handleBlur,\n  codeMirrorRef,\n  disableTabIndent: toRef(() => disableTabIndent),\n  disableEnter: toRef(() => disableEnter),\n  disableCloseBrackets: toRef(() => disableCloseBrackets),\n  lineNumbers: toRef(() => lineNumbers),\n  language: toRef(() => language),\n  lint: toRef(() => lint),\n  extensions: codeMirrorExtensions,\n  placeholder: toRef(() => placeholder),\n})\n\n/**\n * Handle autofocus attribute.\n */\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\n// ---------------------------------------------------------------------------\n// Environment variable dropdown\n\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 { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n/**\n * Determines if the environment variable dropdown should be visible.\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    Boolean(environment)\n  )\n})\n\n// ---------------------------------------------------------------------------\n// Keyboard event handling\n\n/**\n * Handles keyboard navigation for dropdown and form submission.\n */\nconst handleKeyDown = (key: string, event: KeyboardEvent): void => {\n  if (showDropdown.value) {\n    if (key === 'down' || key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey(key)\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n    return\n  }\n\n  if (key === 'escape' && !disableTabIndent) {\n    event.stopPropagation()\n  }\n\n  if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Public API\n\ndefineExpose({\n  /**\n   * Focus the codemirror element\n   *\n   * @param cursorAtEnd boolean place the cursor at the end of the input\n   */\n  focus: (position?: 'start' | 'end' | number) => {\n    if (!codeMirror.value) {\n      return\n    }\n    codeMirror.value.focus()\n\n    if (!isDefined(position)) {\n      return\n    }\n\n    const anchor = (() => {\n      if (position === 'start') {\n        return 0\n      }\n      if (position === 'end') {\n        return codeMirror.value.state.doc.length\n      }\n      return position\n    })()\n\n    // Move the cursor to the specified position\n    codeMirror.value.dispatch({\n      selection: { anchor },\n      scrollIntoView: true,\n    })\n  },\n  isFocused,\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue,\n  cursorPosition: () => codeMirror.value?.state.selection.main.head,\n  serializeValue,\n})\n</script>\n\n<template>\n  <!-- Disabled mode: read-only text display -->\n  <div\n    v-if=\"disabled\"\n    class=\"text-c-2 flex cursor-default items-center justify-center\"\n    :class=\"{\n      'font-code pr-2 pl-1 text-base': layout === 'modal',\n      'px-2': layout !== 'modal',\n      'line-through': linethrough,\n    }\"\n    data-testid=\"code-input-disabled\">\n    <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n  </div>\n\n  <!-- Enum mode: select dropdown with predefined values -->\n  <DataTableInputSelect\n    v-else-if=\"enumProp?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :type=\"defaultType\"\n    :value=\"enumProp\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Boolean mode: select dropdown with true/false (and optionally null) -->\n  <DataTableInputSelect\n    v-else-if=\"isBooleanMode\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"booleanOptions\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Examples mode: select dropdown with example values -->\n  <DataTableInputSelect\n    v-else-if=\"examples?.length\"\n    :default=\"defaultProp\"\n    :modelValue=\"modelValue\"\n    :value=\"examples\"\n    @update:modelValue=\"handleSelectChange\" />\n\n  <!-- Editor mode: CodeMirror with environment variable support -->\n  <div\n    v-else\n    :id=\"componentId\"\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      'line-through': linethrough,\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    <!-- Tab exit hint (shown when focused) -->\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\n  <!-- Warning slot (positioned absolutely) -->\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\n  <!-- Icon slot (positioned absolutely) -->\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\n  <!-- Required indicator -->\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\n  <!-- Environment variable autocomplete dropdown -->\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown && environment\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('redirectToEnvironment')\"\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  color: var(--scalar-color-1) !important;\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n}\n.light-mode .cm-pill {\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/v2/components/code-input/code-variable-widget.js

@@ -0,0 +1,132 @@
+import { createApp, defineComponent, h } from "vue";
+import { ScalarTooltip } from "@scalar/components";
+import { Decoration, EditorView, RangeSetBuilder, ViewPlugin, WidgetType } from "@scalar/use-codemirror";
+import { REGEX } from "@scalar/helpers/regex/regex-helpers";
+//#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
+export { backspaceCommand, pillPlugin };
+
+//# sourceMappingURL=code-variable-widget.js.map