chore: release 1.9.0-naruto (#3062)

* docs(Card): update api (#3021) * docs(Card): update api * chore: update _common * fix(loading): fix functional repeated call error (#3025) * docs: update unplugin usage desc with webpack (#3030) * feat(form): change form methods type-definition to required (#3034) change form methods type-definition to required * feat(descriptions): add descriptions (#3035) * feat(descriptions): add descriptions * feat(descriptions): example test * feat(descriptions): utils ts * feat(descriptions): descriptions body * test(descriptions): update snap * fix(descriptions): tDescriptionsBody * chore(descriptions): remove * fix(table): 移除非必要的分页监听 (#3046) * fix(table): pagination * fix: lint error * fix: fix the bug of textarea with maxlength can't input before limit (#3044) * fix(tag-input): pass size api to collapse item (#3055) * feat(Slider): support change end API (#3056) * feat(Slider): support change end API * feat(Slider): support change end API * fix(Select): fix clear trigger onchange callback twice (#3054) * fix(Select): fix clear trigger onchange callback twice * chore: fix lint * fix(textarea): value绑定值时，autosize时无法输入中文问题 (#3057) * fix(Form): fix form string length test (#3058) * chore: release 1.9.0 (#3059) * chore: release 1.9.0 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: liweijie0812 <674416404@qq.com> Co-authored-by: Zz-ZzzZ <48228016+Zz-ZzzZ@users.noreply.github.com> Co-authored-by: iiimix <hu@iiimix.cn> Co-authored-by: zhangpaopao <zhangpaopao0609@gmail.com> Co-authored-by: sheepluo <yaoyanhuoyi@qq.com> Co-authored-by: 梓晨 <anzixuan168@163.com> Co-authored-by: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Jan 25, 2024 · 462988c · 462988c
1 parent 15b0113
commit 462988c
Show file tree

Hide file tree

Showing 57 changed files with 1,747 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,24 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.9.0 `2024-01-23` 
+### 🚀 Features
+- `Descriptions`: 新增 `Descriptions` 描述组件 @zhangpaopao0609 ([#3035](https://github.com/Tencent/tdesign-vue/pull/3035))
+- `Slider`:  新增 `changeEnd` 事件 API @uyarn ([#3056](https://github.com/Tencent/tdesign-vue/pull/3056))
+### 🐞 Bug Fixes
+- `Loading`: 修复重复调用`LoadingPlugin()`时报错 @Zz-ZzzZ ([#3025](https://github.com/Tencent/tdesign-vue/pull/3025))
+- `Textarea`: 修复设置`maxlength`后，在windows自带输入法中，中文时不到最大长度也会自动覆盖之前已输入内容的缺陷 @azx1573 ([#3044](https://github.com/Tencent/tdesign-vue/pull/3044))
+- `Textarea`: value绑定值时，autosize时无法输入中文问题 @LoopZhou ([#3057](https://github.com/Tencent/tdesign-vue/pull/3057))
+- `TagInput`: 修复`size` API 没有作用到折叠选项的问题 @uyarn ([#3055](https://github.com/Tencent/tdesign-vue/pull/3055))
+- `Select`: 修复点击清除按钮触发多次`onChange`事件的异常 @uyarn ([#3054](https://github.com/Tencent/tdesign-vue/pull/3054))
+- `Form`: 修复计算`^`字符长度异常的问题 @uyarn ([#3058](https://github.com/Tencent/tdesign-vue/pull/3058))
+- `Form`: 更正表单组件实例方法为非`required`类型 @iiimix ([#3034](https://github.com/Tencent/tdesign-vue/pull/3034))
+### 🚧 Others
+- docs(Card): 更新组件 API 文档 @liweijie0812 ([#3021](https://github.com/Tencent/tdesign-vue/pull/3021))
+- docs: 更正 `webpack` 中使用 `unplugin-auto-import`的说明文档 @uyarn ([#3030](https://github.com/Tencent/tdesign-vue/pull/3030))
+
+
+
 ## 🌈 1.8.4 `2024-01-02` 
 ### 🚀 Features
 - `Upload`: 手动上传场景，支持进行粘贴上传 @chaishi ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.8.4-naruto",
+  "version": "1.9.0-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [

diff --git a/script/generate-usage/config.js b/script/generate-usage/config.js
@@ -664,4 +664,17 @@ module.exports = {
       `,
     },
   },
+  descriptions: {
+    panelStr: `const panelList = [{label: 'descriptions', value: 'descriptions'}];`,
+    render: {
+      descriptions: `
+        <t-descriptions title="Shipping address" v-bind="configProps">
+          <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+          <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+          <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+          <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+        </t-descriptions>
+      `,
+    },
+  },
 };
diff --git a/site/docs/getting-started.en-US.md b/site/docs/getting-started.en-US.md
@@ -115,10 +115,10 @@ const { TDesignResolver } = require('unplugin-vue-components/resolvers');
 module.exports = {
   // ...
   plugins: [
-    AutoImport({
+    AutoImport.default({
       resolvers: [TDesignResolver()],
     }),
-    Components({
+    Components.default({
       resolvers: [TDesignResolver()],
     }),
   ],

diff --git a/site/docs/getting-started.md b/site/docs/getting-started.md
@@ -125,10 +125,10 @@ const { TDesignResolver } = require('unplugin-vue-components/resolvers');
 module.exports = {
   // ...
   plugins: [
-    AutoImport({
+    AutoImport.default({
       resolvers: [TDesignResolver()],
     }),
-    Components({
+    Components.default({
       resolvers: [TDesignResolver()],
     }),
   ],

diff --git a/site/site.config.mjs b/site/site.config.mjs
@@ -456,6 +456,14 @@ const docs = [
         component: () => import('tdesign-vue/comment/comment.md'),
         componentEn: () => import('tdesign-vue/comment/comment.en-US.md'),
       },
+      {
+        title: 'Descriptions 描述',
+        titleEn: 'Descriptions',
+        name: 'descriptions',
+        path: '/vue/components/descriptions',
+        component: () => import('tdesign-vue/descriptions/descriptions.md'),
+        componentEn: () => import('tdesign-vue/descriptions/descriptions.en-US.md'),
+      },
       {
         title: 'Image 图片',
         titleEn: 'Image',

diff --git a/src/_common b/src/_common
diff --git a/src/card/card.en-US.md b/src/card/card.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Card Props
 
 name | type | default | description | required

diff --git a/src/card/card.md b/src/card/card.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Card Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -17,7 +16,7 @@ footer | String / Slot / Function | - | 卡片底部内容，可完全自定义
 header | String / Slot / Function | - | 卡片顶部内容，优先级高于其他所有元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
 hoverShadow | Boolean | false | hover时是否有阴影 | N
-loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N

diff --git a/src/card/props.ts b/src/card/props.ts
@@ -49,7 +49,7 @@ export default {
   headerBordered: Boolean,
   /** hover时是否有阴影 */
   hoverShadow: Boolean,
-  /** 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容 */
+  /** 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容 */
   loading: {
     type: [Boolean, Function] as PropType<TdCardProps['loading']>,
     default: false,

diff --git a/src/card/type.ts b/src/card/type.ts
@@ -56,7 +56,7 @@ export interface TdCardProps {
    */
   hoverShadow?: boolean;
   /**
-   * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容
+   * 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Skeleton 组件完全自定义加载态呈现内容
    * @default false
    */
   loading?: boolean | TNode;

diff --git a/src/common.ts b/src/common.ts
@@ -62,6 +62,11 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
 
+export enum LayoutEnum {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
+
 export type ClassName = { [className: string]: any } | ClassName[] | string;
 
 export type CSSSelector = string;

diff --git a/src/components.ts b/src/components.ts
@@ -49,6 +49,7 @@ export * from './badge';
 export * from './calendar';
 export * from './card';
 export * from './comment';
+export * from './descriptions';
 export * from './image';
 export * from './image-viewer';
 export * from './list';

diff --git a/src/descriptions/_example/base.vue b/src/descriptions/_example/base.vue
@@ -0,0 +1,10 @@
+<template>
+  <t-descriptions title="Shipping address">
+    <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+    <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+    <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+    <t-descriptions-item label="Address"
+    >Shenzhen Penguin Island D1 4A Mail Center<template #content>asds</template></t-descriptions-item
+    >
+  </t-descriptions>
+</template>
diff --git a/src/descriptions/_example/bordered.vue b/src/descriptions/_example/bordered.vue
@@ -0,0 +1,8 @@
+<template>
+  <t-descriptions title="Shipping address" bordered :column="3">
+    <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+    <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+    <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+    <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+  </t-descriptions>
+</template>
diff --git a/src/descriptions/_example/colon.vue b/src/descriptions/_example/colon.vue
@@ -0,0 +1,21 @@
+<template>
+  <t-space direction="vertical">
+    <t-checkbox v-model="checked">colon</t-checkbox>
+    <t-descriptions title="Shipping address" bordered :colon="checked" :column="3">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: false,
+    };
+  },
+};
+</script>
diff --git a/src/descriptions/_example/column.vue b/src/descriptions/_example/column.vue
@@ -0,0 +1,22 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="column" :options="columnOptions"></t-radio-group>
+    <t-descriptions bordered :column="column">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      columnOptions: [2, 3, 4],
+      column: 2,
+    };
+  },
+};
+</script>
diff --git a/src/descriptions/_example/custom-style.vue b/src/descriptions/_example/custom-style.vue
@@ -0,0 +1,14 @@
+<template>
+  <t-descriptions
+    title="Shipping address"
+    bordered
+    :label-style="{ width: '100px', textAlign: 'left' }"
+    :content-style="{ textAlign: 'right' }"
+    :column="3"
+  >
+    <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+    <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+    <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+    <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+  </t-descriptions>
+</template>
diff --git a/src/descriptions/_example/items.vue b/src/descriptions/_example/items.vue
@@ -0,0 +1,20 @@
+<template>
+  <t-descriptions title="Shipping address" :items="items" :column="3" />
+</template>
+
+<script lang="jsx">
+import Base from './base.vue';
+
+const items = [
+  { label: 'Name', content: 'TDesign' },
+  { label: Base, content: '139****0609' },
+];
+
+export default {
+  data() {
+    return {
+      items,
+    };
+  },
+};
+</script>
diff --git a/src/descriptions/_example/layout.vue b/src/descriptions/_example/layout.vue
@@ -0,0 +1,33 @@
+<template>
+  <t-space direction="vertical">
+    <t-row>
+      <span>layout：</span>
+      <t-radio-group v-model="layout" :options="layoutOptions"></t-radio-group>
+    </t-row>
+
+    <t-row>
+      <span>itemLayout：</span>
+      <t-radio-group v-model="itemLayout" :options="itemLayoutOptions"></t-radio-group>
+    </t-row>
+
+    <t-descriptions title="Shipping address" bordered :layout="layout" :item-layout="itemLayout" :column="3">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      layout: 'horizontal',
+      itemLayout: 'horizontal',
+      layoutOptions: ['horizontal', 'vertical'],
+      itemLayoutOptions: ['horizontal', 'vertical'],
+    };
+  },
+};
+</script>
diff --git a/src/descriptions/_example/size.vue b/src/descriptions/_example/size.vue
@@ -0,0 +1,22 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="size" :options="sizeOptions"></t-radio-group>
+    <t-descriptions bordered :size="size" :column="3">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      size: 'medium',
+      sizeOptions: ['large', 'medium', 'small'],
+    };
+  },
+};
+</script>
diff --git a/src/descriptions/_usage/index.vue b/src/descriptions/_usage/index.vue
@@ -0,0 +1,32 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
+    <template #descriptions="{ configProps }">
+      <t-descriptions title="Shipping address" v-bind="configProps">
+        <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+        <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+        <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+        <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+      </t-descriptions>
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'descriptions', value: 'descriptions' }];
+
+const usageCodeMap = {
+  descriptions:
+    '\n        <t-descriptions title="Shipping address" v-bind="configProps">\n          <t-descriptions-item label="Name">TDesign</t-descriptions-item>\n          <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>\n          <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>\n          <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>\n        </t-descriptions>\n      ',
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>