style: dmeo

.eslintrc.js

@@ -44,6 +44,16 @@ module.exports = {
     {
       files: ['*.vue'],
       parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+      rules: {
+        'no-console': 'off',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+        ],
+      },
     },
   ],
   rules: {

.prettierrc

@@ -1,9 +1,11 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
+  "endOfLine": "lf",
   "printWidth": 100,
   "proseWrap": "never",
   "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
   "overrides": [
     {
       "files": ".prettierrc",

components/alert/demo/custom-icon.vue

@@ -20,16 +20,16 @@ Custom Icon make information more clear and more friendly.
   <a-alert message="showIcon = false" type="success">
     <template #icon><smile-outlined /></template>
   </a-alert>
-  <a-alert message="Success Tips" type="success" showIcon>
+  <a-alert message="Success Tips" type="success" show-icon>
     <template #icon><smile-outlined /></template>
   </a-alert>
-  <a-alert message="Informational Notes" type="info" showIcon>
+  <a-alert message="Informational Notes" type="info" show-icon>
     <template #icon><smile-outlined /></template>
   </a-alert>
-  <a-alert message="Warning" type="warning" showIcon>
+  <a-alert message="Warning" type="warning" show-icon>
     <template #icon><smile-outlined /></template>
   </a-alert>
-  <a-alert message="Error" type="error" showIcon>
+  <a-alert message="Error" type="error" show-icon>
     <template #icon><smile-outlined /></template>
   </a-alert>
   <a-alert

components/anchor/demo/customizeHighlight.vue

@@ -16,7 +16,7 @@ Customize the anchor highlight.
 </docs>
 
 <template>
-  <a-anchor :affix="false" :getCurrentAnchor="getCurrentAnchor">
+  <a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
     <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
     <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
     <a-anchor-link href="#API" title="API">

components/auto-complete/demo/certain-category.vue

@@ -105,15 +105,15 @@ const dataSource = [
   },
 ];
 export default defineComponent({
+  components: {
+    SearchOutlined,
+  },
   setup() {
     return {
       value: ref(''),
       dataSource,
     };
   },
-  components: {
-    SearchOutlined,
-  },
 });
 </script>
 

components/auto-complete/demo/uncertain-category.vue

@@ -39,7 +39,7 @@ Lookup-Patterns - Uncertain Category.
           <span class="global-search-item-count">{{ item.count }} results</span>
         </a-select-option>
       </template>
-      <a-input-search size="large" placeholder="input here" enterButton></a-input-search>
+      <a-input-search size="large" placeholder="input here" enter-button></a-input-search>
     </a-auto-complete>
   </div>
 </template>

components/breadcrumb/demo/router.vue

@@ -19,7 +19,7 @@ Used together with `vue-router`
 <template>
   <div>
     <a-breadcrumb :routes="routes">
-      <template #itemRender="{ route, routes, paths }">
+      <template #itemRender="{ route, paths }">
         <span v-if="routes.indexOf(route) === routes.length - 1">
           {{ route.breadcrumbName }}
         </span>

components/card/demo/meta.vue

@@ -24,7 +24,7 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
         src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
       />
     </template>
-    <template class="ant-card-actions" #actions>
+    <template #actions class="ant-card-actions">
       <setting-outlined key="setting" />
       <edit-outlined key="edit" />
       <ellipsis-outlined key="ellipsis" />

components/collapse/demo/index.vue

@@ -34,7 +34,7 @@ export default {
     Mix,
     Noarrow,
     Extra,
-    Ghost
+    Ghost,
   },
 };
 </script>

components/color-picker/demo/index.vue

@@ -1,50 +0,0 @@
-<script>
-import Basic from './basic';
-import Colors from './colors';
-import Size from './size';
-import Alpha from './alpha';
-import Hue from './hue';
-
-import CN from '../index.zh-CN.md';
-import US from '../index.en-US.md';
-
-const md = {
-  cn: `# ColorPicker 颜色选择器 (测试版)
-
-      用于颜色选择，支持多种颜色格式，支持颜色预设。
-
-      ## 代码演示
-      `,
-  us: `# ColorPicker (Beta)
-
-      For color selection, support for multiple color formats and color presets.
-
-      ## Examples
-      `,
-};
-
-export default {
-  category: 'Components',
-  subtitle: '取色器',
-  type: 'DataEntry',
-  title: 'ColorPicker',
-  cols: 1,
-  render() {
-    return (
-      <div>
-        <Md cn={md.cn} us={md.us} />
-        <demo-sort cols={2}>
-          <Basic />
-          <Alpha />
-          <Hue />
-          <Colors />
-          <Size />
-        </demo-sort>
-        <api vSlots={{ cn: () => <CN /> }}>
-          <US />
-        </api>
-      </div>
-    );
-  },
-};
-</script>

components/comment/demo/editor.vue

@@ -43,7 +43,7 @@ Comment can be used as editor, user can customize the editor component.
     </template>
     <template #content>
       <a-form-item>
-        <a-textarea :rows="4" v-model:value="value" />
+        <a-textarea v-model:value="value" :rows="4" />
       </a-form-item>
       <a-form-item>
         <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">

components/date-picker/demo/disabled-date.vue

@@ -35,8 +35,8 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
       :disabled-date="disabledDate"
     />
     <a-range-picker
-      style="width: 400px"
       v-model:value="value4"
+      style="width: 400px"
       :disabled-date="disabledDate"
       :disabled-time="disabledRangeTime"
       :show-time="{

components/date-picker/demo/index.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     Suffix,
     SelectInRnage,
     Bordered,
-    RangePicker
+    RangePicker,
   },
 });
 </script>

components/date-picker/demo/presetted-ranges.vue

@@ -20,8 +20,8 @@ We can set presetted ranges to RangePicker to improve user experience.
   <a-space direction="vertical" :size="12">
     <a-range-picker v-model:value="value1" :ranges="ranges" />
     <a-range-picker
-      style="width: 400px"
       v-model:value="value2"
+      style="width: 400px"
       :ranges="ranges"
       show-time
       format="YYYY/MM/DD HH:mm:ss"

components/date-picker/demo/range-picker.vue

@@ -19,7 +19,7 @@ Set range picker type by `picker` prop.
 <template>
   <a-space direction="vertical" :size="12">
     <a-range-picker v-model:value="value1" />
-    <a-range-picker v-model:value="value2" showTime />
+    <a-range-picker v-model:value="value2" show-time />
     <a-range-picker v-model:value="value3" picker="week"/>
     <a-range-picker v-model:value="value4" picker="month"/>
     <a-range-picker v-model:value="value5" picker="year"/>

components/date-picker/demo/suffix.vue

@@ -23,7 +23,7 @@ Customize the suffix icon through `suffixIcon`
         <SmileOutlined />
       </template>
     </a-date-picker>
-    <a-date-picker @change="onChange" placeholder="Select month" picker="month">
+    <a-date-picker placeholder="Select month" picker="month" @change="onChange">
       <template #suffixIcon>
         <SmileOutlined />
       </template>
@@ -33,15 +33,15 @@ Customize the suffix icon through `suffixIcon`
         <SmileOutlined />
       </template>
     </a-range-picker>
-    <a-date-picker @change="onChange" placeholder="Select week" picker="week">
+    <a-date-picker placeholder="Select week" picker="week" @change="onChange">
       <template #suffixIcon>
         <SmileOutlined />
       </template>
     </a-date-picker>
     <a-date-picker suffix-icon="ab" @change="onChange" />
