@qin-ui/element-plus-pro 1.0.7 → 1.1.0

package/src/components/table/components/SizeControl.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import {
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  type TableProps,
+} from '../../../shared/ui';
+import ColumnHeightOutlined from './icons/ColumnHeightOutlined.vue';
+
+type Size = TableProps['size'];
+
+const size = defineModel<Size>('size');
+
+size.value = size.value ?? 'default';
+
+const items: Array<{ label: string; key: NonNullable<Size> }> = [
+  { label: '默认', key: 'default' },
+  { label: '中等', key: 'large' },
+  { label: '紧凑', key: 'small' },
+];
+</script>
+
+<template>
+  <Dropdown trigger="click" @command="val => (size = val as any)">
+    <Button text class="pro-table_size-control_button">
+      <ColumnHeightOutlined />
+    </Button>
+    <template #dropdown>
+      <DropdownMenu>
+        <DropdownItem
+          v-for="item in items"
+          :key="item.key"
+          :command="item.key"
+          :disabled="item.key === size"
+        >
+          {{ item.label }}
+        </DropdownItem>
+      </DropdownMenu>
+    </template>
+  </Dropdown>
+</template>
+
+<style scoped lang="less">
+.pro-table_size-control_button {
+  display: flex;
+  align-items: center;
+  padding-right: 12px;
+  padding-left: 12px;
+
+  :deep(svg) {
+    transform: scale(1.3);
+  }
+}
+</style>

package/src/components/table/components/TableColumnRenderer.vue

@@ -0,0 +1,71 @@
+<script
+  lang="ts"
+  setup
+  generic="D extends Record<string, any> = Record<string, any>"
+>
+import { get, toPath } from '../../../shared/core';
+import { TableColumn } from '../../../shared/ui';
+import type { Column, Columns } from '../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'TableColumnRenderer' });
+
+type Props = {
+  columns: Columns<D>;
+};
+const { columns } = defineProps<Props>();
+
+const getColumnKey = (column: Column<D>, index: number) => {
+  const key = column.key ?? column.prop;
+  if (key === undefined || key === null) return `__idx_${index}`;
+  return Array.isArray(key) ? key.join('.') : String(key);
+};
+
+const getCellValue = (row: Record<string, any>, column: Column<D>) => {
+  const path = column.prop;
+  if (!path) return undefined;
+  return get(row, toPath(path));
+};
+
+const normalizedColumns = computed(() => {
+  return columns.filter(column => !column.hidden);
+});
+
+const getColumnProps = (column: Column<D>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { hidden, render, key, ...rest } = column;
+  const prop = Array.isArray(column.prop)
+    ? column.prop.join('.')
+    : column.prop
+      ? String(column.prop)
+      : undefined;
+  return {
+    ...rest,
+    prop,
+    columnKey: key ? String(key) : prop,
+  };
+};
+</script>
+
+<template>
+  <template
+    v-for="(column, index) in normalizedColumns"
+    :key="getColumnKey(column, index)"
+  >
+    <TableColumn v-bind="getColumnProps(column)">
+      <template #default="scope">
+        <template v-if="typeof column.render === 'function'">
+          <component
+            :is="
+              column.render?.({
+                ...scope,
+                column,
+                cellValue: getCellValue(scope.row, column),
+              })
+            "
+          />
+        </template>
+      </template>
+    </TableColumn>
+  </template>
+</template>

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,38 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { PaginationProps, TableProps } from '../../shared/ui';
+import type { ContainerComponent } from '../form/types';
+import type { Columns } from './types';
+import type { SearchFormProps } from './components/SearchForm.vue';
+import type { Table } from './useTable';
+import ProTable from './components/ProTable.vue';
+
+type Control = { sizeControl: boolean; columnControl: boolean };
+type SearchFormConfig = Omit<SearchFormProps, 'form'> & {
+  hidden?: boolean;
+  container?: ContainerComponent | false;
+};
+
+type ReturnTableRecord<V> = V extends Table<any, infer R> ? R : any;
+
+// instance
+export type ProTableProps<T extends Table<any> = Table> = {
+  table?: T;
+  search?: () => Promise<unknown>;
+  addIndexColumn?: boolean;
+  immediateSearch?: boolean;
+  control?: boolean | Partial<Control>;
+  searchFormConfig?: SearchFormConfig;
+  tableContainer?: ContainerComponent | false;
+  columns?: Columns<ReturnTableRecord<T>>;
+  data?: ReturnTableRecord<T>[];
+  pagination?: false | Partial<PaginationProps>;
+} & Omit<TableProps, 'data'>;
+export type ProTableInstance = ComponentPublicInstance;
+
+// types
+export { type Column, type Columns } from './types';
+
+// hooks
+export { useTable, type Table } from './useTable';
+
+export default ProTable;

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

