@scalar/api-client 2.38.0 → 2.38.2

package/dist/CodeInput-C-igR77V.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput-C-igR77V.js","names":["$attrs","$slots"],"sources":["../src/views/Environment/EnvironmentVariableDropdown.vue","../src/views/Environment/EnvironmentVariableDropdown.vue","../src/components/DataTable/DataTableInputSelect.vue","../src/components/DataTable/DataTableInputSelect.vue","../src/components/CodeInput/codeVariableWidget.ts","../src/components/CodeInput/CodeInput.vue","../src/components/CodeInput/CodeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { limit: 10 })\n  if (result.length > 0) {\n    return result\n      .map((res) => res.item)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  return []\n})\n\nconst selectVariable = (variableKey: string) => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"item.key\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\n              {{ item.key }}\n            </div>\n            <span\n              class=\"w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.value }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else-if=\"router\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarButton, ScalarTeleport } from '@scalar/components'\nimport { ScalarIconGlobe, ScalarIconPlus } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { onClickOutside } from '@vueuse/core'\nimport Fuse from 'fuse.js'\nimport { computed, onMounted, ref, type CSSProperties } from 'vue'\nimport { useRouter } from 'vue-router'\n\nimport { parseEnvVariables } from '@/libs'\nimport { getEnvColor, type EnvVariables } from '@/libs/env-helpers'\nimport { PathId } from '@/routes'\nimport { useActiveEntities } from '@/store'\n\nconst props = defineProps<{\n  query: string\n  environment: Environment\n  envVariables: EnvVariables\n  // withServers?: boolean\n  dropdownPosition?: { left: number; top: number }\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select', variable: string): void\n}>()\n\nconst isOpen = ref(true)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst selectedVariableIndex = ref(0)\nconst router = useRouter()\nconst { activeCollection } = useActiveEntities()\n\nconst redirectToEnvironment = () => {\n  if (!router) {\n    return\n  }\n  const { currentRoute, push } = router\n  const workspaceId = currentRoute.value.params.workspace\n\n  // Global environment page for draft collection\n  if (\n    !activeCollection.value ||\n    activeCollection.value.info?.title === 'Drafts'\n  ) {\n    push({\n      name: 'environment.default',\n      params: {\n        [PathId.Workspace]: workspaceId,\n      },\n    })\n  } else {\n    // Collection environment page for collections\n    push({\n      name: 'collection.environment',\n      params: {\n        [PathId.Collection]: activeCollection.value.uid,\n      },\n    })\n  }\n  isOpen.value = false\n}\n\nconst fuse = new Fuse(parseEnvVariables(props.envVariables), {\n  keys: ['key', 'value'],\n})\n\nconst filteredVariables = computed(() => {\n  const searchQuery = props.query\n\n  if (!searchQuery) {\n    /** return the last 4 environment variables on first display */\n    return parseEnvVariables(props.envVariables)\n      .slice(-4)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  /** filter environment variables by name */\n  const result = fuse.search(searchQuery, { limit: 10 })\n  if (result.length > 0) {\n    return result\n      .map((res) => res.item)\n      .filter(({ key, value }) => key !== '' || value !== '')\n  }\n\n  return []\n})\n\nconst selectVariable = (variableKey: string) => {\n  emit('select', variableKey)\n}\n\nconst handleArrowKey = (direction: 'up' | 'down') => {\n  const offset = direction === 'up' ? -1 : 1\n  const length = filteredVariables.value.length\n\n  if (length === 0) {\n    return\n  }\n\n  selectedVariableIndex.value =\n    (selectedVariableIndex.value + offset + length) % length\n}\n\nconst handleSelect = () => {\n  if (selectedVariableIndex.value >= 0) {\n    const selectedVariable =\n      filteredVariables.value[selectedVariableIndex.value]\n    if (selectedVariable) {\n      selectVariable(selectedVariable.key)\n    }\n  }\n}\n\ndefineExpose({\n  handleArrowKey,\n  handleSelect,\n})\n\nonMounted(() => {\n  // Reset selected index to the first item when dropdown opens\n  selectedVariableIndex.value = 0\n})\n\nconst dropdownStyle = computed<CSSProperties>(() => {\n  return {\n    left: (props.dropdownPosition?.left ?? 0) + 'px',\n    // Add a 5px offset from the editor\n    top: (props.dropdownPosition?.top ?? 0) + 5 + 'px',\n  }\n})\n\nonClickOutside(\n  dropdownRef,\n  () => {\n    isOpen.value = false\n  },\n  { ignore: [dropdownRef] },\n)\n</script>\n<template>\n  <ScalarTeleport\n    v-if=\"isOpen\"\n    class=\"scalar-client\">\n    <div\n      ref=\"dropdownRef\"\n      class=\"custom-scroll fixed top-0 left-0 flex max-h-[60svh] w-56 flex-col rounded border p-0.75\"\n      :style=\"dropdownStyle\">\n      <ul\n        v-if=\"filteredVariables.length\"\n        class=\"gap-1/2 flex flex-col\">\n        <template\n          v-for=\"(item, index) in filteredVariables\"\n          :key=\"item.key\">\n          <li\n            class=\"font-code text-xxs hover:bg-b-2 flex h-8 cursor-pointer items-center justify-between gap-1.5 rounded p-1.5 transition-colors duration-150\"\n            :class=\"{ 'bg-b-2': index === selectedVariableIndex }\"\n            @click=\"selectVariable(item.key)\">\n            <div class=\"flex items-center gap-2 whitespace-nowrap\">\n              <span\n                v-if=\"\n                  item.source === 'collection' &&\n                  environment.name !== 'No Environment'\n                \"\n                class=\"h-2.25 w-2.25 min-w-2.25 rounded-full\"\n                :style=\"{\n                  backgroundColor: getEnvColor(environment),\n                }\"></span>\n              <ScalarIconGlobe\n                v-else\n                class=\"-ml-0.25 size-2.5\"\n                icon=\"Globe\" />\n              {{ item.key }}\n            </div>\n            <span\n              class=\"w-20 overflow-hidden text-right text-ellipsis whitespace-nowrap\">\n              {{ item.value }}\n            </span>\n          </li>\n        </template>\n      </ul>\n      <ScalarButton\n        v-else-if=\"router\"\n        class=\"font-code text-xxs bg-b-inherit hover:bg-b-2 flex h-8 w-full justify-start gap-2 px-1.5 transition-colors duration-150\"\n        variant=\"outlined\"\n        @click=\"redirectToEnvironment\">\n        <ScalarIconPlus class=\"size-3\" />\n        Add Variable\n      </ScalarButton>\n      <!-- Backdrop for the dropdown -->\n      <div\n        class=\"bg-b-1 brightness-lifted absolute inset-0 -z-1 rounded shadow-lg\" />\n    </div>\n  </ScalarTeleport>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number\n    value?: string[]\n    default?: string | number | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Currently selected array example values */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(', '))\n  return options.value\n    .filter((option) => selectedValues.has(option))\n    .map((option) => ({ id: option, label: option, value: option }))\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => ({ id: option, label: option, value: option })),\n)\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(', '))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\"\n            class=\"min-w-4\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue || 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number\n    value?: string[]\n    default?: string | number | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Currently selected array example values */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(', '))\n  return options.value\n    .filter((option) => selectedValues.has(option))\n    .map((option) => ({ id: option, label: option, value: option }))\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => ({ id: option, label: option, value: option })),\n)\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(', '))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\"\n            class=\"min-w-4\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue || 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n","import { ScalarTooltip } from '@scalar/components'\nimport { ScalarIconGlobe } from '@scalar/icons'\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { createApp, defineComponent, h } from 'vue'\n\nimport { parseEnvVariables } from '@/libs'\nimport { type EnvVariables, getEnvColor } from '@/libs/env-helpers'\n\n/**\n * Displays the value of a variable of the active environment in a pill\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private uid: string\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean\n\n  constructor(\n    private variableName: string,\n    environment: Environment | undefined,\n    envVariables: EnvVariables | undefined,\n    isReadOnly: boolean | undefined,\n  ) {\n    super()\n    this.variableName = variableName\n    this.environment = environment\n    this.envVariables = envVariables\n    this.isReadOnly = isReadOnly ?? false\n    this.uid = nanoid()\n  }\n\n  toDOM() {\n    const span = document.createElement('span')\n    span.className = 'cm-pill'\n    span.textContent = `${this.variableName}`\n\n    const tooltipComponent = defineComponent({\n      props: { variableName: { type: String, default: null } },\n      render: () => {\n        const val = this.envVariables\n          ? parseEnvVariables(this.envVariables).find((thing) => thing.key === this.variableName)\n          : undefined\n\n        // Set the pill color based on the environment source or fallback to default color\n        const isGlobal = val?.source === 'global'\n        const pillColor = isGlobal\n          ? 'var(--scalar-color-1)'\n          : val && this.environment && this.environment.name !== 'No Environment'\n            ? getEnvColor(this.environment)\n            : 'var(--scalar-color-1)'\n\n        span.style.setProperty('--tw-bg-base', pillColor)\n\n        // Set opacity based on the existence of a value\n        span.style.opacity = val?.value ? '1' : '0.5'\n\n        // Tooltip content as string\n        const tooltipContent = val?.value || 'No value'\n\n        // Tooltip trigger element\n        const tooltipTrigger = h('div', { class: 'flex items-center gap-1 whitespace-nowrap' }, [\n          (isGlobal || (this.environment?.name === 'No Environment' && val?.value)) &&\n            h(ScalarIconGlobe, { class: 'size-3 -ml-1', icon: 'Globe' }),\n          h('span', this.variableName),\n        ])\n\n        return h(\n          ScalarTooltip,\n          {\n            content: tooltipContent,\n            delay: 0,\n            placement: 'bottom',\n            offset: 6,\n          },\n          {\n            default: () => tooltipTrigger,\n          },\n        )\n      },\n    })\n\n    this.app = createApp(tooltipComponent, { variableName: this.variableName })\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy() {\n    if (this.app) {\n      this.app.unmount()\n    }\n  }\n\n  override eq(other: WidgetType) {\n    return other instanceof PillWidget && other.variableName === this.variableName && other.uid === this.uid\n  }\n\n  override ignoreEvent() {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill\n */\nexport const pillPlugin = (props: {\n  environment: Environment | undefined\n  envVariables: EnvVariables | undefined\n  isReadOnly: boolean | undefined\n}) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n\n      constructor(view: EditorView) {\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate) {\n        if (update.docChanged || update.viewportChanged) {\n          requestAnimationFrame(() => {\n            this.decorations = this.buildDecorations(update.view)\n            update.view.update([])\n          })\n        }\n      }\n\n      buildDecorations(view: EditorView) {\n        const builder = new RangeSetBuilder<Decoration>()\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n          let match\n\n          while ((match = REGEX.VARIABLES.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment, props.envVariables, props.isReadOnly),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view) {\n    if (event.key === 'Backspace') {\n      const { state } = view\n      const { from, to } = state.selection.main\n\n      // Prevent breaking line content addition on pill removal\n      if (from === 0 && to === state.doc.length) {\n        view.dispatch({\n          changes: { from: 0, to: state.doc.length },\n          selection: { anchor: 0 },\n        })\n        event.preventDefault()\n        return true\n      }\n\n      if (from === to && from > 0) {\n        const before = state.doc.sliceString(from - 2, from)\n        if (before === '}}') {\n          view.dispatch({\n            changes: { from: from - 2, to },\n            selection: { anchor: from - 2 },\n          })\n          event.preventDefault()\n          return true\n        }\n      }\n    }\n    return false\n  },\n})\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Environment } from '@scalar/oas-utils/entities/environment'\nimport {\n  colorPicker as colorPickerExtension,\n  useCodeMirror,\n  useDropdown,\n  type CodeMirrorLanguage,\n  type Extension,\n} from '@scalar/use-codemirror'\nimport { nanoid } from 'nanoid'\nimport { computed, ref, toRef, useAttrs, watch, type Ref } from 'vue'\n\nimport { useLayout } from '@/hooks'\nimport type { EnvVariable } from '@/store/active-entities'\nimport EnvironmentVariableDropdown from '@/views/Environment/EnvironmentVariableDropdown.vue'\n\nimport DataTableInputSelect from '../DataTable/DataTableInputSelect.vue'\nimport { backspaceCommand, pillPlugin } from './codeVariableWidget'\n\nconst props = withDefaults(\n  defineProps<{\n    colorPicker?: boolean\n    disabled?: boolean\n    modelValue: string | number\n    error?: boolean\n    emitOnBlur?: boolean\n    extensions?: Extension[]\n    lineNumbers?: boolean\n    lint?: boolean\n    disableTabIndent?: boolean\n    language?: CodeMirrorLanguage\n    handleFieldSubmit?: (e: string) => void\n    handleFieldChange?: (e: string) => void\n    placeholder?: string\n    required?: boolean\n    disableEnter?: boolean\n    disableCloseBrackets?: boolean\n    enum?: string[]\n    examples?: string[]\n    type?: string | string[] | undefined\n    nullable?: boolean\n    withVariables?: boolean\n    importCurl?: boolean\n    default?: string | number\n    environment: Environment\n    envVariables: EnvVariable[]\n    lineWrapping?: boolean\n  }>(),\n  {\n    disableCloseBrackets: false,\n    disableEnter: false,\n    extensions: () => [],\n    disableTabIndent: false,\n    emitOnBlur: true,\n    colorPicker: false,\n    nullable: false,\n    withVariables: true,\n    disabled: false,\n    lineWrapping: false,\n  },\n)\nconst emit = defineEmits<{\n  (e: 'submit', v: string): void\n  (e: 'update:modelValue', v: string): void\n  (e: 'curl', v: string): void\n  (e: 'blur', v: string): void\n}>()\n\nconst attrs = useAttrs() as { id?: string }\nconst uid = (attrs.id as string) || `id-${nanoid()}`\n\nconst isFocused = ref(false)\n\n// Environment variable dropdown init\nconst showDropdown = ref(false)\nconst dropdownQuery = ref('')\nconst dropdownPosition = ref({ left: 0, top: 0 })\nconst dropdownRef = ref<InstanceType<\n  typeof EnvironmentVariableDropdown\n> | null>(null)\n\nconst { layout } = useLayout()\n\n// ---------------------------------------------------------------------------\n// Event mapping from codemirror to standard input interfaces\n\n/** Change is emitted during typing. This does not trigger validation */\nfunction handleChange(value: string) {\n  // We need to be careful, only if the value is different we trigger an update\n  // on initial load of the component, this gets triggered cause we set the content\n  if (value === props.modelValue) {\n    return null\n  }\n  if (props.importCurl && value.trim().toLowerCase().startsWith('curl')) {\n    emit('curl', value)\n    // Maintain previous input value\n    codeMirror.value?.dispatch({\n      changes: {\n        from: 0,\n        to: codeMirror.value.state.doc.length,\n        insert: String(props.modelValue),\n      },\n    })\n    // Prevent table value population on current request\n    return null\n  }\n\n  return props.handleFieldChange\n    ? props.handleFieldChange(value)\n    : emit('update:modelValue', value)\n}\n\n/** Submit is emitted on blur and enter. This will trigger validation */\nfunction handleSubmit(value: string) {\n  return props.handleFieldSubmit\n    ? props.handleFieldSubmit(value)\n    : emit('submit', value)\n}\n\n/** Optional submit on blur.  */\nfunction handleBlur(value: string) {\n  isFocused.value = false\n  if (props.emitOnBlur && props.modelValue) {\n    handleSubmit(value)\n  }\n  emit('blur', value)\n}\n\n// ---------------------------------------------------------------------------\n// Codemirror instance handling\n\n// WARNING: Extensions are non-reactive! If props change nothing will happen\n\nconst extensions: Extension[] = [...props.extensions]\nif (props.colorPicker) {\n  extensions.push(colorPickerExtension)\n}\n\n// Create a reactive pill plugin that updates when environment changes\nconst pillPluginExtension = computed(() =>\n  pillPlugin({\n    environment: props.environment,\n    envVariables: props.envVariables,\n    isReadOnly: layout === 'modal',\n  }),\n)\n\n// Base extensions that will be used for the editor\nconst baseExtensions = computed(() => [\n  ...extensions,\n  pillPluginExtension.value,\n  backspaceCommand,\n])\n\nconst codeMirrorRef: Ref<HTMLDivElement | null> = ref(null)\n\nconst { codeMirror } = useCodeMirror({\n  content: toRef(() =>\n    props.modelValue !== undefined ? String(props.modelValue) : '',\n  ),\n  onChange: (value) => {\n    handleChange(value)\n    updateDropdownVisibility()\n  },\n  onFocus: () => (isFocused.value = true),\n  onBlur: (val) => handleBlur(val),\n  codeMirrorRef,\n  disableTabIndent: toRef(() => props.disableTabIndent),\n  disableEnter: toRef(() => props.disableEnter),\n  disableCloseBrackets: toRef(() => props.disableCloseBrackets),\n  lineNumbers: toRef(() => props.lineNumbers),\n  language: toRef(() => props.language),\n  lint: toRef(() => props.lint),\n  extensions: baseExtensions,\n  placeholder: toRef(() => props.placeholder),\n})\n\ncodeMirror.value?.focus()\n\n// If we specify autofocus then focus codemirror on creation\nwatch(codeMirror, () => {\n  if (codeMirror.value && Object.hasOwn(attrs, 'autofocus')) {\n    codeMirror.value.focus()\n  }\n})\n\nconst { handleDropdownSelect, updateDropdownVisibility } = useDropdown({\n  codeMirror,\n  query: dropdownQuery,\n  showDropdown,\n  dropdownPosition,\n})\n\n// Computed property to check if type is boolean and nullable\nconst booleanOptions = computed(() =>\n  props.nullable ? ['true', 'false', 'null'] : ['true', 'false'],\n)\n\nconst handleKeyDown = (key: string, event: KeyboardEvent) => {\n  if (showDropdown.value) {\n    if (key === 'down') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('down')\n    } else if (key === 'up') {\n      event.preventDefault()\n      dropdownRef.value?.handleArrowKey('up')\n    } else if (key === 'enter') {\n      event.preventDefault()\n      dropdownRef.value?.handleSelect()\n    }\n  } else if (key === 'escape') {\n    if (!props.disableTabIndent) {\n      event.stopPropagation()\n    }\n  } else if (key === 'enter' && event.target instanceof HTMLDivElement) {\n    handleSubmit(event.target.textContent ?? '')\n  }\n}\n\nconst defaultType = computed(() => {\n  return Array.isArray(props.type)\n    ? // Find the first type, that's not 'null'\n      (props.type.find((type) => type !== 'null') ?? 'string')\n    : // If it's not an array, just return the type\n      props.type\n})\n\nconst displayVariablesDropdown = computed(\n  () =>\n    showDropdown.value &&\n    props.withVariables &&\n    layout !== 'modal' &&\n    props.environment,\n)\n\ndefineExpose({\n  /** Expose focus method */\n  focus: () => {\n    codeMirror.value?.focus()\n  },\n  // Expose these methods for testing\n  handleChange,\n  handleSubmit,\n  handleBlur,\n  booleanOptions,\n  codeMirror,\n  modelValue: props.modelValue,\n})\n</script>\n<script lang=\"ts\">\n// use normal <script> to declare options\nexport default {\n  inheritAttrs: false,\n}\n</script>\n<template>\n  <template v-if=\"disabled\">\n    <div\n      class=\"text-c-2 flex cursor-default items-center justify-center\"\n      :class=\"layout === 'modal' ? 'font-code pr-2 pl-1 text-base' : 'px-2'\"\n      data-testid=\"code-input-disabled\">\n      <span class=\"whitespace-nowrap\">{{ modelValue }}</span>\n    </div>\n  </template>\n  <template v-else-if=\"props.enum && props.enum.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :type=\"defaultType\"\n      :value=\"props.enum\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"type === 'boolean' || type?.includes('boolean')\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"modelValue\"\n      :value=\"booleanOptions\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else-if=\"props.examples && props.examples.length\">\n    <DataTableInputSelect\n      :default=\"props.default\"\n      :modelValue=\"props.modelValue\"\n      :value=\"props.examples\"\n      @update:modelValue=\"emit('update:modelValue', $event)\" />\n  </template>\n  <template v-else>\n    <div\n      :id=\"uid\"\n      v-bind=\"$attrs\"\n      ref=\"codeMirrorRef\"\n      class=\"group/input group-[.alert]:outline-orange group-[.error]:outline-red font-code peer relative w-full overflow-hidden text-xs leading-[1.44] whitespace-nowrap -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\"\n      :class=\"{\n        'line-wrapping has-[:focus-visible]:bg-b-1 has-[:focus-visible]:absolute has-[:focus-visible]:z-1':\n          lineWrapping,\n        'flow-code-input--error': error,\n      }\"\n      @keydown.down.stop=\"handleKeyDown('down', $event)\"\n      @keydown.enter=\"handleKeyDown('enter', $event)\"\n      @keydown.escape=\"handleKeyDown('escape', $event)\"\n      @keydown.up.stop=\"handleKeyDown('up', $event)\">\n      <div\n        v-if=\"!disableTabIndent\"\n        class=\"z-context text-c-2 absolute right-1.5 bottom-1 hidden font-sans group-has-[:focus-visible]/input:block\"\n        role=\"alert\">\n        Press\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Esc</kbd> then\n        <kbd class=\"-mx-0.25 rounded border px-0.5 font-mono\">Tab</kbd> to exit\n      </div>\n    </div>\n  </template>\n  <div\n    v-if=\"$slots.warning\"\n    class=\"centered-y text-orange absolute right-7 text-xs\">\n    <slot name=\"warning\" />\n  </div>\n  <div\n    v-if=\"$slots.icon\"\n    class=\"centered-y absolute right-0 flex h-full items-center p-1.5 group-has-[.cm-focused]:z-1\">\n    <slot name=\"icon\" />\n  </div>\n  <div\n    v-if=\"required\"\n    class=\"required centered-y text-xxs text-c-3 group-[.error]:text-red bg-b-1 pointer-events-none absolute right-0 mr-0.5 pt-px pr-2 opacity-100 shadow-[-8px_0_4px_var(--scalar-background-1)] transition-opacity duration-150 group-[.alert]:bg-transparent group-[.alert]:shadow-none group-[.error]:bg-transparent group-[.error]:shadow-none peer-has-[.cm-focused]:opacity-0\">\n    Required\n  </div>\n  <EnvironmentVariableDropdown\n    v-if=\"displayVariablesDropdown\"\n    ref=\"dropdownRef\"\n    :dropdownPosition=\"dropdownPosition\"\n    :envVariables=\"envVariables\"\n    :environment=\"environment\"\n    :query=\"dropdownQuery\"\n    @select=\"handleDropdownSelect\" />\n</template>\n<style scoped>\n/*\n Deep styling for customizing Codemirror\n*/\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  padding: 0;\n  background: transparent;\n}\n:deep(.cm-placeholder) {\n  color: var(--scalar-color-3);\n}\n:deep(.cm-content) {\n  font-family: var(--scalar-font-code);\n  font-size: var(--scalar-small);\n  max-height: 20px;\n  padding: 8px 0;\n}\n/* Tooltip helper */\n:deep(.cm-tooltip) {\n  background: transparent !important;\n  filter: brightness(var(--scalar-lifted-brightness));\n  border-radius: var(--scalar-radius);\n  box-shadow: var(--scalar-shadow-2);\n  border: none !important;\n  outline: none !important;\n  overflow: hidden !important;\n}\n:deep(.cm-tooltip-autocomplete ul li) {\n  padding: 3px 6px !important;\n}\n:deep(.cm-completionIcon-type:after) {\n  color: var(--scalar-color-3) !important;\n}\n:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {\n  background: var(--scalar-background-2) !important;\n  color: var(--scalar-color-1) !important;\n}\n:deep(.cm-tooltip-autocomplete ul) {\n  padding: 6px !important;\n  position: relative;\n}\n:deep(.cm-tooltip-autocomplete ul li:hover) {\n  border-radius: 3px;\n  color: var(--scalar-color-1) !important;\n  background: var(--scalar-background-3) !important;\n}\n/* Disable active line highlighting */\n:deep(.cm-activeLine),\n:deep(.cm-activeLineGutter) {\n  background-color: transparent;\n}\n/* Color selection matching */\n:deep(.cm-selectionMatch),\n:deep(.cm-matchingBracket) {\n  border-radius: var(--scalar-radius);\n  background: var(--scalar-background-4) !important;\n}\n/* Color Picker Swatches */\n:deep(.cm-css-color-picker-wrapper) {\n  display: inline-flex;\n  outline: 1px solid var(--scalar-background-3);\n  border-radius: 3px;\n  overflow: hidden;\n}\n/* Number gutter */\n:deep(.cm-gutters) {\n  background-color: transparent;\n  border-right: none;\n  color: var(--scalar-color-3);\n  font-size: var(--scalar-small);\n  line-height: 22px;\n  border-radius: 0 0 0 3px;\n}\n:deep(.cm-gutters:before) {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(100% - 2px);\n  height: calc(100% - 4px);\n  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);\n  background-color: var(--scalar-background-1);\n}\n:deep(.cm-gutterElement) {\n  font-family: var(--scalar-font-code) !important;\n  padding-left: 0px !important;\n  padding-right: 6px !important;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative;\n}\n:deep(.cm-lineNumbers .cm-gutterElement) {\n  min-width: fit-content;\n}\n:deep(.cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement) {\n  padding-left: 0 !important;\n}\n:deep(.cm-scroller) {\n  overflow: auto;\n}\n.line-wrapping:focus-within :deep(.cm-content) {\n  display: inline-table;\n  min-height: fit-content;\n  padding: 3px 6px;\n  white-space: break-spaces;\n  word-break: break-all;\n}\n</style>\n<style>\n.cm-pill {\n  --tw-bg-base: var(--scalar-color-1);\n  color: var(--tw-bg-base);\n  padding: 0px 9px;\n  border-radius: 3px;\n  display: inline-block;\n  border-radius: 30px;\n  font-size: var(--scalar-small);\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 94%) !important;\n}\n.cm-pill.bg-grey {\n  background: var(--scalar-background-3) !important;\n}\n.dark-mode .cm-pill {\n  background: color-mix(in srgb, var(--tw-bg-base), transparent 90%) !important;\n}\n.cm-pill:first-of-type {\n  margin-left: 0;\n}\n.cm-editor .cm-widgetBuffer {\n  display: none;\n}\n.cm-foldPlaceholder:hover {\n  color: var(--scalar-color-1);\n}\n.cm-foldGutter .cm-gutterElement {\n  font-size: var(--scalar-heading-4);\n  padding: 2px !important;\n}\n.cm-foldGutter .cm-gutterElement:first-of-type {\n  display: none;\n}\n.cm-foldGutter .cm-gutterElement .cm-foldMarker {\n  padding: 2px;\n  padding-top: 2px;\n}\n.cm-foldGutter .cm-gutterElement:hover .cm-foldMarker {\n  background: var(--scalar-background-2);\n  border-radius: var(--scalar-radius);\n  color: var(--scalar-color-1);\n}\n</style>\n"],"mappings":"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"}

