@aspire-ui/element-component-pro 1.0.0

package/src/ProForm/useForm.ts

@@ -0,0 +1,114 @@
+import { ref, watch, unref, type Ref } from 'vue'
+import type { ProFormSchema, ProFormProps, FormActionType } from '../types'
+
+export interface UseFormProps extends ProFormProps {
+  schemas?: ProFormSchema[]
+}
+
+/** 支持 ref/computed 的 props（参考 Vben Admin：参数 props 内的值可以是 computed 或者 ref 类型） */
+export type UseFormPropsReactive = UseFormProps | Ref<UseFormProps | undefined>
+
+export interface UseFormReturn {
+  /** 用于 @register，接收表单实例的 formAction */
+  register: (formAction: FormActionType) => void
+  formAction: { value: FormActionType | null }
+  getFieldsValue: () => Record<string, unknown>
+  setFieldsValue: (values: Record<string, unknown>) => Promise<void>
+  resetFields: () => Promise<void>
+  validate: (nameList?: string[]) => Promise<unknown>
+  validateFields: (nameList?: string[]) => Promise<unknown>
+  submit: () => Promise<void>
+  scrollToField: (name: string, options?: import('../types').ScrollToFieldOptions) => Promise<void>
+  clearValidate: (name?: string | string[]) => void
+  updateSchema: (data: Partial<ProFormSchema> | Partial<ProFormSchema>[]) => Promise<void>
+  appendSchemaByField: (schema: ProFormSchema, prefixField?: string, first?: boolean) => Promise<void>
+  removeSchemaByField: (field: string | string[]) => Promise<void>
+  setProps: (props: Partial<ProFormProps>) => Promise<void>
+}
+
+export function useForm(props?: UseFormPropsReactive): [UseFormReturn['register'], Omit<UseFormReturn, 'register'>] {
+  const formAction = ref<FormActionType | null>(null)
+  const formPropsRef = ref<UseFormProps | undefined>(props ? unref(props as Ref<UseFormProps | undefined>) : undefined)
+
+  const getFormProps = () => (props ? unref(props as Ref<UseFormProps | undefined>) : undefined) as UseFormProps | undefined
+
+  const register = (action: FormActionType) => {
+    formAction.value = action
+    const formProps = getFormProps()
+    debugger
+    if (formProps && Object.keys(formProps).length > 0) {
+      action.setProps(formProps)
+    }
+  }
+
+  if (props) {
+    watch(
+      () => getFormProps(),
+      (formProps) => {
+        formPropsRef.value = formProps
+        if (formProps && formAction.value) {
+          formAction.value.setProps(formProps)
+        }
+      },
+      { deep: true }
+    )
+  }
+
+  const getFieldsValue = () => formAction.value?.getFieldsValue() ?? {}
+
+  const setFieldsValue = async (values: Record<string, unknown>) => {
+    await formAction.value?.setFieldsValue(values)
+  }
+
+  const resetFields = async () => {
+    await formAction.value?.resetFields()
+  }
+
+  const validate = (nameList?: string[]) =>
+    formAction.value?.validate(nameList) ?? Promise.resolve()
+
+  const validateFields = (nameList?: string[]) =>
+    formAction.value?.validateFields(nameList) ?? Promise.resolve()
+
+  const submit = () => formAction.value?.submit() ?? Promise.resolve()
+
+  const scrollToField = (name: string, options?: import('../types').ScrollToFieldOptions) =>
+    formAction.value?.scrollToField(name, options) ?? Promise.resolve()
+
+  const clearValidate = (name?: string | string[]) => {
+    formAction.value?.clearValidate(name)
+  }
+
+  const updateSchema = (data: Partial<ProFormSchema> | Partial<ProFormSchema>[]) =>
+    formAction.value?.updateSchema(data) ?? Promise.resolve()
+
+  const appendSchemaByField = (schema: ProFormSchema, prefixField?: string, first?: boolean) =>
+    formAction.value?.appendSchemaByField(schema, prefixField, first) ?? Promise.resolve()
+
+  const removeSchemaByField = (field: string | string[]) =>
+    formAction.value?.removeSchemaByField(field) ?? Promise.resolve()
+
+  const setProps = async (formProps: Partial<ProFormProps>) => {
+    formPropsRef.value = { ...formPropsRef.value, ...formProps }
+    await formAction.value?.setProps(formProps)
+  }
+
+  const result: UseFormReturn = {
+    register,
+    formAction,
+    getFieldsValue,
+    setFieldsValue,
+    resetFields,
+    validate,
+    validateFields,
+    submit,
+    scrollToField,
+    clearValidate,
+    updateSchema,
+    appendSchemaByField,
+    removeSchemaByField,
+    setProps,
+  }
+
+  return [register, result]
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import type { VueConstructor } from 'vue'
+// import ProTable from './ProTable'
+import ProForm, { ProFormItem, FormActions } from './ProForm'
+// import ProCard from './ProCard'
+// import ProDescriptions from './ProDescriptions'
+import { useForm } from './ProForm/useForm'
+
+export { ProForm, ProFormItem, FormActions, useForm }
+export * from './types'
+
+const components = [
+  // { name: 'ProTable', component: ProTable },
+  { name: 'ProForm', component: ProForm },
+  { name: 'ProFormItem', component: ProFormItem },
+  { name: 'FormActions', component: FormActions }
+  // { name: 'ProCard', component: ProCard },
+  // { name: 'ProDescriptions', component: ProDescriptions },
+]
+
+export function install(Vue: VueConstructor) {
+  components.forEach(({ name, component }) => {
+    Vue.component(name, component)
+  })
+}
+
+export default {
+  install,
+  // ProTable,
+  ProForm,
+  // ProCard,
+  // ProDescriptions,
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}

package/src/types/index.ts

@@ -0,0 +1,179 @@
+import type { VNode } from 'vue'
+
+/** ProTable 列配置 */
+export interface ProColumn {
+  /** 列标题 */
+  title: string
+  /** 数据字段名 */
+  dataIndex: string
+  /** 列宽度 */
+  width?: number | string
+  /** 最小宽度 */
+  minWidth?: number | string
+  /** 固定列 */
+  fixed?: 'left' | 'right'
+  /** 是否可排序 */
+  sortable?: boolean
+  /** 对齐方式 */
+  align?: 'left' | 'center' | 'right'
+  /** 是否可调整宽度 */
+  resizable?: boolean
+  /** 是否隐藏 */
+  hideInTable?: boolean
+  /** 值类型 */
+  valueType?: 'text' | 'date' | 'dateTime' | 'option' | 'select' | 'index'
+  /** 枚举值映射 */
+  valueEnum?: Record<string | number, { text: string; status?: string }>
+  /** 自定义渲染 */
+  customRender?: (params: { text: unknown; record: Record<string, unknown>; index: number }) => VNode | string
+  /** 表单项配置（用于搜索） */
+  fieldProps?: Record<string, unknown>
+  /** 表单项占位符 */
+  placeholder?: string
+}
+
+/** ProTable 工具栏配置 */
+export interface ProTableToolBarConfig {
+  /** 是否显示刷新按钮 */
+  reload?: boolean
+  /** 是否显示密度切换 */
+  density?: boolean
+  /** 是否显示列设置 */
+  columnSetting?: boolean
+  /** 是否显示全屏 */
+  fullScreen?: boolean
+}
+
+/** 栅格配置 */
+export interface ColEx {
+  span?: number
+  offset?: number
+  pull?: number
+  push?: number
+  xs?: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+}
+
+/** Render 回调参数 */
+export interface RenderCallbackParams {
+  schema: ProFormSchema
+  values: Record<string, unknown>
+  model: Record<string, unknown>
+  field: string
+}
+
+/** 滚动到字段的配置 */
+export interface ScrollToFieldOptions {
+  /** 滚动行为 */
+  behavior?: ScrollBehavior
+  /** 块级对齐 */
+  block?: ScrollLogicalPosition
+  /** 行内对齐 */
+  inline?: ScrollLogicalPosition
+}
+
+/** 表单操作类型（参考 Vben Admin FormActionType） */
+export interface FormActionType {
+  getFieldsValue: () => Record<string, unknown>
+  setFieldsValue: (values: Record<string, unknown>) => Promise<void>
+  resetFields: () => Promise<void>
+  validate: (nameList?: string[]) => Promise<unknown>
+  validateFields: (nameList?: string[]) => Promise<unknown>
+  submit: () => Promise<void>
+  scrollToField: (name: string, options?: ScrollToFieldOptions) => Promise<void>
+  clearValidate: (name?: string | string[]) => void
+  updateSchema: (data: Partial<ProFormSchema> | Partial<ProFormSchema>[]) => Promise<void>
+  appendSchemaByField: (schema: ProFormSchema, prefixField?: string, first?: boolean) => Promise<void>
+  removeSchemaByField: (field: string | string[]) => Promise<void>
+  setProps: (props: Partial<ProFormProps>) => Promise<void>
+}
+
+/** 时间字段映射 [表单字段, [开始字段, 结束字段], 格式?] */
+export type FieldMapToTime = [string, [string, string], string?]
+
+/** 表单事件监听器 */
+export type FormListeners = Record<string, ((...args: unknown[]) => unknown) | ((...args: unknown[]) => unknown)[]>
+
+/** ProForm Props */
+export interface ProFormProps {
+  schemas?: ProFormSchema[]
+  initialValues?: Record<string, unknown>
+  labelWidth?: string
+  labelPosition?: 'left' | 'right' | 'top'
+  gutter?: number
+  size?: 'medium' | 'small' | 'large'
+  disabled?: boolean
+  baseColProps?: ColEx
+  showSubmitButton?: boolean
+  showResetButton?: boolean
+  submitButtonText?: string
+  resetButtonText?: string
+  submitButtonIcon?: string
+  resetButtonIcon?: string
+  actionColOptions?: ColEx
+  showAdvancedButton?: boolean
+  autoAdvancedLine?: number
+  alwaysShowLines?: number
+  submitFunc?: () => Promise<void>
+  resetFunc?: () => Promise<void>
+  fieldMapToTime?: FieldMapToTime[]
+  /** 透传给 el-form 的事件监听器 */
+  formListeners?: FormListeners
+}
+
+/** ProForm 表单项配置 */
+export interface ProFormSchema {
+  /** 字段名 */
+  field: string
+  /** 标签 */
+  label: string
+  /** 组件类型 */
+  component?: 'input' | 'select' | 'date-picker' | 'date-range' | 'input-number' | 'switch' | 'cascader' | 'checkbox' | 'radio'
+  /** 组件属性，支持函数 */
+  componentProps?: Record<string, unknown> | ((params: RenderCallbackParams & { formActionType?: FormActionType }) => Record<string, unknown>)
+  /** 占位符 */
+  placeholder?: string
+  /** 默认值 */
+  defaultValue?: unknown
+  /** 是否必填 */
+  required?: boolean
+  /** 校验规则 */
+  rules?: Array<Record<string, unknown>>
+  /** 栅格占位 */
+  colProps?: ColEx
+  /** 是否隐藏（静态） */
+  hidden?: boolean
+  /** 自定义渲染（替代 component） */
+  render?: (params: RenderCallbackParams) => VNode | VNode[] | string
+  /** 自定义 slot 名称，对应父组件的具名插槽 */
+  slot?: string
+  /** 动态显示，css 控制，不删除 dom */
+  show?: boolean | ((params: RenderCallbackParams) => boolean)
+  /** 动态显示，js 控制，会删除 dom */
+  ifShow?: boolean | ((params: RenderCallbackParams) => boolean)
+  /** 动态禁用 */
+  dynamicDisabled?: boolean | ((params: RenderCallbackParams) => boolean)
+  /** 动态校验规则 */
+  dynamicRules?: Array<Record<string, unknown>> | ((params: RenderCallbackParams) => Array<Record<string, unknown>>)
+  /** 依赖字段 */
+  dependencies?: string[]
+  /** 标签右侧温馨提示，支持 string 或 string[] */
+  helpMessage?: string | string[]
+  /** 温馨提示组件的 props */
+  helpComponentProps?: Record<string, unknown>
+}
+
+/** ProDescriptions 描述项配置 */
+export interface ProDescriptionsSchema {
+  /** 标签 */
+  label: string
+  /** 数据字段 */
+  dataIndex: string
+  /** 自定义渲染 */
+  render?: (value: unknown, record?: Record<string, unknown>) => VNode | string
+  /** 栅格占位 */
+  span?: number
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />