feat: add config provider

components/button/button-helper.tsx

@@ -0,0 +1,67 @@
+const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
+export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
+
+export function isUnBorderedButtonType(type?: ButtonType) {
+  return type === 'text' || type === 'link'
+}
+//
+// function splitCNCharsBySpace(child: VNodeChild , needInserted: boolean) {
+//     if (child === null || child === undefined) {
+//         return;
+//     }
+//
+//     const SPACE = needInserted ? ' ' : '';
+//
+//     if (
+//         typeof child !== 'string' &&
+//         typeof child !== 'number' &&
+//         isString((child as VNode)) &&
+//         isTwoCNChar((child as VNode).children)
+//     ) {
+//         return cloneVNode(child as , {
+//             children: child.props.children.split('').join(SPACE),
+//         });
+//     }
+//
+//     if (typeof child === 'string') {
+//         return isTwoCNChar(child) ? <span>{child.split('').join(SPACE)}</span> : <span>{child}</span>;
+//     }
+//
+//     if (isFragment(child)) {
+//         return <span>{child}</span>;
+//     }
+//
+//     return child;
+// }
+//
+// export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
+//     let isPrevChildPure: boolean = false;
+//     const childList: React.ReactNode[] = [];
+//
+//     React.Children.forEach(children, (child) => {
+//         const type = typeof child;
+//         const isCurrentChildPure = type === 'string' || type === 'number';
+//         if (isPrevChildPure && isCurrentChildPure) {
+//             const lastIndex = childList.length - 1;
+//             const lastChild = childList[lastIndex];
+//             childList[lastIndex] = `${lastChild}${child}`;
+//         } else {
+//             childList.push(child);
+//         }
+//
+//         isPrevChildPure = isCurrentChildPure;
+//     });
+//
+//     return React.Children.map(childList, (child) =>
+//         splitCNCharsBySpace(child as React.ReactElement | string | number, needInserted),
+//     );
+// }
+
+const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const
+export type ButtonType = (typeof ButtonTypes)[number]
+
+const ButtonShapes = ['default', 'circle', 'round'] as const
+export type ButtonShape = (typeof ButtonShapes)[number]
+
+const ButtonHTMLTypes = ['submit', 'button', 'reset'] as const
+export type ButtonHTMLType = (typeof ButtonHTMLTypes)[number]

components/button/button.tsx

@@ -2,18 +2,14 @@ import { computed, defineComponent } from 'vue'
 import { useProviderConfigState } from '../config-provider/context'
 import Wave from '../_util/wave'
 import useStyle from './style'
