feat: 重构 Popover，去除第三方依赖 (#1873)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom

* feat: imagepreview

* fix: 组件imagepreview点击视频遮罩关闭(#1729)

* fix: 解决 Picker 在微信小程序中无法使用问题 (#1774)

* fix: 修改 Picker 组件 v-model 失效问题

* fix: 组件NoticeBar修改height之后，垂直轮播会卡顿

* fix: 删除Datepicker Demo演示多余内容

* fix: 组件Picker在JD小程序上适配

* fix: 组件Address京东小程序适配

* feat: 京东小程序适配

* fix: 删除空格

* feat: 删除console

* fix: 京东小程序imagepreview适配

* fix: 修复 imagepreview 动态设置 initNo 显示不正确问题

* fix: 组件 InfiniteLoading 某些情况下会错误触发下拉刷新#1819

* fix: 删除pullrefresh

* feat: 组件 imagepreview瘦身

* feat: 组件Picker 瘦身

* feat: popover

* feat: 新增

* feat: 组件 Popover 重构

* feat: 重构 popover

* fix: 删除多余文件

* fix: address线上问题修改

* fix: 完善imagepreview

* feat: 公共函数提取

* feat: 函数式改用 createComponent

* feat: 组件冲突解决

* feat: 更换实现方式

Author: yangxiaolu1993

package.json

@@ -83,7 +83,6 @@
   "devDependencies": {
     "@commitlint/cli": "^10.0.0",
     "@commitlint/config-conventional": "^10.0.0",
-    "@popperjs/core": "^2.11.5",
     "@tarojs/taro": "3.5.6",
     "@types/jest": "^26.0.22",
     "@types/node": "^17.0.16",

src/packages/__VUE/popover/demo.vue

@@ -4,19 +4,14 @@
 
     <nut-row type="flex">
       <nut-col :span="8">
-        <nut-popover
-          v-model:visible="visible.lightTheme"
-          :list="iconItemList"
-          location="bottom-start"
-          @choose="chooseItem"
-        >
+        <nut-popover v-model:visible="lightTheme" :list="iconItemList" location="bottom-start" @choose="chooseItem">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('light') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
-        <nut-popover v-model:visible="visible.darkTheme" theme="dark" :list="iconItemList">
+        <nut-popover v-model:visible="darkTheme" theme="dark" :list="iconItemList">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('dark') }}</nut-button>
           </template>
@@ -28,14 +23,14 @@
 
     <nut-row type="flex">
       <nut-col :span="8">
-        <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
+        <nut-popover v-model:visible="showIcon" theme="dark" :list="itemList">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('showIcon') }}</nut-button>
           </template>
         </nut-popover>
       </nut-col>
       <nut-col :span="8">
-        <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
+        <nut-popover v-model:visible="disableAction" :list="itemListDisabled" location="bottom-end">
           <template #reference>
             <nut-button type="primary" shape="square">{{ translate('disableAction') }}</nut-button>
           </template>
@@ -44,7 +39,7 @@
     </nut-row>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-popover v-model:visible="visible.Customized" location="bottom-start">
+    <nut-popover v-model:visible="Customized" location="top-start" custom-class="customClass">
       <template #reference>
         <nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
       </template>
@@ -61,29 +56,22 @@
 
     <h2>{{ translate('title3') }}</h2>
 
