feat(Popover): add actions-direction prop (#11888)

* feat(Popover): add direction prop

* fix: solve some problems

packages/vant/src/popover/Popover.tsx

@@ -21,6 +21,7 @@ import {
   truthProp,
   numericProp,
   unknownProp,
+  BORDER_RIGHT,
   BORDER_BOTTOM,
   makeArrayProp,
   makeStringProp,
@@ -40,6 +41,7 @@ import { Popup } from '../popup';
 import {
   PopoverTheme,
   PopoverAction,
+  PopoverActionsDirection,
   PopoverTrigger,
   PopoverPlacement,
 } from './types';
@@ -60,6 +62,7 @@ export const popoverProps = {
   theme: makeStringProp<PopoverTheme>('light'),
   overlay: Boolean,
   actions: makeArrayProp<PopoverAction>(),
+  actionsDirection: makeStringProp<PopoverActionsDirection>('vertical'),
   trigger: makeStringProp<PopoverTrigger>('click'),
   duration: numericProp,
   showArrow: truthProp,
@@ -193,7 +196,14 @@ export default defineComponent({
             class={bem('action-icon')}
           />
         ),
-        <div class={[bem('action-text'), BORDER_BOTTOM]}>{action.text}</div>,
+        <div
+          class={[
+            bem('action-text'),
+            { [BORDER_BOTTOM]: props.actionsDirection === 'vertical' },
+          ]}
+        >
+          {action.text}
+        </div>,
       ];
     };
 
@@ -202,7 +212,11 @@ export default defineComponent({
       return (
         <div
           role="menuitem"
-          class={[bem('action', { disabled, 'with-icon': icon }), className]}
+          class={[
+            bem('action', { disabled, 'with-icon': icon }),
+            { [BORDER_RIGHT]: props.actionsDirection === 'horizontal' },
+            className,
+          ]}
           style={{ color }}
           tabindex={disabled ? undefined : 0}
           aria-disabled={disabled || undefined}
@@ -254,7 +268,7 @@ export default defineComponent({
           {...pick(props, popupProps)}
         >
           {props.showArrow && <div class={bem('arrow')} />}
-          <div role="menu" class={bem('content')}>
+          <div role="menu" class={bem('content', props.actionsDirection)}>
             {slots.default ? slots.default() : props.actions.map(renderAction)}
           </div>
         </Popup>

packages/vant/src/popover/README.md

@@ -83,6 +83,42 @@ export default {
 };
 ```
 
+### Horizontal
+
+After setting the `actions-direction` prop to `horizontal`, the actions will be arranged horizontally.
+
+```html
+<van-popover
+  v-model:show="showPopover"
+  :actions="actions"
+  actions-direction="horizontal"
+>
+  <template #reference>
+    <van-button type="primary">Horizontal</van-button>
+  </template>
+</van-popover>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: 'Option 1' },
+      { text: 'Option 2' },
+      { text: 'Option 3' },
+    ];
+
+    return {
+      actions,
+      showPopover,
+    };
+  },
+};
+```
+
 ### Placement
 
 ```html
@@ -226,9 +262,9 @@ import { showToast } from 'vant';
 export default {
   setup() {
     const actions = [
-      { text: '选项一' },
+      { text: 'Option 1' },
-      { text: '选项二' },
+      { text: 'Option 2' },
-      { text: '选项三' },
+      { text: 'Option 3' },
     ];
     const onSelect = (action) => showToast(action.text);
     return {
@@ -247,6 +283,7 @@ export default {
 | --- | --- | --- | --- |
 | v-model:show | Whether to show Popover | _boolean_ | `false` |
 | actions | Actions | _PopoverAction[]_ | `[]` |
+| actions-direction | Direction of actions, can be set to `horizontal` | _PopoverActionsDirection_ | `vertical` |
 | placement | Placement | _PopoverPlacement_ | `bottom` |
 | theme | Theme, can be set to `dark` | _PopoverTheme_ | `light` |
 | trigger | Trigger mode, can be set to `manual` | _PopoverTrigger_ | `click` |
@@ -300,6 +337,7 @@ import type {
   PopoverProps,
   PopoverTheme,
   PopoverAction,
+  PopoverActionsDirection,
   PopoverTrigger,
   PopoverPlacement,
 } from 'vant';
@@ -320,6 +358,8 @@ The component provides the following CSS variables, which can be used to customi
 | --van-popover-action-font-size | _var(--van-font-size-md)_ | - |
 | --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
 | --van-popover-action-icon-size | _20px_ | - |
+| --van-popover-horizontal-action-height | _34px_ | - |
+| --van-popover-horizontal-action-icon-size | _16px_ | - |
 | --van-popover-light-text-color | _var(--van-text-color)_ | - |
 | --van-popover-light-background | _var(--van-background-2)_ | - |
 | --van-popover-light-action-disabled-text-color | _var(--van-text-color-3)_ | - |

packages/vant/src/popover/README.zh-CN.md

@@ -87,6 +87,42 @@ export default {
 };
 ```
 
+### 水平排列
+
+将 `actions-direction` 属性设置为 `horizontal` 后，菜单选项会变成水平排列。
+
+```html
+<van-popover
+  v-model:show="showPopover"
+  :actions="actions"
+  actions-direction="horizontal"
+>
+  <template #reference>
+    <van-button type="primary">水平排列</van-button>
+  </template>
+</van-popover>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const showPopover = ref(false);
+    const actions = [
+      { text: '选项一' },
+      { text: '选项二' },
+      { text: '选项三' },
+    ];
+
+    return {
+      actions,
+      showPopover,
+    };
+  },
+};
+```
+
 ### 弹出位置
 
 通过 `placement` 属性来控制气泡的弹出位置。
@@ -257,6 +293,7 @@ export default {
 | --- | --- | --- | --- |
 | v-model:show | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _PopoverAction[]_ | `[]` |
+| actions-direction | 选项列表的排列方向，可选值为 `horizontal` | _PopoverActionsDirection_ | `vertical` |
 | placement | 弹出位置 | _PopoverPlacement_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _PopoverTheme_ | `light` |
 | trigger | 触发方式，可选值为 `manual` | _PopoverTrigger_ | `click` |
@@ -312,6 +349,7 @@ import type {
   PopoverProps,
   PopoverTheme,
   PopoverAction,
+  PopoverActionsDirection,
   PopoverTrigger,
   PopoverPlacement,
 } from 'vant';
@@ -332,6 +370,8 @@ import type {
 | --van-popover-action-font-size | _var(--van-font-size-md)_ | - |
 | --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
 | --van-popover-action-icon-size | _20px_ | - |
+| --van-popover-horizontal-action-height | _34px_ | - |
+| --van-popover-horizontal-action-icon-size | _16px_ | - |
 | --van-popover-light-text-color | _var(--van-text-color)_ | - |
 | --van-popover-light-background | _var(--van-background-2)_ | - |
 | --van-popover-light-action-disabled-text-color | _var(--van-text-color-3)_ | - |

packages/vant/src/popover/demo/index.vue

@@ -27,6 +27,9 @@ const t = useTranslate({
       { text: '选项二', disabled: true },
       { text: '选项三' },
     ],
+    actionsDirection: '排列方向',
+    horizontal: '水平排列',
+    vertical: '垂直排列',
     showIcon: '展示图标',
     placement: '弹出位置',
     darkTheme: '深色风格',
@@ -51,6 +54,9 @@ const t = useTranslate({
       { text: 'Option 2', disabled: true },
       { text: 'Option 3' },
     ],
+    actionsDirection: 'Actions Direction',
+    horizontal: 'Horizontal',
+    vertical: 'Vertical',
     showIcon: 'Show Icon',
     placement: 'Placement',
     darkTheme: 'Dark Theme',
@@ -80,6 +86,8 @@ const placements: PickerOption[] = [
 ].map((item) => ({ text: item, value: item }));
 
 const show = ref({
+  horizontal: false,
+  vertical: false,
   showIcon: false,
   placement: false,
   darkTheme: false,
@@ -176,6 +184,34 @@ const onSelect = (action: { text: string }) => showToast(action.text);
     </van-popup>
   </demo-block>
 
+  <demo-block :title="t('actionsDirection')">
+    <van-popover
+      v-model:show="show.horizontal"
+      :actions="t('actions')"
+      actions-direction="horizontal"
+      placement="bottom-start"
+      @select="onSelect"
+    >
+      <template #reference>
+        <van-button type="primary">
+          {{ t('horizontal') }}
+        </van-button>
+      </template>
+    </van-popover>
+
+    <van-popover
+      v-model:show="show.vertical"
+      :actions="t('actions')"
+      @select="onSelect"
+    >
+      <template #reference>
+        <van-button type="primary">
+          {{ t('vertical') }}
+        </van-button>
+      </template>
+    </van-popover>
+  </demo-block>
+
   <demo-block :title="t('actionOptions')">
     <van-popover
       v-model:show="show.showIcon"

packages/vant/src/popover/index.less

@@ -6,6 +6,8 @@
   --van-popover-action-font-size: var(--van-font-size-md);
   --van-popover-action-line-height: var(--van-line-height-md);
   --van-popover-action-icon-size: 20px;
+  --van-popover-horizontal-action-height: 34px;
+  --van-popover-horizontal-action-icon-size: 16px;
   --van-popover-light-text-color: var(--van-text-color);
   --van-popover-light-background: var(--van-background-2);
   --van-popover-light-action-disabled-text-color: var(--van-text-color-3);
@@ -36,6 +38,27 @@
   &__content {
     overflow: hidden;
     border-radius: var(--van-popover-radius);
+
+    &--horizontal {
+      display: flex;
+      width: max-content;
+
+      .van-popover__action {
+        flex: none;
+        width: auto;
+        height: var(--van-popover-horizontal-action-height);
+        padding: 0 var(--van-padding-sm);
+
+        &:last-child::after {
+          display: none;
+        }
+
+        &-icon {
+          margin-right: var(--van-padding-base);
+          font-size: var(--van-popover-horizontal-action-icon-size);
+        }
+      }
+    }
   }
 
   &__action {

packages/vant/src/popover/test/__snapshots__/demo-ssr.spec.ts.snap

@@ -71,6 +71,39 @@ exports[`should render demo and match snapshot 1`] = `
     </i>
   </div>
 </div>
+<div>
+  <!--[-->
+  <!--[-->
+  <span class="van-popover__wrapper">
+    <!--[-->
+    <button type="button"
+            class="van-button van-button--primary van-button--normal"
+            style
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          <!--[-->
+          Horizontal
+        </span>
+      </div>
+    </button>
+  </span>
+  <!--[-->
+  <span class="van-popover__wrapper">
+    <!--[-->
+    <button type="button"
+            class="van-button van-button--primary van-button--normal"
+            style
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          <!--[-->
+          Vertical
+        </span>
+      </div>
+    </button>
+  </span>
+</div>
 <div>
   <!--[-->
   <!--[-->

packages/vant/src/popover/test/__snapshots__/demo.spec.ts.snap

@@ -52,6 +52,30 @@ exports[`should render demo and match snapshot 1`] = `
     </i>
   </div>
 </div>
+<div>
+  <span class="van-popover__wrapper">
+    <button type="button"
+            class="van-button van-button--primary van-button--normal"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Horizontal
+        </span>
+      </div>
+    </button>
+  </span>
+  <span class="van-popover__wrapper">
+    <button type="button"
+            class="van-button van-button--primary van-button--normal"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Vertical
+        </span>
+      </div>
+    </button>
+  </span>
+</div>
 <div>
   <span class="van-popover__wrapper">
     <button type="button"

packages/vant/src/popover/test/__snapshots__/index.spec.tsx.snap

@@ -26,7 +26,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
     <div class="van-popover__arrow">
     </div>
     <div role="menu"
-         class="van-popover__content"
+         class="van-popover__content van-popover__content--vertical"
     >
       <div role="menuitem"
            class="van-popover__action van-popover__action--with-icon"
@@ -67,7 +67,7 @@ exports[`should locate to reference element when showed 2`] = `
     <div class="van-popover__arrow">
     </div>
     <div role="menu"
-         class="van-popover__content"
+         class="van-popover__content van-popover__content--vertical"
     >
     </div>
   </div>
@@ -89,7 +89,7 @@ exports[`should locate to reference element when showed 3`] = `
     <div class="van-popover__arrow">
     </div>
     <div role="menu"
-         class="van-popover__content"
+         class="van-popover__content van-popover__content--vertical"
     >
     </div>
   </div>
@@ -120,7 +120,7 @@ exports[`should watch placement prop and update location 1`] = `
     <div class="van-popover__arrow">
     </div>
     <div role="menu"
-         class="van-popover__content"
+         class="van-popover__content van-popover__content--vertical"
     >
     </div>
   </div>

packages/vant/src/popover/test/index.spec.tsx

@@ -227,3 +227,18 @@ test('should render action slot correctly', () => {
 
   expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
 });
+
+test('should add "van-popover__content--horizontal" class when actions-direction prop is horizontal', () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+      actions: baseActions,
+      actionsDirection: 'horizontal',
+      teleport: null,
+    },
+  });
+
+  expect(wrapper.find('.van-popover__content').classes()).toContain(
+    'van-popover__content--horizontal'
+  );
+});

packages/vant/src/popover/types.ts

@@ -1,4 +1,5 @@
 export type PopoverTheme = 'light' | 'dark';
+export type PopoverActionsDirection = 'horizontal' | 'vertical';
 export type PopoverTrigger = 'manual' | 'click';
 export type PopoverPlacement =
   | 'top'

packages/vant/src/utils/constant.ts

@@ -4,6 +4,7 @@ import type { FormProvide } from '../form/types';
 export const BORDER = 'van-hairline';
 export const BORDER_TOP = `${BORDER}--top`;
 export const BORDER_LEFT = `${BORDER}--left`;
+export const BORDER_RIGHT = `${BORDER}--right`;
 export const BORDER_BOTTOM = `${BORDER}--bottom`;
 export const BORDER_SURROUND = `${BORDER}--surround`;
 export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;