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

Commit eff5ea3

Browse files
codebender828codebender828
committed
feat: scaffold tooltip component
1 parent e73bd16 commit eff5ea3

File tree

12 files changed

+161
-2
lines changed

12 files changed

+161
-2
lines changed

‎@types/components.d.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-03-04T20:41:26.135Z
9+
* This file was generated on 2023-03-07T16:51:08.517Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -142,6 +142,19 @@ declare module "@vue/runtime-core" {
142142
CPinInput: typeof import("@chakra-ui/vue-next")["CPinInput"]
143143
CPinInputClearButton: typeof import("@chakra-ui/vue-next")["CPinInputClearButton"]
144144
CPinInputField: typeof import("@chakra-ui/vue-next")["CPinInputField"]
145+
CPopover: typeof import("@chakra-ui/vue-next")["CPopover"]
146+
CPopoverAnchor: typeof import("@chakra-ui/vue-next")["CPopoverAnchor"]
147+
CPopoverArrow: typeof import("@chakra-ui/vue-next")["CPopoverArrow"]
148+
CPopoverBody: typeof import("@chakra-ui/vue-next")["CPopoverBody"]
149+
CPopoverCloseButton: typeof import("@chakra-ui/vue-next")["CPopoverCloseButton"]
150+
CPopoverCloseTrigger: typeof import("@chakra-ui/vue-next")["CPopoverCloseTrigger"]
151+
CPopoverContent: typeof import("@chakra-ui/vue-next")["CPopoverContent"]
152+
CPopoverDescription: typeof import("@chakra-ui/vue-next")["CPopoverDescription"]
153+
CPopoverFooter: typeof import("@chakra-ui/vue-next")["CPopoverFooter"]
154+
CPopoverHeader: typeof import("@chakra-ui/vue-next")["CPopoverHeader"]
155+
CPopoverPositioner: typeof import("@chakra-ui/vue-next")["CPopoverPositioner"]
156+
CPopoverTitle: typeof import("@chakra-ui/vue-next")["CPopoverTitle"]
157+
CPopoverTrigger: typeof import("@chakra-ui/vue-next")["CPopoverTrigger"]
145158
CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
146159
CPresenceGroup: typeof import("@chakra-ui/vue-next")["CPresenceGroup"]
147160
CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]

‎components.d.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-03-04T20:41:26.135Z
9+
* This file was generated on 2023-03-07T16:51:08.517Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -142,6 +142,19 @@ declare module "@vue/runtime-core" {
142142
CPinInput: typeof import("@chakra-ui/vue-next")["CPinInput"]
143143
CPinInputClearButton: typeof import("@chakra-ui/vue-next")["CPinInputClearButton"]
144144
CPinInputField: typeof import("@chakra-ui/vue-next")["CPinInputField"]
145+
CPopover: typeof import("@chakra-ui/vue-next")["CPopover"]
146+
CPopoverAnchor: typeof import("@chakra-ui/vue-next")["CPopoverAnchor"]
147+
CPopoverArrow: typeof import("@chakra-ui/vue-next")["CPopoverArrow"]
148+
CPopoverBody: typeof import("@chakra-ui/vue-next")["CPopoverBody"]
149+
CPopoverCloseButton: typeof import("@chakra-ui/vue-next")["CPopoverCloseButton"]
150+
CPopoverCloseTrigger: typeof import("@chakra-ui/vue-next")["CPopoverCloseTrigger"]
151+
CPopoverContent: typeof import("@chakra-ui/vue-next")["CPopoverContent"]
152+
CPopoverDescription: typeof import("@chakra-ui/vue-next")["CPopoverDescription"]
153+
CPopoverFooter: typeof import("@chakra-ui/vue-next")["CPopoverFooter"]
154+
CPopoverHeader: typeof import("@chakra-ui/vue-next")["CPopoverHeader"]
155+
CPopoverPositioner: typeof import("@chakra-ui/vue-next")["CPopoverPositioner"]
156+
CPopoverTitle: typeof import("@chakra-ui/vue-next")["CPopoverTitle"]
157+
CPopoverTrigger: typeof import("@chakra-ui/vue-next")["CPopoverTrigger"]
145158
CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
146159
CPresenceGroup: typeof import("@chakra-ui/vue-next")["CPresenceGroup"]
147160
CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]

