@qin-ui/element-plus-pro 1.0.8 → 1.1.1

package/src/components/component-provider/constants/index.ts

@@ -0,0 +1,209 @@
+import { RequiredComponentVars } from '../types';
+import { InjectionKey, Component } from 'vue';
+
+export type InjectConfigEntry<T = any> = {
+  injectionKey: InjectionKey<T>;
+  default: T;
+};
+
+export const INJECT_CONFIG: {
+  [key in keyof RequiredComponentVars]: {
+    injectionKey: InjectionKey<RequiredComponentVars[key]>;
+    default: RequiredComponentVars[key];
+  };
+} = {
+  'pro-table': {
+    injectionKey: Symbol(''),
+    default: {
+      pagination: {
+        layout: 'total, sizes, prev, pager, next, jumper',
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        background: true,
+      },
+      searchFormConfig: {
+        layout: 'grid',
+        expand: { minExpandRows: 2, expandStatus: false },
+      },
+      control: true,
+      addIndexColumn: true,
+    },
+  },
+  'pro-form': {
+    injectionKey: Symbol(''),
+    default: { grid: { gutter: 24 } } as any,
+  },
+  'pro-form-item': {
+    injectionKey: Symbol(''),
+    default: { span: 8 } as any,
+  },
+  input: {
+    injectionKey: Symbol(''),
+    default: { maxlength: 100, clearable: true, placeholder: '请输入' },
+  },
+  'input.textarea': {
+    injectionKey: Symbol(''),
+    default: {
+      maxlength: 200,
+      autosize: { minRows: 3, maxRows: 6 },
+      showWordLimit: true,
+      clearable: true,
+      placeholder: '请输入',
+    },
+  },
+  'input.password': {
+    injectionKey: Symbol(''),
+    default: {
+      showPassword: true,
+      maxlength: 100,
+      clearable: true,
+      placeholder: '请输入',
+    },
+  },
+  'input-number': {
+    injectionKey: Symbol(''),
+    default: {
+      max: 10 ** 15 - 1,
+      min: -(10 ** 15 + 1),
+      controls: false,
+      placeholder: '请输入',
+      style: { width: '100%' },
+    },
+  },
+  autocomplete: {
+    injectionKey: Symbol(''),
+    default: { clearable: true, placeholder: '请输入' },
+  },
+  select: {
+    injectionKey: Symbol(''),
+    default: { clearable: true, placeholder: '请选择' },
+  },
+  cascader: {
+    injectionKey: Symbol(''),
+    default: { clearable: true, placeholder: '请选择' },
+  },
+  'date-picker': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.date': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.dates': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.daterange': {
+    injectionKey: Symbol(''),
+    default: {
+      style: { width: '100%' },
+      startPlaceholder: '开始日期',
+      endPlaceholder: '结束日期',
+    },
+  },
+  'date-picker.week': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.month': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.monthrange': {
+    injectionKey: Symbol(''),
+    default: {
+      style: { width: '100%' },
+      startPlaceholder: '开始月份',
+      endPlaceholder: '结束月份',
+    },
+  },
+  'date-picker.months': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.yearrange': {
+    injectionKey: Symbol(''),
+    default: {
+      style: { width: '100%' },
+      startPlaceholder: '开始年份',
+      endPlaceholder: '结束年份',
+    },
+  },
+  'date-picker.year': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.years': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.datetime': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'date-picker.datetimerange': {
+    injectionKey: Symbol(''),
+    default: {
+      style: { width: '100%' },
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+    },
+  },
+  'time-picker': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'time-select': {
+    injectionKey: Symbol(''),
+    default: { style: { width: '100%' }, placeholder: '请选择' },
+  },
+  'checkbox-group': {
+    injectionKey: Symbol(''),
+    default: {},
+  },
+  'radio-group': {
+    injectionKey: Symbol(''),
+    default: {},
+  },
+  switch: {
+    injectionKey: Symbol(''),
+    default: { modelProp: 'modelValue' },
+  },
+  slider: {
+    injectionKey: Symbol(''),
+    default: {},
+  },
+  'tree-select': {
+    injectionKey: Symbol(''),
+    default: { clearable: true, placeholder: '请选择' },
+  },
+  transfer: {
+    injectionKey: Symbol(''),
+    default: {},
+  },
+};
+
+export const INJECT_COMPONENTS: InjectionKey<
+  Partial<Record<string, Component>>
+> = Symbol('INJECT_COMPONENTS');
+
+const DYNAMIC_INJECT_CONFIG: Record<string, InjectConfigEntry> =
+  Object.create(null);
+
+export const getInjectConfig = (key: string): InjectConfigEntry | undefined => {
+  return (
+    (INJECT_CONFIG as Record<string, InjectConfigEntry>)[key] ||
+    DYNAMIC_INJECT_CONFIG[key]
+  );
+};
+
+export const ensureInjectConfig = (key: string): InjectConfigEntry => {
+  const existing = getInjectConfig(key);
+  if (existing) return existing;
+  const created: InjectConfigEntry = {
+    injectionKey: Symbol(`dynamic:${key}`),
+    default: {},
+  };
+  DYNAMIC_INJECT_CONFIG[key] = created;
+  return created;
+};

