From b62c1564ec22468868ff227391797e1fca697f2f Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 12 Jan 2022 22:57:07 +0800
Subject: [PATCH 1/3] feat: add some type export

---
 components/components.ts    | 6 ++++++
 components/input/index.ts   | 2 +-
 components/slider/index.tsx | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/components.ts b/components/components.ts
index 7555b38b8..8db7c37e4 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -49,6 +49,7 @@ export { default as Col } from './col';
 export type { CommentProps } from './comment';
 export { default as Comment } from './comment';
 
+export type { ConfigProviderProps } from './config-provider';
 export { default as ConfigProvider } from './config-provider';
 
 export type { DatePickerProps } from './date-picker';
@@ -80,6 +81,7 @@ export { default as Form, FormItem, FormItemRest } from './form';
 
 export { default as Grid } from './grid';
 
+export type { InputProps, TextAreaProps } from './input';
 export { default as Input, InputGroup, InputPassword, InputSearch, Textarea } from './input';
 
 export type { ImageProps } from './image';
@@ -124,8 +126,10 @@ export { default as PageHeader } from './page-header';
 export type { PaginationProps } from './pagination';
 export { default as Pagination } from './pagination';
 
+export type { PopconfirmProps } from './popconfirm';
 export { default as Popconfirm } from './popconfirm';
 
+export type { PopoverProps } from './popover';
 export { default as Popover } from './popover';
 
 export type { ProgressProps } from './progress';
@@ -155,6 +159,7 @@ export {
   SkeletonImage,
 } from './skeleton';
 
+export type { SliderProps } from './slider';
 export { default as Slider } from './slider';
 
 export type { SpaceProps } from './space';
@@ -163,6 +168,7 @@ export { default as Space } from './space';
 export type { SpinProps } from './spin';
 export { default as Spin } from './spin';
 
+export type { StepProps, StepsProps } from './steps';
 export { default as Steps, Step } from './steps';
 
 export type { SwitchProps } from './switch';
diff --git a/components/input/index.ts b/components/input/index.ts
index f88d13aeb..2a2228c13 100644
--- a/components/input/index.ts
+++ b/components/input/index.ts
@@ -4,7 +4,7 @@ import Group from './Group';
 import Search from './Search';
 import TextArea from './TextArea';
 import Password from './Password';
-
+export type { InputProps, TextAreaProps } from './inputProps';
 Input.Group = Group;
 Input.Search = Search;
 Input.TextArea = TextArea;
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index e1ad168ac..6a7476f79 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, VNodeTypes, PropType } from 'vue';
+import type { CSSProperties, VNodeTypes, PropType, ExtractPropTypes } from 'vue';
 import { computed, ref, defineComponent } from 'vue';
 import VcSlider from '../vc-slider/src/Slider';
 import VcRange from '../vc-slider/src/Range';
@@ -70,6 +70,7 @@ export const sliderProps = () => ({
   trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
 });
 
