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

Commit 38d78a6

Browse files
codebender828codebender828
authored
Merge pull request #202 from prazdevs/feat/move-to-tsx
feat: move components rendering to tsx
2 parents 33bb858 + d55abed commit 38d78a6

File tree

17 files changed

+161
-159
lines changed

17 files changed

+161
-159
lines changed

‎_templates/generator/component/component.ts.ejs.t

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

‎_templates/generator/component/component.tsx.ejs.t

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
to: packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>.tsx
3+
---
4+
/**
5+
* Hey! Welcome to @chakra-ui/vue-next <%= h.changeCase.pascalCase(name) %>
6+
*
7+
* <%=h.changeCase.sentence(description)%>
8+
*
9+
* @see Docs https://next.vue.chakra-ui.com/<%=h.changeCase.paramCase(name)%>
10+
* @see Source https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(name)%>/<%=h.changeCase.paramCase(name)%>.ts
11+
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
12+
*/
13+
14+
import { defineComponent, h, PropType } from "vue"
15+
import {
16+
chakra,
17+
ComponentWithProps,
18+
DeepPartial,
19+
DOMElements,
20+
} from "@chakra-ui/vue-system"
21+
22+
export interface <%= h.changeCase.pascalCase(name) %>Props {}
23+
24+
export const <%= h.changeCase.pascalCase(name) %>: ComponentWithProps<DeepPartial<<%= h.changeCase.pascalCase(name) %>Props>> =
25+
defineComponent({
26+
props: {
27+
as: {
28+
type: [Object, String] as PropType<DOMElements>,
29+
default: "div",
30+
},
31+
},
32+
setup(props, { slots, attrs }) {
33+
return () => (
34+
<chakra.div as={props.as} {...attrs}>
35+
{slots}
36+
</chakra.div>
37+
)
38+
},
39+
})

‎_templates/generator/component/examples.vue.ejs.t

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.paramCase(name)%>.vue
33
---
4+
<script setup lang="ts">
5+
import { <%=h.changeCase.pascalCase(name)%> } from "../src"
6+
</script>
47

58
<template>
69
<<%=h.changeCase.paramCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> </<%=h.changeCase.paramCase(name)%>>

‎_templates/generator/component/index.ts.ejs.t

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
to: packages/<%=h.changeCase.paramCase(name)%>/src/index.tsx
33
---
44

