Skip to content

Commit 5d8441a

Browse files
codebender828codebender828
committed
feat: migrate layout to TSX support
1 parent a859d7a commit 5d8441a

20 files changed

+130
-138
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎components.d.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
/**
2-
* Global component types for @@chakra-ui/vue-next1.0.0-alpha.4
2+
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.4 auto-imported
3+
* components using `vite-plugin-components`
4+
*
5+
* @see: https://github.com/antfu/vite-plugin-components#typescript
6+
*
37
* This is a generated file. Do not edit it's contents.
48
*
5-
* This file was generated on 2021-06-22T10:04:03.124Z
9+
* This file was generated on 2021-06-30T12:42:36.843Z
610
*/
711

812
import { ChakraProps } from '@chakra-ui/vue-system'
9-
import { HTMLChakraProps } from '@chakra-ui/vue-system'
1013
import { VNodeChild, HTMLAttributes } from 'vue'
1114

1215
export type JsxNode = VNodeChild | JSX.Element
@@ -24,7 +27,7 @@ type JsxComponentCustomProps = {
2427
vSlots?: SlotDirective
2528
} & Omit<HTMLAttributes, 'innerHTML'> & {
2629
innerHTML?: JsxNode
27-
} & {}
30+
}
2831

2932
declare module 'vue' {
3033
/* Global component types for Volar auto-complete */

‎packages/layout/src/aspect-ratio.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ export interface AspectRatioProps
2727
*
2828
* @see Docs https://vue.chakra-ui.com/docs/layout/aspect-ratio
2929
*/
30-
31-
export const CAspectRatio: ComponentWithProps<AspectRatioProps> = defineComponent(
30+
export const CAspectRatio: ComponentWithProps<DeepPartial<AspectRatioProps>> = defineComponent(
3231
{
3332
name: 'CAspectRatio',
3433
props: {

‎packages/layout/src/badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface BadgeProps
2121
*
2222
* @see Docs https://vue.chakra-ui.com/docs/data-display/badge
2323
*/
24-
export const CBadge: ComponentWithProps<BadgeProps> = defineComponent({
24+
export const CBadge: ComponentWithProps<DeepPartial<BadgeProps>> = defineComponent({
2525
name: 'CBadge',
2626
props: {
2727
as: {

‎packages/layout/src/box.ts renamed to ‎packages/layout/src/box.tsx

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,11 @@ export const CBox: ComponentWithProps<DeepPartial<BoxProps>> = defineComponent({
2525
},
2626
},
2727
setup(props, { slots, attrs }) {
28-
return () => {
29-
return h(
30-
chakra(props.as, {
31-
label: 'box',
32-
...attrs,
33-
}),
34-
{},
35-
slots
36-
)
37-
}
28+
return () => (
29+
<chakra.div as={props.as} label="box" {...attrs}>
30+
{slots?.default?.()}
31+
</chakra.div>
32+
)
3833
},
3934
})
4035

@@ -77,22 +72,20 @@ export const CSquare: ComponentWithProps<
7772
? { display: 'flex', alignItems: 'center', justifyContent: 'center' }
7873
: {}
7974
)
80-
return () => {
81-
return h(
82-
CBox,
83-
{
84-
label: 'square',
85-
boxSize: props.size,
86-
__css: {
87-
...styles.value,
88-
flexShrink: 0,
89-
flexGrow: 0,
90-
},
91-
...attrs,
92-
},
93-
slots
94-
)
95-
}
75+
return () => (
76+
<CBox
77+
label="square"
78+
boxSize={props.size}
79+
__css={{
80+
...styles.value,
81+
flexShrink: 0,
82+
flexGrow: 0,
83+
}}
84+
{...attrs}
85+
>
86+
{slots?.default?.()}
87+
</CBox>
88+
)
9689
},
9790
})
9891

@@ -106,16 +99,10 @@ export const CCircle: ComponentWithProps<
10699
> = defineComponent({
107100
name: 'CCircle',
108101
setup(_, { slots, attrs }) {
109-
return () => {
110-
return h(
111-
CSquare,
112-
{
113-
label: 'circle',
114-
borderRadius: '9999px',
115-
...attrs,
116-
},
117-
slots
118-
)
119-
}
102+
return () => (
103+
<CSquare label="circle" borderRadius="9999px" {...attrs}>
104+
{slots?.default?.()}
105+
</CSquare>
106+
)
120107
},
121108
})

‎packages/layout/src/container.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {
55
ThemingProps,
66
useStyleConfig,
77
HTMLChakraProps,
8+
DeepPartial,
9+
ComponentWithProps
810
} from '@chakra-ui/vue-system'
911
import { filterUndefined } from '@chakra-ui/utils'
1012
import { vueThemingProps } from '@chakra-ui/vue-utils'
@@ -27,7 +29,7 @@ export interface ContainerProps
2729
*
2830
* It also sets a default max-width of `60ch` (60 characters).
2931
*/
30-
export const CContainer = defineComponent({
32+
export const CContainer: ComponentWithProps<DeepPartial<ContainerProps>> = defineComponent({
3133
name: 'CContainer',
3234
props: {
3335
as: {
@@ -50,24 +52,22 @@ export const CContainer = defineComponent({
5052
)
5153
const styles = useStyleConfig('Container', themingProps.value)
5254

53-
return () => {
54-
return (
55-
<chakra.div
56-
label="container"
57-
__css={{
58-
...styles.value,
59-
...(props.centerContent && {
60-
display: 'flex',
61-
flexDirection: 'column',
62-
alignItems: 'center',
63-
})
64-
}}
65-
{...props}
66-
{...attrs}
67-
>
68-
{slots.default?.()}
69-
</chakra.div>
70-
)
71-
}
55+
return () => (
56+
<chakra.div
57+
label="container"
58+
__css={{
59+
...styles.value,
60+
...(props.centerContent && {
61+
display: 'flex',
62+
flexDirection: 'column',
63+
alignItems: 'center',
64+
})
65+
}}
66+
{...props}
67+
{...attrs}
68+
>
69+
{slots.default?.()}
70+
</chakra.div>
71+
)
7272
},
7373
})

‎packages/layout/src/divider.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
useStyleConfig,
66
HTMLChakraProps,
77
ComponentWithProps,
8+
DeepPartial,
89
} from '@chakra-ui/vue-system'
910
import { filterUndefined } from '@chakra-ui/utils'
1011
import { vueThemingProps } from '@chakra-ui/vue-utils'
@@ -21,7 +22,7 @@ export interface DividerProps
2122
*
2223
* @see Docs https://vue.chakra-ui.com/docs/data-display/divider
2324
*/
24-
export const CDivider: ComponentWithProps<DividerProps> = defineComponent({
25+
export const CDivider: ComponentWithProps<DeepPartial<DividerProps>> = defineComponent({
2526
name: 'CDivider',
2627
props: {
2728
orientation: {

‎packages/layout/src/grid.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
ResponsiveValue,
1616
DOMElements,
1717
ComponentWithProps,
18+
DeepPartial,
1819
} from '@chakra-ui/vue-system'
1920
import { filterUndefined, mapResponsive } from '@chakra-ui/utils'
2021
import { SNAO } from '@chakra-ui/vue-utils'
@@ -121,7 +122,7 @@ export interface GridItemProps extends BoxProps {
121122
*
122123
* @see Docs https://vue.chakra-ui.com/docs/layout/grid
123124
*/
124-
export const CGrid: ComponentWithProps<GridProps> = defineComponent({
125+
export const CGrid: ComponentWithProps<DeepPartial<GridProps>> = defineComponent({
125126
name: 'CGrid',
126127
props: {
127128
as: {
@@ -182,7 +183,7 @@ function spanFn(span?: ResponsiveValue<number | 'auto'>) {
182183
)
183184
}
184185

185-
export const CGridItem: ComponentWithProps<GridItemProps> = defineComponent({
186+
export const CGridItem: ComponentWithProps<DeepPartial<GridItemProps>> = defineComponent({
186187
name: 'CGridItem',
187188
props: {
188189
as: {

‎packages/layout/src/heading.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ import {
66
useStyleConfig,
77
HTMLChakraProps,
88
ComponentWithProps,
9+
DeepPartial,
910
} from '@chakra-ui/vue-system'
10-
import { computed, defineComponent, h, PropType } from '@vue/runtime-core'
11+
import { computed, defineComponent, h, PropType } from 'vue'
1112
import { filterUndefined } from '@chakra-ui/utils'
1213

1314
export interface HeadingProps
1415
extends HTMLChakraProps<'h2'>,
1516
ThemingProps<'Heading'> {}
1617

17-
export const CHeading: ComponentWithProps<HeadingProps> = defineComponent({
18+
export const CHeading: ComponentWithProps<DeepPartial<HeadingProps>> = defineComponent({
1819
name: 'CHeading',
1920
props: {
2021
as: {
@@ -34,13 +35,10 @@ export const CHeading: ComponentWithProps<HeadingProps> = defineComponent({
3435
)
3536
const styles = useStyleConfig('Heading', themingProps.value)
3637

37-
return () => {
38-
39-
return (
40-
<chakra.h2 as={props.as} label="heading" __css={styles.value} {...attrs}>
41-
{slots?.default?.()}
42-
</chakra.h2>
43-
)
44-
}
38+
return () => (
39+
<chakra.h2 as={props.as} label="heading" __css={styles.value} {...attrs}>
40+
{slots?.default?.()}
41+
</chakra.h2>
42+
)
4543
},
4644
})

‎packages/layout/src/kbd.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
HTMLChakraProps,
88
extractStyleAttrs,
99
ComponentWithProps,
10+
DeepPartial,
1011
} from '@chakra-ui/vue-system'
1112
import { computed, defineComponent, h, PropType } from '@vue/runtime-core'
1213
import { filterUndefined } from '@chakra-ui/utils'
@@ -25,7 +26,7 @@ export interface KbdProps extends HTMLChakraProps<'kbd'>, ThemingProps<'Kbd'> {}
2526
*
2627
* @see Docs https://vue.chakra-ui.com/docs/data-display/kbd
2728
*/
28-
export const CKbd: ComponentWithProps<KbdProps> = defineComponent({
29+
export const CKbd: ComponentWithProps<DeepPartial<KbdProps>> = defineComponent({
2930
name: 'CKbd',
3031
props: {
3132
as: {
@@ -45,12 +46,10 @@ export const CKbd: ComponentWithProps<KbdProps> = defineComponent({
4546
)
4647
const styles = useStyleConfig('Kbd', themingProps.value)
4748

48-
return () => {
49-
return (
50-
<chakra.kbd label="kdb" __css={{ fontFamily: 'mono', ...styles.value }} {...attrs}>
51-
{slots?.default?.()}
52-
</chakra.kbd>
53-
)
54-
}
49+
return () => (
50+
<chakra.kbd label="kdb" __css={{ fontFamily: 'mono', ...styles.value }} {...attrs}>
51+
{slots?.default?.()}
52+
</chakra.kbd>
53+
)
5554
},
5655
})

0 commit comments

Comments
 (0)