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

Commit 7c09efe

Browse files
codebender828codebender828
committed
fix: global component types
1 parent 7cb523e commit 7c09efe

File tree

4 files changed

+73
-123
lines changed

4 files changed

+73
-123
lines changed

‎components.d.ts

Lines changed: 32 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -2,128 +2,32 @@
22
* Global component types for @@chakra-ui/vue-next1.0.0-alpha.4
33
* This is a generated file. Do not edit it's contents.
44
*
5-
* This file was generated on 2021-06-22T09:21:16.557Z
5+
* This file was generated on 2021-06-22T10:04:03.124Z
66
*/
7-
declare module 'vue' {
8-
export interface GlobalComponents {
9-
CAlert: typeof import('@chakra-ui/vue-next')['CAlert']
10-
CAlertTitle: typeof import('@chakra-ui/vue-next')['CAlertTitle']
11-
CAlertDescription: typeof import('@chakra-ui/vue-next')['CAlertDescription']
12-
CAlertIcon: typeof import('@chakra-ui/vue-next')['CAlertIcon']
13-
CButton: typeof import('@chakra-ui/vue-next')['CButton']
14-
CButtonGroup: typeof import('@chakra-ui/vue-next')['CButtonGroup']
15-
CIconButton: typeof import('@chakra-ui/vue-next')['CIconButton']
16-
CFocusLock: typeof import('@chakra-ui/vue-next')['CFocusLock']
17-
CAspectRatio: typeof import('@chakra-ui/vue-next')['CAspectRatio']
18-
CBadge: typeof import('@chakra-ui/vue-next')['CBadge']
19-
CBox: typeof import('@chakra-ui/vue-next')['CBox']
20-
CSquare: typeof import('@chakra-ui/vue-next')['CSquare']
21-
CCircle: typeof import('@chakra-ui/vue-next')['CCircle']
22-
CCenter: typeof import('@chakra-ui/vue-next')['CCenter']
23-
CContainer: typeof import('@chakra-ui/vue-next')['CContainer']
24-
CDivider: typeof import('@chakra-ui/vue-next')['CDivider']
25-
CGrid: typeof import('@chakra-ui/vue-next')['CGrid']
26-
CGridItem: typeof import('@chakra-ui/vue-next')['CGridItem']
27-
CHeading: typeof import('@chakra-ui/vue-next')['CHeading']
28-
CLink: typeof import('@chakra-ui/vue-next')['CLink']
29-
CLinkOverlay: typeof import('@chakra-ui/vue-next')['CLinkOverlay']
30-
CLinkBox: typeof import('@chakra-ui/vue-next')['CLinkBox']
31-
CList: typeof import('@chakra-ui/vue-next')['CList']
32-
COrderedList: typeof import('@chakra-ui/vue-next')['COrderedList']
33-
CUnorderedList: typeof import('@chakra-ui/vue-next')['CUnorderedList']
34-
CListItem: typeof import('@chakra-ui/vue-next')['CListItem']
35-
CListIcon: typeof import('@chakra-ui/vue-next')['CListIcon']
36-
CKbd: typeof import('@chakra-ui/vue-next')['CKbd']
37-
CSimpleGrid: typeof import('@chakra-ui/vue-next')['CSimpleGrid']
38-
CSpacer: typeof import('@chakra-ui/vue-next')['CSpacer']
39-
CStackDivider: typeof import('@chakra-ui/vue-next')['CStackDivider']
40-
CStackItem: typeof import('@chakra-ui/vue-next')['CStackItem']
41-
CStack: typeof import('@chakra-ui/vue-next')['CStack']
42-
CHStack: typeof import('@chakra-ui/vue-next')['CHStack']
43-
CVStack: typeof import('@chakra-ui/vue-next')['CVStack']
44-
CText: typeof import('@chakra-ui/vue-next')['CText']
45-
CModal: typeof import('@chakra-ui/vue-next')['CModal']
46-
CModalContent: typeof import('@chakra-ui/vue-next')['CModalContent']
47-
CModalOverlay: typeof import('@chakra-ui/vue-next')['CModalOverlay']
48-
CModalHeader: typeof import('@chakra-ui/vue-next')['CModalHeader']
49-
CModalBody: typeof import('@chakra-ui/vue-next')['CModalBody']
50-
CModalFooter: typeof import('@chakra-ui/vue-next')['CModalFooter']
51-
CModalCloseButton: typeof import('@chakra-ui/vue-next')['CModalCloseButton']
52-
CMotion: typeof import('@chakra-ui/vue-next')['CMotion']
53-
CPortal: typeof import('@chakra-ui/vue-next')['CPortal']
54-
CScrollLock: typeof import('@chakra-ui/vue-next')['CScrollLock']
55-
CVisuallyHidden: typeof import('@chakra-ui/vue-next')['CVisuallyHidden']
56-
CVisuallyHiddenInput: typeof import('@chakra-ui/vue-next')['CVisuallyHiddenInput']
57-
'chakra.a': typeof import('@chakra-ui/vue-next')['CBox']
58-
'chakra.b': typeof import('@chakra-ui/vue-next')['CBox']
59-
'chakra.article': typeof import('@chakra-ui/vue-next')['CBox']
60-
'chakra.aside': typeof import('@chakra-ui/vue-next')['CBox']
61-
'chakra.blockquote': typeof import('@chakra-ui/vue-next')['CBox']
62-
'chakra.button': typeof import('@chakra-ui/vue-next')['CBox']
63-
'chakra.caption': typeof import('@chakra-ui/vue-next')['CBox']
64-
'chakra.cite': typeof import('@chakra-ui/vue-next')['CBox']
65-
'chakra.circle': typeof import('@chakra-ui/vue-next')['CBox']
66-
'chakra.code': typeof import('@chakra-ui/vue-next')['CBox']
67-
'chakra.dd': typeof import('@chakra-ui/vue-next')['CBox']
68-
'chakra.div': typeof import('@chakra-ui/vue-next')['CBox']
69-
'chakra.dl': typeof import('@chakra-ui/vue-next')['CBox']
70-
'chakra.dt': typeof import('@chakra-ui/vue-next')['CBox']
71-
'chakra.fieldset': typeof import('@chakra-ui/vue-next')['CBox']
72-
'chakra.figcaption': typeof import('@chakra-ui/vue-next')['CBox']
73-
'chakra.figure': typeof import('@chakra-ui/vue-next')['CBox']
74-
'chakra.footer': typeof import('@chakra-ui/vue-next')['CBox']
75-
'chakra.form': typeof import('@chakra-ui/vue-next')['CBox']
76-
'chakra.h1': typeof import('@chakra-ui/vue-next')['CBox']
77-
'chakra.h2': typeof import('@chakra-ui/vue-next')['CBox']
78-
'chakra.h3': typeof import('@chakra-ui/vue-next')['CBox']
79-
'chakra.h4': typeof import('@chakra-ui/vue-next')['CBox']
80-
'chakra.h5': typeof import('@chakra-ui/vue-next')['CBox']
81-
'chakra.h6': typeof import('@chakra-ui/vue-next')['CBox']
82-
'chakra.header': typeof import('@chakra-ui/vue-next')['CBox']
83-
'chakra.hr': typeof import('@chakra-ui/vue-next')['CBox']
84-
'chakra.iframe': typeof import('@chakra-ui/vue-next')['CBox']
85-
'chakra.img': typeof import('@chakra-ui/vue-next')['CBox']
86-
'chakra.input': typeof import('@chakra-ui/vue-next')['CBox']
87-
'chakra.kbd': typeof import('@chakra-ui/vue-next')['CBox']
88-
'chakra.label': typeof import('@chakra-ui/vue-next')['CBox']
89-
'chakra.li': typeof import('@chakra-ui/vue-next')['CBox']
90-
'chakra.mark': typeof import('@chakra-ui/vue-next')['CBox']
91-
'chakra.main': typeof import('@chakra-ui/vue-next')['CBox']
92-
'chakra.nav': typeof import('@chakra-ui/vue-next')['CBox']
93-
'chakra.ol': typeof import('@chakra-ui/vue-next')['CBox']
94-
'chakra.p': typeof import('@chakra-ui/vue-next')['CBox']
95-
'chakra.path': typeof import('@chakra-ui/vue-next')['CBox']
96-
'chakra.pre': typeof import('@chakra-ui/vue-next')['CBox']
97-
'chakra.q': typeof import('@chakra-ui/vue-next')['CBox']
98-
'chakra.rect': typeof import('@chakra-ui/vue-next')['CBox']
99-
'chakra.s': typeof import('@chakra-ui/vue-next')['CBox']
100-
'chakra.svg': typeof import('@chakra-ui/vue-next')['CBox']
101-
'chakra.section': typeof import('@chakra-ui/vue-next')['CBox']
102-
'chakra.select': typeof import('@chakra-ui/vue-next')['CBox']
103-
'chakra.strong': typeof import('@chakra-ui/vue-next')['CBox']
104-
'chakra.small': typeof import('@chakra-ui/vue-next')['CBox']
105-
'chakra.span': typeof import('@chakra-ui/vue-next')['CBox']
106-
'chakra.sub': typeof import('@chakra-ui/vue-next')['CBox']
107-
'chakra.sup': typeof import('@chakra-ui/vue-next')['CBox']
108-
'chakra.table': typeof import('@chakra-ui/vue-next')['CBox']
109-
'chakra.tbody': typeof import('@chakra-ui/vue-next')['CBox']
110-
'chakra.td': typeof import('@chakra-ui/vue-next')['CBox']
111-
'chakra.textarea': typeof import('@chakra-ui/vue-next')['CBox']
112-
'chakra.tfoot': typeof import('@chakra-ui/vue-next')['CBox']
113-
'chakra.th': typeof import('@chakra-ui/vue-next')['CBox']
114-
'chakra.thead': typeof import('@chakra-ui/vue-next')['CBox']
115-
'chakra.tr': typeof import('@chakra-ui/vue-next')['CBox']
116-
'chakra.ul': typeof import('@chakra-ui/vue-next')['CBox']
117-
}
7+
8+
import { ChakraProps } from '@chakra-ui/vue-system'
9+
import { HTMLChakraProps } from '@chakra-ui/vue-system'
10+
import { VNodeChild, HTMLAttributes } from 'vue'
11+
12+
export type JsxNode = VNodeChild | JSX.Element
13+
14+
export interface SlotDirective {
15+
[name: string]: () => JsxNode
11816
}
11917

120-
/**
121-
* Global component types for @@chakra-ui/vue-next1.0.0-alpha.4
122-
* This is a generated file. Do not edit it's contents.
123-
*
124-
* This file was generated on 2021-06-22T09:21:16.557Z
125-
*/
18+
type JsxComponentCustomProps = {
19+
vModel?: unknown
20+
vModels?: unknown[]
21+
vCustom?: unknown[]
22+
vShow?: boolean
23+
vHtml?: JsxNode
24+
vSlots?: SlotDirective
25+
} & Omit<HTMLAttributes, 'innerHTML'> & {
26+
innerHTML?: JsxNode
27+
} & {}
28+
12629
declare module 'vue' {
30+
/* Global component types for Volar auto-complete */
12731
export interface GlobalComponents {
12832
CAlert: typeof import('@chakra-ui/vue-next')['CAlert']
12933
CAlertTitle: typeof import('@chakra-ui/vue-next')['CAlertTitle']
@@ -234,4 +138,14 @@ declare module 'vue' {
234138
'chakra.tr': typeof import('@chakra-ui/vue-next')['CBox']
235139
'chakra.ul': typeof import('@chakra-ui/vue-next')['CBox']
236140
}
141+
142+
/* Component custom props types for JSX and TSX auto complete */
143+
export interface ComponentCustomProps
144+
extends JsxComponentCustomProps,
145+
ChakraProps {
146+
onClick?: () => any
147+
vSlots?: {
148+
[eleName: string]: JSX.Element
149+
}
150+
}
237151
}

‎packages/layout/src/stack.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
ComponentCustomProps,
1212
VNodeProps,
1313
} from 'vue'
14-
import { chakra, BaseStyleResolverProps, DOMElements, HTMLChakraProps } from '@chakra-ui/vue-system'
14+
import { chakra, DOMElements, DeepPartial, HTMLChakraProps } from '@chakra-ui/vue-system'
1515
import {
1616
getDividerStyles,
1717
getStackStyles,
@@ -133,7 +133,7 @@ const stackProps = {
133133
* @see Docs https://vue.chakra-ui.com/docs/layout/stack
134134
*
135135
*/
136-
export const CStack: ComponentWithProps<StackProps> = defineComponent({
136+
export const CStack: ComponentWithProps<DeepPartial<StackProps>> = defineComponent({
137137
name: 'CStack',
138138
props: stackProps,
139139
setup(props, { slots, attrs }) {
@@ -203,7 +203,6 @@ export const CHStack: ComponentWithProps<StackProps> = defineComponent({
203203
setup(props, { attrs, slots }) {
204204
return () => {
205205
return (
206-
// @ts-expect-error
207206
<CStack label="stack-horizontal" align="center" {...props} {...attrs } direction="row">
208207
{slots?.default?.()}
209208
</CStack>
@@ -220,7 +219,6 @@ export const CVStack: ComponentWithProps<StackProps> = defineComponent({
220219
props: stackProps,
221220
setup(props, { attrs, slots }) {
222221
return () => (
223-
// @ts-expect-error
224222
<CStack label="stack-vertical" align={'center'} {...props} {...attrs} direction="column">
225223
{slots?.default?.()}
226224
</CStack>

‎packages/system/src/system.types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,10 @@ export interface ChakraProps extends SystemProps {
7373
* Used to truncate text at a specific number of lines
7474
*/
7575
noOfLines?: ResponsiveValue<number>
76+
/**
77+
* Internal prop used to label component tags
78+
*/
79+
label?: string
7680
}
7781

7882
type ElementType<P = any> =

‎scripts/generate-global-types.ts

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,45 @@ async function generateComponents() {
4040
*
4141
* This file was generated on ${new Date().toISOString()}
4242
*/
43+
44+
import { HTMLChakraProps } from '@chakra-ui/vue-system'
45+
import { VNodeChild, HTMLAttributes } from 'vue'
46+
47+
export type JsxNode = VNodeChild | JSX.Element
48+
49+
export interface SlotDirective {
50+
[name: string]: () => JsxNode
51+
}
52+
53+
type JsxComponentCustomProps = {
54+
vModel?: unknown
55+
vModels?: unknown[]
56+
vCustom?: unknown[]
57+
vShow?: boolean
58+
vHtml?: JsxNode
59+
vSlots?: SlotDirective
60+
} & Omit<HTMLAttributes, 'innerHTML'> & {
61+
innerHTML?: JsxNode
62+
}
63+
64+
4365
declare module 'vue' {
66+
/* Global component types for Volar auto-complete */
4467
export interface GlobalComponents {
4568
${code}
69+
}
70+
71+
/* Component custom props types for JSX and TSX auto complete */
72+
export interface ComponentCustomProps
73+
extends JsxComponentCustomProps,
74+
HTMLChakraProps<'div'> {
75+
onClick?: () => any
76+
vSlots?: {
77+
[eleName: string]: JSX.Element
4678
}
4779
}
80+
}
81+
4882
`
4983

5084
// Write files
@@ -54,7 +88,7 @@ async function generateComponents() {
5488
'../packages/core/dist/types/index.d.ts'
5589
)
5690
writeFileSync(projectTypesFilePath, allTypes, 'utf-8')
57-
appendFileSync(projectTypesFilePath, allTypes, 'utf-8')
91+
appendFileSync(coreTypesFilePath, allTypes, 'utf-8')
5892

5993
// Lint and Fix filea after writing types
6094
const eslint = new ESLint({ fix: true })

0 commit comments

Comments
 (0)