fix: fix provide inject error

components/_util/hooks/disabled.ts

@@ -1,8 +0,0 @@
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import { useProviderConfigState } from '../../config-provider/context'
-
-export const useDisabled = (props: Record<string, any>) => {
-  const { componentDisabled } = useProviderConfigState()
-  return computed(() => props.disabled || componentDisabled.value) as ComputedRef<boolean>
-}

components/_util/hooks/size.ts

@@ -1,9 +0,0 @@
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import type { SizeType } from '../../config-provider/context'
-import { useProviderConfigState } from '../../config-provider/context'
-
-export const useSize = (props: Record<string, any>) => {
-  const { componentSize } = useProviderConfigState()
-  return computed(() => props.size || componentSize.value) as ComputedRef<SizeType>
-}

components/_util/warning.ts

@@ -1,21 +0,0 @@
-import { warning as rcWarning, resetWarned } from '@v-c/utils'
-
-export { resetWarned }
-export function noop() {}
-
-type Warning = (valid: boolean, component: string, message?: string) => void
-
-// eslint-disable-next-line import/no-mutable-exports
-let warning: Warning = noop
-if (process.env.NODE_ENV !== 'production') {
-  warning = (valid, component, message) => {
-    rcWarning(valid, `[antd: ${component}] ${message}`)
-
-    // StrictMode will inject console which will not throw warning in React 17.
-    if (process.env.NODE_ENV === 'test') {
-      resetWarned()
-    }
-  }
-}
-
-export default warning

components/_util/wave/index.tsx

