From 691641d655552d7cdc1fdf5434d8c7b2e0563a84 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Mon, 29 Aug 2022 00:57:42 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(component):=20[dropdown]plac?=
 =?UTF-8?q?ement=20=E5=85=BC=E5=AE=B9=E6=97=A7=E7=89=88=E5=BA=9F=E5=BC=83?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/dropdown/index.vue          | 16 +++++++++++---
 .../src/component/dropdown/interface.ts       | 14 +++++++++++-
 .../component/src/component/dropdown/util.ts  | 22 +++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 package/component/src/component/dropdown/util.ts

diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue
index 9d18bd33..abd99dbc 100644
--- a/package/component/src/component/dropdown/index.vue
+++ b/package/component/src/component/dropdown/index.vue
@@ -45,6 +45,7 @@ import {
 import TeleportWrapper from "../_components/teleportWrapper.vue";
 import { useFirstElement } from "./useFirstElement";
 import RenderFunction from "../_components/renderFunction";
+import { transformPlacement } from "./util";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 
@@ -90,6 +91,9 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   alignPoint: false,
   popupContainer: "body",
 });
+
+const emit = defineEmits(["show", "hide"]);
+
 const slots = useSlots();
 const attrs = useAttrs();
 const childrenRefs = new Set<Ref<HTMLElement>>();
@@ -120,7 +124,9 @@ const triggerMethods = computed(() =>
   ([] as Array<DropdownTrigger>).concat(props.trigger)
 );
 
-const emit = defineEmits(["show", "hide"]);
+const computedPlacement = computed(() => {
+  return transformPlacement(props.placement);
+});
 
 let delayTimer = 0;
 
@@ -215,7 +221,11 @@ const updateContentStyle = () => {
     ? getTriggerRect()
     : getElementScrollRect(dropdownRef.value, containerRect);
   const contentRect = getElementScrollRect(contentRef.value, containerRect);
-  const { style } = getContentStyle(props.placement, triggerRect, contentRect);
+  const { style } = getContentStyle(
+    computedPlacement.value,
+    triggerRect,
+    contentRect
+  );
 
   if (props.autoFitMinWidth) {
     style.minWidth = `${triggerRect.width}px`;
@@ -240,7 +250,7 @@ const updateContentStyle = () => {
       const { top: fitTop, left: fitLeft } = getFitPlacement(
         top,
         left,
-        props.placement,
+        computedPlacement.value,
         triggerRect,
         contentRect
       );
diff --git a/package/component/src/component/dropdown/interface.ts b/package/component/src/component/dropdown/interface.ts
index 9483b932..10c05d45 100644
--- a/package/component/src/component/dropdown/interface.ts
+++ b/package/component/src/component/dropdown/interface.ts
@@ -1,4 +1,15 @@
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
+
+export type DropdownPlacementLegacy =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "right-top"
+  | "right-bottom"
+  | "left-top"
+  | "left-bottom";
+
 export type DropdownPlacement =
   | "top"
   | "top-start"
@@ -11,7 +22,8 @@ export type DropdownPlacement =
   | "right-end"
   | "left"
   | "left-start"
-  | "left-end";
+  | "left-end"
+  | DropdownPlacementLegacy;
 
 export interface ElementScrollRect {
   top: number;
diff --git a/package/component/src/component/dropdown/util.ts b/package/component/src/component/dropdown/util.ts
new file mode 100644
index 00000000..c61a5c3f
--- /dev/null
+++ b/package/component/src/component/dropdown/util.ts
@@ -0,0 +1,22 @@
+import { DropdownPlacement } from "./interface";
+
+export const transformPlacement = (
+  placement: DropdownPlacement
+): DropdownPlacement => {
+  const shouldTransform = placement.includes("-");
+  const placementMap: any = {
+    top: "start",
+    left: "start",
+    bottom: "end",
+    right: "end",
+  };
+
+  if (shouldTransform) {
+    const separated = placement.split("-");
+    return `${separated[0]}-${
+      placementMap[separated[1]] || separated[1]
+    }` as DropdownPlacement;
+  }
+
+  return placement;
+};