package/src/components/component-provider/index.ts

@@ -0,0 +1,6 @@
+import ComponentProvider from './components/index.vue';
+
+// 仅导出全局属性配置类型，隐藏所有底层的 INJECT_CONFIG 与工具函数
+export { type ComponentVars } from './types';
+
+export default ComponentProvider;

package/src/components/component-provider/types/index.ts

@@ -0,0 +1,64 @@
+import {
+  GridItemProps,
+  FormItemProps,
+  TableProps,
+  PaginationProps,
+  DatePicker,
+} from '../../../shared/ui';
+import { ComponentName, GetComponentType } from '../../form/constants';
+import { Base, Grid } from '../../form/types';
+import { ProFormProps } from '../../form';
+import { AllowedComponentProps } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+type PP<T extends Record<string, any>> = Partial<T & AllowedComponentProps>;
+
+type FP<T extends Record<string, any>> = Partial<
+  T &
+    Pick<
+      Base,
+      | 'valueFormatter'
+      | 'componentContainer'
+      | 'modelProp'
+      | 'componentClass'
+      | 'componentStyle'
+    > &
+    AllowedComponentProps
+>;
+
+type DatePickerType = NonNullable<ComponentProps<typeof DatePicker>['type']>;
+
+export type RequiredComponentVars = {
+  'pro-table': PP<
+    TableProps & {
+      pagination?: Partial<PaginationProps>;
+      control?: boolean | { sizeControl?: boolean; columnControl?: boolean };
+      searchFormConfig?: any;
+      immediateSearch?: boolean;
+      addIndexColumn?: boolean;
+      tableContainer?: any;
+    }
+  >;
+  'pro-form': PP<
+    Omit<ProFormProps, 'form' | 'grid'> & {
+      grid: Exclude<Grid, undefined | boolean>;
+    }
+  >;
+  'pro-form-item': PP<
+    FormItemProps &
+      Pick<GridItemProps, 'span' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'> &
+      Pick<Base, 'formItemContainer'>
+  >;
+  'input.password': FP<ComponentProps<GetComponentType<'input'>>>;
+  'input.textarea': FP<ComponentProps<GetComponentType<'input'>>>;
+} & {
+  [K in DatePickerType as `date-picker.${K}`]: FP<
+    ComponentProps<GetComponentType<'date-picker'>>
+  >;
+} & {
+  [K in Exclude<ComponentName, 'custom'>]: FP<
+    ComponentProps<GetComponentType<K>>
+  >;
+};
+
+export type ComponentVars = Partial<RequiredComponentVars>;

