@scalar/api-reference 1.38.1 → 1.39.1

package/dist/blocks/scalar-auth-selector-block/components/RequestAuthTab.vue.js

@@ -0,0 +1,288 @@
+import { defineComponent, computed, ref, onMounted, useTemplateRef, createElementBlock, openBlock, Fragment, createElementVNode, renderList, createBlock, createCommentVNode, unref, withCtx, createVNode, toDisplayString, mergeProps, createTextVNode, normalizeClass, capitalize } from "vue";
+import { DataTableRow, DataTableCell } from "@scalar/api-client/components/DataTable";
+import { useWorkspace } from "@scalar/api-client/store";
+import { ScalarMarkdownSummary } from "@scalar/components";
+import { safeLocalStorage, CLIENT_LS_KEYS } from "@scalar/helpers/object/local-storage";
+import { isDefined } from "@scalar/oas-utils/helpers";
+import { emitCustomEvent } from "@scalar/workspace-store/events";
+import { updateScheme } from "../helpers/update-scheme.js";
+import _sfc_main$2 from "./OAuth2.vue.js";
+import _sfc_main$1 from "./RequestAuthDataTableInput.vue.js";
+const _hoisted_1 = { class: "bg-b-1 text-c-2 outline-b-3 top-0 z-1 h-full w-full overflow-hidden px-3 py-1.25 text-ellipsis group-hover/auth:absolute group-hover/auth:h-auto group-hover/auth:border-b *:first:line-clamp-1 *:first:text-ellipsis group-hover/auth:*:first:line-clamp-none" };
+const _hoisted_2 = {
+  key: 0,
+  class: "flex min-h-8 border-t text-base"
+};
+const _hoisted_3 = { class: "flex h-8 max-w-full gap-2.5 overflow-x-auto px-3" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { class: "relative z-10" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RequestAuthTab",
+  props: {
+    collection: {},
+    environment: {},
+    envVariables: {},
+    layout: {},
+    persistAuth: { type: Boolean, default: false },
+    securitySchemeUids: {},
+    server: {},
+    workspace: {}
+  },
+  setup(__props) {
+    const storeContext = useWorkspace();
+    const { securitySchemes } = storeContext;
+    const security = computed(
+      () => __props.securitySchemeUids.map((uid) => ({
+        scheme: securitySchemes[uid]
+      }))
+    );
+    const activeFlow = ref("");
+    const generateLabel = (scheme) => {
+      const description = scheme.description ? `: ${scheme.description}` : "";
+      const baseLabel = `${capitalize(scheme.nameKey)}${description || `: ${scheme.type}`}`;
+      if (scheme.type === "apiKey") {
+        return `${capitalize(scheme.nameKey)}${description || `: ${scheme.in}`}`;
+      }
+      if (scheme.type === "oauth2") {
+        const firstFlow = Object.values(scheme.flows ?? {})[0];
+        return `${capitalize(scheme.nameKey)}: ${activeFlow.value ? activeFlow.value : firstFlow?.type ?? ""}${description}`;
+      }
+      if (scheme.type === "http") {
+        return `${capitalize(scheme.nameKey)}: ${scheme.scheme}${description}`;
+      }
+      return `${baseLabel}${description}`;
+    };
+    const updateScheme$1 = (uid, path, value) => {
+      updateScheme(uid, path, value, storeContext, wrapperRef.value, __props.persistAuth);
+    };
+    onMounted(() => {
+      if (!__props.persistAuth) {
+        return;
+      }
+      const auth = JSON.parse(
+        safeLocalStorage().getItem(CLIENT_LS_KEYS.AUTH) ?? "{}"
+      );
+      const dict = Object.keys(securitySchemes).reduce(
+        (acc, key) => {
+          const scheme = securitySchemes[key];
+          if (scheme) {
+            acc[scheme.nameKey] = scheme.uid;
+          }
+          return acc;
+        },
+        {}
+      );
+      Object.entries(auth).forEach(([key, entry]) => {
+        const uid = dict[key];
+        if (uid) {
+          const entries = Object.entries(entry);
+          entries.forEach(([path, value]) => {
+            emitCustomEvent(wrapperRef.value, "scalar-edit-security-scheme", {
+              uid,
+              path,
+              value
+            });
+          });
+        }
+      });
+      try {
+        const selectedSchemeUids = JSON.parse(
+          safeLocalStorage().getItem(CLIENT_LS_KEYS.SELECTED_SECURITY_SCHEMES) ?? "null"
+        );
+        const uids = selectedSchemeUids?.map((nameKeys) => {
+          if (Array.isArray(nameKeys)) {
+            return nameKeys.map((key) => dict[key]).filter(isDefined);
+          }
+          return dict[nameKeys];
+        }).filter(isDefined);
+        if (uids) {
+          emitCustomEvent(wrapperRef.value, "scalar-select-security-schemes", {
+            uids
+          });
+        }
+      } catch {
+      }
+    });
+    const dataTableInputProps = {
+      environment: __props.environment,
+      envVariables: __props.envVariables,
+      workspace: __props.workspace
+    };
+    const wrapperRef = useTemplateRef("wrapperRef");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          ref_key: "wrapperRef",
+          ref: wrapperRef
+        }, null, 512),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(security.value, ({ scheme }) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: scheme?.uid
+          }, [
+            security.value.length > 1 && scheme ? (openBlock(), createBlock(unref(DataTableRow), { key: 0 }, {
+              default: withCtx(() => [
+                createVNode(unref(DataTableCell), {
+                  "aria-label": generateLabel(scheme),
+                  class: "text-c-2 group/auth flex items-center leading-[22px] whitespace-nowrap outline-none hover:whitespace-normal"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("p", _hoisted_1, toDisplayString(generateLabel(scheme)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["aria-label"])
+              ]),
+              _: 2
+            }, 1024)) : createCommentVNode("", true),
+            scheme?.description && security.value.length <= 1 ? (openBlock(), createBlock(unref(DataTableRow), { key: 1 }, {
+              default: withCtx(() => [
+                createVNode(unref(DataTableCell), {
+                  "aria-label": scheme.description,
+                  class: "max-h-[auto]"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(ScalarMarkdownSummary), {
+                      class: "auth-description bg-b-1 text-c-2 min-w-0 flex-1 px-3 py-1.25",
+                      value: scheme.description
+                    }, null, 8, ["value"])
+                  ]),
+                  _: 2
+                }, 1032, ["aria-label"])
+              ]),
+              _: 2
+            }, 1024)) : createCommentVNode("", true),
+            scheme?.type === "http" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+              scheme.scheme === "bearer" ? (openBlock(), createBlock(unref(DataTableRow), { key: 0 }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, mergeProps({ ref_for: true }, dataTableInputProps, {
+                    containerClass: _ctx.layout === "reference" && "border-t",
+                    modelValue: scheme.token,
+                    placeholder: "Token",
+                    type: "password",
+                    "onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "token", v)
+                  }), {
+                    default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                      createTextVNode(" Bearer Token ", -1)
+                    ])]),
+                    _: 1
+                  }, 16, ["containerClass", "modelValue", "onUpdate:modelValue"])
+                ]),
+                _: 2
+              }, 1024)) : scheme?.scheme === "basic" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(DataTableRow), null, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$1, mergeProps({ ref_for: true }, dataTableInputProps, {
+                      class: "text-c-2",
+                      modelValue: scheme.username,
+                      placeholder: "janedoe",
+                      required: "",
+                      "onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "username", v)
+                    }), {
+                      default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                        createTextVNode(" Username ", -1)
+                      ])]),
+                      _: 1
+                    }, 16, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  _: 2
+                }, 1024),
+                createVNode(unref(DataTableRow), null, {
+                  default: withCtx(() => [
+                    createVNode(_sfc_main$1, mergeProps({ ref_for: true }, dataTableInputProps, {
+                      modelValue: scheme.password,
+                      placeholder: "********",
+                      type: "password",
+                      "onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "password", v)
+                    }), {
+                      default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                        createTextVNode(" Password ", -1)
+                      ])]),
+                      _: 1
+                    }, 16, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  _: 2
+                }, 1024)
+              ], 64)) : createCommentVNode("", true)
+            ], 64)) : scheme?.type === "apiKey" ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+              createVNode(unref(DataTableRow), null, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, mergeProps({ ref_for: true }, dataTableInputProps, {
+                    containerClass: _ctx.layout === "reference" && "border-t",
+                    modelValue: scheme.name,
+                    placeholder: "api-key",
+                    "onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "name", v)
+                  }), {
+                    default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                      createTextVNode(" Name ", -1)
+                    ])]),
+                    _: 1
+                  }, 16, ["containerClass", "modelValue", "onUpdate:modelValue"])
+                ]),
+                _: 2
+              }, 1024),
+              createVNode(unref(DataTableRow), null, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, mergeProps({ ref_for: true }, dataTableInputProps, {
+                    modelValue: scheme.value,
+                    placeholder: "QUxMIFlPVVIgQkFTRSBBUkUgQkVMT05HIFRPIFVT",
+                    type: "password",
+                    "onUpdate:modelValue": (v) => updateScheme$1(scheme.uid, "value", v)
+                  }), {
+                    default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                      createTextVNode(" Value ", -1)
+                    ])]),
+                    _: 1
+                  }, 16, ["modelValue", "onUpdate:modelValue"])
+                ]),
+                _: 2
+              }, 1024)
+            ], 64)) : scheme?.type === "oauth2" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+              createVNode(unref(DataTableRow), null, {
+                default: withCtx(() => [
+                  Object.keys(scheme.flows).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                    createElementVNode("div", _hoisted_3, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(scheme?.flows, (_, key, ind) => {
+                        return openBlock(), createElementBlock("button", {
+                          key,
+                          class: normalizeClass(["floating-bg text-c-3 relative cursor-pointer border-b-[1px] border-transparent py-1 text-base font-medium", {
+                            "!text-c-1 !rounded-none border-b-[1px] !border-current": _ctx.layout !== "reference" && (activeFlow.value === key || ind === 0 && !activeFlow.value),
+                            "!text-c-1 !rounded-none border-b-[1px] !border-current opacity-100": _ctx.layout === "reference" && (activeFlow.value === key || ind === 0 && !activeFlow.value)
+                          }]),
+                          type: "button",
+                          onClick: ($event) => activeFlow.value = key
+                        }, [
+                          createElementVNode("span", _hoisted_5, toDisplayString(key), 1)
+                        ], 10, _hoisted_4);
+                      }), 128))
+                    ])
+                  ])) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1024),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(scheme?.flows, (flow, key, ind) => {
+                return openBlock(), createElementBlock(Fragment, { key }, [
+                  activeFlow.value === key || ind === 0 && !activeFlow.value ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                    key: 0,
+                    ref_for: true
+                  }, dataTableInputProps, {
+                    collection: _ctx.collection,
+                    flow,
+                    persistAuth: _ctx.persistAuth,
+                    scheme,
+                    server: _ctx.server,
+                    workspace: _ctx.workspace
+                  }), null, 16, ["collection", "flow", "persistAuth", "scheme", "server", "workspace"])) : createCommentVNode("", true)
+                ], 64);
+              }), 128))
+            ], 64)) : scheme?.type === "openIdConnect" ? (openBlock(), createElementBlock("div", {
+              key: 5,
+              class: normalizeClass(["text-c-3 bg-b-1 flex min-h-[calc(4rem+1px)] items-center justify-center border-t border-b-0 px-4 text-base", { "rounded-b-lg": _ctx.layout === "reference" }])
+            }, " Coming soon ", 2)) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/blocks/scalar-auth-selector-block/components/RequestAuthTab.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./RequestAuthTab.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/blocks/scalar-auth-selector-block/helpers/filter-security-requirements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-security-requirements.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-auth-selector-block/helpers/filter-security-requirements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAEjF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GACrC,sBAAsB,UAAU,CAAC,UAAU,CAAC,EAC5C,6BAA4B,UAAU,CAAC,4BAA4B,CAAM,EACzE,kBAAiB,MAAM,CAAC,MAAM,EAAE,cAAc,CAAM,KACnD,cAAc,EA0DhB,CAAA"}

