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

Commit 3f5aace

Browse files
codebender828codebender828
committed
feat: clean up examples for tooltip
1 parent f2c5922 commit 3f5aace

File tree

15 files changed

+443
-205
lines changed

15 files changed

+443
-205
lines changed

‎packages/c-checkbox/src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export { CCheckbox } from "./checkbox"
22
export {
33
CCheckboxGroup,
4-
CheckboxGroupContext,
54
useCheckboxGroupContext,
5+
type CheckboxGroupContext,
66
} from "./checkbox-group"
77

88
export type { CCheckboxControlProps, CCheckboxProps } from "./checkbox"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { defineComponent } from "vue"
2-
import { usePopoverContext } from "./popover.context"
32
import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
43
import { CPopoverTitle } from "./c-popover-title"
54

‎packages/c-tooltip/examples/placements-map.ts

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
import { markRaw } from "vue"
2+
import { createIcon } from "../../vue/src"
3+
import { CTooltipPlacement } from "../src"
4+
5+
export const CircleIcon = createIcon({
6+
name: "CircleIcon",
7+
viewBox: "0 0 24 24",
8+
path: `<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16z"/>`,
9+
})
10+
11+
export const DotIcon = createIcon({
12+
name: "DotIcon",
13+
viewBox: "0 0 24 24",
14+
path: `<path fill="currentColor" d="M12 14a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z"/>`,
15+
})
16+
17+
type CTooltipPlacementPositions = CTooltipPlacement | "null" | "center"
18+
19+
const placementsMatrix: CTooltipPlacementPositions[][] = [
20+
["null", "top-start", "top", "top-end", "null"],
21+
["left-start", "null", "null", "null", "right-start"],
22+
["left", "null", "center", "null", "right"],
23+
["left-end", "null", "null", "null", "right-end"],
24+
["null", "bottom-start", "bottom", "bottom-end", "null"],
25+
]
26+
27+
export const placementsMap: Map<
28+
CTooltipPlacementPositions,
29+
{
30+
icon: ReturnType<typeof createIcon>
31+
label: string
32+
ignored?: boolean
33+
}
34+
> = new Map([
35+
[
36+
"center",
37+
{
38+
icon: CircleIcon,
39+
label: "",
40+
ignored: true,
41+
},
42+
],
43+
[
44+
"null",
45+
{
46+
icon: DotIcon,
47+
label: "",
48+
ignored: true,
49+
},
50+
],
51+
[
52+
"top-start",
53+
{
54+
icon: createIcon({
55+
name: "TopStartIcon",
56+
viewBox: "0 0 24 24",
57+
path: `<path fill="currentColor" d="M20 18v2h-6.5A6.5 6.5 0 0 1 7 13.5V7.83l-3.09 3.09L2.5 9.5L8 4l5.5 5.5l-1.41 1.41L9 7.83v5.67C9 16 11 18 13.5 18H20Z"/>`,
58+
}),
59+
label: "Top Start",
60+
},
61+
],
62+
[
63+
"top",
64+
{
65+
icon: createIcon({
66+
name: "TopStartIcon",
67+
viewBox: "0 0 24 24",
68+
path: `<path fill="currentColor" d="M13 20h-2V8l-5.5 5.5l-1.42-1.42L12 4.16l7.92 7.92l-1.42 1.42L13 8v12Z"/>`,
69+
}),
70+
label: "Top",
71+
},
72+
],
73+
[
74+
"top-end",
75+
{
76+
icon: createIcon({
77+
name: "TopEndIcon",
78+
viewBox: "0 0 24 24",
79+
path: `<path fill="currentColor" d="m21.5 9.5l-1.41 1.42L17 7.83v5.67a6.5 6.5 0 0 1-6.5 6.5H4v-2h6.5c2.5 0 4.5-2 4.5-4.5V7.83l-3.09 3.08L10.5 9.5L16 4l5.5 5.5Z"/>`,
80+
}),
81+
label: "Top End",
82+
},
83+
],
84+
[
85+
"left-start",
86+
{
87+
icon: createIcon({
88+
name: "LeftStartIcon",
89+
viewBox: "0 0 24 24",
90+
path: `<path fill="currentColor" d="M20 13.5V20h-2v-6.5C18 11 16 9 13.5 9H7.83l3.08 3.09L9.5 13.5L4 8l5.5-5.5l1.42 1.41L7.83 7h5.67a6.5 6.5 0 0 1 6.5 6.5Z"/>`,
91+
}),
92+
label: "Left Start",
93+
},
94+
],
95+
[
96+
"left",
97+
{
98+
icon: createIcon({
99+
name: "LeftIcon",
100+
viewBox: "0 0 24 24",
101+
path: `<path fill="currentColor" d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11h12Z"/>`,
102+
}),
103+
label: "Left",
104+
},
105+
],
106+
[
107+
"left-end",
108+
{
109+
icon: createIcon({
110+
name: "LeftEndIcon",
111+
viewBox: "0 0 24 24",
112+
path: `<path fill="currentColor" d="M20 4v6.5a6.5 6.5 0 0 1-6.5 6.5H7.83l3.09 3.09L9.5 21.5L4 16l5.5-5.5l1.41 1.41L7.83 15h5.67c2.5 0 4.5-2 4.5-4.5V4h2Z"/>`,
113+
}),
114+
label: "Left End",
115+
},
116+
],
117+
[
118+
"bottom-start",
119+
{
120+
icon: createIcon({
121+
name: "BottomStartIcon",
122+
viewBox: "0 0 24 24",
123+
path: `<path fill="currentColor" d="M20 4v2h-6.5C11 6 9 8 9 10.5v5.67l3.09-3.08l1.41 1.41L8 20l-5.5-5.5l1.41-1.42L7 16.17V10.5A6.5 6.5 0 0 1 13.5 4H20Z"/>`,
124+
}),
125+
label: "Bottom Start",
126+
},
127+
],
128+
[
129+
"bottom-end",
130+
{
131+
icon: createIcon({
132+
name: "BottomEndIcon",
133+
viewBox: "0 0 24 24",
134+
path: `<path fill="currentColor" d="M21.5 14.5L16 20l-5.5-5.5l1.41-1.41L15 16.17V10.5C15 8 13 6 10.5 6H4V4h6.5a6.5 6.5 0 0 1 6.5 6.5v5.67l3.09-3.09l1.41 1.42Z"/>`,
135+
}),
136+
label: "Bottom End",
137+
},
138+
],
139+
[
140+
"bottom",
141+
{
142+
icon: createIcon({
143+
name: "BottomIcon",
144+
viewBox: "0 0 24 24",
145+
path: `<path fill="currentColor" d="M11 4h2v12l5.5-5.5l1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5L11 16V4Z"/>`,
146+
}),
147+
label: "Bottom",
148+
},
149+
],
150+
[
151+
"right-start",
152+
{
153+
icon: createIcon({
154+
name: "RightStartIcon",
155+
viewBox: "0 0 24 24",
156+
path: `<path fill="currentColor" d="m20 8l-5.5 5.5l-1.41-1.41L16.17 9H10.5C8 9 6 11 6 13.5V20H4v-6.5A6.5 6.5 0 0 1 10.5 7h5.67l-3.09-3.09L14.5 2.5L20 8Z"/>`,
157+
}),
158+
label: "Right Start",
159+
},
160+
],
161+
[
162+
"right",
163+
{
164+
icon: createIcon({
165+
name: "RightIcon",
166+
viewBox: "0 0 24 24",
167+
path: `<path fill="currentColor" d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"/>`,
168+
}),
169+
label: "Right",
170+
},
171+
],
172+
[
173+
"right-end",
174+
{
175+
icon: createIcon({
176+
name: "RightEndIcon",
177+
viewBox: "0 0 24 24",
178+
path: `<path fill="currentColor" d="m20 16l-5.5 5.5l-1.42-1.41L16.17 17H10.5A6.5 6.5 0 0 1 4 10.5V4h2v6.5C6 13 8 15 10.5 15h5.67l-3.08-3.09l1.41-1.41L20 16Z"/>`,
179+
}),
180+
label: "Right End",
181+
},
182+
],
183+
])
184+
185+
const entries = placementsMap.entries()
186+
const placements = []
187+
188+
for (const [placement, meta] of entries) {
189+
placements.push({
190+
placement,
191+
...meta,
192+
icon: markRaw(meta.icon),
193+
})
194+
}
195+
196+
export interface PlacementsMatrixData {
197+
icon: ReturnType<typeof createIcon>
198+
label: string
199+
ignored?: boolean
200+
placement: CTooltipPlacementPositions
201+
}
202+
203+
export const processedPlacementMap = placementsMatrix.reduce((acc, curr) => {
204+
const row = curr.reduce((_acc, _curr) => {
205+
const meta = placementsMap.get(_curr)
206+
if (meta) {
207+
_acc.push({
208+
...meta,
209+
placement: _curr,
210+
})
211+
}
212+
return _acc
213+
}, [] as PlacementsMatrixData[])
214+
return acc.concat(row)
215+
}, [] as PlacementsMatrixData[])

