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

Commit ecfb0ce

Browse files
codebender828codebender828
committed
fix: enable components dark mode
1 parent 2f48792 commit ecfb0ce

File tree

23 files changed

+350
-209
lines changed

23 files changed

+350
-209
lines changed

‎packages/c-alert/src/alert.ts

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -72,28 +72,28 @@ export const CAlert = defineComponent({
7272
},
7373
},
7474
setup(props, { slots, attrs }) {
75-
const colorScheme: string =
76-
props.colorScheme || STATUSES[props.status].colorScheme
75+
return () => {
76+
const colorScheme: string =
77+
props.colorScheme || STATUSES[props.status].colorScheme
7778

78-
const themingProps: ThemingProps = {
79-
colorScheme,
80-
variant: props.variant,
81-
}
82-
const styles = useMultiStyleConfig('Alert', themingProps)
83-
const alertStyles: SystemStyleObject = {
84-
width: '100%',
85-
display: 'flex',
86-
alignItems: 'center',
87-
position: 'relative',
88-
overflow: 'hidden',
89-
...styles.value.container,
90-
}
79+
const themingProps: ThemingProps = {
80+
colorScheme,
81+
variant: props.variant,
82+
}
83+
const styles = useMultiStyleConfig('Alert', themingProps)
84+
const alertStyles: SystemStyleObject = {
85+
width: '100%',
86+
display: 'flex',
87+
alignItems: 'center',
88+
position: 'relative',
89+
overflow: 'hidden',
90+
...styles.value.container,
91+
}
9192

92-
StylesProvider(styles.value)
93-
AlertProvider({ status: props.status })
93+
StylesProvider(styles.value)
94+
AlertProvider({ status: props.status })
9495

95-
return () =>
96-
h(
96+
return h(
9797
chakra(props.as, { label: 'alert' }),
9898
{
9999
role: 'alert',
@@ -102,6 +102,7 @@ export const CAlert = defineComponent({
102102
},
103103
slots
104104
)
105+
}
105106
},
106107
})
107108

@@ -113,17 +114,18 @@ export const CAlert = defineComponent({
113114
export const CAlertTitle = defineComponent({
114115
name: 'CAlertTitle',
115116
setup(_, { attrs, slots }) {
116-
const styles = useStyles()
117+
return () => {
118+
const styles = useStyles()
117119

118-
return () =>
119-
h(
120+
return h(
120121
chakra('div', { label: 'alert__title' }),
121122
{
122123
...styles.title,
123124
...attrs,
124125
},
125126
slots
126127
)
128+
}
127129
},
128130
})
129131

@@ -135,17 +137,18 @@ export const CAlertTitle = defineComponent({
135137
export const CAlertDescription = defineComponent({
136138
name: 'CAlertDescription',
137139
setup(_, { attrs, slots }) {
138-
const styles = useStyles()
140+
return () => {
141+
const styles = useStyles()
139142

140-
return () =>
141-
h(
143+
return h(
142144
chakra('div', { label: 'alert__description' }),
143145
{
144146
...styles.description,
145147
...attrs,
146148
},
147149
slots
148150
)
151+
}
149152
},
150153
})
151154

@@ -162,18 +165,19 @@ export const CAlertIcon = defineComponent({
162165
},
163166
},
164167
setup(props, { attrs }) {
165-
const { status } = useAlertContext()
166-
const { icon } = STATUSES[status]
167-
const styles = useStyles()
168+
return () => {
169+
const { status } = useAlertContext()
170+
const { icon } = STATUSES[status]
171+
const styles = useStyles()
168172

169-
const alertIcon = computed(() => props.icon || icon)
173+
const alertIcon = computed(() => props.icon || icon)
170174

171-
return () =>
172-
h(CIcon, {
175+
return h(CIcon, {
173176
class: 'alert__icon',
174177
name: alertIcon.value,
175178
...styles.icon,
176179
...attrs,
177180
})
181+
}
178182
},
179183
})

‎packages/c-badge/src/badge.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,18 @@ const CBadge = defineComponent({
1919
styleConfig: String as PropType<ThemingProps['styleConfig']>,
2020
},
2121
setup(props, { slots, attrs }) {
22-
const themingProps = computed<ThemingProps>(() =>
23-
filterUndefined({
24-
colorScheme: props.colorScheme,
25-
variant: props.variant,
26-
size: props.size,
27-
styleConfig: props.styleConfig,
28-
})
29-
)
30-
const styles = useStyleConfig('Badge', themingProps.value)
31-
return () =>
32-
h(
22+
return () => {
23+
const themingProps = computed<ThemingProps>(() =>
24+
filterUndefined({
25+
colorScheme: props.colorScheme,
26+
variant: props.variant,
27+
size: props.size,
28+
styleConfig: props.styleConfig,
29+
})
30+
)
31+
const styles = useStyleConfig('Badge', themingProps.value)
32+
33+
return h(
3334
chakra(props.as),
3435
{
3536
__css: {
@@ -42,6 +43,7 @@ const CBadge = defineComponent({
4243
},
4344
slots
4445
)
46+
}
4547
},
4648
})
4749

‎packages/c-button/src/button-group.ts

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -58,37 +58,37 @@ const CButtonGroup = defineComponent({
5858
name: 'CButtonGroup',
5959
props,
6060
setup(props, { attrs, slots }) {
61-
ButtonGroupProvider(() => ({
62-
size: props.size,
63-
colorScheme: props.colorScheme,
64-
variant: props.variant,
65-
isDisabled: props.isDisabled,
66-
}))
61+
return () => {
62+
ButtonGroupProvider(() => ({
63+
size: props.size,
64+
colorScheme: props.colorScheme,
65+
variant: props.variant,
66+
isDisabled: props.isDisabled,
67+
}))
6768

68-
const styles = computed(() => {
69-
let groupStyles: SystemStyleObject = {
70-
display: 'inline-flex',
71-
}
72-
73-
if (props.isAttached) {
74-
groupStyles = {
75-
...groupStyles,
76-
'> *:first-of-type:not(:last-of-type)': { borderRightRadius: 0 },
77-
'> *:not(:first-of-type):not(:last-of-type)': { borderRadius: 0 },
78-
'> *:not(:first-of-type):last-of-type': { borderLeftRadius: 0 },
69+
const styles = computed(() => {
70+
let groupStyles: SystemStyleObject = {
71+
display: 'inline-flex',
7972
}
80-
} else {
81-
groupStyles = {
82-
...groupStyles,
83-
'& > *:not(style) ~ *:not(style)': { marginLeft: props.spacing },
73+
74+
if (props.isAttached) {
75+
groupStyles = {
76+
...groupStyles,
77+
'> *:first-of-type:not(:last-of-type)': { borderRightRadius: 0 },
78+
'> *:not(:first-of-type):not(:last-of-type)': { borderRadius: 0 },
79+
'> *:not(:first-of-type):last-of-type': { borderLeftRadius: 0 },
80+
}
81+
} else {
82+
groupStyles = {
83+
...groupStyles,
84+
'& > *:not(style) ~ *:not(style)': { marginLeft: props.spacing },
85+
}
8486
}
85-
}
8687

87-
return groupStyles
88-
})
88+
return groupStyles
89+
})
8990

90-
return () =>
91-
h(
91+
return h(
9292
chakra('div', { label: 'button__group' }),
9393
{
9494
__css: { ...styles.value },
@@ -97,6 +97,7 @@ const CButtonGroup = defineComponent({
9797
},
9898
slots
9999
)
100+
}
100101
},
101102
})
102103

‎packages/c-button/src/button.ts

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -79,41 +79,43 @@ const CButton = defineComponent({
7979
name: 'CButton',
8080
props: BUTTON_PROPS,
8181
setup(props, { attrs, slots }) {
82-
const themingProps = computed<ThemingProps>(() =>
83-
filterUndefined({
84-
colorScheme: props.colorScheme,
85-
variant: props.variant,
86-
size: props.size,
87-
styleConfig: props.styleConfig,
88-
})
89-
)
82+
return () => {
83+
const themingProps = computed<ThemingProps>(() =>
84+
filterUndefined({
85+
colorScheme: props.colorScheme,
86+
variant: props.variant,
87+
size: props.size,
88+
styleConfig: props.styleConfig,
89+
})
90+
)
9091

91-
const group = useButtonGroup()
92-
const styles = useStyleConfig('Button', {
93-
...group?.(),
94-
...themingProps.value,
95-
})
92+
const group = useButtonGroup()
93+
const styles = useStyleConfig('Button', {
94+
...group?.(),
95+
...themingProps.value,
96+
})
9697

97-
const _focus = mergeWith({}, styles.value?.['_focus'] ?? {}, { zIndex: 1 })
98+
const _focus = mergeWith({}, styles.value?.['_focus'] ?? {}, {
99+
zIndex: 1,
100+
})
98101

99-
const buttonStyles = computed<SystemStyleObject>(() => ({
100-
display: 'inline-flex',
101-
appearance: 'none',
102-
alignItems: 'center',
103-
justifyContent: 'center',
104-
transition: 'all 250ms',
105-
userSelect: 'none',
106-
position: 'relative',
107-
whiteSpace: 'nowrap',
108-
verticalAlign: 'middle',
109-
outline: 'none',
110-
width: props.isFullWidth ? '100%' : 'auto',
111-
...styles.value,
112-
...(!!group && { _focus }),
113-
}))
102+
const buttonStyles = computed<SystemStyleObject>(() => ({
103+
display: 'inline-flex',
104+
appearance: 'none',
105+
alignItems: 'center',
106+
justifyContent: 'center',
107+
transition: 'all 250ms',
108+
userSelect: 'none',
109+
position: 'relative',
110+
whiteSpace: 'nowrap',
111+
verticalAlign: 'middle',
112+
outline: 'none',
113+
width: props.isFullWidth ? '100%' : 'auto',
114+
...styles.value,
115+
...(!!group && { _focus }),
116+
}))
114117

115-
return () =>
116-
h(
118+
return h(
117119
chakra(props.as, {
118120
label: 'button',
119121
}),
@@ -153,6 +155,7 @@ const CButton = defineComponent({
153155
}),
154156
]
155157
)
158+
}
156159
},
157160
})
158161

‎packages/c-button/src/icon-button.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,18 @@ const CIconButton = defineComponent({
2222
name: 'CIconButton',
2323
props: IconButtonProps,
2424
setup(props, { attrs }) {
25-
if (!props.ariaLabel) {
26-
console.error(
27-
`chakra-ui: The \`aria-label\` prop is required for the <c-icon-button />`
28-
)
29-
}
30-
return () =>
31-
h(
25+
return () => {
26+
if (!props.ariaLabel) {
27+
console.error(
28+
`chakra-ui: The \`aria-label\` prop is required for the <c-icon-button />`
29+
)
30+
}
31+
return h(
3232
CButton,
3333
{
3434
padding: 0,
3535
rounded: props.isRound ? 'rounded' : 'md',
3636
'aria-label': props.ariaLabel,
37-
...props,
3837
...attrs,
3938
},
4039
() => [
@@ -43,6 +42,7 @@ const CIconButton = defineComponent({
4342
}),
4443
]
4544
)
45+
}
4646
},
4747
})
4848

‎packages/c-close-button/examples/base-c-close-button.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<template>
2-
<c-close-button> HELLO CCloseButton </c-close-button>
2+
<c-close-button />
33
</template>

‎packages/c-close-button/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@chakra-ui/c-close-button",
33
"description": "Chakra UI Vue | An accessible close button component for chakra ui vue component",
4-
"version": "1.0.0",
4+
"version": "0.0.1-alpha.0",
55
"main": "dist/cjs/index.js",
66
"module": "dist/esm/index.js",
77
"types": "dist/types/index.d.ts",
@@ -37,6 +37,7 @@
3737
"watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
3838
},
3939
"dependencies": {
40+
"@chakra-ui/c-icon": "0.0.1-alpha.0",
4041
"@chakra-ui/styled-system": "^1.9.0",
4142
"@chakra-ui/vue-system": "0.0.1-alpha.0",
4243
"@chakra-ui/vue-utils": "0.0.1-alpha.0"

0 commit comments

Comments
 (0)