5-
export * from './<%=h.changeCase.paramCase(name)%>'
5+
export * from "./<%=h.changeCase.paramCase(name)%>"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
2828
"url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
2929
},
3030
"sideEffects": false,
31-
"scripts": {
31+
"scripts": {
3232
"clean": "rimraf dist"
3333
},
3434
"dependencies": {
35-
"@chakra-ui/vue-system": "0.1.0-alpha.5"
35+
"@chakra-ui/vue-system": "0.1.0-alpha.10"
3636
},
3737
"devDependencies": {
38-
"vue": "^3.1.4"
38+
"vue": "^3.2.37"
3939
},
4040
"peerDependencies": {
4141
"vue": "^3.1.4"

‎_templates/generator/component/src-index.tsx.ejs.t

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
to: packages/<%=h.changeCase.paramCase(name)%>/index.tsx
33
---
44

5-
export * from './src'
5+
export * from "./src"

‎_templates/generator/component/test-file.test.ts.ejs.t

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
to: packages/<%=h.changeCase.paramCase(name)%>/tests/<%=h.changeCase.paramCase(name)%>.test.ts
33
---
4-
import { render } from '../../test-utils/src'
5-
import { <%= h.changeCase.pascalCase(name) %> } from '../src'
4+
import { render } from "../../test-utils/src"
5+
import { <%= h.changeCase.pascalCase(name) %> } from "../src"
66

7-
it('should render properly', () => {
7+
it("should render properly", () => {
88
const { asFragment } = render(<%= h.changeCase.pascalCase(name) %>)
99
expect(asFragment()).toMatchSnapshot()
10-
})
10+
})

‎packages/c-button/src/button-group.ts renamed to ‎packages/c-button/src/button-group.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { computed, ComputedRef, defineComponent, h, PropType } from "vue"
22
import { SystemProps, SystemStyleObject } from "@chakra-ui/styled-system"
33
import { chakra, ThemingProps, ComponentWithProps } from "@chakra-ui/vue-system"
4-
import { createContext, vueThemingProps } from "@chakra-ui/vue-utils"
4+
import {
5+
createContext,
6+
getValidChildren,
7+
vueThemingProps,
8+
} from "@chakra-ui/vue-utils"
59

610
export interface ButtonGroupProps extends ThemingProps {
711
/**
@@ -81,14 +85,15 @@ const CButtonGroup: ComponentWithProps<ButtonGroupProps> = defineComponent({
8185
})
8286

8387
return () => {
84-
return h(
85-
chakra("div", { label: "button__group" }),
86-
{
87-
__css: { ...styles.value },
88-
role: "group",
89-
...attrs,
90-
},
91-
slots
88+
return (
89+
<chakra.div
90+
role="group"
91+
__label="button__group"
92+
__css={styles.value}
93+
{...attrs}
94+
>
95+
{() => getValidChildren(slots)}
96+
</chakra.div>
9297
)
9398
}
9499
},

‎packages/c-close-button/src/c-close-button.ts renamed to ‎packages/c-close-button/src/c-close-button.tsx

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,26 +7,20 @@ import {
77
useStyleConfig,
88
} from "@chakra-ui/vue-system"
99
import { filterUndefined } from "@chakra-ui/utils"
10+
import { getValidChildren } from "@chakra-ui/vue-utils"
11+
1012
import { CIcon } from "@chakra-ui/c-icon"
1113

1214
const CCloseIcon = defineComponent({
1315
setup(_, { attrs }) {
14-
return () =>
15-
h(
16-
CIcon,
17-
{
18-
focusable: false,
19-
"aria-hidden": true,
20-
name: "close",
21-
...attrs,
22-
},
23-
() => [
24-
h("path", {
25-
fill: "currentColor",
26-
d: "M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z",
27-
}),
28-
]
29-
)
16+
return () => (
17+
<CIcon focusable="false" aria-hidden="true" name="close" {...attrs}>
18+
<path
19+
fill="currentColor"
20+
d="M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
21+
/>
22+
</CIcon>
23+
)
3024
},
3125
})
3226

@@ -69,21 +63,18 @@ export const CCloseButton = defineComponent({
6963

7064
const styles = useStyleConfig("CloseButton", themingProps)
7165

72-
return h(
73-
chakra(props.as, {
74-
label: "icon-button",
75-
__css: {
76-
...baseStyles,
77-
...styles.value,
78-
},
79-
}),
80-
{
81-
type: "button",
82-
disabled: props.isDisabled,
83-
"aria-label": "Close",
84-
...attrs,
85-
},
86-
slots.default ? slots : () => [h(CCloseIcon)]
66+
return (
67+
<chakra.button
68+
as={props.as}
69+
type="button"
70+
disabled={props.isDisabled}
71+
aria-label="Close"
72+
__label="icon-button"
73+
__css={{ ...baseStyles, ...styles.value }}
74+
{...attrs}
75+
>
76+
{() => (slots.default ? getValidChildren(slots) : <CCloseIcon />)}
77+
</chakra.button>
8778
)
8879
}
8980
},

‎packages/c-code/src/code.ts renamed to ‎packages/c-code/src/code.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { vueThemingProps } from "@chakra-ui/vue-utils"
1+
import { getValidChildren, vueThemingProps } from "@chakra-ui/vue-utils"
22
import { h, defineComponent, PropType, computed } from "vue"
33
import {
44
chakra,
@@ -28,20 +28,22 @@ const CCode = defineComponent({
2828
const styles = useStyleConfig("Code", themingProps)
2929

3030
return () => {
31-
return h(
32-
chakra(props.as, {
33-
__css: {
31+
return (
32+
<chakra.code
33+
as={props.as}
34+
__css={{
3435
display: "inline-block",
3536
verticalAlign: "middle",
3637
fontSize: "sm",
3738
px: "0.2em",
3839
fontFamily: "mono",
3940
rounded: "sm",
4041
...styles.value,
41-
},
42-
}),
43-
attrs,
44-
slots
42+
}}
43+
{...attrs}
44+
>
45+
{() => getValidChildren(slots)}
46+
</chakra.code>
4547
)
4648
}
4749
},

0 commit comments

Comments
 (0)