@lambo-design/detail-table 1.0.0-beta.1

package/index.js

@@ -0,0 +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
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@lambo-design/detail-table",
+  "version": "1.0.0-beta.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    
+  },
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "workspace:*",
+    "@lambo-design/shared": "workspace:*"
+  }
+}

package/src/components/Col.js

@@ -0,0 +1,98 @@
+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;

package/src/components/Row.js

@@ -0,0 +1,69 @@
+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
+    )
+  }
+};

package/src/components/props-util.js

@@ -0,0 +1,335 @@
+import isPlainObject from 'lodash/isPlainObject';
+import classNames from 'classnames';
+function getType(fn) {
+  const match = fn && fn.toString().match(/^\s*function (\w+)/);
+  return match ? match[1] : '';
+}
+
+const camelizeRE = /-(\w)/g;
+const camelize = str => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+};
+const parseStyleText = (cssText = '', camel) => {
+  const res = {};
+  const listDelimiter = /;(?![^(]*\))/g;
+  const propertyDelimiter = /:(.+)/;
+  cssText.split(listDelimiter).forEach(function(item) {
+    if (item) {
+      const tmp = item.split(propertyDelimiter);
+      if (tmp.length > 1) {
+        const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim();
+        res[k] = tmp[1].trim();
+      }
+    }
+  });
+  return res;
+};
+
+const hasProp = (instance, prop) => {
+  const $options = instance.$options || {};
+  const propsData = $options.propsData || {};
+  return prop in propsData;
+};
+const slotHasProp = (slot, prop) => {
+  const $options = slot.componentOptions || {};
+  const propsData = $options.propsData || {};
+  return prop in propsData;
+};
+const filterProps = (props, propsData = {}) => {
+  const res = {};
+  Object.keys(props).forEach(k => {
+    if (k in propsData || props[k] !== undefined) {
+      res[k] = props[k];
+    }
+  });
+  return res;
+};
+
+const getScopedSlots = ele => {
+  return (ele.data && ele.data.scopedSlots) || {};
+};
+
+const getSlots = ele => {
+  let componentOptions = ele.componentOptions || {};
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions || {};
+  }
+  const children = ele.children || componentOptions.children || [];
+  const slots = {};
+  children.forEach(child => {
+    if (!isEmptyElement(child)) {
+      const name = (child.data && child.data.slot) || 'default';
+      slots[name] = slots[name] || [];
+      slots[name].push(child);
+    }
+  });
+  return { ...slots, ...getScopedSlots(ele) };
+};
+const getSlot = (self, name = 'default', options = {}) => {
+  return (
+    (self.$scopedSlots && self.$scopedSlots[name] && self.$scopedSlots[name](options)) ||
+    self.$slots[name] ||
+    []
+  );
+};
+
+const getAllChildren = ele => {
+  let componentOptions = ele.componentOptions || {};
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions || {};
+  }
+  return ele.children || componentOptions.children || [];
+};
+const getSlotOptions = ele => {
+  if (ele.fnOptions) {
+    // 函数式组件
+    return ele.fnOptions;
+  }
+  let componentOptions = ele.componentOptions;
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions;
+  }
+  return componentOptions ? componentOptions.Ctor.options || {} : {};
+};
+const getOptionProps = instance => {
+  if (instance.componentOptions) {
+    const componentOptions = instance.componentOptions;
+    const { propsData = {}, Ctor = {} } = componentOptions;
+    const props = (Ctor.options || {}).props || {};
+    const res = {};
+    for (const [k, v] of Object.entries(props)) {
+      const def = v.default;
+      if (def !== undefined) {
+        res[k] =
+          typeof def === 'function' && getType(v.type) !== 'Function' ? def.call(instance) : def;
+      }
+    }
+    return { ...res, ...propsData };
+  }
+  const { $options = {}, $props = {} } = instance;
+  return filterProps($props, $options.propsData);
+};
+
+const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
+  if (instance.$createElement) {
+    const h = instance.$createElement;
+    const temp = instance[prop];
+    if (temp !== undefined) {
+      return typeof temp === 'function' && execute ? temp(h, options) : temp;
+    }
+    return (
+      (instance.$scopedSlots[prop] && execute && instance.$scopedSlots[prop](options)) ||
+      instance.$scopedSlots[prop] ||
+      instance.$slots[prop] ||
+      undefined
+    );
+  } else {
+    const h = instance.context.$createElement;
+    const temp = getPropsData(instance)[prop];
+    if (temp !== undefined) {
+      return typeof temp === 'function' && execute ? temp(h, options) : temp;
+    }
+    const slotScope = getScopedSlots(instance)[prop];
+    if (slotScope !== undefined) {
+      return typeof slotScope === 'function' && execute ? slotScope(h, options) : slotScope;
+    }
+    const slotsProp = [];
+    const componentOptions = instance.componentOptions || {};
+    (componentOptions.children || []).forEach(child => {
+      if (child.data && child.data.slot === prop) {
+        if (child.data.attrs) {
+          delete child.data.attrs.slot;
+        }
+        if (child.tag === 'template') {
+          slotsProp.push(child.children);
+        } else {
+          slotsProp.push(child);
+        }
+      }
+    });
+    return slotsProp.length ? slotsProp : undefined;
+  }
+};
+
+const getAllProps = ele => {
+  let data = ele.data || {};
+  let componentOptions = ele.componentOptions || {};
+  if (ele.$vnode) {
+    data = ele.$vnode.data || {};
+    componentOptions = ele.$vnode.componentOptions || {};
+  }
+  return { ...data.props, ...data.attrs, ...componentOptions.propsData };
+};
+
+const getPropsData = ele => {
+  let componentOptions = ele.componentOptions;
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions;
+  }
+  return componentOptions ? componentOptions.propsData || {} : {};
+};
+const getValueByProp = (ele, prop) => {
+  return getPropsData(ele)[prop];
+};
+
+const getAttrs = ele => {
+  let data = ele.data;
+  if (ele.$vnode) {
+    data = ele.$vnode.data;
+  }
+  return data ? data.attrs || {} : {};
+};
+
+const getKey = ele => {
+  let key = ele.key;
+  if (ele.$vnode) {
+    key = ele.$vnode.key;
+  }
+  return key;
+};
+
+export function getEvents(child) {
+  let events = {};
+  if (child.componentOptions && child.componentOptions.listeners) {
+    events = child.componentOptions.listeners;
+  } else if (child.data && child.data.on) {
+    events = child.data.on;
+  }
+  return { ...events };
+}
+
+// 获取 xxx.native 或者 原生标签 事件
+export function getDataEvents(child) {
+  let events = {};
+  if (child.data && child.data.on) {
+    events = child.data.on;
+  }
+  return { ...events };
+}
+
+// use getListeners instead this.$listeners
+// https://github.com/vueComponent/ant-design-vue/issues/1705
+export function getListeners(context) {
+  return (context.$vnode ? context.$vnode.componentOptions.listeners : context.$listeners) || {};
+}
+export function getClass(ele) {
+  let data = {};
+  if (ele.data) {
+    data = ele.data;
+  } else if (ele.$vnode && ele.$vnode.data) {
+    data = ele.$vnode.data;
+  }
+  const tempCls = data.class || {};
+  const staticClass = data.staticClass;
+  let cls = {};
+  staticClass &&
+    staticClass.split(' ').forEach(c => {
+      cls[c.trim()] = true;
+    });
+  if (typeof tempCls === 'string') {
+    tempCls.split(' ').forEach(c => {
+      cls[c.trim()] = true;
+    });
+  } else if (Array.isArray(tempCls)) {
+    classNames(tempCls)
+      .split(' ')
+      .forEach(c => {
+        cls[c.trim()] = true;
+      });
+  } else {
+    cls = { ...cls, ...tempCls };
+  }
+  return cls;
+}
+export function getStyle(ele, camel) {
+  let data = {};
+  if (ele.data) {
+    data = ele.data;
+  } else if (ele.$vnode && ele.$vnode.data) {
+    data = ele.$vnode.data;
+  }
+  let style = data.style || data.staticStyle;
+  if (typeof style === 'string') {
+    style = parseStyleText(style, camel);
+  } else if (camel && style) {
+    // 驼峰化
+    const res = {};
+    Object.keys(style).forEach(k => (res[camelize(k)] = style[k]));
+    return res;
+  }
+  return style;
+}
+
+export function getComponentName(opts) {
+  return opts && (opts.Ctor.options.name || opts.tag);
+}
+
+export function isEmptyElement(c) {
+  return !(c.tag || (c.text && c.text.trim() !== ''));
+}
+
+export function isStringElement(c) {
+  return !c.tag;
+}
+
+export function filterEmpty(children = []) {
+  return children.filter(c => !isEmptyElement(c));
+}
+const initDefaultProps = (propTypes, defaultProps) => {
+  Object.keys(defaultProps).forEach(k => {
+    if (propTypes[k]) {
+      propTypes[k].def && (propTypes[k] = propTypes[k].def(defaultProps[k]));
+    } else {
+      throw new Error(`not have ${k} prop`);
+    }
+  });
+  return propTypes;
+};
+
+export function mergeProps() {
+  const args = [].slice.call(arguments, 0);
+  const props = {};
+  args.forEach((p = {}) => {
+    for (const [k, v] of Object.entries(p)) {
+      props[k] = props[k] || {};
+      if (isPlainObject(v)) {
+        Object.assign(props[k], v);
+      } else {
+        props[k] = v;
+      }
+    }
+  });
+  return props;
+}
+
+function isValidElement(element) {
+  return (
+    element &&
+    typeof element === 'object' &&
+    'componentOptions' in element &&
+    'context' in element &&
+    element.tag !== undefined
+  ); // remove text node
+}
+
+export {
+  hasProp,
+  filterProps,
+  getOptionProps,
+  getComponentFromProp,
+  getSlotOptions,
+  slotHasProp,
+  getPropsData,
+  getKey,
+  getAttrs,
+  getValueByProp,
+  parseStyleText,
+  initDefaultProps,
+  isValidElement,
+  camelize,
+  getSlots,
+  getSlot,
+  getAllProps,
+  getAllChildren,
+};
+export default hasProp;