‎packages/c-tooltip/examples/simple-tooltip.vue

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,27 @@
11
<script setup lang="ts">
2-
import { CTooltip, CTooltipTrigger, CTooltipContent } from "../src"
3-
import { CButton, CSimpleGrid } from "../../vue/src"
2+
import { CTooltip } from "../src"
3+
import { chakra, CStack, createIcon } from "../../vue/src"
44
5-
const placements = [
6-
"top",
7-
"top-start",
8-
"top-end",
9-
"bottom",
10-
"bottom-start",
11-
"bottom-end",
12-
"left",
13-
"left-start",
14-
"left-end",
15-
"right",
16-
"right-start",
17-
"right-end",
18-
]
5+
const ChakraIcon = createIcon({
6+
name: "ChakraUIIcon",
7+
viewBox: "0 0 24 24",
8+
path: `
9+
<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"/>
10+
`,
11+
})
1912
</script>
2013

2114
<template>
22-
<c-simple-grid
23-
gap="16"
24-
template-columns="repeat(3, auto)"
25-
grid-auto-flow="row"
26-
>
15+
<c-stack spacing="8" align-items="flex-start">
16+
<c-tooltip label="SVG as child component" has-arrow placement="top-start">
17+
<chakra-icon box-size="8" />
18+
</c-tooltip>
2719
<c-tooltip
28-
v-for="placement in placements"
29-
:key="placement"
30-
:positioning="{
31-
placement: placement as any,
32-
}"
20+
label="Some string as child node"
21+
has-arrow
22+
placement="bottom-end"
3323
>
34-
<c-tooltip-trigger>
35-
<c-button size="xs" variant="outline"> {{ placement }} </c-button>
36-
</c-tooltip-trigger>
37-
<c-tooltip-content>Tooltip content {{ placement }}</c-tooltip-content>
24+
Text
3825
</c-tooltip>
39-
</c-simple-grid>
26+
</c-stack>
4027
</template>

