hfn-components 0.6.0 → 0.6.2

package/dist/index.css

@@ -1 +1 @@
-.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.header-text-wrap{line-height:1.5;white-space:pre-line}.header-only-border .el-table,.header-only-border .el-table__inner-wrapper,.header-only-border.el-table--border{border:none!important}.header-only-border .el-table:after,.header-only-border .el-table:before,.header-only-border .el-table__inner-wrapper:after,.header-only-border .el-table__inner-wrapper:before{display:none!important}.header-only-border .el-table__cell{border:none!important}.header-only-border .el-table__header .el-table__cell{border:none!important;position:relative}.header-only-border .el-table__header .el-table__cell:after{background-color:#dcdfe6;content:"";height:40%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.header-only-border .el-table__header .el-table__cell:last-child:after{display:none}

package/es/components/chart/src/HtChart.vue.mjs

@@ -85,6 +85,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
   ]);
 }
-var chart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/chart/src/HtChart.vue"]]);
+var chart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/chart/src/HtChart.vue"]]);
 
 export { chart as default };

package/es/components/elTable/index.d.ts

@@ -15,6 +15,10 @@ export declare const HtElTable: import("hfn-components/es/utils").SFCWithInstall
         readonly type: StringConstructor;
         readonly default: "#f0f0f0";
     };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
 }, {
     targetHead: import("vue").Ref<{
         name: string;
@@ -22,10 +26,12 @@ export declare const HtElTable: import("hfn-components/es/utils").SFCWithInstall
     }[]>;
     props: import("@vue/shared").LooseRequired<{
         readonly loading: boolean;
+        readonly resizable: boolean;
         readonly dataSource: unknown[];
         readonly tableColumn: import("./src/elTable").ElTableColumns[];
         readonly headerColor: string;
     } & {}>;
+    wrapText: (text: string, charsPerLine?: number) => string;
     readonly ElTable: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         data: {
             type: import("vue").PropType<any[]>;
@@ -800,8 +806,13 @@ export declare const HtElTable: import("hfn-components/es/utils").SFCWithInstall
         readonly type: StringConstructor;
         readonly default: "#f0f0f0";
     };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
 }>>, {
     readonly loading: boolean;
+    readonly resizable: boolean;
     readonly dataSource: unknown[];
     readonly tableColumn: import("./src/elTable").ElTableColumns[];
     readonly headerColor: string;

package/es/components/elTable/src/columnDeal.vue.mjs

@@ -37,6 +37,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* TEXT */
   ));
 }
-var ColumnDeal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/elTable/src/columnDeal.vue"]]);
+var ColumnDeal = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/elTable/src/columnDeal.vue"]]);
 
 export { ColumnDeal as default };

package/es/components/elTable/src/elTable.d.ts