package/dist/CodeSnippet-D7Heh1nd.js

@@ -0,0 +1,218 @@
+import { n as replaceTemplateVariables } from "./string-template-sS5PtY6T.js";
+import { t as buildRequestSecurity } from "./build-request-security-BQjNr2MD.js";
+import { t as getSnippet } from "./get-snippet-DBRUSfZ2.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, openBlock, toDisplayString, unref } from "vue";
+import { ScalarCodeBlock } from "@scalar/components";
+import { REGEX, isDefined, mergeUrls } from "@scalar/oas-utils/helpers";
+import { encode } from "js-base64";
+//#region src/views/Components/CodeSnippet/CodeSnippet.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-c-3 flex min-h-16 items-center justify-center px-4 text-sm"
+};
+//#endregion
+//#region src/views/Components/CodeSnippet/CodeSnippet.vue
+var CodeSnippet_default = /* @__PURE__ */ defineComponent({
+	__name: "CodeSnippet",
+	props: {
+		target: {},
+		client: {},
+		operation: {},
+		server: {},
+		example: {},
+		securitySchemes: { default: () => [] },
+		environment: {}
+	},
+	setup(__props) {
+		/**  Block secrets from being shown in the code block */
+		const secretCredentials = computed(() => __props.securitySchemes.flatMap((scheme) => {
+			if (scheme.type === "apiKey") return scheme.value;
+			if (scheme?.type === "http") return [
+				scheme.token,
+				scheme.password,
+				encode(`${scheme.username}:${scheme.password}`)
+			];
+			if (scheme.type === "oauth2") return Object.values(scheme.flows).map((flow) => flow?.token).filter(isDefined);
+			return [];
+		}));
+		/** Generated code example */
+		const content = computed(() => {
+			const harRequest = getHarRequest({
+				operation: __props.operation,
+				example: __props.example,
+				server: __props.server,
+				securitySchemes: __props.securitySchemes,
+				environment: __props.environment
+			});
+			const [error, payload] = getSnippet(__props.target, __props.client, harRequest);
+			return {
+				error,
+				payload
+			};
+		});
+		/** CodeMirror syntax highlighting language */
+		const language = computed(() => {
+			if (__props.target === "shell" && __props.client === "curl") return "curl";
+			return __props.target ?? "plaintext";
+		});
+		return (_ctx, _cache) => {
+			return content.value.error ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(content.value.error.message), 1)) : content.value.payload ? (openBlock(), createBlock(unref(ScalarCodeBlock), {
+				key: 1,
+				class: "w-full",
+				content: content.value.payload,
+				hideCredentials: secretCredentials.value,
+				lang: language.value,
+				lineNumbers: ""
+			}, null, 8, [
+				"content",
+				"hideCredentials",
+				"lang"
+			])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+//#region src/views/Components/CodeSnippet/helpers/convert-to-har-request.ts
+/**
+* Takes in a regular request object and returns a HAR request
+* We also Titlecase the headers and remove accept header if it's *
+*/
+var convertToHarRequest = ({ baseUrl = "", method, body, path, cookies, headers, query }) => {
+	const url = mergeUrls(baseUrl, path, void 0, true);
+	const harRequest = {
+		method: method.toUpperCase(),
+		url: url.toString(),
+		httpVersion: "HTTP/1.1",
+		headers: [],
+		queryString: [],
+		cookies: [],
+		headersSize: -1,
+		bodySize: -1
+	};
+	if (cookies.length) harRequest.cookies = cookies.filter((c) => c.enabled).map(({ key, value }) => ({
+		name: key,
+		value
+	}));
+	if (headers.length) harRequest.headers = headers.filter((h) => h.enabled && !(h.key.toLowerCase() === "accept" && h.value === "*/*")).map(({ key, value }) => ({
+		name: key.replace(/\b\w/g, (letter) => letter.toUpperCase()),
+		value
+	}));
+	if (query.length) harRequest.queryString = query.filter((q) => q.enabled).map(({ key, value }) => ({
+		name: key,
+		value
+	}));
+	if (body) try {
+		const contentType = headers.find((h) => h.key.toLowerCase() === "content-type")?.value;
+		if (body.activeBody === "formData" && body.formData) {
+			const params = [];
+			body.formData.value.forEach(({ key, value, file, enabled }) => {
+				if (!enabled) return;
+				if (file) params.push({
+					name: key || "blob",
+					value: "BINARY",
+					fileName: file.name,
+					contentType: file.type || "application/octet-stream"
+				});
+				else params.push({
+					name: key,
+					value
+				});
+			});
+			if (body.formData?.encoding === "urlencoded") harRequest.postData = {
+				mimeType: contentType || "application/x-www-form-urlencoded",
+				params
+			};
+			else harRequest.postData = {
+				mimeType: contentType || "multipart/form-data",
+				params
+			};
+		} else if (body.activeBody === "raw" && body.raw) harRequest.postData = {
+			mimeType: contentType || "application/json",
+			text: body.raw?.value ?? ""
+		};
+	} catch (_e) {}
+	return harRequest;
+};
+//#endregion
+//#region src/views/Components/CodeSnippet/helpers/get-har-request.ts
+var EMPTY_TOKEN_PLACEHOLDER = "YOUR_SECRET_TOKEN";
+/**
+* Creates a snippetz-compatible HarRequest from OpenAPI-like store entities
+*
+* @deprecated, can be removed once we've migrated to the new code snippet component
+*/
+var getHarRequest = ({ operation, example, server, securitySchemes = [], environment }) => {
+	const env = environment && Array.isArray(environment) ? Object.fromEntries(environment.map((v) => [v.key, v.value])) : environment || {};
+	const encodedPathVars = (example?.parameters?.path ?? []).reduce((vars, param) => {
+		if (param.enabled) {
+			const substitutedValue = replaceTemplateVariables(param.value, env);
+			vars[param.key] = encodeURIComponent(substitutedValue);
+		}
+		return vars;
+	}, {});
+	const serverString = (() => {
+		if (server?.url && (REGEX.VARIABLES.test(server.url) || REGEX.PATH.test(server.url))) {
+			const serverParams = Object.entries(server?.variables || {}).reduce((acc, [key, variable]) => {
+				if (encodedPathVars[key]) acc[key] = encodedPathVars[key];
+				else if (variable.default) acc[key] = replaceTemplateVariables(variable.default, env);
+				return acc;
+			}, {});
+			return replaceTemplateVariables(replaceTemplateVariables(server.url, env), serverParams);
+		}
+		return server?.url;
+	})();
+	const pathString = (() => {
+		const path = operation?.path ?? "/";
+		if (path && (REGEX.VARIABLES.test(path) || REGEX.PATH.test(path))) return replaceTemplateVariables(replaceTemplateVariables(path, env), encodedPathVars);
+		return path;
+	})();
+	const security = buildRequestSecurity(securitySchemes, env, EMPTY_TOKEN_PLACEHOLDER);
+	const headers = [...(example?.parameters.headers ?? []).map((h) => ({
+		...h,
+		value: REGEX.VARIABLES.test(h.value) || REGEX.PATH.test(h.value) ? replaceTemplateVariables(h.value, env) : h.value
+	})) ?? [], ...Object.entries(security.headers).map(([key, value]) => ({
+		key,
+		value,
+		enabled: true
+	}))];
+	const cookies = [...(example?.parameters.cookies ?? []).map((c) => ({
+		...c,
+		value: REGEX.VARIABLES.test(c.value) || REGEX.PATH.test(c.value) ? replaceTemplateVariables(c.value, env) : c.value
+	})) ?? [], ...security.cookies.map((cookie) => ({
+		key: cookie.name,
+		value: cookie.value,
+		enabled: true
+	}))];
+	const query = [...(example?.parameters.query ?? []).map((q) => ({
+		...q,
+		value: REGEX.VARIABLES.test(q.value) || REGEX.PATH.test(q.value) ? replaceTemplateVariables(q.value, env) : q.value
+	})) ?? [], ...Array.from(security.urlParams.entries()).map(([key, value]) => ({
+		key,
+		value,
+		enabled: true
+	}))];
+	const body = (() => {
+		const body = example?.body;
+		if (body?.raw?.value && (REGEX.VARIABLES.test(body.raw.value) || REGEX.PATH.test(body.raw.value))) return {
+			...body,
+			raw: {
+				...body.raw,
+				value: replaceTemplateVariables(body.raw.value, env)
+			}
+		};
+		return body;
+	})();
+	return convertToHarRequest({
+		baseUrl: serverString,
+		method: operation?.method ?? "get",
+		path: pathString,
+		body,
+		cookies,
+		headers,
+		query
+	});
+};
+//#endregion
+export { convertToHarRequest as n, CodeSnippet_default as r, getHarRequest as t };
+
+//# sourceMappingURL=CodeSnippet-D7Heh1nd.js.map

package/dist/CodeSnippet-D7Heh1nd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeSnippet-D7Heh1nd.js","names":[],"sources":["../src/views/Components/CodeSnippet/CodeSnippet.vue","../src/views/Components/CodeSnippet/CodeSnippet.vue","../src/views/Components/CodeSnippet/helpers/convert-to-har-request.ts","../src/views/Components/CodeSnippet/helpers/get-har-request.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarCodeBlock } from '@scalar/components'\nimport type {\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { isDefined } from '@scalar/oas-utils/helpers'\nimport type { ClientId, TargetId } from '@scalar/snippetz'\nimport { encode } from 'js-base64'\nimport { computed } from 'vue'\n\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { getHarRequest, getSnippet } from '@/views/Components/CodeSnippet'\n\nconst {\n  target,\n  client,\n  operation,\n  server,\n  example,\n  securitySchemes = [],\n  environment,\n} = defineProps<{\n  target: TargetId\n  client: ClientId<TargetId>\n  operation?: Operation | undefined\n  server?: Server | undefined\n  example?: RequestExample | undefined\n  securitySchemes?: SecurityScheme[]\n  environment?: EnvVariables | undefined\n}>()\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() =>\n  securitySchemes.flatMap((scheme) => {\n    if (scheme.type === 'apiKey') {\n      return scheme.value\n    }\n    if (scheme?.type === 'http') {\n      return [\n        scheme.token,\n        scheme.password,\n        encode(`${scheme.username}:${scheme.password}`),\n      ]\n    }\n    if (scheme.type === 'oauth2') {\n      return Object.values(scheme.flows)\n        .map((flow) => flow?.token)\n        .filter(isDefined)\n    }\n\n    return []\n  }),\n)\n\n/** Generated code example */\nconst content = computed(() => {\n  const harRequest = getHarRequest({\n    operation,\n    example,\n    server,\n    securitySchemes,\n    environment,\n  })\n\n  const [error, payload] = getSnippet(target, client, harRequest)\n  return { error, payload }\n})\n\n/** CodeMirror syntax highlighting language */\nconst language = computed(() => {\n  // Normalize languages\n  if (target === 'shell' && client === 'curl') {\n    return 'curl'\n  }\n  // TODO: js -> javascript?\n\n  return target ?? 'plaintext'\n})\n</script>\n<template>\n  <div\n    v-if=\"content.error\"\n    class=\"text-c-3 flex min-h-16 items-center justify-center px-4 text-sm\">\n    {{ content.error.message }}\n  </div>\n  <ScalarCodeBlock\n    v-else-if=\"content.payload\"\n    class=\"w-full\"\n    :content=\"content.payload\"\n    :hideCredentials=\"secretCredentials\"\n    :lang=\"language\"\n    lineNumbers />\n</template>\n","<script setup lang=\"ts\">\nimport { ScalarCodeBlock } from '@scalar/components'\nimport type {\n  Operation,\n  RequestExample,\n  SecurityScheme,\n  Server,\n} from '@scalar/oas-utils/entities/spec'\nimport { isDefined } from '@scalar/oas-utils/helpers'\nimport type { ClientId, TargetId } from '@scalar/snippetz'\nimport { encode } from 'js-base64'\nimport { computed } from 'vue'\n\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { getHarRequest, getSnippet } from '@/views/Components/CodeSnippet'\n\nconst {\n  target,\n  client,\n  operation,\n  server,\n  example,\n  securitySchemes = [],\n  environment,\n} = defineProps<{\n  target: TargetId\n  client: ClientId<TargetId>\n  operation?: Operation | undefined\n  server?: Server | undefined\n  example?: RequestExample | undefined\n  securitySchemes?: SecurityScheme[]\n  environment?: EnvVariables | undefined\n}>()\n\n/**  Block secrets from being shown in the code block */\nconst secretCredentials = computed(() =>\n  securitySchemes.flatMap((scheme) => {\n    if (scheme.type === 'apiKey') {\n      return scheme.value\n    }\n    if (scheme?.type === 'http') {\n      return [\n        scheme.token,\n        scheme.password,\n        encode(`${scheme.username}:${scheme.password}`),\n      ]\n    }\n    if (scheme.type === 'oauth2') {\n      return Object.values(scheme.flows)\n        .map((flow) => flow?.token)\n        .filter(isDefined)\n    }\n\n    return []\n  }),\n)\n\n/** Generated code example */\nconst content = computed(() => {\n  const harRequest = getHarRequest({\n    operation,\n    example,\n    server,\n    securitySchemes,\n    environment,\n  })\n\n  const [error, payload] = getSnippet(target, client, harRequest)\n  return { error, payload }\n})\n\n/** CodeMirror syntax highlighting language */\nconst language = computed(() => {\n  // Normalize languages\n  if (target === 'shell' && client === 'curl') {\n    return 'curl'\n  }\n  // TODO: js -> javascript?\n\n  return target ?? 'plaintext'\n})\n</script>\n<template>\n  <div\n    v-if=\"content.error\"\n    class=\"text-c-3 flex min-h-16 items-center justify-center px-4 text-sm\">\n    {{ content.error.message }}\n  </div>\n  <ScalarCodeBlock\n    v-else-if=\"content.payload\"\n    class=\"w-full\"\n    :content=\"content.payload\"\n    :hideCredentials=\"secretCredentials\"\n    :lang=\"language\"\n    lineNumbers />\n</template>\n","import type { Operation, RequestExample } from '@scalar/oas-utils/entities/spec'\nimport { mergeUrls } from '@scalar/oas-utils/helpers'\nimport type { FormDataParam, HarRequest } from '@scalar/snippetz'\n\ntype Props = {\n  baseUrl: string | undefined\n  body?: RequestExample['body'] | undefined\n  cookies: { key: string; value: string; enabled: boolean }[]\n  headers: { key: string; value: string; enabled: boolean }[]\n  query: { key: string; value: string; enabled: boolean }[]\n} & Pick<Operation, 'method' | 'path'>\n\n/**\n * Takes in a regular request object and returns a HAR request\n * We also Titlecase the headers and remove accept header if it's *\n */\nexport const convertToHarRequest = ({\n  baseUrl = '',\n  method,\n  body,\n  path,\n  cookies,\n  headers,\n  query,\n}: Props): HarRequest => {\n  // Merge the two urls with a failsafe\n  const url = mergeUrls(baseUrl, path, undefined, true)\n\n  // Create base HAR request structure\n  const harRequest: HarRequest = {\n    method: method.toUpperCase(),\n    url: url.toString(),\n    httpVersion: 'HTTP/1.1',\n    headers: [],\n    queryString: [],\n    cookies: [],\n    headersSize: -1,\n    bodySize: -1,\n  }\n\n  // Handle cookies from Cookie header\n  if (cookies.length) {\n    harRequest.cookies = cookies\n      .filter((c) => c.enabled)\n      .map(({ key, value }) => ({\n        name: key,\n        value,\n      }))\n  }\n\n  // Convert headers\n  if (headers.length) {\n    harRequest.headers = headers\n      .filter((h) => h.enabled && !(h.key.toLowerCase() === 'accept' && h.value === '*/*'))\n      .map(({ key, value }) => ({\n        name: key.replace(/\\b\\w/g, (letter) => letter.toUpperCase()),\n        value,\n      }))\n  }\n\n  // Handle query parameters\n  if (query.length) {\n    harRequest.queryString = query\n      .filter((q) => q.enabled)\n      .map(({ key, value }) => ({\n        name: key,\n        value,\n      }))\n  }\n\n  // Handle request body if present\n  if (body) {\n    try {\n      const contentType = headers.find((h) => h.key.toLowerCase() === 'content-type')?.value\n\n      // For form-data, convert to object while handling File objects\n      if (body.activeBody === 'formData' && body.formData) {\n        const params: FormDataParam[] = []\n\n        body.formData.value.forEach(({ key, value, file, enabled }) => {\n          if (!enabled) {\n            return\n          }\n\n          if (file) {\n            params.push({\n              name: key || 'blob',\n              value: 'BINARY',\n              fileName: file.name,\n              contentType: file.type || 'application/octet-stream',\n            })\n          } else {\n            params.push({\n              name: key,\n              value,\n            })\n          }\n        })\n\n        // Handle urlencoded form data\n        if (body.formData?.encoding === 'urlencoded') {\n          harRequest.postData = {\n            mimeType: contentType || 'application/x-www-form-urlencoded',\n            params,\n          }\n        } else {\n          harRequest.postData = {\n            mimeType: contentType || 'multipart/form-data',\n            params,\n          }\n        }\n      } else if (body.activeBody === 'raw' && body.raw) {\n        // For other content types (JSON, plain text, url-encoded)\n        harRequest.postData = {\n          mimeType: contentType || 'application/json',\n          text: body.raw?.value ?? '',\n        }\n      }\n    } catch (_e) {\n      // Invalid request body, leave postData empty\n    }\n  }\n\n  return harRequest\n}\n","import type { Operation, RequestExample, SecurityScheme, Server } from '@scalar/oas-utils/entities/spec'\nimport { REGEX } from '@scalar/oas-utils/helpers'\nimport type { HarRequest } from '@scalar/snippetz'\n\nimport type { EnvVariables } from '@/libs/env-helpers'\nimport { buildRequestSecurity } from '@/libs/send-request/build-request-security'\nimport { replaceTemplateVariables } from '@/libs/string-template'\n\nimport { convertToHarRequest } from './convert-to-har-request'\n\nconst EMPTY_TOKEN_PLACEHOLDER = 'YOUR_SECRET_TOKEN'\n\n/**\n * Creates a snippetz-compatible HarRequest from OpenAPI-like store entities\n *\n * @deprecated, can be removed once we've migrated to the new code snippet component\n */\nexport const getHarRequest = ({\n  operation,\n  example,\n  server,\n  securitySchemes = [],\n  environment,\n}: {\n  operation?: Operation | undefined\n  example?: RequestExample | undefined\n  server?: Server | undefined\n  securitySchemes?: SecurityScheme[]\n  environment?: EnvVariables | undefined\n}): HarRequest => {\n  // Convert environment variables to a key-value object\n  const env =\n    environment && Array.isArray(environment)\n      ? Object.fromEntries(environment.map((v: any) => [v.key, v.value]))\n      : environment || {}\n\n  const encodedPathVars = (example?.parameters?.path ?? []).reduce<Record<string, string>>((vars, param) => {\n    if (param.enabled) {\n      const substitutedValue = replaceTemplateVariables(param.value, env)\n      vars[param.key] = encodeURIComponent(substitutedValue)\n    }\n    return vars\n  }, {})\n\n  const serverString = (() => {\n    if (server?.url && (REGEX.VARIABLES.test(server.url) || REGEX.PATH.test(server.url))) {\n      const serverParams = Object.entries(server?.variables || {}).reduce<Record<string, string>>(\n        (acc, [key, variable]) => {\n          if (encodedPathVars[key]) {\n            acc[key] = encodedPathVars[key]\n          } else if (variable.default) {\n            acc[key] = replaceTemplateVariables(variable.default, env)\n          }\n          return acc\n        },\n        {},\n      )\n      return replaceTemplateVariables(replaceTemplateVariables(server.url, env), serverParams)\n    }\n    return server?.url\n  })()\n\n  const pathString = (() => {\n    const path = operation?.path ?? '/'\n    if (path && (REGEX.VARIABLES.test(path) || REGEX.PATH.test(path))) {\n      return replaceTemplateVariables(replaceTemplateVariables(path, env), encodedPathVars)\n    }\n    return path\n  })()\n\n  // Grab the security headers, cookies and url params\n  const security = buildRequestSecurity(securitySchemes, env, EMPTY_TOKEN_PLACEHOLDER)\n\n  // Merge the security headers, cookies and query with example parameters\n  const headers = [\n    ...((example?.parameters.headers ?? []).map((h) => ({\n      ...h,\n      value:\n        REGEX.VARIABLES.test(h.value) || REGEX.PATH.test(h.value) ? replaceTemplateVariables(h.value, env) : h.value,\n    })) ?? []),\n    ...Object.entries(security.headers).map(([key, value]) => ({\n      key,\n      value,\n      enabled: true,\n    })),\n  ]\n  const cookies = [\n    ...((example?.parameters.cookies ?? []).map((c) => ({\n      ...c,\n      value:\n        REGEX.VARIABLES.test(c.value) || REGEX.PATH.test(c.value) ? replaceTemplateVariables(c.value, env) : c.value,\n    })) ?? []),\n    ...security.cookies.map((cookie) => ({\n      key: cookie.name,\n      value: cookie.value,\n      enabled: true,\n    })),\n  ]\n  const query = [\n    ...((example?.parameters.query ?? []).map((q) => ({\n      ...q,\n      value:\n        REGEX.VARIABLES.test(q.value) || REGEX.PATH.test(q.value) ? replaceTemplateVariables(q.value, env) : q.value,\n    })) ?? []),\n    ...Array.from(security.urlParams.entries()).map(([key, value]) => ({\n      key,\n      value,\n      enabled: true,\n    })),\n  ]\n\n  // Fallback variable replacement for body (raw)\n  const body = (() => {\n    const body = example?.body\n    if (body?.raw?.value && (REGEX.VARIABLES.test(body.raw.value) || REGEX.PATH.test(body.raw.value))) {\n      return {\n        ...body,\n        raw: {\n          ...body.raw,\n          value: replaceTemplateVariables(body.raw.value, env),\n        },\n      }\n    }\n    return body\n  })()\n\n  // Converts it to a snippetz-compatible HarRequest\n  return convertToHarRequest({\n    baseUrl: serverString,\n    method: operation?.method ?? 'get',\n    path: pathString,\n    body,\n    cookies,\n    headers,\n    query,\n  })\n}\n"],"mappings":"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"}