types: 类型抽离

packages/components/Grid/components/GridItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" name="GridItem">
 import type { Ref } from 'vue'
 import { computed, inject, ref, useAttrs, watch } from 'vue'
-import type { BreakPoint, Responsive } from '../interface/index'
+import type { BreakPoint, Responsive } from '../../../types'
 
 interface Props {
   offset?: number

packages/components/Grid/index.vue

@@ -15,7 +15,7 @@ import {
   useSlots,
   watch,
 } from 'vue'
-import type { BreakPoint } from './interface/index'
+import type { BreakPoint } from '../../types'
 
 interface Props {
   cols?: number | Record<BreakPoint, number>

packages/components/ProTable/components/ColSetting.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { ColumnProps } from '../interface'
+import type { ColumnProps } from '../../../types'
 
 defineOptions({ name: 'ColSetting' })
 defineProps<{ colSetting: ColumnProps[] }>()

packages/components/ProTable/components/Pagination.vue

@@ -1,15 +1,5 @@
 <script setup lang="ts">
-interface Pageable {
-  pageNum: number
-  pageSize: number
-  total: number
-}
-
-interface PaginationProps {
-  pageable: Pageable
-  handleSizeChange: (size: number) => void
-  handleCurrentChange: (currentPage: number) => void
-}
+import type { PaginationProps } from '../../../types'
 
 defineOptions({ name: 'Pagination' })
 defineProps<PaginationProps>()

packages/components/ProTable/components/TableColumn.vue

@@ -1,6 +1,6 @@
 <script setup lang="tsx" name="TableColumn">
 import { inject, ref, useSlots } from 'vue'
-import type { ColumnProps, HeaderRenderScope, RenderScope } from '../interface'
+import type { ColumnProps, HeaderRenderScope, RenderScope } from '../../../types'
 import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from '../../../utils'
 
 defineProps<{ column: ColumnProps }>()

packages/components/ProTable/index.vue

@@ -6,28 +6,11 @@ import Sortable from 'sortablejs'
 import SearchForm from '../SearchForm/index.vue'
 import { useTable } from '../../hooks/useTable'
 import { useSelection } from '../../hooks/useSelection'
-import type { BreakPoint } from '../Grid/interface'
 import { generateUUID, handleProp } from '../../utils'
+import type { ColumnProps, ProTableProps, TypeProps } from '../../types'
 import Pagination from './components/Pagination.vue'
 import ColSetting from './components/ColSetting.vue'
 import TableColumn from './components/TableColumn.vue'
-import type { ColumnProps, TypeProps } from './interface'
-
-export interface ProTableProps {
-  columns: ColumnProps[] // 列配置项  ==> 必传
-  data?: any[] // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
-  requestApi?: (params: any) => Promise<any> // 请求表格数据的 api ==> 非必传
-  requestAuto?: boolean // 是否自动执行请求 api ==> 非必传（默认为true）
-  requestError?: (params: any) => void // 表格 api 请求错误监听 ==> 非必传
-  dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
-  title?: string // 表格标题 ==> 非必传
-  pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
-  initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
-  border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
-  toolButton?: ('refresh' | 'setting' | 'search')[] | boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
-  rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
-  searchCol?: number | Record<BreakPoint, number> // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
-}
 
 // 接受父组件参数，配置默认值
 const props = withDefaults(defineProps<ProTableProps>(), {

packages/components/SearchForm/components/SearchFormItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
-import type { ColumnProps } from '../../ProTable/interface'
+import type { ColumnProps } from '../../../types'
 import { handleProp } from '../../../utils'
 
 interface SearchFormItem {

packages/components/SearchForm/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ArrowDown, ArrowUp, Delete, Search } from '@element-plus/icons-vue'
-import type { ColumnProps } from '../ProTable/interface'
-import type { BreakPoint } from '../Grid/interface'
+import type { BreakPoint, ColumnProps } from '../../types'
 import Grid from '../Grid/index.vue'
 import GridItem from '../Grid/components/GridItem.vue'
 import SearchFormItem from './components/SearchFormItem.vue'

packages/hooks/interface/index.ts

@@ -1,23 +1,18 @@
-export namespace Table {
-  export interface Pageable {
-    pageNum: number
-    pageSize: number
-    total: number
+import type { Pageable } from '../../types'
+
+export interface StateProps {
+  tableData: any[]
+  pageable: Pageable
+  searchParam: {
+    [key: string]: any
   }
-  export interface StateProps {
-    tableData: any[]
-    pageable: Pageable
-    searchParam: {
-      [key: string]: any
-    }
-    searchInitParam: {
-      [key: string]: any
-    }
-    totalParam: {
-      [key: string]: any
-    }
-    icon?: {
-      [key: string]: any
-    }
+  searchInitParam: {
+    [key: string]: any
+  }
+  totalParam: {
+    [key: string]: any
+  }
+  icon?: {
+    [key: string]: any
   }
 }

packages/hooks/useTable.ts

@@ -1,5 +1,5 @@
 import { computed, reactive, toRefs } from 'vue'
-import type { Table } from './interface'
+import type { StateProps } from './interface'
 
 /**
  * @description table 页面操作方法封装
@@ -9,7 +9,7 @@ import type { Table } from './interface'
  * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
  */
 export function useTable(api?: (params: any) => Promise<any>, initParam: object = {}, isPageable: boolean = true, dataCallBack?: (data: any) => any, requestError?: (error: any) => void) {
-  const state = reactive<Table.StateProps>({
+  const state = reactive<StateProps>({
     // 表格数据
     tableData: [],
     // 分页数据
@@ -74,7 +74,7 @@ export function useTable(api?: (params: any) => Promise<any>, initParam: object
   const updatedTotalParam = () => {
     state.totalParam = {}
     // 处理查询参数，可以给查询参数加自定义前缀操作
-    const nowSearchParam: Table.StateProps['searchParam'] = {}
+    const nowSearchParam: StateProps['searchParam'] = {}
     // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
     for (const key in state.searchParam) {
       // 某些情况下参数为 false/0 也应该携带参数

packages/index.ts

@@ -1,10 +1,10 @@
 import type { App } from 'vue'
 import Table from './components/ProTable/index.vue'
 
-export const GeekerTable = Object.assign(Table, {
+export const GeekerTable = {
   install: (app: App) => {
     app.component('GeekerTable', Table)
   },
-})
+}
 
 export default GeekerTable

packages/components/Grid/interface/index.ts → packages/types/grid.ts

@@ -1,6 +1,6 @@
-export type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export interface Responsive {
-  span?: number
-  offset?: number
-}
+export type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export interface Responsive {
+  span?: number
+  offset?: number
+}

packages/types/index.ts

@@ -0,0 +1,37 @@
+import type { ComponentPublicInstance } from 'vue'
+import type ProTable from '../components/ProTable/index.vue'
+import type { ProTableProps } from './table-props'
+import type { ColumnProps, EnumProps, FieldNamesProps, HeaderRenderScope, RenderScope, TypeProps } from './table-column'
+import type { SearchProps, SearchRenderScope, SearchType } from './search-props'
+import type { BreakPoint, Responsive } from './grid'
+import type { Pageable, PaginationProps } from './pagination'
+
+type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>
+
+export type {
+  // table-props
+  ProTableProps,
+
+  // table-column
+  ColumnProps,
+  EnumProps,
+  FieldNamesProps,
+  HeaderRenderScope,
+  RenderScope,
+  TypeProps,
+
+  // search-props
+  SearchProps,
+  SearchRenderScope,
+  SearchType,
+
+  // grid
+  BreakPoint,
+  Responsive,
+
+  // pagination
+  PaginationProps,
+  Pageable,
+
+  ProTableInstance,
+}

packages/types/pagination.ts

@@ -0,0 +1,11 @@
+export interface Pageable {
+  pageNum: number
+  pageSize: number
+  total: number
+}
+
+export interface PaginationProps {
+  pageable: Pageable
+  handleSizeChange: (size: number) => void
+  handleCurrentChange: (currentPage: number) => void
+}

packages/types/search-props.ts

@@ -0,0 +1,37 @@
+import type { Ref, VNode } from 'vue'
+import type { EnumProps } from './table-column'
+import type { BreakPoint, Responsive } from './grid'
+
+export type SearchType =
+  | 'input'
+  | 'input-number'
+  | 'select'
+  | 'select-v2'
+  | 'tree-select'
+  | 'cascader'
+  | 'date-picker'
+  | 'time-picker'
+  | 'time-select'
+  | 'switch'
+  | 'slider'
+
+export interface SearchRenderScope {
+  searchParam: { [key: string]: any }
+  placeholder: string
+  clearable: boolean
+  options: EnumProps[]
+  data: EnumProps[]
+}
+
+export type SearchProps = {
+  el?: SearchType // 当前项搜索框的类型
+  label?: string // 当前项搜索框的 label
+  props?: any // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  tooltip?: string // 搜索提示
+  order?: number // 搜索项排序（从大到小）
+  span?: number // 搜索项所占用的列数，默认为 1 列
+  offset?: number // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] | Ref<any> // 搜索项默认值
+  render?: (scope: SearchRenderScope) => VNode // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>