api-render-ui 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/Readme.md +5 -1
  2. package/example/animal.html +1 -1
  3. package/package.json +1 -1
  4. package/src/api-render-ui.css +12 -18
  5. package/src/api-render-ui.ts +3 -1
  6. package/src/inlined-styles.ts +12 -18
  7. package/dist/index.cjs +0 -1051
  8. package/dist/index.cjs.map +0 -1
  9. package/dist/index.d.cts +0 -13
  10. package/dist/index.d.ts +0 -13
  11. package/dist/index.js +0 -1024
  12. package/dist/index.js.map +0 -1
package/Readme.md CHANGED
@@ -20,6 +20,10 @@ api-render-ui is a UI library that pursues simple and efficient data rendering f
20
20
  ```
21
21
  npm install api-render-ui
22
22
  ```
23
+ - Define a container id in the html
24
+ ```html
25
+ <div id="notebook" style="overflow-y: auto;align-self: stretch;align-items: center;flex: 1 1 0;"></div>
26
+ ```
23
27
  - Your typescript code
24
28
  ```typescript
25
29
  import { ApiRenderer } from "api-render-ui"
@@ -31,7 +35,7 @@ api-render-ui is a UI library that pursues simple and efficient data rendering f
31
35
  apiRenderer.render(openapiSpec);
32
36
  ```
33
37
  ### Usage in single html
34
- Please refer to [example](example/animal.html)
38
+ Please refer to [example](example/animal.html) in the source code.
35
39
 
36
40
  ## Installation
37
41
 
package/example/animal.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <title>Document</title>
8
8
  </head>
9
9
 
10
- <body>
10
+ <body style="font-size: 75%;">
11
11
  <div id="notebook" style="overflow-y: auto;align-self: stretch;align-items: center;flex: 1 1 0;"></div>
12
12
  <script type="module">
13
13
  import { ApiRenderer } from "../dist/index.js"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "api-render-ui",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "api-render-ui is a UI library that pursues simple and efficient data rendering for openapi.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/api-render-ui.css CHANGED
@@ -11,20 +11,29 @@
11
11
  .codigma-apioperator {
12
12
  align-items: center;
13
13
  align-self: stretch;
14
- background: #F0F1F4;
15
14
  display: inline-flex;
16
15
  gap: 10px;
17
- height: 48px;
16
+ /* border-radius: 8px; */
17
+ height: 32px;
18
18
  justify-content: flex-start
19
19
  }
20
+ .codigma-apioperator:nth-child(even) {
21
+ background-color: rgb(235, 239, 244);
22
+ }
23
+ .codigma-apioperator:nth-child(odd) {
24
+ background-color: rgb(250, 246, 246);
25
+ }
26
+
20
27
  .codigma-apioperator:hover {
21
28
  cursor: pointer;
22
29
  }
30
+ .codigma-apioperator:active {
31
+ background: rgb(206, 216, 231);
32
+ }
23
33
  .codigma-method {
24
34
  align-items: center;
25
35
  display: flex;
26
36
  gap: 5px;
27
- height: 48px;
28
37
  justify-content: center;
29
38
  width: 64px
30
39
  }
@@ -36,17 +45,11 @@
36
45
  }
37
46
  .codigma-get {
38
47
  color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
39
- font-family: Inter;
40
- font-size: 16px;
41
- font-weight: 400;
42
48
  word-wrap: break-word
43
49
  }
44
50
  .codigma-requrl {
45
51
  color: black;
46
52
  flex: 1 1 0;
47
- font-family: Inter;
48
- font-size: 16px;
49
- font-weight: 400;
50
53
  word-wrap: break-word
51
54
  }
52
55
  /**********************apiunit css style*************************/
@@ -87,17 +90,11 @@
87
90
  }
88
91
  .codigma-apiunit-post {
89
92
  color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
90
- font-family: Inter;
91
- font-size: 16px;
92
- font-weight: 400;
93
93
  word-wrap: break-word
94
94
  }
