pv-design 1.0.22 → 1.0.24
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 +8 -1
- package/dist/index-BBXpiUX2.js +79 -0
- package/dist/pv-design.js +127 -47
- package/dist/types/baseModal/one/index.d.ts +7 -0
- package/dist/types/index.d.ts +2 -1
- package/dist/types/pvColorPicker/index.d.ts +7 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
* API文档生成: typedoc
|
|
20
20
|
* 组件demo:HTML(需要gitlab pages的支持)或MD
|
|
21
21
|
|
|
22
|
+
### 使用准备动作
|
|
23
|
+
1. yarn install / npm install (建议开发前都执行一次)
|
|
24
|
+
|
|
25
|
+
|
|
22
26
|
### 开发流程(新增组件)
|
|
23
27
|
1. 创建组件:在 /components 目录下创建组件文件夹和文件。
|
|
24
28
|
2. 编写文档:在 /src/template 目录下为每个组件编写使用文档(目录名称与components下的一致)。
|
|
@@ -26,7 +30,10 @@
|
|
|
26
30
|
4. 编译组件:npm run build:watch,确保组件库的实时更新。
|
|
27
31
|
5. 可以在template目录下查看组件的demo,确保组件的正常使用。
|
|
28
32
|
6. 确保没问题后在stories下添加组件的stories,确保组件的正常展示。
|
|
29
|
-
7.
|
|
33
|
+
7. 发布组件库如下:
|
|
34
|
+
cd components
|
|
35
|
+
npm run build
|
|
36
|
+
npm publish
|
|
30
37
|
|
|
31
38
|
### 本地调试 link
|
|
32
39
|
1. 为了确保开发过程中可能会更新组件,所以先在终端执行npm run build:watch,确保组件库的实时更新。
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsxs as p, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { ConfigProvider as a, ColorPicker as i } from "antd";
|
|
3
|
+
function l() {
|
|
4
|
+
return [
|
|
5
|
+
{
|
|
6
|
+
label: "",
|
|
7
|
+
defaultOpen: !0,
|
|
8
|
+
colors: [
|
|
9
|
+
"#0099ff",
|
|
10
|
+
"#00a400",
|
|
11
|
+
"#00c8ff",
|
|
12
|
+
"#10c6bd",
|
|
13
|
+
"#20ffff",
|
|
14
|
+
"#2afb12",
|
|
15
|
+
"#81c911",
|
|
16
|
+
"#9900ff",
|
|
17
|
+
"#a4a4ff",
|
|
18
|
+
"#aa7bff",
|
|
19
|
+
"#b4ff69",
|
|
20
|
+
"#c4ffff",
|
|
21
|
+
"#c8007d",
|
|
22
|
+
"#dcffcc",
|
|
23
|
+
"#dd5a14",
|
|
24
|
+
"#f600ff",
|
|
25
|
+
"#f89220",
|
|
26
|
+
"#faa07a",
|
|
27
|
+
"#ff2020",
|
|
28
|
+
"#ff9090",
|
|
29
|
+
"#ffaaf0",
|
|
30
|
+
"#ffc900",
|
|
31
|
+
"#ffcd7b",
|
|
32
|
+
"#fff600"
|
|
33
|
+
],
|
|
34
|
+
key: "preset-colors"
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
}
|
|
38
|
+
const d = ({ theme: f, children: c, ...e }) => {
|
|
39
|
+
var o;
|
|
40
|
+
const n = {
|
|
41
|
+
...((o = f == null ? void 0 : f.components) == null ? void 0 : o.ColorPicker) || {}
|
|
42
|
+
};
|
|
43
|
+
return /* @__PURE__ */ p(
|
|
44
|
+
a,
|
|
45
|
+
{
|
|
46
|
+
prefixCls: "pv-color-picker",
|
|
47
|
+
theme: {
|
|
48
|
+
...f || {},
|
|
49
|
+
components: {
|
|
50
|
+
ColorPicker: n
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ r("style", { children: `
|
|
55
|
+
.pv-color-picker-popover-inner {
|
|
56
|
+
background-color: #2f2f2f !important;
|
|
57
|
+
}
|
|
58
|
+
.pv-color-picker-color-picker-inner-content {
|
|
59
|
+
width: 186px !important;
|
|
60
|
+
}
|
|
61
|
+
.pv-color-picker-collapse-header {
|
|
62
|
+
display: none !important;
|
|
63
|
+
}
|
|
64
|
+
` }),
|
|
65
|
+
/* @__PURE__ */ r(
|
|
66
|
+
i,
|
|
67
|
+
{
|
|
68
|
+
presets: l(),
|
|
69
|
+
...e,
|
|
70
|
+
children: c
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
export {
|
|
78
|
+
d as default
|
|
79
|
+
};
|
package/dist/pv-design.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode("._iconButton_1fiji_1{color:#9d9d9d;cursor:pointer}._iconButton_1fiji_1._iconButton-primary_1fiji_5:hover{color:#2777e5}._iconButton_1fiji_1._iconButton-danger_1fiji_8:hover{color:#dc4446}._iconButton_1fiji_1._iconButton-disable_1fiji_11{color:#4f4f4f!important;cursor:not-allowed}._iconButton_1fiji_1._iconButton-disable_1fiji_11:hover{color:#4f4f4f!important}._iconButton_1fiji_1._iconButton-block_1fiji_18{display:block}")),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
|
|
2
|
-
import { lazy as
|
|
3
|
-
import { jsxs as
|
|
4
|
-
import { ConfigProvider as
|
|
2
|
+
import { lazy as d } from "react";
|
|
3
|
+
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
4
|
+
import { ConfigProvider as p, Modal as i } from "antd";
|
|
5
5
|
const h = ({ theme: o, ...t }) => {
|
|
6
6
|
var r;
|
|
7
|
-
const
|
|
7
|
+
const n = {
|
|
8
8
|
titleColor: "rgba(204,204,204,0.85)",
|
|
9
9
|
...((r = o == null ? void 0 : o.components) == null ? void 0 : r.Modal) || {}
|
|
10
10
|
};
|
|
11
|
-
return /* @__PURE__ */
|
|
12
|
-
|
|
11
|
+
return /* @__PURE__ */ l(
|
|
12
|
+
p,
|
|
13
13
|
{
|
|
14
14
|
prefixCls: "pv-base-modal-third",
|
|
15
15
|
theme: {
|
|
16
16
|
...o || {},
|
|
17
17
|
components: {
|
|
18
|
-
Modal:
|
|
18
|
+
Modal: n
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
children: [
|
|
@@ -70,7 +70,7 @@ const h = ({ theme: o, ...t }) => {
|
|
|
70
70
|
}
|
|
71
71
|
` }),
|
|
72
72
|
/* @__PURE__ */ a(
|
|
73
|
-
|
|
73
|
+
i,
|
|
74
74
|
{
|
|
75
75
|
width: 780,
|
|
76
76
|
...t,
|
|
@@ -82,18 +82,18 @@ const h = ({ theme: o, ...t }) => {
|
|
|
82
82
|
);
|
|
83
83
|
}, b = ({ theme: o, ...t }) => {
|
|
84
84
|
var r;
|
|
85
|
-
const
|
|
85
|
+
const n = {
|
|
86
86
|
titleColor: "rgba(204,204,204,0.85)",
|
|
87
87
|
...((r = o == null ? void 0 : o.components) == null ? void 0 : r.Modal) || {}
|
|
88
88
|
};
|
|
89
|
-
return /* @__PURE__ */
|
|
90
|
-
|
|
89
|
+
return /* @__PURE__ */ l(
|
|
90
|
+
p,
|
|
91
91
|
{
|
|
92
92
|
prefixCls: "pv-base-modal-default",
|
|
93
93
|
theme: {
|
|
94
94
|
...o || {},
|
|
95
95
|
components: {
|
|
96
|
-
Modal:
|
|
96
|
+
Modal: n
|
|
97
97
|
}
|
|
98
98
|
},
|
|
99
99
|
children: [
|
|
@@ -145,7 +145,7 @@ const h = ({ theme: o, ...t }) => {
|
|
|
145
145
|
}
|
|
146
146
|
` }),
|
|
147
147
|
/* @__PURE__ */ a(
|
|
148
|
-
|
|
148
|
+
i,
|
|
149
149
|
{
|
|
150
150
|
...t,
|
|
151
151
|
className: [t.className, "pv-base-modal-default-body"].join(" ")
|
|
@@ -156,18 +156,18 @@ const h = ({ theme: o, ...t }) => {
|
|
|
156
156
|
);
|
|
157
157
|
}, g = ({ theme: o, ...t }) => {
|
|
158
158
|
var r;
|
|
159
|
-
const
|
|
159
|
+
const n = {
|
|
160
160
|
titleColor: "rgba(204,204,204,0.85)",
|
|
161
161
|
...((r = o == null ? void 0 : o.components) == null ? void 0 : r.Modal) || {}
|
|
162
162
|
};
|
|
163
|
-
return /* @__PURE__ */
|
|
164
|
-
|
|
163
|
+
return /* @__PURE__ */ l(
|
|
164
|
+
p,
|
|
165
165
|
{
|
|
166
166
|
prefixCls: "pv-base-modal-four",
|
|
167
167
|
theme: {
|
|
168
168
|
...o || {},
|
|
169
169
|
components: {
|
|
170
|
-
Modal:
|
|
170
|
+
Modal: n
|
|
171
171
|
}
|
|
172
172
|
},
|
|
173
173
|
children: [
|
|
@@ -221,7 +221,7 @@ const h = ({ theme: o, ...t }) => {
|
|
|
221
221
|
}
|
|
222
222
|
` }),
|
|
223
223
|
/* @__PURE__ */ a(
|
|
224
|
-
|
|
224
|
+
i,
|
|
225
225
|
{
|
|
226
226
|
width: 1052,
|
|
227
227
|
...t,
|
|
@@ -233,18 +233,18 @@ const h = ({ theme: o, ...t }) => {
|
|
|
233
233
|
);
|
|
234
234
|
}, y = ({ theme: o, ...t }) => {
|
|
235
235
|
var r;
|
|
236
|
-
const
|
|
236
|
+
const n = {
|
|
237
237
|
titleColor: "rgba(204,204,204,0.85)",
|
|
238
238
|
...((r = o == null ? void 0 : o.components) == null ? void 0 : r.Modal) || {}
|
|
239
239
|
};
|
|
240
|
-
return /* @__PURE__ */
|
|
241
|
-
|
|
240
|
+
return /* @__PURE__ */ l(
|
|
241
|
+
p,
|
|
242
242
|
{
|
|
243
243
|
prefixCls: "pv-base-modal-two",
|
|
244
244
|
theme: {
|
|
245
245
|
...o || {},
|
|
246
246
|
components: {
|
|
247
|
-
Modal:
|
|
247
|
+
Modal: n
|
|
248
248
|
}
|
|
249
249
|
},
|
|
250
250
|
children: [
|
|
@@ -299,7 +299,7 @@ const h = ({ theme: o, ...t }) => {
|
|
|
299
299
|
}
|
|
300
300
|
` }),
|
|
301
301
|
/* @__PURE__ */ a(
|
|
302
|
-
|
|
302
|
+
i,
|
|
303
303
|
{
|
|
304
304
|
width: 486,
|
|
305
305
|
...t,
|
|
@@ -309,18 +309,97 @@ const h = ({ theme: o, ...t }) => {
|
|
|
309
309
|
]
|
|
310
310
|
}
|
|
311
311
|
);
|
|
312
|
+
}, w = ({ theme: o, ...t }) => {
|
|
313
|
+
var r;
|
|
314
|
+
const n = {
|
|
315
|
+
titleColor: "rgba(204,204,204,0.85)",
|
|
316
|
+
...((r = o == null ? void 0 : o.components) == null ? void 0 : r.Modal) || {}
|
|
317
|
+
};
|
|
318
|
+
return /* @__PURE__ */ l(
|
|
319
|
+
p,
|
|
320
|
+
{
|
|
321
|
+
prefixCls: "pv-base-modal-one",
|
|
322
|
+
theme: {
|
|
323
|
+
...o || {},
|
|
324
|
+
components: {
|
|
325
|
+
Modal: n
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
children: [
|
|
329
|
+
/* @__PURE__ */ a("style", { children: `
|
|
330
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-content {
|
|
331
|
+
display: flex;
|
|
332
|
+
flex-direction: column;
|
|
333
|
+
padding: 20px 28px !important;
|
|
334
|
+
border-radius: 12px !important;
|
|
335
|
+
box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.4) !important;
|
|
336
|
+
width: 338px !important;
|
|
337
|
+
min-height: 228px !important;
|
|
338
|
+
max-height: 580px !important;
|
|
339
|
+
background-color: #252526 !important;
|
|
340
|
+
}
|
|
341
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-title {
|
|
342
|
+
text-align: center;
|
|
343
|
+
height: 24px;
|
|
344
|
+
line-height: 24px !important;
|
|
345
|
+
}
|
|
346
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-close-icon {
|
|
347
|
+
color: rgba(204, 204, 204, 0.85) !important;
|
|
348
|
+
}
|
|
349
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-close {
|
|
350
|
+
top: 17px !important;
|
|
351
|
+
right: 20px !important;
|
|
352
|
+
}
|
|
353
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-header {
|
|
354
|
+
margin-bottom: 20px !important;
|
|
355
|
+
background-color: transparent !important;
|
|
356
|
+
}
|
|
357
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-body {
|
|
358
|
+
display: flex;
|
|
359
|
+
flex: 1;
|
|
360
|
+
overflow: hidden;
|
|
361
|
+
}
|
|
362
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-footer {
|
|
363
|
+
margin-top: 20px !important;
|
|
364
|
+
}
|
|
365
|
+
.pv-base-modal-one-body .pv-base-modal-one-modal-footer{
|
|
366
|
+
button:nth-of-type(1) {
|
|
367
|
+
background: transparent;
|
|
368
|
+
}
|
|
369
|
+
button:nth-of-type(1):hover {
|
|
370
|
+
background-color: transparent !important;
|
|
371
|
+
border: 1px solid #4B4A4A !important;
|
|
372
|
+
color: #d9d9d9 !important;
|
|
373
|
+
}
|
|
374
|
+
button {
|
|
375
|
+
font-size: 12px;
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
` }),
|
|
379
|
+
/* @__PURE__ */ a(
|
|
380
|
+
i,
|
|
381
|
+
{
|
|
382
|
+
...t,
|
|
383
|
+
className: [t.className, "pv-base-modal-one-body"].join(" ")
|
|
384
|
+
}
|
|
385
|
+
)
|
|
386
|
+
]
|
|
387
|
+
}
|
|
388
|
+
);
|
|
312
389
|
};
|
|
313
390
|
var c = /* @__PURE__ */ ((o) => (o[o.default = 0] = "default", o[o.third = 3] = "third", o[o.four = 4] = "four", o[o.one = 1] = "one", o[o.two = 2] = "two", o))(c || {});
|
|
314
|
-
const
|
|
391
|
+
const B = {
|
|
315
392
|
default: 0,
|
|
316
393
|
third: 3,
|
|
317
394
|
four: 4,
|
|
318
395
|
one: 1,
|
|
319
396
|
two: 2
|
|
320
|
-
},
|
|
397
|
+
}, _ = ({ modalType: o, ...t }) => {
|
|
321
398
|
switch (o) {
|
|
322
399
|
case 0:
|
|
323
400
|
return /* @__PURE__ */ a(b, { ...t });
|
|
401
|
+
case 1:
|
|
402
|
+
return /* @__PURE__ */ a(w, { ...t });
|
|
324
403
|
case 2:
|
|
325
404
|
return /* @__PURE__ */ a(y, { ...t });
|
|
326
405
|
case 3:
|
|
@@ -330,44 +409,45 @@ const w = {
|
|
|
330
409
|
default:
|
|
331
410
|
return /* @__PURE__ */ a(b, { ...t });
|
|
332
411
|
}
|
|
333
|
-
},
|
|
412
|
+
}, k = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
334
413
|
__proto__: null,
|
|
335
414
|
ModalType: c,
|
|
336
|
-
ModalTypeMap:
|
|
337
|
-
default:
|
|
338
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
339
|
-
iconButton:
|
|
415
|
+
ModalTypeMap: B,
|
|
416
|
+
default: _
|
|
417
|
+
}, Symbol.toStringTag, { value: "Module" })), j = "_iconButton_1fiji_1", e = {
|
|
418
|
+
iconButton: j,
|
|
340
419
|
"iconButton-primary": "_iconButton-primary_1fiji_5",
|
|
341
420
|
"iconButton-danger": "_iconButton-danger_1fiji_8",
|
|
342
421
|
"iconButton-disable": "_iconButton-disable_1fiji_11",
|
|
343
422
|
"iconButton-block": "_iconButton-block_1fiji_18"
|
|
344
|
-
},
|
|
423
|
+
}, m = {
|
|
345
424
|
primary: "primary",
|
|
346
425
|
danger: "danger"
|
|
347
|
-
},
|
|
348
|
-
const
|
|
426
|
+
}, M = ({ children: o, onClick: t, className: n, size: r = 12, disable: s = !1, type: u = m.primary, block: x = !1 }) => {
|
|
427
|
+
const f = () => {
|
|
349
428
|
switch (u) {
|
|
350
|
-
case
|
|
429
|
+
case m.primary:
|
|
351
430
|
return e["iconButton-primary"];
|
|
352
|
-
case
|
|
431
|
+
case m.danger:
|
|
353
432
|
return e["iconButton-danger"];
|
|
354
433
|
}
|
|
355
434
|
}, v = () => {
|
|
356
435
|
s || t == null || t();
|
|
357
436
|
};
|
|
358
|
-
return /* @__PURE__ */ a("span", { className: [e.iconButton,
|
|
359
|
-
},
|
|
437
|
+
return /* @__PURE__ */ a("span", { className: [e.iconButton, n, s ? e["iconButton-disable"] : "", f(), x ? e["iconButton-block"] : ""].join(" "), onClick: v, style: { fontSize: `${r}px` }, children: o });
|
|
438
|
+
}, C = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
360
439
|
__proto__: null,
|
|
361
|
-
IconButtonType:
|
|
362
|
-
default:
|
|
363
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
440
|
+
IconButtonType: m,
|
|
441
|
+
default: M
|
|
442
|
+
}, Symbol.toStringTag, { value: "Module" })), z = d(() => import("./index-C5hvxSxS.js")), O = d(() => import("./index-Dyq3zBZo.js")), S = d(() => import("./index-FYoViA-E.js")), $ = d(() => import("./index-CaYRL7KG.js")), I = d(() => Promise.resolve().then(() => k)), D = d(() => Promise.resolve().then(() => C)), F = d(() => import("./index-BBXpiUX2.js"));
|
|
364
443
|
export {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
444
|
+
I as BaseModal,
|
|
445
|
+
D as IconButton,
|
|
446
|
+
m as IconButtonType,
|
|
447
|
+
B as ModalTypeMap,
|
|
448
|
+
F as PvColorPicker,
|
|
369
449
|
S as PvModal,
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
450
|
+
O as PvTable,
|
|
451
|
+
z as PvTabs,
|
|
452
|
+
$ as ThirdModal
|
|
373
453
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6,4 +6,5 @@ declare const PvModal: import("react").LazyExoticComponent<import("react").FC<im
|
|
|
6
6
|
declare const ThirdModal: import("react").LazyExoticComponent<import("react").FC<import("./thirdModal").ExtendedModalProps>>;
|
|
7
7
|
declare const BaseModal: import("react").LazyExoticComponent<import("react").FC<import("./baseModal").ExtendedModalProps>>;
|
|
8
8
|
declare const IconButton: import("react").LazyExoticComponent<({ children, onClick, className, size, disable, type, block }: import("./iconButton").IconButtonProps) => import("react").JSX.Element>;
|
|
9
|
-
|
|
9
|
+
declare const PvColorPicker: import("react").LazyExoticComponent<import("react").FC<import("./pvColorPicker").ExtendedColorPickerProps>>;
|
|
10
|
+
export { PvTabs, PvTable, PvModal, ThirdModal, BaseModal, ModalTypeMap, IconButtonType, IconButton, PvColorPicker, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ColorPickerProps, ThemeConfig } from 'antd';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface ExtendedColorPickerProps extends ColorPickerProps {
|
|
4
|
+
theme?: ThemeConfig;
|
|
5
|
+
}
|
|
6
|
+
declare const PvModal: React.FC<ExtendedColorPickerProps>;
|
|
7
|
+
export default PvModal;
|