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

Commit 534f8b6

Browse files
codebender828codebender828
committed
feat: tooltip arrow
1 parent 548f1ec commit 534f8b6

File tree

7 files changed

+146
-14
lines changed

7 files changed

+146
-14
lines changed

‎packages/c-tooltip/examples/with-arrow.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import {
3+
CTooltip,
4+
CTooltipTrigger,
5+
CTooltipContent,
6+
CTooltipArrow,
7+
} from "../src"
8+
import { chakra, CHStack, createIcon } from "../../vue/src"
9+
10+
const ChakraIcon = createIcon({
11+
name: "ChakraUIIcon",
12+
viewBox: "0 0 24 24",
13+
path: `
14+
<path fill="currentColor" d="M12 0C5.352 0 0 5.352 0 12s5.352 12 12 12s12-5.352 12-12S18.648 0 12 0zm2.8 4.333c.13-.004.248.136.171.278l-3.044 5.58a.187.187 0 0 0 .164.276h5.26c.17 0 .252.207.128.323l-9.22 8.605c-.165.154-.41-.063-.278-.246l4.364-6.021a.187.187 0 0 0-.151-.296H6.627a.187.187 0 0 1-.131-.32l8.18-8.123a.182.182 0 0 1 .125-.056z"/>
15+
`,
16+
})
17+
</script>
18+
19+
<template>
20+
<c-h-stack spacing="8">
21+
<c-tooltip :positioning="{ placement: 'bottom-start' }">
22+
<c-tooltip-trigger>
23+
<chakra-icon box-size="8" />
24+
</c-tooltip-trigger>
25+
<c-tooltip-content>
26+
<c-tooltip-arrow />
27+
<chakra.span> Chakra UI Vue </chakra.span>
28+
</c-tooltip-content>
29+
</c-tooltip>
30+
</c-h-stack>
31+
</template>

‎packages/c-tooltip/examples/with-icon.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup lang="ts">
2+
import { CTooltip, CTooltipTrigger, CTooltipContent } from "../src"
3+
import { CHStack, createIcon } from "../../vue/src"
4+
5+
const VueIcon = createIcon({
6+
name: "VueIcon",
7+
viewBox: "0 0 24 24",
8+
path: `
9+
<path fill="currentColor" d="M2 3h3.5L12 15l6.5-12H22L12 21L2 3m4.5 0h3L12 7.58L14.5 3h3L12 13.08L6.5 3Z"/>
10+
`,
11+
})
12+
13+
const NuxtIcon = createIcon({
14+
name: "NuxtIcon",
15+
viewBox: "0 0 24 24",
16+
path: `
17+
<path fill="currentColor" d="M13.464 19.83h8.922c.283 0 .562-.073.807-.21a1.59 1.59 0 0 0 .591-.574a1.53 1.53 0 0 0 .216-.783a1.529 1.529 0 0 0-.217-.782L17.792 7.414a1.59 1.59 0 0 0-.591-.573a1.652 1.652 0 0 0-.807-.21c-.283 0-.562.073-.807.21a1.59 1.59 0 0 0-.59.573L13.463 9.99L10.47 4.953a1.591 1.591 0 0 0-.591-.573a1.653 1.653 0 0 0-.807-.21c-.284 0-.562.073-.807.21a1.591 1.591 0 0 0-.591.573L.216 17.481a1.53 1.53 0 0 0-.217.782c0 .275.074.545.216.783a1.59 1.59 0 0 0 .59.574c.246.137.525.21.808.21h5.6c2.22 0 3.856-.946 4.982-2.79l2.733-4.593l1.464-2.457l4.395 7.382h-5.859Zm-6.341-2.46l-3.908-.002l5.858-9.842l2.923 4.921l-1.957 3.29c-.748 1.196-1.597 1.632-2.916 1.632z"/>
18+
`,
19+
})
20+
21+
const ChakraIcon = createIcon({
22+
name: "ChakraUIIcon",
23+
viewBox: "0 0 24 24",
24+
path: `
25+
<path fill="currentColor" d="M12 0C5.352 0 0 5.352 0 12s5.352 12 12 12s12-5.352 12-12S18.648 0 12 0zm2.8 4.333c.13-.004.248.136.171.278l-3.044 5.58a.187.187 0 0 0 .164.276h5.26c.17 0 .252.207.128.323l-9.22 8.605c-.165.154-.41-.063-.278-.246l4.364-6.021a.187.187 0 0 0-.151-.296H6.627a.187.187 0 0 1-.131-.32l8.18-8.123a.182.182 0 0 1 .125-.056z"/>
26+
`,
27+
})
28+
</script>
29+
30+
<template>
31+
<c-h-stack spacing="8">
32+
<c-tooltip>
33+
<c-tooltip-trigger>
34+
<chakra-icon box-size="8" />
35+
</c-tooltip-trigger>
36+
<c-tooltip-content> Chakra UI </c-tooltip-content>
37+
</c-tooltip>
38+
<c-tooltip>
39+
<c-tooltip-trigger>
40+
<vue-icon box-size="8" />
41+
</c-tooltip-trigger>
42+
<c-tooltip-content> Vue </c-tooltip-content>
43+
</c-tooltip>
44+
<c-tooltip>
45+
<c-tooltip-trigger>
46+
<nuxt-icon box-size="8" />
47+
</c-tooltip-trigger>
48+
<c-tooltip-content> Nuxt </c-tooltip-content>
49+
</c-tooltip>
50+
</c-h-stack>
51+
</template>

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

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,47 @@
11
import { computed, defineComponent } from "vue"
2-
import { useTooltipContext } from "./tooltip.context"
2+
import { useStyles, useTooltipContext } from "./tooltip.context"
33
import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
44

