refactor: popover (#2913)

packages/nutui-taro-demo/src/exhibition/pages/popover/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 200px">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 

packages/nutui-taro-demo/src/exhibition/pages/popover/option.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { ref, shallowRef, h } from 'vue';
-import { Location, Cart2, My2 } from '@nutui/icons-vue';
+import { Location, Cart2, My2 } from '@nutui/icons-vue-taro';
 const show1 = ref(false);
 const show2 = ref(false);
 const list1 = ref([

packages/nutui-taro-demo/src/exhibition/pages/popover/position.vue

@@ -1,31 +1,30 @@
 <template>
   <nut-cell title="Position" @click="handlePicker"></nut-cell>
-  <nut-popup v-model:visible="showPopup" position="bottom">
-    <nut-picker :columns="columns" @change="change" @confirm="close" @close="close">
+  <nut-popup v-model:visible="showPopup" position="bottom" @opened="handleOpened">
+    <nut-picker :columns="columns" @change="change" @confirm="close" @cancel="close">
       <template #top>
-        <div class="brickBox">
+        <div class="brick-box">
           <div id="popover-target" class="brick"></div>
         </div>
       </template>
     </nut-picker>
   </nut-popup>
 
   <nut-popover
-    v-model:visible="customPositon"
+    v-model:visible="showPopover"
     target-id="popover-target"
     :location="curPostion"
     theme="dark"
     :list="positionList"
-  >
-  </nut-popover>
+  />
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 const showPopup = ref(false);
-const customPositon = ref(false);
+const showPopover = ref(false);
 const curPostion = ref('top');
-const positionList = reactive([
+const positionList = ref([
   {
     name: 'option1'
   },
@@ -34,20 +33,21 @@ const positionList = reactive([
   }
 ]);
 const close = () => {
-  customPositon.value = false;
+  showPopover.value = false;
   showPopup.value = false;
 };
 
 const change = ({ selectedValue }) => {
   curPostion.value = selectedValue[0];
-  if (showPopup.value) customPositon.value = true;
+  if (showPopup.value) showPopover.value = true;
 };
 
 const handlePicker = () => {
   showPopup.value = true;
-  setTimeout(() => {
-    customPositon.value = true;
-  }, 0);
+};
+
+const handleOpened = () => {
+  showPopover.value = true;
 };
 
 const columns = ref([
@@ -67,7 +67,11 @@ const columns = ref([
 </script>
 
 <style>
-.brickBox {
+.nut-popover-content {
+  width: 100px;
+}
+
+.brick-box {
   margin: 80px 0;
   display: flex;
   justify-content: center;
@@ -79,9 +83,3 @@ const columns = ref([
   border-radius: 10px;
 }
 </style>
-
-<style>
-.nut-popover-content {
-  width: 100px;
-}
-</style>

packages/nutui-taro-demo/src/exhibition/pages/tour/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 50px">
     <h2>{{ t('basic') }}</h2>
     <Basic />
 

src/packages/__VUE/popover/__tests__/popover.spec.tsx

@@ -0,0 +1,154 @@
+import { mount } from '@vue/test-utils';
+import Popover from '../index.vue';
+import { ref, nextTick } from 'vue';
+import { sleep } from '@/packages/utils/unit';
+
+const list = [{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }];
+
+const listDisabled = [{ name: 'option1', disabled: true }, { name: 'option2', disabled: true }, { name: 'option3' }];
+
+test('Popover: first render', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover-menu-item').exists()).toBeTruthy();
+});
+
+test('Popover: theme=dark', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} theme="dark" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover--dark').exists()).toBeTruthy();
+});
+
+test('Popover: disabled', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={listDisabled} theme="dark" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.findAll('.nut-popover-menu-disabled').length).toEqual(2);
+
+  wrapper.find('.nut-popover-menu-item').trigger('click');
+  expect(wrapper.emitted('choose')).toBeFalsy();
+});
+
+test('Popover: should close popover when clicking the action', async () => {
+  const show = ref(true);
+  const close = ref(true);
+  const wrapper = mount(
+    () => {
+      return <Popover v-model:visible={show.value} list={list} closeOnClickAction={close.value} />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  const items = wrapper.findAll('.nut-popover-menu-item');
+  await items[0].trigger('click');
+  expect(show.value).toEqual(false);
+
+  show.value = true;
+  close.value = false;
+  await nextTick();
+  expect(show.value).toEqual(true);
+  const item = wrapper.find('.nut-popover-menu-item');
+  await item.trigger('click');
+  expect(show.value).toEqual(true);
+});
+
+test('Popover: position=top-start', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} location="top-start" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover-arrow--top-start').exists()).toBeTruthy();
+});
+
+test('Popover: position=left-end', async () => {
+  const wrapper = mount(
+    () => {
+      return <Popover visible={true} list={list} location="left-end" />;
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  expect(wrapper.find('.nut-popover-arrow--left-end').exists()).toBeTruthy();
+});
+
+test('Popover: target', async () => {
+  const p = document.createElement('div');
+  p.id = 'popover-target';
+  p.getBoundingClientRect = vi.fn(() => {
+    return {
+      width: 300,
+      height: 100,
+      left: 0,
+      top: 0,
+      right: 300
+    } as DOMRect;
+  });
+  document.body.appendChild(p);
+  const show = ref(false);
+  const wrapper = mount(
+    () => {
+      return (
+        <Popover v-model:visible={show.value} duration={0} targetId="popover-target" list={list} arrowOffset={16} />
+      );
+    },
+    {
+      global: {
+        stubs: {
+          teleport: true
+        }
+      }
+    }
+  );
+  show.value = true;
+  await sleep(200);
+  const popoverWrapper = wrapper.find('.nut-popover');
+  expect(popoverWrapper.attributes('style')).contain('top: 112px;');
+  expect(popoverWrapper.attributes('style')).contain('left: 150px;');
+});

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

@@ -1,5 +1,5 @@
 <template>
-  <Demo>
+  <Demo style="padding-bottom: 200px">
     <h2>{{ t('basic') }}</h2>
     <Basic />