feat(collpase): add collapse component

DEVELOP_GUIDE.md

@@ -105,7 +105,7 @@ npm run start
 
 ### 组件页路由配置
 
-每一个组件页，都是一个 md 文件，参考 `/site/sidebar.config.js` 已有定义，直接按照模板添加即可
+每一个组件页，都是一个 md 文件，参考 `/site/sidebar.config.ts` 已有定义，直接按照模板添加即可
 
 ```javascript
 {

site/sidebar.config.ts

@@ -130,6 +130,12 @@ export default [
         path: '/components/calendar',
         // component: () => import('tdesign-web-components/calendar/README.md'),
       },
+      {
+        title: 'Collapse 折叠面板',
+        name: 'Collapse',
+        path: '/components/collapse',
+        component: () => import('tdesign-web-components/collapse/README.md'),
+      },
       {
         title: 'Table 表格',
         name: 'table',

src/collapse/README.md

@@ -0,0 +1,36 @@
+---
+title: Collapse 折叠面板
+description: 可以将较多或较复杂的内容进行分组，分组内容区可以折叠展开或隐藏。
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### 基础折叠面板
+
+基础折叠面板，可自定义面板内容。
+
+{{ base }}
+
+### 手风琴模式折叠面板
+
+手风琴模式折叠面板，一次只能打开一个面板。
+
+{{ mutex }}
+
+### 可设置图标的折叠面板
+
+可设置是否显示展开图标以及图标展示的位置
+
+{{ icon }}
+
+### 可设置右侧操作的折叠面板
+
+可自定义面板右侧操作区域
+
+{{ rightSlot }}
+
+### 不同模式的折叠面板
+
+
+{{ other }}

src/collapse/_example/base.tsx

@@ -0,0 +1,25 @@
+import 'tdesign-web-components/collapse';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  checked = signal(true);
+
+  @bind
+  onChange(value) {
+    console.log('onChange.value', value);
+  }
+
+  render() {
+    return (
+      <t-collapse onChange={this.onChange}>
+        <t-collapse-panel header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+        <t-collapse-panel header="这是一个折叠标题" destroyOnCollapse={true}>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+      </t-collapse>
+    );
+  }
+}

src/collapse/_example/icon.tsx

@@ -0,0 +1,34 @@
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/icon';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  checked = signal(true);
+
+  @bind
+  onChange(value) {
+    console.log('onChange.value', value);
+  }
+
+  render() {
+    return (
+      <t-space direction={'vertical'}>
+        <t-collapse onChange={this.onChange} expand-icon-placement="left">
+          <t-collapse-panel className={'ccc'} header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel header="自定义图标">
+            <t-icon name="user-checked" slot="expandIcon"></t-icon>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel header="自定义图标">
+            <t-icon name="add" slot="expandIcon"></t-icon>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+        </t-collapse>
+      </t-space>
+    );
+  }
+}

src/collapse/_example/mutex.tsx

@@ -0,0 +1,36 @@
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/space';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  currentItem = signal('[]');
+
+  @bind
+  onChange(value) {
+    this.currentItem.value = value.valueOf();
+    console.log('currentItem', this.currentItem);
+  }
+
+  render() {
+    return (
+      <t-space direction={'vertical'}>
+        <t-collapse expand-mutex onChange={this.onChange}>
+          <t-collapse-panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+        </t-collapse>
+        <div style="margin-top: 10px">当前展开项：{this.currentItem.value}</div>
+      </t-space>
+    );
+  }
+}

src/collapse/_example/other.tsx

@@ -0,0 +1,52 @@
+import 'tdesign-web-components/switch';
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/space';
+
+import { Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  static css = `
+.button-area {
+  margin-left: 20px;
+  margin-top: 10px;
+}
+.button-text {
+  display: inline-block;
+  width: 100px;
+  font-size: 13px;
+  margin-bottom: 2px;
+}  
+`;
+
+  disabled = signal(false);
+
+  expandIcon = signal(true);
+
+  borderless = signal(false);
+
+  render() {
+    const { borderless, expandIcon, disabled } = this;
+    return (
+      <t-space direction={'vertical'}>
+        <t-collapse borderless={borderless.value} expandIcon={expandIcon.value} disabled={disabled.value}>
+          <t-collapse-panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel header="这是一个折叠标题">
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+        </t-collapse>
+        <div class="button-area">
+          <div>
+            <span class="button-text">全部禁用</span>
+            <t-switch size="small" onChange={() => (this.disabled.value = !this.disabled.value)} />
+          </div>
+          <div>
+            <span class="button-text">无边框</span>
+            <t-switch size="small" onChange={() => (this.borderless.value = !this.borderless.value)} />
+          </div>
+        </div>
+      </t-space>
+    );
+  }
+}

src/collapse/_example/rightSlot.tsx

@@ -0,0 +1,42 @@
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/button';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  checked = signal(true);
+
+  @bind
+  onChange(value) {
+    console.log('onChange.value', value);
+  }
+
+  render() {
+    return (
+      <t-collapse
+        className={'aab'}
+        borderless={true}
+        expandMutex={true}
+        expandOnRowClick={true}
+        onChange={this.onChange}
+      >
+        <t-collapse-panel className={'ccc'} header="这是一个折叠标题">
+          <div slot="headerRightContent">
+            <t-button size="small" style={{ marginLeft: '8px' }}>
+              操作
+            </t-button>
+          </div>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+        <t-collapse-panel header="禁用状态" destroyOnCollapse={true} disabled>
+          <div slot="headerRightContent">
+            <t-button size="small" style={{ marginLeft: '8px' }}>
+              操作
+            </t-button>
+          </div>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+      </t-collapse>
+    );
+  }
+}

src/collapse/collapse-panel-props.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+
+import { TdCollapsePanelProps } from './type';
+
+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']>,
+  },
+};