@@ -0,0 +1,77 @@
+import type { ColumnType } from '../../../shared/ui';
+import {
+  Data,
+  ExtendWithAny,
+  KeyExpandString,
+  Paths,
+  Path,
+} from '../../../shared/core';
+
+type BivariantRender<D extends Data = Data> = {
+  bivarianceHack(scope: ColumnScope<D>): any;
+}['bivarianceHack'];
+
+/**
+ * Element Plus 表格列作用域
+ * @template D - 表格行数据类型
+ 
+ * @public
+ */
+export type ColumnScope<D extends Data = Data> = {
+  /** 当前行数据 */
+  row: ExtendWithAny<D>;
+  /** 当前列配置 */
+  column: Column<D>;
+  /** 行索引 */
+  $index: number;
+  /** 单元格值 */
+  cellValue: any;
+};
+
+/**
+ * @qin-ui/element-plus-pro 表格列配置类型
+ *
+ * @description 基于 Element Plus 的 ColumnType 列类型，并添加：
+ * - prop 作为主要字段（Element Plus 使用 prop 而非 dataIndex）
+ * - key 作为辅助标识
+ * - hidden 属性
+ * - render 自定义渲染函数
+ *
+ * @template D - 表格行数据类型
+ *
+ * @example
+ * ```ts
+ * interface User { name: string; age: number }
+ *
+ * const columns: Columns<User> = [
+ *   { prop: 'name', label: '姓名', width: 120 },
+ *   { prop: 'age', label: '年龄', width: 80 },
+ * ]
+ * ```
+ 
+ * @public
+ */
+export type Column<D extends Data = Data> = Partial<
+  Omit<ColumnType<any>, 'prop' | 'property' | 'children' | 'render'>
+> & {
+  /** 列字段标识（辅助字段） */
+  key?: Path<D>;
+  /**
+   * @description 列数据路径（主要字段）
+   * Element Plus 使用 prop 而非 dataIndex
+   * @example 'name' | 'address.city'
+   */
+  prop?: KeyExpandString<Extract<keyof D, string>> | Paths<D>;
+  /** 是否隐藏该列 */
+  hidden?: boolean;
+  /** 自定义渲染函数 */
+  render?: BivariantRender<D>;
+};
+
+/**
+ * @qin-ui/element-plus-pro 表格列配置数组类型
+ * @template D - 表格行数据类型
+ 
+ * @public
+ */
+export type Columns<D extends Data = Data> = Array<Column<D>>;

package/src/components/table/useTable.ts

