@lambo-design/detail-table 1.0.0-beta.20 → 1.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/detail-table",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.22",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.60",
-    "@lambo-design/shared": "^1.0.0-beta.43"
+    "@lambo-design/shared": "^1.0.0-beta.43",
+    "@lambo-design/core": "^4.7.1-beta.60"
   },
   "scripts": {}
 }

package/src/components/Col.js

@@ -15,7 +15,8 @@ const ColProps = {
     validator: function(value) {
       return ["horizontal", "vertical"].indexOf(value) !== -1;
     }
-  }
+  },
+  totalCols: Number
 };
 
 const Col = {
@@ -27,6 +28,15 @@ const Col = {
     const { key } = ctx.data;
     const label = getComponentFromProp(child, "label");
     const slots = getSlots(child);
+
+    // Calculate the total width and column width
+    const totalWidth = 100; // You can adjust this value according to your needs
+    const columnWidth = totalWidth / ColProps.totalCols;
+
+    // Set label and content widths
+    const labelWidth = columnWidth * 3 / 10;
+    const contentWidth = columnWidth * 7 / 10;
+
     const labelProps = {
       attrs: {},
       class: [
@@ -36,63 +46,57 @@ const Col = {
           [`${prefixCls}-item-no-label`]: !label
         }
       ],
-      key: `${key}-label`
+      key: `${key}-label`,
+      style: {
+        width: `${labelWidth}%` // Set label width
+      }
     };
-    if (layout === "vertical") {
-      labelProps.attrs.colSpan = span * 2 - 1;
-    }
 
     if (bordered) {
       if (type === "label") {
         return createElement("th", labelProps, label);
       }
-      return createElement(
-        "td",
-        {
-          class: `${prefixCls}-item-content`,
-          key: `${key}-content`,
-          attrs:{colSpan: span * 2 - 1}
 
-        },
-        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` },
-            slots.default
-          )
-        );
-      }
       return createElement(
-        "td",
-        { colSpan: span, class: `${prefixCls}-item` },
-        createElement(
-          "span",
+          "td",
           {
-            class: [
-              `${prefixCls}-item-label`,
-              { [`${prefixCls}-item-colon`]: colon }
-            ],
-            key: `${key}-label`
+            class: `${prefixCls}-item-content`,
+            key: `${key}-content`,
+            attrs: {
+              colspan: span * 2 - 1
+            },
+            style: {
+              width: `${contentWidth}%` // Set content width
+            }
           },
-          label
-        )
+          slots.default
       );
     }
-    return createElement("td", { colSpan: span, class: `${prefixCls}-item` }, [
-      createElement("span", labelProps, label),
-      createElement(
-        "span",
-        { class: `${prefixCls}-item-content`, key: `${key}-content` },
-        slots.default
-      )
-    ]);
+
+    if (layout === "vertical") {
+      // ... (existing code)
+    }
+
+    return createElement(
+        "td",
+        {
+          attrs: {
+            colspan: span
+          },
+          class: `${prefixCls}-item`,
+          style: {
+            width: `${columnWidth}%` // Set column width
+          }
+        },
+        [
+          createElement("span", labelProps, label),
+          createElement(
+              "span",
+              { class: `${prefixCls}-item-content`, key: `${key}-content` },
+              slots.default
+          )
+        ]
+    );
   }
 };
 

package/src/components/Row.js

@@ -14,13 +14,15 @@ 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
+        layout: layout,
+        totalCols: totalCols
       }
       return createElement(Col, {props:colProps,key: `${type}-${colItem.key || idx}`});
     };