@scalar/api-client 3.10.2 → 3.10.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @scalar/api-client
 
+## 3.10.4
+
+### Patch Changes
+
+- [#9319](https://github.com/scalar/scalar/pull/9319): feat: route OAuth2 token exchange/refresh and OpenID Connect discovery through the configured `customFetch`
+
+  The auth selector now forwards the client's `customFetch` to the OAuth2 and OpenID Connect flows. This lets the Electron desktop app pipe these requests over IPC (like regular API requests) instead of the renderer's network stack, so the desktop Content Security Policy can lock down `connect-src`. When no `customFetch` is provided the flows fall back to the global `fetch`, so web behavior is unchanged.
+
+- [#9138](https://github.com/scalar/scalar/pull/9138): feat(api-client): add CodeInputLite, a lightweight contenteditable variable input that replaces CodeMirror in the request, auth, and environment tables for better performance
+
+## 3.10.3
+
+### Patch Changes
+
+- [#9482](https://github.com/scalar/scalar/pull/9482): Fix the auth scheme dropdown not opening when multiple client apps are on the page (for example, the API reference modal). Each modal app now gets a unique id prefix, so teleport targets no longer collide and the popover renders in the visible app instead of a hidden one
+- [#9342](https://github.com/scalar/scalar/pull/9342): fix: resolve operations when OpenAPI path items use `$ref`
+
+  Path entries and webhooks can reference `components.pathItems` instead of inlining operations. Navigation, mutators, search, and markdown export now resolve path-item references before reading HTTP methods and path-level parameters.
+
+- [#9498](https://github.com/scalar/scalar/pull/9498): Sync the SDK installation tabs with the operation code examples: picking a language under "Client Libraries" now switches every operation's code sample to that language's custom example
+
 ## 3.10.2
 
 ## 3.10.1

package/dist/style.css

@@ -889,7 +889,7 @@
   color: var(--scalar-color-1);
 }
 
-.hljs.language-objectivec .hljs-built_in, .hljs-built_in {
+.hljs.language-objectivec .hljs-built_in {
   color: var(--scalar-color-orange);
 }
 
@@ -1650,7 +1650,7 @@
 
 :where(body) > .scalar-tooltip {
   --scalar-tooltip-padding: 8px;
-  padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding: var(--scalar-tooltip-padding);
   z-index: 99999;
   max-width: 320px;
   font-size: var(--scalar-font-size-5);
@@ -1661,9 +1661,24 @@
   color: var(--scalar-tooltip-color);
 }
 
+:where(body) > .scalar-tooltip[data-side="top"] {
+  padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+
+:where(body) > .scalar-tooltip[data-side="bottom"] {
+  padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+
+:where(body) > .scalar-tooltip[data-side="left"] {
+  padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+
+:where(body) > .scalar-tooltip[data-side="right"] {
+  padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+
 :where(body) > .scalar-tooltip:before {
   content: "";
-  inset: var(--scalar-tooltip-offset);
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius);
   background-color: var(--scalar-tooltip-background);
@@ -1671,6 +1686,23 @@
   -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   position: absolute;
+  inset: 0;
+}
+
+:where(body) > .scalar-tooltip[data-side="top"]:before {
+  bottom: var(--scalar-tooltip-offset);
+}
+
+:where(body) > .scalar-tooltip[data-side="bottom"]:before {
+  top: var(--scalar-tooltip-offset);
+}
+
+:where(body) > .scalar-tooltip[data-side="left"]:before {
+  right: var(--scalar-tooltip-offset);
+}
+
+:where(body) > .scalar-tooltip[data-side="right"]:before {
+  left: var(--scalar-tooltip-offset);
 }
 
 :where(body.dark-mode) > .scalar-tooltip:before {
@@ -1965,10 +1997,18 @@
   inset-block: 2px;
 }
 
+.scalar-app .-start {
+  inset-inline-start: -4px;
+}
+
 .scalar-app .start {
   inset-inline-start: 4px;
 }
 
+.scalar-app .-end {
+  inset-inline-end: -4px;
+}
+
 .scalar-app .end {
   inset-inline-end: 4px;
 }
@@ -4765,15 +4805,15 @@
   outline-width: 1px;
 }
 
-.scalar-app .group-has-\[\.cm-focused\]\:z-1:is(:where(.group):has(.cm-focused) *) {
+.scalar-app .group-has-\[\.cm-focused\]\:z-1:is(:where(.group):has(.cm-focused) *), .scalar-app .group-has-\[\.code-input-lite__editor\:focus\]\:z-1:is(:where(.group):has(:is(.code-input-lite editor:focus)) *) {
   z-index: 1;
 }
 
-.scalar-app .group-has-\[\.cm-focused\]\:flex:is(:where(.group):has(.cm-focused) *) {
+.scalar-app .group-has-\[\.code-input-lite__editor\:focus\]\:flex:is(:where(.group):has(:is(.code-input-lite editor:focus)) *) {
   display: flex;
 }
 
-.scalar-app .group-has-\[\.cm-focused\]\:pr-10:is(:where(.group):has(.cm-focused) *) {
+.scalar-app .group-has-\[\.code-input-lite__editor\:focus\]\:pr-10:is(:where(.group):has(:is(.code-input-lite editor:focus)) *) {
   padding-right: 40px;
 }
 
@@ -4892,7 +4932,7 @@
   opacity: 1;
 }
 
-.scalar-app .peer-has-\[\.cm-focused\]\:opacity-0:is(:where(.peer):has(.cm-focused) ~ *) {
+.scalar-app .peer-has-\[\.cm-focused\]\:opacity-0:is(:where(.peer):has(.cm-focused) ~ *), .scalar-app .peer-has-\[\.code-input-lite__editor\:focus\]\:opacity-0:is(:where(.peer):has(:is(.code-input-lite editor:focus)) ~ *) {
   opacity: 0;
 }
 
@@ -5966,23 +6006,23 @@ to {
 /*
    Deep styling for customizing Codemirror
   */
-[data-v-3118bf46] .cm-editor {
+[data-v-d6fb2049] .cm-editor {
   height: 100%;
   outline: none;
   padding: 0;
   background: transparent;
 }
-[data-v-3118bf46] .cm-placeholder {
+[data-v-d6fb2049] .cm-placeholder {
   color: var(--scalar-color-3);
 }
-[data-v-3118bf46] .cm-content {
+[data-v-d6fb2049] .cm-content {
   font-family: var(--scalar-font-code);
   font-size: var(--scalar-small);
   max-height: 20px;
   padding: 8px 0;
 }
 /* Tooltip helper */
-[data-v-3118bf46] .cm-tooltip {
+[data-v-d6fb2049] .cm-tooltip {
   background: transparent !important;
   filter: brightness(var(--scalar-lifted-brightness));
   border-radius: var(--scalar-radius);
@@ -5991,43 +6031,43 @@ to {
   outline: none !important;
   overflow: hidden !important;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul li {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul li {
   padding: 3px 6px !important;
 }
-[data-v-3118bf46] .cm-completionIcon-type:after {
+[data-v-d6fb2049] .cm-completionIcon-type:after {
   color: var(--scalar-color-3) !important;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul li[aria-selected] {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul li[aria-selected] {
   background: var(--scalar-background-2) !important;
   color: var(--scalar-color-1) !important;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul {
   padding: 6px !important;
   position: relative;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul li:hover {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul li:hover {
   border-radius: 3px;
   color: var(--scalar-color-1) !important;
   background: var(--scalar-background-3) !important;
 }
 /* Disable active line highlighting */
-[data-v-3118bf46] .cm-activeLine,[data-v-3118bf46] .cm-activeLineGutter {
+[data-v-d6fb2049] .cm-activeLine,[data-v-d6fb2049] .cm-activeLineGutter {
   background-color: transparent;
 }
 /* Color selection matching */
-[data-v-3118bf46] .cm-selectionMatch,[data-v-3118bf46] .cm-matchingBracket {
+[data-v-d6fb2049] .cm-selectionMatch,[data-v-d6fb2049] .cm-matchingBracket {
   border-radius: var(--scalar-radius);
   background: var(--scalar-background-4) !important;
 }
 /* Color Picker Swatches */
-[data-v-3118bf46] .cm-css-color-picker-wrapper {
+[data-v-d6fb2049] .cm-css-color-picker-wrapper {
   display: inline-flex;
   outline: 1px solid var(--scalar-background-3);
   border-radius: 3px;
   overflow: hidden;
 }
 /* Number gutter */
-[data-v-3118bf46] .cm-gutters {
+[data-v-d6fb2049] .cm-gutters {
   background-color: transparent;
   border-right: none;
   color: var(--scalar-color-3);
@@ -6035,7 +6075,7 @@ to {
   line-height: 22px;
   border-radius: 0 0 0 3px;
 }
-[data-v-3118bf46] .cm-gutters:before {
+[data-v-d6fb2049] .cm-gutters:before {
   content: '';
   position: absolute;
   top: 2px;
@@ -6045,7 +6085,7 @@ to {
   border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);
   background-color: var(--scalar-background-1);
 }
-[data-v-3118bf46] .cm-gutterElement {
+[data-v-d6fb2049] .cm-gutterElement {
   font-family: var(--scalar-font-code) !important;
   padding-left: 0px !important;
   padding-right: 6px !important;
@@ -6054,16 +6094,16 @@ to {
   justify-content: flex-end;
   position: relative;
 }
-[data-v-3118bf46] .cm-lineNumbers .cm-gutterElement {
+[data-v-d6fb2049] .cm-lineNumbers .cm-gutterElement {
   min-width: fit-content;
 }
-[data-v-3118bf46] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
+[data-v-d6fb2049] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
   padding-left: 0 !important;
 }
-[data-v-3118bf46] .cm-scroller {
+[data-v-d6fb2049] .cm-scroller {
   overflow: auto;
 }
-.line-wrapping[data-v-3118bf46]:focus-within .cm-content {
+.line-wrapping[data-v-d6fb2049]:focus-within .cm-content {
   display: inline-table;
   min-height: fit-content;
   padding: 3px 6px;
@@ -6139,21 +6179,21 @@ to {
   margin-top: 0;
 }
 
-[data-v-372238a6] .cm-editor {
+[data-v-d37cbfcc] .cm-editor {
   height: 100%;
   outline: none;
   width: 100%;
 }
-[data-v-372238a6] .cm-line {
+[data-v-d37cbfcc] .cm-line {
   padding: 0;
 }
-[data-v-372238a6] .cm-content {
+[data-v-d37cbfcc] .cm-content {
   padding: 0;
   display: flex;
   align-items: center;
   font-size: var(--scalar-small);
 }
-.scroll-timeline-x[data-v-372238a6] {
+.scroll-timeline-x[data-v-d37cbfcc] {
   -ms-overflow-style: none;
   /* Fade the URL at the viewport edges. Mask lives on the scrollport (this
      element) rather than on `.cm-scroller`, whose width follows the URL's
@@ -6166,31 +6206,31 @@ to {
     transparent 100%
   );
 }
-.scroll-timeline-x-hidden[data-v-372238a6] {
+.scroll-timeline-x-hidden[data-v-d37cbfcc] {
   overflow-x: auto;
 }
-.scroll-timeline-x-hidden[data-v-372238a6] .cm-scroller {
+.scroll-timeline-x-hidden[data-v-d37cbfcc] .cm-scroller {
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-right: 20px;
   overflow: auto;
 }
-.scroll-timeline-x-hidden[data-v-372238a6]::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-d37cbfcc]::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-hidden[data-v-372238a6] .cm-scroller::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-d37cbfcc] .cm-scroller::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-address[data-v-372238a6] {
+.scroll-timeline-x-address[data-v-d37cbfcc] {
   line-height: 27px;
   scrollbar-width: none; /* Firefox */
 }
 /* make clickable are to left of send button */
-.scroll-timeline-x-address[data-v-372238a6]:after {
+.scroll-timeline-x-address[data-v-d37cbfcc]:after {
   content: '';
   position: absolute;
   height: 100%;
@@ -6198,12 +6238,12 @@ to {
   right: 0;
   cursor: text;
 }
-.scroll-timeline-x-address[data-v-372238a6]:empty:before {
+.scroll-timeline-x-address[data-v-d37cbfcc]:empty:before {
   content: 'Enter URL or cURL request';
   color: var(--scalar-color-3);
   pointer-events: none;
 }
-.address-bar-bg-states[data-v-372238a6] {
+.address-bar-bg-states[data-v-d37cbfcc] {
   --scalar-address-bar-bg: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -6211,12 +6251,16 @@ to {
   );
   background: var(--scalar-address-bar-bg);
 }
-.address-bar-bg-states[data-v-372238a6]:has(.cm-focused) {
+.address-bar-bg-states[data-v-d37cbfcc]:has(.cm-focused) {
   --scalar-address-bar-bg: var(--scalar-background-1);
   border-color: var(--scalar-border-color);
   outline-width: 1px;
   outline-style: solid;
 }
+.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-d37cbfcc],
+.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-d37cbfcc] {
+  --scalar-address-bar-bg: var(--scalar-background-1);
+}
 
 .app-exit-button[data-v-42c563b3] {
   color: white;
@@ -6315,33 +6359,110 @@ to {
   display: none;
 }
 
-[data-v-36811e28] .cm-editor {
-  padding: 0;
+.code-input-lite[data-v-1974e80d] {
+  /* Flex so the editor centres vertically in whatever height the cell gives us.
+     Font properties inherit so we adopt the surrounding typography. */
+  display: flex;
+  align-items: center;
 }
-[data-v-36811e28] .cm-content {
+.code-input-lite__editor[data-v-1974e80d] {
+  /* Everything font-related inherits from the surrounding context. */
+  font: inherit;
+  letter-spacing: inherit;
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  outline: none;
+  color: var(--scalar-color-1);
+  caret-color: var(--scalar-color-1);
+  /* Single-line: horizontal scroll keeps the caret visible for long values;
+     the scrollbar itself is hidden (would be noisy inside a table cell). */
+  white-space: pre;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  padding: 0 0.5em;
+  box-sizing: border-box;
+  line-height: 1.44;
+  /* Positioning context for the absolutely positioned placeholder. */
+  position: relative;
+}
+.code-input-lite__editor[data-v-1974e80d]::-webkit-scrollbar {
+  display: none;
+}
+
+/* Absolute so the placeholder does not occupy flow space inside the
+   contenteditable; otherwise the caret would land after it on focus.
+   `pointer-events: none` lets clicks fall through to focus the editor.
+   Hidden on focus so it never renders on top of the text caret. */
+.code-input-lite--empty .code-input-lite__editor[data-v-1974e80d]:not(:focus)::before {
+  content: attr(data-placeholder);
+  color: var(--scalar-color-3);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.5em;
+  display: flex;
   align-items: center;
+}
+.code-input-lite--error .code-input-lite__editor[data-v-1974e80d] {
+  outline: 1px solid var(--scalar-color-red);
+}
+
+/* Pill styling. Each pill is `<span contenteditable="false">name</span>` —
+   an atomic widget; the caret lands before or after it, never inside. */
+.scalar-pill {
+  color: var(--scalar-color-2);
+  border-radius: 30px;
+  display: inline-block;
+  font-family: var(--scalar-font-code);
+  font-size: 0.9em;
+  line-height: 1.4;
+  vertical-align: baseline;
+  background: var(--scalar-background-3);
+  padding: 0.125em 0.6em;
+  margin-right: 0.35em;
+  cursor: text;
+  /* Single click selects the whole pill — chip/mention model, deletes in one go. */
+  user-select: all;
+  -webkit-user-select: all;
+}
+.dark-mode .scalar-pill {
+  background: color-mix(
+    in srgb,
+    var(--tw-bg-base, var(--scalar-color-1)),
+    transparent 90%
+  );
+}
+.light-mode .scalar-pill {
+  background: var(--scalar-background-3);
+}
+.scalar-pill--context-fn {
+  /* Inset box-shadow as a border so the layout box stays identical to plain pills. */
+  box-shadow: 0 0 0 1px
+    color-mix(in srgb, var(--scalar-color-3), transparent 35%) inset;
+}
+.dark-mode .scalar-pill--context-fn {
+  background: color-mix(in srgb, var(--scalar-background-3), transparent 55%);
+}
+.light-mode .scalar-pill--context-fn {
+  background: color-mix(in srgb, var(--scalar-background-3), transparent 40%);
+}
+
+[data-v-e83eb7d0] .code-input-lite__editor {
   background-color: transparent;
-  display: flex;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
-  width: 100%;
-}
-[data-v-36811e28] .cm-content:has(.cm-pill) {
-  padding: 5px 8px;
 }
-[data-v-36811e28] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
+[data-v-e83eb7d0] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-36811e28] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-e83eb7d0] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-36811e28] .cm-line {
-  overflow: hidden;
-  padding: 0;
-  text-overflow: ellipsis;
-}
-.filemask[data-v-36811e28] {
+.filemask[data-v-e83eb7d0] {
   mask-image: linear-gradient(
     to right,
     transparent 0,
@@ -6375,42 +6496,27 @@ to {
   scrollbar-width: none;
 }
 
-[data-v-1ee3c31d] .cm-editor {
-  padding: 0;
-}
-[data-v-1ee3c31d] .cm-content {
-  align-items: center;
+[data-v-a6f4752a] .code-input-lite__editor {
   background-color: transparent;
-  display: flex;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
-  width: 100%;
 }
-[data-v-1ee3c31d] .cm-content:has(.cm-pill) {
-  padding: 5px 8px;
-}
-[data-v-1ee3c31d] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
+[data-v-a6f4752a] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-1ee3c31d] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-a6f4752a] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-1ee3c31d] .cm-line {
-  overflow: hidden;
-  padding: 0;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-.required[data-v-1ee3c31d]::after {
+.required[data-v-a6f4752a]::after {
   content: 'Required';
 }
 /* Tailwind placeholder is busted */
-input[data-v-1ee3c31d]::placeholder {
+input[data-v-a6f4752a]::placeholder {
   color: var(--scalar-color-3);
 }
 /* we want our inputs to look like a password input but not be one */
-.scalar-password-input[data-v-1ee3c31d] {
+.scalar-password-input[data-v-a6f4752a] {
   text-security: disc;
   -webkit-text-security: disc;
   -moz-text-security: disc;
@@ -6618,32 +6724,18 @@ to {
   bottom: 0;
 }
 
-[data-v-69be2d6c] .cm-editor {
-  padding: 0;
-}
-[data-v-69be2d6c] .cm-content {
-  align-items: center;
+[data-v-5b336842] .code-input-lite__editor {
   background-color: transparent;
-  display: flex;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
-  width: 100%;
-}
-[data-v-69be2d6c] .cm-content:has(.cm-pill) {
-  padding: 5px 8px;
 }
-[data-v-69be2d6c] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
+[data-v-5b336842] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-69be2d6c] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-5b336842] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-69be2d6c] .cm-line {
-  overflow: hidden;
-  padding: 0;
-  text-overflow: ellipsis;
-}
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 .scalar .scalar-app-layout[data-v-77897d1c] {
   background: var(--scalar-background-1);

package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"process-security-schemes.d.ts","sourceRoot":"","sources":["../../../../../../src/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAGvD,KAAK,8BAA8B,GAAG;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAC9B,WAAW,EAAE,UAAU,CAAC,aAAa,CAAC,CAAA;IACtC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;CAC/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,iBAAiB,0BAA0B,EAAE,KAC5C,8BAuEF,CAAA"}
+{"version":3,"file":"process-security-schemes.d.ts","sourceRoot":"","sources":["../../../../../../src/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAA;AACzF,OAAO,KAAK,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAGvD,KAAK,8BAA8B,GAAG;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;IAC9B,WAAW,EAAE,UAAU,CAAC,aAAa,CAAC,CAAA;IACtC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;CAC/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,iBAAiB,0BAA0B,EAAE,KAC5C,8BA2EF,CAAA"}

package/dist/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.js.map

@@ -1 +1 @@
-{"version":3,"file":"process-security-schemes.js","names":[],"sources":["../../../../../../src/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.ts"],"sourcesContent":["import type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { Request as HarRequest } from 'har-format'\nimport { encode } from 'js-base64'\n\ntype ProcessedSecuritySchemesReturn = {\n  headers: HarRequest['headers']\n  queryString: HarRequest['queryString']\n  cookies: HarRequest['cookies']\n}\n\n/**\n * Process security schemes into whichever parameters they are applicable to\n *\n * TODO: we probably want to be able to disable YOUR_SECRET_TOKEN placeholder text + or allow it to be customzied\n */\nexport const processSecuritySchemes = (\n  securitySchemes: SecuritySchemeObjectSecret[],\n): ProcessedSecuritySchemesReturn => {\n  const result: ProcessedSecuritySchemesReturn = {\n    headers: [],\n    queryString: [],\n    cookies: [],\n  }\n\n  for (const scheme of securitySchemes) {\n    // Handle apiKey type\n    if (scheme.type === 'apiKey') {\n      const value = scheme['x-scalar-secret-token'] || 'YOUR_SECRET_TOKEN'\n      if (!scheme.name) {\n        continue\n      }\n\n      const param = { name: scheme.name, value }\n\n      switch (scheme.in) {\n        case 'header':\n          result.headers.push(param)\n          break\n        case 'query':\n          result.queryString.push(param)\n          break\n        case 'cookie':\n          result.cookies.push(param)\n          break\n      }\n      continue\n    }\n\n    // Handle http type\n    if (scheme.type === 'http') {\n      if (scheme.scheme === 'basic') {\n        const username = scheme['x-scalar-secret-username'] || ''\n        const password = scheme['x-scalar-secret-password'] || ''\n\n        const value = `${username}:${password}`\n        const auth = value === ':' ? 'username:password' : encode(value)\n\n        result.headers.push({\n          name: 'Authorization',\n          value: `Basic ${auth}`,\n        })\n      } else if (scheme.scheme === 'bearer') {\n        const token = scheme['x-scalar-secret-token'] || 'YOUR_SECRET_TOKEN'\n\n        result.headers.push({\n          name: 'Authorization',\n          value: `Bearer ${token}`,\n        })\n      }\n      continue\n    }\n\n    // Handle oauth2 type\n    if (scheme.type === 'oauth2' && scheme.flows) {\n      const flows = Object.values(scheme.flows)\n\n      // Find the first flow with a token\n      const flow = flows.find((f) => f['x-scalar-secret-token'])\n      const token = flow?.['x-scalar-secret-token'] || 'YOUR_SECRET_TOKEN'\n\n      result.headers.push({\n        name: 'Authorization',\n        value: `Bearer ${token}`,\n      })\n    }\n  }\n\n  return result\n}\n"],"mappings":";;;;;;;AAeA,IAAa,0BACX,oBACmC;CACnC,MAAM,SAAyC;EAC7C,SAAS,EAAE;EACX,aAAa,EAAE;EACf,SAAS,EAAE;EACZ;AAED,MAAK,MAAM,UAAU,iBAAiB;AAEpC,MAAI,OAAO,SAAS,UAAU;GAC5B,MAAM,QAAQ,OAAO,4BAA4B;AACjD,OAAI,CAAC,OAAO,KACV;GAGF,MAAM,QAAQ;IAAE,MAAM,OAAO;IAAM;IAAO;AAE1C,WAAQ,OAAO,IAAf;IACE,KAAK;AACH,YAAO,QAAQ,KAAK,MAAM;AAC1B;IACF,KAAK;AACH,YAAO,YAAY,KAAK,MAAM;AAC9B;IACF,KAAK;AACH,YAAO,QAAQ,KAAK,MAAM;AAC1B;;AAEJ;;AAIF,MAAI,OAAO,SAAS,QAAQ;AAC1B,OAAI,OAAO,WAAW,SAAS;IAI7B,MAAM,QAAQ,GAHG,OAAO,+BAA+B,GAG7B,GAFT,OAAO,+BAA+B;IAGvD,MAAM,OAAO,UAAU,MAAM,sBAAsB,OAAO,MAAM;AAEhE,WAAO,QAAQ,KAAK;KAClB,MAAM;KACN,OAAO,SAAS;KACjB,CAAC;cACO,OAAO,WAAW,UAAU;IACrC,MAAM,QAAQ,OAAO,4BAA4B;AAEjD,WAAO,QAAQ,KAAK;KAClB,MAAM;KACN,OAAO,UAAU;KAClB,CAAC;;AAEJ;;AAIF,MAAI,OAAO,SAAS,YAAY,OAAO,OAAO;GAK5C,MAAM,QAJQ,OAAO,OAAO,OAAO,MAAM,CAGtB,MAAM,MAAM,EAAE,yBAAyB,GACrC,4BAA4B;AAEjD,UAAO,QAAQ,KAAK;IAClB,MAAM;IACN,OAAO,UAAU;IAClB,CAAC;;;AAIN,QAAO"}
+{"version":3,"file":"process-security-schemes.js","names":[],"sources":["../../../../../../src/v2/blocks/operation-code-sample/helpers/operation-to-har/process-security-schemes.ts"],"sourcesContent":["import type { SecuritySchemeObjectSecret } from '@scalar/workspace-store/request-example'\nimport type { Request as HarRequest } from 'har-format'\nimport { encode } from 'js-base64'\n\ntype ProcessedSecuritySchemesReturn = {\n  headers: HarRequest['headers']\n  queryString: HarRequest['queryString']\n  cookies: HarRequest['cookies']\n}\n\n/**\n * Process security schemes into whichever parameters they are applicable to\n *\n * TODO: we probably want to be able to disable YOUR_SECRET_TOKEN placeholder text + or allow it to be customzied\n */\nexport const processSecuritySchemes = (\n  securitySchemes: SecuritySchemeObjectSecret[],\n): ProcessedSecuritySchemesReturn => {\n  const result: ProcessedSecuritySchemesReturn = {\n    headers: [],\n    queryString: [],\n    cookies: [],\n  }\n\n  for (const scheme of securitySchemes) {\n    // Handle apiKey type\n    if (scheme.type === 'apiKey') {\n      const value = scheme['x-scalar-secret-token'] || 'YOUR_SECRET_TOKEN'\n      if (!scheme.name) {\n        continue\n      }\n\n      const param = { name: scheme.name, value }\n\n      switch (scheme.in) {\n        case 'header':\n          result.headers.push(param)\n          break\n        case 'query':\n          result.queryString.push(param)\n          break\n        case 'cookie':\n          result.cookies.push(param)\n          break\n      }\n      continue\n    }\n\n    // Handle http type\n    if (scheme.type === 'http') {\n      if (scheme.scheme === 'basic') {\n        const username = scheme['x-scalar-secret-username'] || ''\n        const password = scheme['x-scalar-secret-password'] || ''\n\n        // The snippet is documentation, so we always show an Authorization header. When both\n        // fields are empty we render a readable `username:password` placeholder, mirroring the\n        // `YOUR_SECRET_TOKEN` placeholder used by the other schemes. (The real request omits the\n        // header entirely in that case — see buildRequestSecurity.)\n        const value = `${username}:${password}`\n        const auth = value === ':' ? 'username:password' : encode(value)\n\n        result.headers.push({\n          name: 'Authorization',\n          value: `Basic ${auth}`,\n        })\n      } else if (scheme.scheme === 'bearer') {\n        const token = scheme['x-scalar-secret-token'] || 'YOUR_SECRET_TOKEN'\n\n        result.headers.push({\n          name: 'Authorization',\n          value: `Bearer ${token}`,\n        })\n      }\n      continue\n    }\n\n    // Handle oauth2 type\n    if (scheme.type === 'oauth2' && scheme.flows) {\n      const flows = Object.values(scheme.flows)\n\n      // Find the first flow with a token\n      const flow = flows.find((f) => f['x-scalar-secret-token'])\n      const token = flow?.['x-scalar-secret-token'] || 'YOUR_SECRET_TOKEN'\n\n      result.headers.push({\n        name: 'Authorization',\n        value: `Bearer ${token}`,\n      })\n    }\n  }\n\n  return result\n}\n"],"mappings":";;;;;;;AAeA,IAAa,0BACX,oBACmC;CACnC,MAAM,SAAyC;EAC7C,SAAS,EAAE;EACX,aAAa,EAAE;EACf,SAAS,EAAE;EACZ;AAED,MAAK,MAAM,UAAU,iBAAiB;AAEpC,MAAI,OAAO,SAAS,UAAU;GAC5B,MAAM,QAAQ,OAAO,4BAA4B;AACjD,OAAI,CAAC,OAAO,KACV;GAGF,MAAM,QAAQ;IAAE,MAAM,OAAO;IAAM;IAAO;AAE1C,WAAQ,OAAO,IAAf;IACE,KAAK;AACH,YAAO,QAAQ,KAAK,MAAM;AAC1B;IACF,KAAK;AACH,YAAO,YAAY,KAAK,MAAM;AAC9B;IACF,KAAK;AACH,YAAO,QAAQ,KAAK,MAAM;AAC1B;;AAEJ;;AAIF,MAAI,OAAO,SAAS,QAAQ;AAC1B,OAAI,OAAO,WAAW,SAAS;IAQ7B,MAAM,QAAQ,GAPG,OAAO,+BAA+B,GAO7B,GANT,OAAO,+BAA+B;IAOvD,MAAM,OAAO,UAAU,MAAM,sBAAsB,OAAO,MAAM;AAEhE,WAAO,QAAQ,KAAK;KAClB,MAAM;KACN,OAAO,SAAS;KACjB,CAAC;cACO,OAAO,WAAW,UAAU;IACrC,MAAM,QAAQ,OAAO,4BAA4B;AAEjD,WAAO,QAAQ,KAAK;KAClB,MAAM;KACN,OAAO,UAAU;KAClB,CAAC;;AAEJ;;AAIF,MAAI,OAAO,SAAS,YAAY,OAAO,OAAO;GAK5C,MAAM,QAJQ,OAAO,OAAO,OAAO,MAAM,CAGtB,MAAM,MAAM,EAAE,yBAAyB,GACrC,4BAA4B;AAEjD,UAAO,QAAQ,KAAK;IAClB,MAAM;IACN,OAAO,UAAU;IAClB,CAAC;;;AAIN,QAAO"}

package/dist/v2/blocks/operation-code-sample/index.d.ts

@@ -3,7 +3,7 @@ export { default as HttpMethod } from './components/HttpMethod.vue.js';
 export { default as OperationCodeSample } from './components/OperationCodeSample.vue.js';
 export { filterClientsByQuery } from './helpers/filter-clients-by-query.js';
 export { DEFAULT_CLIENT, type SelectedClientId, findClient, isClient, isSelectedClient } from './helpers/find-client.js';
-export { generateClientOptions } from './helpers/generate-client-options.js';
+export { generateClientOptions, getCustomClientIds } from './helpers/generate-client-options.js';
 export { getResolvedRefDeep } from './helpers/get-resolved-ref-deep.js';
 export type { ClientOption, ClientOptionGroup, CustomClientOption, CustomClientOptionGroup } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/blocks/operation-code-sample/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/blocks/operation-code-sample/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACrH,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/blocks/operation-code-sample/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,gCAAgC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACrH,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAC7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA"}

package/dist/v2/blocks/operation-code-sample/index.js

@@ -3,6 +3,6 @@ import HttpMethod_default from "./components/HttpMethod.vue.js";
 import { getResolvedRefDeep } from "./helpers/get-resolved-ref-deep.js";
 import { filterClientsByQuery } from "./helpers/filter-clients-by-query.js";
 import { DEFAULT_CLIENT, findClient, isClient, isSelectedClient } from "./helpers/find-client.js";
-import { generateClientOptions } from "./helpers/generate-client-options.js";
+import { generateClientOptions, getCustomClientIds } from "./helpers/generate-client-options.js";
 import OperationCodeSample_default from "./components/OperationCodeSample.vue.js";
-export { DEFAULT_CLIENT, ExamplePicker_default as ExamplePicker, HttpMethod_default as HttpMethod, OperationCodeSample_default as OperationCodeSample, filterClientsByQuery, findClient, generateClientOptions, getResolvedRefDeep, isClient, isSelectedClient };
+export { DEFAULT_CLIENT, ExamplePicker_default as ExamplePicker, HttpMethod_default as HttpMethod, OperationCodeSample_default as OperationCodeSample, filterClientsByQuery, findClient, generateClientOptions, getCustomClientIds, getResolvedRefDeep, isClient, isSelectedClient };

package/dist/v2/blocks/request-block/components/RequestTable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"names":[],"mappings":"AA8IA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAwB,EACtB,KAAK,QAAQ,EACd,MAAM,0DAA0D,CAAA;AAOjE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,EAAE,kBAAkB,CAAA;CAChC,CAAC;AA4OF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;cA1NN,MAAM;eACL,MAAM,GAAG,IAAI,GAAG,SAAS;oBACpB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAFb,MAAM;eACL,MAAM,GAAG,IAAI,GAAG,SAAS;oBACpB,OAAO;;;;;kFA2NvB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"names":[],"mappings":"AAgIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAGnH,OAAwB,EACtB,KAAK,QAAQ,EACd,MAAM,0DAA0D,CAAA;AAOjE,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,8BAA8B;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,WAAW,EAAE,kBAAkB,CAAA;CAChC,CAAC;AAsOF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;cApNN,MAAM;eACL,MAAM,GAAG,IAAI,GAAG,SAAS;oBACpB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAFb,MAAM;eACL,MAAM,GAAG,IAAI,GAAG,SAAS;oBACpB,OAAO;;;;;kFAqNvB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/request-block/components/RequestTable.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import RequestTable_vue_vue_type_script_setup_true_lang_default from "./RequestTable.vue.script.js";
 /* empty css                           */
 //#region src/v2/blocks/request-block/components/RequestTable.vue
-var RequestTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-36811e28"]]);
+var RequestTable_default = /* @__PURE__ */ _plugin_vue_export_helper_default(RequestTable_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e83eb7d0"]]);
 //#endregion
 export { RequestTable_default as default };
 

package/dist/v2/blocks/request-block/components/RequestTable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RequestTable.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport RequestTableRow, {\n  type TableRow,\n} from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst {\n  data,\n  hasCheckboxDisabled,\n  showUploadButton,\n  showAddRowPlaceholder = true,\n  environment,\n} = defineProps<{\n  data: TableRow[]\n  /** Hide the enabled column */\n  hasCheckboxDisabled?: boolean\n  invalidParams?: Set<string>\n  label?: string\n  showUploadButton?: boolean\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n}>()\n\n/**\n * Make this component more generic that can be used also for the operation body\n */\nconst emit = defineEmits<{\n  (\n    e: 'upsertRow',\n    index: number,\n    payload: {\n      name: string\n      value: string | File | undefined\n      isDisabled: boolean\n    },\n  ): void\n  (e: 'deleteRow', index: number): void\n\n  /**\n   * File upload events\n   *\n   * Each row has its own upload button, so we need to know which row to update\n   * when the file is selected.\n   */\n  (e: 'uploadFile', index: number): void\n  (e: 'removeFile', index: number): void\n  (e: 'navigate', route: NonNullable<TableRow['globalRoute']>): void\n}>()\n\nconst columns = computed(() => {\n  if (showUploadButton) {\n    return ['36px', '', '', 'auto']\n  }\n  return ['36px', '', '']\n})\n\n/** Add the last empty row (for ui purposes only) */\nconst displayData = computed(() => {\n  if (!showAddRowPlaceholder) {\n    return data\n  }\n\n  const last = data.at(-1)\n\n  if (!last || last.name !== '' || last.value !== '') {\n    return [...data, { name: '', value: '', isDisabled: true }]\n  }\n\n  return data\n})\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>{{ label }} Enabled</DataTableHeader>\n      <DataTableHeader>{{ label }} Key</DataTableHeader>\n      <DataTableHeader>{{ label }} Value</DataTableHeader>\n    </DataTableRow>\n\n    <RequestTableRow\n      v-for=\"(row, index) in displayData\"\n      :key=\"index\"\n      :data=\"row\"\n      :environment=\"environment\"\n      :hasCheckboxDisabled=\"hasCheckboxDisabled\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showUploadButton=\"showUploadButton\"\n      @deleteRow=\"emit('deleteRow', index)\"\n      @navigate=\"(route) => emit('navigate', route)\"\n      @removeFile=\"emit('removeFile', index)\"\n      @uploadFile=\"emit('uploadFile', index)\"\n      @upsertRow=\"(payload) => emit('upsertRow', index, payload)\" />\n  </DataTable>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.filemask {\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"RequestTable.vue.js","names":[],"sources":["../../../../../src/v2/blocks/request-block/components/RequestTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed } from 'vue'\n\nimport RequestTableRow, {\n  type TableRow,\n} from '@/v2/blocks/request-block/components/RequestTableRow.vue'\nimport {\n  DataTable,\n  DataTableHeader,\n  DataTableRow,\n} from '@/v2/components/data-table'\n\nconst {\n  data,\n  hasCheckboxDisabled,\n  showUploadButton,\n  showAddRowPlaceholder = true,\n  environment,\n} = defineProps<{\n  data: TableRow[]\n  /** Hide the enabled column */\n  hasCheckboxDisabled?: boolean\n  invalidParams?: Set<string>\n  label?: string\n  showUploadButton?: boolean\n  showAddRowPlaceholder?: boolean\n  environment: XScalarEnvironment\n}>()\n\n/**\n * Make this component more generic that can be used also for the operation body\n */\nconst emit = defineEmits<{\n  (\n    e: 'upsertRow',\n    index: number,\n    payload: {\n      name: string\n      value: string | File | undefined\n      isDisabled: boolean\n    },\n  ): void\n  (e: 'deleteRow', index: number): void\n\n  /**\n   * File upload events\n   *\n   * Each row has its own upload button, so we need to know which row to update\n   * when the file is selected.\n   */\n  (e: 'uploadFile', index: number): void\n  (e: 'removeFile', index: number): void\n  (e: 'navigate', route: NonNullable<TableRow['globalRoute']>): void\n}>()\n\nconst columns = computed(() => {\n  if (showUploadButton) {\n    return ['36px', '', '', 'auto']\n  }\n  return ['36px', '', '']\n})\n\n/** Add the last empty row (for ui purposes only) */\nconst displayData = computed(() => {\n  if (!showAddRowPlaceholder) {\n    return data\n  }\n\n  const last = data.at(-1)\n\n  if (!last || last.name !== '' || last.value !== '') {\n    return [...data, { name: '', value: '', isDisabled: true }]\n  }\n\n  return data\n})\n</script>\n<template>\n  <DataTable\n    class=\"group/table flex-1\"\n    :columns=\"columns\">\n    <DataTableRow class=\"sr-only !block\">\n      <DataTableHeader>{{ label }} Enabled</DataTableHeader>\n      <DataTableHeader>{{ label }} Key</DataTableHeader>\n      <DataTableHeader>{{ label }} Value</DataTableHeader>\n    </DataTableRow>\n\n    <RequestTableRow\n      v-for=\"(row, index) in displayData\"\n      :key=\"index\"\n      :data=\"row\"\n      :environment=\"environment\"\n      :hasCheckboxDisabled=\"hasCheckboxDisabled\"\n      :invalidParams=\"invalidParams\"\n      :label=\"label\"\n      :showUploadButton=\"showUploadButton\"\n      @deleteRow=\"emit('deleteRow', index)\"\n      @navigate=\"(route) => emit('navigate', route)\"\n      @removeFile=\"emit('removeFile', index)\"\n      @uploadFile=\"emit('uploadFile', index)\"\n      @upsertRow=\"(payload) => emit('upsertRow', index, payload)\" />\n  </DataTable>\n</template>\n<style scoped>\n:deep(.code-input-lite__editor) {\n  background-color: transparent;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n}\n:deep(.scalar-pill:not(:last-of-type)) {\n  margin-right: 0.15em;\n}\n:deep(.scalar-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n.filemask {\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    var(--scalar-background-2) 20px\n  );\n}\n</style>\n"],"mappings":""}