Skip to content

feat(Popover): init popover #116

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
FliPPeDround merged 1 commit into from
Feb 12, 2023
Merged

feat(Popover): init popover #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ declare module '@vue/runtime-core' {
'Notification.story': typeof import('./src/components/Feedback/Notification/notification.story.vue')['default']
'PageHeader.story': typeof import('./src/components/Navigation/PageHeader/pageHeader.story.vue')['default']
'Pagination.story': typeof import('./src/components/Data/pagination.story.vue')['default']
'Popover.story': typeof import('./src/components/Feedback/Popover/popover.story.vue')['default']
'Progress.story': typeof import('./src/components/Data/progress.story.vue')['default']
'Radio.story': typeof import('./src/components/Form/radio.story.vue')['default']
'Rate.story': typeof import('./src/components/Form/rate.story.vue')['default']
Expand Down
42 changes: 42 additions & 0 deletions src/components/Feedback/Popover/popover.story.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
## Attributes

| Name | Description | Type | Accepted Values | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | click |
| title | popover title | string | — | — |
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
| content | popover content, can be replaced with a default `slot` | string | — | — |
| width | popover width | string / number | — | Min width 150px |
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | whether Popover is disabled | boolean | — | false |
| visible / v-model:visible | whether popover is visible | Boolean | — | false |
| offset | popover offset | number | — | 0 |
| transition | popover transition animation | string | — | el-fade-in-linear |
| show-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://githubfast.com/element-plus/element-plus/tree/dev/packages/components/popper) | boolean | — | true |
| popper-options | parameters for [popper.js](https://popper.js.org/docs/v2/) | object | please refer to [popper.js](https://popper.js.org/docs/v2/) | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
| popper-class | custom class name for popover | string | — | — |
| popper-style | custom style for popover | string / object | — | — |
| show-after | delay of appearance, in millisecond | number | — | 0 |
| hide-after | delay of disappear, in millisecond | number | — | 200 |
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | — |
| teleported | whether popover dropdown is teleported to the body | boolean | true / false | true |
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | boolean | — | true |

## Slots

| Name | Description |
| --------- | ---------------------------------- |
| — | text content of popover |
| reference | HTML element that triggers popover |

## Events

| Name | Description | Parameters |
| ------------ | -------------------------------------------- | ---------- |
| show | triggers when popover shows | — |
| before-enter | triggers when the entering transition before | — |
| after-enter | triggers when the entering transition ends | — |
| hide | triggers when popover hides | — |
| before-leave | triggers when the leaving transition before | — |
| after-leave | triggers when the leaving transition ends | — |
158 changes: 158 additions & 0 deletions src/components/Feedback/Popover/popover.story.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<script setup lang="ts">
import type { PopoverProps } from 'element-plus'
import placementOptions from '@/constants/placementOptions'
const basicData = reactive({
effect: 'dark',
content: 'content',
placement: 'bottom' as PopoverProps['placement'],
visible: null as PopoverProps['visible'],
disabled: false,
offset: 0,
showAfter: 0,
showArrow: true,
hideAfter: 0,
enterable: true,
trigger: 'hover' as PopoverProps['trigger'],
})

const basicSource = computed(() => {
return `<el-popover${isAttribute(
basicData.effect !== 'dark',
'effect="light"',
)}${isAttribute(
basicData.content !== '',
`content="${basicData.content}"`,
)}${isAttribute(
basicData.placement !== 'bottom',
`placement="${basicData.placement}"`,
)}${isAttribute(
basicData.visible !== null,
`:visible="${basicData.visible}"`,
)}${isAttribute(
basicData.disabled,
'disabled',
)}${isAttribute(
basicData.offset !== 0,
`:offset="${basicData.offset}"`,
)}${isAttribute(
basicData.showAfter !== 0,
`:show-after="${basicData.showAfter}"`,
)}${isAttribute(
!basicData.showArrow,
':show-arrow="false"',
)}${isAttribute(
basicData.hideAfter !== 0,
`:hide-after="${basicData.hideAfter}"`,
)}${isAttribute(
!basicData.enterable,
':enterable="false"',
)}${isAttribute(
basicData.trigger !== 'hover',
`trigger="${basicData.trigger}"`,
)}
>
<template #reference>
<el-button>el-popover</el-button>
</template>
</el-popover>`
})
</script>

<!-- icon from https://icones.js.org/collection/all?s=popover -->
<template>
<Story title="Feedback/Popover" icon="mdi-light:tooltip-text">
<Variant
title="Basic Usage"
:source="basicSource"
>
<el-popover
:effect="basicData.effect"
:content="basicData.content"
:placement="basicData.placement"
:visible="basicData.visible"
:disabled="basicData.disabled"
:offset="basicData.offset"
:show-after="basicData.showAfter"
:show-arrow="basicData.showArrow"
:hide-after="basicData.hideAfter"
:enterable="basicData.enterable"
:trigger="basicData.trigger"
>
<template #reference>
<el-button>
el-popover
</el-button>
</template>
</el-popover>
<template #controls>
<HstButtonGroup
v-model="basicData.effect" title="effetc"
:options="[
{
value: 'light',
label: 'light',
},
{
value: 'dark',
label: 'dark',
},
]"
/>
<HstText
v-model="basicData.content"
title="content"
/>
<HstSelect
v-model="basicData.placement" title="placement"
:options="placementOptions"
/>
<HstCheckbox v-model="basicData.disabled" title="disabled" />
<HstButtonGroup
v-model="basicData.visible"
:style="useElDisplay(!basicData.disabled)"
title="visible"
:options="[
{
value: true,
label: 'true',
},
{
value: false,
label: 'false',
},
{
value: null,
label: 'null',
},
]"
/>
<HstNumber v-model="basicData.offset" title="offset" />
<HstNumber v-model="basicData.showAfter" title="show-after" />
<HstNumber v-model="basicData.hideAfter" title="hide-after" />
<HstCheckbox v-model="basicData.showArrow" title="show-arrow" />
<HstCheckbox v-model="basicData.enterable" title="enterable" />
<HstSelect
v-model="basicData.trigger"
title="trigger"
:options="[
{
value: 'hover',
label: 'hover',
},
{
value: 'focus',
label: 'focus',
},
{
value: 'click',
label: 'click',
},
]"
/>
</template>
</Variant>
</Story>
</template>

<style scoped>
</style>
4 changes: 2 additions & 2 deletions src/components/Feedback/Tooltip/tooltip.story.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const basicSource = computed(() => {

<!-- icon from https://icones.js.org/collection/all?s=tooltip -->
<template>
<Story title="Feedback/Tooltip" icon="mdi-light:tooltip-text">
<Story title="Feedback/Tooltip" icon="mdi:tooltip-minus-outline">
<Variant
title="Basic Usage"
:source="basicSource"
Expand Down Expand Up @@ -107,7 +107,7 @@ const basicSource = computed(() => {
:options="placementOptions"
/>
<HstCheckbox v-model="basicData.disabled" title="disabled" />
<HstSelect
<HstButtonGroup
v-model="basicData.visible"
:style="useElDisplay(!basicData.disabled)"
title="visible"
Expand Down