@@ -25,6 +25,10 @@ export declare const elTableProps: {
         readonly type: StringConstructor;
         readonly default: "#f0f0f0";
     };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
 };
 export declare const columnDealProps: {
     readonly dealType: {

package/es/components/elTable/src/elTable.mjs

@@ -14,6 +14,11 @@ const elTableProps = {
   headerColor: {
     type: String,
     default: "#f0f0f0"
+  },
+  resizable: {
+    type: Boolean,
+    default: true
+    // 默认允许手动拉伸列宽
   }
 };
 const columnDealProps = {

package/es/components/elTable/src/elTable.vue.d.ts

@@ -15,6 +15,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "#f0f0f0";
     };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
 }, {
     targetHead: import("vue").Ref<{
         name: string;
@@ -22,10 +26,12 @@ declare const _default: import("vue").DefineComponent<{
     }[]>;
     props: import("@vue/shared").LooseRequired<{
         readonly loading: boolean;
+        readonly resizable: boolean;
         readonly dataSource: unknown[];
         readonly tableColumn: import("./elTable").ElTableColumns[];
         readonly headerColor: string;
     } & {}>;
+    wrapText: (text: string, charsPerLine?: number) => string;
     readonly ElTable: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         data: {
             type: import("vue").PropType<any[]>;
@@ -800,8 +806,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "#f0f0f0";
     };
+    readonly resizable: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
 }>>, {
     readonly loading: boolean;
+    readonly resizable: boolean;
     readonly dataSource: unknown[];
     readonly tableColumn: import("./elTable").ElTableColumns[];
     readonly headerColor: string;

package/es/components/elTable/src/elTable.vue.mjs

@@ -1,16 +1,24 @@
 import _sfc_main from './elTable.vue2.mjs';
-import { withDirectives, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, createElementVNode, toDisplayString, renderSlot } from 'vue';
+import { withDirectives, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createElementVNode, toDisplayString, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
-const _hoisted_1 = { key: 0 };
+const _hoisted_1 = {
+  key: 0,
+  class: "header-text-wrap"
+};
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 1 };
-const _hoisted_4 = { key: 1 };
+const _hoisted_4 = {
+  key: 1,
+  class: "header-text-wrap"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createBlock($setup["ElTable"], {
     data: $setup.props.dataSource,
     style: { "width": "100%" },
     height: "100%",
+    border: $setup.props.resizable,
+    class: normalizeClass({ "header-only-border": $setup.props.resizable }),
     "header-cell-style": {
       background: $setup.props.headerColor,
       color: "#000",
@@ -24,7 +32,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         null,
         renderList($setup.props.tableColumn, (item) => {
           return openBlock(), createBlock($setup["ElTableColumn"], {
-            resizable: "",
+            resizable: $setup.props.resizable,
             key: item.key,
             prop: item.key,
             width: item.width
@@ -49,19 +57,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 ])) : (openBlock(), createElementBlock(
                   "div",
                   _hoisted_3,
-                  toDisplayString(item.customizeLabel),
+                  toDisplayString($setup.wrapText(item.customizeLabel)),
                   1
                   /* TEXT */
                 ))
-              ])) : (openBlock(), createElementBlock("span", _hoisted_4, [
-                createElementVNode(
-                  "div",
-                  null,
-                  toDisplayString($setup.TABLE_KEY[item.key]),
-                  1
-                  /* TEXT */
-                )
-              ]))
+              ])) : (openBlock(), createElementBlock(
+                "span",
+                _hoisted_4,
+                toDisplayString($setup.wrapText($setup.TABLE_KEY[item.key])),
+                1
+                /* TEXT */
+              ))
             ]),
             default: withCtx((scope) => [
               item.dealType === "other" ? (openBlock(), createBlock($setup["ColumnDeal"], {
@@ -91,7 +97,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 2
             /* DYNAMIC */
-          }, 1032, ["prop", "width"]);
+          }, 1032, ["resizable", "prop", "width"]);
         }),
         128
         /* KEYED_FRAGMENT */
@@ -99,10 +105,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["data", "header-cell-style"])), [
+  }, 8, ["data", "border", "class", "header-cell-style"])), [
     [$setup["vLoading"], $setup.props.loading]
   ]);
 }
-var elTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/elTable/src/elTable.vue"]]);
+var elTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/elTable/src/elTable.vue"]]);
 
 export { elTable as default };

package/es/components/elTable/src/elTable.vue2.mjs

@@ -25,7 +25,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const props = __props;
-    const __returned__ = { targetHead, props, get ElTable() {
+    const wrapText = (text, charsPerLine = 6) => {
+      if (!text) return "";
+      const regex = new RegExp(`.{1,${charsPerLine}}`, "g");
+      return text.match(regex)?.join("\n") || text;
+    };
+    const __returned__ = { targetHead, props, wrapText, get ElTable() {
       return ElTable;
     }, get ElTableColumn() {
       return ElTableColumn;

package/es/components/htTarget/src/htTarget.vue.mjs

@@ -235,6 +235,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["modelValue"])
   ]);
 }
-var htTarget = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/htTarget/src/htTarget.vue"]]);
+var htTarget = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/htTarget/src/htTarget.vue"]]);
 
 export { htTarget as default };

package/es/components/pieChart/src/HtPieChart.vue.mjs

@@ -56,6 +56,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
   ]);
 }
