Refactor(demo): change options to composition api (#6499)

* feat(demo): A-B

* feat(demo): update B-checkbox

* feat(demo): update CheckBox -DatePicker

* feat(demo): update DatePicker - Form

* feat(demo): update Form - List

* feat(demo): update  List-pagination

* feat(demo): update  List - skeleton

* feat(demo): update  skeleton - switch

* feat(demo): update  skeleton - switch

* feat(demo): update   switch - upload

* feat(demo): update  watermark

* fix(demo): del hashId

Author: CCherry07

.jest.js

@@ -18,6 +18,7 @@ function getTestRegex(libDir) {
 module.exports = {
   verbose: true,
   setupFiles: ['./tests/setup.js'],
+  setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'vue', 'md', 'jpg'],
   modulePathIgnorePatterns: ['/_site/'],
   testPathIgnorePatterns: testPathIgnorePatterns,

components/affix/__tests__/__snapshots__/demo.test.js.snap

@@ -2,12 +2,14 @@
 
 exports[`renders ./components/affix/demo/basic.vue correctly 1`] = `
 <div>
+  <!---->
   <div class=""><button class="ant-btn ant-btn-primary" type="button">
       <!----><span>Affix top</span>
     </button></div>
 </div>
 <br>
 <div>
+  <!---->
   <div class=""><button class="ant-btn ant-btn-primary" type="button">
       <!----><span>Affix bottom</span>
     </button></div>
@@ -16,7 +18,8 @@ exports[`renders ./components/affix/demo/basic.vue correctly 1`] = `
 
 exports[`renders ./components/affix/demo/on-change.vue correctly 1`] = `
 <div>
-  <div class=""><button class="ant-btn" type="button">
+  <!---->
+  <div class=""><button class="ant-btn ant-btn-default" type="button">
       <!----><span>120px to affix top</span>
     </button></div>
 </div>
@@ -26,6 +29,7 @@ exports[`renders ./components/affix/demo/target.vue correctly 1`] = `
 <div id="components-affix-demo-target" class="scrollable-container">
   <div class="background">
     <div>
+      <!---->
       <div class=""><button class="ant-btn ant-btn-primary" type="button">
           <!----><span>Fixed at the top of container</span>
         </button></div>

components/affix/demo/basic.vue

@@ -26,16 +26,8 @@ The simplest usage.
   </a-affix>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-export default defineComponent({
-  setup() {
-    const top = ref<number>(10);
-    const bottom = ref<number>(10);
-    return {
-      top,
-      bottom,
-    };
-  },
-});
+<script lang="ts" setup>
+import { ref } from 'vue';
+const top = ref<number>(10);
+const bottom = ref<number>(10);
 </script>

components/affix/demo/on-change.vue

@@ -21,17 +21,8 @@ Callback with affixed state.
     <a-button>120px to affix top</a-button>
   </a-affix>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  setup() {
-    const change = (affixed: boolean) => {
-      console.log(affixed);
-    };
-
-    return {
-      change,
-    };
-  },
-});
+<script lang="ts" setup>
+const change = (affixed: boolean) => {
+  console.log(affixed);
+};
 </script>

components/affix/demo/target.vue

@@ -25,23 +25,16 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
     </div>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const containerRef = ref();
-    return {
-      containerRef,
-    };
-  },
-});
+<script lang="ts" setup>
+import { ref } from 'vue';
+const containerRef = ref();
 </script>
-<style>
+<style scoped>
 #components-affix-demo-target.scrollable-container {
   height: 100px;
   overflow-y: scroll;
 }
+
 #components-affix-demo-target .background {
   padding-top: 60px;
   height: 300px;

components/alert/__tests__/__snapshots__/demo.test.js.snap

@@ -32,16 +32,8 @@ To show close button.
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  setup() {
-    const onClose = (e: MouseEvent) => {
-      console.log(e, 'I was closed.');
-    };
-    return {
-      onClose,
-    };
-  },
-});
+<script lang="ts" setup>
+const onClose = (e: MouseEvent) => {
+  console.log(e, 'I was closed.');
+};
 </script>

components/alert/demo/closable.vue

@@ -66,12 +66,6 @@ Custom Icon make information more clear and more friendly.
   </a-alert>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { SmileOutlined } from '@ant-design/icons-vue';
-import { defineComponent } from 'vue';
-export default defineComponent({
-  components: {
-    SmileOutlined,
-  },
-});
 </script>

components/alert/demo/custom-icon.vue

@@ -46,7 +46,7 @@ export default defineComponent({
   },
 });
 </script>
-<style>
+<style scoped>
 [id^='components-alert-demo'] .ant-alert {
   margin-bottom: 16px;
 }

components/alert/demo/index.vue

@@ -25,18 +25,10 @@ Smoothly and unaffectedly unmount Alert.
     :after-close="handleClose"
   />
 </template>
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-export default defineComponent({
-  setup() {
-    const visible = ref<boolean>(true);
-    const handleClose = () => {
-      visible.value = false;
-    };
-    return {
-      visible,
-      handleClose,
-    };
-  },
-});
+<script lang="ts" setup>
+import { ref } from 'vue';
+const visible = ref<boolean>(true);
+const handleClose = () => {
+  visible.value = false;
+};
 </script>