feat(system): provide overrides api for components

Author: codebender828

package.json

@@ -25,6 +25,7 @@
     "c-button": "yarn workspace @chakra-ui/c-button",
     "c-icon": "yarn workspace @chakra-ui/c-icon",
     "system": "yarn workspace @chakra-ui/vue-system",
+    "utils": "yarn workspace @chakra-ui/vue-utils",
     "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
     "test-utils": "yarn workspace @chakra-ui/vue-test-utils",

packages/c-alert/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@chakra-ui/styled-system": "^1.4.1",
     "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*",
     "@chakra-ui/c-icon": "*"
   }
 }

packages/c-button/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@chakra-ui/styled-system": "^1.4.1",
-    "@chakra-ui/vue-system": "*"
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
   }
 }

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

@@ -0,0 +1,90 @@
+import { computed, defineComponent, h, PropType } from 'vue'
+import {
+  SystemCSSProperties,
+  SystemStyleObject,
+} from '@chakra-ui/styled-system'
+import { chakra, ThemingProps } from '@chakra-ui/vue-system'
+import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
+import { createContext } from '@chakra-ui/vue-utils'
+
+export interface ButtonGroupProps extends ThemingProps {
+  /**
+   * If `true`, the borderRadius of button that are direct children will be altered
+   * to look flushed together
+   */
+  isAttached?: boolean
+  /**
+   * If `true`, all wrapped button will be disabled
+   */
+  isDisabled?: boolean
+  /**
+   * The spacing between the buttons
+   * @default '0.5rem'
+   * @type SystemProps["marginRight"]
+   */
+  spacing?: SystemCSSProperties['marginRight']
+}
+
+const props = {
+  isAttached: Boolean as PropType<ButtonGroupProps['isAttached']>,
+  isDisabled: Boolean as PropType<ButtonGroupProps['isDisabled']>,
+  spacing: [String, Number, Array] as PropType<ButtonGroupProps['spacing']>,
+  variant: {
+    type: String as PropType<string>,
+    default: 'solid',
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'sm',
+  },
+  colorScheme: String as PropType<string>,
+  styleConfig: String as PropType<ComponentThemeConfig>,
+}
+
+interface ButtonGroupContext extends ThemingProps {
+  isDisabled?: boolean
+}
+
+const [ButtonGroupProvider, useButtonGroup] = createContext<ButtonGroupContext>(
+  {
+    strict: false,
+    name: 'ButtonGroupContext',
+  }
+)
+
+export const CButtonGroup = defineComponent({
+  name: 'CButtonGroup',
+  props,
+  setup(props, { slots }) {
+    ButtonGroupProvider({
+      size: props.size,
+      colorScheme: props.colorScheme,
+      variant: props.variant,
+      isDisabled: props.isDisabled,
+    })
+
+    const styles = computed(() => {
+      let groupStyles: SystemStyleObject = {
+        display: 'inline-flex',
+      }
+
+      if (props.isAttached) {
+        groupStyles = {
+          ...groupStyles,
+          '> *:first-of-type:not(:last-of-type)': { borderRightRadius: 0 },
+          '> *:not(:first-of-type):not(:last-of-type)': { borderRadius: 0 },
+          '> *:not(:first-of-type):last-of-type': { borderLeftRadius: 0 },
+        }
+      } else {
+        groupStyles = {
+          ...groupStyles,
+          '& > *:not(style) ~ *:not(style)': { marginLeft: props.spacing },
+        }
+      }
+
+      return groupStyles
+    })
+
+    return () => h(chakra.div)
+  },
+})

packages/c-button/src/button.ts

@@ -9,19 +9,10 @@ import {
   SystemCSSProperties,
   SystemStyleObject,
 } from '@chakra-ui/styled-system'
-import { Colors } from '@chakra-ui/vue-theme/dist/types/foundations/colors'
 import { ComponentThemeConfig } from '@chakra-ui/vue-theme'
 import { dataAttr } from '@chakra-ui/vue-utils'
 
 type ButtonTypes = 'button' | 'reset' | 'submit'
