Merge branch '2.x' into dev

src/popover/README.md

@@ -17,9 +17,7 @@ app.use(Popover);
 ```html
 <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      Light Theme
-    </van-button>
+    <van-button type="primary"> Light Theme </van-button>
   </template>
 </van-popover>
 ```
@@ -53,9 +51,7 @@ Using the `theme` prop to change the style of Popover.
 ```html
 <van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      Dark Theme
-    </van-button>
+    <van-button type="primary"> Dark Theme </van-button>
   </template>
 </van-popover>
 ```
@@ -103,9 +99,7 @@ bottom-end    # Bottom right
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      Show Icon
-    </van-button>
+    <van-button type="primary"> Show Icon </van-button>
   </template>
 </van-popover>
 ```
@@ -132,9 +126,7 @@ Using the `disabled` option to disable an action.
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      Disable Action
-    </van-button>
+    <van-button type="primary"> Disable Action </van-button>
   </template>
 </van-popover>
 ```
@@ -164,6 +156,7 @@ export default {
 | actions | Actions | _Action[]_ | `[]` |
 | placement | Placement | _string_ | `bottom` |
 | theme | Theme，can be set to `dark` | _string_ | `light` |
+| trigger `v2.11.1` | Trigger mode，can be set to `click` | - |
 | offset | Distance to reference | _[number, number]_ | `[0, 8]` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |

src/popover/README.zh-CN.md

@@ -23,9 +23,7 @@ app.use(Popover);
 ```html
 <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      浅色风格
-    </van-button>
+    <van-button type="primary"> 浅色风格 </van-button>
   </template>
 </van-popover>
 ```
@@ -56,9 +54,7 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme`
 ```html
 <van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      深色风格
-    </van-button>
+    <van-button type="primary"> 深色风格 </van-button>
   </template>
 </van-popover>
 ```
@@ -106,9 +102,7 @@ bottom-end    # 底部右侧位置
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      展示图标
-    </van-button>
+    <van-button type="primary"> 展示图标 </van-button>
   </template>
 </van-popover>
 ```
@@ -135,9 +129,7 @@ export default {
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      禁用选项
-    </van-button>
+    <van-button type="primary"> 禁用选项 </van-button>
   </template>
 </van-popover>
 ```
@@ -179,9 +171,7 @@ export default {
     />
   </van-grid>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
-      自定义内容
-    </van-button>
+    <van-button type="primary"> 自定义内容 </van-button>
   </template>
 </van-popover>
 ```
@@ -206,6 +196,7 @@ export default {
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
+| trigger `v2.11.1` | 触发方式，可选值为 `click` | - |
 | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |

src/popover/demo/index.vue

@@ -100,7 +100,7 @@
         clickable
         :border="false"
         column-num="3"
-        style="width: 240px;"
+        style="width: 240px"
       >
         <van-grid-item
           v-for="i in 6"
@@ -187,7 +187,7 @@ export default {
         disableAction: false,
       },
       showPicker: false,
-      currentPlacement: '',
+      currentPlacement: 'top',
       placements: [
         'top',
         'top-start',

src/popover/index.js

@@ -19,6 +19,7 @@ export default createComponent({
 
   props: {
     show: Boolean,
+    trigger: String,
     overlay: Boolean,
     offset: {
       type: Array,
@@ -94,6 +95,12 @@ export default createComponent({
       emit('update:show', value);
     };
 
+    const onClickWrapper = () => {
+      if (props.trigger === 'click') {
+        toggle(!props.show);
+      }
+    };
+
     const onTouchstart = (event) => {
       event.stopPropagation();
       emit('touchstart', event);
@@ -142,7 +149,7 @@ export default createComponent({
     useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
 
     return () => (
-      <span ref={wrapperRef} class={bem('wrapper')}>
+      <span ref={wrapperRef} class={bem('wrapper')} onClick={onClickWrapper}>
         <Popup
           ref={popoverRef}
           show={props.show}

src/popover/test/__snapshots__/index.spec.js.snap

@@ -17,7 +17,7 @@ exports[`should locate to reference element when showed 1`] = `
 
 exports[`should locate to reference element when showed 2`] = `
 <transition-stub>
-  <div style="z-index: 2005; position: absolute; left: 0px; top: 8px; margin: 0px;"
+  <div style="z-index: 2006; position: absolute; left: 0px; top: 8px; margin: 0px;"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="bottom"
   >
@@ -31,7 +31,7 @@ exports[`should locate to reference element when showed 2`] = `
 
 exports[`should locate to reference element when showed 3`] = `
 <transition-stub>
-  <div style="z-index: 2005; display: none;"
+  <div style="z-index: 2006; display: none;"
        class="van-popup van-popover van-popover--light"
   >
     <div class="van-popover__arrow">
@@ -44,7 +44,7 @@ exports[`should locate to reference element when showed 3`] = `
 
 exports[`should watch placement prop and update location 1`] = `
 <transition-stub>
-  <div style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;"
+  <div style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="top"
   >

src/popover/test/index.spec.js

@@ -7,9 +7,27 @@ const baseActions = [
   { text: 'Option 3' },
 ];
 
+test('should toggle popover when trigger is "click" and the reference element is clicked', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+    },
+    slots: {
+      reference: () => <div class="reference"></div>,
+    },
+  });
+
+  wrapper.find('.reference').trigger('click');
+  expect(wrapper.emitted('update:show')).toBeFalsy();
+
+  await wrapper.setProps({ trigger: 'click' });
+  wrapper.find('.reference').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});
+
 test('should emit select event when clicking the action', async () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: baseActions,
@@ -23,7 +41,7 @@ test('should emit select event when clicking the action', async () => {
 
 test('should not emit select event when the action is disabled', () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: [{ text: 'Option', disabled: true }],
@@ -36,7 +54,7 @@ test('should not emit select event when the action is disabled', () => {
 
 test('should close popover when clicking the action', async () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: baseActions,
@@ -53,7 +71,7 @@ test('should close popover when clicking the action', async () => {
 
 test('should allow to custom the className of action', () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: [{ text: 'Option', className: 'foo' }],
@@ -66,7 +84,7 @@ test('should allow to custom the className of action', () => {
 test('should locate to reference element when showed', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       teleport: root,
     },
   });
@@ -84,7 +102,7 @@ test('should locate to reference element when showed', async () => {
 test('should watch placement prop and update location', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: root,
     },
@@ -101,7 +119,7 @@ test('should watch placement prop and update location', async () => {
 test('should close popover when touch outside content', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: root,
     },