From 7de1af14f82399f4adadd0faa26f29c2e51d1e41 Mon Sep 17 00:00:00 2001
From: "BugMaker.Huang" <BugMaker.Huang@1695529682694277.onaliyun.com>
Date: Fri, 15 Mar 2024 10:35:58 +0800
Subject: [PATCH] docs(collapse): added html source code for collapse, updated
 demos

---
 .../demos/{demo3.tsx => accordion.tsx}        |  2 +-
 docs/example/Collapse/demos/basicUsage.tsx    | 15 +++++
 docs/example/Collapse/demos/customIcon.tsx    | 44 +++++++++++++++
 docs/example/Collapse/demos/demo0.tsx         | 18 ------
 docs/example/Collapse/demos/demo1.tsx         | 19 -------
 docs/example/Collapse/demos/demo2.tsx         | 55 -------------------
 docs/example/Collapse/demos/disabled.tsx      | 16 ++++++
 docs/example/Collapse/index.md                |  8 +--
 public/Collapse/accordion.html                | 28 ++++++++++
 public/Collapse/basicUsage.html               |  4 ++
 public/Collapse/customIcon.html               | 18 ++++++
 public/Collapse/disabled.html                 |  4 ++
 12 files changed, 134 insertions(+), 97 deletions(-)
 rename docs/example/Collapse/demos/{demo3.tsx => accordion.tsx} (97%)
 create mode 100644 docs/example/Collapse/demos/basicUsage.tsx
 create mode 100644 docs/example/Collapse/demos/customIcon.tsx
 delete mode 100644 docs/example/Collapse/demos/demo0.tsx
 delete mode 100644 docs/example/Collapse/demos/demo1.tsx
 delete mode 100644 docs/example/Collapse/demos/demo2.tsx
 create mode 100644 docs/example/Collapse/demos/disabled.tsx
 create mode 100644 public/Collapse/accordion.html
 create mode 100644 public/Collapse/basicUsage.html
 create mode 100644 public/Collapse/customIcon.html
 create mode 100644 public/Collapse/disabled.html

diff --git a/docs/example/Collapse/demos/demo3.tsx b/docs/example/Collapse/demos/accordion.tsx
similarity index 97%
rename from docs/example/Collapse/demos/demo3.tsx
rename to docs/example/Collapse/demos/accordion.tsx
index 78f2acb1..5b448b76 100644
--- a/docs/example/Collapse/demos/demo3.tsx
+++ b/docs/example/Collapse/demos/accordion.tsx
@@ -4,7 +4,7 @@
  */
 
 import { Collapse } from '@banana-ui/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default function CollapseDemo3() {
   const [status, setStatus] = useState([false, false, false]);
diff --git a/docs/example/Collapse/demos/basicUsage.tsx b/docs/example/Collapse/demos/basicUsage.tsx
new file mode 100644
index 00000000..a87fd692
--- /dev/null
+++ b/docs/example/Collapse/demos/basicUsage.tsx
@@ -0,0 +1,15 @@
+/**
+ * title: 基本使用
+ */
+
+import { Collapse } from '@banana-ui/react';
+
+export default function CollapseDemo0() {
+  return (
+    <Collapse title="点我">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </Collapse>
+  );
+}
diff --git a/docs/example/Collapse/demos/customIcon.tsx b/docs/example/Collapse/demos/customIcon.tsx
new file mode 100644
index 00000000..8c55a837
--- /dev/null
+++ b/docs/example/Collapse/demos/customIcon.tsx
@@ -0,0 +1,44 @@
+/**
+ * title: 自定义折叠/展开图标
+ * description: 通过使用`slot`插槽实现自定义折叠/展开图标
+ */
+
+import { Collapse } from '@banana-ui/react';
+
+export default function CollapseDemo2() {
+  const CustomExpandIcon = () => {
+    return (
+      <svg viewBox="0 0 1024 1024" width="16" height="16">
+        <path
+          d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z"
+          fill="#575B66"
+        ></path>
+      </svg>
+    );
+  };
+
+  const CustomCollapseIcon = () => {
+    return (
+      <svg viewBox="0 0 1024 1024" width="16" height="16">
+        <path
+          d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z"
+          fill="#575B66"
+        ></path>
+      </svg>
+    );
+  };
+
+  return (
+    <Collapse title="点我">
+      <div style={{ display: 'flex' }} slot="expand-icon">
+        <CustomExpandIcon />
+      </div>
+      <div style={{ display: 'flex' }} slot="collapse-icon">
+        <CustomCollapseIcon />
+      </div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </Collapse>
+  );
+}
diff --git a/docs/example/Collapse/demos/demo0.tsx b/docs/example/Collapse/demos/demo0.tsx
deleted file mode 100644
index d41c1cad..00000000
--- a/docs/example/Collapse/demos/demo0.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * title: 基本使用
- */
-
-import { Collapse } from '@banana-ui/react';
-import React from 'react';
-
-export default function CollapseDemo0() {
-  return (
-    <div>
-      <Collapse title="点我">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </Collapse>
-    </div>
-  );
-}
diff --git a/docs/example/Collapse/demos/demo1.tsx b/docs/example/Collapse/demos/demo1.tsx
deleted file mode 100644
index 37aee720..00000000
--- a/docs/example/Collapse/demos/demo1.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * title: 禁用折叠面板
- * description: 使用`disabled`属性禁用该折叠面板。
- */
-
-import { Collapse } from '@banana-ui/react';
-import React from 'react';
-
-export default function CollapseDemo1() {
-  return (
-    <div>
-      <Collapse disabled title="点我">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </Collapse>
-    </div>
-  );
-}
diff --git a/docs/example/Collapse/demos/demo2.tsx b/docs/example/Collapse/demos/demo2.tsx
deleted file mode 100644
index d78ea021..00000000
--- a/docs/example/Collapse/demos/demo2.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * title: 自定义折叠/展开图标
- * description: 通过使用`slot`插槽实现自定义折叠/展开图标
- */
-
-import { Collapse } from '@banana-ui/react';
-import React from 'react';
-
-export default function CollapseDemo2() {
-  return (
-    <div>
-      <Collapse title="点我">
-        <div style={{ display: 'flex' }} slot="expand-icon">
-          <svg
-            t="1683252527212"
-            className="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="993"
-            width="16"
-            height="16"
-          >
-            <path
-              d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z"
-              fill="#575B66"
-              p-id="994"
-            ></path>
-          </svg>
-        </div>
-        <div style={{ display: 'flex' }} slot="collapse-icon">
-          <svg
-            t="1683252725530"
-            className="icon"
-            viewBox="0 0 1024 1024"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            p-id="1193"
-            width="16"
-            height="16"
-          >
-            <path
-              d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z"
-              fill="#575B66"
-              p-id="1194"
-            ></path>
-          </svg>
-        </div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </Collapse>
-    </div>
-  );
-}
diff --git a/docs/example/Collapse/demos/disabled.tsx b/docs/example/Collapse/demos/disabled.tsx
new file mode 100644
index 00000000..d622dd5e
--- /dev/null
+++ b/docs/example/Collapse/demos/disabled.tsx
@@ -0,0 +1,16 @@
+/**
+ * title: 禁用折叠面板
+ * description: 使用`disabled`属性禁用该折叠面板。
+ */
+
+import { Collapse } from '@banana-ui/react';
+
+export default function CollapseDemo1() {
+  return (
+    <Collapse disabled title="点我">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </Collapse>
+  );
+}
diff --git a/docs/example/Collapse/index.md b/docs/example/Collapse/index.md
index ed24f4e6..4d8111c3 100644
--- a/docs/example/Collapse/index.md
+++ b/docs/example/Collapse/index.md
@@ -14,10 +14,10 @@ group: 组件
 
 ## 代码演示
 
