fix: add minify mode

.eslintignore

@@ -1,3 +1,5 @@
 cache
 .temp
 *.log
+es
+lib

.gitignore

@@ -5,3 +5,5 @@ node_modules
 dist
 cache
 .temp
+es
+lib

.vitepress/components/demo.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { onMounted, shallowRef } from 'vue'
+
+const comp = shallowRef()
+onMounted(async () => {
+  const { AntdTheme } = await import('vite-plugin-vitepress-demo/theme')
+  comp.value = AntdTheme
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <component v-bind="$attrs" :is="comp"></component>
+  </ClientOnly>
+</template>
+
+<style scoped></style>

.vitepress/config.ts

@@ -10,20 +10,19 @@ const baseSrc = fileURLToPath(new URL('./', import.meta.url))
 
 export default defineConfig({
   rewrites: getRewrites(),
-  mpa: true,
   lang: 'en-US',
   ignoreDeadLinks: true,
   locales: {
     'zh-CN': {
       lang: 'zh-CN',
-      title: 'vue3组件库站点',
+      title: 'Antd Tiny Vue',
       label: '简体中文',
       description: 'vue3组件库站点',
       themeConfig: getZhCNConfig()
     },
     root: {
       lang: 'en-US',
-      title: 'vue3 component library site',
+      title: 'Antd Tiny Vue',
       label: 'English',
       description: 'vue3 component library site',
       themeConfig: getEnUSConfig()

.vitepress/theme/index.ts

@@ -1,15 +1,18 @@
 import type { Theme } from 'vitepress'
 // eslint-disable-next-line import/no-named-as-default
 import DefaultTheme from 'vitepress/theme'
-import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
-// @ts-expect-error this is a local module
-import Antd from 'antd-tiny-vue'
-
+import AntdTheme from '../components/demo.vue'
+// import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
 export default {
   ...DefaultTheme,
-  enhanceApp(ctx) {
+  async enhanceApp(ctx) {
     DefaultTheme.enhanceApp?.(ctx)
     ctx.app.component('Demo', AntdTheme)
-    ctx.app.use(Antd)
+    // @ts-expect-error this is a local module
+    if (!import.meta.env.SSR) {
+      // @ts-expect-error this is a local module
+      const Antd = (await import('antd-tiny-vue')).default
+      ctx.app.use(Antd)
+    }
   }
 } as Theme

components/button/button-helper.tsx

@@ -1,9 +1,26 @@
+// import type { VNode, VNodeChild } from 'vue'
+// import { isString } from '@v-c/utils'
+import { Text } from 'vue'
+import type { VNode } from 'vue'
+
 const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
 export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
 
 export function isUnBorderedButtonType(type?: ButtonType) {
   return type === 'text' || type === 'link'
 }
+export const spaceChildren = (child: VNode, needInserted: boolean) => {
+  const SPACE = needInserted ? ' ' : ''
+  if (child.type === Text) {
+    let text = (child.children as string).trim()
+    if (isTwoCNChar(text)) {
+      text = text.split('').join(SPACE)
+    }
+    return <span>{text}</span>
+  }
+  return child
+}
+
 //
 // function splitCNCharsBySpace(child: VNodeChild , needInserted: boolean) {
 //     if (child === null || child === undefined) {
@@ -33,7 +50,6 @@ export function isUnBorderedButtonType(type?: ButtonType) {
 //
 //     return child;
 // }
-//
 // export function spaceChildren(children: React.ReactNode, needInserted: boolean) {
 //     let isPrevChildPure: boolean = false;
 //     const childList: React.ReactNode[] = [];
@@ -57,7 +73,14 @@ export function isUnBorderedButtonType(type?: ButtonType) {
 //     );
 // }
 
-const ButtonTypes = ['default', 'primary', 'ghost', 'dashed', 'link', 'text'] as const
+const ButtonTypes = [
+  'default',
+  'primary',
+  'ghost',
+  'dashed',
+  'link',
+  'text'
+] as const
 export type ButtonType = (typeof ButtonTypes)[number]
 
 const ButtonShapes = ['default', 'circle', 'round'] as const

components/button/button.tsx

@@ -16,7 +16,12 @@ 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'
+import {
+  isTwoCNChar,
+  isUnBorderedButtonType,
+  spaceChildren
+} from './button-helper'
+import LoadingIcon from './loading-icon'
 type Loading = number | boolean
 
 function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@@ -58,8 +63,8 @@ const Button = defineComponent({
         small: 'sm',
         middle: undefined
       }
-      const sizeFullname = compactSize?.value || size.value
-      return sizeClassNameMap[sizeFullname]
+      const sizeFullName = compactSize?.value || size.value
+      return sizeClassNameMap[sizeFullName]
     })
     const disabled = useDisabled(props)
     const buttonRef = shallowRef<HTMLButtonElement | null>(null)
@@ -73,6 +78,23 @@ const Button = defineComponent({
     )
     const [hasTwoCNChar, setHasTwoCNChar] = useState(false)
 
+    let isNeedInserted = false
+
+    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.value) {
+          setHasTwoCNChar(true)
+        }
+      } else if (hasTwoCNChar.value) {
+        setHasTwoCNChar(false)
+      }
+    }
+
     let delayTimer: number | null = null
 
     onMounted(() => {
@@ -84,7 +106,6 @@ const Button = defineComponent({
       } else {
         setLoading(loadingOrDelay.value.loading)
       }
-      // fixTwoCNChar()
     })
 
     function cleanupTimer() {
@@ -127,29 +148,11 @@ const Button = defineComponent({
     return () => {
       const { shape, rootClassName, ghost, type, block, danger } = props
       const icon = getSlotsProps(slots, props, 'icon')
-      const children = filterEmpty(slots.default?.())
-      const isNeedInserted = () => {
-        return (
-          children.length === 1 &&
-          !slots.icon &&
-          isUnBorderedButtonType(props.type)
-        )
-      }
-
-      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)
-        }
-      }
+      const children = filterEmpty(slots.default?.() as any)
+      isNeedInserted =
+        children.length === 1 &&
+        !slots.icon &&
+        !isUnBorderedButtonType(props.type)
       fixTwoCNChar()
       showError()
       const iconType = innerLoading.value ? 'loading' : icon
@@ -181,8 +184,22 @@ const Button = defineComponent({
         compactItemClassnames.value,
         rootClassName
       )
-      const iconNode = icon && !innerLoading.value ? icon?.() : <>L</>
+      const iconNode =
+        icon &&
+        (!innerLoading.value ? (
+          icon?.()
+        ) : (
+          <LoadingIcon
+            existIcon={!!icon}
+            prefixCls={prefixCls.value}
+            loading={!!innerLoading.value}
+          />
+        ))
 
+      const kids =
+        children || children === 0
+          ? spaceChildren(children[0] as any, isNeedInserted && autoInsertSpace)
+          : undefined
       if (attrs.href !== undefined) {
         return wrapSSR(
           <a
@@ -193,13 +210,19 @@ const Button = defineComponent({
             ref={buttonRef}
           >
             {iconNode}
-            {children}
+            {kids}
           </a>
         )
       }
       let buttonNode = (
-        <button {...attrs} onClick={handleClick} class={classes}>
-          {children}
+        <button
+          {...attrs}
+          onClick={handleClick}
+          class={classes}
+          ref={buttonRef}
+        >
+          {iconNode}
+          {kids}
         </button>
       )
 

components/button/loading-icon.tsx

@@ -0,0 +1,67 @@
+import { Transition, defineComponent, nextTick } from 'vue'
+import { booleanType, someType, stringType } from '@v-c/utils'
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
+
+export interface LoadingIconProps {
+  prefixCls: string
+  existIcon: boolean
+  loading?: boolean | object
+}
+export const loadingIconProps = {
+  prefixCls: stringType(),
+  existIcon: booleanType(),
+  loading: someType<boolean | object>([Boolean, Object])
+}
+
+const getCollapsedWidth = (el: Element) => {
+  const node: HTMLElement = el as HTMLElement
+  if (node) {
+    node.style.width = '0'
+    node.style.opacity = '0'
+    node.style.transform = 'scale(0)'
+  }
+}
+
+const getRealWidth = (el: Element) => {
+  const node: HTMLElement = el as HTMLElement
+  nextTick(() => {
+    if (node) {
+      node.style.width = `${node.scrollWidth}px`
+      node.style.opacity = '1'
+      node.style.transform = 'scale(1)'
+    }
+  }).then()
+}
+
+const LoadingIcon = defineComponent({
+  name: 'LoadingIcon',
+  props: loadingIconProps,
+  setup(props) {
+    return () => {
+      const { loading, existIcon, prefixCls } = props
+      const visible = !!loading
+      if (existIcon) {
+        return (
+          <span class={`${prefixCls}-loading-icon`}>
+            <LoadingOutlined />
+          </span>
+        )
+      }
+      return (
+        <Transition
+          name={`${prefixCls}-loading-icon-motion`}
+          onBeforeEnter={getCollapsedWidth}
+          onEnter={getRealWidth}
+        >
+          {visible ? (
+            <span class={`${prefixCls}-loading-icon`}>
+              <LoadingOutlined />
+            </span>
+          ) : null}
+        </Transition>
+      )
+    }
+  }
+})
+
+export default LoadingIcon

components/button/style/index.ts

@@ -16,9 +16,10 @@ export interface ButtonToken extends FullToken<'Button'> {
 }
 
 // ============================== Shared ==============================
-const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
+const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+): CSSObject => {
   const { componentCls, iconCls } = token
-
   return {
     [componentCls]: {
       outline: 'none',
@@ -60,25 +61,8 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       },
       // Special styles for Primary Button
       [`&-compact-item${componentCls}-primary`]: {
-        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]: {
-          position: 'relative',
-
-          '&:before': {
-            position: 'absolute',
-            top: -token.lineWidth,
-            insetInlineStart: -token.lineWidth,
-            display: 'inline-block',
-            width: token.lineWidth,
-            height: `calc(100% + ${token.lineWidth * 2}px)`,
-            backgroundColor: token.colorPrimaryHover,
-            content: '""'
-          }
-        }
-      },
-      // Special styles for Primary Button
-      '&-compact-vertical-item': {
-        [`&${componentCls}-primary`]: {
-          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]: {
+        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
+          {
             position: 'relative',
 
             '&:before': {
@@ -86,19 +70,41 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
               top: -token.lineWidth,
               insetInlineStart: -token.lineWidth,
               display: 'inline-block',
-              width: `calc(100% + ${token.lineWidth * 2}px)`,
-              height: token.lineWidth,
+              width: token.lineWidth,
+              height: `calc(100% + ${token.lineWidth * 2}px)`,
               backgroundColor: token.colorPrimaryHover,
               content: '""'
             }
           }
+      },
+      // Special styles for Primary Button
+      '&-compact-vertical-item': {
+        [`&${componentCls}-primary`]: {
+          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
+            {
+              position: 'relative',
+
+              '&:before': {
+                position: 'absolute',
+                top: -token.lineWidth,
+                insetInlineStart: -token.lineWidth,
+                display: 'inline-block',
+                width: `calc(100% + ${token.lineWidth * 2}px)`,
+                height: token.lineWidth,
+                backgroundColor: token.colorPrimaryHover,
+                content: '""'
+              }
+            }
         }
       }
     }
   }
 }
 
-const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
+const genHoverActiveButtonStyle = (
+  hoverStyle: CSSObject,
+  activeStyle: CSSObject
+): CSSObject => ({
   '&:not(:disabled)': {
     '&:hover': hoverStyle,
     '&:active': activeStyle
@@ -106,21 +112,23 @@ const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject
 })
 
 // ============================== Shape ===============================
-const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genCircleButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   minWidth: token.controlHeight,
   paddingInlineStart: 0,
   paddingInlineEnd: 0,
   borderRadius: '50%'
 })
 
-const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genRoundButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   borderRadius: token.controlHeight,
   paddingInlineStart: token.controlHeight / 2,
   paddingInlineEnd: token.controlHeight / 2
 })
 
 // =============================== Type ===============================
-const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   cursor: 'not-allowed',
   borderColor: token.colorBorder,
   color: token.colorTextDisabled,
@@ -162,17 +170,21 @@ const genGhostButtonStyle = (
   }
 })
 
-const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   '&:disabled': {
     ...genDisabledStyle(token)
   }
 })
 
-const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   ...genSolidDisabledButtonStyle(token)
 })
 
