fix: 更改描述组件的一些类型定义

ksc-fe · Jun 14, 2024 · dc66c16 · dc66c16
1 parent 6546eb0
commit dc66c16
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 118 deletions.
diff --git a/components/descriptions/demos/basic.md b/components/descriptions/demos/basic.md
@@ -3,13 +3,16 @@ title: 基本用法
 order: 0
 ---
 
-常见于详情页的信息展示 默认自带超长省略, 可通过DescriptionsItem形式渲染数据或者提供columns属性。
+常见于详情页的信息展示 默认自带超长省略, 可通过DescriptionItem形式渲染数据或者提供items属性。
 
 ```vdt
 import {Descriptions, DescriptionItem} from 'kpc';
 
 <div>
-    <Descriptions title="基本信息">
+
+    <Descriptions title="基础信息" items={this.get('items')} columns={4}/>
+
+    <Descriptions title="基础信息">
         <DescriptionItem label="测试1">测试1</DescriptionItem>
         <DescriptionItem label="测试2">测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长</DescriptionItem>
         <DescriptionItem label="测试3">测试3</DescriptionItem>
@@ -25,20 +28,18 @@ import {Descriptions, DescriptionItem} from 'kpc';
 ```
 
 ```ts
-
 export default class extends Component {
     static template = template;
     static defaults() {
         return {
             items: [
-                {label:'测试1', content:'测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试测试测试测试测试试测试测试测试测试试测试测试测试测试试测试测试测试测试'
-                },
-                {label:'测试2', content:'测试2'},
-                {label:'测试3', content:'测试3'},
-                {label:'测试4', content:'测试4'},
+                {label:'label1', content:'测试1'},
+                {label:'label2', content:'测试测试'},
+                {label:'label3', content: '测试3'},
+                {label:'label4', content:'测试4', append: 'option'},
             ]
         };
-    }
+    };
 }
 ```
 

diff --git a/components/descriptions/demos/custom.md b/components/descriptions/demos/custom.md
@@ -3,23 +3,43 @@ title: 自定义内容
 order: 1
 ---
 
-两种使用方式均支持自定义内容。DescriptionsItem提供了option插槽便于自定义内容, 若通过columns形式传入则需要配置option字段作为自定义渲染内容。
-
+两种使用方式均支持自定义内容。DescriptionItem提供了append插槽便于自定义内容, 若通过items形式传入则需要配置append字段作为自定义渲染内容。
 
 ```vdt
-import {Descriptions, DescriptionItem, Copy} from 'kpc';
+import {Descriptions, DescriptionItem, Copy, Button, Tooltip, Icon} from 'kpc';
 
 <div>
-    <Descriptions title="基本信息" columns={this.get('items')} column={4}/>
-
-    <Descriptions title="基本信息">
-        <DescriptionItem label="label1">测试测试
-            <b:option> <Copy text="Hello King Desgin!" /></b:option>
+    <Descriptions title="基础信息">
+        <b:title>
+            <span>自定义标题</span>
+            <Tooltip content="custom title">
+                <Icon class="k-icon-question" />
+            </Tooltip>
+        </b:title>
+        <DescriptionItem label="label1">
+            测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
+            <b:append>
+                <Copy text="success" />
+            </b:append>
+        </DescriptionItem>
+        <DescriptionItem label="label2">
+            测试
+        </DescriptionItem>
+        <DescriptionItem label="label3">
+            <b:label>
+                <span>自定义label</span>
+                <Tooltip content="custom label">
+                    <Icon class="k-icon-question" />
+                </Tooltip>
+            </b:label>
+            测试
+        </DescriptionItem>
+        <DescriptionItem label="label4">
+            <span>测试4</span>
+            <Button type="link">分配项目</Button>
         </DescriptionItem>
-        <DescriptionItem label="label2">测试2</DescriptionItem>
-        <DescriptionItem label="label3">测试3</DescriptionItem>
-        <DescriptionItem label="label4">测试4</DescriptionItem>
         <DescriptionItem label="label5">测试5</DescriptionItem>
+        <DescriptionItem label="label6">测试6</DescriptionItem>
     </Descriptions>
 </div>
 ```
