pv-design 1.0.24 → 1.0.25

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
@@ -4,41 +4,57 @@
4
4
 
5
5
  ## 注意:
6
6
 
7
- 1. 确保组件的向下兼容性,不要破坏现有功能:不缩减API,不改变旧API的定义,如有必要,请提供迁移方案。
7
+ 1. 确保组件的向下兼容性,不要破坏现有功能:不缩减 API,不改变旧 API 的定义,如有必要,请提供迁移方案。
8
8
  2. 保证组件增量更新。
9
9
  3. 保证组件的类型声明正确性。
10
10
 
11
11
  ## 介绍
12
+
12
13
  ### 技术栈说明
13
- * 框架: React-ts(swc*)
14
- 采用ts的原因是打包版本中可以继承antd-design的type定义,简化组件的类型声明,提高使用时的便利性
15
- eslint
16
- * 打包工具: Vite(ESBuild)
17
- 快速、简单
18
- * 样式: 内联or style标签
19
- * API文档生成: typedoc
20
- * 组件demo:HTML(需要gitlab pages的支持)或MD
14
+
15
+ - 框架: React-ts(swc\*)
16
+ 采用 ts 的原因是打包版本中可以继承 antd-design 的 type 定义,简化组件的类型声明,提高使用时的便利性
17
+ eslint
18
+ - 打包工具: Vite(ESBuild)
19
+ 快速、简单
20
+ 并且打包时,cssToJS 的功能可以直接使用 esbuild 的插件来实现
21
+ - 样式: less
22
+ - API 文档生成: typedoc
23
+ - 组件 demo:HTML(需要 gitlab pages 的支持)或 MD
24
+ - 组件展示:Storybook
21
25
 
22
26
  ### 使用准备动作
23
- 1. yarn install / npm install (建议开发前都执行一次)
24
27
 
28
+ 1. yarn install / npm install (建议开发前都执行一次)
25
29
 
26
30
  ### 开发流程(新增组件)
27
- 1. 创建组件:在 /components 目录下创建组件文件夹和文件。
28
- 2. 编写文档:在 /src/template 目录下为每个组件编写使用文档(目录名称与components下的一致)。
29
- 3. 组件命名约束:使用Pv拼接组件名,如:PvTabs
31
+
32
+ #### 组件本地预览
33
+
34
+ 1. 创建组件:在  /components  目录下创建组件文件夹和文件。
35
+ 2. 组件命名约束:使用 Pv 拼接组件名,如:PvTabs
36
+ 3. 编写文档:在  /src/template  目录下为每个组件编写使用文档(目录名称与 components 下的一致),并在统计的 index.ts 中引入新增的组件。
30
37
  4. 编译组件:npm run build:watch,确保组件库的实时更新。
31
- 5. 可以在template目录下查看组件的demo,确保组件的正常使用。
32
- 6. 确保没问题后在stories下添加组件的stories,确保组件的正常展示。
33
- 7. 发布组件库如下:
38
+ 5. 运行组件: npm run start,查看组件的效果。
39
+
40
+ #### storybook 预览
41
+
42
+ 1. 创建组件 stories:在  /stories  目录下为每个组件编写 stories(目录名称为 xxx.stories.ts)。
43
+ 2. 运行 storybook:npm run storybook,查看组件的效果。
44
+
45
+ ### 组件发布流程
46
+
47
+ 发布组件库如下:
34
48
  cd components
35
49
  npm run build
36
50
  npm publish
37
51
 
38
52
  ### 本地调试 link
39
- 1. 为了确保开发过程中可能会更新组件,所以先在终端执行npm run build:watch,确保组件库的实时更新。
40
- 2. 进入components目录:cd components
53
+
54
+ 1. 为了确保开发过程中可能会更新组件,所以先在终端执行 npm run build:watch,确保组件库的实时更新。
55
+ 2. 进入 components 目录:cd components
41
56
  3. 链接组件库:npm link
42
57
  4. 在其他项目中使用组件库:npm link pv-design
43
58
  5. 后续正常的使用组件库和开发即可
