@ebiz/designer-components 0.0.47 → 0.0.48

package/src/components/EbizDescriptions.vue

@@ -1,341 +1,341 @@
-<template>
-  <div class="ebiz-descriptions">
-    <div v-if="title || $slots.title" class="ebiz-descriptions__header">
-      <slot name="title">{{ title }}</slot>
-    </div>
-    <table 
-      class="ebiz-descriptions__body"
-      :class="[
-        `ebiz-descriptions--${size}`,
-        { 'ebiz-descriptions__body--fixed': tableLayout === 'fixed' },
-        { 'ebiz-descriptions__body--border': border }
-      ]"
-      :style="border && tableBorderColor ? {'--td-descriptions-border-color': tableBorderColor} : {}"
-    >
-      <tbody>
-        <template v-if="rows.length > 0">
-          <template v-if="layout === 'horizontal'">
-            <tr v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-              <template v-for="(item, colIndex) in row" :key="`${rowIndex}-${colIndex}`">
-                <template v-if="itemLayout === 'horizontal'">
-                  <th 
-                    class="ebiz-descriptions__label"
-                    :class="[item.labelClassName]"
-                  >
-                    <slot :name="`${item.slotName}-label`">
-                      {{ item.label }}
-                    </slot>
-                    <span v-if="colon" class="ebiz-descriptions__colon">:</span>
-                  </th>
-                  <td 
-                    :colspan="item.span * 2 - 1"
-                    class="ebiz-descriptions__content"
-                    :class="[item.contentClassName]"
-                  >
-                    <slot :name="item.slotName">
-                      {{ item.content }}
-                    </slot>
-                  </td>
-                </template>
-              </template>
-            </tr>
-          </template>
-          <template v-else>
-            <template v-for="(row, rowIndex) in rows" :key="`${rowIndex}`">
-              <template v-if="itemLayout === 'horizontal'">
-                <tr>
-                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
-                    <th 
-                      class="ebiz-descriptions__label"
-                      :class="[item.labelClassName]"
-                    >
-                      <slot :name="`${item.slotName}-label`">
-                        {{ item.label }}
-                      </slot>
-                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
-                    </th>
-                    <td 
-                      :colspan="item.span"
-                      class="ebiz-descriptions__content"
-                      :class="[item.contentClassName]"
-                    >
-                      <slot :name="item.slotName">
-                        {{ item.content }}
-                      </slot>
-                    </td>
-                  </template>
-                </tr>
-              </template>
-              <template v-else>
-                <tr>
-                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
-                    <th 
-                      :colspan="item.span"
-                      class="ebiz-descriptions__label"
-                      :class="[item.labelClassName]"
-                    >
-                      <slot :name="`${item.slotName}-label`">
-                        {{ item.label }}
-                      </slot>
-                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
-                    </th>
-                  </template>
-                </tr>
-                <tr>
-                  <template v-for="(item, colIndex) in row" :key="`content-${rowIndex}-${colIndex}`">
-                    <td 
-                      :colspan="item.span"
-                      class="ebiz-descriptions__content"
-                      :class="[item.contentClassName]"
-                    >
-                      <slot :name="item.slotName">
-                        {{ item.content }}
-                      </slot>
-                    </td>
-                  </template>
-                </tr>
-              </template>
-            </template>
-          </template>
-        </template>
-        <template v-else>
-          <slot></slot>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup>
-import { defineProps, defineEmits, computed, useSlots, ref } from 'vue';
-import { isArray, isNil } from 'lodash-es';
-
-const props = defineProps({
-  border: {
-    type: Boolean,
-    default: false
-  },
-  colon: {
-    type: Boolean,
-    default: false
-  },
-  column: {
-    type: Number,
-    default: 2
-  },
-  layout: {
-    type: String,
-    default: 'horizontal',
-    validator(val) {
-      return ['horizontal', 'vertical'].includes(val);
-    }
-  },
-  itemLayout: {
-    type: String,
-    default: 'horizontal',
-    validator(val) {
-      return ['horizontal', 'vertical'].includes(val);
-    }
-  },
-  size: {
-    type: String,
-    default: 'medium',
-    validator(val) {
-      return ['small', 'medium', 'large'].includes(val);
-    }
-  },
-  title: {
-    type: String,
-    default: ''
-  },
-  tableLayout: {
-    type: String,
-    default: 'fixed',
-    validator(val) {
-      return ['auto', 'fixed'].includes(val);
-    }
-  },
-  tableBorderColor: {
-    type: String,
-    default: ''
-  },
-  items: {
-    type: Array,
-    default: () => []
-  }
-});
-
-defineEmits([]);
-
-const slots = useSlots();
-const itemsType = ref('slots');
-
-// 计算行数据
-const rows = computed(() => {
-  // 1. 获取要渲染的 items
-  let items = [];
-
-  if (isArray(props.items) && props.items.length > 0) {
-    // 从 props.items 获取数据
-    items = props.items.map(item => ({
-      label: item.label,
-      content: item.content,
-      span: item.span || 1,
-      labelClassName: item.labelClassName || '',
-      contentClassName: item.contentClassName || '',
-      slotName: item.name || `item-${items.length}`
-    }));
-    itemsType.value = 'props';
-  } else {
-    // 从 slots 获取数据
-    const defaultSlot = slots.default?.();
-    if (defaultSlot) {
-      items = defaultSlot
-        .filter(vnode => vnode.type && 
-          (vnode.type.name === 'EbizDescriptionsItem' || 
-           vnode.type.__name === 'EbizDescriptionsItem'))
-        .map((vnode, index) => {
-          const props = vnode.props || {};
-          const span = isNil(props.span) ? 1 : Number(props.span);
-          return {
-            label: props.label || '',
-            content: '',
-            span: span > props.column ? props.column : span,
-            labelClassName: props.labelClassName || '',
-            contentClassName: props.contentClassName || '',
-            slotName: props.name || `item-${index}`,
-            children: vnode.children
-          };
-        });
-      itemsType.value = 'slots';
-    }
-  }
-
-  // 2. 判断布局，如果是垂直布局则直接返回
-  if (props.layout === 'vertical') {
-    return [items];
-  }
-
-  // 3. 水平布局时，计算每一行的item
-  const rows = [];
-  let currentRow = [];
-  let currentRowSpan = 0;
-  const { column } = props;
-
-  items.forEach((item, index) => {
-    const span = item.span || 1;
-    
-    // 如果当前行放不下了，创建新行
-    if (currentRowSpan + span > column) {
-      rows.push(currentRow);
-      currentRow = [];
-      currentRowSpan = 0;
-    }
-    
-    // 添加到当前行
-    currentRow.push({
-      ...item,
-      span: span
-    });
-    
-    currentRowSpan += span;
-    
-    // 处理最后一个元素
-    if (index === items.length - 1) {
-      // 最后一个元素填充剩余空间
-      if (currentRowSpan < column) {
-        currentRow[currentRow.length - 1].span += (column - currentRowSpan);
-      }
-      rows.push(currentRow);
-    }
-  });
-
-  return rows;
-});
-</script>
-
-<style scoped>
-.ebiz-descriptions {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.9);
-  line-height: 22px;
-}
-
-.ebiz-descriptions__header {
-  margin-bottom: 16px;
-}
-
-.ebiz-descriptions__header > * {
-  font-size: 16px;
-  font-weight: 700;
-  color: rgba(0, 0, 0, 0.9);
-  line-height: 24px;
-}
-
-.ebiz-descriptions__body {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-
-.ebiz-descriptions__body--fixed {
-  table-layout: fixed;
-}
-
-.ebiz-descriptions__body--border {
-  border-collapse: separate;
-  border-spacing: 0;
-  border-top: 1px solid var(--td-descriptions-border-color, #dcdcdc);
-  border-left: 1px solid var(--td-descriptions-border-color, #dcdcdc);
-}
-
-.ebiz-descriptions__body--border .ebiz-descriptions__label,
-.ebiz-descriptions__body--border .ebiz-descriptions__content {
-  border-right: 1px solid var(--td-descriptions-border-color, #dcdcdc);
-  border-bottom: 1px solid var(--td-descriptions-border-color, #dcdcdc);
-}
-
-.ebiz-descriptions__label {
-  font-weight: normal;
-  color: rgba(0, 0, 0, 0.6);
-  background-color: #fafafa;
-  text-align: left;
-  padding: 12px 24px 12px 12px;
-  vertical-align: top;
-}
-
-.ebiz-descriptions__colon {
-  margin: 0 8px 0 2px;
-}
-
-.ebiz-descriptions__content {
-  padding: 12px;
-  text-align: left;
-  vertical-align: top;
-}
-
-/* 尺寸相关样式 */
-.ebiz-descriptions--small .ebiz-descriptions__label,
-.ebiz-descriptions--small .ebiz-descriptions__content {
-  padding: 8px;
-}
-
-.ebiz-descriptions--medium .ebiz-descriptions__label,
-.ebiz-descriptions--medium .ebiz-descriptions__content {
-  padding: 12px;
-}
-
-.ebiz-descriptions--large .ebiz-descriptions__label,
-.ebiz-descriptions--large .ebiz-descriptions__content {
-  padding: 16px;
-}
-
-/* 不同布局的padding调整 */
-.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__label {
-  padding-left: 0;
-}
-
-.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__content {
-  padding-right: 0;
-}
+<template>
+  <div class="ebiz-descriptions">
+    <div v-if="title || $slots.title" class="ebiz-descriptions__header">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <table 
+      class="ebiz-descriptions__body"
+      :class="[
+        `ebiz-descriptions--${size}`,
+        { 'ebiz-descriptions__body--fixed': tableLayout === 'fixed' },
+        { 'ebiz-descriptions__body--border': border }
+      ]"
+      :style="border && tableBorderColor ? {'--td-descriptions-border-color': tableBorderColor} : {}"
+    >
+      <tbody>
+        <template v-if="rows.length > 0">
+          <template v-if="layout === 'horizontal'">
+            <tr v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
+              <template v-for="(item, colIndex) in row" :key="`${rowIndex}-${colIndex}`">
+                <template v-if="itemLayout === 'horizontal'">
+                  <th 
+                    class="ebiz-descriptions__label"
+                    :class="[item.labelClassName]"
+                  >
+                    <slot :name="`${item.slotName}-label`">
+                      {{ item.label }}
+                    </slot>
+                    <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                  </th>
+                  <td 
+                    :colspan="item.span * 2 - 1"
+                    class="ebiz-descriptions__content"
+                    :class="[item.contentClassName]"
+                  >
+                    <slot :name="item.slotName">
+                      {{ item.content }}
+                    </slot>
+                  </td>
+                </template>
+              </template>
+            </tr>
+          </template>
+          <template v-else>
+            <template v-for="(row, rowIndex) in rows" :key="`${rowIndex}`">
+              <template v-if="itemLayout === 'horizontal'">
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
+                    <th 
+                      class="ebiz-descriptions__label"
+                      :class="[item.labelClassName]"
+                    >
+                      <slot :name="`${item.slotName}-label`">
+                        {{ item.label }}
+                      </slot>
+                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                    </th>
+                    <td 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__content"
+                      :class="[item.contentClassName]"
+                    >
+                      <slot :name="item.slotName">
+                        {{ item.content }}
+                      </slot>
+                    </td>
+                  </template>
+                </tr>
+              </template>
+              <template v-else>
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`label-${rowIndex}-${colIndex}`">
+                    <th 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__label"
+                      :class="[item.labelClassName]"
+                    >
+                      <slot :name="`${item.slotName}-label`">
+                        {{ item.label }}
+                      </slot>
+                      <span v-if="colon" class="ebiz-descriptions__colon">:</span>
+                    </th>
+                  </template>
+                </tr>
+                <tr>
+                  <template v-for="(item, colIndex) in row" :key="`content-${rowIndex}-${colIndex}`">
+                    <td 
+                      :colspan="item.span"
+                      class="ebiz-descriptions__content"
+                      :class="[item.contentClassName]"
+                    >
+                      <slot :name="item.slotName">
+                        {{ item.content }}
+                      </slot>
+                    </td>
+                  </template>
+                </tr>
+              </template>
+            </template>
+          </template>
+        </template>
+        <template v-else>
+          <slot></slot>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed, useSlots, ref } from 'vue';
+import { isArray, isNil } from 'lodash-es';
+
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: false
+  },
+  colon: {
+    type: Boolean,
+    default: false
+  },
+  column: {
+    type: Number,
+    default: 2
+  },
+  layout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  itemLayout: {
+    type: String,
+    default: 'horizontal',
+    validator(val) {
+      return ['horizontal', 'vertical'].includes(val);
+    }
+  },
+  size: {
+    type: String,
+    default: 'medium',
+    validator(val) {
+      return ['small', 'medium', 'large'].includes(val);
+    }
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  tableLayout: {
+    type: String,
+    default: 'fixed',
+    validator(val) {
+      return ['auto', 'fixed'].includes(val);
+    }
+  },
+  tableBorderColor: {
+    type: String,
+    default: ''
+  },
+  items: {
+    type: Array,
+    default: () => []
+  }
+});
+
+defineEmits([]);
+
+const slots = useSlots();
+const itemsType = ref('slots');
+
+// 计算行数据
+const rows = computed(() => {
+  // 1. 获取要渲染的 items
+  let items = [];
+
+  if (isArray(props.items) && props.items.length > 0) {
+    // 从 props.items 获取数据
+    items = props.items.map(item => ({
+      label: item.label,
+      content: item.content,
+      span: item.span || 1,
+      labelClassName: item.labelClassName || '',
+      contentClassName: item.contentClassName || '',
+      slotName: item.name || `item-${items.length}`
+    }));
+    itemsType.value = 'props';
+  } else {
+    // 从 slots 获取数据
+    const defaultSlot = slots.default?.();
+    if (defaultSlot) {
+      items = defaultSlot
+        .filter(vnode => vnode.type && 
+          (vnode.type.name === 'EbizDescriptionsItem' || 
+           vnode.type.__name === 'EbizDescriptionsItem'))
+        .map((vnode, index) => {
+          const props = vnode.props || {};
+          const span = isNil(props.span) ? 1 : Number(props.span);
+          return {
+            label: props.label || '',
+            content: '',
+            span: span > props.column ? props.column : span,
+            labelClassName: props.labelClassName || '',
+            contentClassName: props.contentClassName || '',
+            slotName: props.name || `item-${index}`,
+            children: vnode.children
+          };
+        });
+      itemsType.value = 'slots';
+    }
+  }
+
+  // 2. 判断布局，如果是垂直布局则直接返回
+  if (props.layout === 'vertical') {
+    return [items];
+  }
+
+  // 3. 水平布局时，计算每一行的item
+  const rows = [];
+  let currentRow = [];
+  let currentRowSpan = 0;
+  const { column } = props;
+
+  items.forEach((item, index) => {
+    const span = item.span || 1;
+    
+    // 如果当前行放不下了，创建新行
+    if (currentRowSpan + span > column) {
+      rows.push(currentRow);
+      currentRow = [];
+      currentRowSpan = 0;
+    }
+    
+    // 添加到当前行
+    currentRow.push({
+      ...item,
+      span: span
+    });
+    
+    currentRowSpan += span;
+    
+    // 处理最后一个元素
+    if (index === items.length - 1) {
+      // 最后一个元素填充剩余空间
+      if (currentRowSpan < column) {
+        currentRow[currentRow.length - 1].span += (column - currentRowSpan);
+      }
+      rows.push(currentRow);
+    }
+  });
+
+  return rows;
+});
+</script>
+
+<style scoped>
+.ebiz-descriptions {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 22px;
+}
+
+.ebiz-descriptions__header {
+  margin-bottom: 16px;
+}
+
+.ebiz-descriptions__header > * {
+  font-size: 16px;
+  font-weight: 700;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 24px;
+}
+
+.ebiz-descriptions__body {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.ebiz-descriptions__body--fixed {
+  table-layout: fixed;
+}
+
+.ebiz-descriptions__body--border {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-top: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+  border-left: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+}
+
+.ebiz-descriptions__body--border .ebiz-descriptions__label,
+.ebiz-descriptions__body--border .ebiz-descriptions__content {
+  border-right: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+  border-bottom: 1px solid var(--td-descriptions-border-color, #dcdcdc);
+}
+
+.ebiz-descriptions__label {
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.6);
+  background-color: #fafafa;
+  text-align: left;
+  padding: 12px 24px 12px 12px;
+  vertical-align: top;
+}
+
+.ebiz-descriptions__colon {
+  margin: 0 8px 0 2px;
+}
+
+.ebiz-descriptions__content {
+  padding: 12px;
+  text-align: left;
+  vertical-align: top;
+}
+
+/* 尺寸相关样式 */
+.ebiz-descriptions--small .ebiz-descriptions__label,
+.ebiz-descriptions--small .ebiz-descriptions__content {
+  padding: 8px;
+}
+
+.ebiz-descriptions--medium .ebiz-descriptions__label,
+.ebiz-descriptions--medium .ebiz-descriptions__content {
+  padding: 12px;
+}
+
+.ebiz-descriptions--large .ebiz-descriptions__label,
+.ebiz-descriptions--large .ebiz-descriptions__content {
+  padding: 16px;
+}
+
+/* 不同布局的padding调整 */
+.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__label {
+  padding-left: 0;
+}
+
+.ebiz-descriptions__body:not(.ebiz-descriptions__body--border) .ebiz-descriptions__content {
+  padding-right: 0;
+}
 </style>