feat(Popover): add show-arrow prop (#9372)

docs/markdown/use-rect.zh-CN.md

@@ -19,7 +19,7 @@ import { useRect } from '@vant/use';
 export default {
   setup() {
     const root = ref();
-    const rect = useRect();
+    const rect = useRect(root);
 
     console.log(rect); // -> 元素的大小及其相对于视口的位置
 

src/coupon-cell/CouponCell.tsx

@@ -30,7 +30,7 @@ function formatValue(
     return `-${currency} ${(value / 100).toFixed(2)}`;
   }
 
-  return coupons.length === 0 ? t('tips') : t('count', coupons.length);
+  return coupons.length === 0 ? t('noCoupon') : t('count', coupons.length);
 }
 
 export default defineComponent({

src/coupon-list/CouponList.tsx

@@ -117,7 +117,7 @@ export default defineComponent({
     const renderEmpty = () => (
       <div class={bem('empty')}>
         <img src={props.emptyImage} />
-        <p>{t('empty')}</p>
+        <p>{t('noCoupon')}</p>
       </div>
     );
 

src/datetime-picker/DatetimePicker.tsx

@@ -1,8 +1,9 @@
 import { ref, defineComponent, ExtractPropTypes } from 'vue';
-import { pick, createNamespace, ComponentInstance, extend } from '../utils';
+import { pick, extend, createNamespace } from '../utils';
 import { useExpose } from '../composables/use-expose';
 import TimePicker from './TimePicker';
 import DatePicker from './DatePicker';
+import { DatetimePickerInstance } from './types';
 
 const [name, bem] = createNamespace('datetime-picker');
 
@@ -20,7 +21,7 @@ export default defineComponent({
   props,
 
   setup(props, { attrs, slots }) {
-    const root = ref<ComponentInstance>();
+    const root = ref<DatetimePickerInstance>();
 
     useExpose({
       getPicker: () => root.value?.getPicker(),

src/locale/lang/de-DE-formal.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Abbrechen',
   delete: 'Löschen',
   loading: 'Laden...',
+  noCoupon: 'Keine Coupons',
   nameEmpty: 'Bitte geben Sie den Name an',
   confirmDelete: 'Sind Sie sicher, dass Sie löschen möchten?',
   telInvalid: 'Ungültige Telefonnummer',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Coupon',
-    tips: 'Keine Coupons',
     count: (count: number) => `Sie haben ${count} Coupons`,
   },
   vanCouponList: {
-    empty: 'Keine Coupons',
     exchange: 'Austauschen',
     close: 'Schließen',
     enable: 'Verfügbar',

src/locale/lang/de-DE.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Abbrechen',
   delete: 'Löschen',
   loading: 'Laden...',
+  noCoupon: 'Keine Coupons',
   nameEmpty: 'Bitte den Name angeben',
   confirmDelete: 'Bist du sicher, dass du löschen möchtest?',
   telInvalid: 'Ungültige Telefonnummer',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Coupon',
-    tips: 'Keine Coupons',
     count: (count: number) => `Du hast ${count} Coupons`,
   },
   vanCouponList: {
-    empty: 'Keine Coupons',
     exchange: 'Austauschen',
     close: 'Schließen',
     enable: 'Verfügbar',

src/locale/lang/en-US.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Cancel',
   delete: 'Delete',
   loading: 'Loading...',
+  noCoupon: 'No coupons',
   nameEmpty: 'Please fill in the name',
   confirmDelete: 'Are you sure you want to delete?',
   telInvalid: 'Malformed phone number',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Coupon',
-    tips: 'No coupons',
     count: (count: number) => `You have ${count} coupons`,
   },
   vanCouponList: {
-    empty: 'No coupons',
     exchange: 'Exchange',
     close: 'Close',
     enable: 'Available',

src/locale/lang/es-ES.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Cancelar',
   delete: 'Eliminar',
   loading: 'Cargando...',
+  noCoupon: 'Sin cupones',
   nameEmpty: 'Por favor rellena el nombre',
   confirmDelete: 'Estás seguro de eliminarlo?',
   telInvalid: 'Teléfono inválido',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Cupón',
-    tips: 'Sin cupones',
     count: (count: number) => `You have ${count} coupons`,
   },
   vanCouponList: {
-    empty: 'Sin cupones',
     exchange: 'Intercambio',
     close: 'Cerrar',
     enable: 'Disponible',

src/locale/lang/fr-FR.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Annuler',
   delete: 'Suprimer',
   loading: 'Chargement...',
+  noCoupon: 'Pas de coupons',
   nameEmpty: 'Veuillez remplir le nom',
   confirmDelete: 'Êtes-vous sûr de vouloir supprimer?',
   telInvalid: 'Numéro de téléphone incorrect',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Coupon',
-    tips: 'Pas de coupons',
     count: (count: number) => `Vous avez ${count} coupons`,
   },
   vanCouponList: {
-    empty: 'Pas de coupons',
     exchange: 'Exchange',
     close: 'Fermer',
     enable: 'Disponible',

src/locale/lang/ja-JP.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'キャンセル',
   delete: '削除',
   loading: '読み込み中...',
+  noCoupon: 'クーポンはありません',
   nameEmpty: '名前を入力してください',
   confirmDelete: '本当に削除しますか',
   telInvalid: '正しい電話番号を入力してください',
@@ -46,11 +47,9 @@ export default {
   },
   vanCouponCell: {
     title: 'クーポン',
-    tips: '利用可能なクーポンがありません',
     count: (count: number) => `${count}枚が利用可能`,
   },
   vanCouponList: {
-    empty: 'クーポンはありません',
     exchange: '両替',
     close: 'クーポンを使用しません',
     enable: '利用可能',

src/locale/lang/nb-NO.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Avbryt',
   delete: 'Slett',
   loading: 'Laster...',
+  noCoupon: 'Ingen kuponger',
   nameEmpty: 'Vennligst fyll inn navn',
   confirmDelete: 'Er du sikker på at du vil slette?',
   telInvalid: 'Ugyldig telefonnummer',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Kupong',
-    tips: 'Ingen kuponger',
     count: (count: number) => `Du har ${count} kuponger`,
   },
   vanCouponList: {
-    empty: 'Ingen kuponger',
     exchange: 'Bytte',
     close: 'Lukk',
     enable: 'Tilgjengelig',

src/locale/lang/ro-RO.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Anulează',
   delete: 'Șterge',
   loading: 'Încărcare...',
+  noCoupon: 'Fără cupoane',
   nameEmpty: 'Te rugăm să completezi numele',
   confirmDelete: 'Ești sigur ca vrei sa stergi?',
   telInvalid: 'Număr de telefon invalid',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Cupon',
-    tips: 'Fără cupoane',
     count: (count: number) => `Ai ${count} cupoane`,
   },
   vanCouponList: {
-    empty: 'Fără cupoane',
     exchange: 'Schimbă',
     close: 'Închide',
     enable: 'Disponibil',

src/locale/lang/ru-RU.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'Отмена',
   delete: 'Удалить',
   loading: 'Загрузка...',
+  noCoupon: 'Нет купонов',
   nameEmpty: 'Пожалуйста укажите имя',
   confirmDelete: 'Вы уверены, что хотите удалить?',
   telInvalid: 'Некорректный номер телефона',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Купон',
-    tips: 'Нет купонов',
     count: (count: number) => `У вас есть ${count} купонов`,
   },
   vanCouponList: {
-    empty: 'Нет купонов',
     exchange: 'Обмен',
     close: 'Закрыть',
     enable: 'Доступно',

src/locale/lang/th-TH.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'ยกเลิก',
   delete: 'ลบ',
   loading: 'กำลังโหลด...',
+  noCoupon: 'ไม่มีคูปอง',
   nameEmpty: 'กรุณากรอกชื่อของคุณ',
   confirmDelete: 'คุณแน่ใจว่าต้องการลบ',
   telInvalid: 'กรุณากรอกหมายเลขโทรศัพท์ที่ถูกต้อง',
@@ -47,11 +48,9 @@ export default {
   },
   vanCouponCell: {
     title: 'คูปอง',
-    tips: 'ไม่สามารถใช้ได้',
     count: (count: number) => `มีรูปภาพ ${count} รูป`,
   },
   vanCouponList: {
-    empty: 'ไม่มีคูปอง',
     exchange: 'แลกเปลี่ยน',
     close: 'ห้ามใช้คูปอง',
     enable: 'พร้อมใช้งาน',

src/locale/lang/tr-TR.ts

@@ -6,6 +6,7 @@ export default {
   cancel: 'İptal',
   delete: 'Sil',
   loading: 'Yükleniyor...',
+  noCoupon: 'Kupon yok',
   nameEmpty: 'Lütfen isim giriniz',
   confirmDelete: 'Silmek istediğinize emin misiniz?',
   telInvalid: 'Geçersiz tel. numarası',
@@ -45,11 +46,9 @@ export default {
   },
   vanCouponCell: {
     title: 'Kupon',
-    tips: 'Kupon yok',
     count: (count: number) => `${count} adet teklif var`,
   },
   vanCouponList: {
-    empty: 'Kupon yok',
     exchange: 'Takas',
     close: 'Kapat',
     enable: 'Mevcut',

src/locale/lang/zh-CN.ts

@@ -6,9 +6,10 @@ export default {
   cancel: '取消',
   delete: '删除',
   loading: '加载中...',
+  noCoupon: '暂无优惠券',
   nameEmpty: '请填写姓名',
   confirmDelete: '确定要删除吗',
-  telInvalid: '请输入正确的电话',
+  telInvalid: '请填写正确的电话',
   vanCalendar: {
     end: '结束',
     start: '开始',
@@ -46,11 +47,9 @@ export default {
   },
   vanCouponCell: {
     title: '优惠券',
-    tips: '暂无可用',
     count: (count: number) => `${count}张可用`,
   },
   vanCouponList: {
-    empty: '暂无优惠券',
     exchange: '兑换',
     close: '不使用优惠券',
     enable: '可用',

src/locale/lang/zh-HK.ts

@@ -6,6 +6,7 @@ export default {
   cancel: '取消',
   delete: '刪除',
   loading: '加載中...',
+  noCoupon: '暫無優惠券',
   nameEmpty: '請填寫姓名',
   confirmDelete: '確定要刪除嗎',
   telInvalid: '請填寫正確的電話',
@@ -46,11 +47,9 @@ export default {
   },
   vanCouponCell: {
     title: '優惠券',
-    tips: '暫無可用',
     count: (count: number) => `${count}張可用`,
   },
   vanCouponList: {
-    empty: '暫無優惠券',
     exchange: '兌換',
     close: '不使用優惠',
     enable: '可使用優惠券',

src/locale/lang/zh-TW.ts

@@ -6,6 +6,7 @@ export default {
   cancel: '取消',
   delete: '刪除',
   loading: '載入中...',
+  noCoupon: '暫無優惠券',
   nameEmpty: '請填寫姓名',
   confirmDelete: '確定要刪除嗎',
   telInvalid: '請填寫正確的電話',
@@ -46,11 +47,9 @@ export default {
   },
   vanCouponCell: {
     title: '優惠券',
-    tips: '暫無可用',
     count: (count: number) => `${count}張可用`,
   },
   vanCouponList: {
-    empty: '暫無優惠券',
     exchange: '兌換',
     close: '不使用優惠',
     enable: '可使用優惠券',

src/popover/Popover.tsx

@@ -102,6 +102,10 @@ export default defineComponent({
       type: [String, Object] as PropType<TeleportProps['to']>,
       default: 'body',
     },
+    showArrow: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['select', 'touchstart', 'update:show'],
@@ -234,7 +238,7 @@ export default defineComponent({
           {...pick(props, popupProps)}
           {...{ 'onUpdate:show': updateShow }}
         >
-          <div class={bem('arrow')} />
+          {props.showArrow && <div class={bem('arrow')} />}
           <div role="menu" class={bem('content')}>
             {slots.default ? slots.default() : props.actions.map(renderAction)}
           </div>

src/popover/README.md

@@ -220,6 +220,7 @@ export default {
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | overlay-class `v3.0.10` | Custom overlay class | _string \| Array \| object_ | - |
 | overlay-style `v3.0.10` | Custom overlay style | _object_ | - |
+| show-arrow `v3.2.2` | Whether to show arrow | _boolean_ | `true` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
 | close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
 | close-on-click-overlay `v3.0.10` | Whether to close when clicking overlay | _boolean_ | `true` |

src/popover/README.zh-CN.md

@@ -230,6 +230,7 @@ export default {
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | overlay-class `v3.0.10` | 自定义遮罩层类名 | _string \| Array \| object_ | - |
 | overlay-style `v3.0.10` | 自定义遮罩层样式 | _object_ | - |
+| show-arrow `v3.2.2` | 是否展示小箭头 | _boolean_ | `true` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
 | close-on-click-overlay `v3.0.10` | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` |

src/popover/test/index.spec.tsx

@@ -200,3 +200,15 @@ test('should change icon class prefix when using icon-prefix prop', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should allow to hide arrow', () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+      teleport: null,
+      showArrow: false,
+    },
+  });
+
+  expect(wrapper.find('.van-popover__arrow').exists()).toBeFalsy();
+});