♻️(component): [dropdown] placement 更改为 *-start *-end

package/component/src/component/dropdown/index.vue

@@ -59,7 +59,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   visible: false,
   trigger: "click",
   disabled: false,
-  placement: "bottom-left",
+  placement: "bottom-start",
   autoFitPosition: true,
   autoFitMinWidth: true,
   autoFitWidth: false,
@@ -265,16 +265,16 @@ const getContentStyle = (
 };
 
 const getPosition = (placement: DropdownPlacement) => {
-  if (["top", "top-left", "top-right"].includes(placement)) {
+  if (["top", "top-start", "top-end"].includes(placement)) {
     return "top";
   }
-  if (["bottom", "bottom-left", "bottom-right"].includes(placement)) {
+  if (["bottom", "bottom-start", "bottom-end"].includes(placement)) {
     return "bottom";
   }
-  if (["left", "left-bottom", "left-top"].includes(placement)) {
+  if (["left", "left-start", "left-end"].includes(placement)) {
     return "left";
   }
-  if (["right", "right-bottom", "right-top"].includes(placement)) {
+  if (["right", "right-start", "right-end"].includes(placement)) {
     return "right";
   }
   return "bottom";
@@ -345,12 +345,12 @@ const getContentOffset = (
           triggerRect.scrollLeft +
           Math.round((triggerRect.width - contentRect.width) / 2),
       };
-    case "top-left":
+    case "top-start":
       return {
         top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
         left: triggerRect.scrollLeft,
       };
-    case "top-right":
+    case "top-end":
       return {
         top: triggerRect.scrollTop - contentRect.height - props.contentOffset,
         left: triggerRect.scrollRight - contentRect.width,
@@ -362,12 +362,12 @@ const getContentOffset = (
           triggerRect.scrollLeft +
           Math.round((triggerRect.width - contentRect.width) / 2),
       };
-    case "bottom-left":
+    case "bottom-start":
       return {
         top: triggerRect.scrollBottom + props.contentOffset,
         left: triggerRect.scrollLeft,
       };
-    case "bottom-right":
+    case "bottom-end":
       return {
         top: triggerRect.scrollBottom + props.contentOffset,
         left: triggerRect.scrollRight - contentRect.width,
@@ -379,12 +379,12 @@ const getContentOffset = (
           Math.round((triggerRect.height - contentRect.height) / 2),
         left: triggerRect.scrollRight + props.contentOffset,
       };
-    case "right-top":
+    case "right-start":
       return {
         top: triggerRect.scrollTop,
         left: triggerRect.scrollRight + props.contentOffset,
       };
-    case "right-bottom":
+    case "right-end":
       return {
         top: triggerRect.scrollBottom - contentRect.height,
         left: triggerRect.scrollRight + props.contentOffset,
@@ -396,12 +396,12 @@ const getContentOffset = (
           Math.round((triggerRect.height - contentRect.height) / 2),
         left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
       };
-    case "left-top":
+    case "left-start":
       return {
         top: triggerRect.scrollTop,
         left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,
       };
-    case "left-bottom":
+    case "left-end":
       return {
         top: triggerRect.scrollBottom - contentRect.height,
         left: triggerRect.scrollLeft - contentRect.width - props.contentOffset,

package/component/src/component/dropdown/interface.ts

@@ -1,17 +1,17 @@
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 export type DropdownPlacement =
   | "top"
-  | "top-left"
-  | "top-right"
+  | "top-start"
+  | "top-end"
   | "bottom"
-  | "bottom-left"
-  | "bottom-right"
+  | "bottom-start"
+  | "bottom-end"
   | "right"
-  | "right-top"
-  | "right-bottom"
+  | "right-start"
+  | "right-end"
   | "left"
-  | "left-top"
-  | "left-bottom";
+  | "left-start"
+  | "left-end";
 
 export interface ElementScrollRect {
   top: number;

package/component/src/component/dropdownSubMenu/index.vue

@@ -24,7 +24,7 @@ export interface LayDropdownSubMenuProps {
 const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), {
   trigger: "hover",
   disabled: false,
-  placement: "right-top",
+  placement: "right-start",
   contentOffset: 2,
 });
 </script>

package/component/src/component/subMenu/SubMenuPopup.vue

@@ -30,7 +30,7 @@ const isOpen = computed(() => {
 <template>
   <lay-dropdown
     trigger="hover"
-    placement="right-top"
+    placement="right-start"
     :autoFitMinWidth="false"
     :contentOffset="3"
     popupContainer="body"

package/component/src/component/tab/index.vue

@@ -25,7 +25,7 @@ import {
   reactive,
   h,
   createTextVNode,
-isVNode,
+  isVNode,
 } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { TabData, TabInjectKey } from "./interface";
@@ -268,16 +268,14 @@ const update = () => {
 };
 
 const renderTabChild = (child: TabData) => {
-
-  if (child.slots?.title){
-    return () => h("span", child.slots?.title && child.slots.title())
+  if (child.slots?.title) {
+    return () => h("span", child.slots?.title && child.slots.title());
   }
 
-  if (typeof child.title === "function"){
+  if (typeof child.title === "function") {
     // @ts-ignore
     return () => child.title();
-    
-  } else if (typeof child.title === "string"){
+  } else if (typeof child.title === "string") {
     return () => createTextVNode(child.title as string);
   }
 };

package/document-component/src/document/zh-CN/components/dropdown.md

@@ -57,6 +57,7 @@ export default {
 ::: demo
 
 <template>
+<lay-space>
   <lay-dropdown trigger="hover" updateAtScroll>
     <lay-button>Hover 触发</lay-button>
     <template #content>
@@ -67,7 +68,6 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
     <lay-dropdown updateAtScroll>
     <lay-button>Click 触发</lay-button>
     <template #content>
@@ -78,7 +78,6 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-    &nbsp;&nbsp;
     <lay-dropdown trigger="contextMenu" updateAtScroll>
     <lay-button>contextMenu 触发</lay-button>
     <template #content>
@@ -89,7 +88,6 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-        &nbsp;&nbsp;
     <lay-dropdown trigger="focus" updateAtScroll>
     <lay-input placeholder="Focus 触发"></lay-input>
     <template #content>
@@ -100,7 +98,6 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-          &nbsp;&nbsp;
     <lay-dropdown :trigger="['hover','focus','click']" updateAtScroll>
     <lay-input placeholder="hover focus click"></lay-input>
     <template #content>
@@ -111,6 +108,7 @@ export default {
         </lay-dropdown-menu>
     </template>
   </lay-dropdown>
+</lay-space>
 </template>
 
 <script>
@@ -267,90 +265,83 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown placement="top-left" updateAtScroll>
-    <lay-button type="primary">topLeft</lay-button>
+<lay-space wrap>
+  <lay-dropdown placement="top-start" updateAtScroll>
+    <lay-button type="primary">top-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
   <lay-dropdown placement="top" updateAtScroll>
     <lay-button type="primary">top</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
-  <lay-dropdown placement="top-right" updateAtScroll>
-    <lay-button type="primary">topRight</lay-button>
+  <lay-dropdown placement="top-end" updateAtScroll>
+    <lay-button type="primary">top-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
-  <lay-dropdown placement="bottom-left" updateAtScroll>
-    <lay-button type="primary">bottomLeft</lay-button>
+  <lay-dropdown placement="bottom-start" updateAtScroll>
+    <lay-button type="primary">bottom-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-    &nbsp;&nbsp;
   <lay-dropdown placement="bottom" updateAtScroll>
     <lay-button type="primary">bottom</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-    &nbsp;&nbsp;
-  <lay-dropdown placement="bottom-right" updateAtScroll>
-    <lay-button type="primary">bottomRight</lay-button>
+  <lay-dropdown placement="bottom-end" updateAtScroll>
+    <lay-button type="primary">bottom-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  <br><br>
-    &nbsp;&nbsp;
-  <lay-dropdown placement="right-top" updateAtScroll>
-    <lay-button type="primary">right-top</lay-button>
+</lay-space>
+<br><br>
+<lay-space>
+  <lay-dropdown placement="right-start" updateAtScroll>
+    <lay-button type="primary">right-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-    &nbsp;&nbsp;
   <lay-dropdown placement="right" updateAtScroll>
     <lay-button type="primary">right</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-    &nbsp;&nbsp;
-  <lay-dropdown placement="right-bottom" updateAtScroll>
-    <lay-button type="primary">right-bottom</lay-button>
+  <lay-dropdown placement="right-end" updateAtScroll>
+    <lay-button type="primary">right-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-   &nbsp;&nbsp;
-    <lay-dropdown placement="left-top" updateAtScroll>
-    <lay-button type="primary">left-top</lay-button>
+    <lay-dropdown placement="left-start" updateAtScroll>
+    <lay-button type="primary">left-start</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
   <lay-dropdown placement="left" updateAtScroll>
     <lay-button type="primary">left</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
-  <lay-dropdown placement="left-bottom" updateAtScroll>
-    <lay-button type="primary">left-bottom</lay-button>
+  <lay-dropdown placement="left-end" updateAtScroll>
+    <lay-button type="primary">left-end</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
+</lay-space>
 </template>
 
 <script>
@@ -486,6 +477,7 @@ export default {
 ::: demo
 
 <template>
+<lay-space>
    <lay-dropdown placement="bottom-left" autoFitWidth updateAtScroll>
     <lay-button type="primary">autoFitWidth</lay-button>
     <template #content>
@@ -496,7 +488,6 @@ export default {
       </lay-dropdown-menu>
     </template>
   </lay-dropdown>
-  &nbsp;&nbsp;
   <lay-dropdown placement="bottom-left" :autoFitMinWidth="false" updateAtScroll>
     <lay-button type="primary">关闭 autoFitMinWidth</lay-button>
     <template #content>
@@ -507,7 +498,6 @@ export default {
       </lay-dropdown-menu> 
     </template>
   </lay-dropdown>
-    &nbsp;&nbsp;
   <lay-dropdown placement="bottom-left" updateAtScroll>
     <lay-button type="primary">updateAtScroll</lay-button>
     <template #content>
@@ -518,7 +508,6 @@ export default {
       </lay-dropdown-menu> 
     </template>
   </lay-dropdown>
-      &nbsp;&nbsp;
   <lay-dropdown placement="bottom-left" updateAtScroll :contentOffset="8">
     <lay-button type="primary">contentOffset: 8px</lay-button>
     <template #content>
@@ -529,6 +518,7 @@ export default {
       </lay-dropdown-menu> 
     </template>
   </lay-dropdown>
+</lay-space>
 </template>
 
 <script setup>
@@ -547,7 +537,7 @@ import { ref, computed } from 'vue'
 | visible | 下拉面板是否可见 |`true` `false`|
 | trigger | 触发方式,类型 `string` 或 trigger 数组  | `click` `hover` `focus` `contextMenu` |
 | disabled | 是否禁用触发 | `true` `false` |
-| placement | 下拉面板位置 |`top` `bottom` `right` `left` `*-left` `*-right` `*-top` `*-bottom`|
+| placement | 下拉面板位置 |`top` `bottom` `right` `left` `*-start` `*-end`|
 | autoFitPosition| 是否自动调整下拉面板位置，默认 `true` |`true` `false` | 
 | autoFitWidth | 是否将下拉面板宽度设置为触发器宽度, 默认 `false` |`true` `false` |
 | autoFitMinWidth | 是否将下拉面板最小宽度设置为触发器宽度, 默认 `true` |`true` `false` |
@@ -610,7 +600,7 @@ import { ref, computed } from 'vue'
 | ------- | -------- | ------ |
 | trigger | 触发方式,类型 `string` 或 trigger 数组,默认 hover  | `click` `hover` `focus` `contextMenu` |
 | disabled | 是否禁用触发 | `true` `false` |
-| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-left` `*-right` `*-top` `*-bottom`|
+| placement | 下拉面板位置,默认 right-top |`top` `bottom` `right` `left` `*-start` `*-end`|
 | contentOffset | 下拉面板距离触发器的偏移距离，默认 2| -| 
 
 :::