api-render-ui 1.1.3 → 1.1.5

package/dist/index.js

@@ -1,13 +1,55 @@
 // src/inlined-styles.ts
 var GLOBAL_STYLES = `.codigma-apioperatorlist {
     align-items: flex-start;
-    background: white;
+    background: var(--surface, white);
     display: inline-flex;
     flex-direction: column;
     gap: 5px;
     justify-content: flex-start;
     width: 100%
 }
+/* Theme variables and mappings */
+:root {
+    --Labels---Vibrant---Controls-Primary-\u221A: #404040;
+    --primary: #404040;
+    --main-color: #404040; /* main / primary color */
+    --aux-color: #a9c7ef;  /* auxiliary color for hover / accents */
+    --embellish-color: #ced8e7; /* embellishment color for active states */
+    --surface: white;
+    --text: black;
+    --even-bg: rgb(235, 239, 244);
+    --odd-bg: rgb(250, 246, 246);
+    --hover-bg: var(--aux-color, rgb(169, 199, 239));
+    --active-bg: var(--embellish-color, rgb(206, 216, 231));
+}
+
+.codigma-theme-light {
+    --main-color: #404040;
+    --aux-color: #a9c7ef;
+    --embellish-color: #ced8e7;
+    --primary: var(--main-color);
+    --Labels---Vibrant---Controls-Primary-\u221A: var(--main-color);
+    --surface: white;
+    --text: black;
+    --even-bg: rgb(235, 239, 244);
+    --odd-bg: rgb(250, 246, 246);
+    --hover-bg: var(--aux-color);
+    --active-bg: var(--embellish-color);
+}
+
+.codigma-theme-dark {
+    --main-color: #9fb8ff;
+    --aux-color: #334155;
+    --embellish-color: #22303a;
+    --primary: var(--main-color);
+    --Labels---Vibrant---Controls-Primary-\u221A: var(--main-color);
+    --surface: #1f1f1f;
+    --text: #e6e6e6;
+    --even-bg: #2a2a2a;
+    --odd-bg: #222222;
+    --hover-bg: var(--aux-color);
+    --active-bg: var(--embellish-color);
+}
 .codigma-apioperator {
     align-items: center;
     align-self: stretch;
@@ -18,18 +60,21 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
     justify-content: flex-start
 }
 .codigma-apioperator:nth-child(even) {
-  background-color: rgb(235, 239, 244);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-apioperator:nth-child(odd) {
-  background-color: rgb(250, 246, 246);
+    color: var(--main-color, var(--primary, #404040));
 }
 
 .codigma-apioperator:hover {
     cursor: pointer;
-    background: rgb(169, 199, 239);
+    color: var(--text, black);
+    background-color: var(--hover-bg, rgba(169,199,239,0.12));
+    transition: background-color .12s ease, color .12s ease;
+    border-radius: 4px;
 }
 .codigma-apioperator:active {
-    background: rgb(206, 216, 231);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-method {
     align-items: center;
@@ -45,18 +90,18 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
     justify-content: center
 }
 .codigma-get {
-    color: var(--Labels---Vibrant---Controls-Primary-\u221A, #404040);
+    color: var(--main-color, var(--primary, #404040));
     word-wrap: break-word
 }
 .codigma-requrl {
-    color: black;
+    color: var(--text, black);
     flex: 1 1 0;
     word-wrap: break-word
 }
 /**********************apiunit css style*************************/
 .codigma-apiunit {
     align-items: flex-start;
-    background: white;
+    background: var(--surface, white);
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     display: inline-flex;
     flex-direction: column;
@@ -67,8 +112,8 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 .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;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
+    border-top: 1px var(--main-color, var(--primary, #404040)) solid;
     display: inline-flex;
     gap: 10px;
     height: 48px;
@@ -89,17 +134,18 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
     justify-content: center
 }
 .codigma-apiunit-post {
-    color: var(--Labels---Vibrant---Controls-Primary-\u221A, #404040);
+    color: var(--main-color, var(--primary, #404040));
     word-wrap: break-word
 }
 .codigma-apiunit-requrl {
-    color: black;
+    color: var(--text, black);
     flex: 1 1 0;
     word-wrap: break-word;
     border-left: 0;
     border-right: 0;
     border-top: 0;
-    border-bottom: 1px solid black;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
+    height: 70%;
 }
 .codigma-apiunit-send-button {
     align-items: center;
@@ -110,7 +156,7 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
     width: 88px
 }
 .codigma-apiunit-send {
-    color: black;
+    color: var(--text, black);
     word-wrap: break-word
 }
 .codigma-apiunit-send-button:hover {
@@ -139,7 +185,7 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 }
 .codigma-apiunit-parameters-cnr {
     align-items: center;
-    background: white;
+    background: var(--surface, white);
     display: flex;
     height: 42px;
     justify-content: space-between;
@@ -148,7 +194,7 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     display: inline-flex;
     flex-direction: column;
     flex: 1 1 0;
@@ -166,11 +212,11 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 }
 .codigma-apiunit-valuetext {
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     border-left: 0;
     border-right: 0;
     border-top: 0;
-    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
     padding: 10px;
     width: 161px
 }
@@ -195,21 +241,21 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
-    background: white;
+    background: var(--surface, 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;
+    outline: 1px var(--main-color, var(--primary, #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;
+    background: var(--surface, white);
+    border-top: 1px var(--main-color, var(--primary, #404040)) solid;
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
@@ -227,7 +273,7 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 }
 .codigma-apiunit-responsetitle {
     align-items: center;
-    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-\u221A, #404040) solid;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
     display: flex;
     height: 42px;
     justify-content: space-between;
@@ -236,7 +282,7 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
 .codigma-apiunit-response-cnr {
     align-items: center;
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     display: flex;
     justify-content: space-between;
     padding-top: 2px;
@@ -248,6 +294,12 @@ var GLOBAL_STYLES = `.codigma-apioperatorlist {
     flex: 1 1 0;
     min-height: 5rem;
     /* padding: 2px */
+}
+.codigma-apiunit-apioperator:hover {
+    cursor: pointer;
+    color: var(--text, black);
+    background-color: var(--hover-bg, rgba(169,199,239,0.08));
+    transition: background-color .12s ease, color .12s ease;
 }`;
 
 // src/api-render-ui.ts
@@ -261,7 +313,9 @@ var ApiRenderer = class _ApiRenderer {
       mountPoint: document?.body,
       // 默认挂载到body
       className: "Apioperatorlist codigma-apioperatorlist",
-      layerName: "apioperatorlist"
+      layerName: "apioperatorlist",
+      // theme: can be a string like 'light' or 'dark', or an object palette
+      theme: "light"
     }, options);
     this.container = null;
   }
@@ -280,6 +334,47 @@ var ApiRenderer = class _ApiRenderer {
     if (!mountElement) {
       throw new Error("Invalid mount point specified");
     }
+    try {
+      const themeOpt = this.options.theme;
+      if (typeof themeOpt === "string") {
+        mountElement.classList.add(`codigma-theme-${themeOpt}`);
+      } else if (themeOpt && typeof themeOpt === "object") {
+        const palette = themeOpt;
+        const setVar = (key, value) => {
+          if (value == null) return;
+          const varName = key.startsWith("--") ? key : `--${key}`;
+          try {
+            mountElement.style.setProperty(varName, String(value));
+          } catch {
+          }
+        };
+        if (palette.main) {
+          setVar("--main-color", palette.main);
+          setVar("--primary", palette.main);
+          setVar("--Labels---Vibrant---Controls-Primary-\u221A", palette.main);
+        }
+        if (palette.aux) {
+          setVar("--aux-color", palette.aux);
+          setVar("--hover-bg", palette.aux);
+        }
+        if (palette.embellish || palette.embellishment) {
+          setVar("--embellish-color", palette.embellish || palette.embellishment);
+          setVar("--active-bg", palette.embellish || palette.embellishment);
+        }
+        if (palette.primary) {
+          setVar("--primary", palette.primary);
+          setVar("--Labels---Vibrant---Controls-Primary-\u221A", palette.primary);
+          setVar("--main-color", palette.primary);
+        }
+        if (palette["--even-bg"]) setVar("--even-bg", palette["--even-bg"]);
+        if (palette["--odd-bg"]) setVar("--odd-bg", palette["--odd-bg"]);
+        if (palette.surface) setVar("--surface", palette.surface);
+        Object.entries(palette).forEach(([k, v]) => {
+          if (k.startsWith("--")) setVar(k, v);
+        });
+      }
+    } catch (e) {
+    }
     if (apiSpec["openapi"] && apiSpec["openapi"].startsWith("3.") || apiSpec["swagger"] && apiSpec["swagger"].startsWith("2.")) {
       const countApi = countOpenAPI(apiSpec);
       const apiOperatorList = parseOpenApiSpec(apiSpec, currentServer, serviceName);
@@ -1201,7 +1296,7 @@ function createSvg() {
   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", "var(--main-color, var(--primary, #404040) )");
   path.setAttribute("stroke-width", "2");
   path.setAttribute("stroke-linecap", "round");
   path.setAttribute("stroke-linejoin", "round");
@@ -1369,6 +1464,9 @@ function parseOpenApiSpec(openapiSpec, currentServer, serviceName) {
         url = openapiSpec.servers[0].url + path;
       }
       const apiOperator = {
+        id: uuid(),
+        label: path,
+        children: [],
         method: method.toUpperCase(),
         url,
         rawApiInfo: operation,
@@ -1461,6 +1559,21 @@ function parseOpenApiSpec(openapiSpec, currentServer, serviceName) {
   });
   return apiOperatorList;
 }
+function uuid() {
+  let s = [];
+  const hexDigits = "0123456789abcdef";
+  for (let i = 0; i < 28; i++) {
+    const start = Math.floor(Math.random() * 16);
+    s[i] = hexDigits.substring(start, start + 1);
+  }
+  s[14] = "4";
+  const start1 = s[19] & 3 | 8;
+  s[19] = hexDigits.substring(start1, start1 + 1);
+  s[8] = s[13] = s[18] = s[23] = "-";
+  s[0] = "a";
+  var uuid2 = s.join("");
+  return uuid2;
+}
 function countOpenAPI(openapiSpec) {
   let apiCount = 0;
   const pathEntries = [];