pv-design 1.0.18 → 1.0.20

package/README.md

@@ -1,29 +1,38 @@
-# pvmed/pv-design
-
-柏视组件库
-
-## 注意：
-
-1. 确保组件的向下兼容性，不要破坏现有功能：不缩减API，不改变旧API的定义，如有必要，请提供迁移方案。
-2. 保证组件增量更新。
-3. 保证组件的类型声明正确性。
-
-## 介绍
-### 技术栈说明
-* 框架: React-ts(swc*)
-    ○ 采用ts的原因是打包版本中可以继承antd-design的type定义，简化组件的类型声明，提高使用时的便利性
-    ○ eslint
-* 打包工具: Vite(ESBuild)
-    ○ 快速、简单
-* 样式: 内联or style标签
-* API文档生成: typedoc
-* 组件demo：HTML(需要gitlab pages的支持)或MD
-
-### 开发流程（新增组件）
-1. 创建组件：在 /components 目录下创建组件文件夹和文件。
-2. 编写文档：在 /src/template 目录下为每个组件编写使用文档（目录名称与components下的一致）。
-3. 组件命名约束：使用Pv拼接组件名，如：PvTabs
-4. 编译组件：npm run build
-5. 生成API文档：npm run build:doc
-6. 生成组件文档：npm run build:template
-7. 发布组件库：使用 npm publish 发布
+# pvmed/pv-design
+
+柏视组件库
+
+## 注意：
+
+1. 确保组件的向下兼容性，不要破坏现有功能：不缩减API，不改变旧API的定义，如有必要，请提供迁移方案。
+2. 保证组件增量更新。
+3. 保证组件的类型声明正确性。
+
+## 介绍
+### 技术栈说明
+* 框架: React-ts(swc*)
+    ○ 采用ts的原因是打包版本中可以继承antd-design的type定义，简化组件的类型声明，提高使用时的便利性
+    ○ eslint
+* 打包工具: Vite(ESBuild)
+    ○ 快速、简单
+* 样式: 内联or style标签
+* API文档生成: typedoc
+* 组件demo：HTML(需要gitlab pages的支持)或MD
+
+### 开发流程（新增组件）
+1. 创建组件：在 /components 目录下创建组件文件夹和文件。
+2. 编写文档：在 /src/template 目录下为每个组件编写使用文档（目录名称与components下的一致）。
+3. 组件命名约束：使用Pv拼接组件名，如：PvTabs
+4. 编译组件：npm run build
+5. 生成API文档：npm run build:doc
+6. 生成组件文档：npm run build:template
+7. 发布组件库：使用 npm publish 发布
+
+### 本地调试 link
+1. 进入components目录：cd components
+2. 本地打包：npm run build
+3. 链接组件库：npm link
+4. 在其他项目中使用组件库：npm link pv-design
+5. 后续正常的使用组件库和开发即可
+6. 当组件更新时，执行：npm run build
+7. 当需要取消使用组件库时，执行：npm unlink pv-design

package/dist/{index-CUPEuKJs.js → index-CaYRL7KG.js}

