refactor(components): popper composables (#5035)

* refactor(components): popper composables

- Refactor popper composables

* updates

* updates for tooltip

* Updates for popper. TODO: fix controlled tooltip animation

* Fix controlled mode popper animation issue

* Add new feature for customizing tooltip theme

* Fix popover and popconfirm error

* - Add Collection component for wrapping a collection of component
- Add FocusTrap component for trap focus for popups
- Add RovingFocus component for roving focus component type
- Adjust dropdown component based on these newly added components
- Add popper-trigger component for placing the trigger
- TODO: Finish current dropdown component, and all component's tests plus documents

* Refactor popper

* Complete organizing popper

* Almost finish dropdown

* Update popper tests

* update only-child test

* Finish focus trap component test

* Finish tooltip content test

* Finish tooltip trigger tests

* Finish tooltip tests

* finish tests for Collection and RovingFocusGroup

* Fix test cases for timeselect & select & popover

* Fix popover, popconfirm, menu bug and test cases

* Fix select-v2 test error caused by updating popper

* Fix date-picker test issue for updating popper

* fix test cases

* Fix eslint

* Rebase dev & fix tests

* Remove unused code

docs/examples/tooltip/basic.vue

@@ -7,7 +7,7 @@
         content="Top Left prompts info"
         placement="top-start"
       >
-        <el-button>top-start</el-button>
+        <el-button class="item">top-start</el-button>
       </el-tooltip>
       <el-tooltip
         class="box-item"
@@ -15,7 +15,7 @@
         content="Top Center prompts info"
         placement="top"
       >
-        <el-button>top</el-button>
+        <el-button class="item">top</el-button>
       </el-tooltip>
       <el-tooltip
         class="box-item"
@@ -23,7 +23,7 @@
         content="Top Right prompts info"
         placement="top-end"
       >
-        <el-button>top-end</el-button>
+        <el-button class="item">top-end</el-button>
       </el-tooltip>
     </div>
     <div class="row">
@@ -33,7 +33,7 @@
         content="Left Top prompts info"
         placement="left-start"
       >
-        <el-button>left-start</el-button>
+        <el-button class="item">left-start</el-button>
       </el-tooltip>
       <el-tooltip
         class="box-item"
@@ -59,7 +59,7 @@
         content="Right Center prompts info"
         placement="right"
       >
-        <el-button>right</el-button>
+        <el-button class="item">right</el-button>
       </el-tooltip>
     </div>
     <div class="row">
@@ -77,7 +77,7 @@
         content="Right Bottom prompts info"
         placement="right-end"
       >
-        <el-button>right-end</el-button>
+        <el-button class="item">right-end</el-button>
       </el-tooltip>
     </div>
     <div class="row center">
@@ -87,7 +87,7 @@
         content="Bottom Left prompts info"
         placement="bottom-start"
       >
-        <el-button>bottom-start</el-button>
+        <el-button class="item">bottom-start</el-button>
       </el-tooltip>
       <el-tooltip
         class="box-item"
@@ -95,7 +95,7 @@
         content="Bottom Center prompts info"
         placement="bottom"
       >
-        <el-button>bottom</el-button>
+        <el-button class="item">bottom</el-button>
       </el-tooltip>
       <el-tooltip
         class="box-item"
@@ -103,7 +103,7 @@
         content="Bottom Right prompts info"
         placement="bottom-end"
       >
-        <el-button>bottom-end</el-button>
+        <el-button class="item">bottom-end</el-button>
       </el-tooltip>
     </div>
   </div>