-export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg'
-export type ButtonVariants =
-  | 'subtle'
-  | 'solid'
-  | 'outline'
-  | 'ghost'
-  | 'link'
-  | string
 
 const props = {
   as: {
@@ -36,13 +27,13 @@ const props = {
   type: String as PropType<ButtonTypes>,
   leftIcon: String as PropType<string>,
   rightIcon: String as PropType<string>,
-  colorScheme: String as PropType<keyof Colors>,
+  colorScheme: String as PropType<string>,
   variant: {
-    type: String as PropType<ButtonVariants>,
+    type: String as PropType<string>,
     default: 'solid',
   },
   size: {
-    type: String as PropType<ButtonSizes>,
+    type: String as PropType<string>,
     default: 'md',
   },
   styleConfig: String as PropType<ComponentThemeConfig>,

packages/system/src/chakra.ts

@@ -1,10 +1,46 @@
-import { DefineComponent, defineComponent, h } from 'vue'
-import { css } from '@chakra-ui/styled-system'
-import theme from '@chakra-ui/vue-theme'
-import { cx } from '@chakra-ui/vue-utils'
-import { css as _css } from '@emotion/css'
+import { computed, DefineComponent, defineComponent, h, PropType } from 'vue'
+import {
+  css,
+  ResponsiveValue,
+  SystemProps,
+  SystemStyleObject,
+} from '@chakra-ui/styled-system'
+import { cx, memoizedGet as get, objectAssign } from '@chakra-ui/vue-utils'
+import { css as _css, CSSObject } from '@emotion/css'
 import { extractStyleAttrs } from './system.attrs'
 import { domElements, DOMElements } from './system.utils'
+import { useTheme } from './composables/use-chakra'
+
+interface StyleResolverProps extends SystemProps {
+  __css?: SystemStyleObject
+  sx?: SystemStyleObject
+  css?: CSSObject
+  noOfLines?: ResponsiveValue<number>
+  isTruncated?: boolean
+  layerStyle?: string
+  textStyle?: string
+  apply?: ResponsiveValue<string>
+  componentName?: String
+}
+
+interface ChakraFactoryOptions extends StyleResolverProps {
+  label?: string
+  baseStyle?: SystemStyleObject
+}
+
+const chakraProps = {
+  __css: Object as PropType<StyleResolverProps['__css']>,
+  sx: Object as PropType<StyleResolverProps['sx']>,
+  css: Object as PropType<StyleResolverProps['css']>,
+  noOfLines: Number as PropType<StyleResolverProps['noOfLines']>,
+  baseStyle: Object as PropType<ChakraFactoryOptions['baseStyle']>,
+  isTruncated: Boolean as PropType<StyleResolverProps['isTruncated']>,
+  layerStyle: String as PropType<StyleResolverProps['layerStyle']>,
+  textStyle: String as PropType<StyleResolverProps['textStyle']>,
+  apply: String as PropType<StyleResolverProps['apply']>,
+}
+
+export type ChakraBaseComponentProps = typeof chakraProps
 
 /**
  * Creates a Chakra UI Vue component
@@ -14,24 +50,70 @@ import { domElements, DOMElements } from './system.utils'
 // @ts-expect-error
 export const chakra: IChakraFactory = (
   tag: DOMElements,
-  componentName?: string
+  options?: ChakraFactoryOptions
 ): DefineComponent => {
   return defineComponent({
     inheritAttrs: false,
+    props: chakraProps,
     setup(props, { slots, attrs }) {
+      const theme = useTheme()
       // Separate component style attributes from raw HTML attributes
+
+      const layerStyle = computed(() => props.layerStyle || options?.layerStyle)
+      const textStyle = computed(() => props.textStyle || options?.textStyle)
+      const baseStyle = computed(() => props.baseStyle || options?.baseStyle)
+      const noOfLines = computed(() => props.noOfLines || options?.noOfLines)
+      const isTruncated = computed(
+        () => props.isTruncated || options?.isTruncated
+      )
+      const __css = computed(() => props.__css || options?.__css)
+      const sx = computed(() => props.sx || options?.sx)
+      const apply = computed(() => props.apply || options?.apply)
+
       const { class: inheritedClass, ...rest } = attrs
-      const { styles, attrs: _attrs } = extractStyleAttrs(rest)
-      const className = _css(css(styles)({ theme }))
-      const _componentName = componentName ? `chakra-${componentName}` : ''
+      const _layerStyle = get(theme, `layerStyles.${layerStyle.value}`, {})
+      const _textStyle = get(theme, `textStyles.${textStyle.value}`, {})
+      const { styles, attrs: elementAttributes } = extractStyleAttrs(rest)
+
+      let truncateStyle: any = {}
+      if (noOfLines.value != null) {
+        truncateStyle = {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: noOfLines.value,
+        }
+      } else if (isTruncated.value) {
+        truncateStyle = {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }
+      }
+
+      const finalStyles = objectAssign(
+        {},
+        __css.value,
+        baseStyle.value,
+        { apply: apply.value },
+        _layerStyle,
+        _textStyle,
+        truncateStyle,
+        styles,
+        sx.value
+      )
+
+      const className = _css(css(finalStyles)({ theme }))
+      const _componentName = options?.label ? `chakra-${options?.label}` : ''
 
       return () =>
         h(
           tag,
           {
             class: cx(inheritedClass, _componentName, className),
             ...props,
-            ..._attrs,
+            ...elementAttributes,
           },
           slots
         )

packages/utils/package.json

@@ -13,7 +13,11 @@
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
     "@types/lodash.mergewith": "4.6.6",

playground/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Chakra UI Vue Next - Components playground</title>
 </head>