doc: update doc

components/input/demo/group.vue

@@ -97,7 +97,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
       </a-select>
       <a-auto-complete
         v-model:value="value16"
-        :data-source="dataSource"
+        :options="[{ value: 'text 1' }, { value: 'text 2' }]"
         style="width: 200px"
         placeholder="Email"
       />
@@ -118,7 +118,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref } from 'vue';
 
 const options = [
   {
@@ -174,14 +174,6 @@ export default defineComponent({
     const value16 = ref<string>('');
     const value17 = ref<string>('Home');
     const value18 = ref<string[]>([]);
-    const dataSource = ref<string[]>([]);
-
-    watch(value16, val => {
-      dataSource.value =
-        !val || val.indexOf('@') >= 0
-          ? []
-          : [`${val}@gmail.com`, `${val}@163.com`, `${val}@qq.com`];
-    });
 
     return {
       value1,
@@ -203,7 +195,6 @@ export default defineComponent({
       value17,
       value18,
       options,
-      dataSource,
     };
   },
 });

components/select/demo/automatic-tokenization.vue

@@ -29,10 +29,10 @@ Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
 </template>
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import { SelectTypes } from 'ant-design-vue/es/select';
+import type { SelectProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
-    const options = ref<SelectTypes['options']>([
+    const options = ref<SelectProps['options']>([
       {
         value: 'a1',
         label: 'a1',

components/select/demo/basic.vue

@@ -47,18 +47,17 @@ Basic Usage
       :options="options1"
       @focus="focus"
       @change="handleChange"
-    >
+    ></a-select>
-    </a-select>
     <a-select v-model:value="value2" style="width: 120px" disabled :options="options2"></a-select>
     <a-select v-model:value="value3" style="width: 120px" loading :options="options3"></a-select>
   </a-space>
 </template>
 <script lang="ts">
-import { SelectTypes } from 'ant-design-vue/es/select';
+import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const options1 = ref<SelectTypes['options']>([
+    const options1 = ref<SelectProps['options']>([
       {
         value: 'jack',
         label: 'Jack',
@@ -77,13 +76,13 @@ export default defineComponent({
         label: 'Yiminghe',
       },
     ]);
-    const options2 = ref<SelectTypes['options']>([
+    const options2 = ref<SelectProps['options']>([
       {
         value: 'lucy',
         label: 'Lucy',
       },
     ]);
-    const options3 = ref<SelectTypes['options']>([
+    const options3 = ref<SelectProps['options']>([
       {
         value: 'lucy',
         label: 'Lucy',

components/select/demo/label-in-value.vue

@@ -25,11 +25,10 @@ The label of the selected item will be packed as an object for passing to the on
     style="width: 120px"
     :options="options"
     @change="handleChange"
-  >
+  ></a-select>
-  </a-select>
 </template>
 <script lang="ts">
-import { SelectTypes } from 'ant-design-vue/es/select';
+import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
 interface Value {
@@ -39,7 +38,7 @@ interface Value {
 
 export default defineComponent({
   setup() {
-    const options = ref<SelectTypes['options']>([
+    const options = ref<SelectProps['options']>([
       {
         value: 'jack',
         label: 'Jack (100)',

components/select/demo/optgroup.vue

@@ -45,7 +45,7 @@ Using `OptGroup` or `options.options` to group the options.
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { UserOutlined } from '@ant-design/icons-vue';
-import { SelectTypes } from 'ant-design-vue/es/select';
+import type { SelectProps } from 'ant-design-vue';
 export default defineComponent({
   components: {
     UserOutlined,
@@ -55,7 +55,7 @@ export default defineComponent({
       console.log(`selected ${value}`);
     };
 
-    const options = ref<SelectTypes['options']>([
+    const options = ref<SelectProps['options']>([
       {
         label: 'Manager',
         options: [

components/select/demo/search.vue

@@ -26,15 +26,14 @@ Search the options while expanded.
     @focus="handleFocus"
     @blur="handleBlur"
     @change="handleChange"
-  >
+  ></a-select>
-  </a-select>
 </template>
 <script lang="ts">
-import { SelectTypes } from 'ant-design-vue/es/select';
+import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const options = ref<SelectTypes['options']>([
+    const options = ref<SelectProps['options']>([
       { value: 'jack', label: 'Jack' },
       { value: 'lucy', label: 'Lucy' },
       { value: 'tom', label: 'Tom' },
@@ -62,4 +61,3 @@ export default defineComponent({
   },
 });
 </script>
-

components/select/demo/suffix.vue

@@ -33,7 +33,7 @@ Basic Usage
 </template>
 <script lang="ts">
 import { SmileOutlined, MehOutlined } from '@ant-design/icons-vue';
-import { SelectTypes } from 'ant-design-vue/es/select';
+import type { SelectProps } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
@@ -46,7 +46,7 @@ export default defineComponent({
       console.log(`selected ${value}`);
     };
 
-    const options1 = ref<SelectTypes['options']>([
+    const options1 = ref<SelectProps['options']>([
       {
         value: 'jack',
         label: 'Jack',
@@ -65,7 +65,7 @@ export default defineComponent({
         label: 'Yiminghe',
       },
     ]);
-    const options2 = ref<SelectTypes['options']>([
+    const options2 = ref<SelectProps['options']>([
       {
         value: 'lucy',
         label: 'Lucy',

components/table/demo/colspan-rowspan.vue

@@ -29,7 +29,7 @@ Table cell supports `colSpan` and `rowSpan` that set in render return object. Wh
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { TableColumnType } from 'ant-design-vue';
+import type { TableColumnType } from 'ant-design-vue';
 // In the fifth row, other columns are merged into first column
 // by setting it's colSpan to be 0
 const renderContent = ({ index }: any) => {

components/table/demo/edit-cell.vue

@@ -45,7 +45,8 @@ Table with editable cells.
   </a-table>
 </template>
 <script lang="ts">
-import { computed, defineComponent, reactive, Ref, ref, UnwrapRef } from 'vue';
+import { computed, defineComponent, reactive, ref } from 'vue';
+import type { Ref, UnwrapRef } from 'vue';
 import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { cloneDeep } from 'lodash-es';
 

components/transfer/demo/tree-transfer.vue

@@ -52,8 +52,8 @@ Customize render list with Tree component.
 </template>
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import { TreeProps } from 'ant-design-vue';
+import type { TreeProps } from 'ant-design-vue';
-import { AntTreeNodeCheckedEvent } from 'ant-design-vue/es/tree';
+import type { AntTreeNodeCheckedEvent } from 'ant-design-vue/es/tree';
 const tData: TreeProps['treeData'] = [
   { key: '0-0', title: '0-0' },
   {

components/tree-select/demo/async.vue

@@ -28,7 +28,7 @@ Asynchronous loading tree node.
 </template>
 
 <script lang="ts">
-import { TreeSelectProps } from 'ant-design-vue';
+import type { TreeSelectProps } from 'ant-design-vue';
 import { defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({

components/tree-select/demo/basic.vue

@@ -34,7 +34,7 @@ The most basic usage.
   </a-tree-select>
 </template>
 <script lang="ts">
-import { TreeSelectProps } from 'ant-design-vue';
+import type { TreeSelectProps } from 'ant-design-vue';
 import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
   setup() {

components/tree-select/demo/checkable.vue

@@ -27,7 +27,8 @@ Multiple and checkable.
   />
 </template>
 <script lang="ts">
-import { TreeSelectProps, TreeSelect } from 'ant-design-vue';
+import { TreeSelect } from 'ant-design-vue';
+import type { TreeSelectProps } from 'ant-design-vue';
 import { defineComponent, ref, watch } from 'vue';
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 

components/tree-select/demo/multiple.vue

@@ -27,11 +27,10 @@ Multiple selection usage.
     multiple
     tree-default-expand-all
     :tree-data="treeData"
-  >
+  ></a-tree-select>
-  </a-tree-select>
 </template>
 <script lang="ts">
-import { TreeSelectProps } from 'ant-design-vue';
+import type { TreeSelectProps } from 'ant-design-vue';
 import { defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({

components/tree-select/demo/suffix.vue

@@ -31,7 +31,7 @@
 </template>
 <script lang="ts">
 import { SmileOutlined } from '@ant-design/icons-vue';
-import { TreeSelectProps } from 'ant-design-vue';
+import type { TreeSelectProps } from 'ant-design-vue';
 import { defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({

components/tree-select/demo/treeData.vue

@@ -26,13 +26,13 @@ The tree structure can be populated using `treeData` property. This is a quick a
   >
     <template #title="{ key, value: val, title }">
       <span v-if="key === '0-0-1'" style="color: #08c">Child Node1 {{ val }}</span>
-      <template v-else> {{ title }} </template>
+      <template v-else>{{ title }}</template>
     </template>
   </a-tree-select>
 </template>
 
 <script lang="ts">
-import { TreeSelectProps } from 'ant-design-vue';
+import type { TreeSelectProps } from 'ant-design-vue';
 import { defineComponent, ref, watch } from 'vue';
 
 const treeData: TreeSelectProps['treeData'] = [

components/tree/demo/draggable.vue

@@ -27,7 +27,11 @@ Drag treeNode to insert after the other treeNode or insert into the other parent
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { AntTreeNodeDragEnterEvent, AntTreeNodeDropEvent, TreeProps } from 'ant-design-vue/es/tree';
+import type {
+  AntTreeNodeDragEnterEvent,
+  AntTreeNodeDropEvent,
+  TreeProps,
+} from 'ant-design-vue/es/tree';
 
 const x = 3;
 const y = 2;

components/tree/demo/replaceFields.vue

@@ -33,7 +33,7 @@ Replace the title,key and children fields in treeNode with the corresponding fie
 </template>
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import { TreeProps } from 'ant-design-vue';
+import type { TreeProps } from 'ant-design-vue';
 
 export default defineComponent({
   setup() {

components/tree/demo/search.vue

@@ -39,7 +39,7 @@ Searchable Tree.
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
-import { TreeProps } from 'ant-design-vue';
+import type { TreeProps } from 'ant-design-vue';
 
 const x = 3;
 const y = 2;
@@ -82,7 +82,10 @@ const generateList = (data: TreeProps['treeData']) => {
 };
 generateList(genData);
 
-const getParentKey = (key: string, tree: TreeProps['treeData']): string | number | undefined => {
+const getParentKey = (
+  key: string | number,
+  tree: TreeProps['treeData'],
+): string | number | undefined => {
   let parentKey;
   for (let i = 0; i < tree.length; i++) {
     const node = tree[i];
@@ -98,7 +101,7 @@ const getParentKey = (key: string, tree: TreeProps['treeData']): string | number
 };
 export default defineComponent({
   setup() {
-    const expandedKeys = ref<string[]>([]);
+    const expandedKeys = ref<(string | number)[]>([]);
     const searchValue = ref<string>('');
     const autoExpandParent = ref<boolean>(true);
     const gData = ref<TreeProps['treeData']>(genData);

components/vc-tree/interface.tsx

@@ -18,6 +18,7 @@ export interface DataNode {
   class?: string;
   style?: CSSProperties;
   slots?: Record<string, string>;
+  [key: string]: any;
 }
 
 export interface EventDataNode extends DataNode {