Merge branch 'dev'

src/App.vue

@@ -1,19 +1,32 @@
 <template>
   <header>
-    <Tooltip
-      ref="tooltipRef"
-      placement="right"
-      :popper-options="popperOptions"
-      :trigger="trigger"
-      :open-delay="1000"
+    <div style="margin-bottom: 20px">
+      <Tooltip
+        ref="tooltipRef"
+        placement="right"
+        :popper-options="popperOptions"
+        :trigger="trigger"
+        :open-delay="200"
+        :close-delay="200"
+      >
+        <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+        <template #content>
+          <div>Hello Tooltip</div>
+        </template>
+      </Tooltip>
+    </div>
+  </header>
+  <div style="margin-bottom: 20px">
+    <Dropdown
+      ref="dropdownRef"
+      :menu-options="menuOptions"
+      trigger="click"
+      :open-delay="200"
       :close-delay="1000"
     >
       <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-      <template #content>
-        <div>Hello Tooltip</div>
-      </template>
-    </Tooltip>
-  </header>
+    </Dropdown>
+  </div>
   <div style="margin-bottom: 20px">
     <Button type="primary" @click="open">打开Tooltip</Button>
     <Button @click="close">关闭Tooltip</Button>
@@ -81,6 +94,8 @@ import type { ButtonInstance } from './components/Button/types'
 import Tooltip from '@/components/Tooltip/Tooltip.vue'
 import type { TooltipInstance } from './components/Tooltip/types'
 import type { Options as PopperOptions } from '@popperjs/core'
+import Dropdown from '@/components/Dropdown/Dropdown.vue'
+import type { MenuOption } from '@/components/Dropdown/types'
 
 const buttonRef = ref<ButtonInstance | null>(null)
 const tooltipRef = ref<TooltipInstance | null>(null)
@@ -103,6 +118,13 @@ const close = () => {
   tooltipRef.value?.hide()
 }
 