@@ -1,59 +1,10 @@
-import type { VNode } from 'vue'
+import { defineComponent } from 'vue'
-import { cloneVNode, computed, defineComponent, shallowRef } from 'vue'
-import { booleanType, classNames, filterEmpty, isVisible } from '@v-c/utils'
-import { useEventListener } from '@vueuse/core'
-import { useProviderConfigState } from '../../config-provider/context'
-import useStyle from './style'
-import useWave from './use-wave'
 
 const Wave = defineComponent({
   name: 'Wave',
-  props: {
+  inheritAttrs: false,
-    disabled: booleanType()
+  setup() {
-  },
+    return () => {}
-  setup(props, { slots }) {
-    const { getPrefixCls } = useProviderConfigState()
-    const containerRef = shallowRef()
-
-    // ============================== Style ===============================
-    const prefixCls = computed(() => getPrefixCls('wave'))
-    const [, hashId] = useStyle(prefixCls)
-    const showWave = useWave(
-      containerRef,
-      computed(() => classNames(prefixCls.value, hashId.value))
-    )
-
-    const onClick = (e: MouseEvent) => {
-      const node = containerRef.value
-      const { disabled } = props
-      if (!node || node.nodeType !== 1 || disabled) {
-        return
-      }
-      // Fix radio button click twice
-      if (
-        (e.target as HTMLElement).tagName === 'INPUT' ||
-        !isVisible(e.target as HTMLElement) ||
-        // No need wave
-        !node.getAttribute ||
-        node.getAttribute('disabled') ||
-        (node as HTMLInputElement).disabled ||
-        node.className.includes('disabled') ||
-        node.className.includes('-leave')
-      ) {
-        return
-      }
-
-      showWave()
-    }
-
-    useEventListener(containerRef, 'click', onClick, true)
-
-    return () => {
-      const children = slots.default?.()
-      const child = filterEmpty(children)[0]
-      if (!child) return null
-      return cloneVNode(child as VNode, { ref: containerRef })
-    }
   }
 })
 

components/_util/wave/use-wave.ts

@@ -1,11 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import showWaveEffect from './wave-effect'
-
-export default function useWave(nodeRef: Ref<HTMLElement>, className: ComputedRef<string>): VoidFunction {
-  function showWave() {
-    // const node = nodeRef.va!
-    showWaveEffect(nodeRef, className)
-  }
-
-  return showWave
-}

components/_util/wave/wave-effect.tsx

@@ -1,108 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import { unrefElement, useResizeObserver } from '@vueuse/core'
-import { computed, defineComponent, onMounted, render, shallowRef, toRef } from 'vue'
-import { classNames, delayTimer, objectType, safeNextick, useState } from '@v-c/utils'
-import { getTargetWaveColor } from './util'
-function validateNum(value: number) {
-  return Number.isNaN(value) ? 0 : value
-}
-export const WaveEffect = defineComponent({
-  name: 'WaveEffect',
-  props: {
-    target: objectType<HTMLElement>()
-  },
-  setup(props, { attrs }) {
-    const divRef = shallowRef<HTMLDivElement | undefined>(undefined)
-
-    const [color, setWaveColor] = useState<string | null>(null)
-    const [borderRadius, setBorderRadius] = useState<number[]>([])
-    const [left, setLeft] = useState(0)
-    const [top, setTop] = useState(0)
-    const [width, setWidth] = useState(0)
-    const [height, setHeight] = useState(0)
-    const [enabled, setEnabled] = useState(false)
-    const [active, setActive] = useState(false)
-    const waveStyle = computed(() => {
-      const style: Record<string, any> = {
-        left: `${left.value}px`,
-        top: `${top.value}px`,
-        width: `${width.value}px`,
-        height: `${height.value}px`,
-        borderRadius: borderRadius.value.map(radius => `${radius}px`).join(' ')
-      }
-      if (color.value) {
-        style['--wave-color'] = color.value
-      }
-      return style
-    })
-    function syncPos() {
-      const { target } = props
-      const nodeStyle = getComputedStyle(target)
-
-      // Get wave color from target
-      setWaveColor(getTargetWaveColor(target))
-
-      const isStatic = nodeStyle.position === 'static'
-
-      // Rect
-      const { borderLeftWidth, borderTopWidth } = nodeStyle
-      setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)))
-      setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)))
-      setWidth(target.offsetWidth)
-      setHeight(target.offsetHeight)
-
-      // Get border radius
-      const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } = nodeStyle
-
-      setBorderRadius([borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius].map(radius => validateNum(parseFloat(radius))))
-    }
-    onMounted(async () => {
-      syncPos()
-      setEnabled(true)
-      await safeNextick()
-      setActive(true)
-      await delayTimer(5000)
-      const holder = divRef.value?.parentElement
-      holder!.parentElement?.removeChild(holder!)
-    })
-    const motionClassName = computed(() =>
-      classNames({
-        'wave-motion-appear': enabled.value,
-        'wave-motion': true
-      })
-    )
-    const motionClassNameActive = computed(() => ({
-      'wave-motion-appear-active': active.value
-    }))
-    useResizeObserver(toRef(props, 'target'), syncPos)
-
-    return () => {
-      if (!enabled.value) return null
-      return (
-        <div
-          ref={divRef}
-          class={[attrs.class, motionClassName.value, motionClassNameActive.value]}
-          style={waveStyle.value}
-        />
-      )
-    }
-  }
-})
-
-export default function showWaveEffect(nodeRef: Ref<HTMLElement>, className: ComputedRef<string>) {
-  const node = unrefElement(nodeRef)
-  // Create holder
-  const holder = document.createElement('div')
-  holder.style.position = 'absolute'
-  holder.style.left = `0px`
-  holder.style.top = `0px`
-  node?.insertBefore(holder, node?.firstChild)
-
-  render(
-    <WaveEffect
-      target={node}
-      class={className.value}
-    />,
-    holder
-  )
-}

components/button/button-helper.tsx

@@ -1,67 +0,0 @@
-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

@@ -1,186 +1,29 @@
-import { computed, defineComponent, onMounted, shallowRef } from 'vue'
+import { computed, defineComponent } from 'vue'
-import { tryOnBeforeUnmount } from '@vueuse/core'
-import { classNames, filterEmpty, getSlotsProps, runEvent, useState } from '@v-c/utils'
 import { useProviderConfigState } from '../config-provider/context'
-import warning from '../_util/warning'
-import Wave from '../_util/wave'
-import { useSize } from '../_util/hooks/size'
-import { useDisabled } from '../_util/hooks/disabled'
-import { useCompactItemContext } from '../space/compact'
 import useStyle from './style'
