Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 04b263c

Browse files
codebender828codebender828
committed
feat: add popover examples and fix transition bugs
1 parent 75b169b commit 04b263c

File tree

6 files changed

+188
-1
lines changed

6 files changed

+188
-1
lines changed

‎packages/c-popover/examples/internal-state.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<script setup lang="ts">
2+
import { Teleport } from "vue"
3+
import {
4+
CPopover,
5+
CPopoverTrigger,
6+
CPopoverContent,
7+
CPopoverArrow,
8+
CPopoverHeader,
9+
CPopoverBody,
10+
CPopoverFooter,
11+
CPopoverCloseButton,
12+
} from "../src"
13+
import { CButton } from "../../c-button/src"
14+
</script>
15+
16+
<template>
17+
<c-popover
18+
:positioning="{
19+
placement: 'bottom-start',
20+
}"
21+
#default="{ isOpen }"
22+
>
23+
<c-popover-trigger>
24+
<c-button> Click to {{ isOpen ? "close" : "open" }} </c-button>
25+
</c-popover-trigger>
26+
<Teleport to="body">
27+
<c-popover-content>
28+
<c-popover-arrow />
29+
<c-popover-header>Look! I'm portalled</c-popover-header>
30+
<c-popover-body>
31+
Inspect me in the DOM and you'll see that I'm portalled to the end of
32+
the body
33+
</c-popover-body>
34+
<c-popover-footer>
35+
<c-button size="sm">Okay</c-button>
36+
</c-popover-footer>
37+
<c-popover-close-button />
38+
</c-popover-content>
39+
</Teleport>
40+
</c-popover>
41+
</template>

‎packages/c-popover/examples/with-controlled-usage.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
import {
3+
CPopover,
4+
CPopoverTrigger,
5+
CPopoverContent,
6+
CPopoverArrow,
7+
CPopoverHeader,
8+
CPopoverBody,
9+
CPopoverFooter,
10+
CPopoverCloseButton,
11+
} from "../src"
12+
import { CButton, CButtonGroup } from "../../c-button/src"
13+
import { useDisclosure } from "../../vue-composables/src/use-disclosure"
14+
import { CHStack } from "../../layout/src/stack"
15+
16+
const { isOpen, open } = useDisclosure({
17+
defaultIsOpen: false,
18+
})
19+
</script>
20+
21+
<template>
22+
<c-h-stack>
23+
<c-button @click="open"> Trigger </c-button>
24+
<c-popover
25+
:positioning="{
26+
placement: 'right-start',
27+
}"
28+
:is-open="isOpen"
29+
@close="isOpen = false"
30+
>
31+
<c-popover-trigger>
32+
<c-button color-scheme="pink"> Popover Target </c-button>
33+
</c-popover-trigger>
34+
<c-popover-content>
35+
<c-popover-arrow />
36+
<c-popover-header font-weight="bold">Confirmation</c-popover-header>
37+
<c-popover-body>
38+
Are you sure you want to continue with your action?
39+
</c-popover-body>
40+
<c-popover-footer>
41+
<c-button-group size="sm" display="flex" justify-content="flex-end">
42+
<c-button variant="outline">Cancel</c-button>
43+
<c-button color-scheme="red"> Apply </c-button>
44+
</c-button-group>
45+
</c-popover-footer>
46+
<c-popover-close-button />
47+
</c-popover-content>
48+
</c-popover>
49+
</c-h-stack>
50+
</template>

‎packages/c-popover/examples/with-focus-trap.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts">
2+
import { Teleport } from "vue"
3+
import {
4+
CPopover,
5+
CPopoverTrigger,
6+
CPopoverContent,
7+
CPopoverArrow,
8+
CPopoverHeader,
9+
CPopoverBody,
10+
CPopoverFooter,
11+
CPopoverCloseButton,
12+
} from "../src"
13+
import { CButton } from "../../c-button/src"
14+
</script>
15+
16+
<template>
17+
<c-popover
18+
:positioning="{
19+
placement: 'bottom-start',
20+
}"
21+
modal
22+
>
23+
<c-popover-trigger>
24+
<c-button> Trigger </c-button>
25+
</c-popover-trigger>
26+
<Teleport to="body">
27+
<c-popover-content>
28+
<c-popover-arrow />
29+
<c-popover-header>Focus Trapped!</c-popover-header>
30+
<c-popover-body>
31+
lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
32+
</c-popover-body>
33+
<c-popover-footer>
34+
<c-button size="sm">Okay</c-button>
35+
</c-popover-footer>
36+
<c-popover-close-button />
37+
</c-popover-content>
38+
</Teleport>
39+
</c-popover>
40+
</template>

‎packages/c-popover/examples/with-initial-focus.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup lang="ts">
2+
import { Teleport, ref } from "vue"
3+
import {
4+
CPopover,
5+
CPopoverTrigger,
6+
CPopoverContent,
7+
CPopoverArrow,
8+
CPopoverHeader,
9+
CPopoverBody,
10+
CPopoverFooter,
11+
CPopoverCloseButton,
12+
} from "../src"
13+
import { CButton, CButtonGroup } from "../../c-button/src"
14+
import { CBox, useRef } from "../../vue/src"
15+
16+
const [initialFocusRef, initialFocusRefEl] = useRef()
17+
</script>
18+
19+
<template>
20+
<c-popover
21+
:positioning="{
22+
placement: 'bottom-start',
23+
}"
24+
:initial-focus-el="() => initialFocusRefEl"
25+
>
26+
<c-popover-trigger>
27+
<c-button> Trigger </c-button>
28+
</c-popover-trigger>
29+
<c-popover-content color="white" bg="blue.800" border-color="blue.800">
30+
<c-popover-arrow bg="blue.800" />
31+
<c-popover-header pt="4" font-weight="bold" border="0"
32+
>Manage Your Channels</c-popover-header
33+
>
34+
<c-popover-body>
35+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
36+
tempor incididunt ut labore et dolore.
37+
</c-popover-body>
38+
<c-popover-footer
39+
border="0"
40+
display="flex"
41+
align-items="center"
42+
justify-content="space-between"
43+
pb="4"
44+
>
45+
<c-box fontSize="sm">Step 2 of 4</c-box>
46+
<c-button-group size="sm">
47+
<c-button colorScheme="green">Setup Email</c-button>
48+
<c-button colorScheme="blue" :ref="initialFocusRef"> Next </c-button>
49+
</c-button-group>
50+
</c-popover-footer>
51+
<c-popover-close-button />
52+
</c-popover-content>
53+
</c-popover>
54+
</template>

‎packages/c-popover/src/c-popover-arrow.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
55
export interface CPopoverArrow extends HTMLChakraProps<"div"> {}
66
export const CPopoverArrow = defineComponent({
77
name: "CPopoverArrow",
8+
inheritAttrs: false,
89
setup(_, { slots, attrs }) {
910
const api = usePopoverContext()
1011

@@ -42,6 +43,7 @@ export const CPopoverArrow = defineComponent({
4243
}}
4344
__label="popover__arrow"
4445
{...api.value.arrowTipProps}
46+
{...attrs}
4547
/>
4648
{slots.default?.()}
4749
</chakra.div>

‎packages/c-popover/src/c-popover.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,6 @@ export const CPopover = defineComponent({
125125

126126
PopoverProvider(popoverApi)
127127
PopoverStylesProvider(styles)
128-
return () => slots.default?.()
128+
return () => slots.default?.(api.value)
129129
},
130130
})

0 commit comments

Comments
 (0)