refactor: popover

packages/devui-vue/devui/popover/src/popover-icon.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { PopType } from './popover-types';
 import { SuccessIcon, WarningIcon, InfoIcon, ErrorIcon } from './popover-icons';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import './popover-icon.scss';
 
 export default defineComponent({

packages/devui-vue/devui/popover/src/popover-icons.tsx

@@ -1,4 +1,4 @@
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 
 const ns = useNamespace('popover');
 

packages/devui-vue/devui/popover/src/popover-types.ts

@@ -25,7 +25,7 @@ export const popoverProps = {
   },
   position: {
     type: Array as PropType<Array<Placement>>,
-    default: ['bottom'],
+    default: ['top', 'right', 'bottom', 'left'],
   },
   align: {
     type: String as PropType<Alignment> | null,

packages/devui-vue/devui/popover/src/popover.scss

@@ -4,7 +4,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  white-space: nowrap;
+  white-space: pre-wrap;
   padding: 4px 12px;
   line-height: 1.5;
   border-radius: $devui-border-radius-feedback;

packages/devui-vue/devui/popover/src/popover.tsx

@@ -5,15 +5,15 @@ import { popoverProps, PopoverProps } from './popover-types';
 import { POPPER_TRIGGER_TOKEN } from '../../shared/components/popper-trigger/src/popper-trigger-types';
 import { usePopover, usePopoverEvent } from './use-popover';
 import PopoverIcon from './popover-icon';
-import { useNamespace } from '../../shared/hooks/use-namespace';
+import { useNamespace } from '@devui/shared/utils';
 import './popover.scss';
 
 export default defineComponent({
   name: 'DPopover',
   inheritAttrs: false,
   props: popoverProps,
   emits: ['show', 'hide'],
-  setup(props: PopoverProps, { slots, attrs, emit }) {
+  setup(props: PopoverProps, { slots, attrs, emit, expose }) {
     const { content, popType, position, align, offset, showAnimation } = toRefs(props);
     const origin = ref<HTMLElement>();
     const popoverRef = ref<HTMLElement>();
@@ -22,6 +22,9 @@ export default defineComponent({
     const { overlayStyles } = usePopover(props, visible, placement, origin, popoverRef);
     const ns = useNamespace('popover');
     provide(POPPER_TRIGGER_TOKEN, origin);
+    expose({
+      triggerEl: origin,
+    });
     watch(visible, (newVal) => {
       if (newVal) {
         emit('show');
@@ -46,6 +49,7 @@ export default defineComponent({
               show-arrow
               is-arrow-center={false}
               style={overlayStyles.value}
+              place-strategy="no-space"
               {...attrs}
               onPositionChange={handlePositionChange}
               onMouseenter={onMouseenter}

packages/devui-vue/devui/popover/src/use-popover.ts

@@ -50,6 +50,7 @@ export function usePopover(
 export function usePopoverEvent(props: PopoverProps, visible: Ref<boolean>, origin: Ref): UsePopoverEvent {
   const { trigger, position, mouseEnterDelay, mouseLeaveDelay, disabled } = toRefs(props);
   const isClick: ComputedRef<boolean> = computed(() => trigger.value === 'click');
+  const isHover: ComputedRef<boolean> = computed(() => trigger.value === 'hover');
   const placement: Ref<string> = ref(position.value[0].split('-')[0]);
   const isEnter: Ref<boolean> = ref(false);
 
@@ -69,13 +70,13 @@ export function usePopoverEvent(props: PopoverProps, visible: Ref<boolean>, orig
     if (disabled.value) {
       return;
     }
-    if (!isClick.value) {
+    if (!isHover.value) {
       isEnter.value = true;
       enter();
     }
   };
   const onMouseleave = () => {
-    if (!isClick.value) {
+    if (!isHover.value) {
       isEnter.value = false;
       leave();
     }
@@ -94,10 +95,10 @@ export function usePopoverEvent(props: PopoverProps, visible: Ref<boolean>, orig
   };
   onMounted(() => {
     if (trigger.value === 'click') {
-      origin.value.addEventListener('click', onClick);
+      origin.value?.addEventListener('click', onClick);
     } else if (trigger.value === 'hover') {
-      origin.value.addEventListener('mouseenter', onMouseenter);
-      origin.value.addEventListener('mouseleave', onMouseleave);
+      origin.value?.addEventListener('mouseenter', onMouseenter);
+      origin.value?.addEventListener('mouseleave', onMouseleave);
     }
   });