api-render-ui 1.0.5 → 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.
package/Readme.md CHANGED
@@ -15,7 +15,16 @@ api-render-ui is a UI library that pursues simple and efficient data rendering f
15
15
  [![NPM Downloads][npm-downloads-image]][npm-downloads-url]
16
16
  [![OpenSSF Scorecard Badge][ossf-scorecard-badge]][ossf-scorecard-visualizer]
17
17
 
18
-
18
+ ### Usage in typescript project
19
+ - Please install first
20
+ ```
21
+ npm install api-render-ui
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
+ ```
27
+ - Your typescript code
19
28
  ```typescript
20
29
  import { ApiRenderer } from "api-render-ui"
21
30
 
@@ -25,6 +34,8 @@ api-render-ui is a UI library that pursues simple and efficient data rendering f
25
34
  // 执行渲染
26
35
  apiRenderer.render(openapiSpec);
27
36
  ```
37
+ ### Usage in single html
38
+ Please refer to [example](example/animal.html) in the source code.
28
39
 
29
40
  ## Installation
30
41
 
@@ -0,0 +1,370 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+
10
+ <body style="font-size: 75%;">
11
+ <div id="notebook" style="overflow-y: auto;align-self: stretch;align-items: center;flex: 1 1 0;"></div>
12
+ <script type="module">
13
+ import { ApiRenderer } from "../dist/index.js"
14
+ const openapiSpec = {
15
+ "openapi": "3.1.0",
16
+ "info": {
17
+ "title": "ChimichangApp",
18
+ "summary": "Deadpool's favorite app. Nuff said.",
19
+ "description": "\nChimichangApp API helps you do awesome stuff. 🚀\n\n## Items\n\nYou can **read items**.\n\n## Users\n\nYou will be able to:\n\n* **Create users** (_not implemented_).\n* **Read users** (_not implemented_).\n",
20
+ "termsOfService": "http://example.com/terms/",
21
+ "contact": {
22
+ "name": "Deadpoolio the Amazing",
23
+ "url": "http://x-force.example.com/contact/",
24
+ "email": "dp@x-force.example.com"
25
+ },
26
+ "license": {
27
+ "name": "Apache 2.0",
28
+ "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
29
+ },
30
+ "version": "0.0.1"
31
+ },
32
+ "paths": {
33
+ "/items/": {
34
+ "get": {
35
+ "summary": "Read Items",
36
+ "operationId": "read_items_items__get",
37
+ "responses": {
38
+ "200": {
39
+ "description": "Successful Response",
40
+ "content": {
41
+ "application/json": {
42
+ "schema": {}
43
+ }
44
+ }
45
+ }
46
+ }
47
+ },
48
+ "post": {
49
+ "summary": "Create Item",
50
+ "operationId": "create_item_items__post",
51
+ "requestBody": {
52
+ "content": {
53
+ "application/json": {
54
+ "schema": {
55
+ "$ref": "#/components/schemas/Item"
56
+ }
57
+ }
58
+ },
59
+ "required": true
60
+ },
61
+ "responses": {
62
+ "200": {
63
+ "description": "Successful Response",
64
+ "content": {
65
+ "application/json": {
66
+ "schema": {}
67
+ }
68
+ }
69
+ },
70
+ "422": {
71
+ "description": "Validation Error",
72
+ "content": {
73
+ "application/json": {
74
+ "schema": {
75
+ "$ref": "#/components/schemas/HTTPValidationError"
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
81
+ }
82
+ },
83
+ "/items/{item_id}": {
84
+ "get": {
85
+ "summary": "Read Root",
86
+ "operationId": "read_root_items__item_id__get",
87
+ "parameters": [
88
+ {
89
+ "name": "item_id",
90
+ "in": "path",
91
+ "required": true,
92
+ "schema": {
93
+ "type": "string",
94
+ "title": "Item Id"
95
+ }
96
+ }
97
+ ],
98
+ "responses": {
99
+ "200": {
100
+ "description": "Successful Response",
101
+ "content": {
102
+ "application/json": {
103
+ "schema": {}
104
+ }
105
+ }
106
+ },
107
+ "422": {
108
+ "description": "Validation Error",
109
+ "content": {
110
+ "application/json": {
111
+ "schema": {
112
+ "$ref": "#/components/schemas/HTTPValidationError"
113
+ }
114
+ }
115
+ }
116
+ }
117
+ }
118
+ }
119
+ },
120
+ "/": {
121
+ "get": {
122
+ "summary": "Root",
123
+ "operationId": "root__get",
124
+ "responses": {
125
+ "200": {
126
+ "description": "Successful Response",
127
+ "content": {
128
+ "application/json": {
129
+ "schema": {}
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
135
+ },
136
+ "/legacy/": {
137
+ "get": {
138
+ "summary": "Get Legacy Data",
139
+ "operationId": "get_legacy_data_legacy__get",
140
+ "responses": {
141
+ "200": {
142
+ "description": "Successful Response",
143
+ "content": {
144
+ "application/json": {
145
+ "schema": {}
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }
151
+ },
152
+ "/login/": {
153
+ "post": {
154
+ "summary": "Login",
155
+ "description": "处理 application/x-www-form-urlencoded 的 POST 请求",
156
+ "operationId": "login_login__post",
157
+ "requestBody": {
158
+ "content": {
159
+ "application/x-www-form-urlencoded": {
160
+ "schema": {
161
+ "$ref": "#/components/schemas/Body_login_login__post"
162
+ }
163
+ }
164
+ },
165
+ "required": true
166
+ },
167
+ "responses": {
168
+ "200": {
169
+ "description": "Successful Response",
170
+ "content": {
171
+ "application/json": {
172
+ "schema": {}
173
+ }
174
+ }
175
+ },
176
+ "422": {
177
+ "description": "Validation Error",
178
+ "content": {
179
+ "application/json": {
180
+ "schema": {
181
+ "$ref": "#/components/schemas/HTTPValidationError"
182
+ }
183
+ }
184
+ }
185
+ }
186
+ }
187
+ }
188
+ },
189
+ "/submit/": {
190
+ "post": {
191
+ "summary": "Submit Form",
192
+ "operationId": "submit_form_submit__post",
193
+ "requestBody": {
194
+ "content": {
195
+ "application/x-www-form-urlencoded": {
196
+ "schema": {
197
+ "$ref": "#/components/schemas/Body_submit_form_submit__post"
198
+ }
199
+ }
200
+ },
201
+ "required": true
202
+ },
203
+ "responses": {
204
+ "200": {
205
+ "description": "Successful Response",
206
+ "content": {
207
+ "application/json": {
208
+ "schema": {}
209
+ }
210
+ }
211
+ },
212
+ "422": {
213
+ "description": "Validation Error",
214
+ "content": {
215
+ "application/json": {
216
+ "schema": {
217
+ "$ref": "#/components/schemas/HTTPValidationError"
218
+ }
219
+ }
220
+ }
221
+ }
222
+ }
223
+ }
224
+ }
225
+ },
226
+ "components": {
227
+ "schemas": {
228
+ "Body_login_login__post": {
229
+ "properties": {
230
+ "username": {
231
+ "type": "string",
232
+ "title": "Username"
233
+ },
234
+ "password": {
235
+ "type": "string",
236
+ "title": "Password"
237
+ }
238
+ },
239
+ "type": "object",
240
+ "required": [
241
+ "username",
242
+ "password"
243
+ ],
244
+ "title": "Body_login_login__post"
245
+ },
246
+ "Body_submit_form_submit__post": {
247
+ "properties": {
248
+ "name": {
249
+ "type": "string",
250
+ "title": "Name"
251
+ },
252
+ "email": {
253
+ "type": "string",
254
+ "title": "Email"
255
+ },
256
+ "age": {
257
+ "type": "integer",
258
+ "title": "Age"
259
+ },
260
+ "is_active": {
261
+ "type": "boolean",
262
+ "title": "Is Active",
263
+ "default": true
264
+ }
265
+ },
266
+ "type": "object",
267
+ "required": [
268
+ "name",
269
+ "email"
270
+ ],
271
+ "title": "Body_submit_form_submit__post"
272
+ },
273
+ "HTTPValidationError": {
274
+ "properties": {
275
+ "detail": {
276
+ "items": {
277
+ "$ref": "#/components/schemas/ValidationError"
278
+ },
279
+ "type": "array",
280
+ "title": "Detail"
281
+ }
282
+ },
283
+ "type": "object",
284
+ "title": "HTTPValidationError"
285
+ },
286
+ "Item": {
287
+ "properties": {
288
+ "name": {
289
+ "type": "string",
290
+ "title": "Name"
291
+ },
292
+ "price": {
293
+ "type": "number",
294
+ "title": "Price"
295
+ },
296
+ "description": {
297
+ "anyOf": [
298
+ {
299
+ "type": "string"
300
+ },
301
+ {
302
+ "type": "null"
303
+ }
304
+ ],
305
+ "title": "Description"
306
+ },
307
+ "tax": {
308
+ "anyOf": [
309
+ {
310
+ "type": "number"
311
+ },
312
+ {
313
+ "type": "null"
314
+ }
315
+ ],
316
+ "title": "Tax"
317
+ }
318
+ },
319
+ "type": "object",
320
+ "required": [
321
+ "name",
322
+ "price"
323
+ ],
324
+ "title": "Item"
325
+ },
326
+ "ValidationError": {
327
+ "properties": {
328
+ "loc": {
329
+ "items": {
330
+ "anyOf": [
331
+ {
332
+ "type": "string"
333
+ },
334
+ {
335
+ "type": "integer"
336
+ }
337
+ ]
338
+ },
339
+ "type": "array",
340
+ "title": "Location"
341
+ },
342
+ "msg": {
343
+ "type": "string",
344
+ "title": "Message"
345
+ },
346
+ "type": {
347
+ "type": "string",
348
+ "title": "Error Type"
349
+ }
350
+ },
351
+ "type": "object",
352
+ "required": [
353
+ "loc",
354
+ "msg",
355
+ "type"
356
+ ],
357
+ "title": "ValidationError"
358
+ }
359
+ }
360
+ }
361
+ }
362
+ const apiRenderer = new ApiRenderer({
363
+ mountPoint: '#notebook', // 可以是选择器字符串
364
+ });
365
+ // 执行渲染
366
+ apiRenderer.render(openapiSpec);
367
+ </script>
368
+ </body>
369
+
370
+ </html>
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "api-render-ui",
3
- "version": "1.0.5",
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
+ "type": "module",
5
6
  "main": "./dist/index.js",
6
7
  "module": "./dist/index.mjs",
7
8
  "types": "./dist/index.d.ts",
@@ -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 {
@@ -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
 
@@ -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 {
package/src/main.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { ApiRenderer } from 'api-render-ui';
2
+
3
+ const openapiSpec = {
4
+ // 你的 OpenAPI 文档
5
+ };
6
+
7
+ const renderer = new ApiRenderer({
8
+ mountPoint: '#notebook'
9
+ });
10
+ renderer.render(openapiSpec);
package/tsconfig.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
3
  "target": "ES2022",
4
- "module": "commonjs",
4
+ "module": "ESNext",
5
5
  "lib": ["ES2022", "DOM", "DOM.Iterable"],
6
6
  "declaration": true,
7
7
  "declarationMap": true,
package/dist/index.d.mts DELETED
@@ -1,13 +0,0 @@
1
- import { OpenAPIV3 } from 'openapi-types';
2
-
3
- type OpenAPIV3CustomDoc = OpenAPIV3.Document & {
4
- swagger: string;
5
- };
6
- declare class ApiRenderer {
7
- options: any;
8
- container: any;
9
- constructor(options: any);
10
- render(apiSpec: OpenAPIV3CustomDoc, renderUnit?: boolean): void;
11
- }
12
-
13
- export { ApiRenderer };
package/dist/index.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import { OpenAPIV3 } from 'openapi-types';
2
-
3
- type OpenAPIV3CustomDoc = OpenAPIV3.Document & {
4
- swagger: string;
5
- };
6
- declare class ApiRenderer {
7
- options: any;
8
- container: any;
9
- constructor(options: any);
10
- render(apiSpec: OpenAPIV3CustomDoc, renderUnit?: boolean): void;
11
- }
12
-
13
- export { ApiRenderer };