@@ -1,24 +1,24 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { ConfigProvider as i, Modal as l } from "antd";
-const x = ({ theme: o, LeftContent: r, RightContent: d, ...p }) => {
-  var n;
-  const e = {
+import { ConfigProvider as p, Modal as e } from "antd";
+const c = ({ theme: o, LeftContent: i, RightContent: n, ...d }) => {
+  var r;
+  const l = {
     titleColor: "rgba(204,204,204,0.85)",
-    ...((n = o == null ? void 0 : o.components) == null ? void 0 : n.Modal) || {}
+    ...((r = o == null ? void 0 : o.components) == null ? void 0 : r.Modal) || {}
   };
   return /* @__PURE__ */ a(
-    i,
+    p,
     {
-      prefixCls: "pv-modal",
+      prefixCls: "pv-third-modal",
       theme: {
         ...o || {},
         components: {
-          Modal: e
+          Modal: l
         }
       },
       children: [
         /* @__PURE__ */ t("style", { children: `
-        .pv-modal-modal-content {
+        .pv-third-modal-body .pv-third-modal-modal-content {
           display: flex;
           flex-direction: column;
           padding: 20px 28px  !important;
@@ -29,28 +29,28 @@ const x = ({ theme: o, LeftContent: r, RightContent: d, ...p }) => {
           width: 780px !important;
           background-color: #252526 !important;
         }
-        .pv-modal-modal-title {
+        .pv-third-modal-body .pv-third-modal-modal-title {
           text-align: center;
           height: 24px;
           line-height: 24px !important;
         }
-        .pv-modal-modal-close-icon {
+        .pv-third-modal-body .pv-third-modal-modal-close-icon {
           color: rgba(204, 204, 204, 0.85) !important;
         }
-        .pv-modal-modal-close {
+        .pv-third-modal-body .pv-third-modal-modal-close {
           top: 17px !important;
           right: 20px !important;
         }
-        .pv-modal-modal-header {
+        .pv-third-modal-body .pv-third-modal-modal-header {
           margin-bottom: 20px !important;
           background-color: transparent !important;
         }
-        .pv-modal-modal-body {
+        .pv-third-modal-body .pv-third-modal-modal-body {
           display: flex;
           flex: 1;
           overflow: hidden;
         }
-        .pv-modal-content-container {
+        .pv-third-modal-content-container {
           display: flex;
           flex: 1;
           justify-content: space-between;
@@ -59,21 +59,21 @@ const x = ({ theme: o, LeftContent: r, RightContent: d, ...p }) => {
           border-radius: 8px;
           width: 100%;
         }
-        .pv-modal-content-left {
+        .pv-third-modal-content-left {
           border-right: 1px dashed #4F4F4F;
         }
-        .pv-modal-content-right {
+        .pv-third-modal-content-right {
         }
-        .pv-modal-content-box {
+        .pv-third-modal-content-box {
           width: 50% ;
           flex: 1;
           box-sizing: border-box;
           height: 100%;
         }
-        .pv-modal-modal-footer {
+        .pv-third-modal-body .pv-third-modal-modal-footer {
           margin-top: 20px !important;
         }
-        .pv-modal-modal-footer{
+        .pv-third-modal-body .pv-third-modal-modal-footer{
           button:nth-of-type(1) {
             background: transparent;
           }
@@ -83,17 +83,19 @@ const x = ({ theme: o, LeftContent: r, RightContent: d, ...p }) => {
             color: #d9d9d9 !important;
           } 
           button {
-            font-size: 13px;
+            font-size: 12px;
           }
         }
         ` }),
         /* @__PURE__ */ t(
-          l,
+          e,
           {
-            ...p,
-            children: /* @__PURE__ */ a("div", { className: "pv-modal-content-container", children: [
-              /* @__PURE__ */ t("div", { className: "pv-modal-content-left pv-modal-content-box", children: r }),
-              /* @__PURE__ */ t("div", { className: "pv-modal-content-right pv-modal-content-box", children: d })
+            width: 780,
+            ...d,
+            className: [d.className, "pv-third-modal-body"].join(" "),
+            children: /* @__PURE__ */ a("div", { className: "pv-third-modal-content-container", children: [
+              /* @__PURE__ */ t("div", { className: "pv-third-modal-content-left pv-third-modal-content-box", children: i }),
+              /* @__PURE__ */ t("div", { className: "pv-third-modal-content-right pv-third-modal-content-box", children: n })
             ] })
           }
         )
@@ -102,5 +104,5 @@ const x = ({ theme: o, LeftContent: r, RightContent: d, ...p }) => {
   );
 };
 export {
-  x as default
+  c as default
 };

package/dist/pv-design.js

@@ -1,8 +1,210 @@
-import { lazy as o } from "react";
-const r = o(() => import("./index-C5hvxSxS.js")), i = o(() => import("./index-Dyq3zBZo.js")), m = o(() => import("./index-FYoViA-E.js")), p = o(() => import("./index-CUPEuKJs.js"));
+import { lazy as d } from "react";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { ConfigProvider as s, Modal as b } from "antd";
+const v = ({ theme: o, ...t }) => {
+  var e;
+  const n = {
+    titleColor: "rgba(204,204,204,0.85)",
+    ...((e = o == null ? void 0 : o.components) == null ? void 0 : e.Modal) || {}
+  };
+  return /* @__PURE__ */ m(
+    s,
+    {
+      prefixCls: "pv-base-modal-third",
+      theme: {
+        ...o || {},
+        components: {
+          Modal: n
+        }
+      },
+      children: [
+        /* @__PURE__ */ a("style", { children: `
+        .pv-base-modal-third-body .pv-base-modal-third-modal-content {
+          display: flex;
+          flex-direction: column;
+          padding: 20px 28px  !important;
+          border-radius: 12px !important;
+          box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.4) !important;
+          min-height: 580px !important;
+          max-height: 682px !important;
+          width: 780px !important;
+          background-color: #252526 !important;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-title {
+          text-align: center;
+          height: 24px;
+          line-height: 24px !important;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-close-icon {
+          color: rgba(204, 204, 204, 0.85) !important;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-close {
+          top: 17px !important;
+          right: 20px !important;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-header {
+          margin-bottom: 20px !important;
+          background-color: transparent !important;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-body {
+          display: flex;
+          flex: 1;
+          overflow: hidden;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-footer {
+          margin-top: 20px !important;
+        }
+        .pv-base-modal-third-body .pv-base-modal-third-modal-footer{
+          button:nth-of-type(1) {
+            background: transparent;
+          }
+          button:nth-of-type(1):hover {
+            background-color: transparent !important;
+            border: 1px solid #4B4A4A !important;
+            color: #d9d9d9 !important;
+          } 
+          button {
+            font-size: 12px;
+          }
+        }
+        ` }),
+        /* @__PURE__ */ a(
+          b,
+          {
+            width: 780,
+            ...t,
+            className: [t.className, "pv-base-modal-third-body"].join(" ")
+          }
+        )
+      ]
+    }
+  );
+}, p = ({ theme: o, ...t }) => {
+  var e;
+  const n = {
+    titleColor: "rgba(204,204,204,0.85)",
+    ...((e = o == null ? void 0 : o.components) == null ? void 0 : e.Modal) || {}
+  };
+  return /* @__PURE__ */ m(
+    s,
+    {
+      prefixCls: "pv-base-modal-default",
+      theme: {
+        ...o || {},
+        components: {
+          Modal: n
+        }
+      },
+      children: [
+        /* @__PURE__ */ a("style", { children: `
+        .pv-base-modal-default-body .pv-base-modal-default-modal-content {
+          display: flex;
+          flex-direction: column;
+          padding: 20px 28px  !important;
+          border-radius: 12px !important;
+          box-shadow: 0px 8px 48px 0px rgba(0,0,0,0.4) !important;
+          background-color: #252526 !important;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-title {
+          text-align: center;
+          height: 24px;
+          line-height: 24px !important;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-close-icon {
+          color: rgba(204, 204, 204, 0.85) !important;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-close {
+          top: 17px !important;
+          right: 20px !important;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-header {
+          margin-bottom: 20px !important;
+          background-color: transparent !important;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-body {
+          display: flex;
+          flex: 1;
+          overflow: hidden;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-footer {
+          margin-top: 20px !important;
+        }
+        .pv-base-modal-default-body .pv-base-modal-default-modal-footer{
+          button:nth-of-type(1) {
+            background: transparent;
+          }
+          button:nth-of-type(1):hover {
+            background-color: transparent !important;
+            border: 1px solid #4B4A4A !important;
+            color: #d9d9d9 !important;
+          } 
+          button {
+            font-size: 12px;
+          }
+        }
+        ` }),
+        /* @__PURE__ */ a(
+          b,
+          {
+            ...t,
+            className: [t.className, "pv-base-modal-default-body"].join(" ")
+          }
+        )
+      ]
+    }
+  );
+};
+var c = /* @__PURE__ */ ((o) => (o[o.default = 0] = "default", o[o.third = 3] = "third", o))(c || {});
+const y = {
+  default: 0,
+  third: 3
+}, g = ({ modalType: o, ...t }) => {
+  switch (o) {
+    case 0:
+      return /* @__PURE__ */ a(p, { ...t });
+    case 3:
+      return /* @__PURE__ */ a(v, { ...t });
+    default:
+      return /* @__PURE__ */ a(p, { ...t });
+  }
+}, _ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ModalType: c,
+  ModalTypeMap: y,
+  default: g
+}, Symbol.toStringTag, { value: "Module" })), B = "index-module__iconButton__Y5V-H", r = {
+  iconButton: B,
+  "iconButton-primary": "index-module__iconButton-primary__NAYmJ",
+  "iconButton-danger": "index-module__iconButton-danger__8mavX",
+  "iconButton-disable": "index-module__iconButton-disable__F-gC-",
+  "iconButton-block": "index-module__iconButton-block__yXYYN"
+}, l = {
+  primary: "primary",
+  danger: "danger"
+}, M = ({ children: o, onClick: t, className: n, size: e = 12, disable: i = !1, type: u = l.primary, block: f = !1 }) => {
+  const x = () => {
+    switch (u) {
+      case l.primary:
+        return r["iconButton-primary"];
+      case l.danger:
+        return r["iconButton-danger"];
+    }
+  }, h = () => {
+    i || t == null || t();
+  };
+  return /* @__PURE__ */ a("span", { className: [r.iconButton, n, i && r["iconButton-disable"], x(), f && r["iconButton-block"]].join(" "), onClick: h, style: { fontSize: `${e}px` }, children: o });
+}, j = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  IconButtonType: l,
+  default: M
+}, Symbol.toStringTag, { value: "Module" })), N = d(() => import("./index-C5hvxSxS.js")), z = d(() => import("./index-Dyq3zBZo.js")), A = d(() => import("./index-FYoViA-E.js")), C = d(() => import("./index-CaYRL7KG.js")), S = d(() => Promise.resolve().then(() => _)), T = d(() => Promise.resolve().then(() => j));
 export {
-  m as PvModal,
-  i as PvTable,
-  r as PvTabs,
-  p as ThirdModal
+  S as BaseModal,
+  T as IconButton,
+  l as IconButtonType,
+  y as ModalTypeMap,
+  A as PvModal,
+  z as PvTable,
+  N as PvTabs,
+  C as ThirdModal
 };

package/dist/style.css

@@ -0,0 +1 @@
+.index-module__iconButton__Y5V-H{color:#9d9d9d;cursor:pointer}.index-module__iconButton__Y5V-H.index-module__iconButton-primary__NAYmJ:hover{color:#2777e5}.index-module__iconButton__Y5V-H.index-module__iconButton-danger__8mavX:hover{color:#dc4446}.index-module__iconButton__Y5V-H.index-module__iconButton-disable__F-gC-{color:#4f4f4f!important;cursor:not-allowed}.index-module__iconButton__Y5V-H.index-module__iconButton-disable__F-gC-:hover{color:#4f4f4f!important}.index-module__iconButton__Y5V-H.index-module__iconButton-block__yXYYN{display:block}

package/dist/types/baseModal/default/index.d.ts

@@ -0,0 +1,7 @@
+import type { ModalProps, ThemeConfig } from 'antd';
+import React from 'react';
+export interface ExtendedModalProps extends ModalProps {
+    theme?: ThemeConfig;
+}
+declare const DefaultModal: React.FC<ExtendedModalProps>;
+export default DefaultModal;

package/dist/types/baseModal/index.d.ts

@@ -0,0 +1,16 @@
+import type { ModalProps, ThemeConfig } from 'antd';
+import React from 'react';
+export declare enum ModalType {
+    'default' = 0,
+    'third' = 3
+}
+export declare const ModalTypeMap: {
+    default: number;
+    third: number;
+};
+export interface ExtendedModalProps extends ModalProps {
+    theme?: ThemeConfig;
+    modalType: ModalType;
+}
+declare const BaseModal: React.FC<ExtendedModalProps>;
+export default BaseModal;

package/dist/types/baseModal/third/index.d.ts

@@ -0,0 +1,7 @@
+import type { ModalProps, ThemeConfig } from 'antd';
+import React from 'react';
+export interface ExtendedModalProps extends ModalProps {
+    theme?: ThemeConfig;
+}
+declare const ThreeModal: React.FC<ExtendedModalProps>;
+export default ThreeModal;

package/dist/types/iconButton/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const IconButtonType: {
+    primary: string;
+    danger: string;
+};
+export type IconButtonTypes = typeof IconButtonType[keyof typeof IconButtonType];
+export interface IconButtonProps {
+    onClick?: () => void;
+    className?: string;
+    size?: number;
+    disable?: boolean;
+    type: IconButtonTypes;
+    block?: boolean;
+    children: React.ReactNode;
+}
+declare const IconButton: ({ children, onClick, className, size, disable, type, block }: IconButtonProps) => React.JSX.Element;
+export default IconButton;

package/dist/types/index.d.ts

@@ -1,5 +1,9 @@
+import { ModalTypeMap } from "./baseModal";
+import { IconButtonType } from "./iconButton";
 declare const PvTabs: import("react").LazyExoticComponent<import("react").FC<import("./pvTabs").ExtendedTabsProps>>;
 declare const PvTable: import("react").LazyExoticComponent<import("react").FC<import("./pvTable").ExtendedTableProps>>;
 declare const PvModal: import("react").LazyExoticComponent<import("react").FC<import("./pvModal").ExtendedModalProps>>;
 declare const ThirdModal: import("react").LazyExoticComponent<import("react").FC<import("./thirdModal").ExtendedModalProps>>;
-export { PvTabs, PvTable, PvModal, ThirdModal };
+declare const BaseModal: import("react").LazyExoticComponent<import("react").FC<import("./baseModal").ExtendedModalProps>>;
+declare const IconButton: import("react").LazyExoticComponent<({ children, onClick, className, size, disable, type, block }: import("./iconButton").IconButtonProps) => import("react").JSX.Element>;
+export { PvTabs, PvTable, PvModal, ThirdModal, BaseModal, ModalTypeMap, IconButton, IconButtonType, };

package/dist/types/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/package.json

@@ -1,47 +1,21 @@
 {
   "name": "pv-design",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "pvmed ui design",
   "type": "module",
   "main": "./dist/pv-design.js",
   "types": "./dist/types/index.d.ts",
   "scripts": {
-    "start": "vite --port 1122",
-    "build": "vite build --config vite.config.ts && tsc --jsx react --project tsconfig.types.json",
-    "build:template": "storybook build -o home",
+    "build": "npm run clean && vite build --config vite.config.ts && tsc --jsx react --project tsconfig.types.json",
     "build:doc": "typedoc",
     "doc:view": "http-serve docs -p 80",
     "lint": "eslint .",
-    "storybook": "storybook dev -p 6006"
+    "clean": "if exist dist rd /s /q dist"
   },
   "repository": {
     "type": "git",
     "url": "ssh://git@192.168.18.221:12225/pvmed-prd/icp/pv-design.git"
   },
-  "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@storybook/addon-docs": "^9.0.11",
-    "@storybook/addon-onboarding": "^9.0.11",
-    "@storybook/react-vite": "^9.0.11",
-    "@types/node": "^22.7.4",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "antd": "^5.21.1",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "eslint-plugin-storybook": "^9.0.11",
-    "globals": "^15.9.0",
-    "path": "^0.12.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "storybook": "^9.0.11",
-    "typedoc": "^0.26.7",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
-  },
   "peerDependencies": {
     "antd": "^5.0.0",
     "react": ">16.8.0"
@@ -57,5 +31,8 @@
   "files": [
     "dist",
     "README.md"
-  ]
+  ],
+  "devDependencies": {
+    "vite-plugin-css-injected-by-js": "^3.5.2"
+  }
 }