feat: add button

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: {
+    ...buttonProps
-      type: String
-    },
-    type: {
-      type: String,
-      default: 'default'
-    }
   },
   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,8 @@
 import { createInjectionState } from '@v-c/utils'
 import { computed } from 'vue'
 
+export type SizeType = 'small' | 'middle' | 'large' | undefined
+
 export const defaultIconPrefixCls = 'anticon'
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

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/cli": "^17.5.0",
-    "@commitlint/config-conventional": "^17.4.3",
+    "@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",
+    "@types/node": "^18.15.9",
-    "@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.1.2",
+    "lint-staged": "^13.2.0",
-    "prettier": "^2.8.4",
+    "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"