!refactor: use Popper.js instead of Tether, update deps

ecomfe · Oct 30, 2019 · 90ad63c · 90ad63c
1 parent ff1a509
commit 90ad63c
Show file tree

Hide file tree

Showing 23 changed files with 2,729 additions and 3,165 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/babel-plugin-veui/package-lock.json b/packages/babel-plugin-veui/package-lock.json
diff --git a/packages/babel-preset-veui/package-lock.json b/packages/babel-preset-veui/package-lock.json
diff --git a/packages/veui-loader/package-lock.json b/packages/veui-loader/package-lock.json
diff --git a/packages/veui-theme-dls-icons/package-lock.json b/packages/veui-theme-dls-icons/package-lock.json
diff --git a/packages/veui-theme-dls/components/region-picker.less b/packages/veui-theme-dls/components/region-picker.less
@@ -88,43 +88,81 @@
         content: "";
         display: block;
         position: absolute;
-        bottom: -5px;
-        left: -8px;
         width: ~"calc(100% + 8px)";
         height: 10px;
         background-color: #fff;
       }
 
-      &::after {
-        bottom: -10px;
-        left: 20px;
+      &-overlay {
+        margin-top: -16px;
       }
 
-      .tether-element-attached-bottom + &-overlay &,
-      .tether-element-attached-bottom + [data-tether-id] + &-overlay & {
+      [x-placement*="top"] + &-overlay & {
         &::before {
           top: -15px;
           bottom: auto;
         }
 
         &::after {
           top: -20px;
-          bottom: auto;
+        }
+      }
+      [x-placement*="bottom"] + &-overlay & {
+        &::before {
+          bottom: -5px;
+        }
+        &::after {
+          bottom: -10px;
+        }
+      }
+
+      [x-placement*="start"] + &-overlay & {
+        &::before {
+          left: -8px;
+        }
+
+        &::after {
+          left: 20px;
+        }
+      }
+
+      [x-placement*="end"] + &-overlay & {
+        &::before {
+          right: 0;
+        }
+
+        &::after {
+          right: 20px;
         }
       }
     }
   }
 
   &-units {
     display: table;
-    margin: 10px 0 0 -8px;
     background-color: #fff;
     border-top: 1px solid @veui-gray-color-8;
     z-index: 0;
     .veui-overlay-shadow();
 
-    .tether-element-attached-bottom & {
-      margin: 0 0 10px -8px;
+    [x-placement*="top"] & {
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+
+    [x-placement*="bottom"] & {
+      margin-top: 10px;
+      margin-bottom: 0;
+    }
+
+    [x-placement*="start"] & {
+      margin-right: 0;
+      margin-left: -8px;
+    }
+
+    [x-placement*="end"] & {
+      margin-right: -8px;
+      margin-left: 0;
     }
   }
 

diff --git a/packages/veui-theme-dls/components/tooltip.less b/packages/veui-theme-dls/components/tooltip.less
@@ -80,22 +80,22 @@
     }
   }
 
-  .tether-element-attached-top.tether-target-attached-bottom & {
+  [x-placement*="bottom"] & {
     margin-top: @gap;
     .make-direction(top);
   }
 
-  .tether-element-attached-right.tether-target-attached-left & {
+  [x-placement*="left"] & {
     margin-right: @gap;
     .make-direction(right);
   }
 
-  .tether-element-attached-bottom.tether-target-attached-top & {
+  [x-placement*="top"] & {
     margin-bottom: @gap;
     .make-direction(bottom);
   }
 
-  .tether-element-attached-left.tether-target-attached-right & {
+  [x-placement*="right"] & {
     margin-left: @gap;
     .make-direction(left);
   }
@@ -127,19 +127,23 @@
     }
   }
 
-  .tether-element-attached-top.tether-target-attached-top & {
+  [x-placement="right-start"] &,
+  [x-placement="left-start"] & {
     .make-align(top);
   }
 
-  .tether-element-attached-right.tether-target-attached-right & {
+  [x-placement="top-end"] &,
+  [x-placement="bottom-end"] & {
     .make-align(right);
   }
 
-  .tether-element-attached-bottom.tether-target-attached-bottom & {
+  [x-placement="right-end"] &,
+  [x-placement="left-end"] & {
     .make-align(bottom);
   }
 
-  .tether-element-attached-left.tether-target-attached-left & {
+  [x-placement="top-start"] &,
+  [x-placement="bottom-start"] & {
     .make-align(left);
   }
 

diff --git a/packages/veui-theme-dls/dropdown.less b/packages/veui-theme-dls/dropdown.less
@@ -42,8 +42,8 @@
     transform: scaleY(0);
   }
 
-  .tether-element-attached-bottom.@{veui-prefix}-overlay-enter-active &,
-  .tether-element-attached-bottom.@{veui-prefix}-overlay-leave-active & {
+  [x-placement*="top"].@{veui-prefix}-overlay-enter-active &,
+  [x-placement*="top"].@{veui-prefix}-overlay-leave-active & {
     transform-origin: 50% 100%;
   }
 

diff --git a/packages/veui-theme-dls/package-lock.json b/packages/veui-theme-dls/package-lock.json