Merge branch 'dev'

docs/faq.md

@@ -170,3 +170,18 @@ el-form 包裹 el-data-table 时，点击 el-data-table 的操作列按钮会触
 [element-ui el-form 文档](https://element.eleme.cn/#/zh-CN/component/form)
 
 [issue #224](https://github.com/FEMessage/el-data-table/issues/224)
+
+## 在 TypeScript 中指定组件的类型
+
+```html
+<script lang="ts">
+// 需要引入这个
+// import { ElDataTableType } from '@femessage/el-data-table'
+export default {
+  mounted() {
+    (this.$refs.dataTable as ElDataTableType).getList()
+  },
+}
+</script>
+```
+> 关于更多可用类型请参考：[el-data-table.d.ts](https://github.com/FEMessage/el-data-table/blob/dev/src/el-data-table.d.ts)

package.json

@@ -25,6 +25,7 @@
   "browser": {
     "./sfc": "src/el-data-table.vue"
   },
+  "types": "src/el-data-table.d.ts",
   "scripts": {
     "test": "jest --verbose",
     "dev": "vue-styleguidist server",
@@ -49,6 +50,7 @@
     "@babel/preset-env": "^7.4.3",
     "@femessage/el-form-renderer": "^1.6.0",
     "@femessage/github-release-notes": "^0.19.0",
+    "@femessage/types": "^1.0.3",
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.5",

src/el-data-table.d.ts

@@ -0,0 +1,186 @@
+import Vue, {VueConstructor, VNode} from 'vue'
+
+import {AxiosRequestConfig} from 'axios'
+
+import {Table,Form, Dialog} from '@femessage/types/element-ui'
+import {TableColumn} from '@femessage/types/element-ui/table-column'
+
+declare module '@femessage/el-data-table' {
+  class FemessageComponent extends Vue {
+    static install(vue: typeof Vue): void
+  }
+
+  type CombinedVueInstance<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = Data & Methods & Computed & Props & Instance
+
+  type ExtendedVue<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = VueConstructor<
+    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue
+  >
+
+  type Combined<Data, Methods, Computed, Props> = Data &
+    Methods &
+    Computed &
+    Props
+
+  type ElDataTableData = {
+    data: any[]
+    size: number
+    page: number
+    total: null | number
+    loading: boolean
+    selected: any[]
+    row: any
+    initExtraQuery: any
+    isSearchCollapse: boolean
+    showNoData: boolean
+  }
+
+  type ElDataTableMethods = {
+    getList: ({loading}?: {loading?: boolean}) => void
+
+    resetSearch: () => void
+
+    toggleRowSelection: (row: any, isSelected?: boolean) => any
+
+    clearSelection: () => void
+
+    onDefaultDelete: (data: any) => void
+
+    correctPage: () => void
+  }
+
+  type ElDataTableComputed = {
+    tableEventHandlersInner: any
+    hasSelect: boolean
+    selectable: () => boolean
+    columnsAlign: string
+    routerMode: string
+    hasSearchForm: boolean
+    hasHeader: boolean
+    _extraBody: object
+    _extraQuery: object
+    selectStrategy: any
+    searchLocatedSlotKeys: any
+    collapseForm: any
+    _searchForm: any
+  }
+
+  export interface FormContentItem {
+    id: string
+    label?: string | VNode
+    [key: string]: any
+  }
+
+  export type FormContent = Array<FormContentItem>
+
+  export interface DataTableColumn {
+    label: string
+    prop: string
+    formatter?: (row: any, column: TableColumn) => any
+    [key: string]: any
+  }
+
+  export type DataTableColumns = Array<DataTableColumn>
+
+  export type OperationButton = {
+    type?: string
+    text: string
+    atClick: (row: any) => Promise<any>
+    show?: (row: any) => boolean
+    disabled?: (row: any) => boolean
+  }
+
+  export type OperationButtons = OperationButton[]
+
+  // props 都有默认值，都是可选的
+  export type ElDataTableProps = Partial<{
+    url: string
+    id: string
+    firstPage: number
+    dataPath: string
+    totalPath: string
+    pageKey: string
+    pageSizeKey: string
+    columns: DataTableColumns
+    searchForm: FormContent
+    canSearchCollapse: boolean
+    beforeSearch: (formValue: any) => any
+    single: boolean
+    persistSelection: boolean
+    hasOperation: boolean
+    extraButtons: OperationButtons
+    headerButtons: OperationButtons
+    hasNew: boolean
+    hasEdit: boolean
+    hasView: boolean
+    hasDelete: boolean
+    newText: string
+    editText: string
+    viewText: string
+    deleteText: string
+    deleteMessage: (data: any) => string
+    canDelete: (row: any) => boolean
+    onNew: (data: any, row?: any) => Promise<any>
+    onEdit: (data: any, row: any) => Promise<any>
+    onDelete: (data: any) => Promise<any>
+    onSuccess: (type: 'new' | 'edit' | 'delete', data: any) => Promise<any>
+    hasPagination: boolean
+    paginationLayout: string
+    paginationSizes: number[]
+    paginationSize: number
+    noPaginationSize: number
+    isTree: boolean
+    treeChildKey: string
+    treeParentKey: string
+    treeParentValue: string
+    expandAll: boolean
+    tableAttrs: Partial<Table>
+    tableEventHandlers: object
+    operationAttrs: object
+    dialogNewTitle: string
+    dialogEditTitle: string
+    dialogViewTitle: string
+    form: FormContent
+    formAttrs: Partial<Form>
+    dialogAttrs: Partial<Dialog>
+    extraParams: object
+    extraBody: object
+    beforeConfirm: (data: any, isNew: boolean) => Promise<any>
+    customQuery: object
+    extraQuery: object
+    saveQuery: boolean
+    operationButtonType: string
+    buttonSize: string
+    axiosConfig: AxiosRequestConfig
+  }>
+
+  type ElDataTable = Combined<
+    ElDataTableData,
+    ElDataTableMethods,
+    ElDataTableComputed,
+    Required<ElDataTableProps>
+  >
+
+  export interface ElDataTableType extends FemessageComponent, ElDataTable {}
+
+  const ElDataTableConstruction: ExtendedVue<
+    Vue,
+    ElDataTableData,
+    ElDataTableMethods,
+    ElDataTableComputed,
+    Required<ElDataTableProps>
+  >
+
+  export default ElDataTableConstruction
+}

yarn.lock

@@ -831,6 +831,11 @@
     require-yaml "0.0.1"
     valid-url "^1.0.9"
 
+"@femessage/types@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@femessage/types/-/types-1.0.3.tgz#1c93d89506628c7e5a8662da4fa88e765ce57b02"
+  integrity sha512-VXeHibO3nNNgTZ5WH0wv4ejjGO3oCnyefjvmw6dZoX08DU4URcfnyw8JQ67IK0rI3xBoIyTPSWFCu29Hi7RrIQ==
+
 "@jest/console@^24.7.1":
   version "24.7.1"
   resolved "https://registry.npm.taobao.org/@jest/console/download/@jest/console-24.7.1.tgz#32a9e42535a97aedfe037e725bd67e954b459545"