@scalar/api-client 3.3.0 → 3.4.0

package/dist/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.d.ts

@@ -0,0 +1,31 @@
+type UsePathMaskingOptions = {
+    /**
+     * Watched for becoming truthy before any masking fires. Typically a getter
+     * for the editor instance (e.g. the CodeMirror view) so we do not try to
+     * mask before the input is ready to accept focus and content updates.
+     */
+    isReady: () => unknown;
+    /**
+     * Key that changes whenever navigation switches to a different operation
+     * or example. The masking re-runs every time this value changes.
+     */
+    operationKey: () => unknown;
+    /**
+     * Predicate evaluated on every trigger. Returning `true` performs the mask.
+     */
+    shouldMask: () => boolean;
+    /**
+     * Callback invoked when a mask should happen. Typically focuses the input
+     * and clears its visible text.
+     */
+    onMask: () => void;
+};
+/**
+ * Masks placeholder paths in an editable input (e.g. the address bar).
+ *
+ * Fires on the initial ready state and on every `operationKey` change. The
+ * consumer owns any content-aware guard needed before clearing visible text.
+ */
+export declare const usePathMasking: ({ isReady, operationKey, shouldMask, onMask }: UsePathMaskingOptions) => void;
+export {};
+//# sourceMappingURL=use-path-masking.d.ts.map

package/dist/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-path-masking.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.ts"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,GAAG;IAC3B;;;;OAIG;IACH,OAAO,EAAE,MAAM,OAAO,CAAA;IACtB;;;OAGG;IACH,YAAY,EAAE,MAAM,OAAO,CAAA;IAC3B;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAA;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,+CAA+C,qBAAqB,KAAG,IAiBrG,CAAA"}

package/dist/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.js

@@ -0,0 +1,18 @@
+import { watch } from "vue";
+//#region src/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.ts
+/**
+* Masks placeholder paths in an editable input (e.g. the address bar).
+*
+* Fires on the initial ready state and on every `operationKey` change. The
+* consumer owns any content-aware guard needed before clearing visible text.
+*/
+var usePathMasking = ({ isReady, operationKey, shouldMask, onMask }) => {
+	watch([isReady, operationKey], ([ready]) => {
+		if (!ready) return;
+		if (shouldMask()) onMask();
+	}, { flush: "post" });
+};
+//#endregion
+export { usePathMasking };
+
+//# sourceMappingURL=use-path-masking.js.map