package/src/components/vnode.js

@@ -0,0 +1,147 @@
+import { filterEmpty, parseStyleText } from './props-util';
+import classNames from 'classnames';
+
+export function cloneVNode(vnode, deep) {
+  const componentOptions = vnode.componentOptions;
+  const data = vnode.data;
+
+  let listeners = {};
+  if (componentOptions && componentOptions.listeners) {
+    listeners = { ...componentOptions.listeners };
+  }
+
+  let on = {};
+  if (data && data.on) {
+    on = { ...data.on };
+  }
+
+  const cloned = new vnode.constructor(
+    vnode.tag,
+    data ? { ...data, on } : data,
+    vnode.children,
+    vnode.text,
+    vnode.elm,
+    vnode.context,
+    componentOptions ? { ...componentOptions, listeners } : componentOptions,
+    vnode.asyncFactory,
+  );
+  cloned.ns = vnode.ns;
+  cloned.isStatic = vnode.isStatic;
+  cloned.key = vnode.key;
+  cloned.isComment = vnode.isComment;
+  cloned.fnContext = vnode.fnContext;
+  cloned.fnOptions = vnode.fnOptions;
+  cloned.fnScopeId = vnode.fnScopeId;
+  cloned.isCloned = true;
+  if (deep) {
+    if (vnode.children) {
+      cloned.children = cloneVNodes(vnode.children, true);
+    }
+    if (componentOptions && componentOptions.children) {
+      componentOptions.children = cloneVNodes(componentOptions.children, true);
+    }
+  }
+  return cloned;
+}
+
+export function cloneVNodes(vnodes, deep) {
+  const len = vnodes.length;
+  const res = new Array(len);
+  for (let i = 0; i < len; i++) {
+    res[i] = cloneVNode(vnodes[i], deep);
+  }
+  return res;
+}
+
+export function cloneElement(n, nodeProps = {}, deep) {
+  let ele = n;
+  if (Array.isArray(n)) {
+    ele = filterEmpty(n)[0];
+  }
+  if (!ele) {
+    return null;
+  }
+  const node = cloneVNode(ele, deep);
+  // // 函数式组件不支持clone  https://github.com/vueComponent/ant-design-vue/pull/1947
+  // warning(
+  //   !(node.fnOptions && node.fnOptions.functional),
+  //   `can not use cloneElement for functional component (${node.fnOptions && node.fnOptions.name})`,
+  // );
+  const { props = {}, key, on = {}, nativeOn = {}, children, directives = [] } = nodeProps;
+  const data = node.data || {};
+  let cls = {};
+  let style = {};
+  const {
+    attrs = {},
+    ref,
+    domProps = {},
+    style: tempStyle = {},
+    class: tempCls = {},
+    scopedSlots = {},
+  } = nodeProps;
+
+  if (typeof data.style === 'string') {
+    style = parseStyleText(data.style);
+  } else {
+    style = { ...data.style, ...style };
+  }
+  if (typeof tempStyle === 'string') {
+    style = { ...style, ...parseStyleText(style) };
+  } else {
+    style = { ...style, ...tempStyle };
+  }
+
+  if (typeof data.class === 'string' && data.class.trim() !== '') {
+    data.class.split(' ').forEach(c => {
+      cls[c.trim()] = true;
+    });
+  } else if (Array.isArray(data.class)) {
+    classNames(data.class)
+      .split(' ')
+      .forEach(c => {
+        cls[c.trim()] = true;
+      });
+  } else {
+    cls = { ...data.class, ...cls };
+  }
+  if (typeof tempCls === 'string' && tempCls.trim() !== '') {
+    tempCls.split(' ').forEach(c => {
+      cls[c.trim()] = true;
+    });
+  } else {
+    cls = { ...cls, ...tempCls };
+  }
+  node.data = Object.assign({}, data, {
+    style,
+    attrs: { ...data.attrs, ...attrs },
+    class: cls,
+    domProps: { ...data.domProps, ...domProps },
+    scopedSlots: { ...data.scopedSlots, ...scopedSlots },
+    directives: [...(data.directives || []), ...directives],
+  });
+
+  if (node.componentOptions) {
+    node.componentOptions.propsData = node.componentOptions.propsData || {};
+    node.componentOptions.listeners = node.componentOptions.listeners || {};
+    node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props };
+    node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on };
+    if (children) {
+      node.componentOptions.children = children;
+    }
+  } else {
+    if (children) {
+      node.children = children;
+    }
+    node.data.on = { ...(node.data.on || {}), ...on };
+  }
+  node.data.on = { ...(node.data.on || {}), ...nativeOn };
+
+  if (key !== undefined) {
+    node.key = key;
+    node.data.key = key;
+  }
+  if (typeof ref === 'string') {
+    node.data.ref = ref;
+  }
+  return node;
+}

