feat: migrate ShareSheet component

src/share-sheet/README.md

@@ -16,7 +16,7 @@ Vue.use(ShareSheet);
 ```html
 <van-cell title="Show ShareSheet" @click="showShare = true" />
 <van-share-sheet
-  v-model="showShare"
+  v-model:show="showShare"
   title="Share"
   :options="options"
   @select="onSelect"
@@ -51,7 +51,7 @@ export default {
 ### Multi Line
 
 ```html
-<van-share-sheet v-model="showShare" title="Share" :options="options" />
+<van-share-sheet v-model:show="showShare" title="Share" :options="options" />
 ```
 
 ```js
@@ -80,7 +80,7 @@ export default {
 
 ```html
 <van-share-sheet
-  v-model="showShare"
+  v-model:show="showShare"
   :options="options"
   title="Share"
   description="Description"

src/share-sheet/README.zh-CN.md

@@ -22,7 +22,7 @@ Vue.use(ShareSheet);
 ```html
 <van-cell title="显示分享面板" @click="showShare = true" />
 <van-share-sheet
-  v-model="showShare"
+  v-model:show="showShare"
   title="立即分享给好友"
   :options="options"
   @select="onSelect"
@@ -60,7 +60,7 @@ export default {
 
 ```html
 <van-share-sheet
-  v-model="showShare"
+  v-model:show="showShare"
   title="立即分享给好友"
   :options="options"
 />
@@ -93,7 +93,7 @@ export default {
 除了使用内置的几种图标外，可以直接在 `icon` 中传入图片 URL 来使用自定义的图标。
 
 ```html
-<van-share-sheet v-model="showShare" :options="options" />
+<van-share-sheet v-model:show="showShare" :options="options" />
 ```
 
 ```js
@@ -126,7 +126,7 @@ export default {
 
 ```html
 <van-share-sheet
-  v-model="showShare"
+  v-model:show="showShare"
   :options="options"
   title="立即分享给好友"
   description="描述信息"

src/share-sheet/demo/index.vue

@@ -3,7 +3,7 @@
     <demo-block card :title="t('basicUsage')">
       <van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
       <van-share-sheet
-        v-model="show.basic"
+        v-model:show="show.basic"
         :title="t('title')"
         :options="options"
         @select="onSelect"
@@ -17,7 +17,7 @@
         @click="show.multiLine = true"
       />
       <van-share-sheet
-        v-model="show.multiLine"
+        v-model:show="show.multiLine"
         :title="t('title')"
         :options="multiLineOptions"
         @select="onSelect"
@@ -31,7 +31,7 @@
         @click="show.customIcon = true"
       />
       <van-share-sheet
-        v-model="show.customIcon"
+        v-model:show="show.customIcon"
         :options="customIconOptions"
         @select="onSelect"
       />
@@ -40,7 +40,7 @@
     <demo-block card :title="t('withDesc')">
       <van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
       <van-share-sheet
-        v-model="show.withDesc"
+        v-model:show="show.withDesc"
         :title="t('title')"
         :options="optionsWithDesc"
         :description="t('description')"

src/share-sheet/index.js

@@ -15,6 +15,7 @@ export default createComponent({
   props: {
     ...popupMixinProps,
     title: String,
+    duration: [Number, String],
     cancelText: String,
     description: String,
     getContainer: [String, Function],
@@ -40,6 +41,8 @@ export default createComponent({
     },
   },
 
+  emits: ['cancel', 'select', 'update:show', 'click-overlay'],
+
   methods: {
     onCancel() {
       this.toggle(false);
@@ -51,7 +54,7 @@ export default createComponent({
     },
 
     toggle(val) {
-      this.$emit('input', val);
+      this.$emit('update:show', val);
     },
 
     getIconURL(icon) {
@@ -63,8 +66,10 @@ export default createComponent({
     },
 
     genHeader() {
-      const title = this.slots('title') || this.title;
-      const description = this.slots('description') || this.description;
+      const title = this.$slots.title ? this.$slots.title() : this.title;
+      const description = this.$slots.description
+        ? this.$slots.description()
+        : this.description;
 
       if (!title && !description) {
         return;
@@ -132,8 +137,8 @@ export default createComponent({
     return (
       <Popup
         round
+        show={this.show}
         class={bem()}
-        value={this.value}
         position="bottom"
         overlay={this.overlay}
         duration={this.duration}
@@ -143,8 +148,10 @@ export default createComponent({
         closeOnPopstate={this.closeOnPopstate}
         closeOnClickOverlay={this.closeOnClickOverlay}
         safeAreaInsetBottom={this.safeAreaInsetBottom}
-        onInput={this.toggle}
-        onClick-overlay={this.onClickOverlay}
+        {...{
+          'onUpdate:show': this.toggle,
+          'onClick-overlay': this.onClickOverlay,
+        }}
       >
         {this.genHeader()}
         {this.genRows()}