Skip to content

fix: fix popover eslint errors #339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 2 commits into from
Mar 26, 2022
Merged

fix: fix popover eslint errors #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2671c7
fix: fix eslint erros
libondev Mar 26, 2022
7d254ad
Merge branch 'DevCloudFE:dev' into dev
libondev Mar 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/devui-vue/devui/popover/src/popover-icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// SVG paths are too long to be displayed in the code.
/* eslint-disable max-len */
export function SuccessIcon(): JSX.Element {
return (
<svg class='devui-icon devui-icon-success' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'>
Expand Down
7 changes: 5 additions & 2 deletions packages/devui-vue/devui/popover/src/use-popover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function usePopover(
props: PopoverProps,
visible: Ref<boolean>,
placement: Ref<string>,
origin: Ref<HTMLElement>,
origin: Ref<HTMLElement | undefined>,
popoverRef: Ref
): { overlayStyles: ComputedRef<Record<string, number | string>> } {
const { trigger, isOpen } = toRefs(props);
Expand All @@ -24,7 +24,10 @@ export function usePopover(
}));

const onDocumentClick: (e: Event) => void = (e: Event) => {
if (!origin.value.contains(<HTMLElement>e.target) && !popoverRef.value.$el?.contains(e.target)) {
if (
!origin.value?.contains(<HTMLElement>e.target) &&
!popoverRef.value.$el?.contains(e.target)
) {
visible.value = false;
}
};
Expand Down
44 changes: 21 additions & 23 deletions packages/devui-vue/docs/en-US/components/popover/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
# Popover
# Popover
Simple text prompt box.

### When To Use
Used to notify users of non-critical problems or to indicate that a control is in a special situation.

### Basic Usage
When Popover pops up, it is positioned based on the contents of the reference slot.
:::demo
```vue
<template>
<div class="popover-demo-item" >
<d-popover controlled>
<d-popover content="default!" controlled>
<template #reference>
<d-button variant="common">default</d-button>
</template>
</d-popover>
<d-popover content="info!" popType="info" position="top" trigger="hover" controlled>
<d-popover content="info!" popType="info" :position="['top']" controlled>
<template #reference>
<d-button variant="primary">info</d-button>
</template>
</d-popover>
<d-popover content="error!" popType="error" controlled position="left" :zIndex="9999">
<d-popover content="error!" popType="error" controlled :position="['left']" :zIndex="9999">
<template #reference>
<d-button variant="danger">error</d-button>
</template>
</d-popover>
<d-popover content="success!" popType="success" controlled position="right">
<d-popover content="success!" popType="success" controlled :position="['right']">
<template #reference>
<d-button variant="success">success</d-button>
</template>
Expand All @@ -50,7 +49,7 @@ When Popover pops up, it is positioned based on the contents of the reference sl
```
:::

### Custom Tips
### Custom Tips
The HTMLElement or TemplateRef type can be transferred.

:::demo
Expand Down Expand Up @@ -88,15 +87,15 @@ A total of 12 pop-up positions are supported.
```vue
<template>
<div class="item">
<d-popover position="left" controlled>
<d-popover :position="['left']" controlled>
<template #content>
<div>left</div>
</template>
<template #reference>
<d-button variant="common">left</d-button>
</template>
</d-popover>
<d-popover position="left-top" controlled>
<d-popover :position="['left-top']" controlled>
<template #content>
<div >left-top</div>
<div>left-top</div>
Expand All @@ -105,7 +104,7 @@ A total of 12 pop-up positions are supported.
<d-button variant="common">left-top</d-button>
</template>
</d-popover>
<d-popover position="left-bottom" controlled >
<d-popover :position="['left-bottom']" controlled >
<template #content>
<div>left-bottom</div>
<div>left-bottom</div>
Expand All @@ -117,23 +116,23 @@ A total of 12 pop-up positions are supported.
</div>

<div style="margin-top:10px;" class="item">
<d-popover position="top" controlled>
<d-popover :position="['top']" controlled>
<template #content>
<span >top</span>
</template>
<template #reference>
<d-button variant="common">top</d-button>
</template>
</d-popover>
<d-popover position="top-left" controlled>
<d-popover :position="['top-left']" controlled>
<template #content>
<span >top-left</span>
</template>
<template #reference>
<d-button variant="common">top-left</d-button>
</template>
</d-popover>
<d-popover position="top-right" controlled>
<d-popover :position="['top-right']" controlled>
<template #content>
<span >top-right</span>
</template>
Expand All @@ -144,15 +143,15 @@ A total of 12 pop-up positions are supported.
</div>

<div style="margin-top:10px;" class="item">
<d-popover position="right" controlled>
<d-popover :position="['right']" controlled>
<template #content>
<div >right</div>
</template>
<template #reference>
<d-button variant="common">right</d-button>
</template>
</d-popover>
<d-popover position="right-top" controlled>
<d-popover :position="['right-top']" controlled>
<template #content>
<div >right-top</div>
<div >right-top</div>
Expand All @@ -161,7 +160,7 @@ A total of 12 pop-up positions are supported.
<d-button variant="common">right-top</d-button>
</template>
</d-popover>
<d-popover position="right-bottom" controlled>
<d-popover :position="['right-bottom']" controlled>
<template #content>
<div >right-bottom</div>
<div >right-bottom</div>
Expand All @@ -173,23 +172,23 @@ A total of 12 pop-up positions are supported.
</div>

<div style="margin-top:10px;" class="item">
<d-popover position="bottom" controlled>
<d-popover :position="['bottom']" controlled>
<template #content>
<div >bottom</div>
</template>
<template #reference>
<d-button variant="common">bottom</d-button>
</template>
</d-popover>
<d-popover position="bottom-left" controlled>
<d-popover :position="['bottom-left']" controlled>
<template #content>
<div >bottom-left</div>
</template>
<template #reference>
<d-button variant="common">bottom-left</d-button>
</template>
</d-popover>
<d-popover position="bottom-right" controlled>
<d-popover :position="['bottom-right']" controlled>
<template #content>
<div >bottom-right</div>
</template>
Expand All @@ -214,7 +213,7 @@ Displaying the pop-up dialog box through the visible interface to verify the for
:::demo
```vue
<template>
<d-popover position="top" :visible="visible">
<d-popover :position="['top']" :visible="visible">
<template #content>
<div > Manual Control Display </div>
</template>
Expand Down Expand Up @@ -250,7 +249,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
```vue
<template>
<div class="item">
<d-popover position="bottom-right" trigger="hover" controlled :mouseEnterDelay ="500">
<d-popover :position="['bottom-right']" trigger="hover" controlled :mouseEnterDelay ="500">
<template #content>
<div > Mouse enter 500ms later. </div>
show Me
Expand All @@ -259,7 +258,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
<d-button variant="primary">MouseEnter delay 500ms</d-button>
</template>
</d-popover>
<d-popover position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
<d-popover :position="['bottom-right']" trigger="hover" controlled :mouseLeaveDelay="2000">
<template #content>
<div> Mouse leave 2000ms later. </div>
</template>
Expand Down Expand Up @@ -304,4 +303,3 @@ Only when the trigger type is hover. This event is triggered only when the mouse
| --------- | --------------------------------------------------------- |
| content | Custom content |
| reference | Triggers the contents of the element displayed by Popover |