-<code src="./demos/demo0.tsx"></code>
-<code src="./demos/demo1.tsx"></code>
-<code src="./demos/demo2.tsx"></code>
-<code src="./demos/demo3.tsx"></code>
+<code src="./demos/basicUsage.tsx"></code>
+<code src="./demos/disabled.tsx"></code>
+<code src="./demos/customIcon.tsx"></code>
+<code src="./demos/accordion.tsx"></code>
 
 ## 属性 - Attributes & Properties
 
diff --git a/public/Collapse/accordion.html b/public/Collapse/accordion.html
new file mode 100644
index 00000000..55898f07
--- /dev/null
+++ b/public/Collapse/accordion.html
@@ -0,0 +1,28 @@
+<div>
+  <b-collapse title="折叠面板1">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </b-collapse>
+  <b-collapse title="折叠面板2">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </b-collapse>
+  <b-collapse title="折叠面板3">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </b-collapse>
+</div>
+
+<script>
+  const collapses = document.querySelectorAll('b-collapse');
+
+  const handleShow = (index) => {
+    collapses.forEach((collapse, i) => {
+      collapse.open = i === index;
+    });
+  };
+
+  collapses.forEach((collapse, index) => {
+    collapse.addEventListener('show', () => handleShow(index));
+  });
+</script>
\ No newline at end of file
diff --git a/public/Collapse/basicUsage.html b/public/Collapse/basicUsage.html
new file mode 100644
index 00000000..f4bb4f83
--- /dev/null
+++ b/public/Collapse/basicUsage.html
@@ -0,0 +1,4 @@
+<b-collapse title="点我">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</b-collapse>
\ No newline at end of file
diff --git a/public/Collapse/customIcon.html b/public/Collapse/customIcon.html
new file mode 100644
index 00000000..5cc91bfd
--- /dev/null
+++ b/public/Collapse/customIcon.html
@@ -0,0 +1,18 @@
+<b-collapse title="点我">
+  <div style="display: flex;" slot="expand-icon">
+    <svg viewBox="0 0 1024 1024" width="16" height="16">
+      <path
+        d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z"
+        fill="#575B66"></path>
+    </svg>
+  </div>
+  <div style="display: flex;" slot="collapse-icon">
+    <svg viewBox="0 0 1024 1024" width="16" height="16">
+      <path
+        d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z"
+        fill="#575B66"></path>
+    </svg>
+  </div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</b-collapse>
\ No newline at end of file
diff --git a/public/Collapse/disabled.html b/public/Collapse/disabled.html
new file mode 100644
index 00000000..e23aae45
--- /dev/null
+++ b/public/Collapse/disabled.html
@@ -0,0 +1,4 @@
+<b-collapse disabled title="点我">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</b-collapse>
\ No newline at end of file