bhd-components 0.2.2 → 0.2.4

package/es2017/theme/variable.less

@@ -0,0 +1,625 @@
+// 基础梯度色值
+@Red-01: #fff4f0;
+@Red-02: #ffe8e0;
+@Red-03: #ffc7b8;
+@Red-04: #ffa38f;
+@Red-05: #ff7d66;
+@Red-06: #f4523b;
+@Red-07: #cf3527;
+@Red-08: #a81f18;
+@Red-09: #820e0c;
+@Red-10: #5c0709;
+
+@Blue-01: #f0f8ff;
+@Blue-02: #e6f0fc;
+@Blue-03: #d9ebff;
+@Blue-04: #b0d2ff;
+@Blue-05: #86b5fc;
+@Blue-06: #5991ef;
+@Blue-07: #406ec9;
+@Blue-08: #2c50a3;
+@Blue-09: #1b357d;
+@Blue-10: #122257;
+
+@Gold-01: #feffe6;
+@Gold-02: #ffffb8;
+@Gold-03: #fffb8f;
+@Gold-04: #fff566;
+@Gold-05: #ffec3d;
+@Gold-06: #fadb14;
+@Gold-07: #d4b106;
+@Gold-08: #ad8b00;
+@Gold-09: #876800;
+@Gold-10: #614700;
+
+@Orange-01: #fff4e6;
+@Orange-02: #ffdbb0;
+@Orange-03: #ffc587;
+@Orange-04: #ffac5e;
+@Orange-05: #ff9036;
+@Orange-06: #f8700c;
+@Orange-07: #d15000;
+@Orange-08: #d15000;
+@Orange-09: #852a00;
+@Orange-10: #5e1b00;
+
+@Cyan-01: #f0fffb;
+@Cyan-02: #ccfff2;
+@Cyan-03: #a3ffeb;
+@Cyan-04: #74f2db;
+@Cyan-05: #49e6ce;
+@Cyan-06: #23d9c3;
+@Cyan-07: #14b3a5;
+@Cyan-08: #088c86;
+@Cyan-09: #016664;
+@Cyan-10: #003f40;
+
+@Gray-Tr-01: rgba(255, 255, 255, 1);
+@Gray-Tr-02: rgba(0, 0, 0, 0.02);
+@Gray-Tr-03: rgba(0, 0, 0, 0.04);
+@Gray-Tr-04: rgba(0, 0, 0, 0.06);
+@Gray-Tr-05: rgba(0, 0, 0, 0.15);
+@Gray-Tr-06: rgba(0, 0, 0, 0.25);
+@Gray-Tr-07: rgba(0, 0, 0, 0.45);
+@Gray-Tr-08: rgba(0, 0, 0, 0.65);
+@Gray-Tr-09: rgba(0, 0, 0, 0.85);
+@Gray-Tr-10: rgba(0, 0, 0, 1);
+
+@Gray-01: #ffffff;
+@Gray-02: #fafafa;
+@Gray-03: #f5f5f5;
+@Gray-04: #ebebeb;
+@Gray-05: #d9d9d9;
+@Gray-06: #bfbfbf;
+@Gray-07: #8c8c8c;
+@Gray-08: #595959;
+@Gray-09: #262626;
+@Gray-10: #000000;
+
+/* 变量色值 */
+
+/* "color-background-layout": {
+    "value": "{Gray-01}",
+    "type": "color",
+    "description": "布局（全局）背景色"
+  } */
+@color-background-layout: @Gray-01;
+/*   "color-background-elevated": {
+    "value": "{Gray-01}",
+    "type": "color",
+    "description": "浮层容器背景色"
+  } */
+@color-background-elevated: @Gray-01;
+
+/*  "color-background-fill": {
+    "value": "{Gray-05}",
+    "type": "color",
+    "description": "一级填充色(用于突出内容部分)"
+  }, */
+@color-background-fill: @Gray-05;
+
+/*  "color-background-fillsecondary": {
+    "value": "{Gray-04}",
+    "type": "color",
+    "description": "二级填充色(可以较为明显地勾勒出元素形体，也可以作为三级填充色的 Hover 状态)"
+  }, */
+@color-background-fillsecondary: @Gray-04;
+/*  "color-background-fillsecondary-Tr": {
+    "value": "{Gray-Tr-04}",
+    "type": "color",
+    "description": "二级填充色(可以较为明显地勾勒出元素形体，也可以作为三级填充色的 Hover 状态)"
+  }, */
+@color-background-fillsecondary-Tr: @Gray-Tr-04;
+/*  "color-background-filltertiary": {
+    "value": "{Gray-03}",
+    "type": "color",
+    "description": "三级级填充色(用于勾勒出元素形体的场景，如无强调需求的情况下，建议使用三级填色作为默认填色。)"
+  }, */
+@color-background-filltertiary: @Gray-03;
+/*  "color-background-filltertiary-Tr": {
+    "value": "{Gray-Tr-03}",
+    "type": "color",
+    "description": "三级级填充色(用于勾勒出元素形体的场景，如无强调需求的情况下，建议使用三级填色作为默认填色。)"
+  }, */
+@color-background-filltertiary-Tr: @Gray-Tr-03;
+/*   "color-background-fillquaternary": {
+    "value": "{Gray-02}",
+    "type": "color",
+    "description": "四级级填充色(最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。)"
+  }, */
+@color-background-fillquaternary: @Gray-02;
+
+/*  "color-background-fillquaternary-Tr": {
+    "value": "{Gray-Tr-02}",
+    "type": "color",
+    "description": "四级级填充色(最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。)"
+  }, */
+@color-background-fillquaternary-Tr: @Gray-Tr-02;
+/* "color-background-quinary": {
+    "value": "{Gray-01}",
+    "type": "color",
+    "description": "五级级填充色(适用于列表或文本框背景填充)"
+}, */
+
+@color-background-quinary: @Gray-01;
+
+/* 
+  "color-background-primary-base": {
+    "value": "{Red-06}",
+    "type": "color",
+    "description": "主色背景"
+  }, */
+@color-background-primary-base: @Red-06;
+/*   "color-background-primary-active": {
+    "value": "{Red-07}",
+    "type": "color",
+    "description": "主色背景颜色，激活状态"
+  }, */
+@color-background-primary-active: @Red-07;
+/*   "color-background-primary-hover": {
+    "value": "{Red-05}",
+    "type": "color",
+    "description": "主色背景颜色，悬浮状态"
+  }, */
+@color-background-primary-hover: @Red-05;
+/*   "color-background-primary-weak": {
+    "value": "{Red-01}",
+    "type": "color",
+    "description": "主色背景颜色（弱背景），可以在文本后面使用"
+  }, */
+@color-background-primary-weak: @Red-01;
+/* "color-background-primary-weak-hover": {
+    "value": "{Red-02}",
+    "type": "color",
+    "description": "主色浅色背景，悬浮状态"
+  }, */
+@color-background-primary-weak-hover: @Red-02;
+/* "color-background-success-base": {
+    "value": "{Cyan-06}",
+    "type": "color",
+    "description": "成功背景颜色"
+  }, */
+@color-background-success-base: @Cyan-06;
+/*  "color-background-success-weak": {
+    "value": "{Cyan-01}",
+    "type": "color",
+    "description": "成功浅色背景"
+  }, */
+@color-background-success-weak: @Cyan-01;
+/*  "color-background-warning-base": {
+    "value": "{Gold-06}",
+    "type": "color",
+    "description": "警告背景颜色"
+  }, */
+@color-background-warning-base: @Gold-06;
+/*  "color-background-warning-weak": {
+    "value": "{Gold-01}",
+    "type": "color",
+    "description": "警告浅色背景"
+  }, */
+@color-background-warning-weak: @Gold-01;
+/*   "color-background-error-base": {
+    "value": "{Orange-06}",
+    "type": "color",
+    "description": "错误背景颜色"
+  }, */
+@color-background-error-base: @Orange-06;
+/*  "color-background-error-weak": {
+    "value": "{Orange-01}",
+    "type": "color",
+    "description": "错误浅色背景"
+  }, */
+@color-background-error-weak: @Orange-01;
+/*  "color-background-info-base": {
+    "value": "{Blue-06}",
+    "type": "color",
+    "description": "信息色"
+  }, */
+@color-background-info-base: @Blue-06;
+/*   "color-background-info-weak": {
+    "value": "{Blue-01}",
+    "type": "color",
+    "description": "信息浅色背景"
+  }, */
+@color-background-info-weak: @Blue-01;
+/*   "color-border": {
+    "value": "{Gray-05}",
+    "type": "color",
+    "description": "一级边框色"
+  }, */
+@color-border: @Gray-05;
+/*   "color-border-Tr": {
+    "value": "{Gray-Tr-05}",
+    "type": "color",
+    "description": "一级边框色"
+  }, */
+@color-border-Tr: @Gray-Tr-05;
+/*   "color-border-secondary": {
+    "value": "{Gray-04}",
+    "type": "color",
+    "description": "二级边框色"
+  }, */
+@color-border-secondary: @Gray-04;
+/*   "color-border-secondary-Tr": {
+    "value": "{Gray-Tr-04}",
+    "type": "color",
+    "description": "二级边框色"
+  }, */
+@color-border-secondary-Tr: @Gray-Tr-04;
+/*   "color-border-primary": {
+    "value": "{Red-06}",
+    "type": "color",
+    "description": "主色边框色"
+  }, */
+@color-border-primary: @Red-06;
+/*   "color-border-primary-hover": {
+    "value": "{Red-05}",
+    "type": "color",
+    "description": "主色边框色，悬停状态"
+  }, */
+@color-border-primary-hover: @Red-05;
+
+/*  "color-border-primary-active": {
+    "value": "{Red-07}",
+    "type": "color",
+    "description": "主色边框色，悬停状态"
+  }, */
+@color-border-primary-active: @Red-07;
+/*   "color-border-success": {
+    "value": "{Cyan-06}",
+    "type": "color",
+    "description": "成功边框色"
+  }, */
+@color-border-success: @Cyan-06;
+/*   "color-border-warning": {
+    "value": "{Gold-06}",
+    "type": "color",
+    "description": "警告边框色"
+  }, */
+@color-border-warning: @Gold-06;
+/*   "color-border-error": {
+    "value": "{Orange-06}",
+    "type": "color",
+    "description": "报错边框色"
+  }, */
+@color-border-error: @Orange-06;
+/*   "color-text": {
+    "value": "{Gray-09}",
+    "type": "color",
+    "description": "一级文本色"
+  }, */
+@color-text: @Gray-09;
+/*   "color-text-Tr": {
+    "value": "{Gray-Tr-09}",
+    "type": "color",
+    "description": "一级文本色"
+  }, */
+@color-text-Tr: @Gray-Tr-09;
+/*   "color-text-Secondary": {
+    "value": "{Gray-08}",
+    "type": "color",
+    "description": "二级文本色"
+  }, */
+@color-text-Secondary: @Gray-08;
+/*   "color-text-Secondary-Tr": {
+    "value": "{Gray-Tr-08}",
+    "type": "color",
+    "description": "二级文本色"
+  }, */
+@color-text-Secondary-Tr: @Gray-Tr-08;
+/*   "color-text-tertiary": {
+    "value": "{Gray-07}",
+    "type": "color",
+    "description": "三级文本色"
+  }, */
+@color-text-tertiary: @Gray-07;
+/*   "color-text-tertiary-Tr": {
+    "value": "{Gray-Tr-07}",
+    "type": "color",
+    "description": "三级文本色"
+  }, */
+@color-text-tertiary-Tr: @Gray-Tr-07;
+/*   "color-text-quaternary": {
+    "value": "{Gray-06}",
+    "type": "color",
+    "description": "四级文本色"
+  }, */
+@color-text-quaternary: @Gray-06;
+
+/*   "color-text-quaternary-Tr": {
+    "value": "{Gray-Tr-06}",
+    "type": "color",
+    "description": "四级文本色"
+  }, */
+@color-text-quaternary-Tr: @Gray-Tr-06;
+/*   "color-text-quaternary": {
+    "value": "{Gray-01}",
+    "type": "color",
+    "description": "五级文本色"
+  }, */
+@color-text-quinary: @Gray-01;
+
+/*   "color-text-quaternary-Tr": {
+      "value": "{Gray-Tr-06}",
+      "type": "color",
+      "description": "五级文本色"
+    }, */
+@color-text-quinary-Tr: @Gray-Tr-01;
+/*   "color-text-primary": {
+    "value": "{Red-06}",
+    "type": "color",
+    "description": "品牌文本色"
+  }, */
+@color-text-primary: @Red-06;
+
+/*  "color-text-primary-hover": {
+    "value": "{Red-05}",
+    "type": "color",
+    "description": "品牌文本色，悬浮状态"
+  }, */
+@color-text-primary-hover: @Red-05;
+/*  "color-text-primary-active": {
+    "value": "{Red-07}",
+    "type": "color",
+    "description": "品牌文本色，激活状态"
+  }, */
+@color-text-primary-active: @Red-07;
+/*  "color-text-success": {
+    "value": "{Cyan-06}",
+    "type": "color",
+    "description": "成功文本色"
+  }, */
+@color-text-success: @Cyan-06;
+/*  "color-text-warning": {
+    "value": "{Gold-06}",
+    "type": "color",
+    "description": "警告文本色"
+  }, */
+@color-text-warning: @Gold-06;
+/*  "color-text-error": {
+    "value": "{Orange-06}",
+    "type": "color",
+    "description": "报错文本色"
+  }, */
+@color-text-error: @Orange-06;
+/*  "color-text-info": {
+    "value": "{Blue-06}",
+    "type": "color",
+    "description": "信息文本色"
+  }, */
+@color-text-info: @Blue-06;
+/*  "color-text-info-hover": {
+    "value": "{Blue-05}",
+    "type": "color",
+    "description": "信息文本色，悬停状态"
+  }, */
+@color-text-info-hover: @Blue-05;
+/*   "color-text-info-active": {
+    "value": "{Blue-07}",
+    "type": "color",
+    "description": "信息文本色，激活状态"
+  }, */
+@color-text-info-active: @Blue-07;
+/*  "color-data-visualization-01": {
+    "value": "#F4523B",
+    "type": "color",
+    "description": "可视化颜色1"
+  }, */
+@color-data-visualization-01: #f4523b;
+/*  "color-data-visualization-02": {
+    "value": "#5991EF",
+    "type": "color",
+    "description": "可视化颜色2"
+  }, */
+@color-data-visualization-02: #5991ef;
+/*  "color-data-visualization-03": {
+    "value": "#F8700C",
+    "type": "color",
+    "description": "可视化颜色3"
+  }, */
+@color-data-visualization-03: #f8700c;
+/*   "color-data-visualization-04": {
+    "value": "#3ED22D",
+    "type": "color",
+    "description": "可视化颜色4"
+  }, */
+@color-data-visualization-04: #3ed22d;
+/*  "color-data-visualization-05": {
+    "value": "#DC2368",
+    "type": "color",
+    "description": "可视化颜色5"
+  }, */
+@color-data-visualization-05: #dc2368;
+/*  "color-data-visualization-06": {
+    "value": "#2AC3D5",
+    "type": "color",
+    "description": "可视化颜色6"
+  }, */
+@color-data-visualization-06: #2ac3d5;
+/*  "color-data-visualization-07": {
+    "value": "#F3D30C",
+    "type": "color",
+    "description": "可视化颜色7"
+  }, */
+@color-data-visualization-07: #f3d30c;
+/*  "color-data-visualization-08": {
+    "value": "#342AD5",
+    "type": "color",
+    "description": "可视化颜色8"
+  }, */
+@color-data-visualization-08: #342ad5;
+/* "color-data-visualization-09": {
+    "value": "#FF69B1",
+    "type": "color",
+    "description": "可视化颜色9"
+  }, */
+@color-data-visualization-09: #ff69b1;
+/*  "color-data-visualization-10": {
+    "value": "#45DEA6",
+    "type": "color",
+    "description": "可视化颜色10"
+  }, */
+@color-data-visualization-10: #45dea6;
+/*  "color-data-visualization-11": {
+    "value": "#CB43E1",
+    "type": "color",
+    "description": "可视化颜色11"
+  }, */
+@color-data-visualization-11: #cb43e1;
+/*  "color-data-visualization-12": {
+    "value": "#69A8FF",
+    "type": "color",
+    "description": "可视化颜色12"
+  } */
+@color-data-visualization-12: #69a8ff;
+
+/* 
+"color-icon": {
+      "value": "$Red-06",
+      "type": "color",
+      "description": "图标，默认"
+    }
+*/
+@color-icon: @Red-06;
+/* 
+"color-icon-hover": {
+      "value": "$Red-05",
+      "type": "color",
+      "description": "图标，悬浮状态"
+    }
+*/
+
+@color-icon-hover: @Red-05;
+
+/* 
+"color-icon-active": {
+      "value": "$Red-07",
+      "type": "color",
+      "description": "图标，激活状态"
+    }
+*/
+
+@color-icon-active: @Red-07;
+/* 
+ "color-icon-success": {
+      "value": "$Cyan-06",
+      "type": "color",
+      "description": "图标，成功色"
+    }
+*/
+@color-icon-success: @Cyan-06;
+
+/* 
+"color-icon-warning": {
+      "value": "$Gold-06",
+      "type": "color",
+      "description": "图标，警告色"
+    }
+*/
+@color-icon-warning: @Gold-06;
+/* 
+"color-icon-error": {
+      "value": "$Orange-06",
+      "type": "color",
+      "description": "图标，报错色"
+    }
+*/
+@color-icon-error: @Orange-06;
+/* 
+ "color-icon-fill": {
+      "value": "$Gray-08",
+      "type": "color",
+      "description": "图标，一级填充色"
+    }
+*/
+@color-icon-fill: @Gray-08;
+
+/* 
+"color-icon-fill(Tr)": {
+      "value": "$Gray(Tr)-08",
+      "type": "color",
+      "description": "图标，一级填充色0.65"
+    }
+*/
+@color-icon-fill-Tr: @Gray-Tr-08;
+/* 
+ "color-icon-Secondary": {
+      "value": "$Gray-07",
+      "type": "color",
+      "description": "图标，二级填充色"
+    }
+*/
+@color-icon-Secondary: @Gray-07;
+/* 
+"color-icon-Secondary(Tr)": {
+      "value": "$Gray(Tr)-07",
+      "type": "color",
+      "description": "图标，二级填充色0.45"
+    }
+*/
+@color-icon-Secondary-Tr: @Gray-Tr-07;
+/* 
+"color-icon-tertiary": {
+      "value": "$Gray-06",
+      "type": "color",
+      "description": "图标，三级填充色"
+    }
+*/
+
+@color-icon-tertiary: @Gray-06;
+
+/* 
+"color-icon-tertiary(Tr)": {
+      "value": "$Gray(Tr)-06",
+      "type": "color",
+      "description": "图标，三级填充色0.25"
+    }
+*/
+
+@color-icon-tertiary-Tr: @Gray-Tr-06;
+/* 
+"color-icon-quaternary": {
+      "value": "$Gray-04",
+      "type": "color",
+      "description": "图标，四级填充色"
+    }
+*/
+
+@color-icon-quaternary: @Gray-04;
+
+/* 
+"color-icon-quaternary(Tr)": {
+      "value": "$Gray(Tr)-04",
+      "type": "color",
+      "description": "图标，四级填充色0.06"
+    }
+*/
+
+@color-icon-quaternary-Tr: @Gray-Tr-04;
+/* 
+"color-icon-quinary": {
+      "value": "$Gray-02",
+      "type": "color",
+      "description": "图标，五级填充色"
+    }
+*/
+@color-icon-quinary: @Gray-02;
+/* 
+ "color-icon-quinary(Tr)": {
+      "value": "$Gray(Tr)-02",
+      "type": "color",
+      "description": "图标，五级填充色0.06"
+    }
+*/
+
+@color-icon-quinary-Tr: @Gray-Tr-02;
+
+/* 
+ "color-icon-senary": {
+      "value": "$Gray-01",
+      "type": "color",
+      "description": "图标，六级填充色"
+    }
+*/
+
+@color-icon-senary: @Gray-01;