-const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   '&:disabled': {
     cursor: 'not-allowed',
     color: token.colorTextDisabled
@@ -180,7 +192,9 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token
 })
 
 // Type: Default
-const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   ...genSolidButtonStyle(token),
 
   backgroundColor: token.colorBgContainer,
@@ -199,7 +213,13 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
     }
   ),
 
-  ...genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder),
+  ...genGhostButtonStyle(
+    token.componentCls,
+    token.colorBgContainer,
+    token.colorBgContainer,
+    token.colorTextDisabled,
+    token.colorBorder
+  ),
 
   [`&${token.componentCls}-dangerous`]: {
     color: token.colorError,
@@ -216,13 +236,21 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
       }
     ),
 
-    ...genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder),
+    ...genGhostButtonStyle(
+      token.componentCls,
+      token.colorError,
+      token.colorError,
+      token.colorTextDisabled,
+      token.colorBorder
+    ),
     ...genSolidDisabledButtonStyle(token)
   }
 })
 
 // Type: Primary
-const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   ...genSolidButtonStyle(token),
 
   color: token.colorTextLightSolid,
@@ -290,13 +318,15 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
 })
 
 // Type: Dashed
-const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genDashedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   ...genDefaultButtonStyle(token),
   borderStyle: 'dashed'
 })
 
 // Type: Link
