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

Commit 3c0b931

Browse files
ShyrroShyrro
committed
fix(reactivity): fix useStyleConfig reactivity
Fixes: #97 Signed-off-by: Shyrro <zsahmane@gmail.com>
1 parent 7bdd60f commit 3c0b931

File tree

19 files changed

+59
-46
lines changed

19 files changed

+59
-46
lines changed

‎packages/c-accordion/src/accordion.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,7 @@ export const CAccordion: ComponentWithProps<DeepPartial<CAccordionProps>> =
105105
})
106106
)
107107

108-
const styles = useMultiStyleConfig("Accordion", {
109-
...props.value,
110-
...themingProps.value,
111-
...attrs,
112-
})
108+
const styles = useMultiStyleConfig("Accordion", themingProps)
113109

114110
const reduceMotion = computed(() => props.value.reduceMotion)
115111

@@ -233,7 +229,7 @@ export const CAccordionButton: ComponentWithProps<CAccordionButtonProps> =
233229
__css={buttonStyles.value}
234230
{...attrs}
235231
>
236-
{getValidChildren(slots)}
232+
{() => getValidChildren(slots)}
237233
</chakra.button>
238234
)
239235
},

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const CAlert = defineComponent({
8181
},
8282
setup(props, { slots, attrs }) {
8383
const colorScheme = computed<string>(
84-
() => props.colorScheme || STATUSES[props.status].colorScheme
84+
() => props.colorScheme || STATUSES[props?.status]?.colorScheme
8585
)
8686

8787
const themingProps = computed<ThemingProps>(() => ({
@@ -90,7 +90,7 @@ export const CAlert = defineComponent({
9090
}))
9191

9292
AlertProvider({ status: computed(() => props.status) })
93-
const styles = useMultiStyleConfig("Alert", themingProps.value)
93+
const styles = useMultiStyleConfig("Alert", themingProps)
9494
StylesProvider(styles)
9595

9696
const alertStyles = computed<SystemStyleObject>(() => ({
@@ -110,7 +110,7 @@ export const CAlert = defineComponent({
110110
__css={alertStyles.value}
111111
{...attrs}
112112
>
113-
{slots}
113+
{() => getValidChildren(slots)}
114114
</chakra.div>
115115
)
116116
}
@@ -125,8 +125,9 @@ export const CAlert = defineComponent({
125125
export const CAlertTitle = defineComponent({
126126
name: "CAlertTitle",
127127
setup(_, { attrs, slots }) {
128+
const styles = useStyles()
129+
128130
return () => {
129-
const styles = useStyles()
130131

131132
return (
132133
<chakra.div
@@ -157,7 +158,7 @@ export const CAlertDescription = defineComponent({
157158
__css={styles.value.description}
158159
{...attrs}
159160
>
160-
{slots}
161+
{() => getValidChildren(slots)}
161162
</chakra.div>
162163
)
163164
}

‎packages/c-breadcrumb/src/c-breadcrumb.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
isObjectComponent,
2727
SNA,
2828
SNAO,
29+
vueThemingProps,
2930
} from "@chakra-ui/vue-utils"
3031
import { DOMElements } from "@chakra-ui/vue-system"
3132

@@ -68,7 +69,7 @@ export const CBreadcrumb: DefineComponent<BreadcrumbProps> = defineComponent(
6869
})
6970
)
7071

71-
const styles = useMultiStyleConfig("Breadcrumb", themingProps.value)
72+
const styles = useMultiStyleConfig("Breadcrumb", themingProps)
7273
StylesProvider(styles)
7374

7475
const separator = computed(() => {
@@ -132,6 +133,7 @@ CBreadcrumb.props = {
132133
type: [String, Object] as PropType<DOMElements | object | string>,
133134
default: "nav",
134135
},
136+
...vueThemingProps,
135137
}
136138

137139
/**

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { CIcon, IconProps } from "@chakra-ui/c-icon"
2121
import { CSpinner } from "@chakra-ui/c-spinner"
2222
import { ButtonProps, defaultButtonProps } from "./button.utils"
2323
import { SystemProps } from "@chakra-ui/styled-system"
24-
import { SNAO, vueThemingProps } from "@chakra-ui/vue-utils"
24+
import { SNAO, vueThemingProps, getValidChildren } from "@chakra-ui/vue-utils"
2525

2626
export interface CButtonSpinnerProps extends HTMLChakraProps<"div"> {
2727
label?: string
@@ -153,7 +153,7 @@ export const CButton: ComponentWithProps<DeepPartial<CButtonProps>> =
153153
...vueThemingProps,
154154
},
155155
setup(_props, { attrs, slots }) {
156-
const props = computed<ButtonProps>(() =>
156+
const props = computed(() =>
157157
mergeWith({}, defaultButtonProps, _props, attrs)
158158
)
159159
const themingProps = computed<ThemingProps>(() =>
@@ -166,11 +166,10 @@ export const CButton: ComponentWithProps<DeepPartial<CButtonProps>> =
166166
)
167167

168168
const group = useButtonGroup()
169-
const styles = useStyleConfig("Button", {
170-
...group?.value,
171-
...themingProps.value,
172-
...attrs,
173-
})
169+
const styles = useStyleConfig(
170+
"Button",
171+
computed(() => ({ ...group?.value, ...themingProps.value }))
172+
)
174173

175174
const _focus = computed<SystemStyleObject>(() =>
176175
mergeWith({}, styles.value?.["_focus"] ?? {}, {
@@ -242,7 +241,7 @@ export const CButton: ComponentWithProps<DeepPartial<CButtonProps>> =
242241
rightIcon={props.value.rightIcon}
243242
iconSpacing={props.value.iconSpacing}
244243
>
245-
{slots}
244+
{() => getValidChildren(slots)}
246245
</CButtonContent>
247246
)}
248247
{props.value.isLoading &&

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const CCloseButton = defineComponent({
6868
flexShrink: 0,
6969
}
7070

71-
const styles = useStyleConfig("CloseButton", themingProps.value)
71+
const styles = useStyleConfig("CloseButton", themingProps)
7272

7373
return h(
7474
chakra(props.as, {

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@ const CCode = defineComponent({
1717
...vueThemingProps,
1818
},
1919
setup(props, { slots, attrs }) {
20-
return () => {
21-
const themingProps = computed<ThemingProps>(() =>
22-
filterUndefined({
23-
colorScheme: props.colorScheme,
24-
variant: props.variant,
25-
size: props.size,
26-
styleConfig: props.styleConfig,
27-
})
28-
)
29-
const styles = useStyleConfig("Code", themingProps.value)
20+
const themingProps = computed<ThemingProps>(() =>
21+
filterUndefined({
22+
colorScheme: props.colorScheme,
23+
variant: props.variant,
24+
size: props.size,
25+
styleConfig: props.styleConfig,
26+
})
27+
)
28+
const styles = useStyleConfig("Code", themingProps)
3029

30+
return () => {
3131
return h(
3232
chakra(props.as, {
3333
__css: {

‎packages/c-input/src/c-input-group.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const CInputGroup = defineComponent({
2929
},
3030
setup(props, { slots, attrs }) {
3131
const styleAttrs = computed(() => mergeProps(attrs, props))
32-
const styles = useMultiStyleConfig("Input", styleAttrs.value)
32+
const styles = useMultiStyleConfig("Input", styleAttrs)
3333
const input = computed(() => styles.value?.field)
3434
const unthemedProps = computed(() => omitThemingProps(styleAttrs.value))
3535

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,8 +248,9 @@ export const CModal: ComponentWithProps<CModalProps> = defineComponent({
248248
emit("escape", event)
249249
emit("closeModal", false)
250250
}
251+
const mergedProps = computed(() => mergeProps(props, attrs))
251252

252-
const styles = useMultiStyleConfig("Modal", mergeProps(props, attrs))
253+
const styles = useMultiStyleConfig("Modal", mergedProps)
253254
const modalOptions = reactive({
254255
...toRefs(reactive(props)),
255256
closeModal,

‎packages/c-spinner/src/spinner.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const CSpinner: ComponentWithProps<DeepPartial<CSpinnerProps>> =
113113
size: props.value.size,
114114
styleConfig: props.value.styleConfig,
115115
}))
116-
const styles = useStyleConfig("Spinner", { ...themingProps.value })
116+
const styles = useStyleConfig("Spinner", themingProps)
117117
const spinnerStyles = computed<SystemStyleObject>(() => ({
118118
display: "inline-block",
119119
borderColor: "currentColor",

‎packages/c-tag/src/c-tag.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const CTagLabel: ComponentWithProps<CTagLabelProps> = defineComponent({
4646
styleConfig: props.styleConfig,
4747
})
4848
)
49-
const styles = useMultiStyleConfig("Tag", themingProps.value)
49+
const styles = useMultiStyleConfig("Tag", themingProps)
5050

5151
return () => (
5252
<chakra.span __css={styles.value.label} noOfLines={1} {...attrs}>
@@ -98,7 +98,7 @@ export const CTagCloseButton: ComponentWithProps<CTagCloseButtonProps> =
9898
})
9999
)
100100

101-
const styles = useMultiStyleConfig("Tag", themingProps.value)
101+
const styles = useMultiStyleConfig("Tag", themingProps)
102102

103103
const buttonStyles: SystemStyleObject = {
104104
display: "flex",
@@ -135,7 +135,7 @@ export const CTag: ComponentWithProps<CTagProps> = defineComponent({
135135
styleConfig: props.styleConfig,
136136
})
137137
)
138-
const styles = useMultiStyleConfig("Tag", themingProps.value)
138+
const styles = useMultiStyleConfig("Tag", themingProps)
139139
const tagContainerStyles = computed<SystemStyleObject>(() => ({
140140
...styles.value.container,
141141
bg: props.variantColor ?? styles.value.container.bg,

0 commit comments

Comments
 (0)