From 5acc9907a0e9da3416eb3601dff4019ef5d55924 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Wed, 22 Jun 2022 13:11:11 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=80(lint):=20fix=20linter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/component/cascader/index.vue          |   6 +-
 .../src/component/dropdown/index.vue          | 153 ++++++++++--------
 .../src/component/dropdown/interface.ts       |   8 +-
 3 files changed, 102 insertions(+), 65 deletions(-)

diff --git a/package/component/src/component/cascader/index.vue b/package/component/src/component/cascader/index.vue
index fd3ad2c3..e68dc335 100644
--- a/package/component/src/component/cascader/index.vue
+++ b/package/component/src/component/cascader/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <lay-dropdown class="layui-cascader" ref="dropdownRef"  :autoFitMinWidth="false">
+  <lay-dropdown
+    class="layui-cascader"
+    ref="dropdownRef"
+    :autoFitMinWidth="false"
+  >
     <lay-input
       v-model="displayValue"
       readonly
diff --git a/package/component/src/component/dropdown/index.vue b/package/component/src/component/dropdown/index.vue
index b5028b28..d15c9792 100644
--- a/package/component/src/component/dropdown/index.vue
+++ b/package/component/src/component/dropdown/index.vue
@@ -6,7 +6,15 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { CSSProperties, nextTick, provide, ref, shallowRef, watch, watchEffect } from "vue";
+import {
+  CSSProperties,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+} from "vue";
 import { onClickOutside, useWindowSize } from "@vueuse/core";
 import { DropdownTrigger, dropdownPlacement } from "./interface";
 
@@ -16,13 +24,13 @@ export interface LayDropdownProps {
   disabled?: boolean;
   autoFitPlacement?: boolean;
   autoFitWidth?: boolean;
-  autoFitMinWidth?: boolean; 
+  autoFitMinWidth?: boolean;
 }
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
   disabled: false,
-  placement: 'bottom-left',
+  placement: "bottom-left",
   autoFitPlacement: true,
   autoFitMinWidth: true,
   autoFitWidth: false,