+const menuOptions: MenuOption[] = [
+  { key: 1, label: 'item1' },
+  { key: 2, label: 'item2', disabled: true },
+  { key: 3, label: 'item3', divided: true },
+  { key: 4, label: 'item4' }
+]
+
 onMounted(() => {
   if (buttonRef.value) {
     console.log('🚀 ~ onMounted ~ buttonRef.value:', buttonRef.value)
@@ -122,7 +144,6 @@ header {
 
 .logo {
   display: block;
-  margin: 0 auto 2rem;
 }
 
 @media (min-width: 1024px) {
@@ -132,10 +153,6 @@ header {
     padding-right: calc(var(--section-gap) / 2);
   }
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
   header .wrapper {
     display: flex;
     place-items: flex-start;

src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="s-dropdown">
+    <Tooltip
+      :trigger="trigger"
+      :placement="placement"
+      :popper-options="popperOptions"
+      :open-delay="openDelay"
+      :close-delay="closeDelay"
+      @visible-change="visibleChange"
+      ref="tooltipRef"
+    >
+      <slot></slot>
+      <template #content>
+        <ul class="s-dropdown__menu">
+          <template v-for="item in menuOptions" :key="item.key">
+            <li v-if="item.divided" role="separator" class="divided-placeholder"></li>
+            <li
+              class="s-dropdown__item"
+              :class="{ 'is-disabled': item.disabled, 'is-divided': item.divided }"
+              :id="`dropdown-item-${item.key}`"
+              @click="($event) => itemClick(item)"
+            >
+              {{ item.label }}
+            </li>
+          </template>
+        </ul>
+      </template>
+    </Tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DropdownProps, DropdownInstance, DropdownEmits, MenuOption } from './types'
+import Tooltip from '../Tooltip/Tooltip.vue'
+import type { TooltipInstance } from '../Tooltip/types'
+import { ref, type Ref } from 'vue'
+
+const porps = defineProps<DropdownProps>()
+const emits = defineEmits<DropdownEmits>()
+
+const tooltipRef = ref() as Ref<TooltipInstance|undefined>
+
+const visibleChange = (e: boolean) => {
+  emits('visible-change', e)
+}
+
+const itemClick = (e: MenuOption) => {
+  if (e.disabled) return
+  emits('select', e)
+}
+
+defineExpose<DropdownInstance>({
+  show: tooltipRef.value?.show!,
+  hide: tooltipRef.value?.hide!
+})
+</script>
+
+<style scoped></style>

src/components/Dropdown/style.css

@@ -0,0 +1,43 @@
+.vk-dropdown .vk-dropdown__menu {
+  --vk-dropdown-menuItem-hover-fill: var(--vk-color-primary-light-9);
+  --vk-dropdown-menuItem-hover-color: var(--vk-color-primary);
+  --vk-dropdown-menuItem-disabled-color: var(--vk-border-color-lighter);
+  --vk-dropdown-menuItem-divided-color: var(--vk-border-color-lighter);
+}
+.vk-dropdown {
+  display: inline-block;
+  .vk-tooltip {
+    --vk-popover-padding: 5px 0;
+  }
+}
+.vk-dropdown__menu {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  .vk-dropdown__item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    font-size: var(--vk-font-size-base);
+    color: var(--vk-text-color-regular);
+    cursor: pointer;
+    outline: none;
+    &:hover {
+      background-color: var(--vk-dropdown-menuItem-hover-fill);
+      color: var(--vk-dropdown-menuItem-hover-color);
+    }
+    &.is-disabled {
+      color: var(--vk-dropdown-menuItem-disabled-color);
+      cursor: not-allowed;
+      background-image: none;
+    }
+  }
+  .divided-placeholder {
+    margin: 6px 0;
+    border-top: 1px solid var(--vk-dropdown-menuItem-divided-color);
+  }
+}

src/components/Dropdown/types.ts

@@ -0,0 +1,25 @@
+import type { VNode } from 'vue'
+import type { TooltipProps } from '../Tooltip/types'
+
+export interface DropdownProps extends TooltipProps {
+  menuOptions: MenuOption[];
+  hideAfterClick?: boolean;
+}
+export interface MenuOption {
+  label: string | VNode;
+  key: string | number;
+  disabled?: boolean;
+  divided?: boolean;
+}
+
+export interface DropdownEmits {
+  (e:'visible-change', value: boolean) : void;
+  (e:'select', value: MenuOption) : void;
+}
+
+export interface DropdownInstance {
+  show: () => void;
+  hide: () => void;
+}
+
+

src/components/Tooltip/Tooltip.vue

@@ -4,7 +4,7 @@
       <slot />
     </div>
     <Transition :name="transition">
-      <div v-if="isOpen" class="s-tooltip__popper" ref="popperNode">
+      <div v-if="isOpen" class="s-tooltip__popper" ref="popperNode" v-on="popperEvents">
         <slot name="content">{{ content }}</slot>
         <div id="arrow" data-popper-arrow></div>
       </div>
@@ -35,6 +35,7 @@ let popperInstance: PopperInstance | null = null
 
 let events: Record<string, any> = reactive({})
 let outerEvents: Record<string, any> = reactive({})
+let popperEvents: Record<string, any> = reactive({})
 
 let openTimes = 0
 let closeTimes = 0
@@ -83,9 +84,9 @@ const closeFinal = () => {
 
 const togglePopper = () => {
   if (isOpen.value) {
-    openFinal()
-  } else {
     closeFinal()
+  } else {
+    openFinal()
   }
 }
 
@@ -99,6 +100,7 @@ useClickOutside(popperContainerNode, () => {
 const attachEvents = () => {
   if (props.trigger === 'hover') {
     events['mouseenter'] = openFinal
+    popperEvents['mouseenter'] = openFinal
     outerEvents['mouseleave'] = closeFinal
   } else if (props.trigger === 'click') {
     events['click'] = togglePopper
@@ -115,6 +117,7 @@ watch(
     if (isManual) {
       events = {}
       outerEvents = {}
+      popperEvents = {}
     } else {
       attachEvents()
     }
@@ -127,6 +130,7 @@ watch(
     if (newTrigger !== oldTrigger) {
       events = {}
       outerEvents = {}
+      popperEvents = {}
       attachEvents()
     }
   }