fix: type fix

package.json

@@ -30,16 +30,16 @@
     "types"
   ],
   "peerDependencies": {
-    "element-ui": "^2.15.3"
+    "element-ui": "^2.15.3",
+    "vue": "^2.6.14"
   },
   "dependencies": {
     "@laomao800/parse-size-with-unit": "^1.0.3",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "has-values": "^2.0.1",
     "lodash": "^4.17.21",
-    "normalize.css": "^8.0.1",
-    "vue": "^2.6.14"
+    "normalize.css": "^8.0.1"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",
@@ -74,6 +74,7 @@
     "rimraf": "^3.0.2",
     "semver": "^7.3.5",
     "typescript": "~4.1.5",
+    "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
     "vuepress": "^1.8.2",
     "webpack-node-externals": "^3.0.0"

src/create.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import pick from 'lodash/pick'
 import isPlainObject from 'lodash/isPlainObject'
 import { Listview as _Listview } from '@/index'
-import { create as CreateFunction } from '~/types'
+import { CreateFunction } from '~/types/Create'
 
 const allowPresetProps = [
   // StoreProvider

types/Create.d.ts

@@ -0,0 +1,28 @@
+import { ListviewProps } from './Props'
+
+type AllowPresetProps =
+  | 'pressEnterSearch'
+  | 'autoload'
+  | 'requestMethod'
+  | 'requestConfig'
+  | 'transformRequestData'
+  | 'transformResponseData'
+  | 'contentDataMap'
+  | 'contentMessage'
+  | 'validateResponse'
+  | 'resolveResponseErrorMessage'
+  | 'usePage'
+  | 'pageSize'
+  | 'pageSizes'
+  | 'pageProps'
+  | 'pagePosition'
+  | 'height'
+  | 'fullHeight'
+  | 'searchButton'
+  | 'resetButton'
+
+type CreateOptions = Partial<Pick<ListviewProps, AllowPresetProps>> & {
+  replaceComponents?: Record<string, Component>
+}
+
+export type CreateFunction = (options?: CreateOptions) => Component

types/Props.d.ts

@@ -0,0 +1,136 @@
+import Vue, { VueConstructor, VNode, Component } from 'vue'
+import { AxiosRequestConfig } from 'axios'
+import { FilterButton } from './FilterButton'
+import { FilterField } from './FilterField'
+import { TableColumn } from './TableColumn'
+
+type MessageType = 'success' | 'warning' | 'info' | 'error'
+type Dic<T = any> = Record<string, T>
+
+declare class ComponentWithInstall extends Vue {
+  static install(Vue: VueConstructor<Vue>, options: any): void
+}
+
+declare class ListviewProps extends ComponentWithInstall {
+  /** 顶部通栏页面标题文本。 default: '' */
+  headerTitle: string
+
+  /** 优先级最高，设置整体布局高度，包含顶部标题栏、搜索栏、正文区域、页码区域所有内容的高度，支持百分比。 default: null */
+  height: string | number
+
+  /** 垂直高度是否铺满屏幕高度。 default: true */
+  fullHeight: boolean
+
+  /** 初始化后是否自动加载第一页内容。 default: true */
+  autoload: boolean
+
+  /** 数据请求接口地址。 default: '' */
+  requestUrl: string
+
+  /** 支持 Axios 所有支持的请求方法。 default: 'get' */
+  requestMethod:
+    | 'get'
+    | 'delete'
+    | 'head'
+    | 'options'
+    | 'post'
+    | 'put'
+    | 'patch'
+
+  /** 兼容 Axios 的所有除了 cancelToken 之外的 requestConfig 配置。 default: {} */
+  requestConfig: AxiosRequestConfig
+
+  /** 自定义请求方法，需要返回 Promise ，以返回的内容交由 `validateResponse` 进行验证 */
+  requestHandler: (requestData: Dic) => Promise<any> | any
+
+  /** 对接口发起请求参数在发送前作最后的更改 */
+  transformRequestData: (requestData: Dic) => Dic | boolean
+
+  /** 对原始响应数据的加工方法 default: null */
+  transformResponseData: (responseData: Dic) => void
+
+  /** 数据接口响应内容属性映射。 default: { items: 'result.items', total: 'result.total_count' } */
+  contentDataMap: { [k: string]: string }
+
+  /** 可用在 autoload 为 false 时候，初始显示的提示信息。 default: null */
+  contentMessage: null | string | { type: MessageType; text: string }
+
+  /** 验证接口响应是否成功 */
+  validateResponse: (response?: any) => boolean
+
+  /** 解析错误提示信息 */
+  resolveResponseErrorMessage: (response?: any) => any
+
+  /** 搜索栏左侧按钮配置。 default: [] */
+  filterButtons: FilterButton[] | (() => VNode) | VNode
+
+  /** 搜索栏搜索字段配置。 default: [] */
+  filterFields: FilterField[] | (() => VNode) | VNode
+
+  /** 可选，存储搜索栏的搜索条件值。 default: {} */
+  filterModel: Record<string, any>
+
+  /** 在搜索栏按下回车键是否出发搜索请求。 default: true */
+  pressEnterSearch: boolean
+
+  /**
+   * boolean 是否显示搜索栏的“提交”按钮
+   * object 可自定义按钮配置。
+   * default: { text: '搜索', icon: 'el-icon-search', type: 'primary' }
+   */
+  searchButton: Record<string, any> | boolean
+
+  /**
+   * boolean 是否显示搜索栏的“重置”按钮。
+   * object 可自定义按钮配置。
+   * default: { text: '重置', type: 'default' }
+   */
+  resetButton: Record<string, any> | boolean
+
+  /** 可传入 <el-table> 的所有支持属性。 default: {} */
+  contentProps: Record<string, any>
+
+  /** 可传入 <el-table> 的所有支持事件。 default: {} */
+  contentEvents: Record<string, (...args: any[]) => void>
+
+  /** 表格列配置。 default: [] */
+  tableColumns: TableColumn[]
+
+  /** 是否开启表格行选择功能，传入 'single' 为表格单选效果。 default: true */
+  tableSelectionColumn:
+    | boolean
+    | string
+    | { type?: string; selectable?: (row: any, index: number) => boolean }
+
+  /** 表格行选择的选中数据，可通过 .sync 修饰符获取更新。 default: [] */
+  selection: any[]
+
+  /** 是否开启底部分页功能，或配置请求时分页参数的键名。 default: true */
+  usePage: boolean | { pageIndex: string; pageSize: string }
+
+  /** 分页“每页数量”可选值。 default: [20, 50, 100] */
+  pageSizes: number[]
+
+  /** 默认每页分页数量。 default: 20 */
+  pageSize: number
+
+  /** 页码位置。 default: 'left' */
+  pagePosition: 'left' | 'right'
+
+  /** el-pagination Props */
+  pageProps: Record<string, any>
+}
+
+export declare class ListviewContainerProps extends ComponentWithInstall {
+  /** 顶部通栏页面标题文本。 default: '' */
+  headerTitle: ListviewProps['headerTitle']
+
+  /** 顶部通栏页面面包屑。 default: [] */
+  headerNav: ListviewProps['headerNav']
+
+  /** Tab 样式。 default: '' */
+  type: '' | 'card' | 'line'
+
+  /** Tab 位置。 default: 'left' */
+  tabPosition: 'left' | 'center'
+}