fix(aalert): fix colormode

Author: codebender828

docs/guides/component-guide.md

@@ -114,6 +114,11 @@ export function useHook(props: UseHookProps) {
 export type UseHookReturn = ReturnType<typeof useHook>
 ```
 
+### Compound components
+When building compound component in Vue, we may need to use the `StylesProvider` or component context provider provided by `createContext`. 
+
+**When providing component state, always make sure that you provide your component state in a computed variable**. This will ensure that your provided state is reactive. Otherwise it won't be if the user changes the component state dynamically.
+
 ### TypeScript
 
 The end goal of this ensure all Chakra UI components are as strongly typed as

package.json

@@ -113,6 +113,7 @@
     "vitepress": "^0.12.0",
     "vue": ">=3.0.5",
     "vue-jest": "^5.0.0-alpha.7",
-    "vue-router": "^4.0.4"
+    "vue-router": "^4.0.4",
+    "vue3-perfect-scrollbar": "^1.5.5"
   }
 }

packages/c-alert/src/alert.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent, PropType, computed } from 'vue'
+import { h, defineComponent, PropType, computed, ComputedRef } from 'vue'
 import {
   chakra,
   ThemingProps,
@@ -34,7 +34,7 @@ type AlertStatus = keyof typeof STATUSES
 export type AlertVariant = 'solid' | 'subtle' | 'left-accent' | 'top-accent'
 
 interface AlertContext {
-  status: AlertStatus
+  status: ComputedRef<AlertStatus>
 }
 
 const [AlertProvider, useAlertContext] = createContext<AlertContext>({
@@ -72,32 +72,34 @@ export const CAlert = defineComponent({
     },
   },
   setup(props, { slots, attrs }) {
-    return () => {
-      const colorScheme: string =
-        props.colorScheme || STATUSES[props.status].colorScheme
+    const colorScheme = computed<string>(
+      () => props.colorScheme || STATUSES[props.status].colorScheme
+    )
+
+    const themingProps = computed<ThemingProps>(() => ({
+      colorScheme: colorScheme.value,
+      variant: props.variant,
+    }))
 
-      const themingProps: ThemingProps = {
-        colorScheme,
-        variant: props.variant,
-      }
-      const styles = useMultiStyleConfig('Alert', themingProps)
-      const alertStyles: SystemStyleObject = {
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        position: 'relative',
-        overflow: 'hidden',
-        ...styles.value.container,
-      }
+    AlertProvider({ status: computed(() => props.status) })
+    const styles = useMultiStyleConfig('Alert', themingProps.value)
+    StylesProvider(styles)
 
-      StylesProvider(styles.value)
-      AlertProvider({ status: props.status })
+    const alertStyles = computed<SystemStyleObject>(() => ({
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      overflow: 'hidden',
+      ...styles.value.container,
+    }))
 
+    return () => {
       return h(
         chakra(props.as, { label: 'alert' }),
         {
           role: 'alert',
-          ...alertStyles,
+          ...alertStyles.value,
           ...attrs,
         },
         slots
@@ -120,7 +122,7 @@ export const CAlertTitle = defineComponent({
       return h(
         chakra('div', { label: 'alert__title' }),
         {
-          ...styles.title,
+          ...styles.value.title,
           ...attrs,
         },
         slots
@@ -137,13 +139,12 @@ export const CAlertTitle = defineComponent({
 export const CAlertDescription = defineComponent({
   name: 'CAlertDescription',
   setup(_, { attrs, slots }) {
+    const styles = useStyles()
     return () => {
-      const styles = useStyles()
-
       return h(
         chakra('div', { label: 'alert__description' }),
         {
-          ...styles.description,
+          ...styles.value.description,
           ...attrs,
         },
         slots
@@ -165,17 +166,16 @@ export const CAlertIcon = defineComponent({
     },
   },
   setup(props, { attrs }) {
-    return () => {
-      const { status } = useAlertContext()
-      const { icon } = STATUSES[status]
-      const styles = useStyles()
-
-      const alertIcon = computed(() => props.icon || icon)
+    const styles = useStyles()
+    const { status } = useAlertContext()
+    const { icon } = STATUSES[status.value]
+    const alertIcon = computed(() => props.icon || icon)
 
+    return () => {
       return h(CIcon, {
         class: 'alert__icon',
         name: alertIcon.value,
-        ...styles.icon,
+        ...styles.value.icon,
         ...attrs,
       })
     }

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

@@ -58,14 +58,13 @@ const CButtonGroup = defineComponent({
   name: 'CButtonGroup',
   props,
   setup(props, { attrs, slots }) {
+    ButtonGroupProvider(() => ({
+      size: props.size,
+      colorScheme: props.colorScheme,
+      variant: props.variant,
+      isDisabled: props.isDisabled,
+    }))
     return () => {
-      ButtonGroupProvider(() => ({
-        size: props.size,
-        colorScheme: props.colorScheme,
-        variant: props.variant,
-        isDisabled: props.isDisabled,
-      }))
-
       const styles = computed(() => {
         let groupStyles: SystemStyleObject = {
           display: 'inline-flex',

packages/c-button/src/button.ts

@@ -21,14 +21,14 @@ const CButtonSpinner = defineComponent({
     >,
   },
   setup(props, { attrs }) {
-    const spinnerStyles = computed<SystemStyleObject>(() => ({
-      display: 'flex',
-      alignItems: 'center',
-      position: props.label ? 'relative' : 'absolute',
-      marginEnd: props.label ? props.spacing : 0,
-    }))
-    return () =>
-      h(
+    return () => {
+      const spinnerStyles = computed<SystemStyleObject>(() => ({
+        display: 'flex',
+        alignItems: 'center',
+        position: props.label ? 'relative' : 'absolute',
+        marginEnd: props.label ? props.spacing : 0,
+      }))
+      return h(
         chakra('div', {
           label: 'button__spinner',
         }),
@@ -44,6 +44,7 @@ const CButtonSpinner = defineComponent({
           }),
         ]
       )
+    }
   },
 })
 

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

@@ -35,6 +35,7 @@ const CIconButton = defineComponent({
           rounded: props.isRound ? 'rounded' : 'md',
           'aria-label': props.ariaLabel,
           ...attrs,
+          ...props,
         },
         () => [
           h(CIcon, {

packages/c-spinner/src/spinner.ts

@@ -96,23 +96,22 @@ const CSpinner = defineComponent({
       styleConfig: props.styleConfig,
     }))
 
-    const styles = useStyleConfig('Spinner', { ...themingProps.value })
+    return () => {
+      const styles = useStyleConfig('Spinner', { ...themingProps.value })
+      const spinnerStyles = {
+        display: 'inline-block',
+        borderColor: 'currentColor',
+        borderStyle: 'solid',
+        borderRadius: '99999px',
+        borderWidth: props.thickness,
+        borderBottomColor: props.emptyColor,
+        borderLeftColor: props.emptyColor,
+        color: props.color,
+        animation: `${spin} ${props.speed} linear infinite`,
+        ...styles.value,
+      }
 
-    const spinnerStyles = {
-      display: 'inline-block',
-      borderColor: 'currentColor',
-      borderStyle: 'solid',
-      borderRadius: '99999px',
-      borderWidth: props.thickness,
-      borderBottomColor: props.emptyColor,
-      borderLeftColor: props.emptyColor,
-      color: props.color,
-      animation: `${spin} ${props.speed} linear infinite`,
-      ...styles.value,
-    }
-
-    return () =>
-      h(
+      return h(
         chakra(props.as, {
           label: 'spinner',
           __css: spinnerStyles,
@@ -122,6 +121,7 @@ const CSpinner = defineComponent({
         },
         props.label && [h(CVisuallyHidden, props.label)]
       )
+    }
   },
 })
 

packages/system/src/composables/use-style-config.ts

@@ -24,18 +24,18 @@ export function useStyleConfig(
   options: any = {},
   userStyleConfig?: any
 ) {
-  const { theme, colorMode } = useChakra()
-  const themeStyleConfig = get(theme, `components.${themeKey}`)
+  return computed(() => {
+    const { theme, colorMode } = useChakra()
+    const themeStyleConfig = get(theme, `components.${themeKey}`)
 
-  const styleConfig = userStyleConfig || themeStyleConfig
+    const styleConfig = userStyleConfig || themeStyleConfig
 
-  const mergedProps = mergeWith(
-    { theme: theme, colorMode: colorMode.value },
-    styleConfig?.defaultProps ?? {},
-    filterUndefined(themingProps)
-  )
+    const mergedProps = mergeWith(
+      { theme: theme, colorMode: colorMode.value },
+      styleConfig?.defaultProps ?? {},
+      filterUndefined(themingProps)
+    )
 
-  return computed(() => {
     const baseStyles = runIfFn(styleConfig.baseStyle ?? {}, mergedProps)
     const variants = runIfFn(
       styleConfig.variants?.[mergedProps.variant] ?? {},

packages/system/src/providers.ts

@@ -1,8 +1,11 @@
 import { createContext } from '@chakra-ui/vue-utils'
 import { Dict } from '@chakra-ui/utils'
 import { SystemStyleObject } from '@chakra-ui/styled-system'
+import { ComputedRef } from '@vue/reactivity'
 
-const [StylesProvider, useStyles] = createContext<Dict<SystemStyleObject>>({
+const [StylesProvider, useStyles] = createContext<
+  ComputedRef<Dict<SystemStyleObject>>
+>({
   name: 'StylesContext',
   errorMessage:
     'useStyles: `styles` is undefined. Seems you forgot to provide `StylesProvider(...)` ',

playground/src/App.vue

@@ -1,14 +1,16 @@
 <template>
   <c-reset />
   <chakra.section d="flex" transition="all 0.2s" height="inherit" w="inherit" :__css="rootStyles">
-    <sidebar :stories="routes" />
-    <chakra.main w="full" pos="relative" border-left="1px solid" border-color="gray.400" padding="4">
+    <perfect-scrollbar>
+      <sidebar :stories="routes" />
+    </perfect-scrollbar>
+    <chakra.main w="full" pos="relative" border-left="1px solid" border-color="gray.200" padding="4">
       <router-view v-slot="{ Component, route }">
         <!-- <transition name="fade" mode="out-in"> -->
           <component :is="Component" />
         <!-- </transition> -->
       </router-view>
-      <c-icon-button pos="absolute" color-scheme="whiteAlpha" @click="toggleColorMode" top="10" right="10" :aria-label="`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`" :icon="colorMode === 'light' ? 'moon' : 'sun'" />
+      <c-icon-button color="inherit" pos="absolute" @click="toggleColorMode" top="10" right="10" :aria-label="`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`" :icon="colorMode === 'light' ? 'moon' : 'sun'" />
     </chakra.main>
   </chakra.section>
 </template>
@@ -39,7 +41,7 @@ export default defineComponent({
         },
         dark: {
           bg: 'gray.800',
-          color: 'whiteAlpha.700',
+          color: 'whiteAlpha.800',
           'a.router-link-active': {
             color: 'teal.200',
             fontSize: '0.9rem',
@@ -49,7 +51,10 @@ export default defineComponent({
         },
       }
       
-      return styles[colorMode.value]
+      return {
+        transition: 'all 0.2s ease-in',
+        ...styles[colorMode.value]
+      }
     })
 
     return {
@@ -93,4 +98,11 @@ a {
 .fade-leave-to {
   opacity: 0;
 }
+
+.ps {
+  height: 100vh;
+  width: 275px;
+}
 </style>
+
+<style src="vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css"/>