package/src/detail-table-item.vue

@@ -0,0 +1,19 @@
+<template></template>
+<script>
+export default {
+  name: 'LamboDetailTableItem',
+  props: {
+    prefixCls: {
+      type: String,
+      default: "lambo-detail-table",
+    },
+    label: String,
+    span: {
+      type: Number,
+      default: 1
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

package/src/detail-table.vue

@@ -0,0 +1,178 @@
+<template>
+  <div
+    :class="[
+      prefixCls,
+      {
+        [`${prefixCls}-${size}`]: size !== 'default',
+        [`${prefixCls}-bordered`]: !!bordered,
+      },
+    ]"
+  >
+    <div v-if="title" :class="[`${prefixCls}-title`]">{{ title }}</div>
+    <div :class="[`${prefixCls}-view`]">
+      <table>
+        <tbody>
+          <Row
+            v-for="(item, index) in childrenArray"
+            :children="item"
+            :key="index"
+            :index="index"
+            :prefixCls="prefixCls"
+            :bordered="bordered"
+            :layout="layout"
+            :colon="colon"
+          ></Row>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  isValidElement,
+  getOptionProps,
+} from "./components/props-util";
+import { cloneElement } from "./components/vnode";
+import Row from "./components/Row";
+const defaultColumnMap = {
+  xxl: 3,
+  xl: 3,
+  lg: 3,
+  md: 3,
+  sm: 2,
+  xs: 1,
+};
+function toArray(value) {
+  let ret = value;
+  if (value === undefined) {
+    ret = [];
+  } else if (!Array.isArray(value)) {
+    ret = [value];
+  }
+  return ret;
+}
+export default {
+  name: "LamboDetailTable",
+  components: { Row },
+  props: {
+    prefixCls: {
+      type: String,
+      default: "lambo-detail-table",
+    },
+    bordered: Boolean,
+    size: {
+      type: String,
+      default: "default",
+      validator: function (value) {
+        return ["default", "middle", "small"].indexOf(value) !== -1;
+      },
+    },
+    title: String,
+    column: Number,
+    layout: {
+      type: String,
+      default: "horizontal",
+      validator: function (value) {
+        return ["horizontal", "vertical"].indexOf(value) !== -1;
+      },
+    },
+    colon: Boolean,
+  },
+  data() {
+    return {
+      screens: {},
+      token: undefined,
+      childrenArray:null
+    };
+  },
+  computed: {
+    /*childrenArray: function () {
+      return this.refreshTable();
+    },*/
+  },
+  methods: {
+    refreshTable(){
+      this.childrenArray = null;
+      const { prefixCls } = this;
+      const children = this.$slots.default;
+      const cloneChildren = toArray(children)
+        .map((child) => {
+          if (isValidElement(child)) {
+            return cloneElement(child, {
+              props: {
+                prefixCls,
+              },
+            });
+          }
+          return null;
+        })
+        .filter((node) => node);
+      const column = this.getColumn();
+      this.childrenArray = this.generateChildrenRows(cloneChildren, column);
+    },
+    getColumn() {
+      const { column } = this.$props;
+      // if (typeof column === "object") {
+      //   for (let i = 0; i < responsiveArray.length; i++) {
+      //     const breakpoint = responsiveArray[i];
+      //     if (this.screens[breakpoint] && column[breakpoint] !== undefined) {
+      //       return column[breakpoint] || defaultColumnMap[breakpoint];
+      //     }
+      //   }
+      // }
+      // If the configuration is not an object, it is a number, return number
+      if (typeof column === "number") {
+        return column;
+      }
+      // If it is an object, but no response is found, this happens only in the test.
+      // Maybe there are some strange environments
+      return 3;
+    },
+    generateChildrenRows(children, column) {
+      const rows = [];
+      let columns = null;
+      let leftSpans;
+
+      const itemNodes = toArray(children);
+      itemNodes.forEach((node, index) => {
+        const itemProps = getOptionProps(node);
+        let itemNode = node;
+
+        if (!columns) {
+          leftSpans = column;
+          columns = [];
+          rows.push(columns);
+        }
+
+        // Always set last span to align the end of Descriptions
+        const lastItem = index === itemNodes.length - 1;
+        let lastSpanSame = true;
+        if (lastItem) {
+          lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
+          itemNode = cloneElement(itemNode, {
+            props: {
+              span: leftSpans,
+            },
+          });
+        }
+
+        // Calculate left fill span
+        const { span = 1 } = itemProps;
+        columns.push(itemNode);
+        leftSpans -= span;
+
+        if (leftSpans <= 0) {
+          columns = null;
+        }
+      });
+      return rows;
+    },
+  },
+  mounted() {
+    this.refreshTable();
+  }
+};
+</script>
+<style lang="less" scoped>
+@import "styles/css/index";
+</style>

package/src/styles/css/index.less

@@ -0,0 +1,145 @@
+.lambo-detail-table-style(){
+  @descriptions-prefix-cls: lambo-detail-table;
+
+  @descriptions-default-padding: 16px 24px;
+  @descriptions-middle-padding: 12px 24px;
+  @descriptions-small-padding: 8px 16px;
+
+  .@{descriptions-prefix-cls} {
+    &-title {
+      margin-bottom: 20px;
+      color: fade(#000, 85%);
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 1.5;
+    }
+
+    &-view {
+      width: 100%;
+      overflow: hidden;
+      border-radius: 4px;
+      table {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: collapse
+      }
+    }
+
+    &-row {
+      > th,
+      > td {
+        padding-bottom: 16px;
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &-item-label {
+      color: fade(#000, 85%);
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 1.5;
+
+      &::after {
+        position: relative;
+        top: -0.5px;
+        margin: 0 8px 0 2px;
+        content: ' ';
+      }
+    }
+
+    &-item-colon {
+      &::after {
+        content: ':';
+      }
+    }
+
+    &-item-no-label {
+      &::after {
+        margin: 0;
+        content: '';
+      }
+    }
+
+    &-item-content {
+      display: table-cell;
+      color: fade(#000, 65%);;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    &-item {
+      padding-bottom: 0;
+      > span {
+        display: inline-block;
+      }
+    }
+
+    &-middle {
+      .@{descriptions-prefix-cls}-row {
+        > th,
+        > td {
+          padding-bottom: 12px;
+        }
+      }
+    }
+
+    &-small {
+      .@{descriptions-prefix-cls}-row {
+        > th,
+        > td {
+          padding-bottom: 8px;
+        }
+      }
+    }
+
+    &-bordered {
+      .@{descriptions-prefix-cls}-view {
+        border: 1px solid hsv(0, 0, 91%);
+        > table {
+          table-layout: auto;
+        }
+      }
+
+      .@{descriptions-prefix-cls}-item-label,
+      .@{descriptions-prefix-cls}-item-content {
+        padding: @descriptions-default-padding;
+        border-right: 1px solid hsv(0, 0, 91%); ;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      .@{descriptions-prefix-cls}-item-label {
+        background-color: #fafafa;
+        &::after {
+          display: none;
+        }
+      }
+
+      .@{descriptions-prefix-cls}-row {
+        border-bottom: 1px solid hsv(0, 0, 91%);
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      &.@{descriptions-prefix-cls}-middle {
+        .@{descriptions-prefix-cls}-item-label,
+        .@{descriptions-prefix-cls}-item-content {
+          padding: @descriptions-middle-padding;
+        }
+      }
+
+      &.@{descriptions-prefix-cls}-small {
+        .@{descriptions-prefix-cls}-item-label,
+        .@{descriptions-prefix-cls}-item-content {
+          padding: @descriptions-small-padding;
+        }
+      }
+    }
+  }
+}
+