@lambo-design/detail-table 1.0.0-beta.3 → 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,18 +1,24 @@
-{
-  "name": "@lambo-design/detail-table",
-  "version": "1.0.0-beta.3",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    
-  },
-  "author": "lambo",
-  "license": "ISC",
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@lambo-design/core": "workspace:*",
-    "@lambo-design/shared": "workspace:*"
-  }
-}
+{
+  "name": "@lambo-design/detail-table",
+  "version": "1.0.0-beta.30",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@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",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
+}

package/src/components/Col.js

@@ -1,98 +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;
-    }
-  }
-};
-
-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 labelProps = {
-      attrs: {},
-      class: [
-        `${prefixCls}-item-label`,
-        {
-          [`${prefixCls}-item-colon`]: colon,
-          [`${prefixCls}-item-no-label`]: !label
-        }
-      ],
-      key: `${key}-label`
-    };
-    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`,
-          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",
-          {
-            class: [
-              `${prefixCls}-item-label`,
-              { [`${prefixCls}-item-colon`]: colon }
-            ],
-            key: `${key}-label`
-          },
-          label
-        )
-      );
-    }
-    return createElement("td", { colSpan: span, class: `${prefixCls}-item` }, [
-      createElement("span", labelProps, label),
-      createElement(
-        "span",
-        { class: `${prefixCls}-item-content`, key: `${key}-content` },
-        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,69 +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 renderCol = (colItem, type, idx) => {
-      const colProps = {
-        child: colItem,
-        bordered: bordered,
-        colon: colon,
-        type: type,
-        layout: layout
-      }
-      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
+    )
+  }
+};