@@ -38,7 +46,7 @@ const contentSpace = 2;
 const emit = defineEmits(["open", "hide"]);
 
 onClickOutside(dropdownRef, () => {
-  changeVisible(false)
+  changeVisible(false);
 });
 
 const open = (): void => {
@@ -70,30 +78,27 @@ const changeVisible = (visible: boolean) => {
   nextTick(() => {
     updateContentStyle();
   });
-}
+};
 
 const updateContentStyle = () => {
-  if (!dropdownRef.value || !contentRef.value){
-    return
+  if (!dropdownRef.value || !contentRef.value) {
+    return;
   }
-  const triggerRect = dropdownRef.value.getBoundingClientRect()
-  const contentRect = contentRef.value.getBoundingClientRect()
-  const { style } = getContentStyle(
-    props.placement, 
-    triggerRect, 
-    contentRect, 
-    {autoFitPlacement: props.autoFitPlacement}
-  );
+  const triggerRect = dropdownRef.value.getBoundingClientRect();
+  const contentRect = contentRef.value.getBoundingClientRect();
+  const { style } = getContentStyle(props.placement, triggerRect, contentRect, {
+    autoFitPlacement: props.autoFitPlacement,
+  });
 
   if (props.autoFitMinWidth) {
     style.minWidth = `${triggerRect.width}px`;
-  } 
+  }
   if (props.autoFitWidth) {
     style.width = `${triggerRect.width}px`;
   }
-  
-  contentStyle.value = style
-}
+
+  contentStyle.value = style;
+};
 
 const getContentStyle = (
   placement: dropdownPlacement,
@@ -101,15 +106,21 @@ const getContentStyle = (
   contentRect: DOMRect,
   {
     autoFitPlacement = false,
-    customStyle = {}
+    customStyle = {},
   }: {
     autoFitPlacement?: boolean;
     customStyle?: CSSProperties;
   } = {}
 ) => {
-  let { top, left } = getContentOffset(placement, triggerRect, contentRect)
-  if(autoFitPlacement){
-    const { top: fitTop, left: fitLeft } = getFitPlacement(top, left, placement, triggerRect, contentRect)
+  let { top, left } = getContentOffset(placement, triggerRect, contentRect);
+  if (autoFitPlacement) {
+    const { top: fitTop, left: fitLeft } = getFitPlacement(
+      top,
+      left,
+      placement,
+      triggerRect,
+      contentRect
+    );
     top = fitTop;
     left = fitLeft;
   }
@@ -117,104 +128,108 @@ const getContentStyle = (
     top: `${top}px`,
     left: `${left}px`,
     ...customStyle,
-  }
+  };
   return {
-    style
-  }
-}
+    style,
+  };
+};
 
 const getFitPlacement = (
-  top: number, 
-  left: number, 
+  top: number,
+  left: number,
   placement: dropdownPlacement,
   triggerRect: DOMRect,
   contentRect: DOMRect
 ) => {
   // 溢出屏幕底部
   if (triggerRect.bottom + contentRect.height > windowHeight.value) {
-    top = -contentRect.height - contentSpace
+    top = -contentRect.height - contentSpace;
   }
   // 溢出屏幕顶部
   if (triggerRect.top - contentRect.height < 0) {
-    top = triggerRect.height + contentSpace
+    top = triggerRect.height + contentSpace;
   }
-  if(["bottom-right", "top-right"].includes(placement) ){
+  if (["bottom-right", "top-right"].includes(placement)) {
     // 溢出屏幕左边
-    const contentRectLeft = triggerRect.left - (contentRect.width - triggerRect.width)
+    const contentRectLeft =
+      triggerRect.left - (contentRect.width - triggerRect.width);
     if (contentRectLeft < 0) {
-      left = left + (0 - contentRectLeft)
+      left = left + (0 - contentRectLeft);
     }
   }
 
-  if(["bottom-left", "top-left"].includes(placement)){
+  if (["bottom-left", "top-left"].includes(placement)) {
     // 溢出屏幕右边
-    const contentRectRight = triggerRect.right + (contentRect.width - triggerRect.width)
+    const contentRectRight =
+      triggerRect.right + (contentRect.width - triggerRect.width);
     if (contentRectRight > windowWidth.value) {
-      left = left - (contentRectRight - windowWidth.value)
+      left = left - (contentRectRight - windowWidth.value);
     }
   }
 
-  if(["bottom", "top"].includes(placement)){
-    const contentRectLeft = triggerRect.left - (contentRect.width - triggerRect.width) / 2
-    const contentRectRight = triggerRect.right + (contentRect.width - triggerRect.width) / 2
+  if (["bottom", "top"].includes(placement)) {
+    const contentRectLeft =
+      triggerRect.left - (contentRect.width - triggerRect.width) / 2;
+    const contentRectRight =
+      triggerRect.right + (contentRect.width - triggerRect.width) / 2;
     // 溢出屏幕左边
     if (contentRectLeft < 0) {
-      left = left + (0 - contentRectLeft)
+      left = left + (0 - contentRectLeft);
     }
     // 溢出屏幕右边
     if (contentRectRight > windowWidth.value) {
-      left = left - (contentRectRight - windowWidth.value)
+      left = left - (contentRectRight - windowWidth.value);
     }
   }
   return {
     top,
-    left
-  }
-}
+    left,
+  };
+};
 
 const getContentOffset = (
   placement: dropdownPlacement,
-  triggerRect: DOMRect, 
+  triggerRect: DOMRect,
   contentRect: DOMRect
 ) => {
   switch (placement) {
     case "top":
       return {
         top: -contentRect.height - contentSpace,
-        left: -(contentRect.width - triggerRect.width) / 2
-      }
+        left: -(contentRect.width - triggerRect.width) / 2,
+      };
     case "top-left":
       return {
         top: -contentRect.height - contentSpace,
-        left: 0
-      }
+        left: 0,
+      };
     case "top-right":
       return {
         top: -contentRect.height - contentSpace,
-        left: -(contentRect.width - triggerRect.width)
-      }
+        left: -(contentRect.width - triggerRect.width),
+      };
     case "bottom":
       return {
         top: triggerRect.height + contentSpace,
-        left: -(contentRect.width - triggerRect.width) / 2
-      }
+        left: -(contentRect.width - triggerRect.width) / 2,
+      };
     case "bottom-left":
       return {
         top: triggerRect.height + contentSpace,
-        left: 0
-      }
+        left: 0,
+      };
     case "bottom-right":
       return {
         top: triggerRect.height + contentSpace,
-        left: -(contentRect.width - triggerRect.width)
-      }
+        left: -(contentRect.width - triggerRect.width),
+      };
     default:
       return {
         left: 0,
         top: 0,
       };
   }
-}
+};
 
 provide("openState", openState);
 
@@ -222,12 +237,24 @@ defineExpose({ open, hide, toggle });
 </script>
 
 <template>
-  <div ref="dropdownRef" class="layui-dropdown" @mouseenter="trigger == 'hover' && open()"
-    @mouseleave="trigger == 'hover' && hide()" :class="{ 'layui-dropdown-up': openState }">
-    <div @click="trigger == 'click' && toggle()" @contextmenu.prevent="trigger == 'contextMenu' && toggle()">
+  <div
+    ref="dropdownRef"
+    class="layui-dropdown"
+    @mouseenter="trigger == 'hover' && open()"
+    @mouseleave="trigger == 'hover' && hide()"
+    :class="{ 'layui-dropdown-up': openState }"
+  >
+    <div
+      @click="trigger == 'click' && toggle()"
+      @contextmenu.prevent="trigger == 'contextMenu' && toggle()"
+    >
       <slot></slot>
     </div>
-    <dl ref="contentRef" class="layui-anim layui-anim-upbit" :style="contentStyle">
+    <dl
+      ref="contentRef"
+      class="layui-anim layui-anim-upbit"
+      :style="contentStyle"
+    >
       <slot name="content"></slot>
     </dl>
   </div>
diff --git a/package/component/src/component/dropdown/interface.ts b/package/component/src/component/dropdown/interface.ts
index 38209b77..4130903f 100644
--- a/package/component/src/component/dropdown/interface.ts
+++ b/package/component/src/component/dropdown/interface.ts
@@ -1,2 +1,8 @@
 export type DropdownTrigger = "click" | "hover" | "contextMenu";
-export type dropdownPlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+export type dropdownPlacement =
+  | "top"
+  | "top-left"
+  | "top-right"
+  | "bottom"
+  | "bottom-left"
+  | "bottom-right";