-import type { ButtonProps, LoadingConfigType } from './interface'
-import { buttonProps } from './interface'
-import { isTwoCNChar, isUnBorderedButtonType } from './button-helper'
-type Loading = number | boolean
-
-function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
-  if (typeof loading === 'object' && loading) {
-    const delay = loading?.delay
-    const isDelay = !Number.isNaN(delay) && typeof delay === 'number'
-    return {
-      loading: false,
-      delay: isDelay ? delay : 0
-    }
-  }
-
-  return {
-    loading: !!loading,
-    delay: 0
-  }
-}
-
 const Button = defineComponent({
   name: 'AButton',
   inheritAttrs: false,
-  __ANT_BUTTON: true,
   props: {
-    ...buttonProps
+    prefixCls: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default'
+    }
   },
   setup(props, { slots, attrs }) {
-    const { getPrefixCls, autoInsertSpaceInButton, direction } = useProviderConfigState()
+    const { getPrefixCls } = useProviderConfigState()
     const prefixCls = computed(() => getPrefixCls('btn', props.prefixCls))
     const [wrapSSR, hashId] = useStyle(prefixCls)
-    const size = useSize(props)
-    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
-    const sizeCls = computed(() => {
-      const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined }
-      const sizeFullname = compactSize?.value || size.value
-      return sizeClassNameMap[sizeFullname!]
-    })
-    const disabled = useDisabled(props)
-    const buttonRef = shallowRef<HTMLButtonElement | null>(null)
-
-    const loadingOrDelay = computed(() => {
-      return getLoadingConfig(props.loading)
-    })
-
-    const [innerLoading, setLoading] = useState<Loading>(loadingOrDelay.value.loading)
-    const [hasTwoCNChar, setHasTwoCNChar] = useState(false)
-
-    let delayTimer: number | null = null
-
-    onMounted(() => {
-      if (loadingOrDelay.value.delay > 0) {
-        delayTimer = window.setTimeout(() => {
-          delayTimer = null
-          setLoading(true)
-        }, loadingOrDelay.value.delay)
-      } else {
-        setLoading(loadingOrDelay.value.loading)
-      }
-      // fixTwoCNChar()
-    })
-
-    function cleanupTimer() {
-      if (delayTimer) {
-        window.clearTimeout(delayTimer)
-        delayTimer = null
-      }
-    }
-    tryOnBeforeUnmount(() => {
-      cleanupTimer()
-    })
-
-    const handleClick = (e: MouseEvent) => {
-      // FIXME: https://github.com/ant-design/ant-design/issues/30207
-      if (innerLoading.value || disabled.value) {
-        e.preventDefault()
-        return
-      }
-      runEvent(props, 'onClick', e)
-    }
-
-    const showError = () => {
-      const { ghost, type } = props
-
-      const icon = getSlotsProps(slots, props, 'icon')
-
-      warning(!(typeof icon === 'string' && icon.length > 2), 'Button', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`)
-
-      warning(!(ghost && isUnBorderedButtonType(type)), 'Button', "`link` or `text` button can't be a `ghost` button.")
-    }
-
     return () => {
-      const { shape, rootClassName, ghost, type, block, danger } = props
+      const cls = {
-      const icon = getSlotsProps(slots, props, 'icon')
+        [prefixCls.value]: true,
-      const children = filterEmpty(slots.default?.())
+        [`${prefixCls.value}-${props.type}`]: !!props.type,
-      const isNeedInserted = () => {
+        [hashId.value]: true
-        return children.length === 1 && !slots.icon && isUnBorderedButtonType(props.type)
       }
-
+      return wrapSSR(<button class={[cls, attrs.class]}>{slots.default?.()}</button>)
-      const fixTwoCNChar = () => {
-        // FIXME: for HOC usage like <FormatMessage />
-        if (!buttonRef.value || autoInsertSpaceInButton.value === false) {
-          return
-        }
-        const buttonText = buttonRef.value.textContent
-        if (isNeedInserted() && isTwoCNChar(buttonText as string)) {
-          if (!hasTwoCNChar) {
-            setHasTwoCNChar(true)
-          }
-        } else if (hasTwoCNChar) {
-          setHasTwoCNChar(false)
-        }
-      }
-      fixTwoCNChar()
-      showError()
-      const iconType = innerLoading.value ? 'loading' : icon
-
-      const autoInsertSpace = autoInsertSpaceInButton.value !== false
-
-      const hrefAndDisabled = attrs.href !== undefined && disabled.value
-
-      const classes = classNames(
-        prefixCls.value,
-        hashId.value,
-        {
-          [`${prefixCls.value}-${shape}`]: shape !== 'default' && shape,
-          [`${prefixCls.value}-${type}`]: type,
-          [`${prefixCls.value}-${sizeCls.value}`]: sizeCls.value,
-          [`${prefixCls.value}-icon-only`]: !children && children !== 0 && !!iconType,
-          [`${prefixCls.value}-background-ghost`]: ghost && !isUnBorderedButtonType(type),
-          [`${prefixCls.value}-loading`]: innerLoading.value,
-          [`${prefixCls.value}-two-chinese-chars`]: hasTwoCNChar.value && autoInsertSpace && !innerLoading.value,
-          [`${prefixCls.value}-block`]: block,
-          [`${prefixCls.value}-dangerous`]: !!danger,
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-          [`${prefixCls.value}-disabled`]: hrefAndDisabled
-        },
-        attrs.class,
-        compactItemClassnames.value,
-        rootClassName
-      )
-      const iconNode = icon && !innerLoading.value ? icon?.() : <>L</>
-
-      if (attrs.href !== undefined) {
-        return wrapSSR(
-          <a
-            {...attrs}
-            {...props}
-            class={classes}
-            onClick={handleClick}
-            ref={buttonRef}
-          >
-            {iconNode}
-            {children}
-          </a>
-        )
-      }
-      let buttonNode = (
-        <button
-          {...attrs}
-          onClick={handleClick}
-          class={classes}
-        >
-          {children}
-        </button>
-      )
-
-      if (!isUnBorderedButtonType(type)) {
-        buttonNode = <Wave>{buttonNode}</Wave>
-      }
-
-      return wrapSSR(buttonNode)
     }
   }
 })

components/button/demos/basic.vue

@@ -1,13 +0,0 @@
-<docs>
----
-title: Basic
----
-
-这是基础按钮
-</docs>
-
-<script lang="ts" setup></script>
-
-<template>
-  <div></div>
-</template>

components/button/index.md

@@ -1 +0,0 @@
-# Button

components/button/index.zh-CN.md

@@ -1 +0,0 @@
-# Button 按钮

components/button/interface.ts

@@ -1,25 +0,0 @@
-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 interface LoadingConfigType {
-  loading: boolean
-  delay: number
-}
-
-export const buttonProps = {
-  type: stringType<ButtonType>('default'),
-  icon: vNodeType(),
-  shape: stringType<ButtonShape>(),
-  size: someType<SizeType | 'default'>([String], 'default'),
-  disabled: booleanType(),
-  loading: someType<boolean | LoadingConfigType>(),
-  prefixCls: stringType(),
-  rootClassName: stringType(),
-  ghost: booleanType(),
-  danger: booleanType(),
-  block: booleanType(),
-  htmlType: stringType<ButtonHTMLType>('button')
-}
-
-export type ButtonProps = ExtractPropTypes<typeof buttonProps>

components/button/style/index.ts

@@ -497,7 +497,7 @@ export default genComponentStyleHook('Button', token => {
     genGroupStyle(buttonToken),
 
     // Space Compact
-    genCompactItemStyle(token, { focus: false }),
+    genCompactItemStyle(token),
     genCompactItemVerticalStyle(token)
   ]
 })

components/components.ts

@@ -1,2 +1 @@
 export { default as Button } from './button'
-export { default as ConfigProvider } from './config-provider'

components/config-provider/context.ts

@@ -1,37 +1,5 @@
-import { booleanType, createInjectionState, functionType, objectType, someType, stringType } from '@v-c/utils'
+import { computed, inject, provide } from 'vue'
-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'
-import type { ConfigProviderProps } from './index'
 
-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) => {
@@ -40,82 +8,26 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
   return suffixCls ? `ant-${suffixCls}` : 'ant'
 }
 
-export const configConsumerProps = {
+export const ConfigProviderContext = Symbol('ConfigProviderContext')
-  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>
+export const defaultConfigProviderState = () => {
-
+  const getPrefixCls = defaultGetPrefixCls
-const configState = (props: ConfigProviderProps) => {
+  const iconPrefixCls = computed(() => defaultIconPrefixCls)
-  const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
-    const { prefixCls, getPrefixCls } = props
-    if (customizePrefixCls) return customizePrefixCls
-    const mergedPrefixCls = prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
-    return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
-  }
-  const iconPrefixCls = computed(() => props?.iconPrefixCls ?? defaultIconPrefixCls)
-  const shouldWrapSSR = computed(() => iconPrefixCls.value !== defaultIconPrefixCls)
-  const csp = computed(() => props?.csp)
-  const componentSize = computed(() => props?.componentSize)
-  const componentDisabled = computed(() => props?.componentDisabled)
-  const autoInsertSpaceInButton = computed(() => props?.autoInsertSpaceInButton)
-  const direction = computed(() => props?.direction)
   return {
     getPrefixCls,
-    iconPrefixCls,
+    iconPrefixCls
-    shouldWrapSSR,
+  }
-    csp,
+}
-    componentSize,
+
-    componentDisabled,
+const useProviderConfigProvide = () => {
-    autoInsertSpaceInButton,
+  const defaultState = defaultConfigProviderState()
-    direction
+  provide(ConfigProviderContext, defaultState)
+  return {
+    ...defaultState
   }
 }
-const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(configState)
 
 export { useProviderConfigProvide }
-export const useProviderConfigState = (): ReturnType<typeof configState> => {
+export const useProviderConfigState = () => {
-  return (
+  return inject(ConfigProviderContext, defaultConfigProviderState())
-    useProviderConfigInject() ??
-    ({
-      getPrefixCls: defaultGetPrefixCls,
-      iconPrefixCls: computed(() => defaultIconPrefixCls),
-      componentSize: computed(() => undefined),
-      componentDisabled: computed(() => false),
-      direction: computed(() => undefined),
-      autoInsertSpaceInButton: computed(() => undefined)
-    } as any)
-  )
 }

components/config-provider/css-variables.ts

@@ -1,94 +0,0 @@
-/* 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

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

components/config-provider/hooks/config.ts

@@ -1,9 +0,0 @@
-import { useProviderConfigState } from '../context'
-
-export const useConfig = () => {
-  const { componentDisabled, componentSize } = useProviderConfigState()
-  return {
-    componentDisabled,
-    componentSize
-  }
-}

components/config-provider/index.tsx

@@ -1,162 +0,0 @@
-import { booleanType, objectType, someType, stringType } from '@v-c/utils'
-import type { App, ExtractPropTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-import { createTheme } from '@antd-tiny-vue/cssinjs'
-import defaultSeedToken from '../theme/themes/seed'
-import type { DesignTokenConfig } from '../theme/internal'
-import { DesignTokenProviderContext } from '../theme/internal'
-import type { CSPConfig, ConfigConsumerProps, DirectionType, SizeType, Theme, ThemeConfig } from './context'
-import { configConsumerProps, defaultIconPrefixCls, useProviderConfigProvide } from './context'
-import { registerTheme } from './css-variables'
-import type { RenderEmptyHandler } from './default-render-empty'
-
-import useStyle from './style'
-import { useConfig } from './hooks/config'
-export type { RenderEmptyHandler, CSPConfig, DirectionType, ConfigConsumerProps, ThemeConfig }
-
-export { defaultIconPrefixCls }
-export const configProviderProps = {
-  ...configConsumerProps,
-  prefixCls: stringType(),
-  componentSize: someType<SizeType>([String]),
-  componentDisabled: booleanType(),
-  legacyLocale: objectType()
-}
-
-export type ConfigProviderProps = Partial<ExtractPropTypes<typeof configProviderProps>>
-
-export const defaultPrefixCls = 'ant'
-
-// These props is used by `useContext` directly in sub component
-// const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPrefixCls'>[] = [
-//   'getTargetContainer',
-//   'getPopupContainer',
-//   'renderEmpty',
-//   'pageHeader',
-//   'input',
-//   'pagination',
-//   'form',
-//   'select'
-// ]
-
-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()
-  }
-})
-
-const ConfigProvider = defineComponent({
-  name: 'AConfigProvider',
-  props: {
-    ...configProviderProps
-  },
-  setup(props, { slots }) {
-    // 依赖注入
-    const { shouldWrapSSR, iconPrefixCls } = useProviderConfigProvide(props)
-    const wrapSSR = useStyle(iconPrefixCls)
-    const memoTheme = computed(() => {
-      const { algorithm, token, ...rest } = props.theme || {}
-      const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : undefined
-      return {
-        ...rest,
-        theme: themeObj,
-        token: {
-          ...defaultSeedToken,
-          ...token
-        }
-      }
-    })
-
-    return () => {
-      const { locale, theme } = props
-      const children = slots.default?.()
-      let childNode = shouldWrapSSR.value ? wrapSSR(children) : children
-
-      /**
-       * Form
-       */
-      // const validateMessages = React.useMemo(
-      //   () =>
-      //     setValues(
-      //       {},
-      //       defaultLocale.Form?.defaultValidateMessages || {},
-      //       memoedConfig.locale?.Form?.defaultValidateMessages || {},
-      //       form?.validateMessages || {},
-      //     ),
-      //   [memoedConfig, form?.validateMessages],
-      // );
-      //
-      // if (Object.keys(validateMessages).length > 0) {
-      //   childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
-      // }
-      /**
-       * 多语言实现部分
-       */
-      if (locale) {
-        //   多语言部分
-        //   childNode = <LocaleProvider locale={locale}>{childNode}</LocaleProvider>;
-      }
-
-      if (theme) {
-        childNode = (
-          <DesignTokenProviderContext
-            {...(memoTheme.value as DesignTokenConfig)}
-            token={memoTheme.value.token as any}
-          >
-            {childNode}
-          </DesignTokenProviderContext>
-        )
-      }
-
-      return childNode
-    }
-  }
-})
-
-ConfigProvider.install = (app: App) => {
-  app.component(ConfigProvider.name, ConfigProvider)
-}
-
-ConfigProvider.config = setGlobalConfig
-
-ConfigProvider.useConfig = useConfig
-export default ConfigProvider as typeof ConfigProvider & {
-  install(app: App): void
-  config: typeof setGlobalConfig
-  useConfig: typeof useConfig
-}

components/config-provider/style/index.ts

@@ -1,23 +0,0 @@
-import { useStyleRegister } from '@antd-tiny-vue/cssinjs'
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import { resetIcon } from '../../style'
-import { useToken } from '../../theme/internal'
-
-const useStyle = (iconPrefixCls: Ref<string>) => {
-  const [theme, token] = useToken()
-  // Generate style for icons
-  const info = computed(() => ({ theme: theme.value, token: token.value, hashId: '', path: ['ant-design-icons', iconPrefixCls.value] }))
-  return useStyleRegister(info, () => [
-    {
-      [`.${iconPrefixCls.value}`]: {
-        ...resetIcon(),
-        [`.${iconPrefixCls.value} .${iconPrefixCls.value}-icon`]: {
-          display: 'block'
-        }
-      }
-    }
-  ])
-}
-
-export default useStyle

components/index.ts

@@ -1,13 +1,15 @@
-import type { App } from 'vue'
+import type { App, Plugin } from 'vue'
 import * as components from './components'
+import version from './version'
+export * from './components'
 
 export default {
   install(app: App) {
-    for (const componentsKey in components) {
+    Object.values(components).forEach(component => {
-      const component = (components as any)[componentsKey]
       if (component.install) {
-        app.use(component)
+        app.use(component as any)
       }
-    }
+    })
-  }
+  },
-}
+  version
+} as Plugin

components/space/compact.ts

@@ -1,41 +0,0 @@
-import { classNames, createInjectionState } from '@v-c/utils'
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import type { DirectionType } from '../config-provider'
-
-const spaceCompactItem = () => {
-  return {
-    compactDirection: computed(() => null),
-    isFirstItem: computed(() => null),
-    isLastItem: computed(() => null),
-    compactSize: computed(() => null)
-  }
-}
-
-export const [useSpaceCompactProvider, useSpaceCompactInject] = createInjectionState(spaceCompactItem)
-
-export const useSpaceCompactItemState = (): ReturnType<typeof spaceCompactItem> | undefined => useSpaceCompactInject()
-
-export const useCompactItemContext = (prefixCls: Ref<string>, direction: Ref<DirectionType>) => {
-  const compactItemContext = useSpaceCompactItemState()
-
-  const compactItemClassnames = computed(() => {
-    if (!compactItemContext) return ''
-
-    const { compactDirection, isFirstItem, isLastItem } = compactItemContext
-    const separator = compactDirection.value === 'vertical' ? '-vertical-' : '-'
-
-    return classNames({
-      [`${prefixCls.value}-compact${separator}item`]: true,
-      [`${prefixCls.value}-compact${separator}first-item`]: isFirstItem.value,
-      [`${prefixCls.value}-compact${separator}last-item`]: isLastItem.value,
-      [`${prefixCls.value}-compact${separator}item-rtl`]: direction.value === 'rtl'
-    })
-  })
-
-  return {
-    compactSize: compactItemContext?.compactSize,
-    compactDirection: compactItemContext?.compactDirection,
-    compactItemClassnames
-  }
-}

components/theme/interface/components.ts

@@ -3,7 +3,7 @@
 // import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'
 // import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'
 import type { ComponentToken as ButtonComponentToken } from '../../button/style'
-// import type { ComponentToken as FloatButtonComponentToken } from '../../floats-button/style'
+// import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'
 // import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'
 // import type { ComponentToken as CardComponentToken } from '../../card/style'
 // import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'

components/theme/internal.ts

@@ -1,8 +1,7 @@
 import type { CSSInterpolation, Theme } from '@antd-tiny-vue/cssinjs'
 import { createTheme, useCacheToken, useStyleRegister } from '@antd-tiny-vue/cssinjs'
-import { createInjectionState, objectType, someType } from '@v-c/utils'
 import type { ComputedRef, VNodeChild } from 'vue'
-import { computed, defineComponent } from 'vue'
+import { computed, inject, provide } from 'vue'
 import version from '../version'
 import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorKey, PresetColorType, SeedToken } from './interface'
 import { PresetColors } from './interface'
@@ -50,27 +49,14 @@ export interface DesignTokenConfig {
   hashed?: string | boolean
 }
 
-const [useDesignTokenProvider, useDesignTokenInject] = createInjectionState((token: DesignTokenConfig) => {
+export const DesignTokenContext = Symbol('DesignTokenContext')
-  return token
-})
 
-export const DesignTokenProviderContext = defineComponent({
+const useDesignTokenProvider = (token: DesignTokenConfig) => {
-  props: {
+  provide(DesignTokenContext, token)
-    token: objectType<AliasToken>(),
+}
-    theme: objectType<Theme<SeedToken, MapToken>>(),
-    components: objectType<OverrideToken>(),
-    hashed: someType<string | boolean>([String, Boolean])
-  },
-  setup(props, { slots }) {
-    useDesignTokenProvider(props)
-    return () => {
-      return slots.default?.()
-    }
-  }
-})
 
 export { useDesignTokenProvider }
-export const useDesignTokenState = () => useDesignTokenInject() ?? defaultConfig
+export const useDesignTokenState = () => inject(DesignTokenContext, defaultConfig)
 
 // ================================== Hook ==================================
 export function useToken(): [ComputedRef<Theme<SeedToken, MapToken>>, ComputedRef<GlobalToken>, ComputedRef<string>] {

docs/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Antd Tiny Vue</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-<body>
-<div id="app"></div>
-<script type="module" src="/src/main.ts"></script>
-</body>
-</html>

docs/src/App.vue

@@ -1,5 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <router-view />
-</template>

docs/src/main.ts

@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-const app = createApp(App)
-
-app.mount('#app')

docs/src/pages/index.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div>
-    <!--        -->
-  </div>
-</template>

docs/vite.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'vite'
-import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
-import vue from '@vitejs/plugin-vue'
-export default defineConfig({
-  plugins: [vue(), vueJsxPlugin()]
-})

package.json

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

site/demos/button/basic.vue

@@ -10,15 +10,8 @@ title: 基础按钮
 <script lang="ts" setup></script>
 
 <template>
-  <div style="display: flex; gap: 10px; padding-bottom: 10px">
+  <div>
     <a-button>这是按钮</a-button>
-    <a-button type="primary">这是按钮</a-button>
-    <a-button
-      type="primary"
-      danger
-    >
-      这是按钮
-    </a-button>
   </div>
 </template>
 

site/vite.config.ts

@@ -1,7 +1,15 @@
 import { defineConfig } from 'vite'
 import vueJsxPlugin from '@vitejs/plugin-vue-jsx'
-import VitePluginVitepressDemo from 'vite-plugin-vitepress-demo'
+import { VitePluginVitepressDemo } from 'vite-plugin-vitepress-demo'
 
 export default defineConfig({
-  plugins: [vueJsxPlugin(), VitePluginVitepressDemo()]
+  plugins: [
+    vueJsxPlugin(),
+    VitePluginVitepressDemo({
+      glob: ['**/demos/**/*.vue']
+    })
+  ],
+  server: {
+    port: 9527
+  }
 })