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

Commit 6e49ebd

Browse files
codebender828codebender828
committed
feat: types for vue components in tsx files
1 parent fb35503 commit 6e49ebd

File tree

27 files changed

+595
-540
lines changed

27 files changed

+595
-540
lines changed

‎@types/components.d.ts

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
/**
2+
* Typescript support for @@chakra-ui/vue-next2.0.0-beta.0 auto-imported
3+
* components using `unplugin-vue-components,`
4+
*
5+
* @see: https://github.com/antfu/unplugin-vue-components/#typescript
6+
*
7+
* This is a generated file. Do not edit it's contents.
8+
*
9+
* This file was generated on 2023-01-22T07:36:55.397Z
10+
*/
11+
12+
import { ChakraProps } from "@chakra-ui/vue-system"
13+
import { VNodeChild, VNode, HTMLAttributes } from "vue"
14+
15+
export type JsxNode = VNodeChild | JSX.Element
16+
17+
declare global {
18+
namespace h.JSX {
19+
interface Element extends VNode {}
20+
interface ElementClass {
21+
$props: {}
22+
}
23+
interface ElementAttributesProperty {
24+
$props: {}
25+
}
26+
27+
interface IntrinsicAttributes
28+
extends Omit<HTMLAttributes, "color">,
29+
ChakraProps {}
30+
}
31+
}
32+
33+
type EventHandler = (...args: any[]) => void
34+
35+
export interface SlotDirective {
36+
[name: string]: () => JsxNode
37+
}
38+
39+
type JsxComponentCustomProps = {
40+
vModel?: unknown
41+
vModels?: unknown[]
42+
vCustom?: unknown[]
43+
vShow?: boolean
44+
vHtml?: JsxNode
45+
vSlots?: SlotDirective
46+
"v-model"?: unknown
47+
"v-models"?: unknown[]
48+
"v-custom"?: unknown[]
49+
"v-show"?: boolean
50+
"v-html"?: JsxNode
51+
"v-slots"?: SlotDirective
52+
} & Omit<HTMLAttributes, "innerHTML"> & {
53+
innerHTML?: JsxNode
54+
}
55+
56+
declare var chakra: typeof import("@chakra-ui/vue-next")["chakra"]
57+
58+
declare module "@vue/runtime-core" {
59+
/* Global component types for Volar auto-complete */
60+
export interface GlobalComponents {
61+
chakra: typeof import("@chakra-ui/vue-next")["chakra"]
62+
CAccordion: typeof import("@chakra-ui/vue-next")["CAccordion"]
63+
CAccordionButton: typeof import("@chakra-ui/vue-next")["CAccordionButton"]
64+
CAccordionIcon: typeof import("@chakra-ui/vue-next")["CAccordionIcon"]
65+
CAccordionItem: typeof import("@chakra-ui/vue-next")["CAccordionItem"]
66+
CAccordionPanel: typeof import("@chakra-ui/vue-next")["CAccordionPanel"]
67+
CAlert: typeof import("@chakra-ui/vue-next")["CAlert"]
68+
CAlertDescription: typeof import("@chakra-ui/vue-next")["CAlertDescription"]
69+
CAlertIcon: typeof import("@chakra-ui/vue-next")["CAlertIcon"]
70+
CAlertTitle: typeof import("@chakra-ui/vue-next")["CAlertTitle"]
71+
CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]
72+
CBreadcrumbItem: typeof import("@chakra-ui/vue-next")["CBreadcrumbItem"]
73+
CBreadcrumbLink: typeof import("@chakra-ui/vue-next")["CBreadcrumbLink"]
74+
CBreadcrumbSeparator: typeof import("@chakra-ui/vue-next")["CBreadcrumbSeparator"]
75+
CButton: typeof import("@chakra-ui/vue-next")["CButton"]
76+
CButtonGroup: typeof import("@chakra-ui/vue-next")["CButtonGroup"]
77+
CIconButton: typeof import("@chakra-ui/vue-next")["CIconButton"]
78+
CCheckbox: typeof import("@chakra-ui/vue-next")["CCheckbox"]
79+
CCheckboxGroup: typeof import("@chakra-ui/vue-next")["CCheckboxGroup"]
80+
CFocusLock: typeof import("@chakra-ui/vue-next")["CFocusLock"]
81+
CFormErrorIcon: typeof import("@chakra-ui/vue-next")["CFormErrorIcon"]
82+
CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]
83+
CFormLabel: typeof import("@chakra-ui/vue-next")["CFormLabel"]
84+
CRequiredIndicator: typeof import("@chakra-ui/vue-next")["CRequiredIndicator"]
85+
CIcon: typeof import("@chakra-ui/vue-next")["CIcon"]
86+
CImage: typeof import("@chakra-ui/vue-next")["CImage"]
87+
CImg: typeof import("@chakra-ui/vue-next")["CImg"]
88+
CInput: typeof import("@chakra-ui/vue-next")["CInput"]
89+
CInputAddon: typeof import("@chakra-ui/vue-next")["CInputAddon"]
90+
CInputGroup: typeof import("@chakra-ui/vue-next")["CInputGroup"]
91+
CInputLeftAddon: typeof import("@chakra-ui/vue-next")["CInputLeftAddon"]
92+
CInputLeftElement: typeof import("@chakra-ui/vue-next")["CInputLeftElement"]
93+
CInputRightAddon: typeof import("@chakra-ui/vue-next")["CInputRightAddon"]
94+
CInputRightElement: typeof import("@chakra-ui/vue-next")["CInputRightElement"]
95+
CAspectRatio: typeof import("@chakra-ui/vue-next")["CAspectRatio"]
96+
CBadge: typeof import("@chakra-ui/vue-next")["CBadge"]
97+
CBox: typeof import("@chakra-ui/vue-next")["CBox"]
98+
CCenter: typeof import("@chakra-ui/vue-next")["CCenter"]
99+
CCircle: typeof import("@chakra-ui/vue-next")["CCircle"]
100+
CContainer: typeof import("@chakra-ui/vue-next")["CContainer"]
101+
CDivider: typeof import("@chakra-ui/vue-next")["CDivider"]
102+
CGrid: typeof import("@chakra-ui/vue-next")["CGrid"]
103+
CGridItem: typeof import("@chakra-ui/vue-next")["CGridItem"]
104+
CHStack: typeof import("@chakra-ui/vue-next")["CHStack"]
105+
CHeading: typeof import("@chakra-ui/vue-next")["CHeading"]
106+
CKbd: typeof import("@chakra-ui/vue-next")["CKbd"]
107+
CLink: typeof import("@chakra-ui/vue-next")["CLink"]
108+
CLinkBox: typeof import("@chakra-ui/vue-next")["CLinkBox"]
109+
CLinkOverlay: typeof import("@chakra-ui/vue-next")["CLinkOverlay"]
110+
CList: typeof import("@chakra-ui/vue-next")["CList"]
111+
CListIcon: typeof import("@chakra-ui/vue-next")["CListIcon"]
112+
CListItem: typeof import("@chakra-ui/vue-next")["CListItem"]
113+
COrderedList: typeof import("@chakra-ui/vue-next")["COrderedList"]
114+
CSimpleGrid: typeof import("@chakra-ui/vue-next")["CSimpleGrid"]
115+
CSpacer: typeof import("@chakra-ui/vue-next")["CSpacer"]
116+
CSquare: typeof import("@chakra-ui/vue-next")["CSquare"]
117+
CStack: typeof import("@chakra-ui/vue-next")["CStack"]
118+
CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
119+
CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
120+
CText: typeof import("@chakra-ui/vue-next")["CText"]
121+
CUnorderedList: typeof import("@chakra-ui/vue-next")["CUnorderedList"]
122+
CVStack: typeof import("@chakra-ui/vue-next")["CVStack"]
123+
CAlertDialog: typeof import("@chakra-ui/vue-next")["CAlertDialog"]
124+
CAlertDialogBody: typeof import("@chakra-ui/vue-next")["CAlertDialogBody"]
125+
CAlertDialogCloseButton: typeof import("@chakra-ui/vue-next")["CAlertDialogCloseButton"]
126+
CAlertDialogContent: typeof import("@chakra-ui/vue-next")["CAlertDialogContent"]
127+
CAlertDialogFooter: typeof import("@chakra-ui/vue-next")["CAlertDialogFooter"]
128+
CAlertDialogHeader: typeof import("@chakra-ui/vue-next")["CAlertDialogHeader"]
129+
CAlertDialogOverlay: typeof import("@chakra-ui/vue-next")["CAlertDialogOverlay"]
130+
CDrawer: typeof import("@chakra-ui/vue-next")["CDrawer"]
131+
CDrawerBody: typeof import("@chakra-ui/vue-next")["CDrawerBody"]
132+
CDrawerCloseButton: typeof import("@chakra-ui/vue-next")["CDrawerCloseButton"]
133+
CDrawerContent: typeof import("@chakra-ui/vue-next")["CDrawerContent"]
134+
CDrawerFooter: typeof import("@chakra-ui/vue-next")["CDrawerFooter"]
135+
CDrawerHeader: typeof import("@chakra-ui/vue-next")["CDrawerHeader"]
136+
CDrawerOverlay: typeof import("@chakra-ui/vue-next")["CDrawerOverlay"]
137+
CModal: typeof import("@chakra-ui/vue-next")["CModal"]
138+
CModalBody: typeof import("@chakra-ui/vue-next")["CModalBody"]
139+
CModalCloseButton: typeof import("@chakra-ui/vue-next")["CModalCloseButton"]
140+
CModalContent: typeof import("@chakra-ui/vue-next")["CModalContent"]
141+
CModalFooter: typeof import("@chakra-ui/vue-next")["CModalFooter"]
142+
CModalHeader: typeof import("@chakra-ui/vue-next")["CModalHeader"]
143+
CModalOverlay: typeof import("@chakra-ui/vue-next")["CModalOverlay"]
144+
CAnimatePresence: typeof import("@chakra-ui/vue-next")["CAnimatePresence"]
145+
CCollapse: typeof import("@chakra-ui/vue-next")["CCollapse"]
146+
CMotion: typeof import("@chakra-ui/vue-next")["CMotion"]
147+
CPinInput: typeof import("@chakra-ui/vue-next")["CPinInput"]
148+
CPinInputClearButton: typeof import("@chakra-ui/vue-next")["CPinInputClearButton"]
149+
CPinInputField: typeof import("@chakra-ui/vue-next")["CPinInputField"]
150+
CPortal: typeof import("@chakra-ui/vue-next")["CPortal"]
151+
CSkipNavContent: typeof import("@chakra-ui/vue-next")["CSkipNavContent"]
152+
CSkipNavLink: typeof import("@chakra-ui/vue-next")["CSkipNavLink"]
153+
CScrollLock: typeof import("@chakra-ui/vue-next")["CScrollLock"]
154+
CVisuallyHidden: typeof import("@chakra-ui/vue-next")["CVisuallyHidden"]
155+
CVisuallyHiddenInput: typeof import("@chakra-ui/vue-next")["CVisuallyHiddenInput"]
156+
"chakra.a": typeof import("@chakra-ui/vue-next")["CBox"]
157+
"chakra.b": typeof import("@chakra-ui/vue-next")["CBox"]
158+
"chakra.article": typeof import("@chakra-ui/vue-next")["CBox"]
159+
"chakra.aside": typeof import("@chakra-ui/vue-next")["CBox"]
160+
"chakra.blockquote": typeof import("@chakra-ui/vue-next")["CBox"]
161+
"chakra.button": typeof import("@chakra-ui/vue-next")["CBox"]
162+
"chakra.caption": typeof import("@chakra-ui/vue-next")["CBox"]
163+
"chakra.cite": typeof import("@chakra-ui/vue-next")["CBox"]
164+
"chakra.circle": typeof import("@chakra-ui/vue-next")["CBox"]
165+
"chakra.code": typeof import("@chakra-ui/vue-next")["CBox"]
166+
"chakra.dd": typeof import("@chakra-ui/vue-next")["CBox"]
167+
"chakra.div": typeof import("@chakra-ui/vue-next")["CBox"]
168+
"chakra.dl": typeof import("@chakra-ui/vue-next")["CBox"]
169+
"chakra.dt": typeof import("@chakra-ui/vue-next")["CBox"]
170+
"chakra.fieldset": typeof import("@chakra-ui/vue-next")["CBox"]
171+
"chakra.figcaption": typeof import("@chakra-ui/vue-next")["CBox"]
172+
"chakra.figure": typeof import("@chakra-ui/vue-next")["CBox"]
173+
"chakra.footer": typeof import("@chakra-ui/vue-next")["CBox"]
174+
"chakra.form": typeof import("@chakra-ui/vue-next")["CBox"]
175+
"chakra.h1": typeof import("@chakra-ui/vue-next")["CBox"]
176+
"chakra.h2": typeof import("@chakra-ui/vue-next")["CBox"]
177+
"chakra.h3": typeof import("@chakra-ui/vue-next")["CBox"]
178+
"chakra.h4": typeof import("@chakra-ui/vue-next")["CBox"]
179+
"chakra.h5": typeof import("@chakra-ui/vue-next")["CBox"]
180+
"chakra.h6": typeof import("@chakra-ui/vue-next")["CBox"]
181+
"chakra.header": typeof import("@chakra-ui/vue-next")["CBox"]
182+
"chakra.hr": typeof import("@chakra-ui/vue-next")["CBox"]
183+
"chakra.iframe": typeof import("@chakra-ui/vue-next")["CBox"]
184+
"chakra.img": typeof import("@chakra-ui/vue-next")["CBox"]
185+
"chakra.input": typeof import("@chakra-ui/vue-next")["CBox"]
186+
"chakra.kbd": typeof import("@chakra-ui/vue-next")["CBox"]
187+
"chakra.label": typeof import("@chakra-ui/vue-next")["CBox"]
188+
"chakra.li": typeof import("@chakra-ui/vue-next")["CBox"]
189+
"chakra.mark": typeof import("@chakra-ui/vue-next")["CBox"]
190+
"chakra.main": typeof import("@chakra-ui/vue-next")["CBox"]
191+
"chakra.nav": typeof import("@chakra-ui/vue-next")["CBox"]
192+
"chakra.ol": typeof import("@chakra-ui/vue-next")["CBox"]
193+
"chakra.p": typeof import("@chakra-ui/vue-next")["CBox"]
194+
"chakra.path": typeof import("@chakra-ui/vue-next")["CBox"]
195+
"chakra.pre": typeof import("@chakra-ui/vue-next")["CBox"]
196+
"chakra.q": typeof import("@chakra-ui/vue-next")["CBox"]
197+
"chakra.rect": typeof import("@chakra-ui/vue-next")["CBox"]
198+
"chakra.s": typeof import("@chakra-ui/vue-next")["CBox"]
199+
"chakra.svg": typeof import("@chakra-ui/vue-next")["CBox"]
200+
"chakra.section": typeof import("@chakra-ui/vue-next")["CBox"]
201+
"chakra.select": typeof import("@chakra-ui/vue-next")["CBox"]
202+
"chakra.strong": typeof import("@chakra-ui/vue-next")["CBox"]
203+
"chakra.small": typeof import("@chakra-ui/vue-next")["CBox"]
204+
"chakra.span": typeof import("@chakra-ui/vue-next")["CBox"]
205+
"chakra.sub": typeof import("@chakra-ui/vue-next")["CBox"]
206+
"chakra.sup": typeof import("@chakra-ui/vue-next")["CBox"]
207+
"chakra.table": typeof import("@chakra-ui/vue-next")["CBox"]
208+
"chakra.tbody": typeof import("@chakra-ui/vue-next")["CBox"]
209+
"chakra.td": typeof import("@chakra-ui/vue-next")["CBox"]
210+
"chakra.textarea": typeof import("@chakra-ui/vue-next")["CBox"]
211+
"chakra.tfoot": typeof import("@chakra-ui/vue-next")["CBox"]
212+
"chakra.th": typeof import("@chakra-ui/vue-next")["CBox"]
213+
"chakra.thead": typeof import("@chakra-ui/vue-next")["CBox"]
214+
"chakra.tr": typeof import("@chakra-ui/vue-next")["CBox"]
215+
"chakra.ul": typeof import("@chakra-ui/vue-next")["CBox"]
216+
}
217+
218+
/* Component custom props types for JSX and TSX auto complete */
219+
export interface ComponentCustomProps
220+
extends JsxComponentCustomProps,
221+
ChakraProps {
222+
vSlots?: {
223+
[eleName: string]: JSX.Element
224+
}
225+
}
226+
227+
interface ComponentCustomProps {
228+
role?: string
229+
tabindex?: number | string
230+
value?: unknown
231+
// should be removed after Vue supported component events typing
232+
// see: https://github.com/vuejs/vue-next/issues/1553
233+
// https://github.com/vuejs/vue-next/issues/3029
234+
onBlur?: EventHandler
235+
onOpen?: EventHandler
236+
onEdit?: EventHandler
237+
onLoad?: EventHandler
238+
onClose?: EventHandler
239+
onFocus?: EventHandler
240+
onInput?: EventHandler
241+
onClick?: EventHandler
242+
onPress?: EventHandler
243+
onCancel?: EventHandler
244+
onChange?: EventHandler
245+
onDelete?: EventHandler
246+
onScroll?: EventHandler
247+
onSubmit?: EventHandler
248+
onSelect?: EventHandler
249+
onConfirm?: EventHandler
250+
onPreview?: EventHandler
251+
onKeypress?: EventHandler
252+
onTouchend?: EventHandler
253+
onTouchmove?: EventHandler
254+
onTouchstart?: EventHandler
255+
onTouchcancel?: EventHandler
256+
onMouseenter?: EventHandler
257+
onMouseleave?: EventHandler
258+
onMousemove?: EventHandler
259+
onKeydown?: EventHandler
260+
onKeyup?: EventHandler
261+
onDeselect?: EventHandler
262+
onClear?: EventHandler
263+
}
264+
}
265+
266+
export {}