44
- 6. 当需要取消使用组件库时,执行:npm unlink pv-design
59
+ 6. 当需要取消使用组件库时,执行:npm unlink pv-design
60
+ 7. 现在面临的问题,由于组件库更新了,应用组件库的项目引用的还是旧的代码,需要在应用组件库的项目中重新 build,才能够解决,这个问题待解决。
@@ -0,0 +1,70 @@
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { ConfigProvider as s, ColorPicker as l } from "antd";
3
+ const t = "_colorPicker_6ztk9_1", i = {
4
+ colorPicker: t
5
+ };
6
+ function n() {
7
+ return [
8
+ {
9
+ label: "",
10
+ defaultOpen: !0,
11
+ colors: [
12
+ "#0099ff",
13
+ "#00a400",
14
+ "#00c8ff",
15
+ "#10c6bd",
16
+ "#20ffff",
17
+ "#2afb12",
18
+ "#81c911",
19
+ "#9900ff",
20
+ "#a4a4ff",
21
+ "#aa7bff",
22
+ "#b4ff69",
23
+ "#c4ffff",
24
+ "#c8007d",
25
+ "#dcffcc",
26
+ "#dd5a14",
27
+ "#f600ff",
28
+ "#f89220",
29
+ "#faa07a",
30
+ "#ff2020",
31
+ "#ff9090",
32
+ "#ffaaf0",
33
+ "#ffc900",
34
+ "#ffcd7b",
35
+ "#fff600"
36
+ ],
37
+ key: "preset-colors"
38
+ }
39
+ ];
40
+ }
41
+ const p = ({ theme: f, children: e, ...o }) => {
42
+ var r;
43
+ const a = {
44
+ ...((r = f == null ? void 0 : f.components) == null ? void 0 : r.ColorPicker) || {}
45
+ };
46
+ return /* @__PURE__ */ c(
47
+ s,
48
+ {
49
+ prefixCls: "pv-color-picker",
50
+ theme: {
51
+ ...f || {},
52
+ components: {
53
+ ColorPicker: a
54
+ }
55
+ },
56
+ children: /* @__PURE__ */ c(
57
+ l,
58
+ {
59
+ presets: n(),
60
+ ...o,
61
+ rootClassName: [i.colorPicker, o.rootClassName].join(" "),
62
+ children: e
63
+ }
64
+ )
65
+ }
66
+ );
67
+ };
68
+ export {
69
+ p as default
70
+ };
package/dist/pv-design.js CHANGED
@@ -1,4 +1,4 @@
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)}})();
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}._colorPicker_6ztk9_1 .pv-color-picker-popover-inner{background-color:#2f2f2f!important}._colorPicker_6ztk9_1 .pv-color-picker-color-picker-inner-content{width:186px!important}._colorPicker_6ztk9_1 .pv-color-picker-collapse-header{display:none!important}")),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
2
2
  import { lazy as d } from "react";
3
3
  import { jsxs as l, jsx as a } from "react/jsx-runtime";
4
4
  import { ConfigProvider as p, Modal as i } from "antd";
@@ -439,7 +439,7 @@ const B = {
439
439
  __proto__: null,
440
440
  IconButtonType: m,
441
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"));
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-KElgEH1j.js"));
443
443
  export {
444
444
  I as BaseModal,
445
445
  D as IconButton,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pv-design",
3
- "version": "1.0.24",
3
+ "version": "1.0.25",
4
4
  "description": "pvmed ui design",
5
5
  "type": "module",
6
6
  "main": "./dist/pv-design.js",
@@ -10,7 +10,8 @@
10
10
  "build:doc": "typedoc",
11
11
  "doc:view": "http-serve docs -p 80",
12
12
  "lint": "eslint .",
13
- "clean": "if exist dist rd /s /q dist"
13
+ "clean": "if exist dist rd /s /q dist",
14
+ "test": "npm config set //registry.npmjs.org/:_authToken=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 && npm publish"
14
15
  },
15
16
  "repository": {
16
17
  "type": "git",
@@ -1,79 +0,0 @@
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
- };