@@ -0,0 +1,144 @@
+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';
+import type { Ref } from 'vue';
+
+/**
+ * 表格实例类型
+ *
+ * @description 在 core Table 类型的基础上，将列类型 C 绑定为本地 Column<T>，
+ * 并将 dataSource 重命名为 data（Element Plus 使用 data 而非 dataSource），
+ * 使 columns 操作获得 Element Plus 表格列的完整属性类型提示。
+ *
+ * @template D - 搜索表单数据类型
+ * @template T - 表格行数据类型（一行数据的类型）
+ *
+ * @property columns     - 列配置数组（响应式 Ref），用于渲染表格列
+ * @property data        - 表格数据源（响应式 Ref），对应 Element Plus Table 的 data 属性
+ * @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 SearchParams { keyword: string }
+ * interface User { name: string; age: number }
+ *
+ * const table: Table<SearchParams, User> = useTable({
+ *   columns: [{ prop: '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>,
+> = Omit<_Table<D, T, Column<T>>, 'dataSource'> & {
+  /**
+   * Element Plus 数据源（与 core 的 dataSource 对应）
+   */
+  data: Ref<T[]>;
+};
+
+type UseTableParams<
+  D extends Data = Data,
+  T extends Data = ExtendWithAny<D>,
+> = {
+  /** 列配置数组 */
+  columns?: Columns<T>;
+  /** 数据源数组（Element Plus 使用 data 而非 dataSource） */
+  data?: T[];
+  /** 初始分页参数 */
+  pageParam?: PageParam;
+  /** 初始搜索参数 */
+  searchParam?: ExtendWithAny<DeepPartial<D>>;
+  /** 搜索表单字段配置 */
+  searchFields?: Fields<D>;
+};
+
+/**
+ * 创建表格实例的 Hook
+ *
+ * @description 基于 `@qin-ui/pro-components-core` 的 `useTable` 封装，适配 Element Plus 的 API 风格：
+ * - 数据源使用 `data` 而非 `dataSource`
+ *
+ * 是 ProTable 组件的核心 Hook，提供了：
+ * - 列配置管理（增删改查）
+ * - 数据源管理
+ * - 分页管理
+ * - 搜索表单集成（内部使用 useForm）
+ * - 查询参数重置
+ *
+ * @template D - 搜索表单数据类型
+ * @template T - 表格行数据类型
+ *
+ * @param {object} params - 表格配置参数
+ * @param {Columns<T>} [params.columns] - 初始列配置数组
+ * @param {T[]} [params.data] - 初始数据源（Element Plus 风格）
+ * @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 }
+ * interface User { name: string; age: number; email: string }
+ *
+ * const table = useTable<SearchParams, User>({
+ *   columns: [
+ *     { prop: 'name', title: '姓名', width: 120 },
+ *     { prop: 'age', title: '年龄', width: 80 },
+ *   ],
+ *   data: [],
+ *   pageParam: { current: 1, pageSize: 20, total: 0 },
+ *   searchParam: { keyword: '' },
+ *   searchFields: [
+ *     { path: 'keyword', label: '关键词', component: 'input' },
+ *   ],
+ * })
+ * ```
+ *
+ * @see {@link coreUseTable} 底层核心实现（来自 @qin-ui/pro-components-core）
+ *
+ * @public
+ */
+export function useTable<
+  D extends Data = Data,
+  T extends Data = ExtendWithAny<D>,
+>(params: UseTableParams<D, T> = {}): Table<D, T> {
+  const { data, ...rest } = params;
+  const coreTable = (coreUseTable as any)({
+    ...rest,
+    dataSource: data,
+  }) as _Table<D, T, Column<T>>;
+
+  const { dataSource, ...tableWithoutDataSource } = coreTable as any;
+  const table = {
+    ...tableWithoutDataSource,
+    data: dataSource as Ref<T[]>,
+  } as Table<D, T>;
+
+  return table;
+}

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 驱动的表单组件，基于 element-plus Form 封装
+ *
+ * @description 通过声明式 JSON Schema 配置即可快速生成表单，
+ * 提供极致的 TypeScript 类型推导与组件库插槽扩展能力。
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ProForm, useForm } from '@qin-ui/element-plus-pro'
+ * const form = useForm<User>({ name: '' }, [
+ *   { path: 'name', label: '姓名', component: 'input' }
+ * ])
+ * </script>
+ * <template>
+ *   <ProForm :form="form" />
+ * </template>
+ * ```
+ *
+ * Schema 驱动的表格组件，基于 element-plus Table 封装
+ *
+ * @description 通过声明式列配置即可生成功能完整的表格，
+ * 支持列动态控制、搜索表单集成、分页管理等企业级能力。
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ProTable, useTable } from '@qin-ui/element-plus-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/element-plus-pro 安装方法
+   * @description 全局注册所有组件（ProForm、ProTable、ProComponentProvider）
+   *
+   * @param {App} app - Vue 应用实例
+   *
+   * @example
+   * ```ts
+   * import { createApp } from 'vue'
+   * import ProComponents from '@qin-ui/element-plus-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,38 @@
+/**
+ * 统一 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
+  get,
+  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,106 @@
+import {
+  ElForm as Form,
+  ElFormItem as FormItem,
+  ElRow as Grid,
+  ElCol as GridItem,
+  ElTable as Table,
+  ElTableColumn as TableColumn,
+  ElSpace as Space,
+  ElDropdown as Dropdown,
+  ElDropdownMenu as DropdownMenu,
+  ElDropdownItem as DropdownItem,
+  ElCheckbox as Checkbox,
+  ElCheckboxGroup as CheckboxGroup,
+  ElButton as Button,
+  ElAutocomplete as AutoComplete,
+  ElCascader as Cascader,
+  ElDatePicker as DatePicker,
+  ElInput as Input,
+  ElInputNumber as InputNumber,
+  ElSelect as Select,
+  ElSlider as Slider,
+  ElSwitch as Switch,
+  ElTransfer as Transfer,
+  ElTreeSelect as TreeSelect,
+  ElRadioGroup as RadioGroup,
+  ElTimePicker as TimePicker,
+  ElTimeSelect as TimeSelect,
+  ElPagination as Pagination,
+  useFormDisabled,
+  type FormItemInstance,
+  type FormInstance,
+  type FormProps,
+  type FormItemProps,
+  type TableProps as _TableProps,
+  type TableColumnCtx as ColumnType,
+  type PaginationProps,
+  type RowProps as GridProps,
+  type ColProps as GridItemProps,
+} from 'element-plus';
+import { type MaybeRefOrGetter, computed, inject, provide, toValue } from 'vue';
+
+export {
+  Form,
+  FormItem,
+  Grid,
+  GridItem,
+  Table,
+  TableColumn,
+  Space,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Checkbox,
+  CheckboxGroup,
+  Button,
+  AutoComplete,
+  Cascader,
+  DatePicker,
+  Input,
+  InputNumber,
+  Select,
+  Slider,
+  Switch,
+  Transfer,
+  TreeSelect,
+  RadioGroup,
+  TimePicker,
+  TimeSelect,
+  Pagination,
+  type FormItemInstance,
+  type FormInstance,
+  type FormProps,
+  type FormItemProps,
+  type PaginationProps,
+  type GridProps,
+  type GridItemProps,
+  type ColumnType,
+};
+
+export type TableProps = _TableProps<any>;
+
+export const tableProps = () => (Table as any).props || {};
+export const paginationProps = () => (Pagination as any).props || {};
+export const gridItemProps = () => (GridItem as any).props || {};
+export const formItemProps = () => (FormItem as any).props || {};
+
+const DisabledContextKey = Symbol('pro-form-disabled-context');
+
+export const useDisabledContext = () => {
+  const formDisabled = useFormDisabled();
+  return inject(
+    DisabledContextKey,
+    computed(() => !!formDisabled.value)
+  );
+};
+
+export const useDisabledContextProvider = (
+  disabled: MaybeRefOrGetter<boolean | undefined>
+) => {
+  provide(
+    DisabledContextKey,
+    computed(() => !!toValue(disabled))
+  );
+};
+
+export type NamePath = string | number | (string | number)[];