-var htPieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/pieChart/src/HtPieChart.vue"]]);
+var htPieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/pieChart/src/HtPieChart.vue"]]);
 
 export { htPieChart as default };

package/es/components/table/HtTable.vue.mjs

@@ -444,6 +444,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/table/HtTable.vue"]]);
+var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/table/HtTable.vue"]]);
 
 export { Table as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hfn-components",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "",
   "main": "index.ts",
   "module": "es/index.mjs",

package/theme-chalk/ht-table.css

@@ -0,0 +1 @@
+.header-text-wrap{line-height:1.5;white-space:pre-line}.header-only-border .el-table,.header-only-border .el-table__inner-wrapper,.header-only-border.el-table--border{border:none!important}.header-only-border .el-table:after,.header-only-border .el-table:before,.header-only-border .el-table__inner-wrapper:after,.header-only-border .el-table__inner-wrapper:before{display:none!important}.header-only-border .el-table__cell{border:none!important}.header-only-border .el-table__header .el-table__cell{border:none!important;position:relative}.header-only-border .el-table__header .el-table__cell:after{background-color:#dcdfe6;content:"";height:40%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.header-only-border .el-table__header .el-table__cell:last-child:after{display:none}

package/theme-chalk/index.css

@@ -1 +1 @@
-.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.header-text-wrap{line-height:1.5;white-space:pre-line}.header-only-border .el-table,.header-only-border .el-table__inner-wrapper,.header-only-border.el-table--border{border:none!important}.header-only-border .el-table:after,.header-only-border .el-table:before,.header-only-border .el-table__inner-wrapper:after,.header-only-border .el-table__inner-wrapper:before{display:none!important}.header-only-border .el-table__cell{border:none!important}.header-only-border .el-table__header .el-table__cell{border:none!important;position:relative}.header-only-border .el-table__header .el-table__cell:after{background-color:#dcdfe6;content:"";height:40%;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}.header-only-border .el-table__header .el-table__cell:last-child:after{display:none}

package/theme-chalk/src/index.scss

@@ -1,2 +1,3 @@
 @use './chart.scss';
-@use './target.scss'
+@use './target.scss';
+@use './table.scss';

package/theme-chalk/src/table.scss

@@ -0,0 +1,45 @@
+// 表头文字换行样式
+.header-text-wrap {
+  white-space: pre-line;
+  line-height: 1.5;
+}
+
+// 隐藏所有边框，让表格看起来和未设置 border 时一样
+.header-only-border.el-table--border,
+.header-only-border .el-table__inner-wrapper,
+.header-only-border .el-table {
+  border: none !important;
+}
+
+.header-only-border .el-table__inner-wrapper::before,
+.header-only-border .el-table__inner-wrapper::after,
+.header-only-border .el-table::before,
+.header-only-border .el-table::after {
+  display: none !important;
+}
+
+.header-only-border .el-table__cell {
+  border: none !important;
+}
+
+// 表头列分隔线 - 使用伪元素实现居中效果
+.header-only-border .el-table__header .el-table__cell {
+  position: relative;
+  border: none !important;
+}
+
+.header-only-border .el-table__header .el-table__cell::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 40%;
+  background-color: #dcdfe6;
+}
+
+// 最后一列表头不显示分隔线
+.header-only-border .el-table__header .el-table__cell:last-child::after {
+  display: none;
+}

package/es/css/index.css

@@ -1,59 +0,0 @@
-.echart-box {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.echart-content {
-  flex: auto;
-}
-
-.echart-lenged {
-  width: 100%;
-  height: auto;
-  margin-top: 6px;
-  padding-right: 22px;
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 12px;
-  position: relative;
-  z-index: 999;
-}
-
-.bg-span {
-  display: inline-block;
-  width: 14px;
-  height: 2px;
-  margin-right: 6px;
-}
-
-.bg-span-bar {
-  display: inline-block;
-  width: 16px;
-  height: 10px;
-  border-radius: 2px;
-  margin-right: 6px;
-}
-
-.span-box {
-  margin-left: 5px;
-  margin-right: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.noData {
-  width: 100%;
-  height: 100%;
-  font-size: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  bottom: 0px;
-  color: #ccc;
-}