fix: 优化Button组件API，抽离逻辑，更新其他组件demo中Button的用法 (#230)

Author: xingyan95

packages/devui-vue/devui/button/index.ts

@@ -1,21 +1,15 @@
-import type { App } from 'vue'
-import Button from './src/button'
-import { Loading } from '../loading/index'
+import type { App } from 'vue';
+import Button from './src/button';
 
-Button.install = function (app: App) {
-  app.directive('dLoading', Loading)
-  app.component(Button.name, Button)
-}
+export * from './src/button-types';
 
-export * from './src/button-types'
-
-export { Button }
+export { Button };
 
 export default {
   title: 'Button 按钮',
   category: '通用',
   status: '100%',
   install(app: App): void {
-    app.use(Button as any)
-  }
-}
+    app.component(Button.name, Button);
+  },
+};

packages/devui-vue/devui/button/src/button-types.ts

@@ -1,54 +1,40 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import type { ComputedRef, ExtractPropTypes, PropType } from 'vue';
 
-export type IButtonType = 'button' | 'submit' | 'reset';
-export type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
-export type IButtonPosition = 'left' | 'right' | 'default';
+export type IButtonVariant = 'solid' | 'outline' | 'text';
+export type IButtonColor = 'secondary' | 'primary' | 'danger';
 export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 
 export const buttonProps = {
-  type: {
-    type: String as PropType<IButtonType>,
-    default: 'button'
-  },
   variant: {
     type: String as PropType<IButtonVariant>,
-    default: 'primary'
+    default: 'outline',
   },
   size: {
     type: String as PropType<IButtonSize>,
-    default: 'md'
-  },
-  position: {
-    type: String as PropType<IButtonPosition>,
-    default: 'default'
+    default: 'md',
   },
-  bordered: {
-    type: Boolean,
-    default: false
+  color: {
+    type: String as PropType<IButtonColor>,
   },
   icon: {
     type: String,
-    default: ''
+    default: '',
   },
-  showLoading: {
+  loading: {
     type: Boolean,
-    default: false
-  },
-  width: {
-    type: String,
+    default: false,
   },
   disabled: {
     type: Boolean,
-    default: false
-  },
-  autofocus: {
-    type: Boolean,
-    default: false
+    default: false,
   },
-  onClick: {
-    type: Function as PropType<(event: MouseEvent) => void>
-  }
 } as const;
 
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
 
-export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
+export interface UseButtonReturnType {
+  classes: ComputedRef<{
+    [key: string]: string | boolean;
+  }>;
+  iconClass: ComputedRef<string>;
+}