‎@types/cypress.d.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/// <reference types="cypress" />
2+
3+
import { Component } from "vue"
4+
import { mount } from "@cypress/vue"
5+
6+
import { DefineComponent } from "vue"
7+
8+
// cypress/support/index.ts
9+
declare global {
10+
namespace Cypress {
11+
interface Chainable {
12+
/**
13+
* Run a11y tests or only a subset of all tests
14+
* @see https://github.com/avanslaars/cypress-axe
15+
* @example
16+
* cy.checkA11y()
17+
*/
18+
checkA11y(options?: any, params?: object): Chainable
19+
/**
20+
* Triggers tab action
21+
* @param options
22+
*/
23+
tab(options?: { shift: boolean }): Chainable
24+
25+
mount: typeof mount
26+
}
27+
}
28+
}

‎@types/env.d.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type {
2+
ComponentPublicInstance,
3+
FunctionalComponent,
4+
HTMLAttributes,
5+
VNode,
6+
DefineComponent,
7+
} from "vue"
8+
import type { ChakraProps } from "@chakra-ui/vue-system"
9+
import { ChakraFactoryProps, ComponentWithProps } from "@chakra-ui/vue-system"
10+
11+
declare global {
12+
namespace JSX {
13+
interface Element extends VNode {}
14+
interface ElementClass
15+
extends DefineComponent<ChakraFactoryProps>,
16+
ComponentWithProps<ChakraFactoryProps> {
17+
$props: {}
18+
}
19+
interface ElementAttributesProperty {
20+
$props: {}
21+
}
22+
23+
interface IntrinsicAttributes
24+
extends Omit<HTMLAttributes, "color">,
25+
ChakraProps {}
26+
}
27+
}
28+
29+
declare module "vue" {
30+
export type JSXComponent<Props = any> =
31+
| { new (): ComponentPublicInstance<Props> }
32+
| FunctionalComponent<Props>
33+
}

