feat: add collapse component (#749)

* feat: add collapse component

* test: update test files

examples/collapse/collapse.md

@@ -0,0 +1,36 @@
+:: BASE_DOC ::
+
+## API
+### Collapse Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+borderless | Boolean | false | 是否为无边框模式 | N
+defaultExpandAll | Boolean | false | 默认是否展开全部 | N
+disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
+expandIcon | Boolean / Slot / Function | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+expandIconPlacement | String | left | 展开图标的位置，左侧或右侧。可选项：left/right | N
+expandMutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N
+expandOnRowClick | Boolean | true | 是否允许点击整行标题展开面板 | N
+value | Array | - | 展开的面板集合。支持语法糖 `v-model`。TS 类型：`CollapseValue` `type CollapseValue = Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/collapse/type.ts) | N
+defaultValue | Array | - | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/collapse/type.ts) | N
+onChange | Function |  | TS 类型：`(value: CollapseValue) => void`<br/>切换面板时触发，返回变化的值 | N
+
+### Collapse Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值
+
+### CollapsePanel Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String / Slot / Function | - | 折叠面板内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+default | String / Slot / Function | - | 折叠面板内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N
+disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
+expandIcon | Boolean / Slot / Function | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+header | String / Slot / Function | - | 面板头内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N

examples/collapse/demos/base.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="tdesign-collapse">
+    <t-collapse :default-value="[1]" @change="handlePanelChange">
+      <t-collapse-panel header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel destroy-on-collapse header="设置默认展开项">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel header="自定义折叠面板内容">
+        <div class="tdesign-demo-block-column" style="width: 80%">
+          <t-tag-input v-model="tags1" clearable />
+
+          <t-tag-input :value="tags2" label="Controlled: " clearable />
+
+          <t-tag-input :default-value="tags3" label="UnControlled: " clearable />
+        </div>
+      </t-collapse-panel>
+      <t-collapse-panel header="嵌套折叠面板">
+        <t-collapse default-expand-all>
+          <t-collapse-panel header="子面板1"> 这是子面板1 </t-collapse-panel>
+          <t-collapse-panel header="子面板2"> 这是子面板2 </t-collapse-panel>
+          <t-collapse-panel header="子面板3"> 这是子面板3 </t-collapse-panel>
+          <t-collapse-panel header="子面板4"> 这是子面板4 </t-collapse-panel>
+        </t-collapse>
+      </t-collapse-panel>
+    </t-collapse>
+    <div style="margin-top: 10px">当前展开项:{{ currentItem }}</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      currentItem: [1],
+      tags1: ['Vue', 'React'],
+      tags2: ['Vue', 'React'],
+      tags3: ['Vue', 'React'],
+    };
+  },
+  methods: {
+    handlePanelChange(val) {
+      this.currentItem = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.accordion-demo {
+  background-color: #f9f9f9;
+}
+.button-area {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+</style>

examples/collapse/demos/icon.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="tdesign-collapse">
+    <t-collapse :expand-icon="showArrow" :expand-icon-placement="direction" :expand-on-row-click="!onlyIcon">
+      <t-collapse-panel value="0" header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="1">
+        <template #header>这是一个折叠标题</template>
+        <template #default
+        >这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。</template
+        >
+      </t-collapse-panel>
+      <t-collapse-panel value="2">
+        <template #header>这是一个折叠标题</template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="3" header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+    </t-collapse>
+    <div class="button-area">
+      <t-checkbox v-model="showArrow">显示箭头</t-checkbox>
+      <t-radio-group v-model="direction">
+        <t-radio value="left">左边</t-radio>
+        <t-radio value="right">右边</t-radio>
+      </t-radio-group>
+    </div>
+    <div style="margin-top: 10px">
+      <t-checkbox v-model="onlyIcon">仅图标响应点击</t-checkbox>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      showArrow: true,
+      direction: 'left',
+      disable: false,
+      onlyIcon: false,
+    };
+  },
+};
+</script>

examples/collapse/demos/mutex.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="tdesign-collapse">
+    <t-collapse v-model="currentItem" expand-mutex @Change="handlePanelChange">
+      <t-collapse-panel value="0" header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="1">
+        <template #header>这是一个折叠标题</template>
+        <template #default
+        >这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。</template
+        >
+      </t-collapse-panel>
+      <t-collapse-panel value="2">
+        <template #header>这是一个折叠标题</template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="3" header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+    </t-collapse>
+    <div style="margin-top: 10px">当前展开项：{{ currentItem }}</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      currentItem: [],
+    };
+  },
+  methods: {
+    handlePanelChange(val) {
+      console.log(val);
+    },
+  },
+};
+</script>

examples/collapse/demos/other.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tdesign-collapse">
+    <t-collapse :disabled="disabled" :borderless="borderless" @Change="handlePanelChange">
+      <t-collapse-panel value="0" header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="1">
+        <template #header>这是一个折叠标题</template>
+        <template #default
+        >这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。</template
+        >
+      </t-collapse-panel>
+      <t-collapse-panel value="2">
+        <template #header>这是一个折叠标题</template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="3" header="这是一个折叠标题">
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+    </t-collapse>
+    <div class="button-area">
+      <t-checkbox v-model="disabled">全部禁用</t-checkbox>
+      <t-checkbox v-model="borderless">无边框模式</t-checkbox>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      disabled: false,
+      borderless: false,
+    };
+  },
+  methods: {
+    handlePanelChange(val) {
+      console.log(val);
+    },
+  },
+};
+</script>

examples/collapse/demos/rightSlot.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="tdesign-collapse">
+    <t-collapse>
+      <t-collapse-panel value="0" header="这是一个折叠标题可以设置右侧操作区域" :disabled="disable0">
+        <template #headerRightContent>
+          <t-checkbox v-model="disable0">禁用</t-checkbox>
+          <t-button size="small">操作</t-button>
+        </template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="1" header="这是一个折叠标题可以设置右侧操作区域" :disabled="disable1">
+        <template #headerRightContent>
+          <t-checkbox v-model="disable1">禁用</t-checkbox>
+          <t-button size="small">操作</t-button>
+        </template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="2" header="这是一个折叠标题可以设置右侧操作区域" :disabled="disable2">
+        <template #headerRightContent>
+          <t-checkbox v-model="disable2">禁用</t-checkbox>
+          <t-button size="small">操作</t-button>
+        </template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+      <t-collapse-panel value="3" header="这是一个折叠标题可以设置右侧操作区域" :disabled="disable3">
+        <template #headerRightContent>
+          <t-checkbox v-model="disable3">禁用</t-checkbox>
+          <t-button size="small">操作</t-button>
+        </template>
+        这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+      </t-collapse-panel>
+    </t-collapse>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      disable0: false,
+      disable1: true,
+      disable2: false,
+      disable3: true,
+    };
+  },
+};
+</script>

site/site.config.mjs

@@ -290,6 +290,13 @@ export default {
           path: '/vue/components/card',
           component: () => import('@/examples/card/card.md'),
         },
+        {
+          title: 'Collapse 折叠面板',
+          name: 'collapse',
+          docType: 'data',
+          path: '/vue/components/collapse',
+          component: () => import('@/examples/collapse/collapse.md')
+        },
         {
           title: 'Comment 评论',
           name: 'comment',

src/collapse/collapse-panel-props.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCollapsePanelProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 折叠面板内容 */
+  content: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['content']>,
+  },
+  /** 折叠面板内容，同 content */
+  default: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['default']>,
+  },
+  /** 当前面板处理折叠状态时，是否销毁面板内容 */
+  destroyOnCollapse: Boolean,
+  /** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 */
+  expandIcon: {
+    type: [Boolean, Function] as PropType<TdCollapsePanelProps['expandIcon']>,
+    default: undefined,
+  },
+  /** 面板头内容 */
+  header: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['header']>,
+  },
+  /** 面板头的右侧区域，一般用于呈现面板操作 */
+  headerRightContent: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['headerRightContent']>,
+  },
+  /** 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 */
+  value: {
+    type: [String, Number] as PropType<TdCollapsePanelProps['value']>,
+  },
+};