package/src/components/form/components/BaseField/index.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+/**
+ * @component BaseField
+ * @description 字段级渲染组件，负责将 field 配置渲染为实际的输入组件
+ *
+ * ## 核心职责
+ *
+ * 1. **组件解析**：按优先级解析要渲染的组件（teleport 插槽 > 自定义组件 > 内置组件映射 > 原始值）
+ * 2. **v-model 双向绑定**：通过 computed getter/setter 将组件值与 formData 的深层路径绑定
+ * 3. **valueFormatter 处理**：支持 get/set 格式化函数，用于数据转换（如日期格式化）
+ * 4. **属性合并**：将注入的默认 props、组件传入的 attrs 合并为最终属性
+ *
+ * ## 组件解析优先级
+ *
+ * ```
+ * teleport 组件（ProForm 插槽注入）
+ *   ↓ 未匹配
+ * 自定义组件（ProComponentProvider 的 componentMap）
+ *   ↓ 未匹配
+ * 内置组件映射（componentMap: input → Input, select → Select ...）
+ *   ↓ 未匹配
+ * 原始 component 值（可能是字符串或 Vue 组件对象）
+ * ```
+ *
+ * @param {string | Component} [component] - 组件名或组件对象
+ * @param {string} [path] - 字段路径，用于绑定表单数据
+ *
+ * @slot default - 默认插槽（透传给组件）
+ */
+import {
+  type Component,
+  computed,
+  inject,
+  mergeProps,
+  ref,
+  useAttrs,
+} from 'vue';
+import { cloneDeep, omit } from '../../../../shared/core';
+import { useDisabledContext } from '../../../../shared/ui';
+import type { Field } from '../../types';
+import { ContainerFragment, SlotComponent } from '..';
+import { componentMap, TeleportComponentNamePrefix } from '../../constants';
+import { INJECT_COMPONENTS } from '../../../component-provider/constants';
+import { useForm } from '../../hooks/useForm';
+import { getInitProps } from './utils';
+
+defineOptions({ name: 'BaseField', inheritAttrs: false });
+
+type Props = {
+  component?: string | Component;
+  path?: string;
+};
+const { component = undefined, path = '' } = defineProps<Props>();
+
+const form = useForm(false);
+const { getFormData, setFormData } = form;
+
+const componentRef = ref<any>();
+
+const attrs: any = useAttrs();
+
+function getOldValue() {
+  return cloneDeep(getFormData?.(path));
+}
+
+// setter: 向 formData 写入值，支持 valueFormatter / valueFormatter.set 转换
+const value = computed({
+  get() {
+    let val = getFormData?.(path);
+    const { valueFormatter } = groupedAttrs.value;
+    if (
+      typeof valueFormatter === 'object' &&
+      typeof valueFormatter.get === 'function'
+    ) {
+      val = valueFormatter.get(val);
+    }
+    return val;
+  },
+  set(val) {
+    let newVal = val;
+    const { valueFormatter } = groupedAttrs.value;
+    if (valueFormatter) {
+      if (typeof valueFormatter === 'function') {
+        newVal = valueFormatter(val, getOldValue());
+      } else if (typeof valueFormatter.set === 'function') {
+        newVal = valueFormatter.set(val, getOldValue());
+      }
+    }
+    setFormData?.(path, newVal);
+  },
+});
+
+const parentDisabled = useDisabledContext();
+
+/*
+ * 将注入的默认 props、外部传入的 attrs、field 配置合并为最终属性
+ * 属性分为三类：绑定属性（v-model）、组件属性（传递给组件）、插槽（动态渲染）
+ */
+const groupedAttrs = computed(() => {
+  const initProps = getInitProps({
+    component: component,
+    type: attrs.type,
+  } as unknown as Field);
+  const modelPropName = attrs.modelProp ?? initProps.modelProp ?? 'modelValue';
+  const mergedProps = mergeProps(
+    initProps,
+    attrs,
+    { class: attrs.componentClass, style: attrs.componentStyle },
+    { class: initProps.componentClass, style: initProps.componentStyle },
+    { disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
+    { modelProp: modelPropName }
+  ) as Required<Field>;
+  // prettier-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps
+  const modelBindingProp = modelProp ?? 'modelValue';
+  // 从剩余属性中移除 v-model 绑定属性，避免重复绑定
+  const bindAttrs = omit(rest as Record<string, any>, [
+    modelBindingProp,
+    `onUpdate:${modelBindingProp}`,
+  ]);
+  return {
+    attrs: bindAttrs,
+    slots,
+    componentContainer,
+    modelProp: modelBindingProp,
+    valueFormatter,
+  };
+});
+
+// 从 ProForm 插槽注入的 teleport 组件（优先级最高）
+const teleportComponent = inject(
+  `${TeleportComponentNamePrefix}${path}`,
+  undefined
+);
+
+// 从 ProComponentProvider 注入的自定义组件映射
+const customComponents = inject(INJECT_COMPONENTS, {});
+
+/*
+ * 按优先级解析最终要渲染的组件：
+ * teleport 插槽 → 自定义组件映射 → 内置组件映射 → 原始 component 值
+ */
+const is = computed(() => {
+  if (teleportComponent) return teleportComponent;
+  if (typeof component === 'string') {
+    return (
+      (customComponents as any)[component] ||
+      (componentMap as any)[component] ||
+      component
+    );
+  }
+  return component;
+});
+
+defineExpose({
+  getComponentRef: () => componentRef.value,
+  getComponentComputedProps: () => groupedAttrs.value.attrs as any,
+});
+</script>
+
+<template>
+  <ContainerFragment :component="groupedAttrs.componentContainer" :path="path">
+    <component
+      :is="is"
+      v-if="is"
+      v-bind="groupedAttrs.attrs"
+      ref="componentRef"
+      v-model:[`${groupedAttrs.modelProp}`]="value"
+      :path="path"
+    >
+      <template
+        v-for="(slot, name) in groupedAttrs.slots"
+        :key="name"
+        #[name]="scoped"
+      >
+        <SlotComponent :path="path" v-bind="scoped" :component="slot" />
+      </template>
+    </component>
+  </ContainerFragment>
+</template>

package/src/components/form/components/BaseField/utils/index.ts

@@ -0,0 +1,15 @@
+import { Field } from '../../../types';
+import { getInjectConfig } from '../../../../component-provider/constants';
+import { inject } from 'vue';
+
+export const getInitProps = (field: Field): Record<string, any> => {
+  const { component, type } = field as any;
+  if (typeof component === 'string') {
+    const k = [component, type].filter(Boolean).join('.');
+    const config = getInjectConfig(k);
+    if (!config) return {};
+    const injectProps = inject(config.injectionKey, config.default);
+    return injectProps;
+  }
+  return {};
+};

package/src/components/form/components/BaseFormItem/index.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+/**
+ * @component BaseFormItem
+ * @description 表单字段渲染引擎
+ *
+ * 负责将字段配置数组渲染为实际的表单项，支持：
+ * - 字段分组（嵌套 fields 递归渲染）
+ * - 网格布局（grid 属性控制）
+ * - FormItem 包装（label、rules、校验等）
+ * - 组件绑定（通过 BaseField 渲染具体组件）
+ * - 插槽透传（label、error 等 FormItem 插槽）
+ *
+ * ## 渲染流程
+ *
+ * 1. 遍历 fields 数组，过滤 hidden 字段
+ * 2. 对每个字段：
+ *    a. 通过 PathProvider 提供当前字段路径
+ *    b. 通过 GroupedFieldAttrs 将 field 配置拆分为 gridItemProps / formItemProps / componentProps
+ *    c. 如果字段有 `fields` 子字段 → 递归渲染 BaseFormItem（嵌套表单）
+ *    d. 否则 → 渲染 BaseField（输入组件）
+ * 3. 通过 ref 回调收集 FormItem 和 Component 实例，注入到 field 对象上
+ *
+ * @param {Fields<D>} [fields] - 字段配置数组
+ * @param {boolean | GridProps} [grid] - 是否启用网格布局
+ * @param {boolean} [disabled] - 是否禁用所有子字段
+ *
+ * @internal
+ */
+import { getObject, toPath } from '../../../../shared/core';
+import {
+  FormItem,
+  Grid as ElGrid,
+  GridItem as ElGridItem,
+  GridProps,
+  useDisabledContextProvider,
+} from '../../../../shared/ui';
+import { computed, inject, toValue } from 'vue';
+import type { Fields, Grid } from '../../types';
+import { BaseField, SlotComponent, ContainerFragment } from '..';
+import PathProvider from '../PathProvider/index.vue';
+import GroupedFieldAttrs from '../GroupedFieldAttrs/index.vue';
+import { INJECT_CONFIG } from '../../../component-provider/constants';
+
+defineOptions({ name: 'BaseFormItem', inheritAttrs: false });
+
+type Props = {
+  grid?: Grid;
+  fields?: Fields;
+  disabled?: boolean;
+};
+const {
+  grid = undefined,
+  fields = [],
+  disabled = undefined,
+} = defineProps<Props>();
+
+const validFields = computed(() => fields.filter?.(field => !field.hidden));
+
+useDisabledContextProvider(computed(() => disabled) as any);
+
+const config = INJECT_CONFIG['pro-form'];
+
+const { grid: injectGrid } = inject(config.injectionKey, config.default);
+
+const enableGrid = computed(() => {
+  if (grid !== undefined) return !!grid;
+  return !!injectGrid;
+});
+
+const computedGridProps = computed<GridProps>(() => {
+  return enableGrid.value
+    ? { ...getObject(injectGrid), ...getObject(grid) }
+    : {};
+});
+
+const formItemRefs: any[] = [];
+const componentRefs: any[] = [];
+
+const onFormItemMounted = (index: number, formItemProps?: any) => {
+  const field = validFields.value[index];
+  Object.assign(field, {
+    getFormItemRef: () => formItemRefs[index],
+    getFormItemComputedProps: () => formItemProps,
+  });
+};
+
+const onComponentMounted = (index: number) => {
+  const field = validFields.value[index];
+  Object.assign(field, {
+    getComponentRef: () => componentRefs[index]?.getComponentRef(),
+    getComponentComputedProps: () =>
+      componentRefs[index]?.getComponentComputedProps(),
+  });
+};
+</script>
+
+<template>
+  <ContainerFragment
+    :component="enableGrid ? ElGrid : undefined"
+    v-bind="computedGridProps"
+    style="width: 100%"
+  >
+    <PathProvider
+      v-for="({ path: _path, ...field }, index) of validFields"
+      :key="toPath(toValue((_path ?? index) as any)).join('.') || index"
+      v-bind="{ path: _path as any }"
+    >
+      <template #default="{ path }">
+        <GroupedFieldAttrs :field="field">
+          <template
+            #default="{
+              gridItemProps,
+              formItemProps: { container, ...formItemProps },
+              componentProps,
+              formItemSlots,
+            }"
+          >
+            <ContainerFragment
+              :component="enableGrid ? ElGridItem : undefined"
+              v-bind="gridItemProps"
+            >
+              <ContainerFragment :component="container" :path="path">
+                <FormItem
+                  v-bind="formItemProps"
+                  :ref="el => (formItemRefs[index] = el)"
+                  :prop="toPath(path).join('.')"
+                  :path="path"
+                  @vue:mounted="onFormItemMounted(index, formItemProps)"
+                >
+                  <template
+                    v-for="(slot, name) in formItemSlots"
+                    :key="name"
+                    #[name]="scoped"
+                  >
+                    <SlotComponent
+                      :path="path"
+                      :component="slot"
+                      v-bind="scoped"
+                    />
+                  </template>
+                  <template v-if="field.fields">
+                    <BaseFormItem
+                      :grid="(field as any).grid ?? grid"
+                      :fields="field.fields"
+                      :disabled="toValue(field.disabled)"
+                    />
+                  </template>
+                  <template v-else>
+                    <BaseField
+                      :ref="el => (componentRefs[index] = el)"
+                      v-bind="componentProps"
+                      :path="path"
+                      @vue:mounted="onComponentMounted(index)"
+                    />
+                  </template>
+                </FormItem>
+              </ContainerFragment>
+            </ContainerFragment>
+          </template>
+        </GroupedFieldAttrs>
+      </template>
+    </PathProvider>
+  </ContainerFragment>
+</template>
+
+<style scoped lang="less">
+[class*='-form-item'] [class*='-form-item'] {
+  margin-bottom: 18px;
+}
+</style>

package/src/components/form/components/ContainerFragment/index.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+/**
+ * @component ContainerFragment
+ * @description 容器分片渲染组件。用于动态渲染表单行或表单项的外部包裹容器（例如 Grid 行、Col 列等布局容器）。
+ *
+ * @public
+ */
+import type { ContainerComponent } from '../../types';
+
+type Props = {
+  component?: ContainerComponent;
+};
+
+defineProps<Props>();
+
+defineOptions({ name: 'ContainerFragment', inheritAttrs: false });
+</script>
+
+<template>
+  <component :is="component" v-if="component" v-bind="$attrs">
+    <slot />
+  </component>
+  <slot v-else />
+</template>