‎@types/vue-shims.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module "*.vue" {
2+
import { DefineComponent } from "vue"
3+
const component: DefineComponent<{}, {}, any>
4+
export default component
5+
}

‎_templates/generator/component/package.json.ejs.t

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
55
{
66
"name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
77
"description": "<%= 'Chakra UI Vue | ' + h.changeCase.sentence(description) + ' component'%>",
8-
"version": "0.0.0-alpha.0",
8+
"version": "0.0.0-next.0",
99
"main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
1010
"module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
1111
"author": "Jonathan Bakebwa <codebender828@gmail.com>",
@@ -32,7 +32,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
3232
"clean": "rimraf dist"
3333
},
3434
"dependencies": {
35-
"@chakra-ui/vue-system": "0.1.0-alpha.10"
35+
"@chakra-ui/vue-system": "0.1.0-next.10"
3636
},
3737
"devDependencies": {
3838
"vue": "^3.2.37"

‎_templates/generator/composable/README.md.ejs.t

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
to: packages/<%=h.changeCase.paramCase(name)%>/README.md
3+
---
4+
5+
# @chakra-ui/<%=h.changeCase.paramCase(name)%>
6+
7+
<%=h.changeCase.sentence(description)%>
8+
9+
## Installation
10+
11+
```sh
12+
yarn add @chakra-ui/<%=h.changeCase.paramCase(name)%>
13+
# or
14+
npm i @chakra-ui/<%=h.changeCase.paramCase(name)%>
15+
```

0 commit comments

Comments
 (0)