From d148d0afde7684d0b561d8bcfaff3baf46045097 Mon Sep 17 00:00:00 2001
From: EditorWang <llkkjjhhllkkjjhh@163.com>
Date: Thu, 14 Oct 2021 11:07:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(panel):=20=E5=A2=9E=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=EF=BC=8C=E6=96=B0=E5=A2=9E=E4=BA=86toggle?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/panel/index.ts           |   2 +-
 devui/panel/src/panel.tsx      |  18 ++----
 devui/panel/src/store/store.ts |   3 +
 docs/components/panel/index.md | 112 ++++++++++++++++++++++++++++++---
 4 files changed, 111 insertions(+), 24 deletions(-)

diff --git a/devui/panel/index.ts b/devui/panel/index.ts
index f0d6cb2c..56eaba1e 100644
--- a/devui/panel/index.ts
+++ b/devui/panel/index.ts
@@ -16,7 +16,7 @@ export { Panel }
 export default {
   title: 'Panel 面板',
   category: '通用',
-  status: '50%',
+  status: '100%',
   install(app: App): void {
     app.use(Panel as any)
   }
diff --git a/devui/panel/src/panel.tsx b/devui/panel/src/panel.tsx
index 079a1de0..741ebcf5 100644
--- a/devui/panel/src/panel.tsx
+++ b/devui/panel/src/panel.tsx
@@ -11,8 +11,10 @@ export default defineComponent({
     provide('showAnimation', props.showAnimation);
     provide('hasLeftPadding', props.hasLeftPadding);
     const isCollapsed = ref(props.isCollapsed);
-
     const bodyEl = ref();
+    const onToggle = ()=> {
+      props.toggle?.(Store.getByKey(`isCollapsed[${timeStamp}]`))
+    };
 
     onMounted(() => {
       if(bodyEl.value) {
@@ -21,26 +23,16 @@ export default defineComponent({
         dom.style.height = `${dom.offsetHeight}px`;
       }
     })
+
     const timeStamp = new Date().getTime().toString();
     Store.setData(`isCollapsed[${timeStamp}]`, isCollapsed.value);
 
-
     return () => {
       return (
-        <div class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
+        <div onClick = {onToggle} class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
           {ctx.slots.default()}
         </div>
       )
     }
   },
-  render(){
-    const {props,$slots} = this;
-    return () => {
-      return (
-        <div class={`devui-panel devui-panel-${props.type} ${props.cssClass}`}>
-          {$slots.default()}
-        </div>
-      )
-    }
-  }
 })
\ No newline at end of file
diff --git a/devui/panel/src/store/store.ts b/devui/panel/src/store/store.ts
index 9e989228..d274bff2 100644
--- a/devui/panel/src/store/store.ts
+++ b/devui/panel/src/store/store.ts
@@ -4,6 +4,9 @@ import {ref,reactive} from 'vue';
 export const option = reactive({})
 
 class Store {
+    public static getByKey(timeStamp){
+        return option[timeStamp];
+    }
     public static state() {
         return option;
     }
diff --git a/docs/components/panel/index.md b/docs/components/panel/index.md
index e25db707..aeae65aa 100644
--- a/docs/components/panel/index.md
+++ b/docs/components/panel/index.md
@@ -18,10 +18,10 @@
     <d-panel-body>This is body</d-panel-body>
   </d-panel>
   <br /><br />
-  <d-panel :isCollapsed="true" :hasLeftPadding="false" :showAnimation="true">
+  <d-panel :toggle=toggle :isCollapsed="true" :hasLeftPadding="false" :showAnimation="true">
     <d-panel-header>
       Panel has no left padding
-      <em class="icon icon-chevron-down"></em>
+      <em :class="`icon icon-chevron-${toggleState ? 'down':'up'}`"></em>
     </d-panel-header>
     <d-panel-body>This is body</d-panel-body>
   </d-panel>
@@ -32,15 +32,107 @@
     <d-panel-footer>This is footer</d-panel-footer>
   </d-panel>
 </template>
+<script>
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup(){
+    const toggleState = ref(true);
+    const toggle = (e) => toggleState.value = e;
+    return {
+      toggle,
+      toggleState,
+    }
+  }
+})
+</script>
 ```
 :::
 
+### 多种类型
 
-|参数|  	        类型|	                         默认|	     说明|
-|:-:|:-:|:-:|:-:|
-|type|	          PanelType|	                  'default'|	可选，面板的类型|
-|cssClass|	      string|	                      --|	        可选，自定义 class 名|
-|isCollapsed|	    boolean|	                    false|      可选，是否展开|
-|hasLeftPadding|	boolean|	                    true|	      可选，是否显示左侧填充|
-|showAnimation|	  boolean|	                    true|	      可选，是否展示动画|
-|beforeToggle|	  Function\|Promise\|Observable|	--|         可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态	根据条件阻止折叠|
\ No newline at end of file
+面板类型分为default、primary、success，danger、warning、info。
+
+:::demo
+```vue
+<template>
+<d-panel type="primary" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with Primary Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="success" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with Success Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="warning" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with Warning Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-panel type="danger" :isCollapsed="true" :showAnimation="true">
+    <d-panel-header>Panel with danger Type</d-panel-header>
+    <d-panel-body>This is body</d-panel-body>
+  </d-panel>
+</template>
+```
+:::
+
+### 阻止折叠
+
+某种情况下，我们需要阻止面板收起。Panel提供了这项API，我们可以使用beforeToggle来阻止面板的收起
+
+根据条件判断，当panel展开时，点击阻止折叠按钮，将无法折叠panel。当panel折叠时不影响操作。
+
+:::demo
+```vue
+<template>
+  <d-panel type="primary" :toggle=handleToggle :isCollapsed=isCollapsed :beforeToggle="beforeToggle">
+    <d-panel-header>
+      Panel with foldable <i :class="`icon-arrow-${toggle ? 'up' : 'down'}`"></i>
+    </d-panel-header>
+    <d-panel-body>
+      This is body
+    </d-panel-body>
+  </d-panel>
+  <br /><br />
+  <d-button @click="panelToggle = !panelToggle" >
+    {{ panelToggle ? '阻止折叠' : '允许折叠' }}
+  </d-button>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup(){
+    let isCollapsed = ref(true);
+    let panelToggle = ref(false);
+    let toggle = ref(true);
+    let state;
+    const handleToggle = (e) => toggle.value = e;
+    const beforeToggle = () => panelToggle.value;
+    return {
+      state,
+      toggle,
+      panelToggle,
+      beforeToggle,
+      isCollapsed,
+      handleToggle
+    }
+  }
+})
+</script>
+```
+:::
+
+### API
+
+|参数|  	        类型|	                           默认|	     说明|
+|:-:|:-:|:-:|:-:| 
+|type|	          PanelType|	                    'default'|	    可选，面板的类型|
+|cssClass|	      string|	                        --       |	    可选，自定义 class 名|
+|isCollapsed|	    boolean|	                      false    |      可选，是否展开|
+|hasLeftPadding|	boolean|	                      true     |	    可选，是否显示左侧填充|
+|showAnimation|	  boolean|	                      true     |	    可选，是否展示动画|
+|beforeToggle|	  Function\|Promise\|Observable|	--       |      可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态	根据条件阻止折叠|
+|toggle|          Function|                       --       |      可选，面板当前状态的回调函数，返回boolean类型，返回 false 代表面板被收起，返回 true 代表面板展开
\ No newline at end of file
-- 
Gitee