feat(button): add demo

Author: Zcating

devui/button/button.tsx

@@ -8,6 +8,7 @@ export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 import './button.scss';
 
 export default defineComponent({
+  name: 'd-button',
   props: {
     id: {
       type: [String, Number]
@@ -29,8 +30,8 @@ export default defineComponent({
       default: 'default'
     },
     bordered: {
-      type: String as () => IButtonPosition,
-      default: 'default'
+      type: Boolean,
+      default: false
     },
     icon: {
       type: String,

devui/button/demo/button-demo.vue

@@ -20,15 +20,23 @@
 <script>
 import { defineComponent } from 'vue'
 import DevUICodeBox from '../../shared/devui-codebox/devui-codebox.vue'
-import DevUIButtonPrimary from './primary/primary.vue'
-import DevUIButtonCommon from './common/common.vue'
+import DevUIButtonPrimary from './primary/primary'
+import DevUIButtonCommon from './common/common'
 
 export default defineComponent({
   name: 'd-button-demo',
   components: {
     'd-codebox': DevUICodeBox,
     'd-button-primary': DevUIButtonPrimary,
     'd-button-common': DevUIButtonCommon,
+  },
+  setup() {
+    const primarySource = {};
+    const commonSource = {};
+    return {
+      primarySource,
+      commonSource
+    }
   }
 })
 </script>

devui/button/demo/common/common.tsx

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue';
+import Button from '../../button';
+
+export default defineComponent({
+  name: 'd-button-common',
+  setup() {
+    return () => {
+      return (
+        <div>
+          <Button bsStyle="common">Common</Button>
+        </div>
+      );
+    }
+  }
+});

devui/button/demo/common/common.vue

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue';
+import Button from '../../button';
+
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    return () => {
+      return (
+        <div>
+          <Button bsStyle="primary">primary</Button>
+        </div>
+      );
+    }
+  }
+});

devui/button/demo/primary/primary.tsx

@@ -1,6 +1,7 @@
 <template>
   <div>
     devui codebox
+    <slot></slot>
   </div>
 </template>
 

devui/button/demo/primary/primary.vue

@@ -94,29 +94,19 @@
     </div>
     <!-- <app-content></app-content> -->
     <router-view></router-view>
-    <d-button @click="confirm">Confirm</d-button>
-    <d-button @click="cancel">Cancel</d-button>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 import AppContent from './components/app-content.vue'
-import DevUIButton from '../devui/button/button'
 
 export default defineComponent({
   name: 'App',
   components: {
     AppContent,
-    'd-button': DevUIButton,
   },
   methods: {
-    confirm() {
-      console.log('confirm')
-    },
-    cancel() {
-      console.log('cancel')
-    }
   }
 })
 </script>