55
export type CTooltipArrowProps = HTMLChakraProps<"div">
66
export const CTooltipArrow = defineComponent({
77
name: "CTooltipArrow",
88
setup(_, { slots, attrs }) {
99
const api = useTooltipContext()
10+
11+
const styles = useStyles()
12+
13+
const arrowBg = computed(
14+
() => attrs.bg ?? attrs.bgColor ?? attrs.backgroundColor
15+
)
16+
const arrowShadow = computed(() => attrs.shadow ?? attrs.boxShadow)
17+
1018
return () => (
11-
<chakra.div {...api.value.arrowProps}>
12-
<chakra.div {...api.value.arrowTipProps} {...attrs} />
19+
<chakra.div
20+
__label="tooltip__arrow-positioner"
21+
__css={{
22+
"--arrow-size": "10px",
23+
"--tooltip-arrow-default-shadow":
24+
"-1px -1px 1px 0 var(--tooltip-arrow-shadow-color)",
25+
"--arrow-shadow-color": `${
26+
arrowShadow.value
27+
? `shadows.${arrowShadow.value} ${arrowShadow.value}`
28+
: ""
29+
} var(--tooltip-arrow-shadow, var(--tooltip-arrow-default-shadow))`,
30+
}}
31+
{...api.value.arrowProps}
32+
>
33+
<chakra.div
34+
__css={{
35+
"--arrow-size": "10px",
36+
"--arrow-background": arrowBg.value
37+
? `colors.${arrowBg.value}, var(--tooltip-arrow-bg), ${arrowBg.value}`
38+
: "var(--tooltip-bg)",
39+
boxShadow:
40+
"var(--tooltip-arrow-shadow, var(--tooltip-arrow-default-shadow))",
41+
}}
42+
{...api.value.arrowTipProps}
43+
{...attrs}
44+
/>
1345
</chakra.div>
1446
)
1547
},

‎packages/c-tooltip/src/c-tooltip-content.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
mergeProps,
77
withDirectives,
88
} from "vue"
9-
import { useTooltipContext } from "./tooltip.context"
9+
import { TooltipStylesProvider, useTooltipContext } from "./tooltip.context"
1010
import {
1111
HTMLChakraProps,
1212
ThemingProps,
@@ -49,6 +49,8 @@ export const CTooltipContent = defineComponent({
4949
).varRef,
5050
}))
5151