package/dist/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-path-masking.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/hooks/use-path-masking.ts"],"sourcesContent":["import { watch } from 'vue'\n\ntype UsePathMaskingOptions = {\n  /**\n   * Watched for becoming truthy before any masking fires. Typically a getter\n   * for the editor instance (e.g. the CodeMirror view) so we do not try to\n   * mask before the input is ready to accept focus and content updates.\n   */\n  isReady: () => unknown\n  /**\n   * Key that changes whenever navigation switches to a different operation\n   * or example. The masking re-runs every time this value changes.\n   */\n  operationKey: () => unknown\n  /**\n   * Predicate evaluated on every trigger. Returning `true` performs the mask.\n   */\n  shouldMask: () => boolean\n  /**\n   * Callback invoked when a mask should happen. Typically focuses the input\n   * and clears its visible text.\n   */\n  onMask: () => void\n}\n\n/**\n * Masks placeholder paths in an editable input (e.g. the address bar).\n *\n * Fires on the initial ready state and on every `operationKey` change. The\n * consumer owns any content-aware guard needed before clearing visible text.\n */\nexport const usePathMasking = ({ isReady, operationKey, shouldMask, onMask }: UsePathMaskingOptions): void => {\n  watch(\n    [isReady, operationKey],\n    ([ready]) => {\n      if (!ready) {\n        return\n      }\n\n      if (shouldMask()) {\n        onMask()\n      }\n    },\n    // `post` flush runs after child watchers sync `modelValue` into the\n    // underlying input (e.g. CodeInput → CodeMirror); otherwise they would\n    // overwrite the cleared content with the new path.\n    { flush: 'post' },\n  )\n}\n"],"mappings":";;;;;;;;AA+BA,IAAa,kBAAkB,EAAE,SAAS,cAAc,YAAY,aAA0C;AAC5G,OACE,CAAC,SAAS,aAAa,GACtB,CAAC,WAAW;AACX,MAAI,CAAC,MACH;AAGF,MAAI,YAAY,CACd,SAAQ;IAMZ,EAAE,OAAO,QAAQ,CAClB"}

package/dist/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthSelector.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarIconButton,\n  ScalarListboxCheckbox,\n  useModal,\n  type Icon,\n  type ScalarButton as ScalarButtonType,\n} from '@scalar/components'\nimport { ScalarIconCaretDown, ScalarIconTrash } from '@scalar/icons'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  isAuthOptional,\n  type MergedSecuritySchemes,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  OpenApiDocument,\n  SecurityRequirementObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, useId } from 'vue'\n\nimport DeleteRequestAuthModal from '@/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport {\n  formatComplexScheme,\n  formatScheme,\n  getSecuritySchemeOptions,\n  type SecuritySchemeOption,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport RequestAuthDataTable from './RequestAuthDataTable.vue'\n\nconst {\n  environment,\n  eventBus,\n  createAnySecurityScheme = false,\n  defaultOpen = true,\n  isStatic = false,\n  meta,\n  proxyUrl,\n  securityRequirements,\n  securitySchemes,\n  selectedSecurity,\n  server,\n  title,\n  options,\n} = defineProps<{\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Allows adding authentication which is not in the document */\n  createAnySecurityScheme?: boolean\n  /** Whether the authentication disclosure should start expanded */\n  defaultOpen?: boolean\n  /** Creates a static disclosure that cannot be collapsed */\n  isStatic?: boolean\n  meta: AuthMeta\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedSecurity: SelectedSecurity | undefined\n  server: ServerObject | null\n  title: string\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n}>()\n\nconst titleId = useId()\nconst comboboxButtonRef = ref<typeof ScalarButtonType | null>(null)\nconst isDisclosureOpen = ref(false)\n\nconst deleteModal = useModal()\nconst schemeToDelete = ref<{\n  label: string\n  payload: SecurityRequirementObject\n} | null>(null)\n\n/**\n * Determines if authentication is required or optional\n *\n * Auth is optional when there is an empty security requirement and no complex requirements.\n * Complex requirements have multiple auth schemes combined (e.g., API key + OAuth).\n */\nconst authIndicator = computed<{ icon: Icon; text: string } | null>(() => {\n  if (!securityRequirements?.length) {\n    return null\n  }\n\n  const isOptional = isAuthOptional(securityRequirements)\n\n  return {\n    icon: isOptional ? 'Unlock' : 'Lock',\n    text: isOptional ? 'Optional' : 'Required',\n  }\n})\n\n/** All available auth scheme options for the dropdown */\nconst availableSchemeOptions = computed(() =>\n  getSecuritySchemeOptions(\n    securityRequirements ?? [],\n    securitySchemes ?? {},\n    selectedSecurity?.selectedSchemes ?? [],\n    createAnySecurityScheme,\n  ),\n)\n\n/** Currently active auth schemes selected for this operation or collection */\nconst activeSchemeOptions = computed<SecuritySchemeOption[]>(() => {\n  const schemes = selectedSecurity?.selectedSchemes\n  if (!schemes?.length) {\n    return []\n  }\n\n  return schemes.flatMap((requirement) => {\n    const schemeNames = Object.keys(requirement)\n\n    if (schemeNames.length === 0) {\n      return []\n    }\n\n    // Complex auth requirement with multiple schemes\n    if (schemeNames.length > 1) {\n      return formatComplexScheme(requirement)\n    }\n\n    // Simple auth requirement with single scheme\n    const schemeName = schemeNames[0]\n    if (!schemeName) {\n      return []\n    }\n\n    const scheme = getResolvedRef(securitySchemes?.[schemeName])\n    if (!scheme) {\n      return []\n    }\n\n    return formatScheme({\n      name: schemeName,\n      value: requirement,\n    })\n  })\n})\n\n/**\n * Opens the combobox dropdown when clicking the auth indicator badge.\n * Prevents the disclosure from toggling if it is already open.\n */\nconst handleAuthIndicatorClick = (event: Event): void => {\n  if (isDisclosureOpen.value) {\n    event.stopPropagation()\n  }\n  comboboxButtonRef.value?.$el.click()\n}\n\n/**\n * Updates the selected auth schemes.\n * Separates existing schemes from newly created ones for the event payload.\n */\nconst handleSchemeSelection = (selected: SecuritySchemeOption[]): void => {\n  const existingSchemes = selected\n    .filter((option) => option.payload === undefined)\n    .map((option) => unpackProxyObject(option.value, { depth: 2 }))\n\n  const newSchemes = selected\n    .filter((option) => option.payload !== undefined)\n    .map((option) => ({\n      name: option.label,\n      scheme: option.payload!,\n    }))\n\n  eventBus.emit('auth:update:selected-security-schemes', {\n    selectedRequirements: existingSchemes,\n    newSchemes,\n    meta,\n  })\n}\n\n/** Shows the delete confirmation modal for the selected scheme */\nconst handleDeleteRequest = (option: {\n  label: string\n  value: SecurityRequirementObject\n}): void => {\n  schemeToDelete.value = { label: option.label, payload: option.value }\n  deleteModal.show()\n}\n\n/** Deletes the selected auth scheme after confirmation */\nconst handleDeleteConfirm = (): void => {\n  if (!schemeToDelete.value) {\n    return\n  }\n\n  eventBus.emit('auth:delete:security-scheme', {\n    names: Object.keys(schemeToDelete.value.payload),\n  })\n\n  schemeToDelete.value = null\n  deleteModal.hide()\n}\n\ndefineExpose({\n  authIndicator,\n  selectedSchemeOptions: activeSchemeOptions,\n  schemeOptions: availableSchemeOptions,\n})\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params relative\"\n    :defaultOpen\n    :isStatic=\"isStatic\"\n    :itemCount=\"activeSchemeOptions.length\"\n    @update:modelValue=\"(open) => (isDisclosureOpen = open)\">\n    <template #title>\n      <div\n        :id=\"titleId\"\n        class=\"inline-flex items-center gap-0.5 leading-[20px]\">\n        <span>{{ title }}</span>\n\n        <span\n          v-if=\"authIndicator\"\n          class=\"text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal\"\n          :class=\"{ 'text-c-1': authIndicator.text === 'Required' }\"\n          data-testid=\"auth-indicator\"\n          @click=\"handleAuthIndicatorClick\">\n          {{ authIndicator.text }}\n        </span>\n      </div>\n    </template>\n\n    <!-- Auth Dropdown (hidden when only one scheme is available) -->\n    <template #actions>\n      <ScalarComboboxMultiselect\n        class=\"w-72 text-xs\"\n        :modelValue=\"activeSchemeOptions\"\n        multiple\n        :options=\"availableSchemeOptions\"\n        placement=\"bottom-end\"\n        teleport\n        @delete=\"handleDeleteRequest\"\n        @update:modelValue=\"handleSchemeSelection\">\n        <ScalarButton\n          ref=\"comboboxButtonRef\"\n          :aria-describedby=\"titleId\"\n          class=\"group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal\"\n          variant=\"ghost\">\n          <!-- Single auth scheme selected -->\n          <template v-if=\"activeSchemeOptions.length === 1\">\n            <span class=\"sr-only\">Selected Auth Type:</span>\n            {{ activeSchemeOptions[0]?.label }}\n          </template>\n\n          <!-- Multiple auth schemes selected -->\n          <template v-else-if=\"activeSchemeOptions.length > 1\">\n            Multiple\n            <span class=\"sr-only\">Auth Types Selected</span>\n          </template>\n\n          <!-- No auth schemes selected -->\n          <template v-else>\n            <span class=\"sr-only\">Select</span>\n            Auth Type\n          </template>\n\n          <ScalarIconCaretDown\n            class=\"size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180\"\n            weight=\"bold\" />\n        </ScalarButton>\n\n        <template #option=\"{ option, selected }\">\n          <ScalarListboxCheckbox\n            multiselect\n            :selected=\"selected\" />\n          <div class=\"min-w-0 flex-1 truncate\">\n            {{ option.label }}\n          </div>\n          <ScalarIconButton\n            v-if=\"option.isDeletable\"\n            class=\"-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100\"\n            :icon=\"ScalarIconTrash\"\n            :label=\"`Delete ${option.label}`\"\n            size=\"xs\"\n            @click.stop=\"handleDeleteRequest(option)\" />\n        </template>\n      </ScalarComboboxMultiselect>\n    </template>\n\n    <!-- Auth Table -->\n    <RequestAuthDataTable\n      :activeAuthIndex=\"selectedSecurity?.selectedIndex ?? 0\"\n      :environment\n      :eventBus\n      :isStatic\n      :meta\n      :options\n      :proxyUrl\n      :securitySchemes\n      :selectedSchemeOptions=\"activeSchemeOptions\"\n      :server />\n\n    <!-- Delete Auth Modal -->\n    <DeleteRequestAuthModal\n      v-if=\"schemeToDelete\"\n      :label=\"schemeToDelete.label\"\n      :scheme=\"schemeToDelete\"\n      :state=\"deleteModal\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDeleteConfirm\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"AuthSelector.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/AuthSelector.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarIconButton,\n  ScalarListboxCheckbox,\n  useModal,\n  type Icon,\n  type ScalarButton as ScalarButtonType,\n} from '@scalar/components'\nimport { ScalarIconCaretDown, ScalarIconTrash } from '@scalar/icons'\nimport type { SelectedSecurity } from '@scalar/workspace-store/entities/auth'\nimport type {\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport { unpackProxyObject } from '@scalar/workspace-store/helpers/unpack-proxy'\nimport {\n  isAuthOptional,\n  type MergedSecuritySchemes,\n} from '@scalar/workspace-store/request-example'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type {\n  OpenApiDocument,\n  SecurityRequirementObject,\n  ServerObject,\n} from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { computed, ref, useId } from 'vue'\n\nimport DeleteRequestAuthModal from '@/v2/blocks/scalar-auth-selector-block/components/DeleteRequestAuthModal.vue'\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport {\n  formatComplexScheme,\n  formatScheme,\n  getSecuritySchemeOptions,\n  type SecuritySchemeOption,\n} from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { CollapsibleSection } from '@/v2/components/layout'\n\nimport RequestAuthDataTable from './RequestAuthDataTable.vue'\n\nconst {\n  environment,\n  eventBus,\n  createAnySecurityScheme = false,\n  defaultOpen = true,\n  isStatic = false,\n  meta,\n  proxyUrl,\n  securityRequirements,\n  securitySchemes,\n  selectedSecurity,\n  server,\n  title,\n  options,\n} = defineProps<{\n  environment: XScalarEnvironment\n  eventBus: WorkspaceEventBus\n  /** Allows adding authentication which is not in the document */\n  createAnySecurityScheme?: boolean\n  /** Whether the authentication disclosure should start expanded */\n  defaultOpen?: boolean\n  /** Creates a static disclosure that cannot be collapsed */\n  isStatic?: boolean\n  meta: AuthMeta\n  proxyUrl: string\n  securityRequirements: OpenApiDocument['security']\n  securitySchemes: MergedSecuritySchemes\n  selectedSecurity: SelectedSecurity | undefined\n  server: ServerObject | null\n  title: string\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n}>()\n\nconst titleId = useId()\nconst comboboxButtonRef = ref<typeof ScalarButtonType | null>(null)\nconst isDisclosureOpen = ref(false)\n\nconst deleteModal = useModal()\nconst schemeToDelete = ref<{\n  label: string\n  payload: SecurityRequirementObject\n} | null>(null)\n\n/**\n * Determines if authentication is required or optional\n *\n * Auth is optional when there is an empty security requirement and no complex requirements.\n * Complex requirements have multiple auth schemes combined (e.g., API key + OAuth).\n */\nconst authIndicator = computed<{ icon: Icon; text: string } | null>(() => {\n  if (!securityRequirements?.length) {\n    return null\n  }\n\n  const isOptional = isAuthOptional(securityRequirements)\n\n  return {\n    icon: isOptional ? 'Unlock' : 'Lock',\n    text: isOptional ? 'Optional' : 'Required',\n  }\n})\n\n/** All available auth scheme options for the dropdown */\nconst availableSchemeOptions = computed(() =>\n  getSecuritySchemeOptions(\n    securityRequirements ?? [],\n    securitySchemes ?? {},\n    selectedSecurity?.selectedSchemes ?? [],\n    createAnySecurityScheme,\n  ),\n)\n\n/** Currently active auth schemes selected for this operation or collection */\nconst activeSchemeOptions = computed<SecuritySchemeOption[]>(() => {\n  const schemes = selectedSecurity?.selectedSchemes\n  if (!schemes?.length) {\n    return []\n  }\n\n  return schemes.flatMap((requirement) => {\n    const schemeNames = Object.keys(requirement)\n\n    if (schemeNames.length === 0) {\n      return []\n    }\n\n    // Complex auth requirement with multiple schemes\n    if (schemeNames.length > 1) {\n      return formatComplexScheme(requirement)\n    }\n\n    // Simple auth requirement with single scheme\n    const schemeName = schemeNames[0]\n    if (!schemeName) {\n      return []\n    }\n\n    const scheme = getResolvedRef(securitySchemes?.[schemeName])\n    if (!scheme) {\n      return []\n    }\n\n    return formatScheme({\n      name: schemeName,\n      value: requirement,\n    })\n  })\n})\n\n/**\n * Opens the combobox dropdown when clicking the auth indicator badge.\n * Prevents the disclosure from toggling if it is already open.\n */\nconst handleAuthIndicatorClick = (event: Event): void => {\n  if (isDisclosureOpen.value) {\n    event.stopPropagation()\n  }\n  comboboxButtonRef.value?.$el.click()\n}\n\n/**\n * Updates the selected auth schemes.\n * Separates existing schemes from newly created ones for the event payload.\n */\nconst handleSchemeSelection = (selected: SecuritySchemeOption[]): void => {\n  const existingSchemes = selected\n    .filter((option) => option.payload === undefined)\n    .map((option) => unpackProxyObject(option.value, { depth: 2 }))\n\n  const newSchemes = selected\n    .filter((option) => option.payload !== undefined)\n    .map((option) => ({\n      name: option.label,\n      scheme: option.payload!,\n    }))\n\n  eventBus.emit('auth:update:selected-security-schemes', {\n    selectedRequirements: existingSchemes,\n    newSchemes,\n    meta,\n  })\n}\n\n/** Shows the delete confirmation modal for the selected scheme */\nconst handleDeleteRequest = (option: {\n  label: string\n  value: SecurityRequirementObject\n}): void => {\n  schemeToDelete.value = { label: option.label, payload: option.value }\n  deleteModal.show()\n}\n\n/** Deletes the selected auth scheme after confirmation */\nconst handleDeleteConfirm = (): void => {\n  if (!schemeToDelete.value) {\n    return\n  }\n\n  eventBus.emit('auth:delete:security-scheme', {\n    names: Object.keys(schemeToDelete.value.payload),\n  })\n\n  schemeToDelete.value = null\n  deleteModal.hide()\n}\n\ndefineExpose({\n  authIndicator,\n  selectedSchemeOptions: activeSchemeOptions,\n  schemeOptions: availableSchemeOptions,\n})\n</script>\n<template>\n  <CollapsibleSection\n    class=\"group/params relative\"\n    :defaultOpen\n    :isStatic=\"isStatic\"\n    :itemCount=\"activeSchemeOptions.length\"\n    @update:modelValue=\"(open) => (isDisclosureOpen = open)\">\n    <template #title>\n      <div\n        :id=\"titleId\"\n        class=\"inline-flex items-center gap-0.5 leading-[20px]\">\n        <span>{{ title }}</span>\n\n        <span\n          v-if=\"authIndicator\"\n          class=\"text-c-3 hover:bg-b-3 hover:text-c-1 -my-0.5 -mr-1 cursor-pointer rounded px-1 py-0.5 leading-[normal] font-normal\"\n          :class=\"{ 'text-c-1': authIndicator.text === 'Required' }\"\n          data-testid=\"auth-indicator\"\n          @click=\"handleAuthIndicatorClick\">\n          {{ authIndicator.text }}\n        </span>\n      </div>\n    </template>\n\n    <!-- Auth Dropdown (hidden when only one scheme is available) -->\n    <template #actions>\n      <ScalarComboboxMultiselect\n        class=\"w-72 text-xs\"\n        :modelValue=\"activeSchemeOptions\"\n        multiple\n        :options=\"availableSchemeOptions\"\n        placement=\"bottom-end\"\n        teleport\n        @delete=\"handleDeleteRequest\"\n        @update:modelValue=\"handleSchemeSelection\">\n        <ScalarButton\n          ref=\"comboboxButtonRef\"\n          :aria-describedby=\"titleId\"\n          class=\"group/combobox-button hover:text-c-1 text-c-2 flex h-fit w-full items-center gap-1 px-0.75 py-0.25 text-base font-normal\"\n          variant=\"ghost\">\n          <!-- Single auth scheme selected -->\n          <template v-if=\"activeSchemeOptions.length === 1\">\n            <span class=\"sr-only\">Selected Auth Type:</span>\n            {{ activeSchemeOptions[0]?.label }}\n          </template>\n\n          <!-- Multiple auth schemes selected -->\n          <template v-else-if=\"activeSchemeOptions.length > 1\">\n            Multiple\n            <span class=\"sr-only\">Auth Types Selected</span>\n          </template>\n\n          <!-- No auth schemes selected -->\n          <template v-else>\n            <span class=\"sr-only\">Select</span>\n            Auth Type\n          </template>\n\n          <ScalarIconCaretDown\n            class=\"size-3 shrink-0 transition-transform duration-100 group-aria-expanded/combobox-button:rotate-180\"\n            weight=\"bold\" />\n        </ScalarButton>\n\n        <template #option=\"{ option, selected }\">\n          <ScalarListboxCheckbox\n            multiselect\n            :selected=\"selected\" />\n          <div class=\"min-w-0 flex-1 truncate\">\n            {{ option.label }}\n          </div>\n          <ScalarIconButton\n            v-if=\"option.isDeletable\"\n            class=\"-m-0.5 shrink-0 p-0.5 opacity-0 group-hover/item:opacity-100\"\n            :icon=\"ScalarIconTrash\"\n            :label=\"`Delete ${option.label}`\"\n            size=\"xs\"\n            @click.stop=\"handleDeleteRequest(option)\" />\n        </template>\n      </ScalarComboboxMultiselect>\n    </template>\n\n    <!-- Auth Table -->\n    <RequestAuthDataTable\n      :activeAuthIndex=\"selectedSecurity?.selectedIndex ?? 0\"\n      :environment\n      :eventBus\n      :isStatic\n      :meta\n      :options\n      :proxyUrl\n      :securitySchemes\n      :selectedSchemeOptions=\"activeSchemeOptions\"\n      :server />\n\n    <!-- Delete Auth Modal -->\n    <DeleteRequestAuthModal\n      v-if=\"schemeToDelete\"\n      :label=\"schemeToDelete.label\"\n      :scheme=\"schemeToDelete\"\n      :state=\"deleteModal\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDeleteConfirm\" />\n  </CollapsibleSection>\n</template>\n"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import CodeInput_vue_vue_type_script_setup_true_lang_default from "./CodeInput.v
 /* 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-6499ec1f"]]);
+var CodeInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CodeInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3118bf46"]]);
 //#endregion
 export { CodeInput_default as default };
 

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

@@ -1 +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 autocomplete for environment variables and runtime context functions\n * (for example `{{$guid}}`) 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 {\n  CONTEXT_FUNCTION_NAMES,\n  getContextFunctionComment,\n  isContextFunctionName,\n} from '@scalar/workspace-store/request-example'\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  /** Enable fake data suggestions like $guid, $timestamp, etc. Should only be enabled for parameters and request bodies */\n  withFakeData?: 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  withFakeData = false,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\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 = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\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 contextFunctionDropdownItems = computed(() =>\n  withFakeData\n    ? CONTEXT_FUNCTION_NAMES.map((key) => ({\n        key,\n        description: getContextFunctionComment(key),\n      }))\n    : [],\n)\n\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isContextFunctionName,\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, setCodeMirrorContent } = 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 * Shows when environment is defined (for env vars) or withFakeData is true (for context functions)\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    (Boolean(environment) || withFakeData)\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 ?? '', event)\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  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\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\"\n    ref=\"dropdownRef\"\n    :contextFunctionItems=\"contextFunctionDropdownItems\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\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--context-fn {\n  border: 1px dashed color-mix(in srgb, var(--scalar-color-3), transparent 35%);\n  padding: 0px 8px;\n}\n.light-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 40%\n  ) !important;\n}\n.dark-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 55%\n  ) !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":""}
+{"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 autocomplete for environment variables and runtime context functions\n * (for example `{{$guid}}`) 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 {\n  CONTEXT_FUNCTION_NAMES,\n  getContextFunctionComment,\n  isContextFunctionName,\n} from '@scalar/workspace-store/request-example'\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  /** Enable fake data suggestions like $guid, $timestamp, etc. Should only be enabled for parameters and request bodies */\n  withFakeData?: 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  withFakeData = false,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\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 = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\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 contextFunctionDropdownItems = computed(() =>\n  withFakeData\n    ? CONTEXT_FUNCTION_NAMES.map((key) => ({\n        key,\n        description: getContextFunctionComment(key),\n      }))\n    : [],\n)\n\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isContextFunctionName,\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, setCodeMirrorContent } = 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 * Shows when environment is defined (for env vars) or withFakeData is true (for context functions)\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    (Boolean(environment) || withFakeData)\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(codeMirror.value?.state.doc.toString() ?? '', event)\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  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\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\"\n    ref=\"dropdownRef\"\n    :contextFunctionItems=\"contextFunctionDropdownItems\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\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--context-fn {\n  border: 1px dashed color-mix(in srgb, var(--scalar-color-3), transparent 35%);\n  padding: 0px 8px;\n}\n.light-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 40%\n  ) !important;\n}\n.dark-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 55%\n  ) !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

@@ -270,7 +270,7 @@ var CodeInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				return;
 			}
 			if (key === "escape" && !__props.disableTabIndent) event.stopPropagation();
