@qin-ui/antdv-next-pro 1.1.15 → 1.2.0

package/src/components/table/components/icons/ColumnHeightOutlined.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- prettier-ignore -->
+  <svg focusable="false" data-icon="column-height" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z"></path></svg>
+</template>

package/src/components/table/components/icons/DownOutlined.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- prettier-ignore -->
+  <svg focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg>
+</template>

package/src/components/table/components/icons/FilterOutlined.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- prettier-ignore -->
+  <svg focusable="false" data-icon="filter" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z"></path></svg>
+</template>

package/src/components/table/components/index.ts

@@ -0,0 +1,4 @@
+export { default as DefaultSearchFormContainer } from './DefaultSearchFormContainer.vue';
+export { default as DefaultTableContainer } from './DefaultTableContainer.vue';
+export { default as SizeControl } from './SizeControl.vue';
+export { default as ColumnControl } from './ColumnControl.vue';

package/src/components/table/index.ts

@@ -0,0 +1,14 @@
+import { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import ProTable from './components/ProTable.vue';
+
+// 仅保留组件 Props 与实例类型
+export type ProTableProps = ComponentProps<typeof ProTable>;
+export type ProTableInstance = ComponentExposed<typeof ProTable>;
+
+// 仅导出核心列配置类型
+export { type Column, type Columns } from './types';
+
+// 仅导出核心表格 Hook 与类型
+export { useTable, type Table } from './useTable';
+
+export default ProTable;

package/src/components/table/types/index.ts

@@ -0,0 +1,52 @@
+import type { ColumnType } from '../../../shared/ui';
+import { Data, KeyExpandString, Paths, Path } from '../../../shared/core';
+
+/**
+ * @qin-ui/antdv-next-pro 表格列配置类型
+ *
+ * @description 继承 antdv-next 的 ColumnType 列类型，并添加：
+ * - 类型安全的 dataIndex（基于泛型 D 推导路径），优先使用
+ * - key 作为辅助标识
+ * - hidden 属性用于控制列显隐
+ *
+ * @template D - 表格行数据类型
+ *
+ * @example
+ * ```ts
+ * interface User { name: string; age: number }
+ *
+ * const columns: Columns<User> = [
+ *   { dataIndex: 'name', title: '姓名', width: 120 },
+ *   { dataIndex: 'age', title: '年龄', width: 80 },
+ * ]
+ * ```
+ 
+ * @public
+ */
+export type Column<D extends Data = Data> = Omit<
+  ColumnType,
+  'dataIndex' | 'key'
+> & {
+  /**
+   * @description 列数据路径（主要字段），优先使用 dataIndex 进行字段匹配
+   * @example 'name' | 'address.city' | ['address', 'city']
+   */
+  dataIndex?: KeyExpandString<Extract<keyof D, string>> | Paths<D>;
+  /**
+   * @description 列字段标识（辅助字段），当 dataIndex 不满足需求时使用
+   */
+  key?: Path<D>;
+  /**
+   * @description 是否隐藏该列
+   * @default false
+   */
+  hidden?: boolean;
+};
+
+/**
+ * @qin-ui/antdv-next-pro 表格列配置数组类型
+ * @template D - 表格行数据类型
+ 
+ * @public
+ */
+export type Columns<D extends Data = Data> = Array<Column<D>>;

package/src/components/table/useTable.ts

@@ -0,0 +1,129 @@
+import {
+  useTable as coreUseTable,
+  type Table as _Table,
+} from '../../shared/core';
+import type {
+  Data,
+  ExtendWithAny,
+  DeepPartial,
+  PageParam,
+} from '../../shared/core';
+import { Fields } from '../form/types';
+import type { Column, Columns } from './types';
+
+/**
+ * 表格实例类型
+ *
+ * @description 在 core Table 类型的基础上，将列类型 C 绑定为本地 Column\<T\>，
+ * 使 columns 操作获得 antdv-next 表格列的完整属性类型提示。
+ *
+ * @template D - 搜索表单数据类型
+ * @template T - 表格行数据类型（一行数据的类型）
+ *
+ * @property columns     - 列配置数组（响应式 Ref），用于渲染表格列
+ * @property dataSource  - 表格数据源（响应式 Ref），绑定到 Table 的 data-source
+ * @property pageParam   - 分页参数（响应式 reactive），包含 current、pageSize、total
+ * @property searchForm  - 搜索表单实例（Form 类型），用于管理搜索区域的字段和数据
+ * @property setColumn   - 更新列配置，支持合并/覆盖两种模式，用法同 setField
+ * @property deleteColumn - 删除列，支持路径或查找函数
+ * @property appendColumn - 在指定列后追加新列，传 undefined 在末尾追加
+ * @property prependColumn - 在指定列前插入新列，传 undefined 在开头插入
+ * @property setPageParam - 设置分页参数，支持部分更新和函数式更新
+ * @property resetQueryParams - 重置分页到第一页并恢复搜索条件到初始值
+ *
+ * @example
+ * ```ts
+ * interface User { name: string; age: number; email: string }
+ *
+ * const table: Table<{}, User> = useTable({
+ *   columns: [{ dataIndex: 'name', title: '姓名' }],
+ * })
+ *
+ * table.columns.value                  // 访问列配置
+ * table.setColumn('name', { width: 150 }) // 更新列
+ * table.setPageParam({ current: 2 })      // 切换页码
+ * table.searchForm.setFormData('keyword', '搜索词') // 操作搜索表单
+ * ```
+ *
+ * @public
+ */
+export type Table<
+  D extends Data = Data,
+  T extends Data = ExtendWithAny<D>,
+> = _Table<D, T, Column<T>>;
+
+/**
+ * 创建表格实例的 Hook
+ *
+ * @description 基于 `@qin-ui/pro-components-core` 的 `useTable`，将列类型绑定为本地 `Column<T>`。
+ * 是 ProTable 组件的核心 Hook，提供了：
+ * - 列配置管理（增删改查）
+ * - 数据源管理
+ * - 分页管理
+ * - 搜索表单集成（内部使用 useForm）
+ * - 查询参数重置
+ *
+ * @template D - 搜索表单数据类型
+ * @template T - 表格行数据类型
+ *
+ * @param {object} params - 表格配置参数
+ * @param {Columns<T>} [params.columns] - 初始列配置数组
+ * @param {T[]} [params.dataSource] - 初始数据源
+ * @param {PageParam} [params.pageParam] - 初始分页参数，默认 `{ current: 1, pageSize: 10, total: 0 }`
+ * @param {ExtendWithAny<DeepPartial<D>>} [params.searchParam] - 初始搜索参数
+ * @param {Fields<D>} [params.searchFields] - 搜索表单字段配置
+ *
+ * @returns {Table<D, T>} 表格实例
+ *
+ * @example
+ * ```ts
+ * interface SearchParams { keyword: string; status: string }
+ * interface User { name: string; age: number; email: string }
+ *
+ * const table = useTable<SearchParams, User>({
+ *   columns: [
+ *     { dataIndex: 'name', title: '姓名', width: 120 },
+ *     { dataIndex: 'age', title: '年龄', width: 80 },
+ *   ],
+ *   dataSource: [],
+ *   pageParam: { current: 1, pageSize: 20, total: 0 },
+ *   searchParam: { keyword: '', status: '' },
+ *   searchFields: [
+ *     { path: 'keyword', label: '关键词', component: 'input' },
+ *     { path: 'status', label: '状态', component: 'select' },
+ *   ],
+ * })
+ *
+ * // 查询
+ * const handleSearch = async () => {
+ *   const res = await fetchUserList({
+ *     ...table.searchForm.formData,
+ *     ...table.pageParam,
+ *   })
+ *   table.dataSource.value = res.data
+ *   table.setPageParam({ total: res.total })
+ * }
+ *
+ * // 重置
+ * const handleReset = () => {
+ *   table.resetQueryParams()
+ *   handleSearch()
+ * }
+ * ```
+ *
+ * @see {@link coreUseTable} 底层核心实现（来自 @qin-ui/pro-components-core）
+ *
+ * @public
+ */
+export function useTable<
+  D extends Data = Data,
+  T extends Data = ExtendWithAny<D>,
+>(params: {
+  columns?: Columns<T>;
+  dataSource?: T[];
+  pageParam?: PageParam;
+  searchParam?: ExtendWithAny<DeepPartial<D>>;
+  searchFields?: Fields<D>;
+}): Table<D, T> {
+  return coreUseTable(params) as any;
+}

package/src/index.ts

@@ -0,0 +1,81 @@
+import type { App } from 'vue';
+import ProForm from './components/form';
+import ProTable from './components/table';
+import ProComponentProvider from './components/component-provider';
+
+export * from './components/form';
+export * from './components/table';
+export * from './components/component-provider';
+
+/**
+ * Schema 驱动的表单组件，基于 antdv-next Form 封装
+ *
+ * @description 通过声明式 JSON Schema 配置即可快速生成表单，
+ * 提供极致的 TypeScript 类型推导与组件库插槽扩展能力。
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ProForm, useForm } from '@qin-ui/antdv-next-pro'
+ * const form = useForm<User>({ name: '' }, [
+ *   { path: 'name', label: '姓名', component: 'input' }
+ * ])
+ * </script>
+ * <template>
+ *   <ProForm :form="form" />
+ * </template>
+ * ```
+ *
+ * Schema 驱动的表格组件，基于 antdv-next Table 封装
+ *
+ * @description 通过声明式列配置即可生成功能完整的表格，
+ * 支持列动态控制、搜索表单集成、分页管理等企业级能力。
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ProTable, useTable } from '@qin-ui/antdv-next-pro'
+ * const table = useTable<User>({ columns: [{ key: 'name', title: '姓名' }] })
+ * </script>
+ * <template>
+ *   <ProTable :table="table" />
+ * </template>
+ * ```
+ *
+ * 组件提供者，用于全局配置 ProForm 和 ProTable 的默认行为
+ *
+ * @description 通过 `ProComponentProvider` 包裹应用根组件，
+ * 可以全局覆盖组件的默认属性（如表单布局、表格尺寸等）。
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ProComponentProvider :component-props="customProps">
+ *     <App />
+ *   </ProComponentProvider>
+ * </template>
+ * ```
+ */
+export { ProForm, ProTable, ProComponentProvider };
+
+export default {
+  /**
+   * @qin-ui/antdv-next-pro 安装方法
+   * @description 全局注册所有组件（ProForm、ProTable、ProComponentProvider）
+   *
+   * @param {App} app - Vue 应用实例
+   *
+   * @example
+   * ```ts
+   * import { createApp } from 'vue'
+   * import ProComponents from '@qin-ui/antdv-next-pro'
+   * const app = createApp(App)
+   * app.use(ProComponents)
+   * ```
+   */
+  install(app: App) {
+    app.component(ProForm.name, ProForm);
+    app.component(ProTable.name, ProTable);
+    app.component(ProComponentProvider.name!, ProComponentProvider);
+  },
+};

package/src/shared/core/index.ts

@@ -0,0 +1,37 @@
+/**
+ * 统一 re-export @qin-ui/pro-components-core，包内所有文件通过此文件引入 core 内容，
+ * 避免直接散列依赖 @qin-ui/pro-components-core，便于将来统一维护。
+ */
+export {
+  // hooks
+  useForm,
+  useTable,
+  useFields,
+  useFormData,
+  useFormRef,
+  // injection keys
+  InjectionFormKey,
+  InjectionPathKey,
+  // utils
+  getObject,
+  toPath,
+  camelizeProperties,
+  cloneDeep,
+  omit,
+  pick,
+  isPlainObject,
+  // types
+  type Data,
+  type Path,
+  type Paths,
+  type KeyExpandString,
+  type ExtendWithAny,
+  type DeepPartial,
+  type PageParam,
+  type Fields,
+  type Form,
+  type Table,
+  type UseFieldsReturn,
+  type UseFormDataReturn,
+  type UseFormRefReturn,
+} from '@qin-ui/pro-components-core';

package/src/shared/ui/index.ts

@@ -0,0 +1,55 @@
+import { Col, Table, FormItem } from 'antdv-next';
+
+export {
+  theme,
+  useConfig,
+  Form,
+  FormItem,
+  Row as Grid,
+  Col as GridItem,
+  Table,
+  Space,
+  Dropdown,
+  Menu,
+  RadioGroup,
+  Checkbox,
+  CheckboxGroup,
+  Button,
+  AutoComplete,
+  Cascader,
+  DatePicker,
+  DateRangePicker as RangePicker,
+  Input,
+  InputOTP,
+  TextArea,
+  InputPassword,
+  InputNumber,
+  InputSearch,
+  Select,
+  Slider,
+  Switch,
+  TimePicker,
+  TimeRangePicker,
+  Transfer,
+  TreeSelect,
+  type FormProps,
+  type FormItemProps,
+  type FormInstance,
+  type TableProps,
+  type PaginationProps,
+  type RowProps as GridProps,
+  type ColProps as GridItemProps,
+  type TableColumnType as ColumnType,
+} from 'antdv-next';
+
+export type FormItemInstance = InstanceType<typeof FormItem>;
+export const tableProps = () => (Table as any).props || {};
+export const gridItemProps = () => (Col as any).props || {};
+export const formItemProps = () => (FormItem as any).props || {};
+
+export {
+  useDisabledContext,
+  useDisabledContextProvider,
+} from 'antdv-next/dist/config-provider/DisabledContext';
+
+export type NamePath = string | number | (string | number)[];