-const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   color: token.colorLink,
 
   ...genHoverActiveButtonStyle(
@@ -327,7 +357,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
 })
 
 // Type: Text
-const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   ...genHoverActiveButtonStyle(
     {
       color: token.colorText,
@@ -359,14 +389,16 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
 })
 
 // Href and Disabled
-const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = token => ({
+const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (
+  token
+) => ({
   ...genDisabledStyle(token),
   [`&${token.componentCls}:hover`]: {
     ...genDisabledStyle(token)
   }
 })
 
-const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
+const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token
 
   return {
@@ -380,10 +412,25 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = token => {
 }
 
 // =============================== Size ===============================
-const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpolation => {
-  const { componentCls, iconCls, controlHeight, fontSize, lineHeight, lineWidth, borderRadius, buttonPaddingHorizontal } = token
+const genSizeButtonStyle = (
+  token: ButtonToken,
+  sizePrefixCls = ''
+): CSSInterpolation => {
+  const {
+    componentCls,
+    iconCls,
+    controlHeight,
+    fontSize,
+    lineHeight,
+    lineWidth,
+    borderRadius,
+    buttonPaddingHorizontal
+  } = token
 
-  const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth)
+  const paddingVertical = Math.max(
+    0,
+    (controlHeight - fontSize * lineHeight) / 2 - lineWidth
+  )
   const paddingHorizontal = buttonPaddingHorizontal - lineWidth
 
   const iconOnlyCls = `${componentCls}-icon-only`
@@ -427,17 +474,20 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls = ''): CSSInterpol
 
     // Shape - patch prefixCls again to override solid border radius style
     {
-      [`${componentCls}${componentCls}-circle${sizePrefixCls}`]: genCircleButtonStyle(token)
+      [`${componentCls}${componentCls}-circle${sizePrefixCls}`]:
+        genCircleButtonStyle(token)
     },
     {
-      [`${componentCls}${componentCls}-round${sizePrefixCls}`]: genRoundButtonStyle(token)
+      [`${componentCls}${componentCls}-round${sizePrefixCls}`]:
+        genRoundButtonStyle(token)
     }
   ]
 }
 
-const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = token => genSizeButtonStyle(token)
+const genSizeBaseButtonStyle: GenerateStyle<ButtonToken> = (token) =>
+  genSizeButtonStyle(token)
 
-const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
+const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const smallToken = mergeToken<ButtonToken>(token, {
     controlHeight: token.controlHeightSM,
     padding: token.paddingXS,
@@ -448,7 +498,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
   return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`)
 }
 
-const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
+const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const largeToken = mergeToken<ButtonToken>(token, {
     controlHeight: token.controlHeightLG,
     fontSize: token.fontSizeLG,
@@ -458,7 +508,7 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
   return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`)
 }
 
-const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
+const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token
   return {
     [componentCls]: {
@@ -470,7 +520,7 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
 }
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Button', token => {
+export default genComponentStyleHook('Button', (token) => {
   const { controlTmpOutline, paddingContentHorizontal } = token
 
   const buttonToken = mergeToken<ButtonToken>(token, {

components/config-provider/context.ts

@@ -1,8 +1,20 @@
-import { booleanType, createInjectionState, functionType, objectType, someType, stringType } 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 {
+  AliasToken,
+  MapToken,
+  OverrideToken,
+  SeedToken
+} from '../theme/interface'
 import type { RenderEmptyHandler } from './default-render-empty'
 import type { ConfigProviderProps } from './index'
 
@@ -34,7 +46,10 @@ export interface ThemeConfig {
 }
 export const defaultIconPrefixCls = 'anticon'
 
-const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+const defaultGetPrefixCls = (
+  suffixCls?: string,
+  customizePrefixCls?: string
+) => {
   if (customizePrefixCls) return customizePrefixCls
 
   return suffixCls ? `ant-${suffixCls}` : 'ant'
@@ -82,11 +97,16 @@ const configState = (props: ConfigProviderProps) => {
   const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
     const { prefixCls, getPrefixCls } = props
     if (customizePrefixCls) return customizePrefixCls
-    const mergedPrefixCls = prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
+    const mergedPrefixCls =
+      prefixCls || getPrefixCls?.('') || defaultGetPrefixCls('')
     return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
   }
-  const iconPrefixCls = computed(() => props?.iconPrefixCls ?? defaultIconPrefixCls)
-  const shouldWrapSSR = computed(() => iconPrefixCls.value !== defaultIconPrefixCls)
+  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)
@@ -103,7 +123,8 @@ const configState = (props: ConfigProviderProps) => {
     direction
   }
 }
-const [useProviderConfigProvide, useProviderConfigInject] = createInjectionState(configState)
+const [useProviderConfigProvide, useProviderConfigInject] =
+  createInjectionState(configState)
 
 export { useProviderConfigProvide }
 export const useProviderConfigState = (): ReturnType<typeof configState> => {
@@ -115,7 +136,7 @@ export const useProviderConfigState = (): ReturnType<typeof configState> => {
       componentSize: computed(() => undefined),
       componentDisabled: computed(() => false),
       direction: computed(() => undefined),
-      autoInsertSpaceInButton: computed(() => undefined)
+      autoInsertSpaceInButton: computed(() => true)
     } as any)
   )
 }

components/space/index.tsx

@@ -84,7 +84,7 @@ const Space = defineComponent({
 
     return () => {
       const { align, direction, rootClassName, split, wrap } = props
-      const childNodes = filterEmpty(slots.default?.())
+      const childNodes = filterEmpty(slots.default?.() as any)
       const mergedAlign =
         align === undefined && direction === 'horizontal' ? 'center' : align
       const cn = classNames(

components/style/motion/collapse.ts

@@ -1,7 +1,9 @@
 import type { AliasToken, GenerateStyle } from '../../theme/internal'
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
 
-const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = token => ({
+const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = (
+  token
+) => ({
   [token.componentCls]: {
     // For common/openAnimation
     [`${token.antCls}-motion-collapse-legacy`]: {

components/theme/themes/default/index.ts

@@ -1,7 +1,12 @@
 import { generate } from '@ant-design/colors'
 import genControlHeight from '../shared/genControlHeight'
 import genSizeMapToken from '../shared/genSizeMapToken'
-import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'
+import type {
+  ColorPalettes,
+  MapToken,
+  PresetColorType,
+  SeedToken
+} from '../../interface'
 import { defaultPresetColors } from '../seed'
 import genColorMapToken from '../shared/genColorMapToken'
 import genCommonMapToken from '../shared/genCommonMapToken'
@@ -10,7 +15,8 @@ import { generateColorPalettes, generateNeutralColorPalettes } from './colors'
 
 export default function derivative(token: SeedToken): MapToken {
   const colorPalettes = Object.keys(defaultPresetColors)
-    .map((colorKey: keyof PresetColorType) => {
+    .map((value) => {
+      const colorKey = value as keyof PresetColorType
       const colors = generate(token[colorKey])
 
       return new Array(10).fill(1).reduce((prev, _, i) => {

package.json

@@ -1,6 +1,7 @@
 {
   "name": "antd-tiny-vue",
   "version": "1.0.0",
+  "packageManager": "pnpm@8.2.0",
   "description": "this is a tiny antd components for vue3",
   "keywords": [
     "antd",
@@ -12,39 +13,53 @@
   ],
   "license": "MIT",
   "author": "aibayanyu",
-  "main": "dist/index.js",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "test": "vitest",
     "prepare": "husky install",
     "dev": "vitepress dev",
     "build:site": "vitepress build",
+    "build:lib": "vite build --config vite.build.config.ts",
+    "build:umd": "vite build --config vite.bundle.config.ts",
+    "copy:css": "cpx \"components/style/*.css\" dist",
     "preview": "vitepress preview"
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@antd-tiny-vue/cssinjs": "^0.0.4",
+    "@ant-design/icons-vue": "^6.1.0",
+    "@antd-tiny-vue/cssinjs": "0.0.8",
     "@ctrl/tinycolor": "^3.6.0",
-    "@v-c/utils": "^0.0.19",
+    "@v-c/utils": "^0.0.22",
     "@vueuse/core": "^9.13.0",
-    "vue": "^3.2.47"
+    "vue": "^3.3.0-beta.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.5.0",
     "@commitlint/config-conventional": "^17.4.4",
     "@mistjs/eslint-config-vue-jsx": "^0.0.7",
-    "@mistjs/tsconfig": "^1.0.0",
-    "@mistjs/tsconfig-vue": "^0.0.3",
+    "@mistjs/tsconfig": "^1.1.1",
+    "@mistjs/tsconfig-vue": "^1.1.2",
     "@types/node": "^18.15.10",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "cpx": "^1.5.0",
     "eslint": "^8.36.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
     "prettier": "^2.8.7",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.4",
     "unbuild": "^1.1.2",
-    "vite": "^4.2.1",
-    "vite-plugin-vitepress-demo": "2.0.0-beta.28",
-    "vitepress": "1.0.0-alpha.69",
+    "vite": "^4.3.3",
+    "vite-plugin-dts": "^2.3.0",
+    "vite-plugin-vitepress-demo": "2.0.0-beta.29",
+    "vitepress": "1.0.0-alpha.74",
     "vitest": "^0.28.5"
   },
   "pnpm": {
@@ -52,6 +67,9 @@
       "ignoreMissing": [
         "@algolia/client-search"
       ]
+    },
+    "overrides": {
+      "vue": "3.3.0-beta.2"
     }
   },
   "lint-staged": {

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@mistjs/tsconfig-vue"
+  "extends": "@mistjs/tsconfig-vue",
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
 }

vite.build.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import dts from 'vite-plugin-dts'
+export default defineConfig({
+  plugins: [
+    vueJsx(),
+    dts({
+      outputDir: ['es', 'lib'],
+      include: ['components/**/*.ts', 'components/**/*.tsx']
+    })
+  ],
+  build: {
+    minify: false,
+    rollupOptions: {
+      external: [
+        '@ant-design/colors',
+        /^@ant-design\/icons-vue/,
+        '@antd-tiny-vue/cssinjs',
+        '@ctrl/tinycolor',
+        '@v-c/utils',
+        '@vueuse/core',
+        'vue'
+      ],
+      output: [
+        {
+          format: 'es',
+          dir: 'es',
+          entryFileNames: '[name].js',
+          preserveModules: true,
+          preserveModulesRoot: 'components'
+        },
+        {
+          format: 'cjs',
+          dir: 'lib',
+          entryFileNames: '[name].js',
+          preserveModules: true,
+          preserveModulesRoot: 'components',
+          exports: 'named'
+        }
+      ]
+    },
+    lib: {
+      entry: 'components/index.ts',
+      formats: ['es', 'cjs']
+    }
+  }
+})

vite.bundle.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+export default defineConfig({
+  plugins: [vueJsx()],
+  build: {
+    lib: {
+      entry: 'components/index.ts',
+      name: 'Antd',
+      fileName: () => `antd.js`,
+      formats: ['umd']
+    }
+  }
+})