‎packages/c-tooltip/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# `@chakra-ui/c-tooltip`
2+
3+
A tooltip is a brief informative message that appears when a user interacts with an element
4+
5+
## Installation
6+
7+
```sh
8+
# with pnpm
9+
pnpm add @chakra-ui/c-tooltip
10+
# or with Yarn
11+
yarn i @chakra-ui/c-tooltip
12+
# or with npm
13+
npm i @chakra-ui/c-tooltip
14+
```

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
import { CTooltip } from "../src"
3+
</script>
4+
5+
<template>
6+
<c-tooltip> HELLO CTooltip </c-tooltip>
7+
</template>

‎packages/c-tooltip/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./src"

‎packages/c-tooltip/package.json

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "@chakra-ui/c-tooltip",
3+
"description": "Chakra UI Vue | A tooltip is a brief informative message that appears when a user interacts with an element component",
4+
"version": "0.0.0-beta.0",
5+
"author": "Jonathan Bakebwa <[email protected]>",
6+
"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
7+
"license": "MIT",
8+
"main": "dist/index.js",
9+
"module": "dist/index.mjs",
10+
"typings": "dist/index.d.ts",
11+
"files": [
12+
"dist"
13+
],
14+
"exports": {
15+
".": {
16+
"require": "./dist/index.js",
17+
"default": "./dist/index.mjs"
18+
}
19+
},
20+
"repository": {
21+
"type": "git",
22+
"url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
23+
},
24+
"bugs": {
25+
"url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
26+
},
27+
"sideEffects": false,
28+
"scripts": {
29+
"clean": "rimraf dist .turbo",
30+
"build": "tsup && pnpm build:types",
31+
"build:fast": "tsup",
32+
"build:types": "tsup src --dts-only",
33+
"types:check": "tsc --noEmit",
34+
"dev": "tsup --watch"
35+
},
36+
"dependencies": {
37+
"@chakra-ui/vue-system": "workspace:*"
38+
},
39+
"devDependencies": {
40+
"vue": "^3.2.37"
41+
},
42+
"peerDependencies": {
43+
"vue": "^3.1.4"
44+
},
45+
"publishConfig": {
46+
"access": "public"
47+
}
48+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* Hey! Welcome to @chakra-ui/vue-next CTooltip
3+
*
4+
* A tooltip is a brief informative message that appears when a user interacts with an element
5+
*
6+
* @see Docs https://next.vue.chakra-ui.com/c-tooltip
7+
* @see Source https://github.com/chakra-ui/chakra-ui-vue-next/blob/main/packages/c-tooltip/src/c-tooltip/c-tooltip.ts
8+
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
9+
*/
10+
11+
import { defineComponent, h, Fragment, PropType } from "vue"
12+
import {
13+
chakra,
14+
DOMElements,
15+
} from "@chakra-ui/vue-system"
16+
17+
export interface CTooltipProps {}
18+
19+
export const CTooltip = defineComponent({
20+
props: {
21+
as: {
22+
type: [Object, String] as PropType<DOMElements>,
23+
default: "div",
24+
},
25+
},
26+
setup(props, { slots, attrs }) {
27+
return () => (
28+
<chakra.div as={props.as} {...attrs}>
29+
{slots}
30+
</chakra.div>
31+
)
32+
},
33+
})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./c-tooltip"

‎packages/c-tooltip/tests/c-tooltip.test.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { render } from "../../test-utils/src"
2+
import { CTooltip } from "../src"
3+
4+
it("should render properly", () => {
5+
const { asFragment } = render(CTooltip)
6+
expect(asFragment()).toMatchSnapshot()
7+
})

‎packages/c-tooltip/tsconfig.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"include": ["src", "./index.tsx"]
4+
}

0 commit comments

Comments
 (0)