fix: fix provide inject error

components/_util/wave/index.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+const Wave = defineComponent({
+  name: 'Wave',
+  inheritAttrs: false,
+  setup() {
+    return () => {}
+  }
+})
+
+export default Wave

components/_util/wave/style.ts

@@ -0,0 +1,34 @@
+import { genComponentStyleHook } from '../../theme/internal'
+import type { FullToken, GenerateStyle } from '../../theme/internal'
+
+export interface ComponentToken {}
+
+export interface WaveToken extends FullToken<'Wave'> {}
+
+const genWaveStyle: GenerateStyle<WaveToken> = token => {
+  const { componentCls, colorPrimary } = token
+  return {
+    [componentCls]: {
+      position: 'absolute',
+      background: 'transparent',
+      pointerEvents: 'none',
+      boxSizing: 'border-box',
+      color: `var(--wave-color, ${colorPrimary})`,
+
+      boxShadow: `0 0 0 0 currentcolor`,
+      opacity: 0.2,
+
+      // =================== Motion ===================
+      '&.wave-motion-appear': {
+        transition: [`box-shadow 0.4s ${token.motionEaseOutCirc}`, `opacity 2s ${token.motionEaseOutCirc}`].join(','),
+
+        '&-active': {
+          boxShadow: `0 0 0 6px currentcolor`,
+          opacity: 0
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyleHook('Wave', token => [genWaveStyle(token)])

components/_util/wave/util.ts

@@ -0,0 +1,35 @@
+export function isNotGrey(color: string) {
+  // eslint-disable-next-line no-useless-escape
+  const match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\d.]*)?\)/)
+  if (match && match[1] && match[2] && match[3]) {
+    return !(match[1] === match[2] && match[2] === match[3])
+  }
+  return true
+}
+
+export function isValidWaveColor(color: string) {
+  return (
+    color &&
+    color !== '#fff' &&
+    color !== '#ffffff' &&
+    color !== 'rgb(255, 255, 255)' &&
+    color !== 'rgba(255, 255, 255, 1)' &&
+    isNotGrey(color) &&
+    !/rgba\((?:\d*, ){3}0\)/.test(color) && // any transparent rgba color
+    color !== 'transparent'
+  )
+}
+
+export function getTargetWaveColor(node: HTMLElement) {
+  const { borderTopColor, borderColor, backgroundColor } = getComputedStyle(node)
+  if (isValidWaveColor(borderTopColor)) {
+    return borderTopColor
+  }
+  if (isValidWaveColor(borderColor)) {
+    return borderColor
+  }
+  if (isValidWaveColor(backgroundColor)) {
+    return backgroundColor
+  }
+  return null
+}

components/button/button.tsx

@@ -1,7 +1,6 @@
 import { computed, defineComponent } from 'vue'
 import { useProviderConfigState } from '../config-provider/context'
 import useStyle from './style'
-
 const Button = defineComponent({
   name: 'AButton',
   inheritAttrs: false,
@@ -18,24 +17,13 @@ const Button = defineComponent({
     const { getPrefixCls } = useProviderConfigState()
     const prefixCls = computed(() => getPrefixCls('btn', props.prefixCls))
     const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const cls = computed(() => {
-      return {
+    return () => {
+      const cls = {
         [prefixCls.value]: true,
         [`${prefixCls.value}-${props.type}`]: !!props.type,
         [hashId.value]: true
       }
-    })
-
-    return () => {
-      return wrapSSR(
-        <button
-          {...attrs}
-          class={[cls.value, attrs.class]}
-        >
-          {slots.default?.()}
-        </button>
-      )
+      return wrapSSR(<button class={[cls, attrs.class]}>{slots.default?.()}</button>)
     }
   }
 })

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/config-provider/context.ts

@@ -1,5 +1,4 @@
-import { createInjectionState } from '@v-c/utils'
-import { computed } from 'vue'
+import { computed, inject, provide } from 'vue'
 
 export const defaultIconPrefixCls = 'anticon'
 
@@ -8,21 +7,27 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) =>
 
   return suffixCls ? `ant-${suffixCls}` : 'ant'
 }
-const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(() => {
+
+export const ConfigProviderContext = Symbol('ConfigProviderContext')
+
+export const defaultConfigProviderState = () => {
   const getPrefixCls = defaultGetPrefixCls
   const iconPrefixCls = computed(() => defaultIconPrefixCls)
   return {
     getPrefixCls,
     iconPrefixCls
   }
-})
+}
+
+const useProviderConfigProvide = () => {
+  const defaultState = defaultConfigProviderState()
+  provide(ConfigProviderContext, defaultState)
+  return {
+    ...defaultState
+  }
+}
 
 export { useProviderConfigProvide }
 export const useProviderConfigState = () => {
-  return (
-    useProviderConfigInject() ?? {
-      getPrefixCls: defaultGetPrefixCls,
-      iconPrefixCls: computed(() => defaultIconPrefixCls)
-    }
-  )
+  return inject(ConfigProviderContext, defaultConfigProviderState())
 }

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) {
-      const component = (components as any)[componentsKey]
+    Object.values(components).forEach(component => {
       if (component.install) {
-        app.use(component)
-      }
-    }
-  }
+        app.use(component as any)
       }
+    })
+  },
+  version
+} as Plugin

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'
@@ -48,7 +48,7 @@ import type { ComponentToken as ButtonComponentToken } from '../../button/style'
 // import type { ComponentToken as TourComponentToken } from '../../tour/style'
 // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'
 // import type { ComponentToken as AppComponentToken } from '../../app/style'