@@ -29,24 +49,3 @@ import {Descriptions, DescriptionItem, Copy} from 'kpc';
     padding 10px
 ```
 
-```ts
-export default class extends Component {
-    static template = template;
-    static defaults() {
-        return {
-            items: [
-                {label:'label1', content:'测试1'},
-                {label:'label2', content:'测试测试'},
-                {label:'label3', content: '测试3'},
-                {label:'label4', content:'测试4', option: 'option'},
-            ]
-        };
-    };
-}
-```
-
-
-
-
-
-
diff --git a/components/descriptions/demos/vertical.md b/components/descriptions/demos/vertical.md
@@ -9,7 +9,7 @@ order: 2
 import {Descriptions, DescriptionItem} from 'kpc';
 
 <div>
-    <Descriptions title="基本信息" vertical>
+    <Descriptions title="基础信息" vertical>
         <DescriptionItem label="测试1">测试1</DescriptionItem>
         <DescriptionItem label="测试2">测试2</DescriptionItem>
         <DescriptionItem label="测试3">测试3</DescriptionItem>

diff --git a/components/descriptions/descriptions.ts b/components/descriptions/descriptions.ts
@@ -2,26 +2,38 @@ import {Component, TypeDefs} from 'intact';
 import {DescriptionItemProps} from './item';
 import template from './descriptions.vdt';
 import { useConfigContext } from '../config';
+import { VNode } from "intact";
 
 export interface DescriptionsProps {
     vertical?: boolean
-    column?: number
-    columns?: DescriptionItemProps[]
-    title?: string
+    columns?: number
+    items?: DescriptionItemProps[]
+    title?: string | number | VNode
 }
 
+export interface DescriptionsBlocks {
+    title: null
+}
+
+
+export interface DescriptionsEvents {}
+
+
 const typeDefs: Required<TypeDefs<DescriptionsProps>> = {
     vertical: Boolean,
-    column: Number,
-    columns: Array,
-    title: String,
+    columns: Number,
+    items: Array,
+    title: [String, Number, VNode],
 };
 
+
+
+
 const defaults = (): Partial<DescriptionsProps> => ({
-    column: 3,
+    columns: 3,
 });
 
-export class Descriptions extends Component<DescriptionsProps> {
+export class Descriptions extends Component<DescriptionsProps, DescriptionsEvents, DescriptionsBlocks> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;

diff --git a/components/descriptions/descriptions.vdt b/components/descriptions/descriptions.vdt
@@ -3,22 +3,26 @@ import {makeStyles} from './styles';
 import {getRestProps} from '../utils';
 
 
-const {children, className, column, title, vertical, columns} = this.get();
+const {children, className, columns, title, vertical, items} = this.get();
 const { k } = this.config;
 
 const classNameObj = {
     [`${k}-descriptions`]: true,
     [`${k}-vertical`]: vertical,
     [className]: className,
-    [makeStyles(k, column)]: true,
+    [makeStyles(k, columns)]: true,
 };
 
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <div v-if={ title } class={`${k}-descriptions-title`}><label>{title}</label></div>
+    <div v-if={$blocks.title || title} class={`${k}-descriptions-title`}>
+        <b:title>
+             <template v-if={title}>{title}</template>
+        </b:title>
+    </div>
     <div class={`${k}-descriptions-content`}>
-        <template v-if={columns}>
-             <DescriptionItem v-for={columns} label={$value.label} content={$value.content} option={$value.option} />
+        <template v-if={items}>
+             <DescriptionItem v-for={items} label={$value.label} content={$value.content} append={$value.append} />
         </template>
         <template v-else>
             {children}

diff --git a/components/descriptions/index.md b/components/descriptions/index.md
@@ -13,14 +13,14 @@ sidebar: doc
 | --- | --- | --- | --- |
 | vertical | 垂直排列 | `boolean` | `false` |
 | title | 描述列表的标题，显示在最顶部 | `string` | `undefined` |
-| columns | 描述列表项内容 | `DescriptionItemProps[]` | `[]` |
-| column | 一行的 DescriptionItem 数量 | `number` | `3` |
+| items | 描述列表项内容 | `DescriptionItemProps[]` | `[]` |
+| columns | 一行的 DescriptionItem 数量 | `number` | `3` |
 
 ```ts
 import {VNode} from 'intact';
 
 export interface DescriptionItemProps {
-    label?: string
+    label?: string | number | VNode
     content?: string | number | VNode
     option?: string | number | VNode
 }