package/dist/blocks/scalar-auth-selector-block/helpers/update-scheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-scheme.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-auth-selector-block/helpers/update-scheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAG9D,6CAA6C;AAC7C,MAAM,MAAM,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,cAAc,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAEvH,mDAAmD;AACnD,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,cAAc,CAAC,EAC1F,KAAK,CAAC,EACN,MAAM,CAAC,EACP,OAAO,WAAW,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAChD,qBAAqB,cAAc,EACnC,KAAK,WAAW,GAAG,IAAI,EACvB,qBAAmB,SAyBpB,CAAA"}

package/dist/blocks/scalar-auth-selector-block/helpers/update-scheme.js

@@ -0,0 +1,26 @@
+import { safeLocalStorage, CLIENT_LS_KEYS } from "@scalar/helpers/object/local-storage";
+import { emitCustomEvent } from "@scalar/workspace-store/events";
+const updateScheme = (uid, path, value, { securitySchemes }, el, persistAuth = false) => {
+  emitCustomEvent(el, "scalar-edit-security-scheme", {
+    uid,
+    path,
+    value
+  });
+  if (!persistAuth) {
+    return;
+  }
+  try {
+    const auth = JSON.parse(safeLocalStorage().getItem(CLIENT_LS_KEYS.AUTH) ?? "{}");
+    const scheme = securitySchemes[uid];
+    if (auth && scheme?.nameKey) {
+      const nameScheme = auth[scheme.nameKey] ||= {};
+      nameScheme[path] = value;
+      safeLocalStorage().setItem(CLIENT_LS_KEYS.AUTH, JSON.stringify(auth));
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+export {
+  updateScheme
+};

package/dist/blocks/scalar-auth-selector-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/scalar-auth-selector-block/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/{v2/blocks → blocks}/scalar-client-selector-block/components/ClientDropdown.vue.d.ts

@@ -7,8 +7,6 @@ type __VLS_Props = {
     xSelectedClient?: AvailableClients[number];
     /** List of featured clients */
     featuredClients: ClientOption[];
-    /** The id of the tab panel that contains for the non featured clients */
-    morePanel?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/blocks/scalar-client-selector-block/components/ClientDropdown.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientDropdown.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientDropdown.vue"],"names":[],"mappings":"AAuPA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,oDAAoD,CAAA;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAY,MAAM,wBAAwB,CAAA;AAMxE,KAAK,WAAW,GAAG;IACjB,qBAAqB;IACrB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,eAAe,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC1C,+BAA+B;IAC/B,eAAe,EAAE,YAAY,EAAE,CAAA;CAChC,CAAC;;AAgPF,wBAMG"}

package/dist/blocks/scalar-client-selector-block/components/ClientDropdown.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./ClientDropdown.vue2.js";
+/* empty css                    */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const ClientDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b7785507"]]);
+export {
+  ClientDropdown as default
+};

package/dist/blocks/scalar-client-selector-block/components/ClientDropdown.vue2.js

@@ -0,0 +1,125 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, createVNode, Fragment, renderList, createBlock, unref, normalizeClass, withCtx, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { Tab } from "@headlessui/vue";
+import { findClient } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { ScalarIcon, ScalarCombobox } from "@scalar/components";
+import { freezeElement } from "@scalar/helpers/dom/freeze-element";
+import { emitCustomEvent } from "@scalar/workspace-store/events";
+import { isFeaturedClient } from "../helpers/featured-clients.js";
+const _hoisted_1 = { class: "client-libraries-text" };
+const _hoisted_2 = {
+  "aria-hidden": "true",
+  class: "client-libraries-icon__more"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "client-libraries-icon",
+  height: "50",
+  role: "presentation",
+  viewBox: "0 0 50 50",
+  width: "50",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "client-libraries-text client-libraries-text-more"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ClientDropdown",
+  props: {
+    clientOptions: {},
+    xSelectedClient: {},
+    featuredClients: {}
+  },
+  setup(__props) {
+    const containerRef = ref();
+    const getIconByLanguageKey = (targetKey) => `programming-language-${targetKey === "js" ? "javascript" : targetKey}`;
+    const selectClient = (option) => {
+      if (!containerRef.value) {
+        return;
+      }
+      const unfreeze = freezeElement(containerRef.value);
+      setTimeout(() => {
+        unfreeze();
+      }, 300);
+      emitCustomEvent(
+        containerRef.value,
+        "scalar-update-selected-client",
+        option.id
+      );
+    };
+    const selectedTargetKey = computed(
+      () => __props.xSelectedClient?.split("/")[0]
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "client-libraries-content"
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.featuredClients, (featuredClient) => {
+          return openBlock(), createBlock(unref(Tab), {
+            key: featuredClient.clientKey,
+            class: normalizeClass(["client-libraries rendered-code-sdks", {
+              "client-libraries__active": featuredClient.id === _ctx.xSelectedClient
+            }])
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`)
+              }, [
+                createVNode(unref(ScalarIcon), {
+                  class: "client-libraries-icon",
+                  icon: getIconByLanguageKey(featuredClient.targetKey)
+                }, null, 8, ["icon"])
+              ], 2),
+              createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)
+            ]),
+            _: 2
+          }, 1032, ["class"]);
+        }), 128)),
+        createVNode(unref(ScalarCombobox), {
+          modelValue: unref(findClient)(_ctx.clientOptions, _ctx.xSelectedClient),
+          options: _ctx.clientOptions,
+          placement: "bottom-end",
+          teleport: "",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
+        }, {
+          default: withCtx(() => [
+            createElementVNode("button", {
+              class: normalizeClass(["client-libraries client-libraries__select", {
+                "client-libraries__active": _ctx.xSelectedClient && !unref(isFeaturedClient)(_ctx.xSelectedClient)
+              }]),
+              type: "button"
+            }, [
+              createElementVNode("div", _hoisted_2, [
+                _ctx.xSelectedClient && !unref(isFeaturedClient)(_ctx.xSelectedClient) ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
+                }, [
+                  selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
+                    key: 0,
+                    class: "client-libraries-icon",
+                    icon: getIconByLanguageKey(selectedTargetKey.value)
+                  }, null, 8, ["icon"])) : createCommentVNode("", true)
+                ], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [
+                  createElementVNode("g", {
+                    fill: "currentColor",
+                    "fill-rule": "nonzero"
+                  }, [
+                    createElementVNode("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })
+                  ], -1)
+                ])]))
+              ]),
+              _ctx.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, " More ")) : createCommentVNode("", true),
+              _cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Select from all clients", -1))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "options"])
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/{v2/blocks → blocks}/scalar-client-selector-block/components/ClientSelector.vue.d.ts

@@ -10,7 +10,7 @@ type __VLS_Props = {
     xSelectedClient?: AvailableClients[number];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    selectedClientOption: import("vue").ComputedRef<import("@scalar/api-client/v2/blocks/operation-code-sample").ClientOption>;
+    selectedClientOption: import("vue").ComputedRef<import("@scalar/api-client/v2/blocks/operation-code-sample").ClientOption | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ClientSelector.vue.d.ts.map

package/dist/blocks/scalar-client-selector-block/components/ClientSelector.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientSelector.vue.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/components/ClientSelector.vue"],"names":[],"mappings":"AA2MA,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,oDAAoD,CAAA;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAExD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,+EAA+E,CAAA;AAU3H,KAAK,WAAW,GAAG;IACjB,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC,2BAA2B,CAAC,CAAA;IAC5E,yDAAyD;IACzD,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,yCAAyC;IACzC,eAAe,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;CAC3C,CAAC;;;;AAuRF,wBAOG"}

package/dist/blocks/scalar-client-selector-block/components/ClientSelector.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./ClientSelector.vue2.js";
+/* empty css                    */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+const ClientSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-abfa446f"]]);
+export {
+  ClientSelector as default
+};

package/dist/blocks/scalar-client-selector-block/components/ClientSelector.vue2.js

@@ -0,0 +1,141 @@
+import { defineComponent, useId, computed, useTemplateRef, createElementBlock, createCommentVNode, openBlock, createVNode, unref, withCtx, createElementVNode, Fragment, normalizeClass, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
+import { TabGroup, TabList, TabPanels, TabPanel } from "@headlessui/vue";
+import { DEFAULT_CLIENT } from "@scalar/api-client/v2/blocks/operation-code-sample";
+import { ScalarMarkdown, ScalarCodeBlock } from "@scalar/components";
+import { emitCustomEvent } from "@scalar/workspace-store/events";
+import { getFeaturedClients, isFeaturedClient } from "../helpers/featured-clients.js";
+import ClientDropdown from "./ClientDropdown.vue.js";
+const _hoisted_1 = {
+  key: 0,
+  ref: "wrapper-ref"
+};
+const _hoisted_2 = ["id"];
+const _hoisted_3 = {
+  key: 1,
+  class: "selected-client card-footer border-t-0 p-0",
+  role: "tabpanel",
+  tabindex: "1"
+};
+const _hoisted_4 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ClientSelector",
+  props: {
+    xScalarSdkInstallation: {},
+    clientOptions: {},
+    xSelectedClient: { default: () => DEFAULT_CLIENT }
+  },
+  setup(__props, { expose: __expose }) {
+    const headingId = useId();
+    const morePanel = useId();
+    const selectedClientOption = computed(
+      () => __props.clientOptions.flatMap(
+        (option) => option.options.find((option2) => option2.id === __props.xSelectedClient) ?? []
+      )[0]
+    );
+    const featuredClients = computed(() => getFeaturedClients(__props.clientOptions));
+    const tabIndex = computed(
+      () => featuredClients.value.findIndex(
+        (featuredClient) => __props.xSelectedClient === featuredClient.id
+      )
+    );
+    const wrapper = useTemplateRef("wrapper-ref");
+    const onTabSelect = (i) => {
+      const client = featuredClients.value[i];
+      if (!client || !wrapper.value) {
+        return;
+      }
+      emitCustomEvent(wrapper.value, "scalar-update-selected-client", client.id);
+    };
+    const installationInstructions = computed(() => {
+      if (!Array.isArray(__props.xScalarSdkInstallation) || !__props.xScalarSdkInstallation?.length) {
+        return void 0;
+      }
+      const instruction = __props.xScalarSdkInstallation.find((instruction2) => {
+        const targetKey = __props.xSelectedClient?.split("/")[0]?.toLowerCase();
+        return instruction2.lang.toLowerCase() === targetKey;
+      });
+      if (!instruction) {
+        return void 0;
+      }
+      return instruction;
+    });
+    __expose({
+      selectedClientOption
+    });
+    return (_ctx, _cache) => {
+      return _ctx.clientOptions.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(TabGroup), {
+          manual: "",
+          selectedIndex: tabIndex.value,
+          onChange: onTabSelect
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              id: unref(headingId),
+              class: "client-libraries-heading"
+            }, " Client Libraries ", 8, _hoisted_2),
+            createVNode(unref(TabList), {
+              "aria-labelledby": unref(headingId),
+              class: "client-libraries-list"
+            }, {
+              default: withCtx(() => [
+                createVNode(ClientDropdown, {
+                  clientOptions: _ctx.clientOptions,
+                  featuredClients: featuredClients.value,
+                  morePanel: unref(morePanel),
+                  xSelectedClient: _ctx.xSelectedClient
+                }, null, 8, ["clientOptions", "featuredClients", "morePanel", "xSelectedClient"])
+              ]),
+              _: 1
+            }, 8, ["aria-labelledby"]),
+            createVNode(unref(TabPanels), null, {
+              default: withCtx(() => [
+                installationInstructions.value?.source || installationInstructions.value?.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  installationInstructions.value.description ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass(["selected-client card-footer -outline-offset-2", installationInstructions.value.source && "rounded-b-none"]),
+                    role: "tabpanel",
+                    tabindex: "0"
+                  }, [
+                    createVNode(unref(ScalarMarkdown), {
+                      value: installationInstructions.value.description
+                    }, null, 8, ["value"])
+                  ], 2)) : createCommentVNode("", true),
+                  installationInstructions.value.source ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    createVNode(unref(ScalarCodeBlock), {
+                      class: "rounded-t-none rounded-b-lg px-3 py-2 -outline-offset-1 has-focus:outline",
+                      content: installationInstructions.value.source,
+                      copy: true,
+                      lang: "shell"
+                    }, null, 8, ["content"])
+                  ])) : createCommentVNode("", true)
+                ], 64)) : unref(isFeaturedClient)(_ctx.xSelectedClient) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(featuredClients.value, (client) => {
+                  return openBlock(), createBlock(unref(TabPanel), {
+                    key: client.id,
+                    class: "selected-client card-footer -outline-offset-2"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(client.title), 1)
+                    ]),
+                    _: 2
+                  }, 1024);
+                }), 128)) : (openBlock(), createElementBlock("div", {
+                  key: 2,
+                  id: unref(morePanel),
+                  class: "selected-client card-footer -outline-offset-2",
+                  role: "tabpanel",
+                  tabindex: "0"
+                }, toDisplayString(selectedClientOption.value?.title), 9, _hoisted_4))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["selectedIndex"])
+      ], 512)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/blocks/scalar-client-selector-block/helpers/featured-clients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"featured-clients.d.ts","sourceRoot":"","sources":["../../../../src/blocks/scalar-client-selector-block/helpers/featured-clients.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACzG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAWxD,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,GAC3B,UAAU,gBAAgB,CAAC,MAAM,CAAC,GAAG,SAAS,EAC9C,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,YACgC,CAAA;AAEhG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,eAAe,iBAAiB,EAAE,EAClC,kBAAiB,gBAAgB,CAAC,MAAM,CAAC,EAAqB,KAC7D,YAAY,EAgBd,CAAA"}