-			if (key === "enter" && event.target instanceof HTMLDivElement) handleSubmit(event.target.textContent ?? "", event);
+			if (key === "enter" && event.target instanceof HTMLDivElement) handleSubmit(codeMirror.value?.state.doc.toString() ?? "", event);
 		};
 		__expose({
 			focus: (position) => {

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

@@ -1 +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 autocomplete for environment variables and runtime context functions\n * (for example `{{$guid}}`) 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 {\n  CONTEXT_FUNCTION_NAMES,\n  getContextFunctionComment,\n  isContextFunctionName,\n} from '@scalar/workspace-store/request-example'\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  /** Enable fake data suggestions like $guid, $timestamp, etc. Should only be enabled for parameters and request bodies */\n  withFakeData?: 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  withFakeData = false,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\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 = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\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 contextFunctionDropdownItems = computed(() =>\n  withFakeData\n    ? CONTEXT_FUNCTION_NAMES.map((key) => ({\n        key,\n        description: getContextFunctionComment(key),\n      }))\n    : [],\n)\n\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isContextFunctionName,\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, setCodeMirrorContent } = 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 * Shows when environment is defined (for env vars) or withFakeData is true (for context functions)\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    (Boolean(environment) || withFakeData)\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 ?? '', event)\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  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\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\"\n    ref=\"dropdownRef\"\n    :contextFunctionItems=\"contextFunctionDropdownItems\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\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--context-fn {\n  border: 1px dashed color-mix(in srgb, var(--scalar-color-3), transparent 35%);\n  padding: 0px 8px;\n}\n.light-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 40%\n  ) !important;\n}\n.dark-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 55%\n  ) !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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"}
+{"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 autocomplete for environment variables and runtime context functions\n * (for example `{{$guid}}`) 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 {\n  CONTEXT_FUNCTION_NAMES,\n  getContextFunctionComment,\n  isContextFunctionName,\n} from '@scalar/workspace-store/request-example'\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  /** Enable fake data suggestions like $guid, $timestamp, etc. Should only be enabled for parameters and request bodies */\n  withFakeData?: 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  withFakeData = false,\n  handleFieldChange,\n  handleFieldSubmit,\n} = defineProps<Props>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'submit': [value: string, event: KeyboardEvent | FocusEvent]\n  'navigate': [route: { page: 'document'; path: 'environment' }]\n  'blur': [value: string, event: FocusEvent]\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 = (\n  value: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  if (handleFieldSubmit) {\n    handleFieldSubmit(value)\n  } else {\n    emit('submit', value, event)\n  }\n}\n\n/**\n * Handles input blur event.\n */\nconst handleBlur = (value: string, event: FocusEvent): void => {\n  isFocused.value = false\n\n  if (emitOnBlur && modelValue) {\n    handleSubmit(value, event)\n  }\n\n  emit('blur', value, event)\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 contextFunctionDropdownItems = computed(() =>\n  withFakeData\n    ? CONTEXT_FUNCTION_NAMES.map((key) => ({\n        key,\n        description: getContextFunctionComment(key),\n      }))\n    : [],\n)\n\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment,\n    isContextFunctionName,\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, setCodeMirrorContent } = 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 * Shows when environment is defined (for env vars) or withFakeData is true (for context functions)\n */\nconst displayVariablesDropdown = computed((): boolean => {\n  return (\n    showDropdown.value &&\n    withVariables &&\n    layout !== 'modal' &&\n    (Boolean(environment) || withFakeData)\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(codeMirror.value?.state.doc.toString() ?? '', event)\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  codeMirrorRef,\n  modelValue,\n  setCodeMirrorContent,\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\"\n    ref=\"dropdownRef\"\n    :contextFunctionItems=\"contextFunctionDropdownItems\"\n    :dropdownPosition=\"dropdownPosition\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @redirect=\"emit('navigate', { page: 'document', path: 'environment' })\"\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--context-fn {\n  border: 1px dashed color-mix(in srgb, var(--scalar-color-3), transparent 35%);\n  padding: 0px 8px;\n}\n.light-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 40%\n  ) !important;\n}\n.dark-mode .cm-pill--context-fn {\n  background: color-mix(\n    in srgb,\n    var(--scalar-background-3),\n    transparent 55%\n  ) !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/modals/ModalClientContainer.vue.d.ts

@@ -2,9 +2,9 @@ import { type ModalState } from '@scalar/components';
 type __VLS_Props = {
     modalState: ModalState;
 };
-declare var __VLS_13: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;

package/dist/v2/components/modals/ModalClientContainer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClientContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"names":[],"mappings":"AAkLA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAW3B,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAkJ9C,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOhD,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ModalClientContainer.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"names":[],"mappings":"AA0KA,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAI3B,KAAK,WAAW,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC;AAgI9C,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/components/modals/ModalClientContainer.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import ModalClientContainer_vue_vue_type_script_setup_true_lang_default from "./ModalClientContainer.vue.script.js";
 /* empty css                                   */
 //#region src/v2/components/modals/ModalClientContainer.vue
-var ModalClientContainer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModalClientContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6118685a"]]);
+var ModalClientContainer_default = /* @__PURE__ */ _plugin_vue_export_helper_default(ModalClientContainer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-ae5e8531"]]);
 //#endregion
 export { ModalClientContainer_default as default };
 

package/dist/v2/components/modals/ModalClientContainer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n  type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport {\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\nconst id = useId()\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: `#${id}`,\n  })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n  () => props.modalState.open,\n  async (open) => {\n    if (open) {\n      await nextTick()\n      activateFocusTrap()\n      emit('open')\n    } else {\n      deactivateFocusTrap()\n      emit('close')\n    }\n  },\n  { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n  deactivateFocusTrap()\n})\n</script>\n\n<template>\n  <Transition name=\"scalar-client-fade\">\n    <div\n      v-show=\"modalState.open\"\n      class=\"scalar scalar-app z-overlay relative\">\n      <div class=\"scalar-container\">\n        <div\n          :id=\"id\"\n          ref=\"client\"\n          aria-label=\"API Client\"\n          aria-modal=\"true\"\n          v-bind=\"$attrs\"\n          class=\"scalar-app-layout scalar-client\"\n          role=\"dialog\"\n          tabindex=\"-1\">\n          <ScalarTeleportRoot>\n            <slot />\n          </ScalarTeleportRoot>\n        </div>\n\n        <!-- overlay / exit area -->\n        <div\n          class=\"scalar-app-exit\"\n          @click=\"modalState.hide()\" />\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n  background: var(--scalar-background-1);\n  height: calc(100% - 120px);\n  max-width: 1390px;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n  .scalar .scalar-app-layout {\n    height: 100%;\n    max-height: 90svh;\n  }\n}\n\n.scalar .scalar-app-exit {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #00000038;\n  cursor: pointer;\n  z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n  font-family: sans-serif;\n  position: absolute;\n  top: 0;\n  right: 12px;\n  font-size: 30px;\n  font-weight: 100;\n  line-height: 50px;\n  text-align: center;\n  color: white;\n  opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n  opacity: 1;\n}\n\n/* container */\n.scalar-container {\n  overflow: hidden;\n  visibility: visible;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n\n.scalar-client-fade-enter-active,\n.scalar-client-fade-leave-active {\n  transition: opacity 0.35s ease;\n}\n\n.scalar-client-fade-enter-from,\n.scalar-client-fade-leave-to {\n  opacity: 0;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ModalClientContainer.vue.js","names":[],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n  type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport { nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: () => client.value as HTMLElement,\n  })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n  () => props.modalState.open,\n  async (open) => {\n    if (open) {\n      await nextTick()\n      activateFocusTrap()\n      emit('open')\n    } else {\n      deactivateFocusTrap()\n      emit('close')\n    }\n  },\n  { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n  deactivateFocusTrap()\n})\n</script>\n\n<template>\n  <div class=\"scalar scalar-app z-overlay relative\">\n    <div\n      class=\"scalar-container\"\n      :class=\"{ 'scalar-client--open': modalState.open }\">\n      <div\n        ref=\"client\"\n        aria-label=\"API Client\"\n        aria-modal=\"true\"\n        v-bind=\"$attrs\"\n        class=\"scalar-app-layout scalar-client\"\n        role=\"dialog\"\n        tabindex=\"-1\">\n        <ScalarTeleportRoot>\n          <slot />\n        </ScalarTeleportRoot>\n      </div>\n\n      <!-- overlay / exit area -->\n      <div\n        class=\"scalar-app-exit\"\n        @click=\"modalState.hide()\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n  background: var(--scalar-background-1);\n  height: calc(100% - 120px);\n  max-width: 1390px;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n  .scalar .scalar-app-layout {\n    height: 100%;\n    max-height: 90svh;\n  }\n}\n\n.scalar .scalar-app-exit {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #00000038;\n  cursor: pointer;\n  z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n  font-family: sans-serif;\n  position: absolute;\n  top: 0;\n  right: 12px;\n  font-size: 30px;\n  font-weight: 100;\n  line-height: 50px;\n  text-align: center;\n  color: white;\n  opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n  opacity: 1;\n}\n\n/* container */\n.scalar-container {\n  overflow: hidden;\n  visibility: hidden;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  pointer-events: none;\n  will-change: opacity;\n  transition:\n    opacity 0.35s ease,\n    visibility 0s linear 0.35s;\n}\n\n.scalar-container.scalar-client--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity 0.35s ease;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n</style>\n"],"mappings":""}