+import { buttonProps } from './interface'
 
 const Button = defineComponent({
   name: 'AButton',
   inheritAttrs: false,
+  __ANT_BUTTON: true,
   props: {
-    prefixCls: {
-      type: String
-    },
-    type: {
-      type: String,
-      default: 'default'
-    }
+    ...buttonProps
   },
   setup(props, { slots, attrs }) {
     const { getPrefixCls } = useProviderConfigState()

components/button/interface.ts

@@ -0,0 +1,21 @@
+import { booleanType, someType, stringType, vNodeType } from '@v-c/utils'
+import type { ExtractPropTypes } from 'vue'
+import type { SizeType } from '../config-provider/context'
+import type { ButtonHTMLType, ButtonShape, ButtonType } from './button-helper'
+
+export const buttonProps = {
+  type: stringType<ButtonType>('default'),
+  icon: vNodeType(),
+  shape: stringType<ButtonShape>(),
+  size: someType<SizeType | 'default'>([String], 'default'),
+  disabled: booleanType(),
+  loading: someType<boolean | { delay?: number }>(),
+  prefixCls: stringType(),
+  rootClassName: stringType(),
+  ghost: booleanType(),
+  danger: booleanType(),
+  block: booleanType(),
+  htmlType: stringType<ButtonHTMLType>('button')
+}
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>

components/config-provider/context.ts

@@ -1,6 +1,36 @@
-import { createInjectionState } from '@v-c/utils'
+import { booleanType, createInjectionState, functionType, objectType, someType, stringType } from '@v-c/utils'
+import type { ExtractPropTypes } from 'vue'
 import { computed } from 'vue'
+import type { DerivativeFunc } from '@antd-tiny-vue/cssinjs'
+import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../theme/interface'
+import type { RenderEmptyHandler } from './default-render-empty'
 
+export type SizeType = 'small' | 'middle' | 'large' | undefined
+
+export interface Theme {
+  primaryColor?: string
+  infoColor?: string
+  successColor?: string
+  processingColor?: string
+  errorColor?: string
+  warningColor?: string
+}
+
+export interface CSPConfig {
+  nonce?: string
+}
+
+export type DirectionType = 'ltr' | 'rtl' | undefined
+
+export type MappingAlgorithm = DerivativeFunc<SeedToken, MapToken>
+
+export interface ThemeConfig {
+  token?: Partial<AliasToken>
+  components?: OverrideToken
+  algorithm?: MappingAlgorithm | MappingAlgorithm[]
+  hashed?: boolean
+  inherit?: boolean
+}
 export const defaultIconPrefixCls = 'anticon'
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
@@ -8,6 +38,45 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
 
   return suffixCls ? `ant-${suffixCls}` : 'ant'
 }
+
+export const configConsumerProps = {
+  getTargetContainer: functionType<() => HTMLElement>(),
+  getPopupContainer: functionType<(triggerNode?: HTMLElement) => HTMLElement>(),
+  rootPrefixCls: stringType(),
+  iconPrefixCls: stringType(defaultIconPrefixCls),
+  getPrefixCls: functionType(defaultGetPrefixCls),
+  renderEmpty: functionType<RenderEmptyHandler>(),
+  csp: objectType<CSPConfig>(),
+  autoInsertSpaceInButton: booleanType(),
+  input: objectType<{
+    autoComplete?: string
+  }>(),
+  pagination: objectType<{
+    showSizeChanger?: boolean
+  }>(),
+  locale: objectType(),
+  pageHeader: objectType<{
+    ghost: boolean
+  }>(),
+  direction: someType<DirectionType>([String]),
+  space: objectType<{
+    size?: SizeType | number
+  }>(),
+  virtual: booleanType(),
+  dropdownMatchSelectWidth: booleanType(),
+  form: objectType<{
+    // requiredMark?: RequiredMark
+    colon?: boolean
+    // scrollToFirstError?: Options | boolean
+  }>(),
+  theme: objectType<ThemeConfig>(),
+  select: objectType<{
+    showSearch?: boolean
+  }>()
+}
+
+export type ConfigConsumerProps = ExtractPropTypes<typeof configConsumerProps>
+
 const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(() => {
   const getPrefixCls = defaultGetPrefixCls
   const iconPrefixCls = computed(() => defaultIconPrefixCls)

components/config-provider/css-variables.ts

@@ -0,0 +1,94 @@
+/* eslint-disable import/prefer-default-export, prefer-destructuring */
+
+import { generate } from '@ant-design/colors'
+import { TinyColor } from '@ctrl/tinycolor'
+import { canUseDom, updateCSS, warning } from '@v-c/utils'
+import type { Theme } from './context'
+
+const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`
+
+export function getStyle(globalPrefixCls: string, theme: Theme) {
+  const variables: Record<string, string> = {}
+
+  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
+    let clone = color.clone()
+    clone = updater?.(clone) || clone
+    return clone.toRgbString()
+  }
+
+  const fillColor = (colorVal: string, type: string) => {
+    const baseColor = new TinyColor(colorVal)
+    const colorPalettes = generate(baseColor.toRgbString())
+
+    variables[`${type}-color`] = formatColor(baseColor)
+    variables[`${type}-color-disabled`] = colorPalettes[1]
+    variables[`${type}-color-hover`] = colorPalettes[4]
+    variables[`${type}-color-active`] = colorPalettes[6]
+    variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString()
+    variables[`${type}-color-deprecated-bg`] = colorPalettes[0]
+    variables[`${type}-color-deprecated-border`] = colorPalettes[2]
+  }
+
+  // ================ Primary Color ================
+  if (theme.primaryColor) {
+    fillColor(theme.primaryColor, 'primary')
+
+    const primaryColor = new TinyColor(theme.primaryColor)
+    const primaryColors = generate(primaryColor.toRgbString())
+
+    // Legacy - We should use semantic naming standard
+    primaryColors.forEach((color, index) => {
+      variables[`primary-${index + 1}`] = color
+    })
+    // Deprecated
+    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35))
+    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20))
+    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20))
+    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50))
+    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c => c.setAlpha(c.getAlpha() * 0.12))
+
+    const primaryActiveColor = new TinyColor(primaryColors[0])
+    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c => c.setAlpha(c.getAlpha() * 0.3))
+    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c => c.darken(2))
+  }
+
+  // ================ Success Color ================
+  if (theme.successColor) {
+    fillColor(theme.successColor, 'success')
+  }
+
+  // ================ Warning Color ================
+  if (theme.warningColor) {
+    fillColor(theme.warningColor, 'warning')
+  }
+
+  // ================= Error Color =================
+  if (theme.errorColor) {
+    fillColor(theme.errorColor, 'error')
+  }
+
+  // ================= Info Color ==================
+  if (theme.infoColor) {
+    fillColor(theme.infoColor, 'info')
+  }
+
+  // Convert to css variables
+  const cssList = Object.keys(variables).map(key => `--${globalPrefixCls}-${key}: ${variables[key]};`)
+
+  return `
+  :root {
+    ${cssList.join('\n')}
+  }
+  `.trim()
+}
+
+export function registerTheme(globalPrefixCls: string, theme: Theme) {
+  const style = getStyle(globalPrefixCls, theme)
+
+  if (canUseDom()) {
+    updateCSS(style, `${dynamicStyleMark}-dynamic-theme`)
+  } else {
+    // @ts-expect-error this is ssr
+    warning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.')
+  }
+}

components/config-provider/default-render-empty.tsx

@@ -0,0 +1,3 @@
+import type { VNodeChild } from 'vue'
+
+export type RenderEmptyHandler = (componentName?: string) => VNodeChild

components/config-provider/index.tsx

@@ -0,0 +1,56 @@
+import { booleanType, someType, stringType } from '@v-c/utils'
+import type { ExtractPropTypes } from 'vue'
+import type { SizeType, Theme } from './context'
+import { configConsumerProps, defaultIconPrefixCls } from './context'
+import { registerTheme } from './css-variables'
+
+export const configProviderProps = {
+  ...configConsumerProps,
+  prefixCls: stringType(),
+  componentSize: someType<SizeType>([String]),
+  componentDisabled: booleanType()
+}
+
+export type ConfigProviderProps = Partial<ExtractPropTypes<typeof configProviderProps>>
+
+export const defaultPrefixCls = 'ant'
+let globalPrefixCls: string
+let globalIconPrefixCls: string
+
+function getGlobalPrefixCls() {
+  return globalPrefixCls || defaultPrefixCls
+}
+
+function getGlobalIconPrefixCls() {
+  return globalIconPrefixCls || defaultIconPrefixCls
+}
+
+export const setGlobalConfig = ({ prefixCls, iconPrefixCls, theme }: Pick<ConfigProviderProps, 'prefixCls' | 'iconPrefixCls'> & { theme?: Theme }) => {
+  if (prefixCls !== undefined) {
+    globalPrefixCls = prefixCls
+  }
+  if (iconPrefixCls !== undefined) {
+    globalIconPrefixCls = iconPrefixCls
+  }
+
+  if (theme) {
+    registerTheme(getGlobalPrefixCls(), theme)
+  }
+}
+
+export const globalConfig = () => ({
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) return customizePrefixCls
+    return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls()
+  },
+  getIconPrefixCls: getGlobalIconPrefixCls,
+  getRootPrefixCls: () => {
+    // If Global prefixCls provided, use this
+    if (globalPrefixCls) {
+      return globalPrefixCls
+    }
+
+    // Fallback to default prefixCls
+    return getGlobalPrefixCls()
+  }
+})

package.json

@@ -17,24 +17,24 @@
     "@ant-design/colors": "^7.0.0",
     "@antd-tiny-vue/cssinjs": "^0.0.4",
     "@ctrl/tinycolor": "^3.6.0",
-    "@v-c/utils": "^0.0.12",
+    "@v-c/utils": "^0.0.19",
     "@vueuse/core": "^9.13.0",
-    "vue": "^3.2.0"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.3",
-    "@commitlint/config-conventional": "^17.4.3",
+    "@commitlint/cli": "^17.5.0",
+    "@commitlint/config-conventional": "^17.4.4",
     "@mistjs/eslint-config-vue-jsx": "^0.0.3",
     "@mistjs/tsconfig": "^1.0.0",
     "@mistjs/tsconfig-vue": "^0.0.3",
-    "@types/node": "^18.13.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "eslint": "^8.34.0",
+    "@types/node": "^18.15.9",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "eslint": "^8.36.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.2",
-    "prettier": "^2.8.4",
+    "lint-staged": "^13.2.0",
+    "prettier": "^2.8.7",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
+    "vite": "^4.2.1",
     "vite-plugin-vitepress-demo": "2.0.0-alpha.8",
     "vitepress": "1.0.0-alpha.47",
     "vitest": "^0.28.5"