52+
TooltipStylesProvider(styles)
53+
5254
/** Handles exit transition */
5355
const leaveTransition = (el: Element, done: VoidFunction) => {
5456
const motions = useMotions()
@@ -71,10 +73,10 @@ export const CTooltipContent = defineComponent({
7173

7274
return () => (
7375
<Teleport to="body">
74-
<CTooltipPositioner>
75-
<Transition onEnter={enterTransition} onLeave={leaveTransition}>
76-
{api.value.isOpen &&
77-
withDirectives(
76+
<Transition onEnter={enterTransition} onLeave={leaveTransition}>
77+
{api.value.isOpen && (
78+
<CTooltipPositioner>
79+
{withDirectives(
7880
<chakra.div
7981
__css={contentStyles.value}
8082
{...api.value.contentProps}
@@ -84,8 +86,9 @@ export const CTooltipContent = defineComponent({
8486
</chakra.div>,
8587
[[MotionDirective(TooltipVariants), api.value.transitionId]]
8688
)}
87-
</Transition>
88-
</CTooltipPositioner>
89+
</CTooltipPositioner>
90+
)}
91+
</Transition>
8992
</Teleport>
9093
)
9194
},

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,20 @@
88
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
99
*/
1010

11-
import { computed, defineComponent, h, Fragment, PropType, watch } from "vue"
11+
import {
12+
computed,
13+
defineComponent,
14+
h,
15+
Fragment,
16+
PropType,
17+
watch,
18+
mergeProps,
19+
} from "vue"
1220
import { TooltipProvider } from "./tooltip.context"
1321
import { useTooltip, UseTooltipProps } from "./use-tooltip"
1422
import type * as PP from "@zag-js/popper"
1523
import { filterUndefined } from "@chakra-ui/utils"
1624
import { useId } from "@chakra-ui/vue-composables"
17-
import { useMotions } from "@vueuse/motion"
1825

1926
type UseTooltipPropsContext = UseTooltipProps["context"]
2027

@@ -60,7 +67,8 @@ export const CTooltip = defineComponent({
6067
name: "Tooltip",
6168
props: VueTooltipProps,
6269
emits: ["open", "close"],
63-
setup(props, { slots, emit }) {
70+
setup(props, { slots, emit, attrs }) {
71+
console.log(filterUndefined(props))
6472
const tooltipProps = computed<UseTooltipProps>(() => ({
6573
context: filterUndefined(props),
6674
emit,

‎packages/c-tooltip/src/tooltip.context.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { connect } from "@zag-js/tooltip"
22
import type { ComputedRef } from "vue"
33
import { AnyFn, createContext } from "@chakra-ui/vue-utils"
4+
import type * as S from "@chakra-ui/styled-system"
45
import type { UseTooltipReturn } from "./use-tooltip"
56

67
export interface CTooltipContext extends ReturnType<typeof connect> {
@@ -14,4 +15,11 @@ export const [TooltipProvider, useTooltipContext] = createContext<
1415
strict: true,
1516
})
1617

18+
export const [TooltipStylesProvider, useStyles] = createContext<
19+
ComputedRef<S.SystemStyleObject>
20+
>({
21+
name: "CTooltipStylesContext",
22+
strict: true,
23+
})
24+
1725
export type TooltipContext = UseTooltipReturn

‎packages/c-tooltip/src/use-tooltip.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export const useTooltip = (props: UseTooltipProps) => {
2424
onClose() {
2525
emit("close")
2626
},
27-
closeDelay: 300,
2827
})
2928
)
3029
return computed(() => connect(state.value, send, normalizeProps))

0 commit comments

Comments
 (0)