-    <nut-row type="flex" justify="center">
-      <nut-col :span="24" style="text-align: center">
-        <nut-popover
-          v-model:visible="visible.customPositon"
-          :location="curPostion"
-          theme="dark"
-          :list="positionList"
-          customClass="brickBox"
-        >
-          <template #reference>
-            <div class="brick"></div>
-          </template>
-        </nut-popover>
-      </nut-col>
-    </nut-row>
-
-    <nut-radiogroup v-model="curPostion" direction="horizontal" class="radiogroup">
-      <nut-radio shape="button" :label="pos" v-for="(pos, i) in position" :key="i">{{ pos }}</nut-radio>
-    </nut-radiogroup>
+    <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+    <nut-picker v-model:visible="showPicker" :columns="columns" title="" @change="change" :swipe-duration="500">
+      <template #top>
+        <div class="brickBox">
+          <nut-popover v-model:visible="customPositon" :location="curPostion" theme="dark" :list="positionList">
+            <template #reference>
+              <div class="brick"></div>
+            </template>
+          </nut-popover>
+        </div>
+      </template>
+    </nut-picker>
   </div>
 </template>
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('popover');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -116,7 +104,7 @@ const initTranslate = () =>
 export default createDemo({
   setup() {
     initTranslate();
-    const visible = ref({
+    const state = reactive({
       showIcon: false,
       placement: false,
       darkTheme: false,
@@ -126,22 +114,25 @@ export default createDemo({
       topLocation: false, //向上弹出
       rightLocation: false, //向右弹出
       leftLocation: false, //向左弹出
-      customPositon: false
+      customPositon: false,
+
+      showPicker: false
     });
     const curPostion = ref('top');
-    const position = ref([
-      'top',
-      'top-start',
-      'top-end',
-      'right',
-      'right-start',
-      'right-end',
-      'bottom',
-      'bottom-start',
-      'bottom-end',
-      'left',
-      'left-start',
-      'left-end'
+
+    const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
     ]);
 
     const iconItemList = reactive([
@@ -223,20 +214,32 @@ export default createDemo({
 
     const chooseItem = (item: unknown, index: number) => {
       console.log(item, index);
-      alert('selected');
     };
 
+    const handlePicker = () => {
+      state.showPicker = true;
+      setTimeout(() => {
+        state.customPositon = true;
+      });
+    };
+
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      state.customPositon = true;
+    };
     return {
       iconItemList,
       itemList,
-      visible,
+      ...toRefs(state),
       itemListDisabled,
       selfContent,
       chooseItem,
-      position,
       curPostion,
       positionList,
-      translate
+      translate,
+      columns,
+      change,
+      handlePicker
     };
   }
 });
@@ -247,10 +250,12 @@ export default createDemo({
 }
 .brickBox {
   margin: 80px 0;
+  display: flex;
+  justify-content: center;
   .brick {
     width: 60px;
     height: 60px;
-    background: #1989fa;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
     border-radius: 10px;
   }
 }
@@ -271,23 +276,32 @@ export default createDemo({
   }
 }
 
-.self-content {
-  width: 195px;
-  display: flex;
-  flex-wrap: wrap;
-  &-item {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.nut-popover-content {
+  width: 120px;
+}
+
+.customClass {
+  .nut-popover-content {
+    width: auto;
   }
-  &-desc {
-    margin-top: 5px;
-    width: 60px;
-    font-size: 10px;
-    text-align: center;
+  .self-content {
+    width: 195px;
+    display: flex;
+    flex-wrap: wrap;
+    &-item {
+      margin-top: 10px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+    &-desc {
+      margin-top: 5px;
+      width: 60px;
+      font-size: 10px;
+      text-align: center;
+    }
   }
 }
 </style>

src/packages/__VUE/popover/doc.en-US.md

@@ -296,6 +296,14 @@ export default {
 | offset `v3.1.21`       | the offset of the occurrence position  | [number, number]   | [0, 12]  |
 | show-arrow `v3.1.21`       | whether to show small arrows  | boolean  | true  |
 | custom-class `v3.1.21`       | custom class   | string  | ''  |
+| duration `v3.1.21`       | Transition duration  |  [number, number]  | 0.3  |
+| iconPrefix `v3.1.21`       | Icon className prefix | string  | 'nut-icon''  |
+| overlay `v3.2.8`       | Whether to show overlay  | Boolean  | false  |
+| overlay-class `v3.2.8`       | Custom overlay class | string  | ''  |
+| overlay-style `v3.2.8`       | Custom overlay style  | string  | ''  |
+| close-on-click-overlay `v3.2.8`       | Whether to close when clicking overlay  | boolean  | true  |
+| close-on-click-action `v3.2.8`       | Whether to close when clicking action  | boolean  | true |
+| close-on-click-outside `v3.2.8`       | Whether to close when clicking outside | boolean  | true  |
 
 ### List data structure  
 

src/packages/__VUE/popover/doc.md

@@ -295,6 +295,14 @@ export default {
 | offset `v3.1.21`       | 出现位置的偏移量  | [number, number]   | [0, 12]  |
 | show-arrow `v3.1.21`       | 是否显示小箭头  | boolean  | true  |
 | custom-class `v3.1.21`       | 自定义 class 值  | string  | ''  |
+| duration `v3.1.21`       | 动画时长  |  [number, number]  | 0.3  |
+| iconPrefix `v3.1.21`       | 图标自定义类值,等同于 Icon 组件的[ class-prefix 属性](https://nutui.jd.com/#/zh-CN/component/icon)  | string  | 'nut-icon''  |
+| overlay `v3.2.8`       | 是否显示遮罩层  | Boolean  | false  |
+| overlay-class `v3.2.8`       | 自定义遮罩层类名 | string  | ''  |
+| overlay-style `v3.2.8`       | 自定义遮罩层样式  | string  | ''  |
+| close-on-click-overlay `v3.2.8`       | 是否在点击遮罩层后关闭菜单  | boolean  | true  |
+| close-on-click-action `v3.2.8`       | 是否在点击选项后关闭  | boolean  | true |
+| close-on-click-outside `v3.2.8`       | 是否在点击外部元素后关闭菜单 | boolean  | true  |
 
 ### List 数据结构