api-render-ui 1.0.7 → 1.0.8

package/dist/index.cjs

@@ -0,0 +1,1044 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ApiRenderer: () => ApiRenderer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/inlined-styles.ts
+var GLOBAL_STYLES = `.codigma-apioperatorlist {
+    align-items: flex-start;
+    background: white;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 5px;
+    height: 100%;
+    justify-content: flex-start;
+    width: 100%
+}
+.codigma-apioperator {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    gap: 10px;
+    /* border-radius: 8px; */
+    height: 32px;
+    justify-content: flex-start
+}
+.codigma-apioperator:nth-child(even) {
+  background-color: rgb(235, 239, 244);
+}
+.codigma-apioperator:nth-child(odd) {
+  background-color: rgb(250, 246, 246);
+}
+
+.codigma-apioperator:hover {
+    cursor: pointer;
+}
+.codigma-apioperator:active {
+    background: rgb(206, 216, 231);
+}
+.codigma-method {
+    align-items: center;
+    display: flex;
+    gap: 5px;
+    justify-content: center;
+    width: 64px
+}
+.codigma-methodtype {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    justify-content: center
+}
+.codigma-get {
+    color: var(--Labels---Vibrant---Controls-Primary-\u221A, #404040);
+    word-wrap: break-word
+}
+.codigma-requrl {
+    color: black;
+    flex: 1 1 0;
+    word-wrap: break-word
+}
+/**********************apiunit css style*************************/
+.codigma-apiunit {
+    align-items: flex-start;
+    background: white;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    height: 100%;
+    justify-content: flex-start;
+    width: 100%
+}
+.codigma-apiunit-apioperator {
+    align-items: center;
+    align-self: stretch;
+    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    border-top: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    display: inline-flex;
+    gap: 10px;
+    height: 48px;
+    justify-content: flex-start
+}
+.codigma-apiunit-method {
+    align-items: center;
+    display: flex;
+    gap: 5px;
+    height: 48px;
+    justify-content: center;
+    width: 100px
+}
+.codigma-apiunit-methodtype {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    justify-content: center
+}
+.codigma-apiunit-post {
+    color: var(--Labels---Vibrant---Controls-Primary-\u221A, #404040);
+    word-wrap: break-word
+}
+.codigma-apiunit-requrl {
+    color: black;
+    flex: 1 1 0;
+    word-wrap: break-word;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    border-bottom: 1px solid black;
+}
+.codigma-apiunit-send-button {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    height: 32px;
+    justify-content: center;
+    width: 88px
+}
+.codigma-apiunit-send {
+    color: black;
+    word-wrap: break-word
+}
+.codigma-apiunit-send-button:hover {
+    cursor: pointer;
+}
+.codigma-apiunit-send-button:active {
+    background-color: gray;
+}
+
+.codigma-apiunit-reqcontent {
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    gap: 5px;
+    justify-content: flex-start;
+    padding-left: 5px;
+}
+.codigma-apiunit-paramters-section {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    flex: 1 1 0;
+    justify-content: flex-start
+}
+.codigma-apiunit-parameters-cnr {
+    align-items: center;
+    background: white;
+    display: flex;
+    height: 42px;
+    justify-content: space-between;
+    width: 122px
+}
+.codigma-apiunit-parakeyvalues {
+    align-items: flex-start;
+    align-self: stretch;
+    background: white;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    overflow: hidden;
+    padding: 10px
+}
+.codigma-apiunit-keyvalue {
+    align-items: center;
+    display: inline-flex;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start
+}
+.codigma-apiunit-valuetext {
+    align-self: stretch;
+    background: white;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    padding: 10px;
+    width: 161px
+}
+/* .codigma-apiunit-keyvalue {
+    align-items: center;
+    display: inline-flex;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    width: 211px
+} */
+.codigma-apiunit-request-body-section {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    height: 114px;
+    justify-content: flex-start;
+    padding-right: 5px
+}
+.codigma-apiunit-parakeyvalues {
+    align-items: flex-start;
+    align-self: stretch;
+    background: white;
+    display: flex;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    outline-offset: -1px;
+    outline: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    overflow: hidden;
+    padding: 10px
+}
+.codigma-apiunit-reqresponse {
+    align-items: flex-start;
+    align-self: stretch;
+    background: white;
+    border-top: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    padding-left: 5px;
+    padding-right: 5px
+}
+.codigma-apiunit-responsedesc {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    justify-content: space-between;
+    padding-right: 32px
+}
+.codigma-apiunit-responsetitle {
+    align-items: center;
+    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    display: flex;
+    height: 42px;
+    justify-content: space-between;
+    width: 122px
+}
+.codigma-apiunit-response-cnr {
+    align-items: center;
+    align-self: stretch;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    padding-top: 2px;
+    width: 122px
+}
+.codigma-apiunit-responsebody {
+    position: relative;
+    align-self: stretch;
+    flex: 1 1 0;
+    min-height: 5rem;
+    /* padding: 2px */
+}`;
+
+// src/api-render-ui.ts
+var ApiRenderer = class {
+  options;
+  container;
+  constructor(options) {
+    this.options = Object.assign({
+      mountPoint: document?.body,
+      // 默认挂载到body
+      className: "Apioperatorlist codigma-apioperatorlist",
+      layerName: "apioperatorlist"
+    }, options);
+    this.container = null;
+  }
+  render(apiSpec, renderUnit = false) {
+    const appendInlineStyle = (text) => {
+      const styleEl = document.createElement("style");
+      styleEl.textContent = text;
+      document.head.appendChild(styleEl);
+    };
+    appendInlineStyle(GLOBAL_STYLES);
+    const elementMap = /* @__PURE__ */ new Map();
+    const mountElement = typeof this.options.mountPoint === "string" ? document.querySelector(this.options.mountPoint) : this.options.mountPoint;
+    if (!mountElement) {
+      throw new Error("Invalid mount point specified");
+    }
+    if (apiSpec["openapi"] && apiSpec["openapi"].startsWith("3.") || apiSpec["swagger"] && apiSpec["swagger"].startsWith("2.")) {
+      const countApi = countOpenAPI(apiSpec);
+      const apiOperatorList = parseOpenAPI(apiSpec);
+      if (countApi == 1 && renderUnit) {
+        this.container = createApiUnit(apiOperatorList[0]);
+      } else {
+        this.container = document.createElement("div");
+        this.container.setAttribute("data-layer", this.options.layerName);
+        this.container.className = this.options.className;
+        apiOperatorList.forEach((apiOperator) => {
+          const reqOperator = document.createElement("div");
+          reqOperator.setAttribute("data-layer", "apioperator");
+          reqOperator.className = "Apioperator codigma-apioperator";
+          const methodContainer = document.createElement("div");
+          methodContainer.setAttribute("data-layer", "method");
+          methodContainer.className = "Method codigma-method";
+          const methodType = document.createElement("div");
+          methodType.setAttribute("data-layer", "methodtype");
+          methodType.className = "Methodtype codigma-methodtype";
+          const methodValue = document.createElement("div");
+          methodValue.setAttribute("data-layer", apiOperator.method.toLowerCase());
+          methodValue.className = `${apiOperator.method} codigma-${apiOperator.method.toLowerCase()}`;
+          methodValue.textContent = apiOperator.method;
+          methodType.appendChild(methodValue);
+          methodContainer.appendChild(methodType);
+          reqOperator.appendChild(methodContainer);
+          const urlElement = document.createElement("div");
+          urlElement.setAttribute("data-layer", "requrl");
+          urlElement.className = "Requrl codigma-requrl";
+          urlElement.textContent = apiOperator.url;
+          reqOperator.appendChild(urlElement);
+          this.container.appendChild(reqOperator);
+          reqOperator.addEventListener("click", renderApiUnit(apiOperator, this.container, elementMap));
+        });
+      }
+    } else {
+      const apiOperator = {
+        method: "get",
+        url: "/full/info",
+        rawApiInfo: null,
+        requestBody: null,
+        response: {},
+        auths: [
+          {
+            type: "No Auth"
+          },
+          {
+            type: "Basic Auth",
+            parameters: [
+              {
+                name: "userName",
+                value: ""
+              },
+              {
+                name: "password",
+                value: ""
+              }
+            ]
+          }
+        ]
+      };
+      this.container = createApiUnit(apiSpec);
+    }
+    mountElement.innerHTML = "";
+    mountElement.appendChild(this.container);
+  }
+};
+function renderApiUnit(apiOperator, containerRef, elementMap) {
+  return function(evt) {
+    console.log("\u70B9\u51FB\u7684API\u64CD\u4F5C\uFF1A");
+    console.log("\u65B9\u6CD5:", apiOperator.method);
+    console.log("URL:", apiOperator.url);
+    console.log("------------------------");
+    const currentTarget = evt.currentTarget;
+    if (elementMap.has(currentTarget)) {
+      const newElement = elementMap.get(currentTarget);
+      newElement.remove();
+      elementMap.delete(currentTarget);
+      return;
+    }
+    const apiContainer = createApiUnit(apiOperator);
+    if (currentTarget.nextSibling) {
+      containerRef.insertBefore(apiContainer, currentTarget.nextSibling);
+    } else {
+      containerRef.appendChild(apiContainer);
+    }
+    elementMap.set(currentTarget, apiContainer);
+  };
+}
+function createApiUnit(apiOperator) {
+  const apiContainer = document.createElement("div");
+  apiContainer.setAttribute("data-layer", "apiunit");
+  apiContainer.className = "Requnit codigma-apiunit";
+  const responseSection = createSectionResponse(apiOperator);
+  apiOperator._responseSectionRef = responseSection;
+  const reqOperator = createReqOperator(apiOperator);
+  apiContainer.appendChild(reqOperator);
+  const reqContent = document.createElement("div");
+  reqContent.setAttribute("data-layer", "reqcontent");
+  reqContent.className = "Reqcontent codigma-apiunit-reqcontent";
+  const paramSection = createParamSection(apiOperator);
+  const headerSection = createSectionHeader(apiOperator);
+  const authSection = createSectionAuth(apiOperator);
+  const bodySection = createSectionRequestBody(apiOperator.requestBody);
+  reqContent.append(paramSection, headerSection, authSection, bodySection);
+  apiContainer.appendChild(reqContent);
+  apiContainer.appendChild(responseSection);
+  return apiContainer;
+}
+function createReqOperator(apiOperator) {
+  const reqOperator = document.createElement("div");
+  reqOperator.setAttribute("data-layer", "apioperator");
+  reqOperator.className = "Reqoperator codigma-apiunit-apioperator";
+  const methodType = document.createElement("div");
+  methodType.setAttribute("data-layer", "method");
+  methodType.className = "Method codigma-apiunit-method";
+  const methodTypeInner = document.createElement("div");
+  methodTypeInner.setAttribute("data-layer", "methodtype");
+  methodTypeInner.className = "Methodtype codigma-apiunit-methodtype";
+  methodTypeInner.textContent = apiOperator.method.toUpperCase();
+  methodType.appendChild(methodTypeInner);
+  const methodOpt = document.createElement("div");
+  methodOpt.setAttribute("data-svg-wrapper", "");
+  methodOpt.setAttribute("data-layer", "methodopt");
+  methodOpt.className = "Methodopt";
+  const svg = createSvg();
+  methodOpt.appendChild(svg);
+  methodType.appendChild(methodOpt);
+  reqOperator.appendChild(methodType);
+  const reqUrl = createInputElement();
+  reqUrl.setAttribute("data-layer", "requrl");
+  reqUrl.className = "Requrl codigma-apiunit-requrl";
+  reqUrl.value = apiOperator.url;
+  reqUrl.addEventListener("input", (e) => {
+    console.log("\u5F53\u524D\u503C:", e.target.value);
+    apiOperator.url = e.target.value;
+  });
+  reqOperator.appendChild(reqUrl);
+  const sendButton = document.createElement("div");
+  sendButton.setAttribute("data-layer", "send-button");
+  sendButton.className = "SendButton codigma-apiunit-send-button";
+  const sendText = document.createElement("div");
+  sendText.setAttribute("data-layer", "Send");
+  sendText.className = "Send codigma-apiunit-send";
+  sendText.textContent = "Send";
+  sendButton.appendChild(sendText);
+  sendButton.addEventListener("click", (e) => {
+    console.log("\u5F53\u524D\u503C:", e.target.value);
+    const respRef = apiOperator._responseSectionRef || null;
+    sendRequest(apiOperator, respRef);
+  });
+  reqOperator.appendChild(sendButton);
+  return reqOperator;
+}
+function createParamSection(apiOperator) {
+  const paramSection = document.createElement("div");
+  paramSection.setAttribute("data-layer", "paramters-section");
+  paramSection.className = "codigma-apiunit-paramters-section";
+  const paramCnr = document.createElement("div");
+  paramCnr.setAttribute("data-layer", "parameters-cnr");
+  paramCnr.className = "codigma-apiunit-parameters-cnr";
+  const paramText = document.createElement("div");
+  paramText.setAttribute("data-layer", "parameters");
+  paramText.className = "codigma-apiunit-send";
+  paramText.textContent = "Parameters";
+  paramCnr.appendChild(paramText);
+  paramSection.appendChild(paramCnr);
+  const paramValues = document.createElement("div");
+  paramValues.setAttribute("data-layer", "paraKeyValues");
+  paramValues.className = "Parakeyvalues codigma-apiunit-parakeyvalues";
+  let parameters = apiOperator.rawApiInfo.parameters || [];
+  const parameterRows = parameters.filter((parameter) => isPathOrQueryParam(parameter)).map((parameter) => createRow(parameter));
+  paramValues.append(...parameterRows);
+  paramSection.append(paramCnr, paramValues);
+  return paramSection;
+}
+function createSectionHeader(apiOperator) {
+  const headerSection = document.createElement("div");
+  headerSection.setAttribute("data-layer", "headers-section");
+  headerSection.className = "codigma-apiunit-paramters-section";
+  const headerCnr = document.createElement("div");
+  headerCnr.setAttribute("data-layer", "headers-cnr");
+  headerCnr.className = "codigma-apiunit-parameters-cnr";
+  const headerText = document.createElement("div");
+  headerText.setAttribute("data-layer", "headers");
+  headerText.className = "codigma-apiunit-send";
+  headerText.textContent = "Headers";
+  headerCnr.appendChild(headerText);
+  headerSection.appendChild(headerCnr);
+  const headerValues = document.createElement("div");
+  headerValues.setAttribute("data-layer", "paraKeyValues");
+  headerValues.className = "Parakeyvalues codigma-apiunit-parakeyvalues";
+  let parameters = apiOperator.rawApiInfo.parameters || [];
+  const headerRows = parameters.filter((parameter) => isHeaderParam(parameter)).map((parameter) => createRow(parameter));
+  headerValues.append(...headerRows);
+  headerSection.append(headerCnr, headerValues);
+  return headerSection;
+}
+function createSectionAuth(apiOperator) {
+  const authSection = document.createElement("div");
+  authSection.setAttribute("data-layer", "authorization-section");
+  authSection.className = "AuthorizationSection codigma-apiunit-paramters-section";
+  const authCnr = document.createElement("div");
+  authCnr.setAttribute("data-layer", "authorization-cnr");
+  authCnr.className = "AuthorizationCnr codigma-apiunit-parameters-cnr";
+  const authText = document.createElement("div");
+  authText.setAttribute("data-layer", "authorization");
+  authText.className = "Authorization codigma-apiunit-send";
+  authText.textContent = "Authorization";
+  authCnr.appendChild(authText);
+  authSection.appendChild(authCnr);
+  const authValues = document.createElement("div");
+  authValues.setAttribute("data-layer", "paraKeyValues");
+  authValues.className = "Parakeyvalues codigma-apiunit-parakeyvalues";
+  let auths = apiOperator.auths || [];
+  const authTypeRow = createSelectRow(auths, authValues);
+  if (auths.length > 0) {
+    let parameters = apiOperator.auths[0].parameters || [];
+    const authRows = parameters.map((parameter) => createRow(parameter));
+    authValues.append(authTypeRow, ...authRows);
+  }
+  authSection.append(authCnr, authValues);
+  return authSection;
+}
+function createSectionRequestBody(requestBody) {
+  const bodySection = document.createElement("div");
+  bodySection.setAttribute("data-layer", "request-body-section");
+  bodySection.className = "RequestBodySection codigma-apiunit-request-body-section";
+  const bodyCnr = document.createElement("div");
+  bodyCnr.setAttribute("data-layer", "body-cnr");
+  bodyCnr.className = "BodyCnr codigma-apiunit-parameters-cnr";
+  const bodyText = document.createElement("div");
+  bodyText.setAttribute("data-layer", "body");
+  bodyText.className = "Body codigma-apiunit-send";
+  bodyText.textContent = "Body";
+  bodyCnr.appendChild(bodyText);
+  bodySection.appendChild(bodyCnr);
+  const bodyValue = document.createElement("textarea");
+  bodyValue.setAttribute("data-layer", "bodyTextValue");
+  bodyValue.className = "Id0CategoryId0NameNamePhotourlsTagsId0NameStatusAvailable codigma-apiunit-parakeyvalues";
+  bodyValue.value = JSON.stringify(requestBody);
+  bodySection.appendChild(bodyValue);
+  return bodySection;
+}
+function createSectionResponse(apiOperator) {
+  const responseSection = document.createElement("div");
+  responseSection.setAttribute("data-layer", "reqresponse");
+  responseSection.className = "Reqresponse codigma-apiunit-reqresponse";
+  const responseDesc = document.createElement("div");
+  responseDesc.setAttribute("data-layer", "responsedesc");
+  responseDesc.className = "Responsedesc codigma-apiunit-responsedesc";
+  const responseTitle = document.createElement("div");
+  responseTitle.setAttribute("data-layer", "responsetitle");
+  responseTitle.className = "Responsetitle codigma-apiunit-responsetitle";
+  const responseCnr = document.createElement("div");
+  responseCnr.setAttribute("data-layer", "response-cnr");
+  responseCnr.className = "ResponseCnr codigma-apiunit-response-cnr";
+  const responseText = document.createElement("div");
+  responseText.setAttribute("data-layer", "response");
+  responseText.className = "Response codigma-apiunit-send";
+  responseText.textContent = "Response";
+  responseCnr.appendChild(responseText);
+  responseTitle.appendChild(responseCnr);
+  const timeStatusElement = createTimeStatusElement(apiOperator);
+  responseDesc.append(responseTitle, timeStatusElement);
+  const responseBody = document.createElement("div");
+  responseBody.setAttribute("data-layer", "responsebody");
+  responseBody.className = "Responsebody codigma-apiunit-responsebody";
+  responseSection.append(responseDesc, responseBody);
+  return responseSection;
+}
+function createTimeStatusElement(apiOperator) {
+  const timeStatus = document.createElement("div");
+  timeStatus.setAttribute("data-layer", "TimeStatus");
+  timeStatus.className = "TimeStatus0 codigma-apiunit-send";
+  updateTimeStatus(timeStatus, apiOperator);
+  return timeStatus;
+}
+function createRow(parameter) {
+  const petIdRow = document.createElement("div");
+  petIdRow.setAttribute("data-layer", "keyValue");
+  petIdRow.className = "Keyvalue codigma-apiunit-keyvalue";
+  const petIdLabel = document.createElement("div");
+  petIdLabel.setAttribute("data-layer", parameter["name"]);
+  petIdLabel.className = parameter["name"] + " codigma-apiunit-send";
+  petIdLabel.textContent = parameter["name"] + ":";
+  const petIdValue = createInputElement();
+  petIdValue.setAttribute("data-layer", "valueText");
+  petIdValue.className = "Valuetext codigma-apiunit-valuetext";
+  petIdValue.value = parameter["value"] || "";
+  petIdValue.addEventListener("input", (e) => {
+    console.log("\u5F53\u524D\u503C:", e.target.value);
+    parameter["value"] = e.target.value;
+  });
+  petIdRow.append(petIdLabel, petIdValue);
+  return petIdRow;
+}
+function createInputElement() {
+  const inputText = document.createElement("input");
+  inputText.setAttribute("type", "text");
+  inputText.setAttribute("name", "text-input");
+  inputText.setAttribute("label", "text-input");
+  inputText.setAttribute("autocomplete", "off");
+  return inputText;
+}
+function createSelectRow(auths, authValues) {
+  const container = document.createElement("div");
+  container.setAttribute("data-layer", "keyValue");
+  container.className = "Keyvalue codigma-apiunit-keyvalue";
+  const typeLabel = document.createElement("div");
+  typeLabel.setAttribute("data-layer", "type");
+  typeLabel.className = "type codigma-apiunit-send";
+  typeLabel.textContent = "Type:";
+  const selectElement = document.createElement("select");
+  selectElement.name = "text-select";
+  selectElement.label = "text-select";
+  selectElement.setAttribute("data-layer", "valueText");
+  auths.forEach((auth) => {
+    const option1 = document.createElement("option");
+    option1.value = auth["type"];
+    option1.textContent = auth["type"];
+    selectElement.appendChild(option1);
+  });
+  selectElement.addEventListener("change", function(event) {
+    authValues && Array.from(authValues.children).slice(1).forEach((el) => el.remove());
+    const auth = auths[event.target.selectedIndex];
+    let parameters = auth.parameters || [];
+    const authRows = parameters.map((parameter) => createRow(parameter));
+    authValues.append(...authRows);
+  });
+  container.appendChild(typeLabel);
+  container.appendChild(selectElement);
+  return container;
+}
+function isPathOrQueryParam(param) {
+  return param.in === "path" || param.in === "query";
+}
+function isHeaderParam(param) {
+  return param.in === "header";
+}
+function sendRequest(apiOperator, responseSectionRef) {
+  if (!responseSectionRef) {
+    console.error("sendRequest: missing responseSectionRef. Aborting request to avoid runtime errors.");
+    return;
+  }
+  let reuqestUrl = getRequestUrl(apiOperator);
+  const result = checkIfParameter(apiOperator);
+  let header = result.hasRequestBody ? "application/json" : result.hasRequestFormData ? "application/x-www-form-urlencoded" : "application/json";
+  let headers = {
+    "Content-Type": header
+  };
+  if (apiOperator.custom) {
+    for (let index = 0; index < apiOperator.customHeaderparameters.length; index++) {
+      const paras = apiOperator.customHeaderparameters[index];
+      if (paras.name != "" && paras.value != "" && paras.name != null && paras.value != null) {
+        headers[paras.name] = paras.value;
+      }
+    }
+  }
+  let body = result.hasRequestBody ? apiOperator.requestBody : result.hasRequestFormData ? getRequestFormData(apiOperator.rawApiInfo) : null;
+  if (apiOperator.custom) {
+    if (apiOperator.method.toUpperCase() == "POST" || apiOperator.method.toUpperCase() == "PUT") {
+      body = apiOperator.requestBody;
+    }
+  }
+  apiOperator.ifSendingRequest = true;
+  const startTime = Date.now();
+  apiOperator.controller = new AbortController();
+  const signal = apiOperator.controller.signal;
+  const overlayLayerContainer = createRequestOverlayLayer(apiOperator, responseSectionRef);
+  fetch(reuqestUrl, {
+    method: apiOperator.method.toUpperCase(),
+    headers,
+    body: body != null ? JSON.stringify(body) : null,
+    signal
+  }).then((response) => {
+    if (!response.ok) {
+      apiOperator.response = {
+        status: response.status,
+        statusText: response.statusText
+      };
+      const endTime2 = Date.now();
+      apiOperator.requestDuration = formatDuration(endTime2 - startTime);
+      apiOperator.ifSendingRequest = false;
+      throw new Error("Network response was not ok.");
+    }
+    const endTime = Date.now();
+    apiOperator.requestDuration = formatDuration(endTime - startTime);
+    const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
+    responsebodyElement.removeChild(overlayLayerContainer);
+    apiOperator.ifSendingRequest = false;
+    apiOperator.response = {
+      status: response.status,
+      statusText: response.statusText
+    };
+    const timeStatusElement = responseSectionRef.querySelector('[data-layer="TimeStatus"]');
+    if (timeStatusElement) {
+      updateTimeStatus(timeStatusElement, apiOperator);
+    } else {
+      console.log("\u5728reqresponse\u8303\u56F4\u5185\u672A\u627E\u5230TimeStatus\u5143\u7D20");
+    }
+    let responseClone = response.clone();
+    return response.json().catch((error) => {
+      return responseClone.text();
+    });
+  }).then((data) => {
+    apiOperator.gotResponse = true;
+    const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
+    if (typeof data === "object") {
+      console.log("Received JSON:", data);
+      responsebodyElement.textContent = JSON.stringify(data, null, 4);
+    } else {
+      console.log("Received text:", data);
+      responsebodyElement.textContent = data;
+    }
+  }).catch((error) => {
+    console.error("There has been a problem with your fetch operation:", error);
+  });
+}
+function updateTimeStatus(timeStatus, apiOperator) {
+  timeStatus.textContent = `Status: ${apiOperator.response.status || ""} ${apiOperator.response.statusText || ""}  Time: ${apiOperator.requestDuration || ""}`;
+}
+function createRequestOverlayLayer(apiOperator, responseSectionRef) {
+  const container = document.createElement("div");
+  Object.assign(container.style, {
+    position: "absolute",
+    top: 0,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgb(255, 255, 255)",
+    opacity: 0.8
+  });
+  const contentDiv = document.createElement("div");
+  Object.assign(contentDiv.style, {
+    display: "flex",
+    gap: "5px",
+    alignItems: "center"
+  });
+  const textDiv = document.createElement("div");
+  textDiv.textContent = "Sending request...";
+  const cancelBtn = document.createElement("button");
+  cancelBtn.className = "request-cancel-btn";
+  Object.assign(cancelBtn.style, {
+    border: "0px"
+  });
+  cancelBtn.textContent = "Cancel";
+  const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
+  contentDiv.appendChild(textDiv);
+  contentDiv.appendChild(cancelBtn);
+  container.appendChild(contentDiv);
+  responsebodyElement.appendChild(container);
+  cancelBtn.addEventListener("click", (e) => {
+    if (apiOperator.controller) {
+      apiOperator.controller.abort();
+      apiOperator.ifSendingRequest = false;
+      container.style.display = "none";
+      responsebodyElement.removeChild(container);
+    }
+  });
+  return container;
+}
+function checkIfParameter(apiOperator) {
+  let hasRequestBody = false;
+  let hasRequestFormData = false;
+  const parameters = apiOperator.rawApiInfo.parameters;
+  if (parameters) {
+    for (let index = 0; index < parameters.length; index++) {
+      const parameter = parameters[index];
+      if (parameter.in == "query" || parameter.in == "path") {
+      } else if (parameter.in == "body") {
+        hasRequestBody = true;
+        parameter.name = parameter.name.charAt(0).toUpperCase() + parameter.name.slice(1);
+      } else if (parameter.in == "formData") {
+        hasRequestFormData = true;
+      }
+    }
+  }
+  const requestBody = apiOperator.rawApiInfo.requestBody;
+  if (requestBody) {
+    hasRequestBody = true;
+  }
+  return { hasRequestBody, hasRequestFormData };
+}
+function formatDuration(milliseconds) {
+  let totalSeconds = Math.floor(milliseconds / 1e3);
+  let seconds = totalSeconds % 60;
+  let minutes = Math.floor(totalSeconds / 60) % 60;
+  let hours = Math.floor(totalSeconds / (60 * 60));
+  let millisecondsPart = Math.floor(milliseconds % 1e3);
+  millisecondsPart = millisecondsPart.toString().padStart(3, "0");
+  hours = hours.toString().padStart(2, "0");
+  minutes = minutes.toString().padStart(2, "0");
+  seconds = seconds.toString().padStart(2, "0");
+  return `${hours}h${minutes}m${seconds}s${millisecondsPart}ms`;
+}
+function getRequestUrl(apiOperator) {
+  let reuqestUrl = apiOperator.url;
+  const requestParameters = apiOperator.rawApiInfo.parameters || [];
+  if (requestParameters == null) {
+    return reuqestUrl;
+  }
+  for (const element of requestParameters) {
+    if (element.in == "path") {
+      reuqestUrl = reuqestUrl.replace("{" + element.name + "}", element.value);
+    }
+  }
+  let queryParams = getQueryParams(apiOperator, requestParameters);
+  reuqestUrl = queryParams.length > 0 ? reuqestUrl + "?" + queryParams.join("&") : reuqestUrl;
+  return reuqestUrl;
+}
+function getQueryParams(apiOperator, requestParameters) {
+  let queryParams = [];
+  for (const element of requestParameters) {
+    if (element.in == "query") {
+      if (element.type == "array" || element.schema != null && element.schema.type == "array") {
+        if (element.value != null) {
+          for (let index = 0; index < element.value.length; index++) {
+            queryParams.push(element.name + "=" + element.value[index].value);
+          }
+        }
+      } else {
+        queryParams.push(element.name + "=" + element.value);
+      }
+    }
+  }
+  if (apiOperator.custom) {
+    for (let index = 0; index < apiOperator.customQueryparameters.length; index++) {
+      const paras = apiOperator.customQueryparameters[index];
+      if (paras.name != "" && paras.value != "" && paras.name != null && paras.value != null) {
+        queryParams.push(paras.name + "=" + paras.value);
+      }
+    }
+  }
+  return queryParams;
+}
+function getRequestFormData(rawApiInfo) {
+  let formData = "";
+  const requestParameters = rawApiInfo.parameters;
+  if (requestParameters == null) {
+    return "";
+  }
+  let first = 0;
+  for (const element of requestParameters) {
+    if (element.in == "formData") {
+      if (first == 0) {
+        formData = element.name + "=" + element.value;
+      } else {
+        formData = formData + "&" + element.name + "=" + element.value;
+      }
+      first++;
+    }
+  }
+  return formData;
+}
+function createSvg() {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", "21");
+  svg.setAttribute("height", "22");
+  svg.setAttribute("viewBox", "0 0 21 22");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", "M5.5 8.5L10.5 13.5L15.5 8.5");
+  path.setAttribute("stroke", "var(--Labels---Vibrant---Controls-Primary--, #404040)");
+  path.setAttribute("stroke-width", "2");
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  svg.appendChild(path);
+  return svg;
+}
+function parseParaModel(parameterObj, dataDef) {
+  let bodyModel;
+  if (parameterObj && parameterObj.schema) {
+    if (parameterObj.schema["$ref"]) {
+      bodyModel = parseModel(parameterObj.schema["$ref"], dataDef);
+    } else if (parameterObj.schema["type"] == "array") {
+      const itemObj = parameterObj.schema["items"];
+      if (itemObj["$ref"]) {
+        bodyModel = parseModel(itemObj["$ref"], dataDef);
+      } else if (itemObj["type"]) {
+        bodyModel = parseElement(itemObj);
+      }
+      bodyModel = [bodyModel];
+    }
+  }
+  return bodyModel;
+}
+function parseModel(modelDef, apiDef) {
+  const model = {};
+  const bodyName = modelDef.substring(modelDef.lastIndexOf("/") + 1);
+  const def = apiDef[bodyName];
+  const props = def["properties"];
+  if (props) {
+    for (const key in props) {
+      if (Object.prototype.hasOwnProperty.call(props, key)) {
+        const element = props[key];
+        if (element.hasOwnProperty("items") && element["type"] == "array") {
+          if (element["items"]["$ref"]) {
+            model[key] = [parseModel(element["items"]["$ref"], apiDef)];
+          } else if (element["items"]["type"]) {
+            model[key] = [parseElement(element["items"])];
+          }
+        } else if (element.hasOwnProperty("$ref")) {
+          model[key] = parseModel(element["$ref"], apiDef);
+        } else {
+          if (element["type"]) {
+            model[key] = parseElement(element);
+          }
+        }
+      }
+    }
+  }
+  return model;
+}
+function parseElement(element) {
+  let elementValue;
+  if (element["type"].includes("integer")) {
+    elementValue = 0;
+  } else if (element["type"].includes("boolean")) {
+    elementValue = false;
+  } else if (element["type"].includes("string")) {
+    if (element["enum"]) {
+      elementValue = element["enum"][0];
+    } else {
+      elementValue = "";
+    }
+  }
+  if (element["example"]) {
+    elementValue = element["example"];
+  }
+  return elementValue;
+}
+var HTTP_METHODS = ["get", "put", "post", "delete", "options", "head", "patch", "trace"];
+function isHttpMethod(method) {
+  return HTTP_METHODS.includes(method);
+}
+function parseOpenAPI(openapiSpec) {
+  const apiOperatorList = [];
+  const pathEntries = [];
+  for (const path in openapiSpec.paths) {
+    if (Object.prototype.hasOwnProperty.call(openapiSpec.paths, path)) {
+      pathEntries.push([path, openapiSpec.paths[path]]);
+    }
+  }
+  pathEntries.forEach(([path, pathItem]) => {
+    const pathItemEntries = [];
+    for (const method in pathItem) {
+      if (Object.prototype.hasOwnProperty.call(pathItem, method)) {
+        if (isHttpMethod(method)) {
+          const operation = pathItem[method];
+          if (operation != null && typeof operation === "object" && !("$ref" in operation)) {
+            pathItemEntries.push([method, operation]);
+          }
+        }
+      }
+    }
+    pathItemEntries.forEach(([method, operation]) => {
+      const apiOperator = {
+        method: method.toUpperCase(),
+        url: path,
+        rawApiInfo: null,
+        requestBody: null,
+        response: {},
+        auths: [
+          {
+            type: "No Auth"
+          },
+          {
+            type: "Basic Auth",
+            parameters: [
+              {
+                name: "userName",
+                value: ""
+              },
+              {
+                name: "password",
+                value: ""
+              }
+            ]
+          }
+        ]
+      };
+      if (operation) {
+        if (operation.parameters) {
+          const parameter = operation.parameters.filter((val) => val.in == "body");
+          if (parameter && parameter.length > 0) {
+          }
+        }
+        if (operation.requestBody) {
+          const requestBodyObject = operation.requestBody;
+          const content = requestBodyObject.content;
+          for (const key in content) {
+            if (Object.prototype.hasOwnProperty.call(content, key)) {
+              const element = content[key];
+              if (element) {
+                let requestBody = parseParaModel(element, openapiSpec["components"]["schemas"]);
+                apiOperator.requestBody = requestBody;
+              }
+            }
+          }
+        }
+        apiOperator.rawApiInfo = operation;
+        apiOperatorList.push(apiOperator);
+      }
+    });
+  });
+  return apiOperatorList;
+}
+function countOpenAPI(openapiSpec) {
+  let apiCount = 0;
+  const pathEntries = [];
+  for (const path in openapiSpec.paths) {
+    if (Object.prototype.hasOwnProperty.call(openapiSpec.paths, path)) {
+      pathEntries.push([path, openapiSpec.paths[path]]);
+    }
+  }
+  pathEntries.forEach(([path, pathItem]) => {
+    const pathItemEntries = [];
+    for (const method in pathItem) {
+      if (Object.prototype.hasOwnProperty.call(pathItem, method)) {
+        if (isHttpMethod(method)) {
+          const operation = pathItem[method];
+          if (operation != null && typeof operation === "object" && !("$ref" in operation)) {
+            pathItemEntries.push([method, operation]);
+          }
+        }
+      }
+    }
+    pathItemEntries.forEach(([method, operation]) => {
+      apiCount = apiCount + 1;
+    });
+  });
+  return apiCount;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApiRenderer
+});
+//# sourceMappingURL=index.cjs.map