api-render-ui 1.1.3 → 1.1.5

package/Readme.md

@@ -34,6 +34,36 @@ api-render-ui is a UI library that pursues simple and efficient data rendering f
     // 执行渲染
     apiRenderer.render(openapiSpec);
 ```
+
+  ### Theme support
+
+  You can control the theme via the `theme` option when creating `ApiRenderer`:
+
+  - Pass a string: `'light'` or `'dark'` to use built-in theme classes.
+  - Pass an object: supply a palette (CSS variables or short keys) to set custom colors.
+
+  Examples:
+
+  ```typescript
+  // built-in light
+  new ApiRenderer({ mountPoint: '#notebook', theme: 'light' }).render(openapiSpec);
+
+  // built-in dark
+  new ApiRenderer({ mountPoint: '#notebook', theme: 'dark' }).render(openapiSpec);
+
+  // custom palette
+  // custom palette (recommended keys)
+  new ApiRenderer({ mountPoint: '#notebook', theme: { main: '#ff7f50', aux: '#ffd1b3', embellish: '#ffc39e', surface: '#fff8f0' } }).render(openapiSpec);
+  ```
+  
+  Palette keys supported:
+
+  - `main` — main (primary) color used for labels and primary accents.
+  - `aux` — auxiliary color used for hover and subtle accents.
+  - `embellish` / `embellishment` — embellishment color used for active states and outlines.
+  - `surface` — background surface color.
+  - `primary` — alias for `main`.
+  - Any CSS variable name (e.g. `--even-bg`) may also be provided directly.
 ### Usage in single html
    Please refer to [example](example/animal.html) in the source code.
 

package/dist/index.cjs

@@ -27,13 +27,55 @@ module.exports = __toCommonJS(index_exports);
 // 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;
@@ -44,18 +86,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;
@@ -71,18 +116,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;
@@ -93,8 +138,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;
@@ -115,17 +160,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;
@@ -136,7 +182,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 {
@@ -165,7 +211,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;
@@ -174,7 +220,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;
@@ -192,11 +238,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
 }
@@ -221,21 +267,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;
@@ -253,7 +299,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;
@@ -262,7 +308,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;
@@ -274,6 +320,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
@@ -287,7 +339,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;
   }
@@ -306,6 +360,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);
@@ -1227,7 +1322,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");
@@ -1395,6 +1490,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,
@@ -1487,6 +1585,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 = [];