feat: Popper

jaskang · Mar 8, 2024 · 337b068 · 337b068
1 parent 17c9e6f
commit 337b068
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/packages/vue/src/Base/Popper/Popper.vue b/packages/vue/src/Base/Popper/Popper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, PropType, computed, StyleValue, toRef } from 'vue'
+import { ref, PropType, computed, toRef } from 'vue'
 import { Placement, type VirtualElement } from '@floating-ui/vue'
 import ElSlot from './ElSlot.vue'
 import { PopperTrigger, usePopper } from './core'
@@ -57,9 +57,15 @@ defineExpose({
       <slot />
     </ElSlot>
   </template>
-  <div ref="floating" v-if="open" :style="floatingStyles">
-    <slot name="content" />
-    <!-- arrow -->
-    <div v-if="arrow" ref="floatingArrow" class="h-2 w-2 bg-red-500" :style="arrowStyle"></div>
-  </div>
+  <Transition
+    leave-active-class="transition duration-100 ease-in "
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div ref="floating" v-if="open" class="z-[99]" :style="floatingStyles">
+      <slot name="content" />
+      <!-- arrow -->
+      <div v-if="arrow" ref="floatingArrow" class="h-2 w-2 bg-red-500" :style="arrowStyle"></div>
+    </div>
+  </Transition>
 </template>
diff --git a/packages/vue/src/Base/Popper/core.ts b/packages/vue/src/Base/Popper/core.ts
@@ -11,7 +11,17 @@ import {
   type Ref,
   StyleValue,
 } from 'vue'
-import { useFloating, offset, flip, shift, type VirtualElement, arrow, autoUpdate, Placement } from '@floating-ui/vue'
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  size,
+  type VirtualElement,
+  arrow,
+  autoUpdate,
+  Placement,
+} from '@floating-ui/vue'
 import { uid } from 'kotl'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useHoverListener, useFocusListener, useClickListener } from '../../use/useTargetEvent'
@@ -96,7 +106,19 @@ export function usePopper({
 
   const floatingReturn = useFloating(reference, floating, {
     placement,
-    middleware: [offset(8), flip(), shift(), arrow({ element: floatingArrow })],
+    middleware: [
+      offset(8),
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+          })
+        },
+      }),
+      flip(),
+      shift(),
+      arrow({ element: floatingArrow }),
+    ],
     whileElementsMounted: autoUpdate,
   })
 

diff --git a/packages/vue/src/Select/index.vue b/packages/vue/src/Select/index.vue
@@ -54,8 +54,14 @@ const focused = ref(false)
       </template>
     </Input>
     <template #content>
-      <div class="flex max-h-80 flex-col overflow-auto py-1 text-sm ring-1 ring-black ring-opacity-5">
-        <div v-for="item in options" :key="item.value" @click="selectHandler(item)">
+      <div class="flex max-h-80 flex-col overflow-auto py-1 text-sm">
+        <div
+          v-for="item in options"
+          :key="item.value"
+          @click="selectHandler(item)"
+          class="hover:bg-primary-500 relative cursor-default select-none px-3 py-2 hover:text-white"
+          :class="[item.value === val ? 'bg-primary-100' : '']"
+        >
           {{ item.label }}
         </div>
       </div>