From 79511fe3311e17395c0d4e2bddd652b5a7b77427 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 16 Aug 2020 17:06:55 +0800
Subject: [PATCH] feat: migrate Collapse component

---
 components.js              |  2 ++
 src/collapse-item/index.js | 39 +++++++++++++++++---------------------
 src/collapse/index.js      | 12 +++++++-----
 vant.config.js             | 16 ++++++++--------
 4 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/components.js b/components.js
index 3cf7e5e4e..ef067b29d 100644
--- a/components.js
+++ b/components.js
@@ -60,4 +60,6 @@ module.exports = [
   'dropdown-menu',
   'dropdown-item',
   'notify',
+  'collapse',
+  'collapse-item',
 ];
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index 25826cde8..d40a495b5 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -11,8 +11,6 @@ import { cellProps } from '../cell/shared';
 
 const [createComponent, bem] = createNamespace('collapse-item');
 
-const CELL_SLOTS = ['title', 'icon', 'right-icon'];
-
 export default createComponent({
   mixins: [ChildrenMixin('vanCollapse')],
 
@@ -43,20 +41,22 @@ export default createComponent({
         return null;
       }
 
-      const { value, accordion } = this.parent;
+      const { modelValue, accordion } = this.parent;
 
       if (
         process.env.NODE_ENV !== 'production' &&
         !accordion &&
-        !Array.isArray(value)
+        !Array.isArray(modelValue)
       ) {
-        console.error('[Vant] Collapse: type of prop "value" should be Array');
+        console.error(
+          '[Vant] Collapse: type of prop "modelValue" should be Array'
+        );
         return;
       }
 
       return accordion
-        ? value === this.currentName
-        : value.some((name) => name === this.currentName);
+        ? modelValue === this.currentName
+        : modelValue.some((name) => name === this.currentName);
     },
   },
 
@@ -110,7 +110,7 @@ export default createComponent({
       }
 
       const { parent, currentName } = this;
-      const close = parent.accordion && currentName === parent.value;
+      const close = parent.accordion && currentName === parent.modelValue;
       const name = close ? '' : currentName;
 
       parent.switch(name, !this.expanded);
@@ -127,27 +127,22 @@ export default createComponent({
     genTitle() {
       const { border, disabled, expanded } = this;
 
-      const titleSlots = CELL_SLOTS.reduce((slots, name) => {
-        if (this.slots(name)) {
-          slots[name] = () => this.slots(name);
-        }
-
-        return slots;
-      }, {});
-
-      if (this.slots('value')) {
-        titleSlots.default = () => this.slots('value');
-      }
+      const slots = {
+        icon: this.$slots.icon,
+        title: this.$slots.title,
+        default: this.$slots.value,
+        'right-icon': this.$slots['right-icon'],
+      };
 
       return (
         <Cell
+          v-slots={slots}
           role="button"
           class={bem('title', { disabled, expanded, borderless: !border })}
           onClick={this.onClick}
-          scopedSlots={titleSlots}
           tabindex={disabled ? -1 : 0}
           aria-expanded={String(expanded)}
-          {...{ props: this.$props }}
+          {...this.$props}
         />
       );
     },
@@ -162,7 +157,7 @@ export default createComponent({
             onTransitionend={this.onTransitionEnd}
           >
             <div ref="content" class={bem('content')}>
-              {this.slots()}
+              {this.$slots.default?.()}
             </div>
           </div>
         );
diff --git a/src/collapse/index.js b/src/collapse/index.js
index fe159a03d..e5fadb87d 100644
--- a/src/collapse/index.js
+++ b/src/collapse/index.js
@@ -9,29 +9,31 @@ export default createComponent({
 
   props: {
     accordion: Boolean,
-    value: [String, Number, Array],
+    modelValue: [String, Number, Array],
     border: {
       type: Boolean,
       default: true,
     },
   },
 
+  emits: ['change', 'update:modelValue'],
+
   methods: {
     switch(name, expanded) {
       if (!this.accordion) {
         name = expanded
-          ? this.value.concat(name)
-          : this.value.filter((activeName) => activeName !== name);
+          ? this.modelValue.concat(name)
+          : this.modelValue.filter((activeName) => activeName !== name);
       }
       this.$emit('change', name);
-      this.$emit('input', name);
+      this.$emit('update:modelValue', name);
     },
   },
 
   render() {
     return (
       <div class={[bem(), { [BORDER_TOP_BOTTOM]: this.border }]}>
-        {this.slots()}
+        {this.$slots.default?.()}
       </div>
     );
   },
diff --git a/vant.config.js b/vant.config.js
index e06b824a2..007aad611 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -225,10 +225,10 @@ module.exports = {
                 path: 'circle',
                 title: 'Circle 环形进度条',
               },
-              // {
-              //   path: 'collapse',
-              //   title: 'Collapse 折叠面板',
-              // },
+              {
+                path: 'collapse',
+                title: 'Collapse 折叠面板',
+              },
               {
                 path: 'count-down',
                 title: 'CountDown 倒计时',
@@ -559,10 +559,10 @@ module.exports = {
                 path: 'circle',
                 title: 'Circle',
               },
-              // {
-              //   path: 'collapse',
-              //   title: 'Collapse',
-              // },
+              {
+                path: 'collapse',
+                title: 'Collapse',
+              },
               {
                 path: 'count-down',
                 title: 'CountDown',