api-render-ui 1.0.6 → 1.0.7

package/dist/index.js

@@ -1,1024 +0,0 @@
-// 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;
-    background: #F0F1F4;
-    display: inline-flex;
-    gap: 10px;
-    height: 48px;
-    justify-content: flex-start
-}
-.codigma-apioperator:hover {
-    cursor: pointer;
-}
-.codigma-method {
-    align-items: center;
-    display: flex;
-    gap: 5px;
-    height: 48px;
-    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);
-    font-family: Inter;
-    font-size: 16px;
-    font-weight: 400;
-    word-wrap: break-word
-}
-.codigma-requrl {
-    color: black;
-    flex: 1 1 0;
-    font-family: Inter;
-    font-size: 16px;
-    font-weight: 400;
-    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);
-    font-family: Inter;
-    font-size: 16px;
-    font-weight: 400;
-    word-wrap: break-word
-}
-.codigma-apiunit-requrl {
-    color: black;
-    flex: 1 1 0;
-    font-family: Inter;
-    font-size: 16px;
-    font-weight: 400;
-    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;
-    font-family: Inter;
-    font-size: 16px;
-    font-weight: 400;
-    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);
-      console.log("\u89E3\u6790\u7ED3\u679C:", apiOperatorList);
-      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;
-}
-export {
-  ApiRenderer
-};
-//# sourceMappingURL=index.js.map