-    <a-date-picker suffix-icon="ab" placeholder="Select month" @change="onChange" picker="month"/>
+    <a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange"/>
     <a-range-picker suffix-icon="ab" @change="onChange" />
-    <a-date-picker suffix-icon="ab" placeholder="Select week" @change="onChange" picker="week"/>
+    <a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange"/>
   </a-space>
 </template>
 <script lang="ts">

components/drawer/demo/basic.vue

@@ -19,10 +19,10 @@ Basic drawer.
 <template>
   <a-button type="primary" @click="showDrawer">Open</a-button>
   <a-drawer
+    v-model:visible="visible"
     title="Basic Drawer"
     placement="right"
     :closable="false"
-    v-model:visible="visible"
     :after-visible-change="afterVisibleChange"
   >
     <p>Some contents...</p>

components/drawer/demo/form-in-drawer.vue

@@ -50,7 +50,7 @@ Use form in drawer with submit button.
       <a-row :gutter="16">
         <a-col :span="12">
           <a-form-item label="Owner" name="owner">
-            <a-select placeholder="Please a-s an owner" v-model:value="form.owner">
+            <a-select v-model:value="form.owner" placeholder="Please a-s an owner">
               <a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
               <a-select-option value="mao">Maomao Zhou</a-select-option>
             </a-select>
@@ -58,7 +58,7 @@ Use form in drawer with submit button.
         </a-col>
         <a-col :span="12">
           <a-form-item label="Type" name="type">
-            <a-select placeholder="Please choose the type" v-model:value="form.type">
+            <a-select v-model:value="form.type" placeholder="Please choose the type">
               <a-select-option value="private">Private</a-select-option>
               <a-select-option value="public">Public</a-select-option>
             </a-select>
@@ -68,7 +68,7 @@ Use form in drawer with submit button.
       <a-row :gutter="16">
         <a-col :span="12">
           <a-form-item label="Approver" name="approver">
-            <a-select placeholder="Please choose the approver" v-model:value="form.approver">
+            <a-select v-model:value="form.approver" placeholder="Please choose the approver">
               <a-select-option value="jack">Jack Ma</a-select-option>
               <a-select-option value="tom">Tom Liu</a-select-option>
             </a-select>

components/drawer/demo/placement.vue

@@ -17,7 +17,7 @@ The Drawer can appear from any edge of the screen.
 </docs>
 
 <template>
-  <a-radio-group style="margin-right: 8px" v-model:value="placement">
+  <a-radio-group v-model:value="placement" style="margin-right: 8px">
     <a-radio value="top">top</a-radio>
     <a-radio value="right">right</a-radio>
     <a-radio value="bottom">bottom</a-radio>

components/dropdown/demo/dropdown-button.vue

@@ -105,6 +105,10 @@ import { defineComponent } from 'vue';
 import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
+  components: {
+    UserOutlined,
+    DownOutlined,
+  },
   setup() {
     const handleButtonClick = (e: Event) => {
       console.log('click left button', e);
@@ -117,10 +121,6 @@ export default defineComponent({
       handleMenuClick,
     };
   },
-  components: {
-    UserOutlined,
-    DownOutlined,
-  },
 });
 </script>
 <style lang="less" scoped>

components/dropdown/demo/event.vue

