Refactor(demo): change options to composition api

.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/demo/closable.vue

@@ -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/custom-icon.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/index.vue

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

components/alert/demo/smooth-closed.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>

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

@@ -3,10 +3,10 @@
 exports[`renders ./components/anchor/demo/basic.vue correctly 1`] = `
 <div>
   <!---->
-  <div class="css-dev-only-do-not-override-1tii49m">
-    <div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
+  <div class="">
+    <div class="ant-anchor-wrapper" style="max-height: 100vh;">
       <div class="ant-anchor"><span class="ant-anchor-ink"></span>
-        <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#part-1" title="Part 1">Part 1</a>
+        <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#part-1" title=""><span style="color: red;">Part 1</span></a>
           <!---->
         </div>
         <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#part-2" title="Part 2">Part 2</a>
@@ -22,7 +22,7 @@ exports[`renders ./components/anchor/demo/basic.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] = `
-<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
+<div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
       <!---->
@@ -31,10 +31,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] =
       <!---->
     </div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
         <!---->
       </div>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
         <!---->
       </div>
     </div>
@@ -46,8 +46,8 @@ exports[`renders ./components/anchor/demo/horizontal.vue correctly 1`] = `
 <div>
   <div>
     <!---->
-    <div class="css-dev-only-do-not-override-1tii49m">
-      <div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper ant-anchor-wrapper-horizontal" style="max-height: 100vh;">
+    <div class="">
+      <div class="ant-anchor-wrapper ant-anchor-wrapper-horizontal" style="max-height: 100vh;">
         <div class="ant-anchor"><span class="ant-anchor-ink"></span>
           <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#horizontally-part-1" title="Part 1">Part 1</a>
             <!---->
@@ -75,7 +75,7 @@ exports[`renders ./components/anchor/demo/horizontal.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
-<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
+<div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
       <!---->
@@ -84,10 +84,10 @@ exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
       <!---->
     </div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
         <!---->
       </div>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
         <!---->
       </div>
     </div>
@@ -96,7 +96,7 @@ exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
-<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
+<div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
       <!---->
@@ -105,10 +105,10 @@ exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
       <!---->
     </div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
         <!---->
       </div>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
         <!---->
       </div>
     </div>
@@ -117,7 +117,7 @@ exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
-<div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
+<div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor ant-anchor-fixed"><span class="ant-anchor-ink"></span>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
       <!---->
@@ -126,10 +126,10 @@ exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
       <!---->
     </div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
         <!---->
       </div>
-      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
+      <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
         <!---->
       </div>
     </div>
@@ -140,8 +140,8 @@ exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
 exports[`renders ./components/anchor/demo/targetOffset.vue correctly 1`] = `
 <div>
   <!---->
-  <div class="css-dev-only-do-not-override-1tii49m">
-    <div class="css-dev-only-do-not-override-1tii49m ant-anchor-wrapper" style="max-height: 100vh;">
+  <div class="">
+    <div class="ant-anchor-wrapper" style="max-height: 100vh;">
       <div class="ant-anchor"><span class="ant-anchor-ink"></span>
         <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
           <!---->
@@ -150,10 +150,10 @@ exports[`renders ./components/anchor/demo/targetOffset.vue correctly 1`] = `
           <!---->
         </div>
         <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
-          <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
+          <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#anchor-props" title="Anchor Props">Anchor Props</a>
             <!---->
           </div>
-          <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Link-Props" title="Link Props">Link Props</a>
+          <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#link-props" title="Link Props">Link Props</a>
             <!---->
           </div>
         </div>

components/anchor/demo/basic.vue

@@ -37,18 +37,6 @@ The simplest usage.
   />
 </template>
 
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const onChange = (link: string) => {
-      console.log('Anchor:OnChange', link);
-    };
-    return {
-      onChange,
-      h,
-    };
-  },
-});
+<script lang="ts" setup>
+import { h } from 'vue';
 </script>

components/anchor/demo/customizeHighlight.vue

@@ -51,17 +51,8 @@ Customize the anchor highlight.
   ></a-anchor>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const getCurrentAnchor = () => {
-      return '#components-anchor-demo-static';
-    };
-    return {
-      getCurrentAnchor,
-    };
-  },
-});
+<script lang="ts" setup>
+const getCurrentAnchor = () => {
+  return '#components-anchor-demo-static';
+};
 </script>

components/anchor/demo/onChange.vue

@@ -51,17 +51,8 @@ Listening for anchor link change.
   ></a-anchor>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    const onChange = (link: string) => {
-      console.log('Anchor:OnChange', link);
-    };
-    return {
-      onChange,
-    };
-  },
-});
+<script lang="ts" setup>
+const onChange = (link: string) => {
+  console.log('Anchor:OnChange', link);
+};
 </script>