@lambo-design/detail-table 1.0.0-beta.29 → 1.0.0-beta.30

package/index.js

@@ -1,8 +1,8 @@
-import {default as LamboDetailTable} from "./src/detail-table.vue";
-import {default as LamboDetailTableItem} from "./src/detail-table-item.vue";
-
-export default LamboDetailTable
-export {
-    LamboDetailTable,
-    LamboDetailTableItem
-}
+import {default as LamboDetailTable} from "./src/detail-table.vue";
+import {default as LamboDetailTableItem} from "./src/detail-table-item.vue";
+
+export default LamboDetailTable
+export {
+    LamboDetailTable,
+    LamboDetailTableItem
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/detail-table",
-  "version": "1.0.0-beta.29",
+  "version": "1.0.0-beta.30",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.141",
-    "@lambo-design/shared": "^1.0.0-beta.210"
+    "@lambo-design/shared": "^1.0.0-beta.226",
+    "@lambo-design/core": "^4.7.1-beta.147"
   },
   "scripts": {
     "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/components/Col.js

@@ -1,147 +1,149 @@
-import { getOptionProps, getSlots, getComponentFromProp } from "./props-util";
-
-const ColProps = {
-  child: Object,
-  bordered: Boolean,
-  colon: Boolean,
-  type: {
-    type: String,
-    validator: function(value) {
-      return ["label", "content"].indexOf(value) !== -1;
-    }
-  },
-  layout: {
-    type: String,
-    validator: function(value) {
-      return ["horizontal", "vertical"].indexOf(value) !== -1;
-    }
-  },
-  totalCols: Number
-};
-
-const Col = {
-  functional: true,
-  props: ColProps,
-  render(createElement, ctx) {
-    const { child, bordered, colon, type, layout } = ctx.props;
-    const { prefixCls, span = 1 } = getOptionProps(child);
-    const { key } = ctx.data;
-    const label = getComponentFromProp(child, "label");
-    const slots = getSlots(child);
-    const labelColSpan = Math.floor(100 / ColProps.totalCols * 0.33); // 计算 label 的长度
-    const contextColSpan = Math.floor(100 / ColProps.totalCols * 0.66); // 计算 context 的长度
-    const promptInfo = getComponentFromProp(child, "promptInfo")
-    const labelProps = {
-      attrs: {},
-      class: [
-        `${prefixCls}-item-label`,
-        {
-          [`${prefixCls}-item-colon`]: colon,
-          [`${prefixCls}-item-no-label`]: !label
-        }
-      ],
-      key: `${key}-label`,
-      style: {
-        width: `${labelColSpan}%` // 添加 label 的宽度
-      }
-    };
-    if (layout === "vertical") {
-      labelProps.attrs.colSpan = span * 2 - 1;
-    }
-
-    if (bordered) {
-      if (type === "label") {
-        if (promptInfo && promptInfo !=="") {
-          let labelItem = createElement(
-            'Tooltip',
-            {
-              ref: key,
-              props: {
-                placement: 'right',
-                maxWidth: 300
-              }
-            },
-            [
-              label,
-              createElement(
-                'Icon', {
-                  ref: key,
-                  props: {
-                    type: 'ios-information-circle-outline',
-                    size: 16,
-                  }
-                }
-              ),
-              createElement(
-                'div', {
-                  slot: 'content',
-                  theme: 'light'
-                },
-                [
-                  createElement('span', {},
-                    promptInfo
-                  )
-                ]
-              )
-            ]
-          )
-          return createElement('th', labelProps, [labelItem])
-        }
-        return createElement("th", labelProps, label);
-      }
-      return createElement(
-          "td",
-          {
-            class: `${prefixCls}-item-content`,
-            key: `${key}-content`,
-            attrs:{colSpan: span * 2 - 1},
-            style: {
-              width: `${contextColSpan}%` // 添加 content 的宽度
-            }
-          },
-          slots.default
-      );
-    }
-    if (layout === "vertical") {
-      if (type === "content") {
-        return createElement(
-            "td",
-            { colSpan: span, class: `${prefixCls}-item` },
-            createElement(
-                "span",
-                { class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
-                slots.default
-            )
-        );
-      }
-      return createElement(
-          "td",
-          { colSpan: span, class: `${prefixCls}-item` },
-          createElement(
-              "span",
-              {
-                class: [
-                  `${prefixCls}-item-label`,
-                  { [`${prefixCls}-item-colon`]: colon }
-                ],
-                key: `${key}-label`,
-                style: {
-                  width: `${labelColSpan}%` // 添加 label 的宽度
-                }
-              },
-              label
-          )
-      );
-    }
-    return createElement("td", { colSpan: span, class: `${prefixCls}-item` }, [
-      createElement("span", labelProps, label),
-      createElement(
-          "span",
-          { class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
-          slots.default
-      )
-    ]);
-  }
-};
-
-export default Col;
+import { getOptionProps, getSlots, getComponentFromProp } from "./props-util";
+
+const ColProps = {
+  child: Object,
+  bordered: Boolean,
+  colon: Boolean,
+  type: {
+    type: String,
+    validator: function(value) {
+      return ["label", "content"].indexOf(value) !== -1;
+    }
+  },
+  layout: {
+    type: String,
+    validator: function(value) {
+      return ["horizontal", "vertical"].indexOf(value) !== -1;
+    }
+  },
+  totalCols: Number,
+  column : Number,
+  labelWidth: Number
+};
+
+const Col = {
+  functional: true,
+  props: ColProps,
+  render(createElement, ctx) {
+    const { child, bordered, colon, type, layout ,column ,labelWidth} = ctx.props;
+    const { prefixCls, span = 1 } = getOptionProps(child);
+    const { key } = ctx.data;
+    const label = getComponentFromProp(child, "label");
+    const slots = getSlots(child);
+    const labelColSpan = Math.floor(labelWidth/column); // 计算 label 的长度
+    const contextColSpan = Math.floor((100-labelWidth)/column); // 计算 context 的长度
+    const promptInfo = getComponentFromProp(child, "promptInfo")
+    const labelProps = {
+      attrs: {},
+      class: [
+        `${prefixCls}-item-label`,
+        {
+          [`${prefixCls}-item-colon`]: colon,
+          [`${prefixCls}-item-no-label`]: !label
+        }
+      ],
+      key: `${key}-label`,
+      style: {
+        width: `${labelColSpan}%` // 添加 label 的宽度
+      }
+    };
+    if (layout === "vertical") {
+      labelProps.attrs.colSpan = span * 2 - 1;
+    }
+
+    if (bordered) {
+      if (type === "label") {
+        if (promptInfo && promptInfo !=="") {
+          let labelItem = createElement(
+            'Tooltip',
+            {
+              ref: key,
+              props: {
+                placement: 'right',
+                maxWidth: 300
+              }
+            },
+            [
+              label,
+              createElement(
+                'Icon', {
+                  ref: key,
+                  props: {
+                    type: 'ios-information-circle-outline',
+                    size: 16,
+                  }
+                }
+              ),
+              createElement(
+                'div', {
+                  slot: 'content',
+                  theme: 'light'
+                },
+                [
+                  createElement('span', {},
+                    promptInfo
+                  )
+                ]
+              )
+            ]
+          )
+          return createElement('th', labelProps, [labelItem])
+        }
+        return createElement("th", labelProps, label);
+      }
+      return createElement(
+          "td",
+          {
+            class: `${prefixCls}-item-content`,
+            key: `${key}-content`,
+            attrs:{colSpan: span * 2 - 1},
+            style: {
+              width: `${contextColSpan}%` // 添加 content 的宽度
+            }
+          },
+          slots.default
+      );
+    }
+    if (layout === "vertical") {
+      if (type === "content") {
+        return createElement(
+            "td",
+            { colSpan: span, class: `${prefixCls}-item` },
+            createElement(
+                "span",
+                { class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
+                slots.default
+            )
+        );
+      }
+      return createElement(
+          "td",
+          { colSpan: span, class: `${prefixCls}-item` },
+          createElement(
+              "span",
+              {
+                class: [
+                  `${prefixCls}-item-label`,
+                  { [`${prefixCls}-item-colon`]: colon }
+                ],
+                key: `${key}-label`,
+                style: {
+                  width: `${labelColSpan}%` // 添加 label 的宽度
+                }
+              },
+              label
+          )
+      );
+    }
+    return createElement("td", { colSpan: span, class: `${prefixCls}-item` }, [
+      createElement("span", labelProps, label),
+      createElement(
+          "span",
+          { class: `${prefixCls}-item-content`, key: `${key}-content`, style: { width: `${contextColSpan}%` } },
+          slots.default
+      )
+    ]);
+  }
+};
+
+export default Col;

package/src/components/Row.js

@@ -1,71 +1,73 @@
-import Col from "./Col";
-
-function toArray(value) {
-  let ret = value;
-  if (value === undefined) {
-    ret = [];
-  } else if (!Array.isArray(value)) {
-    ret = [value];
-  }
-  return ret;
-}
-
-export default {
-  functional: true,
-  render: function(createElement, context) {
-    const { children, index, prefixCls, bordered, layout, colon } = context.props;
-    const totalCols = toArray(children).length;
-    const renderCol = (colItem, type, idx) => {
-      const colProps = {
-        child: colItem,
-        bordered: bordered,
-        colon: colon,
-        type: type,
-        layout: layout,
-        totalCols: totalCols,
-      }
-      return createElement(Col, {props:colProps,key: `${type}-${colItem.key || idx}`});
-    };
-
-    const cloneChildren = [];
-    const cloneContentChildren = [];
-    toArray(children).forEach((childrenItem, idx) => {
-      cloneChildren.push(renderCol(childrenItem, "label", idx));
-      if (layout === "vertical") {
-        cloneContentChildren.push(renderCol(childrenItem, "content", idx));
-      } else if (bordered) {
-        cloneChildren.push(renderCol(childrenItem, "content", idx));
-      }
-    });
-
-    if (layout === "vertical") {
-      return [
-        createElement(
-          'tr',
-          {
-            class: `${prefixCls}-row`,
-            key: `label-${index}`
-          },
-          cloneChildren
-        ),
-        createElement(
-          'tr',
-          {
-            class: `${prefixCls}-row`,
-            key: `content-${index}`
-          },
-          cloneContentChildren
-        )
-      ];
-    }
-
-    return  createElement(
-      'tr',
-      {
-        class: `${prefixCls}-row`,
-        key: index
-      },
-      cloneChildren
-    )
-  }
-};
+import Col from "./Col";
+
+function toArray(value) {
+  let ret = value;
+  if (value === undefined) {
+    ret = [];
+  } else if (!Array.isArray(value)) {
+    ret = [value];
+  }
+  return ret;
+}
+
+export default {
+  functional: true,
+  render: function(createElement, context) {
+    const { children, index, prefixCls, bordered, layout, colon,column ,labelWidth} = context.props;
+    const totalCols = toArray(children).length;
+    const renderCol = (colItem, type, idx) => {
+      const colProps = {
+        child: colItem,
+        bordered: bordered,
+        colon: colon,
+        type: type,
+        layout: layout,
+        totalCols: totalCols,
+        column :column,
+        labelWidth:labelWidth
+      }
+      return createElement(Col, {props:colProps,key: `${type}-${colItem.key || idx}`});
+    };
+
+    const cloneChildren = [];
+    const cloneContentChildren = [];
+    toArray(children).forEach((childrenItem, idx) => {
+      cloneChildren.push(renderCol(childrenItem, "label", idx));
+      if (layout === "vertical") {
+        cloneContentChildren.push(renderCol(childrenItem, "content", idx));
+      } else if (bordered) {
+        cloneChildren.push(renderCol(childrenItem, "content", idx));
+      }
+    });
+
+    if (layout === "vertical") {
+      return [
+        createElement(
+          'tr',
+          {
+            class: `${prefixCls}-row`,
+            key: `label-${index}`
+          },
+          cloneChildren
+        ),
+        createElement(
+          'tr',
+          {
+            class: `${prefixCls}-row`,
+            key: `content-${index}`
+          },
+          cloneContentChildren
+        )
+      ];
+    }
+
+    return  createElement(
+      'tr',
+      {
+        class: `${prefixCls}-row`,
+        key: index
+      },
+      cloneChildren
+    )
+  }
+};