@@ -43,6 +43,9 @@ interface MenuInfo {
 }
 
 export default defineComponent({
+  components: {
+    DownOutlined,
+  },
   setup() {
     const onClick = ({ key }: MenuInfo) => {
       console.log(`Click on item ${key}`);
@@ -51,8 +54,5 @@ export default defineComponent({
       onClick,
     };
   },
-  components: {
-    DownOutlined,
-  },
 });
 </script>

components/dropdown/demo/overlay-visible.vue

@@ -42,6 +42,9 @@ interface MenuInfo {
   domEvent: MouseEvent;
 }
 export default defineComponent({
+  components: {
+    DownOutlined,
+  },
   setup() {
     const visible = ref(false);
     const handleMenuClick = (e: MenuInfo) => {
@@ -54,8 +57,5 @@ export default defineComponent({
       handleMenuClick,
     };
   },
-  components: {
-    DownOutlined,
-  },
 });
 </script>

components/empty/demo/config-provider.vue

@@ -18,9 +18,9 @@ Use ConfigProvider set global Empty style.
 
 <template>
   <a-switch
+    v-model:checked="customize"
     un-checked-children="default"
     checked-children="customize"
-    v-model:checked="customize"
   />
   <a-divider />
   <a-config-provider>

components/form/demo/custom-validation.vue

@@ -20,8 +20,8 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
 
 <template>
   <a-form
-    name="custom-validation"
     ref="formRef"
+    name="custom-validation"
     :model="formState"
     :rules="rules"
     v-bind="layout"

components/form/demo/dynamic-form-item.vue

@@ -63,6 +63,10 @@ interface Domain {
   key: number;
 }
 export default defineComponent({
+  components: {
+    MinusCircleOutlined,
+    PlusOutlined,
+  },
   setup() {
     const formRef = ref();
     const formItemLayout = {
@@ -120,10 +124,6 @@ export default defineComponent({
       addDomain,
     };
   },
-  components: {
-    MinusCircleOutlined,
-    PlusOutlined,
-  },
 });
 </script>
 <style>

components/form/demo/horizontal-login.vue

@@ -52,6 +52,10 @@ interface FormState {
   password: string;
 }
 export default defineComponent({
+  components: {
+    UserOutlined,
+    LockOutlined,
+  },
   setup() {
     const formState: UnwrapRef<FormState> = reactive({
       user: '',
@@ -69,9 +73,5 @@ export default defineComponent({
       handleFinishFailed,
     };
   },
-  components: {
-    UserOutlined,
-    LockOutlined,
-  },
 });
 </script>

components/form/demo/index.vue

@@ -46,7 +46,7 @@ export default {
     UseFormNested,
     UseFormTrigger,
     UseFormMerge,
-    LableWidth
+    LableWidth,
   },
 };
 </script>

components/icon/demo/two-tone.vue

@@ -19,8 +19,8 @@ You can set `twoToneColor` prop to specific primary color for two-tone icons.
 <template>
   <div class="icons-list">
     <SmileTwoTone />
-    <HeartTwoTone twoToneColor="#eb2f96" />
+    <HeartTwoTone two-tone-color="#eb2f96" />
-    <CheckCircleTwoTone twoToneColor="#52c41a" />
+    <CheckCircleTwoTone two-tone-color="#52c41a" />
   </div>
 </template>
 <script>

components/input-number/demo/disabled.vue

@@ -18,7 +18,7 @@ Click the button to toggle between available and disabled states.
 
 <template>
   <div>
-    <a-input-number :min="1" :max="10" :disabled="disabled" v-model:value="value" />
+    <a-input-number v-model:value="value" :min="1" :max="10" :disabled="disabled" />
     <div style="margin-top: 20px">
       <a-button type="primary" @click="toggle">Toggle disabled</a-button>
     </div>

components/input-number/demo/size.vue

@@ -18,9 +18,9 @@ There are three sizes available to a numeric input box. By default, the size is
 
 <template>
   <div>
-    <a-input-number size="large" :min="1" :max="100000" v-model:value="value1" />
+    <a-input-number v-model:value="value1" size="large" :min="1" :max="100000" />
-    <a-input-number :min="1" :max="100000" v-model:value="value2" />
+    <a-input-number v-model:value="value2" :min="1" :max="100000" />
-    <a-input-number size="small" :min="1" :max="100000" v-model:value="value3" />
+    <a-input-number v-model:value="value3" size="small" :min="1" :max="100000" />
   </div>
 </template>
 <script lang="ts">

components/input/demo/addon.vue

@@ -18,7 +18,7 @@ Using pre & post tabs example.
 <template>
   <div>
     <div style="margin-bottom: 16px">
-      <a-input addon-before="Http://" addon-after=".com" v-model:value="value1" />
+      <a-input v-model:value="value1" addon-before="Http://" addon-after=".com" />
     </div>
     <div style="margin-bottom: 16px">
       <a-input v-model:value="value2">

components/input/demo/group.vue

@@ -31,8 +31,8 @@ Note: You don't need `Col` to control the width in the `compact` mode.
     </a-input-group>
     <br />
     <a-input-group compact>
-      <a-input style="width: 20%" v-model:value="value1" />
+      <a-input v-model:value="value1" style="width: 20%" />
-      <a-input style="width: 30%" v-model:value="value2" />
+      <a-input v-model:value="value2" style="width: 30%" />
     </a-input-group>
     <br />
     <a-input-group compact>
@@ -40,7 +40,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         <a-select-option value="Zhejiang">Zhejiang</a-select-option>
         <a-select-option value="Jiangsu">Jiangsu</a-select-option>
       </a-select>
-      <a-input style="width: 50%" v-model:value="value4" />
+      <a-input v-model:value="value4" style="width: 50%" />
     </a-input-group>
     <br />
     <a-input-group compact>
@@ -48,11 +48,11 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         <a-select-option value="Option1">Option1</a-select-option>
         <a-select-option value="Option2">Option2</a-select-option>
       </a-select>
-      <a-input style="width: 50%" v-model:value="value6" />
+      <a-input v-model:value="value6" style="width: 50%" />
     </a-input-group>
     <br />
     <a-input-group compact>
-      <a-input style="width: 50%" v-model:value="value7" />
+      <a-input v-model:value="value7" style="width: 50%" />
       <a-date-picker v-model:value="value8" style="width: 50%" />
     </a-input-group>
     <br />

components/input/demo/presuffix.vue

@@ -17,7 +17,7 @@ Add prefix or suffix icons inside input.
 </docs>
 <template>
   <div class="components-input-demo-presuffix">
-    <a-input placeholder="Basic usage" v-model:value="userName">
+    <a-input v-model:value="userName" placeholder="Basic usage">
       <template #prefix>
         <user-outlined type="user" />
       </template>

components/input/demo/show-count.vue

@@ -16,7 +16,7 @@ Show character counting.
 
 </docs>
 <template>
-  <a-textarea v-model:value="value" showCount :maxlength="100" />
+  <a-textarea v-model:value="value" show-count :maxlength="100" />
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';

components/layout/demo/custom-trigger.vue

@@ -19,7 +19,7 @@ If you want to use a customized trigger, you can hide the default one by setting
   <a-layout>
     <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
       <div class="logo" />
-      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
+      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="1">
           <user-outlined />
           <span>nav 1</span>

components/layout/demo/fixed-sider.vue

@@ -20,7 +20,7 @@ When dealing with long content, a fixed sider can provide a better user experien
   <a-layout>
     <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
       <div class="logo" />
-      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
+      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="1">
           <user-outlined />
           <span class="nav-text">nav 1</span>
@@ -175,11 +175,6 @@ import {
 } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
-  setup() {
-    return {
-      selectedKeys: ref<string[]>(['4']),
-    };
-  },
   components: {
     UserOutlined,
     VideoCameraOutlined,
@@ -190,6 +185,11 @@ export default defineComponent({
     TeamOutlined,
     ShopOutlined,
   },
+  setup() {
+    return {
+      selectedKeys: ref<string[]>(['4']),
+    };
+  },
 });
 </script>
 

components/layout/demo/fixed.vue

@@ -21,9 +21,9 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
     <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
       <div class="logo" />
       <a-menu
+        v-model:selectedKeys="selectedKeys"
         theme="dark"
         mode="horizontal"
-        v-model:selectedKeys="selectedKeys"
         :style="{ lineHeight: '64px' }"
       >
         <a-menu-item key="1">nav 1</a-menu-item>

components/layout/demo/responsive.vue

@@ -26,7 +26,7 @@ Layout.Sider supports responsive layout.
       @breakpoint="onBreakpoint"
     >
       <div class="logo" />
-      <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
+      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="1">
           <user-outlined />
           <span class="nav-text">nav 1</span>

components/layout/demo/side.vue

@@ -23,7 +23,7 @@ The level of the aside navigation is scalable. The first, second, and third leve
   <a-layout style="min-height: 100vh">
     <a-layout-sider v-model:collapsed="collapsed" collapsible>
       <div class="logo" />
-      <a-menu theme="dark" v-model:selectedKeys="selectedKeys" mode="inline">
+      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="1">
           <pie-chart-outlined />
           <span>Option 1</span>

components/layout/demo/top-side-2.vue

@@ -20,9 +20,9 @@ Both the top navigation and the sidebar, commonly used in application site.
     <a-layout-header class="header">
       <div class="logo" />
       <a-menu
+        v-model:selectedKeys="selectedKeys1"
         theme="dark"
         mode="horizontal"
-        v-model:selectedKeys="selectedKeys1"
         :style="{ lineHeight: '64px' }"
       >
         <a-menu-item key="1">nav 1</a-menu-item>
@@ -33,9 +33,9 @@ Both the top navigation and the sidebar, commonly used in application site.
     <a-layout>
       <a-layout-sider width="200" style="background: #fff">
         <a-menu
-          mode="inline"
           v-model:selectedKeys="selectedKeys2"
           v-model:openKeys="openKeys"
+          mode="inline"
           :style="{ height: '100%', borderRight: 0 }"
         >
           <a-sub-menu key="sub1">

components/layout/demo/top-side.vue

@@ -20,9 +20,9 @@ Both the top navigation and the sidebar, commonly used in documentation site.
     <a-layout-header class="header">
       <div class="logo" />
       <a-menu
+        v-model:selectedKeys="selectedKeys1"
         theme="dark"
         mode="horizontal"
-        v-model:selectedKeys="selectedKeys1"
         :style="{ lineHeight: '64px' }"
       >
         <a-menu-item key="1">nav 1</a-menu-item>
@@ -39,9 +39,9 @@ Both the top navigation and the sidebar, commonly used in documentation site.
       <a-layout style="padding: 24px 0; background: #fff">
         <a-layout-sider width="200" style="background: #fff">
           <a-menu
-            mode="inline"
             v-model:selectedKeys="selectedKeys2"
             v-model:openKeys="openKeys"
+            mode="inline"
             style="height: 100%"
           >
             <a-sub-menu key="sub1">

components/layout/demo/top.vue

@@ -24,9 +24,9 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
     <a-layout-header>
       <div class="logo" />
       <a-menu
+        v-model:selectedKeys="selectedKeys"
         theme="dark"
         mode="horizontal"
-        v-model:selectedKeys="selectedKeys"
         :style="{ lineHeight: '64px' }"
       >
         <a-menu-item key="1">nav 1</a-menu-item>

components/list/demo/vertical.vue

@@ -28,7 +28,7 @@ Setting `itemLayout` property with `vertical` to create a vertical list.
       <a-list-item key="item.title">
         <template #actions>
           <span v-for="{ type, text } in actions" :key="type">
-            <component v-bind:is="type" style="margin-right: 8px" />
+            <component :is="type" style="margin-right: 8px" />
             {{ text }}
           </span>
         </template>

components/mentions/demo/basic.vue

@@ -16,7 +16,7 @@ Basic usage.
 
 </docs>
 <template>
-  <a-mentions autofocus v-model:value="value" @select="onSelect">
+  <a-mentions v-model:value="value" autofocus @select="onSelect">
     <a-mentions-option value="afc163">afc163</a-mentions-option>
     <a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
     <a-mentions-option value="yesmeck">yesmeck</a-mentions-option>

components/mentions/demo/form.vue

@@ -24,7 +24,7 @@ to work with `Form`.
       name="coders"
       v-bind="validateInfos.coders"
     >
-      <a-mentions rows="1" v-model:value="modelRef.coders">
+      <a-mentions v-model:value="modelRef.coders" rows="1">
         <a-mentions-option value="afc163">afc163</a-mentions-option>
         <a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
         <a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
@@ -38,9 +38,9 @@ to work with `Form`.
       v-bind="validateInfos.bio"
     >
       <a-mentions
+        v-model:value="modelRef.bio"
         rows="3"
         placeholder="You can use @ to ref user here"
-        v-model:value="modelRef.bio"
       >
         <a-mentions-option value="afc163">afc163</a-mentions-option>
         <a-mentions-option value="zombieJ">zombieJ</a-mentions-option>

components/mentions/demo/prefix.vue

@@ -22,8 +22,8 @@ Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also
     :prefix="['@', '#']"
     @search="onSearch"
   >
-    <a-mentions-option v-for="value in options" :key="value" :value="value">
+    <a-mentions-option v-for="val in options" :key="val" :value="val">
-      {{ value }}
+      {{ val }}
     </a-mentions-option>
   </a-mentions>
 </template>

components/menu/demo/horizontal.vue

@@ -55,16 +55,16 @@ Horizontal top navigation menu.
 import { defineComponent, ref } from 'vue';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
+  components: {
+    MailOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+  },
   setup() {
     const current = ref<string[]>(['mail']);
     return {
       current,
     };
   },
-  components: {
-    MailOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
 });
 </script>

components/menu/demo/inline-collapsed.vue

@@ -22,16 +22,16 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
 
 <template>
   <div style="width: 256px">
-    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
+    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
       <MenuUnfoldOutlined v-if="collapsed" />
       <MenuFoldOutlined v-else />
     </a-button>
     <a-menu
+      v-model:openKeys="openKeys"
+      v-model:selectedKeys="selectedKeys"
       mode="inline"
       theme="dark"
       :inline-collapsed="collapsed"
-      v-model:openKeys="openKeys"
-      v-model:selectedKeys="selectedKeys"
     >
       <a-menu-item key="1">
         <template #icon>
@@ -89,6 +89,15 @@ import {
   AppstoreOutlined,
 } from '@ant-design/icons-vue';
 export default defineComponent({
+  components: {
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    PieChartOutlined,
+    MailOutlined,
+    DesktopOutlined,
+    InboxOutlined,
+    AppstoreOutlined,
+  },
   setup() {
     const state = reactive({
       collapsed: false,
@@ -113,14 +122,5 @@ export default defineComponent({
       toggleCollapsed,
     };
   },
-  components: {
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    PieChartOutlined,
-    MailOutlined,
-    DesktopOutlined,
-    InboxOutlined,
-    AppstoreOutlined,
-  },
 });
 </script>

components/menu/demo/inline.vue

@@ -18,9 +18,9 @@ Vertical menu with inline submenus.
 <template>
   <a-menu
     id="dddddd"
-    style="width: 256px"
     v-model:openKeys="openKeys"
     v-model:selectedKeys="selectedKeys"
+    style="width: 256px"
     mode="inline"
     @click="handleClick"
   >
@@ -70,6 +70,12 @@ Vertical menu with inline submenus.
 import { defineComponent, ref, watch } from 'vue';
 import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
+  components: {
+    MailOutlined,
+    QqOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+  },
   setup() {
     const selectedKeys = ref<string[]>(['1']);
     const openKeys = ref<string[]>(['sub1']);
@@ -93,11 +99,5 @@ export default defineComponent({
       titleClick,
     };
   },
-  components: {
-    MailOutlined,
-    QqOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
 });
 </script>

components/menu/demo/sider-current.vue

@@ -19,10 +19,10 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 <template>
   <div>
     <a-menu
+      v-model:selectedKeys="selectedKeys"
       style="width: 256px"
       mode="inline"
-      :openKeys="openKeys"
+      :open-keys="openKeys"
-      v-model:selectedKeys="selectedKeys"
       @openChange="onOpenChange"
     >
       <a-sub-menu key="sub1">
@@ -65,6 +65,11 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 import { defineComponent, reactive, toRefs } from 'vue';
 import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
+  components: {
+    MailOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+  },
   setup() {
     const state = reactive({
       rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
@@ -84,10 +89,5 @@ export default defineComponent({
       onOpenChange,
     };
   },
-  components: {
-    MailOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
 });
 </script>

components/menu/demo/switch-mode.vue

@@ -26,9 +26,9 @@ Show the dynamic switching mode (between `inline` and `vertical`).
     <br />
     <br />
     <a-menu
-      style="width: 256px"
       v-model:openKeys="openKeys"
       v-model:selectedKeys="selectedKeys"
+      style="width: 256px"
       :mode="mode"
       :theme="theme"
     >
@@ -79,6 +79,12 @@ import {
   SettingOutlined,
 } from '@ant-design/icons-vue';
 export default defineComponent({
+  components: {
+    MailOutlined,
+    CalendarOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+  },
   setup() {
     const state = reactive({
       mode: 'inline',
@@ -98,11 +104,5 @@ export default defineComponent({
       changeTheme,
     };
   },
-  components: {
-    MailOutlined,
-    CalendarOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
 });
 </script>

components/menu/demo/template.vue

@@ -16,7 +16,7 @@ Use the single file method to recursively generate menus.
 
 <template>
   <div style="width: 256px">
-    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
+    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
       <MenuUnfoldOutlined v-if="collapsed" />
       <MenuFoldOutlined v-else />
     </a-button>
@@ -37,7 +37,7 @@ Use the single file method to recursively generate menus.
           </a-menu-item>
         </template>
         <template v-else>
-          <sub-menu :menu-info="item" :key="item.key" />
+          <sub-menu :key="item.key" :menu-info="item" />
         </template>
       </template>
     </a-menu>
@@ -103,6 +103,12 @@ const list = [
   },
 ];
 export default defineComponent({
+  components: {
+    'sub-menu': SubMenu,
+    MenuFoldOutlined,
+    MenuUnfoldOutlined,
+    PieChartOutlined,
+  },
   setup() {
     const collapsed = ref<boolean>(false);
 
@@ -115,11 +121,5 @@ export default defineComponent({
       toggleCollapsed,
     };
   },
-  components: {
-    'sub-menu': SubMenu,
-    MenuFoldOutlined,
-    MenuUnfoldOutlined,
-    PieChartOutlined,
-  },
 });
 </script>

components/menu/demo/theme.vue

@@ -27,9 +27,9 @@ There are two built-in themes: `light` and `dark`. The default value is `light`.
     <br />
     <br />
     <a-menu
-      style="width: 256px"
       v-model:openKeys="openKeys"
       v-model:selectedKeys="selectedKeys"
+      style="width: 256px"
       mode="inline"
       :theme="theme"
     >
@@ -79,6 +79,12 @@ import {
   SettingOutlined,
 } from '@ant-design/icons-vue';
 export default defineComponent({
+  components: {
+    MailOutlined,
+    CalendarOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+  },
   setup() {
     const state = reactive({
       theme: 'dark',
@@ -94,11 +100,5 @@ export default defineComponent({
       changeTheme,
     };
   },
-  components: {
-    MailOutlined,
-    CalendarOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
 });
 </script>

components/menu/demo/vertical.vue

@@ -76,6 +76,12 @@ interface MenuInfo {
   domEvent: MouseEvent;
 }
 export default defineComponent({
+  components: {
+    MailOutlined,
+    CalendarOutlined,
+    AppstoreOutlined,
+    SettingOutlined,
+  },
   setup() {
     const state = reactive({
       selectedKeys: [],
@@ -89,11 +95,5 @@ export default defineComponent({
       handleClick,
     };
   },
-  components: {
-    MailOutlined,
-    CalendarOutlined,
-    AppstoreOutlined,
-    SettingOutlined,
-  },
 });
 </script>

components/modal/demo/async.vue

@@ -21,8 +21,8 @@ you can use this pattern when you submit a form.
   <div>
     <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
     <a-modal
-      title="Title"
       v-model:visible="visible"
+      title="Title"
       :confirm-loading="confirmLoading"
       @ok="handleOk"
     >

components/modal/demo/fullscreen.vue

@@ -22,9 +22,9 @@ Full screen by custom style.
     <a-modal
       v-model:visible="visible"
       title="Basic Modal"
-      @ok="handleOk"
       width="100%"
-      wrapClassName="full-modal"
+      wrap-class-name="full-modal"
+      @ok="handleOk"
     >
       <p>Some contents...</p>
       <p>Some contents...</p>

components/modal/demo/position.vue

@@ -22,9 +22,9 @@ You can use `centered`,`style.top` or other styles to set position of modal dial
       Display a modal dialog at 20px to Top
     </a-button>
     <a-modal
+      v-model:visible="modal1Visible"
       title="20px to Top"
       style="top: 20px"
-      v-model:visible="modal1Visible"
       @ok="setModal1Visible(false)"
     >
       <p>some contents...</p>

components/page-header/demo/actions.vue

@@ -47,7 +47,7 @@ Use the operating area and customize the sub-nodes, suitable for use in the need
       <template #tags>
         <a-tag color="blue">Running</a-tag>
       </template>
-      <template v-slot:extra>
+      <template #extra>
         <a-button key="3">Operation</a-button>
         <a-button key="2">Operation</a-button>
         <a-button key="1" type="primary">Primary</a-button>

components/page-header/demo/content.vue

@@ -25,10 +25,10 @@ Show all props provided by PageHeader.
       :avatar="{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }"
       :breadcrumb="{ routes }"
     >
-      <template v-slot:tags>
+      <template #tags>
         <a-tag color="blue">Running</a-tag>
       </template>
-      <template v-slot:extra>
+      <template #extra>
         <a-button key="3">Operation</a-button>
         <a-button key="2">Operation</a-button>
         <a-button key="1" type="primary">Primary</a-button>
@@ -36,7 +36,7 @@ Show all props provided by PageHeader.
           <a-button :style="{ border: 'none', padding: 0 }">
             <EllipsisOutlined :style="{ fontSize: '20px', verticalAlign: 'top' }" />
           </a-button>
-          <template v-slot:overlay>
+          <template #overlay>
             <a-menu>
               <a-menu-item>
                 <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
@@ -128,15 +128,15 @@ const iconLinks: IconLink[] = [
 ];
 
 export default defineComponent({
+  components: {
+    EllipsisOutlined,
+  },
   setup() {
     return {
       routes,
       iconLinks,
     };
   },
-  components: {
-    EllipsisOutlined,
-  },
 });
 </script>
 <style scoped>

components/pagination/demo/changer.vue

@@ -18,9 +18,9 @@ Change `pageSize`.
 <template>
   <div>
     <a-pagination
-      show-size-changer
       v-model:current="current1"
       v-model:pageSize="pageSize"
+      show-size-changer
       :total="500"
       @showSizeChange="onShowSizeChange"
     />

components/pagination/demo/itemRender.vue

@@ -17,7 +17,7 @@ Use text link for prev and next button.
 
 <template>
   <a-pagination v-model:current="current" :total="500">
-    <template #itemRender="{ page, type, originalElement }">
+    <template #itemRender="{ type, originalElement }">
       <a v-if="type === 'prev'">Previous</a>
       <a v-else-if="type === 'next'">Next</a>
       <component :is="originalElement" v-else></component>

components/pagination/demo/jump.vue

@@ -16,11 +16,11 @@ Jump to a page directly.
 </docs>
 <template>
   <div>
-    <a-pagination show-quick-jumper v-model:current="current1" :total="500" @change="onChange" />
+    <a-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" />
     <br />
     <a-pagination
-      show-quick-jumper
       v-model:current="current2"
+      show-quick-jumper
       :total="500"
       disabled
       show-less-items

components/pagination/demo/simple.vue

@@ -15,7 +15,7 @@ title:
 Simple mode.
 </docs>
 <template>
-  <a-pagination simple v-model:current="current" :total="50" />
+  <a-pagination v-model:current="current" simple :total="50" />
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';

components/pagination/demo/total.vue

@@ -18,17 +18,17 @@ You can show the total number of data by setting `showTotal`.
 <template>
   <div>
     <a-pagination
+      v-model:current="current1"
       :total="85"
       :show-total="total => `Total ${total} items`"
       :page-size="20"
-      v-model:current="current1"
     />
     <br />
     <a-pagination
+      v-model:current="current2"
       :total="85"
       :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
       :page-size="20"
-      v-model:current="current2"
     />
   </div>
 </template>

components/radio/demo/radioButton.vue

@@ -34,7 +34,7 @@ The combination of radio button style.
       </a-radio-group>
     </div>
     <div :style="{ marginTop: '16px' }">
-      <a-radio-group disabled v-model:value="value3">
+      <a-radio-group v-model:value="value3" disabled>
         <a-radio-button value="a">Hangzhou</a-radio-button>
         <a-radio-button value="b">Shanghai</a-radio-button>
         <a-radio-button value="c">Beijing</a-radio-button>

components/radio/demo/radioGroup-options.vue

@@ -17,7 +17,7 @@ Render radios by configuring `options`.
 </docs>
 <template>
   <div>
-    <a-radio-group :options="plainOptions" v-model:value="value1" />
+    <a-radio-group v-model:value="value1" :options="plainOptions" />
     <br />
     <a-radio-group v-model:value="value2" :options="options" />
     <br />

components/radio/demo/radioGroup-with-name.vue

@@ -16,7 +16,7 @@ Passing the `name` property to all `input[type="radio"]` that are in the same Ra
 
 </docs>
 <template>
-  <a-radio-group name="radioGroup" v-model:value="value">
+  <a-radio-group v-model:value="value" name="radioGroup">
     <a-radio value="1">A</a-radio>
     <a-radio value="2">B</a-radio>
     <a-radio value="3">C</a-radio>

components/rate/demo/character.vue

@@ -17,7 +17,7 @@ Replace the default star to other character like alphabet, digit, iconfont or ev
 </docs>
 <template>
   <div>
-    <a-rate v-model:value="value1" allowHalf>
+    <a-rate v-model:value="value1" allow-half>
       <template #character>
         <heart-outlined />
       </template>
@@ -33,6 +33,9 @@ Replace the default star to other character like alphabet, digit, iconfont or ev
 import { HeartOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
+  components: {
+    HeartOutlined,
+  },
   setup() {
     const value1 = ref<number>(2);
     const value2 = ref<number>(2.5);
@@ -43,8 +46,5 @@ export default defineComponent({
       value3,
     };
   },
-  components: {
-    HeartOutlined,
-  },
 });
 </script>

components/rate/demo/clear.vue

@@ -20,7 +20,7 @@ Support set allow to clear star when click again.
     <a-rate v-model:value="value1" />
     <span class="ant-rate-text">allowClear: true</span>
     <br />
-    <a-rate :allow-clear="false" v-model:value="value2" />
+    <a-rate v-model:value="value2" :allow-clear="false" />
     <span class="ant-rate-text">allowClear: false</span>
   </div>
 </template>

components/skeleton/demo/list.vue

@@ -24,7 +24,7 @@ Use skeleton in list component.
         <a-list-item key="item.title">
           <template v-if="!loading" #actions>
             <span v-for="{ type, text } in actions" :key="type">
-              <component v-bind:is="type" style="margin-right: 8px"></component>
+              <component :is="type" style="margin-right: 8px"></component>
               {{ text }}
             </span>
           </template>

components/slider/demo/basic.vue

@@ -18,9 +18,9 @@ Basic slider. When `range` is `true`, display as dual thumb mode. When `disable`
 <template>
   <div>
     <a-slider id="test" v-model:value="value1" :disabled="disabled" />
-    <a-slider range v-model:value="value2" :disabled="disabled" />
+    <a-slider v-model:value="value2" range :disabled="disabled" />
     Disabled:
-    <a-switch size="small" v-model:checked="disabled" />
+    <a-switch v-model:checked="disabled" size="small" />
   </div>
 </template>
 <script lang="ts">

components/slider/demo/event.vue

@@ -18,7 +18,7 @@ The `onChange` callback function will fire when the user changes the slider's va
 <template>
   <div class="code-box-demo">
     <a-slider v-model:value="value1" @afterChange="onAfterChange" />
-    <a-slider range :step="10" v-model:value="value2" @afterChange="onAfterChange" />
+    <a-slider v-model:value="value2" range :step="10" @afterChange="onAfterChange" />
   </div>
 </template>
 <script lang="ts">

components/slider/demo/icon-slider.vue

@@ -18,7 +18,7 @@ You can add an icon beside the slider to make it meaningful.
 <template>
   <div class="icon-wrapper">
     <frown-outlined :style="{ color: preColor }" />
-    <a-slider :min="0" :max="20" v-model:value="sliderValue" />
+    <a-slider v-model:value="sliderValue" :min="0" :max="20" />
     <smile-outlined :style="{ color: nextColor }" />
   </div>
 </template>

components/slider/demo/mark.vue

@@ -18,46 +18,56 @@ Using `marks` property to mark a graduated slider, use `value` to specify the po
 <template>
   <div id="components-slider-demo-mark">
     <h4>included=true</h4>
-    <a-slider :marks="marks" v-model:value="value1">
+    <a-slider v-model:value="value1" :marks="marks">
-      <template #mark="{label, point }">
+      <template #mark="{ label, point }">
-        <template v-if="point === 100"><strong>{{label}}</strong></template>
+        <template v-if="point === 100">
-        <template v-else>{{label}}</template>
+          <strong>{{ label }}</strong>
+        </template>
+        <template v-else>{{ label }}</template>
       </template>
     </a-slider>
-    <a-slider range :marks="marks" v-model:value="value2">
+    <a-slider v-model:value="value2" range :marks="marks">
-      <template #mark="{label, point }">
+      <template #mark="{ label, point }">
-        <template v-if="point === 100"><strong>{{label}}</strong></template>
+        <template v-if="point === 100">
-        <template v-else>{{label}}</template>
+          <strong>{{ label }}</strong>
+        </template>
+        <template v-else>{{ label }}</template>
       </template>
     </a-slider>
 
     <h4>included=false</h4>
-    <a-slider :marks="marks" :included="false" v-model:value="value3">
+    <a-slider v-model:value="value3" :marks="marks" :included="false">
-      <template #mark="{label, point }">
+      <template #mark="{ label, point }">
-        <template v-if="point === 100"><strong>{{label}}</strong></template>
+        <template v-if="point === 100">
-        <template v-else>{{label}}</template>
+          <strong>{{ label }}</strong>
+        </template>
+        <template v-else>{{ label }}</template>
       </template>
     </a-slider>
 
     <h4>marks & step</h4>
-    <a-slider :marks="marks" :step="10" v-model:value="value4">
+    <a-slider v-model:value="value4" :marks="marks" :step="10">
-      <template #mark="{label, point }">
+      <template #mark="{ label, point }">
-        <template v-if="point === 100"><strong>{{label}}</strong></template>
+        <template v-if="point === 100">
-        <template v-else>{{label}}</template>
+          <strong>{{ label }}</strong>
+        </template>
+        <template v-else>{{ label }}</template>
       </template>
     </a-slider>
 
     <h4>step=null</h4>
-    <a-slider :marks="marks" :step="null" v-model:value="value5">
+    <a-slider v-model:value="value5" :marks="marks" :step="null">
-      <template #mark="{label, point }">
+      <template #mark="{ label, point }">
-        <template v-if="point === 100"><strong>{{label}}</strong></template>
+        <template v-if="point === 100">
-        <template v-else>{{label}}</template>
+          <strong>{{ label }}</strong>
+        </template>
+        <template v-else>{{ label }}</template>
       </template>
     </a-slider>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, createVNode, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {

components/slider/demo/reverse.vue

@@ -18,9 +18,9 @@ Using `reverse` to render slider reversely.
 <template>
   <div>
     <a-slider v-model:value="value1" :reverse="reverse" />
-    <a-slider range v-model:value="value2" :reverse="reverse" />
+    <a-slider v-model:value="value2" range :reverse="reverse" />
     Reversed:
-    <a-switch size="small" v-model:checked="reverse" />
+    <a-switch v-model:checked="reverse" size="small" />
   </div>
 </template>
 <script lang="ts">

components/slider/demo/vertical.vue

@@ -18,13 +18,13 @@ The vertical Slider.
 <template>
   <div style="height: 300px">
     <div style="display: inline-block; height: 300px; margin-left: 70px">
-      <a-slider vertical v-model:value="value1" />
+      <a-slider v-model:value="value1" vertical />
     </div>
     <div style="display: inline-block; height: 300px; margin-left: 70px">
-      <a-slider vertical range :step="10" v-model:value="value2" />
+      <a-slider v-model:value="value2" vertical range :step="10" />
     </div>
     <div style="display: inline-block; height: 300px; margin-left: 70px">
-      <a-slider vertical range :marks="marks" v-model:value="value3" />
+      <a-slider v-model:value="value3" vertical range :marks="marks" />
     </div>
   </div>
 </template>

components/steps/demo/index.vue

@@ -46,7 +46,7 @@ export default defineComponent({
     CustomizedProgressDot,
     Clickable,
     Nav,
-    Progress
+    Progress,
   },
   setup() {
     return {};

components/switch/demo/loading.vue

@@ -17,9 +17,9 @@ Mark a pending state of switch.
 </docs>
 <template>
   <div>
-    <a-switch loading v-model:checked="checked1" />
+    <a-switch v-model:checked="checked1" loading />
     <br />
-    <a-switch size="small" loading v-model:checked="checked2" />
+    <a-switch v-model:checked="checked2" size="small" loading />
   </div>
 </template>
 

components/switch/demo/size.vue

@@ -20,7 +20,7 @@ title:
   <div>
     <a-switch v-model:checked="checked1" />
     <br />
-    <a-switch size="small" v-model:checked="checked2" />
+    <a-switch v-model:checked="checked2" size="small" />
   </div>
 </template>
 

components/switch/demo/text.vue

@@ -18,9 +18,9 @@ With text and icon.
 
 <template>
   <div>
-    <a-switch checked-children="开" un-checked-children="关" v-model:checked="checked1" />
+    <a-switch v-model:checked="checked1" checked-children="开" un-checked-children="关" />
     <br />
-    <a-switch checked-children="1" un-checked-children="0" v-model:checked="checked2" />
+    <a-switch v-model:checked="checked2" checked-children="1" un-checked-children="0" />
     <br />
     <a-switch v-model:checked="checked3">
       <template #checkedChildren><check-outlined /></template>
@@ -32,6 +32,11 @@ With text and icon.
 import { defineComponent, reactive, toRefs } from 'vue';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
+
+  components: {
+    CheckOutlined,
+    CloseOutlined,
+  },
   setup() {
     const state = reactive({
       checked1: true,
@@ -40,10 +45,5 @@ export default defineComponent({
     });
     return { ...toRefs(state) };
   },
-
-  components: {
-    CheckOutlined,
-    CloseOutlined,
-  },
 });
 </script>

components/table/demo/basic.vue

@@ -108,15 +108,15 @@ const data = [
 ];
 
 export default defineComponent({
+  components: {
+    SmileOutlined,
+    DownOutlined,
+  },
   setup() {
     return {
       data,
       columns,
     };
   },
-  components: {
-    SmileOutlined,
-    DownOutlined,
-  },
 });
 </script>

components/table/demo/custom-filter-panel.vue

@@ -54,8 +54,8 @@ Implement a customized column search example via `filterDropdown`.
         >
           <mark
             v-if="fragment.toLowerCase() === searchText.toLowerCase()"
-            class="highlight"
             :key="i"
+            class="highlight"
           >
             {{ fragment }}
           </mark>

components/table/demo/edit-cell.vue

@@ -17,7 +17,7 @@ Table with editable cells.
 </docs>
 
 <template>
-  <a-button class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">Add</a-button>
+  <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button>
   <a-table bordered :data-source="dataSource" :columns="columns">
     <template #name="{ text, record }">
       <div class="editable-cell">

components/table/demo/index.vue

@@ -22,7 +22,7 @@
     <RowSelection />
     <Size />
     <Stripe />
-    <Template />
+    <TemplateCom />
   </demo-sort>
 </template>
 
@@ -48,7 +48,7 @@ import RowSelectionAndOperation from './row-selection-and-operation.vue';
 import RowSelectionCustom from './row-selection-custom.vue';
 import RowSelection from './row-selection.vue';
 import Size from './size.vue';
-import Template from './template.vue';
+import TemplateCom from './template.vue';
 import Ellipsis from './ellipsis.vue';
 import Stripe from './stripe.vue';
 import CN from '../index.zh-CN.md';
@@ -79,7 +79,7 @@ export default {
     RowSelectionCustom,
     RowSelection,
     Size,
-    Template,
+    TemplateCom,
     Stripe,
   },
 };

components/table/demo/resizable-column.vue

@@ -1,139 +0,0 @@
-<cn>
-#### 可伸缩列
-集成 [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable) 来实现可伸缩列。
-</cn>
-
-<us>
-#### Resizable column
-Implement resizable column by integrate with [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable).
-</us>
-
-<template>
-  <a-table bordered :columns="columns" :components="components" :data-source="data">
-    <template #action>
-      <a>Delete</a>
-    </template>
-  </a-table>
-</template>
-
-<script lang="ts">
-import { reactive } from 'vue';
-const columns = [
-  {
-    title: 'Date',
-    dataIndex: 'date',
-    width: 200,
-  },
-  {
-    title: 'Amount',
-    dataIndex: 'amount',
-    width: 100,
-  },
-  {
-    title: 'Type',
-    dataIndex: 'type',
-    width: 100,
-  },
-  {
-    title: 'Note',
-    dataIndex: 'note',
-    width: 100,
-  },
-  {
-    title: 'Action',
-    key: 'action',
-    slots: { customRender: 'action' },
-  },
-];
-const data = [
-  {
-    key: 0,
-    date: '2018-02-11',
-    amount: 120,
-    type: 'income',
-    note: 'transfer',
-  },
-  {
-    key: 1,
-    date: '2018-03-11',
-    amount: 243,
-    type: 'income',
-    note: 'transfer',
-  },
-  {
-    key: 2,
-    date: '2018-04-11',
-    amount: 98,
-    type: 'income',
-    note: 'transfer',
-  },
-];
-const draggingMap = {};
-columns.forEach(col => {
-  draggingMap[col.key] = col.width;
-});
-const draggingState = reactive(draggingMap);
-const ResizeableTitle = (props, children) => {
-  let thDom = null;
-  const { key, ...restProps } = props;
-  const col = columns.find(col => {
-    const k = col.dataIndex || col.key;
-    return k === key;
-  });
-  if (!col.width) {
-    return <th {...restProps}>{children}</th>;
-  }
-  const onDrag = x => {
-    draggingState[key] = 0;
-    col.width = Math.max(x, 1);
-  };
-
-  const onDragstop = () => {
-    draggingState[key] = thDom.getBoundingClientRect().width;
-  };
-  return (
-    <th {...restProps} ref={r => (thDom = r)} width={col.width} class="resize-table-th">
-      {children}
-      <VueDraggableResizable
-        key={col.key}
-        class="table-draggable-handle"
-        w={10}
-        x={draggingState[key] || col.width}
-        z={1}
-        axis="x"
-        draggable={true}
-        resizable={false}
-        onDragging={onDrag}
-        onDragstop={onDragstop}
-      />
-    </th>
-  );
-};
-export default {
-  name: 'App',
-  data() {
-    this.components = {
-      header: {
-        cell: ResizeableTitle,
-      },
-    };
-    return {
-      data,
-      columns,
-    };
-  },
-};
-</script>
-<style lang="less">
-.resize-table-th {
-  position: relative;
-  .table-draggable-handle {
-    height: 100% !important;
-    bottom: 0;
-    left: auto !important;
-    right: -5px;
-    cursor: col-resize;
-    touch-action: none;
-  }
-}
-</style>

components/table/demo/stripe.vue

@@ -20,14 +20,14 @@ Use `rowClassName` Customize the table with Striped.
     size="middle"
     :columns="columns"
     :data-source="data"
-    :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+    :row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
   />
   <a-table
     class="ant-table-striped"
     size="middle"
     :columns="columns"
     :data-source="data"
-    :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
+    :row-class-name="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
     bordered
   />
 </template>

components/tabs/demo/card.vue

@@ -17,7 +17,7 @@ Another type Tabs, which doesn't support vertical mode.
 </docs>
 
 <template>
-  <a-tabs type="card" v-model:activeKey="activeKey">
+  <a-tabs v-model:activeKey="activeKey" type="card">
     <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
     <a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
     <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>

components/tabs/demo/icon.vue

@@ -42,14 +42,14 @@ The Tab with Icon.
 import { AppleOutlined, AndroidOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
+  components: {
+    AppleOutlined,
+    AndroidOutlined,
+  },
   setup() {
     return {
       activeKey: ref('1'),
     };
   },
-  components: {
-    AppleOutlined,
-    AndroidOutlined,
-  },
 });
 </script>

components/tabs/demo/slide.vue

@@ -23,11 +23,11 @@ In order to fit in more tabs, they can slide left and right (or up and down).
       <a-radio-button value="left">Vertical</a-radio-button>
     </a-radio-group>
     <a-tabs
+      v-model:activeKey="activeKey"
       :tab-position="mode"
       :style="{ height: '200px' }"
       @prevClick="callback"
       @nextClick="callback"
-      v-model:activeKey="activeKey"
     >
       <a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`">Content of tab {{ i }}</a-tab-pane>
     </a-tabs>

components/tag/demo/control.vue

@@ -30,14 +30,14 @@ Generating a set of Tags by array, you can add and remove dynamically.
   <a-input
     v-if="inputVisible"
     ref="inputRef"
+    v-model:value="inputValue"
     type="text"
     size="small"
     :style="{ width: '78px' }"
-    v-model:value="inputValue"
     @blur="handleInputConfirm"
     @keyup.enter="handleInputConfirm"
   />
-  <a-tag v-else @click="showInput" style="background: #fff; border-style: dashed">
+  <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
     <plus-outlined />
     New Tag
   </a-tag>

components/time-picker/demo/index.vue

@@ -40,7 +40,7 @@ export default {
     Size,
     Suffix,
     Bordered,
-    RangePicker
+    RangePicker,
   },
 };
 </script>

components/tooltip/demo/color.vue

@@ -54,8 +54,8 @@ const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
 export default defineComponent({
   setup() {
     return {
-      colors: colors,
+      colors,
-      customColors: customColors,
+      customColors,
     };
   },
 });

components/transfer/demo/basic.vue

@@ -30,9 +30,9 @@ The most basic usage of `Transfer` involves providing the source data and target
       @scroll="handleScroll"
     />
     <a-switch
+      v-model:checked="disabled"
       un-checked-children="enabled"
       checked-children="disabled"
-      v-model:checked="disabled"
       style="margin-top: 16px"
     />
   </div>

components/transfer/demo/table-transfer.vue

@@ -62,15 +62,15 @@ Customize render list with Table component.
       </template>
     </a-transfer>
     <a-switch
+      v-model:checked="disabled"
       un-checked-children="disabled"
       checked-children="disabled"
-      v-model:checked="disabled"
       style="margin-top: 16px"
     />
     <a-switch
+      v-model:checked="showSearch"
       un-checked-children="showSearch"
       checked-children="showSearch"
-      v-model:checked="showSearch"
       style="margin-top: 16px"
     />
   </div>

components/tree/demo/dynamic.vue

@@ -18,10 +18,10 @@ To load data asynchronously when click to expand a treeNode.
 
 <template>
   <a-tree
-    :load-data="onLoadData"
-    :tree-data="treeData"
     v-model:expandedKeys="expandedKeys"
     v-model:selectedKeys="selectedKeys"
+    :load-data="onLoadData"
+    :tree-data="treeData"
   />
 </template>
 

components/tree/demo/index.vue

@@ -43,7 +43,7 @@ export default defineComponent({
     SwitcherIcon,
     ReplaceFields,
     ContextMenu,
-    VirtualScroll
+    VirtualScroll,
   },
   setup() {
     return {};

components/typography/demo/interactive.vue

@@ -17,8 +17,8 @@ Provide additional interactive capacity of editable and copyable.
 <template>
   <a-typography-paragraph v-model:content="editableStr" editable />
   <a-typography-paragraph v-model:content="customIconStr" editable>
-    <template v-slot:editableIcon><HighlightOutlined /></template>
+    <template #editableIcon><HighlightOutlined /></template>
-    <template v-slot:editableTooltip>click to edit text</template>
+    <template #editableTooltip>click to edit text</template>
   </a-typography-paragraph>
   <a-typography-paragraph v-model:content="hideTooltipStr" :editable="{ tooltip: false }" />
   <a-typography-paragraph
@@ -31,11 +31,11 @@ Provide additional interactive capacity of editable and copyable.
     Replace copy text.
   </a-typography-paragraph>
   <a-typography-paragraph copyable content="Custom Copy icon and replace tooltips text.">
-    <template v-slot:copyableIcon="{ copied }">
+    <template #copyableIcon="{ copied }">
       <SmileOutlined v-if="!copied" key="copy-icon" />
       <SmileFilled v-else key="copied-icon" />
     </template>
-    <template v-slot:copyableTooltip="{ copied }">
+    <template #copyableTooltip="{ copied }">
       <span v-if="!copied" key="copy-tooltip">click here</span>
       <span v-else key="copied-tooltip">you clicked!!</span>
     </template>
@@ -49,6 +49,11 @@ import { defineComponent, ref, watch } from 'vue';
 import { HighlightOutlined, SmileOutlined, SmileFilled } from '@ant-design/icons-vue';
 
 export default defineComponent({
+  components: {
+    HighlightOutlined,
+    SmileOutlined,
+    SmileFilled,
+  },
   setup() {
     const editableStr = ref('This is an editable text.');
     watch(editableStr, () => {
@@ -61,10 +66,5 @@ export default defineComponent({
       lengthLimitedStr: ref('This is an editable text with limited length.'),
     };
   },
-  components: {
-    HighlightOutlined,
-    SmileOutlined,
-    SmileFilled,
-  },
 });
 </script>

components/upload/demo/defaultFileList.vue

@@ -16,7 +16,7 @@ Use `defaultFileList` for uploaded files when page init.
 </docs>
 
 <template>
-  <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" v-model:file-list="fileList">
+  <a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
     <a-button>
       <upload-outlined></upload-outlined>
       Upload

components/upload/demo/picture-card.vue

@@ -18,9 +18,9 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
 <template>
   <div class="clearfix">
     <a-upload
+      v-model:file-list="fileList"
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
       list-type="picture-card"
-      v-model:file-list="fileList"
       @preview="handlePreview"
     >
       <div v-if="fileList.length < 8">

components/upload/demo/picture-style.vue

@@ -18,9 +18,9 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
 <template>
   <div>
     <a-upload
+      v-model:file-list="fileList"
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
       list-type="picture"
-      v-model:file-list="fileList"
     >
       <a-button>
         <upload-outlined></upload-outlined>
@@ -30,9 +30,9 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
     <br />
     <br />
     <a-upload
+      v-model:file-list="fileList1"
       action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
       list-type="picture"
-      v-model:file-list="fileList1"
       class="upload-list-inline"
     >
       <a-button>