package/dist/v2/components/modals/ModalClientContainer.vue.script.js

@@ -1,10 +1,8 @@
-import { Transition, createBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, useId, vShow, watch, withCtx, withDirectives } from "vue";
+import { createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeMount, onBeforeUnmount, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
 import { ScalarTeleportRoot, addScalarClassesToHeadless } from "@scalar/components";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 //#region src/v2/components/modals/ModalClientContainer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "scalar scalar-app z-overlay relative" };
-var _hoisted_2 = { class: "scalar-container" };
-var _hoisted_3 = ["id"];
 var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalClientContainer",
 	props: { modalState: {} },
@@ -13,10 +11,9 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 		const props = __props;
 		const emit = __emit;
 		const client = ref(null);
-		const id = useId();
 		const { activate: activateFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(client, {
 			allowOutsideClick: true,
-			fallbackFocus: `#${id}`
+			fallbackFocus: () => client.value
 		});
 		onBeforeMount(() => addScalarClassesToHeadless());
 		watch(() => props.modalState.open, async (open) => {
@@ -33,26 +30,22 @@ var ModalClientContainer_vue_vue_type_script_setup_true_lang_default = /* @__PUR
 			deactivateFocusTrap();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Transition, { name: "scalar-client-fade" }, {
-				default: withCtx(() => [withDirectives(createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createElementVNode("div", mergeProps({
-					id: unref(id),
-					ref_key: "client",
-					ref: client,
-					"aria-label": "API Client",
-					"aria-modal": "true"
-				}, _ctx.$attrs, {
-					class: "scalar-app-layout scalar-client",
-					role: "dialog",
-					tabindex: "-1"
-				}), [createVNode(unref(ScalarTeleportRoot), null, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-					_: 3
-				})], 16, _hoisted_3), createElementVNode("div", {
-					class: "scalar-app-exit",
-					onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
-				})])], 512), [[vShow, __props.modalState.open]])]),
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["scalar-container", { "scalar-client--open": __props.modalState.open }]) }, [createElementVNode("div", mergeProps({
+				ref_key: "client",
+				ref: client,
+				"aria-label": "API Client",
+				"aria-modal": "true"
+			}, _ctx.$attrs, {
+				class: "scalar-app-layout scalar-client",
+				role: "dialog",
+				tabindex: "-1"
+			}), [createVNode(unref(ScalarTeleportRoot), null, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_: 3
-			});
+			})], 16), createElementVNode("div", {
+				class: "scalar-app-exit",
+				onClick: _cache[0] || (_cache[0] = ($event) => __props.modalState.hide())
+			})], 2)]);
 		};
 	}
 });

package/dist/v2/components/modals/ModalClientContainer.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClientContainer.vue.script.js","names":["$attrs"],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n  type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport {\n  nextTick,\n  onBeforeMount,\n  onBeforeUnmount,\n  ref,\n  useId,\n  watch,\n} from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\nconst id = useId()\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: `#${id}`,\n  })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n  () => props.modalState.open,\n  async (open) => {\n    if (open) {\n      await nextTick()\n      activateFocusTrap()\n      emit('open')\n    } else {\n      deactivateFocusTrap()\n      emit('close')\n    }\n  },\n  { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n  deactivateFocusTrap()\n})\n</script>\n\n<template>\n  <Transition name=\"scalar-client-fade\">\n    <div\n      v-show=\"modalState.open\"\n      class=\"scalar scalar-app z-overlay relative\">\n      <div class=\"scalar-container\">\n        <div\n          :id=\"id\"\n          ref=\"client\"\n          aria-label=\"API Client\"\n          aria-modal=\"true\"\n          v-bind=\"$attrs\"\n          class=\"scalar-app-layout scalar-client\"\n          role=\"dialog\"\n          tabindex=\"-1\">\n          <ScalarTeleportRoot>\n            <slot />\n          </ScalarTeleportRoot>\n        </div>\n\n        <!-- overlay / exit area -->\n        <div\n          class=\"scalar-app-exit\"\n          @click=\"modalState.hide()\" />\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n  background: var(--scalar-background-1);\n  height: calc(100% - 120px);\n  max-width: 1390px;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n  .scalar .scalar-app-layout {\n    height: 100%;\n    max-height: 90svh;\n  }\n}\n\n.scalar .scalar-app-exit {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #00000038;\n  cursor: pointer;\n  z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n  font-family: sans-serif;\n  position: absolute;\n  top: 0;\n  right: 12px;\n  font-size: 30px;\n  font-weight: 100;\n  line-height: 50px;\n  text-align: center;\n  color: white;\n  opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n  opacity: 1;\n}\n\n/* container */\n.scalar-container {\n  overflow: hidden;\n  visibility: visible;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n\n.scalar-client-fade-enter-active,\n.scalar-client-fade-leave-active {\n  transition: opacity 0.35s ease;\n}\n\n.scalar-client-fade-enter-from,\n.scalar-client-fade-leave-to {\n  opacity: 0;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAgBA,MAAM,QAAQ;EACd,MAAM,OAAO;EAKb,MAAM,SAAS,IAAwB,KAAI;EAC3C,MAAM,KAAK,OAAM;EAEjB,MAAM,EAAE,UAAU,mBAAmB,YAAY,wBAC/C,aAAa,QAAQ;GACnB,mBAAmB;GACnB,eAAe,IAAI;GACpB,CAAA;AAGH,sBAAoB,4BAA4B,CAAA;AAGhD,cACQ,MAAM,WAAW,MACvB,OAAO,SAAS;AACd,OAAI,MAAM;AACR,UAAM,UAAS;AACf,uBAAkB;AAClB,SAAK,OAAM;UACN;AACL,yBAAoB;AACpB,SAAK,QAAO;;KAGhB,EAAE,WAAW,OAAO,CACtB;AAGA,wBAAsB;AACpB,wBAAoB;IACrB;;uBAIC,YAyBa,YAAA,EAzBD,MAAK,sBAAoB,EAAA;2BAwB7B,CAAA,eAvBN,mBAuBM,OAvBN,YAuBM,CApBJ,mBAmBM,OAnBN,YAmBM,CAlBJ,mBAYM,OAZN,WAYM;KAXH,IAAI,MAAA,GAAE;cACH;KAAJ,KAAI;KACJ,cAAW;KACX,cAAW;OACHA,KAAAA,QAAM;KACd,OAAM;KACN,MAAK;KACL,UAAS;SACT,YAEqB,MAAA,mBAAA,EAAA,MAAA;4BADX,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA;;0BAKZ,mBAE+B,OAAA;KAD7B,OAAM;KACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,MAAI;0BApBnB,QAAA,WAAW,KAAI,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalClientContainer.vue.script.js","names":["$attrs"],"sources":["../../../../src/v2/components/modals/ModalClientContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  addScalarClassesToHeadless,\n  ScalarTeleportRoot,\n  type ModalState,\n} from '@scalar/components'\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap'\nimport { nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'\n\nconst props = defineProps<{ modalState: ModalState }>()\nconst emit = defineEmits<{\n  (e: 'open'): void\n  (e: 'close'): void\n}>()\n\nconst client = ref<HTMLElement | null>(null)\n\nconst { activate: activateFocusTrap, deactivate: deactivateFocusTrap } =\n  useFocusTrap(client, {\n    allowOutsideClick: true,\n    fallbackFocus: () => client.value as HTMLElement,\n  })\n\n// ensure scalar classes exist on headless-ui root\nonBeforeMount(() => addScalarClassesToHeadless())\n\n// manage the focus trap and emit lifecycle events\nwatch(\n  () => props.modalState.open,\n  async (open) => {\n    if (open) {\n      await nextTick()\n      activateFocusTrap()\n      emit('open')\n    } else {\n      deactivateFocusTrap()\n      emit('close')\n    }\n  },\n  { immediate: false },\n)\n\n// best-effort cleanup on unmount\nonBeforeUnmount(() => {\n  deactivateFocusTrap()\n})\n</script>\n\n<template>\n  <div class=\"scalar scalar-app z-overlay relative\">\n    <div\n      class=\"scalar-container\"\n      :class=\"{ 'scalar-client--open': modalState.open }\">\n      <div\n        ref=\"client\"\n        aria-label=\"API Client\"\n        aria-modal=\"true\"\n        v-bind=\"$attrs\"\n        class=\"scalar-app-layout scalar-client\"\n        role=\"dialog\"\n        tabindex=\"-1\">\n        <ScalarTeleportRoot>\n          <slot />\n        </ScalarTeleportRoot>\n      </div>\n\n      <!-- overlay / exit area -->\n      <div\n        class=\"scalar-app-exit\"\n        @click=\"modalState.hide()\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@reference \"@/style.css\";\n\n.scalar .scalar-app-layout {\n  background: var(--scalar-background-1);\n  height: calc(100% - 120px);\n  max-width: 1390px;\n  width: 100%;\n  margin: auto;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  border: var(--scalar-border-width) solid var(--scalar-border-color);\n}\n/**\n * Allow the modal to fill more space on\n * very short (or very zoomed in) screens\n */\n@variant zoomed {\n  .scalar .scalar-app-layout {\n    height: 100%;\n    max-height: 90svh;\n  }\n}\n\n.scalar .scalar-app-exit {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: #00000038;\n  cursor: pointer;\n  z-index: -1;\n}\n\n.dark-mode .scalar .scalar-app-exit {\n  background: rgba(0, 0, 0, 0.45);\n}\n\n.scalar .scalar-app-exit:before {\n  font-family: sans-serif;\n  position: absolute;\n  top: 0;\n  right: 12px;\n  font-size: 30px;\n  font-weight: 100;\n  line-height: 50px;\n  text-align: center;\n  color: white;\n  opacity: 0.6;\n}\n\n.scalar .scalar-app-exit:hover:before {\n  opacity: 1;\n}\n\n/* container */\n.scalar-container {\n  overflow: hidden;\n  visibility: hidden;\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  pointer-events: none;\n  will-change: opacity;\n  transition:\n    opacity 0.35s ease,\n    visibility 0s linear 0.35s;\n}\n\n.scalar-container.scalar-client--open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity 0.35s ease;\n}\n\n.scalar .url-form-input {\n  min-height: auto !important;\n}\n\n.scalar .scalar-container {\n  line-height: normal;\n}\n</style>\n"],"mappings":";;;;;;;;;;EASA,MAAM,QAAQ;EACd,MAAM,OAAO;EAKb,MAAM,SAAS,IAAwB,KAAI;EAE3C,MAAM,EAAE,UAAU,mBAAmB,YAAY,wBAC/C,aAAa,QAAQ;GACnB,mBAAmB;GACnB,qBAAqB,OAAO;GAC7B,CAAA;AAGH,sBAAoB,4BAA4B,CAAA;AAGhD,cACQ,MAAM,WAAW,MACvB,OAAO,SAAS;AACd,OAAI,MAAM;AACR,UAAM,UAAS;AACf,uBAAkB;AAClB,SAAK,OAAM;UACN;AACL,yBAAoB;AACpB,SAAK,QAAO;;KAGhB,EAAE,WAAW,OAAO,CACtB;AAGA,wBAAsB;AACpB,wBAAoB;IACrB;;uBAIC,mBAsBM,OAtBN,YAsBM,CArBJ,mBAoBM,OAAA,EAnBJ,OAAK,eAAA,CAAC,oBAAkB,EAAA,uBACS,QAAA,WAAW,MAAI,CAAA,CAAA,EAAA,EAAA,CAChD,mBAWM,OAXN,WAWM;aAVA;IAAJ,KAAI;IACJ,cAAW;IACX,cAAW;MACHA,KAAAA,QAAM;IACd,OAAM;IACN,MAAK;IACL,UAAS;QACT,YAEqB,MAAA,mBAAA,EAAA,MAAA;2BADX,CAAR,WAAQ,KAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,KAAA,CAAA,CAAA;;aAKZ,mBAE+B,OAAA;IAD7B,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,MAAI"}

package/dist/v2/constants.js

@@ -1,6 +1,6 @@
 //#region src/v2/constants.ts
 /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
-var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.3.0";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.4.0";
 //#endregion
 export { APP_VERSION };