‎packages/c-tooltip/examples/simplified-api.vue

Lines changed: 0 additions & 28 deletions
This file was deleted.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import {
3-
CTooltip,
3+
CTooltipRoot,
44
CTooltipTrigger,
55
CTooltipContent,
66
CTooltipArrow,
@@ -18,14 +18,14 @@ const ChakraIcon = createIcon({
1818

1919
<template>
2020
<c-h-stack spacing="8">
21-
<c-tooltip :positioning="{ placement: 'bottom-start' }">
21+
<c-tooltip-root :positioning="{ placement: 'bottom-start' }">
2222
<c-tooltip-trigger>
2323
<chakra-icon box-size="8" />
2424
</c-tooltip-trigger>
2525
<c-tooltip-content>
2626
<c-tooltip-arrow />
2727
<chakra.span> Chakra UI Vue </chakra.span>
2828
</c-tooltip-content>
29-
</c-tooltip>
29+
</c-tooltip-root>
3030
</c-h-stack>
3131
</template>

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

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { CTooltip, CTooltipTrigger, CTooltipContent } from "../src"
2+
import { CTooltip } from "../src"
33
import { CHStack, createIcon } from "../../vue/src"
44
55
const VueIcon = createIcon({
@@ -29,23 +29,14 @@ const ChakraIcon = createIcon({
2929

3030
<template>
3131
<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>
32+
<c-tooltip label="Chakra UI">
33+
<chakra-icon box-size="8" />
3734
</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>
35+
<c-tooltip label="Vue">
36+
<vue-icon box-size="8" />
4337
</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>
38+
<c-tooltip label="Nuxt">
39+
<nuxt-icon box-size="8" />
4940
</c-tooltip>
5041
</c-h-stack>
5142
</template>

0 commit comments

Comments
 (0)