+export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
 export type Visibles = { [index: number]: boolean };
 
 const Slider = defineComponent({

From 239354e313c642a43157be0d0316d3dd69f0d7c5 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 12 Jan 2022 23:50:02 +0800
Subject: [PATCH 2/3] fix: modal getContainer not work

---
 components/modal/Modal.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index ef585ef5e..d38c7129b 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -61,9 +61,12 @@ const modalProps = () => ({
   wrapClassName: String,
   maskTransitionName: String,
   transitionName: String,
-  getContainer: [String, Function, Boolean, Object] as PropType<
-    string | HTMLElement | getContainerFunc | false
-  >,
+  getContainer: {
+    type: [String, Function, Boolean, Object] as PropType<
+      string | HTMLElement | getContainerFunc | false
+    >,
+    default: undefined,
+  },
   zIndex: Number,
   bodyStyle: Object as PropType<CSSProperties>,
   maskStyle: Object as PropType<CSSProperties>,
@@ -206,7 +209,7 @@ export default defineComponent({
         <Dialog
           {...restProps}
           {...attrs}
-          getContainer={getContainer || getPopupContainer}
+          getContainer={getContainer || getPopupContainer.value}
           prefixCls={prefixCls.value}
           wrapClassName={wrapClassNameExtended}
           visible={visible}

From 10fed707f8a3e996eb5bcea572e3fce54efe70db Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 12 Jan 2022 23:51:18 +0800
Subject: [PATCH 3/3] doc: update demo ts error

---
 components/button/demo/multiple.vue           |   2 +-
 components/dropdown/demo/overlay-visible.vue  |   2 +-
 .../__snapshots__/Modal.test.js.snap          |   2 +-
 components/table/demo/sticky.vue              |   3 +-
 components/tabs/demo/editable-card.vue        |   2 +-
 components/transfer/demo/tree-transfer.vue    |  19 +--
 components/tree/demo/dynamic.vue              |   4 +-
 site/debugger/demo/demo.vue                   | 138 +++++-------------
 site/src/components/api.vue                   |  31 ----
 site/src/components/demoSort.jsx              |   1 -
 site/src/components/rice/geektime_ads.vue     |  19 +--
 11 files changed, 59 insertions(+), 164 deletions(-)
 delete mode 100644 site/src/components/api.vue

diff --git a/components/button/demo/multiple.vue b/components/button/demo/multiple.vue
index 8d6818748..53df4ef9a 100644
--- a/components/button/demo/multiple.vue
+++ b/components/button/demo/multiple.vue
@@ -34,7 +34,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
 </template>
 <script lang="ts">
 import { DownOutlined } from '@ant-design/icons-vue';
-import { MenuProps } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
diff --git a/components/dropdown/demo/overlay-visible.vue b/components/dropdown/demo/overlay-visible.vue
index d9dde21ce..bc8043c12 100644
--- a/components/dropdown/demo/overlay-visible.vue
+++ b/components/dropdown/demo/overlay-visible.vue
@@ -34,7 +34,7 @@ The default is to close the menu when you click on menu items, this feature can
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { DownOutlined } from '@ant-design/icons-vue';
-import { MenuProps } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 5289c9c0f..6e1898ffd 100644
--- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -26,7 +26,7 @@ exports[`Modal render correctly 1`] = `
 
 exports[`Modal render correctly 2`] = `
 <div>
-  <div></div>
+  <div style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;" class="ant-scrolling-effect"></div>
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
diff --git a/components/table/demo/sticky.vue b/components/table/demo/sticky.vue
index 004524c05..6a52d9715 100644
--- a/components/table/demo/sticky.vue
+++ b/components/table/demo/sticky.vue
@@ -34,11 +34,12 @@ For long table，need to scroll to view the header and scroll bar，then you can
 </template>
 
 <script lang="ts">
+import type { TableColumnsType } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const columns = ref([
+    const columns = ref<TableColumnsType>([
       {
         title: 'Full Name',
         width: 100,
diff --git a/components/tabs/demo/editable-card.vue b/components/tabs/demo/editable-card.vue
index 9d4076ecb..ebef85a16 100644
--- a/components/tabs/demo/editable-card.vue
+++ b/components/tabs/demo/editable-card.vue
@@ -19,7 +19,7 @@ Only card type Tabs support adding & closable.
 
 <template>
   <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
-    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="!!pane.closable">
+    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
       {{ pane.content }}
     </a-tab-pane>
   </a-tabs>
diff --git a/components/transfer/demo/tree-transfer.vue b/components/transfer/demo/tree-transfer.vue
index 50ae32f02..a8cbdc0af 100644
--- a/components/transfer/demo/tree-transfer.vue
+++ b/components/transfer/demo/tree-transfer.vue
@@ -51,9 +51,9 @@ Customize render list with Tree component.
 </template>
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
-import type { TreeProps } from 'ant-design-vue';
+import type { TransferProps, TreeProps } from 'ant-design-vue';
 import type { AntTreeNodeCheckedEvent } from 'ant-design-vue/es/tree';
-const tData: TreeProps['treeData'] = [
+const tData: TransferProps['dataSource'] = [
   { key: '0-0', title: '0-0' },
   {
     key: '0-1',
@@ -66,8 +66,8 @@ const tData: TreeProps['treeData'] = [
   { key: '0-2', title: '0-3' },
 ];
 
-const transferDataSource: TreeProps['treeData'] = [];
-function flatten(list: TreeProps['treeData'] = []) {
+const transferDataSource: TransferProps['dataSource'] = [];
+function flatten(list: TransferProps['dataSource'] = []) {
   list.forEach(item => {
     transferDataSource.push(item);
     flatten(item.children);
@@ -79,26 +79,23 @@ function isChecked(selectedKeys: (string | number)[], eventKey: string | number)
   return selectedKeys.indexOf(eventKey) !== -1;
 }
 
-function handleTreeData(
-  data: TreeProps['treeData'],
-  targetKeys: string[] = [],
-): TreeProps['treeData'] {
+function handleTreeData(data: TransferProps['dataSource'], targetKeys: string[] = []) {
   data.forEach(item => {
     item['disabled'] = targetKeys.includes(item.key as any);
     if (item.children) {
       handleTreeData(item.children, targetKeys);
     }
   });
-  return data;
+  return data as TreeProps['treeData'];
 }
 
 export default defineComponent({
   setup() {
     const targetKeys = ref<string[]>([]);
 
-    const dataSource = ref<TreeProps['treeData']>(transferDataSource);
+    const dataSource = ref(transferDataSource);
 
-    const treeData = computed<TreeProps['treeData']>(() => {
+    const treeData = computed(() => {
       return handleTreeData(tData, targetKeys.value);
     });
 
diff --git a/components/tree/demo/dynamic.vue b/components/tree/demo/dynamic.vue
index bcded36dd..4a0159ab2 100644
--- a/components/tree/demo/dynamic.vue
+++ b/components/tree/demo/dynamic.vue
@@ -38,8 +38,8 @@ export default defineComponent({
       { title: 'Expand to load', key: '1' },
       { title: 'Tree Node', key: '2', isLeaf: true },
     ]);
-    const onLoadData = (treeNode: any) => {
-      return new Promise((resolve: (value?: unknown) => void) => {
+    const onLoadData: TreeProps['loadData'] = treeNode => {
+      return new Promise(resolve => {
         if (treeNode.dataRef.children) {
           resolve();
           return;
diff --git a/site/debugger/demo/demo.vue b/site/debugger/demo/demo.vue
index 61c07f278..aef1ca53b 100644
--- a/site/debugger/demo/demo.vue
+++ b/site/debugger/demo/demo.vue
@@ -2,127 +2,55 @@
 ---
 order: 0
 title:
-  en-US: Basic Usage
   zh-CN: 基本用法
+  en-US: Basic usage
 ---
 
 ## zh-CN
 
-简单的表格，最后一列是各种操作。
+第一个对话框。
 
 ## en-US
 
-Simple table with actions.
+Basic modal.
+
 </docs>
 
 <template>
-  <a-table :columns="columns" :data-source="data">
-    <template #headerCell="{ title, column }">
-      <template v-if="column.key === 'name'">
-        <span>
-          <smile-outlined />
-          Name
-        </span>
-      </template>
-      <template v-else>{{ title }}</template>
-    </template>
-
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'name'">
-        <a>
-          {{ record.name }}
-        </a>
-      </template>
-      <template v-else-if="column.key === 'tags'">
-        <span>
-          <a-tag
-            v-for="tag in record.tags"
-            :key="tag"
-            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-          >
-            {{ tag.toUpperCase() }}
-          </a-tag>
-        </span>
-      </template>
-      <template v-else-if="column.key === 'action'">
-        <span>
-          <a>Invite 一 {{ record.name }}</a>
-          <a-divider type="vertical" />
-          <a>Delete</a>
-          <a-divider type="vertical" />
-          <a class="ant-dropdown-link">
-            More actions
-            <down-outlined />
-          </a>
-        </span>
-      </template>
-      <template v-else>{{ record.name }}</template>
-    </template>
-  </a-table>
+  <div>
+    <div ref="container"></div>
+    <a-button type="primary" @click="showModal">Open Modal</a-button>
+    <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </a-modal>
+  </div>
 </template>
 <script lang="ts">
-import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
-import { defineComponent } from 'vue';
-const columns = [
-  {
-    name: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
-  },
-  {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-  },
-  {
-    title: 'Action',
-    key: 'action',
-  },
-];
-
-const data = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer'],
-  },
-  {
-    key: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser'],
-  },
-  {
-    key: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher'],
-  },
-];
-
+import { defineComponent, ref } from 'vue';
 export default defineComponent({
-  components: {
-    SmileOutlined,
-    DownOutlined,
-  },
   setup() {
+    const visible = ref<boolean>(false);
+
+    const showModal = () => {
+      visible.value = true;
+    };
+
+    const handleOk = (e: MouseEvent) => {
+      console.log(e);
+      visible.value = false;
+    };
+    const container = ref();
     return {
-      data,
-      columns,
+      container,
+      visible,
+      showModal,
+      handleOk,
+      getContainer() {
+        console.log('container', container.value);
+        return container.value;
+      },
     };
   },
 });
diff --git a/site/src/components/api.vue b/site/src/components/api.vue
deleted file mode 100644
index 85783a8a4..000000000
--- a/site/src/components/api.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="markdown api-container">
-    <google-ads v-if="showAd" />
-    <slot v-if="isZhCN" name="cn" />
-    <slot v-else />
-  </div>
-</template>
-<script lang="ts">
-import { isZhCN } from '../utils/util';
-import GoogleAds from './rice/GoogleAds.vue';
-import { inject } from 'vue';
-
-const showAd = location.host.indexOf('antdv.com') > -1;
-export default {
-  name: 'Api',
-  components: {
-    GoogleAds,
-  },
-  setup() {
-    return {
-      demoContext: inject('demoContext', {}),
-    };
-  },
-  data() {
-    return {
-      showAd,
-      isZhCN: isZhCN(this.demoContext.name),
-    };
-  },
-};
-</script>
diff --git a/site/src/components/demoSort.jsx b/site/src/components/demoSort.jsx
index f0ac301df..3d02b34bb 100644
--- a/site/src/components/demoSort.jsx
+++ b/site/src/components/demoSort.jsx
@@ -10,7 +10,6 @@ export default defineComponent({
   },
   setup() {
     return {
-      demoContext: inject('demoContext', {}),
       globalConfig: inject(GLOBAL_CONFIG),
     };
   },
diff --git a/site/src/components/rice/geektime_ads.vue b/site/src/components/rice/geektime_ads.vue
index e23e4b8d2..b03b2a35a 100644
--- a/site/src/components/rice/geektime_ads.vue
+++ b/site/src/components/rice/geektime_ads.vue
@@ -16,25 +16,26 @@
 <script lang="ts">
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
+import { defineComponent } from 'vue';
 dayjs.extend(isBetween);
 
-export default {
-  props: ['isMobile'],
-  data() {
+export default defineComponent({
+  props: {
+    isMobile: Boolean,
+  },
+  setup() {
     return {
       visible: true,
       effectiveTime: {
         start: '2019-08-05 17:00:00',
         end: '2019-09-05 17:00:00',
       },
+      isEffective({ start, end }) {
+        return dayjs().isBetween(start, end);
+      },
     };
   },
-  methods: {
-    isEffective({ start, end }) {
-      return dayjs().isBetween(start, end);
-    },
-  },
-};
+});
 </script>
 
 <style lang="less" scoped>