95
95
  .codigma-apiunit-requrl {
96
96
  color: black;
97
97
  flex: 1 1 0;
98
- font-family: Inter;
99
- font-size: 16px;
100
- font-weight: 400;
101
98
  word-wrap: break-word;
102
99
  border-left: 0;
103
100
  border-right: 0;
@@ -114,9 +111,6 @@
114
111
  }
115
112
  .codigma-apiunit-send {
116
113
  color: black;
117
- font-family: Inter;
118
- font-size: 16px;
119
- font-weight: 400;
120
114
  word-wrap: break-word
121
115
  }
122
116
  .codigma-apiunit-send-button:hover {
package/src/api-render-ui.ts CHANGED
@@ -43,7 +43,7 @@ export class ApiRenderer {
43
43
  || (apiSpec["swagger"] && apiSpec["swagger"].startsWith("2."))) {
44
44
  const countApi = countOpenAPI(apiSpec);
45
45
  const apiOperatorList = parseOpenAPI(apiSpec);
46
- console.log('解析结果:', apiOperatorList);
46
+ // console.log('解析结果:', apiOperatorList);
47
47
  if (countApi == 1 && renderUnit) {
48
48
  // If the count of api <=1, create the api unit only.
49
49
  // 创建根容器
@@ -125,6 +125,8 @@ export class ApiRenderer {
125
125
  // 清空挂载点并插入新内容
126
126
  mountElement.innerHTML = '';
127
127
  mountElement.appendChild(this.container);
128
+
129
+
128
130
  }
129
131
  }
130
132
 
package/src/inlined-styles.ts CHANGED
@@ -12,20 +12,29 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
12
12
  .codigma-apioperator {
13
13
  align-items: center;
14
14
  align-self: stretch;
15
- background: #F0F1F4;
16
15
  display: inline-flex;
17
16
  gap: 10px;
18
- height: 48px;
17
+ /* border-radius: 8px; */
18
+ height: 32px;
19
19
  justify-content: flex-start
20
20
  }
21
+ .codigma-apioperator:nth-child(even) {
22
+ background-color: rgb(235, 239, 244);
23
+ }
24
+ .codigma-apioperator:nth-child(odd) {
25
+ background-color: rgb(250, 246, 246);
26
+ }
27
+
21
28
  .codigma-apioperator:hover {
22
29
  cursor: pointer;
23
30
  }
31
+ .codigma-apioperator:active {
32
+ background: rgb(206, 216, 231);
33
+ }
24
34
  .codigma-method {
25
35
  align-items: center;
26
36
  display: flex;
27
37
  gap: 5px;
28
- height: 48px;
29
38
  justify-content: center;
30
39
  width: 64px
31
40
  }
@@ -37,17 +46,11 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
37
46
  }
38
47
  .codigma-get {
39
48
  color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
40
- font-family: Inter;
41
- font-size: 16px;
42
- font-weight: 400;
43
49
  word-wrap: break-word
44
50
  }
45
51
  .codigma-requrl {
46
52
  color: black;
47
53
  flex: 1 1 0;
48
- font-family: Inter;
49
- font-size: 16px;
50
- font-weight: 400;
51
54
  word-wrap: break-word
52
55
  }
53
56
  /**********************apiunit css style*************************/
@@ -88,17 +91,11 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
88
91
  }
89
92
  .codigma-apiunit-post {
90
93
  color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
91
- font-family: Inter;
92
- font-size: 16px;
93
- font-weight: 400;
94
94
  word-wrap: break-word
95
95
  }
96
96
  .codigma-apiunit-requrl {
97
97
  color: black;
98
98
  flex: 1 1 0;
99
- font-family: Inter;
100
- font-size: 16px;
101
- font-weight: 400;
102
99
  word-wrap: break-word;
103
100
  border-left: 0;
104
101
  border-right: 0;
@@ -115,9 +112,6 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
115
112
  }
116
113
  .codigma-apiunit-send {
117
114
  color: black;
118
- font-family: Inter;
119
- font-size: 16px;
120
- font-weight: 400;
121
115
  word-wrap: break-word
122
116
  }
123
117
  .codigma-apiunit-send-button:hover {