@@ -30,14 +30,21 @@ export interface DescriptionItemProps {
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| label | 内容的标题 | `string` | `undefined` |
+| label | 内容的标题 | `string` &#124; `number` &#124; `VNode` | `undefined` |
 | content | 包含内容 | `string` &#124; `number` &#124; `VNode` | `undefined` |
-| option | 自定义内容 | `string` &#124; `number` &#124; `VNode` | `undefined` |
+| append | 自定义内容 | `string` &#124; `number` &#124; `VNode` | `undefined` |
 
 # 拓展点
 
+## Descriptions
+
+| 名称 | 说明 
+| --- | --- | 
+| title | 自定义title | 
+
 ## DescriptionItem
 
 | 名称 | 说明 
 | --- | --- | 
-| option | 自定义内容 | 
+| append | 用于超长省略后的操作区自定义内容 | 
+| label | 自定义label | 
diff --git a/components/descriptions/index.spec.ts b/components/descriptions/index.spec.ts
@@ -1,14 +0,0 @@
-import CustomDemo from '~/components/descriptions/demos/custom';
-import {mount, unmount} from '../../test/utils';
-
-describe('Descriptions', () => {
-
-    afterEach(() => unmount());
-
-    it('should render correctly', () => {
-        const [instance, element] = mount(CustomDemo);
-
-        expect(element.outerHTML).to.matchSnapshot();
-    });
-
-});

diff --git a/components/descriptions/item.ts b/components/descriptions/item.ts
@@ -4,24 +4,26 @@ import template from './item.vdt';
 import { useConfigContext } from '../config';
 
 export interface DescriptionItemProps {
-    label?: string
+    label?: string | number | VNode
     content?: string | number | VNode
-    option?: string | number | VNode
+    append?: string | number | VNode
 }
 
-export interface DescriptionBlocks {
-    option: null
+export interface DescriptionItemBlocks {
+    append: null
+    label: null
 }
 
+export interface DescriptionItemEvents {}
 
 const typeDefs: Required<TypeDefs<DescriptionItemProps>> = {
-    label: String,
+    label: [String, Number, VNode],
     content: [String, Number, VNode],
-    option: [String, Number, VNode]
+    append: [String, Number, VNode]
 };
 
 
-export class DescriptionItem extends Component<DescriptionItemProps, DescriptionBlocks> {
+export class DescriptionItem extends Component<DescriptionItemProps, DescriptionItemEvents, DescriptionItemBlocks> {
     static template = template;
     static typeDefs = typeDefs;
 

diff --git a/components/descriptions/item.vdt b/components/descriptions/item.vdt
@@ -4,7 +4,7 @@ import {isFunction} from 'intact-shared';
 import {Ellipsis} from 'kpc';
 
 const {
-    children, className, span, label, content, option
+    children, className, span, label, content, append
 } = this.get();
 const { k } = this.config;
 
@@ -16,15 +16,19 @@ const classNameObj = {
 };
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <label class={`${k}-description-item-label`}>{label}</label>
+    <div class={`${k}-description-item-label`}>
+        <b:label>
+             <template v-if={label}>{label}</template>
+        </b:label>
+    </div>
     <div class={`${k}-description-centent`}>
         <Ellipsis>
             {content || children}
         </Ellipsis>
-        <div class={`${k}-description-option`} v-if={$blocks.option || option}>
-            <b:option>
-                <template v-if={option}>{option}</template>
-            </b:option>
+        <div class={`${k}-description-option`} v-if={$blocks.append || append}>
+            <b:append>
+                <template v-if={append}>{append}</template>
+            </b:append>
         </div>
     </div>
 </div>