-// import type { ComponentToken as WaveToken } from '../../_util/wave/style'
+import type { ComponentToken as WaveToken } from '../../_util/wave/style'
 
 export interface ComponentTokenMap {
   Affix?: {}
@@ -115,5 +115,5 @@ export interface ComponentTokenMap {
   // App?: AppComponentToken
   //
   // /** @private Internal TS definition. Do not use. */
-  // Wave?: WaveToken
+  Wave?: WaveToken
 }

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 } from '@v-c/utils'
 import type { ComputedRef, VNodeChild } from 'vue'
-import { computed } 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,12 +49,14 @@ export interface DesignTokenConfig {
   hashed?: string | boolean
 }
 
-const [useDesignTokenProvider, useDesignTokenInject] = createInjectionState((token: DesignTokenConfig) => {
-  return token
-})
+export const DesignTokenContext = Symbol('DesignTokenContext')
+
+const useDesignTokenProvider = (token: DesignTokenConfig) => {
+  provide(DesignTokenContext, token)
+}
 
 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>] {

package.json

@@ -17,7 +17,6 @@
     "@ant-design/colors": "^7.0.0",
     "@antd-tiny-vue/cssinjs": "^0.0.4",
     "@ctrl/tinycolor": "^3.6.0",
-    "@v-c/utils": "^0.0.5",
     "@vueuse/core": "^9.13.0",
     "vue": "^3.2.0"
   },

pnpm-lock.yaml

@@ -10,7 +10,6 @@ specifiers:
   '@mistjs/tsconfig': ^1.0.0
   '@mistjs/tsconfig-vue': ^0.0.3
   '@types/node': ^18.13.0
-  '@v-c/utils': ^0.0.5
   '@vitejs/plugin-vue-jsx': ^3.0.0
   '@vueuse/core': ^9.13.0
   eslint: ^8.34.0
@@ -28,7 +27,6 @@ dependencies:
   '@ant-design/colors': 7.0.0
   '@antd-tiny-vue/cssinjs': 0.0.4_vue@3.2.47
   '@ctrl/tinycolor': 3.6.0
-  '@v-c/utils': 0.0.5
   '@vueuse/core': 9.13.0_vue@3.2.47
   vue: 3.2.47
 
@@ -1280,13 +1278,6 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /@v-c/utils/0.0.5:
-    resolution: {integrity: sha512-HiK9iupJ3YIl4AO8VxvQMVh5G7pkTYo7wMhWdsWr6XOPw86p5MgWdQRLhQNX1WbDjA9BsbpjuO7I5PyEhGYoFw==}
-    dependencies:
-      lodash.clonedeep: 4.5.0
-      vue: 3.2.47
-    dev: false
-
   /@vitejs/plugin-vue-jsx/3.0.0_vite@4.1.1+vue@3.2.47:
     resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3450,10 +3441,6 @@ packages:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
 
-  /lodash.clonedeep/4.5.0:
-    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
-    dev: false
-
   /lodash.isfunction/3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
     dev: true

site/vite.config.ts

@@ -8,5 +8,8 @@ export default defineConfig({
     VitePluginVitepressDemo({
       glob: ['**/demos/**/*.vue']
     })
-  ]
+  ],
+  server: {
+    port: 9527
+  }
 })