feat(n-descriptions): add content-class label-class prop

tusen-ai · Sep 22, 2023 · 4c5e541 · 4c5e541
1 parent ef7279e
commit 4c5e541
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 6 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -48,6 +48,7 @@
 - `n-tree` adds node information for `render-switcher-icon` props, closes [#4815](https://github.com/tusen-ai/naive-ui/issues/4815).
 - `n-input-number` export the `select` method.
 - `n-data-table` adds `n-data-table-tr--expanded` class to expanded rows, and `n-data-table-tr n-data-table-tr--expand` class to the additional row, closes [#4420](https://github.com/tusen-ai/naive-ui/issues/4420).
+- `n-descriptions` adds `content-class` `label-class` prop.
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -48,6 +48,7 @@
 - `n-tree` 为 `render-switcher-icon` 属性添加节点信息，关闭 [#4815](https://github.com/tusen-ai/naive-ui/issues/4815)
 - `n-input-number` 导出 `select` 方法
 - `n-data-table` 新增 `n-data-table-tr--expanded` class 到展开行，新增 `n-data-table-tr n-data-table-tr--expand` class 到附加行，关闭 [#4420](https://github.com/tusen-ai/naive-ui/issues/4420).
+- `n-descriptions` 新增 `content-class` `label-class` 属性
 
 ### i18n
 

diff --git a/src/descriptions/demos/enUS/index.demo-entry.md b/src/descriptions/demos/enUS/index.demo-entry.md
@@ -23,9 +23,11 @@ size.vue
 | --- | --- | --- | --- |
 | bordered | `boolean` | `false` | Whether to display border. |
 | column | `number` | `3` | Total columns. |
+| content-class | `string` | `undefined` | Class of the item content. |
 | content-style | `Object \| string` | `undefined` | Style of the item content. |
 | label-align | `'center' \| 'left' \| 'right'` | `'left'` | Label align. |
 | label-placement | `'top' \| 'left'` | `'top'` | Label placement. |
+| label-class | `string` | `undefined` | Class of the item label. |
 | label-style | `Object \| string` | `undefined` | Style of the item label. |
 | separator | `string` | `':'` | Separator, only work when `label-placement` is `left` and 　`bordered` is `false`.　 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the description. |
@@ -35,8 +37,10 @@ size.vue
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| content-class | `string` | `undefined` | Class of the item content. |
 | content-style | `Object \| string` | `undefined` | Style of the item content. |
 | label | `string` | `undefined` | Label of the item. |
+| label-class | `string` | `undefined` | Class of the item label. |
 | label-style | `Object \| string` | `undefined` | Style of the item label. |
 | span | `number` | `1` | Column span of the item. |
 

diff --git a/src/descriptions/demos/zhCN/index.demo-entry.md b/src/descriptions/demos/zhCN/index.demo-entry.md
@@ -24,9 +24,11 @@ single-line-debug.vue
 | --- | --- | --- | --- |
 | bordered | `boolean` | `false` | 是否显示 border |
 | column | `number` | `3` | 设置的总列数 |
+| content-class | `string` | `undefined` | 内容的类名 |
 | content-style | `Object \| string` | `undefined` | 内容的样式 |
 | label-align | `'center' \| 'left' \| 'right'` | `'left'` | label 对齐方式 |
 | label-placement | `'top' \| 'left'` | `'top'` | label 显示位置 |
+| label-class | `string` | `undefined` | label 的类名 |
 | label-style | `Object \| string` | `undefined` | label 的样式 |
 | separator | `string` | `':'` | 分隔符，`label-placement` 为 `left` 并且　`bordered`　为 `false`　时生效 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
@@ -36,8 +38,10 @@ single-line-debug.vue
 
 | 名称          | 类型               | 默认值      | 说明            |
 | ------------- | ------------------ | ----------- | --------------- |
+| content-class | `string`           | `undefined` | 内容的类名      |
 | content-style | `Object \| string` | `undefined` | 内容的样式      |
 | label         | `string`           | `undefined` | 显示的 label 值 |
+| label-class   | `string`           | `undefined` | label 的类名    |
 | label-style   | `Object \| string` | `undefined` | label 的样式    |
 | span          | `number`           | `1`         | 所占的单元格数  |
 

diff --git a/src/descriptions/src/Descriptions.tsx b/src/descriptions/src/Descriptions.tsx
@@ -48,7 +48,9 @@ export const descriptionsProps = {
     default: 'medium'
   },
   bordered: Boolean,
+  labelClass: String,
   labelStyle: [Object, String] as PropType<string | CSSProperties>,
+  contentClass: String,
   contentStyle: [Object, String] as PropType<string | CSSProperties>
 } as const
 
@@ -146,6 +148,8 @@ export default defineComponent({
     const children = defaultSlots ? flatten(defaultSlots()) : []
     const memorizedLength = children.length
     const {
+      contentClass,
+      labelClass,
       compitableColumn,
       labelPlacement,
       labelAlign,
@@ -196,14 +200,20 @@ export default defineComponent({
         if (bordered) {
           state.row.push(
             <th
-              class={`${mergedClsPrefix}-descriptions-table-header`}
+              class={[
+                `${mergedClsPrefix}-descriptions-table-header`,
+                labelClass
+              ]}
               colspan={1}
               style={labelStyle}
             >
               {itemLabel}
             </th>,
             <td
-              class={`${mergedClsPrefix}-descriptions-table-content`}
+              class={[
+                `${mergedClsPrefix}-descriptions-table-content`,
+                contentClass
+              ]}
               colspan={
                 isLastIteration
                   ? (compitableColumn - memorizedSpan) * 2 + 1
@@ -225,7 +235,10 @@ export default defineComponent({
               }
             >
               <span
-                class={`${mergedClsPrefix}-descriptions-table-content__label`}
+                class={[
+                  `${mergedClsPrefix}-descriptions-table-content__label`,
+                  labelClass
+                ]}
                 style={labelStyle}
               >
                 {[
@@ -238,7 +251,10 @@ export default defineComponent({
                 ]}
               </span>
               <span
-                class={`${mergedClsPrefix}-descriptions-table-content__content`}
+                class={[
+                  `${mergedClsPrefix}-descriptions-table-content__content`,
+                  contentClass
+                ]}
                 style={contentStyle}
               >
                 {itemChildren}
@@ -252,7 +268,7 @@ export default defineComponent({
           : itemSpan * 2
         state.row.push(
           <th
-            class={`${mergedClsPrefix}-descriptions-table-header`}
+            class={[`${mergedClsPrefix}-descriptions-table-header`, labelClass]}
             colspan={colspan}
             style={labelStyle}
           >
@@ -261,7 +277,10 @@ export default defineComponent({
         )
         state.secondRow.push(
           <td
-            class={`${mergedClsPrefix}-descriptions-table-content`}
+            class={[
+              `${mergedClsPrefix}-descriptions-table-content`,
+              contentClass
+            ]}
             colspan={colspan}
             style={contentStyle}
           >

diff --git a/src/descriptions/src/DescriptionsItem.ts b/src/descriptions/src/DescriptionsItem.ts
@@ -8,7 +8,9 @@ export const descriptionsItemProps = {
     type: Number,
     default: 1
   },
+  labelClass: String,
   labelStyle: [Object, String] as PropType<string | CSSProperties>,
+  contentClass: String,
   contentStyle: [Object, String] as PropType<string | CSSProperties>
 } as const