package/es2017/titleBar/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface TitleBarProps {
+    title?: React.ReactElement;
+    leftIcon?: React.ReactElement;
+    subTitle?: React.ReactElement;
+    rightContent: () => React.ReactElement;
+    wrapClassName?: string;
+    rightMaxWidth?: number;
+}
+declare const TitleBar: (props: TitleBarProps) => JSX.Element;
+export default TitleBar;

package/es2017/titleBar/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import * as React from "react";
+import { useEffect, useRef } from "react";
+// import {render} from "react-dom";
+import { createRoot } from "react-dom";
+import styles from "./index.module.less";
+const TitleBar = (props)=>{
+    let { title , leftIcon , subTitle , rightContent , wrapClassName ="" , rightMaxWidth =45  } = props;
+    useRef(null);
+    const renderRightContent = ()=>{
+        const dom = rightContent();
+        let div = document.createElement("div");
+        let root = createRoot(div);
+        root.render(dom);
+        console.log("rootroot", root, div.clientWidth);
+        return dom;
+    };
+    useEffect(()=>{}, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${styles.titleBar} ${wrapClassName}`,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.left,
+                children: [
+                    leftIcon && /*#__PURE__*/ _jsx("div", {
+                        className: styles.leftIcon,
+                        children: leftIcon
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.leftContent,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.leftTitle,
+                                children: title
+                            }),
+                            subTitle && /*#__PURE__*/ _jsx("div", {
+                                className: styles.leftSubTitle,
+                                children: subTitle
+                            })
+                        ]
+                    })
+                ]
+            }),
+            rightContent && /*#__PURE__*/ _jsx("div", {
+                className: styles.right,
+                children: renderRightContent()
+            })
+        ]
+    });
+};
+export default TitleBar;