@aspire-ui/element-component-pro 1.0.0

package/README.md

@@ -0,0 +1,203 @@
+# Element Component Pro
+
+基于 Element UI 的二次封装组件库，参考 VbenAdmin 的 Ant Design 版本，提供 Pro 系列增强组件。
+
+## 技术栈
+
+- **Vue 2.7** - 支持 Composition API 和 `<script setup>` 语法糖
+- **TypeScript** - 完整类型支持
+- **Element UI** - 基础 UI 组件
+
+## 组件列表
+
+| 组件 | 说明 |
+|------|------|
+| ProTable | 增强表格，集成搜索、工具栏、分页 |
+| ProForm | Schema 驱动的表单，支持栅格布局 |
+| ProCard | 卡片容器 |
+| ProDescriptions | 详情描述列表 |
+
+## 安装
+
+```bash
+npm install element-component-pro element-ui vue
+```
+
+## 使用
+
+### 全局注册
+
+```ts
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import ElementComponentPro from 'element-component-pro'
+
+Vue.use(ElementUI)
+Vue.use(ElementComponentPro)
+```
+
+### 按需引入
+
+```vue
+<script setup lang="ts">
+import { ProTable, ProForm } from 'element-component-pro'
+</script>
+
+<template>
+  <ProTable :columns="columns" :request="fetchData" />
+</template>
+```
+
+## ProTable
+
+```vue
+<template>
+  <ProTable
+    ref="tableRef"
+    :columns="columns"
+    :request="fetchTableData"
+    show-search
+    show-tool-bar
+    show-pagination
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ProTable } from 'element-component-pro'
+import type { ProColumn } from 'element-component-pro'
+
+const columns: ProColumn[] = [
+  { title: 'ID', dataIndex: 'id', width: 80, valueType: 'index' },
+  { title: '姓名', dataIndex: 'name', width: 120 },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueType: 'select',
+    valueEnum: { 1: { text: '启用' }, 0: { text: '禁用' } },
+  },
+]
+
+const fetchTableData = async (params) => {
+  const res = await api.getList(params)
+  return { data: res.list, total: res.total }
+}
+</script>
+```
+
+## ProForm
+
+参考 [Vben Admin Form](https://doc.vvbin.cn/components/form.html)，支持 Schema 驱动、useForm、render/slot、动态显示等。
+
+### 基础用法
+
+```vue
+<template>
+  <ProForm
+    :schemas="schemas"
+    :initial-values="{ name: '' }"
+    :base-col-props="{ span: 8 }"
+    @submit="handleSubmit"
+  />
+</template>
+
+<script setup lang="ts">
+import { ProForm } from 'element-component-pro'
+import type { ProFormSchema } from 'element-component-pro'
+
+const schemas: ProFormSchema[] = [
+  { field: 'name', label: '姓名', component: 'input', required: true, colProps: { span: 8 } },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'select',
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+    colProps: { span: 8 },
+  },
+]
+
+const handleSubmit = (values) => {
+  console.log(values)
+}
+</script>
+```
+
+### useForm 方式（参考 Vben Admin）
+
+```vue
+<template>
+  <ProForm @register="register" @submit="handleSubmit" />
+</template>
+
+<script setup lang="ts">
+import { ProForm, useForm } from 'element-component-pro'
+
+const [register, formActions] = useForm({
+  schemas: [...],
+  labelWidth: '120px',
+  actionColOptions: { span: 24 },
+})
+
+// 支持 ref/computed 响应式 props
+const formProps = ref({ schemas: [...] })
+const [register2] = useForm(formProps)
+
+const handleSubmit = (values) => {
+  console.log(values)
+}
+</script>
+```
+
+**useForm 方法（与 Vben Admin 对齐）：**
+
+| 方法 | 说明 |
+|------|------|
+| getFieldsValue | 获取表单值 |
+| setFieldsValue | 设置表单字段值 |
+| resetFields | 重置表单 |
+| validate | 校验整个表单 |
+| validateFields | 校验指定表单项 |
+| submit | 提交表单 |
+| scrollToField | 滚动到对应字段 |
+| clearValidate | 清空校验 |
+| updateSchema | 更新 schema |
+| appendSchemaByField | 插入 schema |
+| removeSchemaByField | 删除 schema |
+| setProps | 设置表单 Props |
+
+### Schema 高级特性
+
+- **render**: 自定义渲染
+- **slot**: 使用具名插槽自定义
+- **ifShow** / **show**: 动态显示（ifShow 不渲染 DOM）
+- **dynamicDisabled**: 动态禁用
+- **dynamicRules**: 动态校验规则
+- **componentProps**: 支持函数，可获取 formModel、formActionType
+
+## 示例与文档
+
+- **示例**：运行 `npm run dev` 后访问开发预览，包含 ProForm 基础、useForm、高级特性等示例
+- **ProForm 文档**：[docs/ProForm.md](./docs/ProForm.md)
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发预览
+npm run dev
+
+# 构建
+npm run build
+```
+
+## License
+
+MIT

package/dist/ProForm/FormActions.vue.d.ts

@@ -0,0 +1,98 @@
+import { ColEx } from '../types';
+
+declare function __VLS_template(): {
+    submitBefore?(_: {}): any;
+    resetBefore?(_: {}): any;
+    actions?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    showActionButtonGroup?: boolean;
+    showSubmitButton?: boolean;
+    showResetButton?: boolean;
+    submitButtonText?: string;
+    resetButtonText?: string;
+    submitButtonIcon?: string;
+    resetButtonIcon?: string;
+    submitLoading?: boolean;
+    showAdvancedButton?: boolean;
+    hasMoreFields?: boolean;
+    collapsed?: boolean;
+    actionColOptions?: ColEx;
+}>, {
+    showActionButtonGroup: boolean;
+    showSubmitButton: boolean;
+    showResetButton: boolean;
+    submitButtonText: string;
+    resetButtonText: string;
+    submitButtonIcon: string;
+    resetButtonIcon: string;
+    submitLoading: boolean;
+    showAdvancedButton: boolean;
+    hasMoreFields: boolean;
+    collapsed: boolean;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: () => void;
+    reset: () => void;
+    toggle: () => void;
+}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    showActionButtonGroup?: boolean;
+    showSubmitButton?: boolean;
+    showResetButton?: boolean;
+    submitButtonText?: string;
+    resetButtonText?: string;
+    submitButtonIcon?: string;
+    resetButtonIcon?: string;
+    submitLoading?: boolean;
+    showAdvancedButton?: boolean;
+    hasMoreFields?: boolean;
+    collapsed?: boolean;
+    actionColOptions?: ColEx;
+}>, {
+    showActionButtonGroup: boolean;
+    showSubmitButton: boolean;
+    showResetButton: boolean;
+    submitButtonText: string;
+    resetButtonText: string;
+    submitButtonIcon: string;
+    resetButtonIcon: string;
+    submitLoading: boolean;
+    showAdvancedButton: boolean;
+    hasMoreFields: boolean;
+    collapsed: boolean;
+}>>>, {
+    showActionButtonGroup: boolean;
+    showSubmitButton: boolean;
+    showResetButton: boolean;
+    submitButtonText: string;
+    resetButtonText: string;
+    submitButtonIcon: string;
+    resetButtonIcon: string;
+    submitLoading: boolean;
+    showAdvancedButton: boolean;
+    hasMoreFields: boolean;
+    collapsed: boolean;
+}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $scopedSlots: S;
+    };
+};

package/dist/ProForm/ProForm.vue.d.ts

@@ -0,0 +1,223 @@
+import { ProFormSchema, ProFormProps, FormActionType, ColEx, ScrollToFieldOptions, FormListeners } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: {
+    model: Record<string, unknown>;
+    schema: {
+        field: string;
+        label: string;
+        component?: "input" | "select" | "date-picker" | "date-range" | "input-number" | "switch" | "cascader" | "checkbox" | "radio" | undefined;
+        componentProps?: (Record<string, unknown> | ((params: import('..').RenderCallbackParams & {
+            formActionType?: FormActionType;
+        }) => Record<string, unknown>)) | undefined;
+        placeholder?: string | undefined;
+        defaultValue?: unknown;
+        required?: boolean | undefined;
+        rules?: Array<Record<string, unknown>> | undefined;
+        colProps?: {
+            span?: number | undefined;
+            offset?: number | undefined;
+            pull?: number | undefined;
+            push?: number | undefined;
+            xs?: number | undefined;
+            sm?: number | undefined;
+            md?: number | undefined;
+            lg?: number | undefined;
+            xl?: number | undefined;
+        } | undefined;
+        hidden?: boolean | undefined;
+        render?: ((params: import('..').RenderCallbackParams) => import('vue').VNode | import('vue').VNode[] | string) | undefined;
+        slot?: string | undefined;
+        show?: boolean | ((params: import('..').RenderCallbackParams) => boolean) | undefined;
+        ifShow?: boolean | ((params: import('..').RenderCallbackParams) => boolean) | undefined;
+        dynamicDisabled?: boolean | ((params: import('..').RenderCallbackParams) => boolean) | undefined;
+        dynamicRules?: (Array<Record<string, unknown>> | ((params: import('..').RenderCallbackParams) => Array<Record<string, unknown>>)) | undefined;
+        dependencies?: string[] | undefined;
+        helpMessage?: string | string[] | undefined;
+        helpComponentProps?: Record<string, unknown> | undefined;
+    };
+    field: string;
+    values: Record<string, unknown>;
+}) => any>> & {
+    formHeader?(_: {}): any;
+    submitBefore?(_: {}): any;
+    resetBefore?(_: {}): any;
+    advanceBefore?(_: {}): any;
+    advanceAfter?(_: {}): any;
+    actions?(_: {}): any;
+    formFooter?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    schemas?: ProFormSchema[];
+    initialValues?: Record<string, unknown>;
+    labelWidth?: string;
+    labelPosition?: "left" | "right" | "top";
+    gutter?: number;
+    size?: "medium" | "small" | "large";
+    disabled?: boolean;
+    baseColProps?: ColEx;
+    baseRowStyle?: Record<string, string | number>;
+    autoSetPlaceholder?: boolean;
+    showSubmitButton?: boolean;
+    showResetButton?: boolean;
+    submitButtonText?: string;
+    resetButtonText?: string;
+    submitButtonIcon?: string;
+    resetButtonIcon?: string;
+    showActionButtonGroup?: boolean;
+    actionColOptions?: ColEx;
+    showAdvancedButton?: boolean;
+    autoAdvancedLine?: number;
+    alwaysShowLines?: number;
+    submitFunc?: () => Promise<void>;
+    resetFunc?: () => Promise<void>;
+    submitOnReset?: boolean;
+    formListeners?: FormListeners;
+}>, {
+    labelWidth: string;
+    labelPosition: string;
+    gutter: number;
+    size: string;
+    autoSetPlaceholder: boolean;
+    showSubmitButton: boolean;
+    showResetButton: boolean;
+    submitButtonText: string;
+    resetButtonText: string;
+    submitButtonIcon: string;
+    resetButtonIcon: string;
+    showActionButtonGroup: boolean;
+    showAdvancedButton: boolean;
+    autoAdvancedLine: number;
+    alwaysShowLines: number;
+    baseColProps: () => {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    actionColOptions: () => {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    submitOnReset: boolean;
+}>, {
+    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>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    submit: (values: Record<string, unknown>) => void;
+    reset: () => void;
+    register: (formAction: FormActionType) => void;
+}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    schemas?: ProFormSchema[];
+    initialValues?: Record<string, unknown>;
+    labelWidth?: string;
+    labelPosition?: "left" | "right" | "top";
+    gutter?: number;
+    size?: "medium" | "small" | "large";
+    disabled?: boolean;
+    baseColProps?: ColEx;
+    baseRowStyle?: Record<string, string | number>;
+    autoSetPlaceholder?: boolean;
+    showSubmitButton?: boolean;
+    showResetButton?: boolean;
+    submitButtonText?: string;
+    resetButtonText?: string;
+    submitButtonIcon?: string;
+    resetButtonIcon?: string;
+    showActionButtonGroup?: boolean;
+    actionColOptions?: ColEx;
+    showAdvancedButton?: boolean;
+    autoAdvancedLine?: number;
+    alwaysShowLines?: number;
+    submitFunc?: () => Promise<void>;
+    resetFunc?: () => Promise<void>;
+    submitOnReset?: boolean;
+    formListeners?: FormListeners;
+}>, {
+    labelWidth: string;
+    labelPosition: string;
+    gutter: number;
+    size: string;
+    autoSetPlaceholder: boolean;
+    showSubmitButton: boolean;
+    showResetButton: boolean;
+    submitButtonText: string;
+    resetButtonText: string;
+    submitButtonIcon: string;
+    resetButtonIcon: string;
+    showActionButtonGroup: boolean;
+    showAdvancedButton: boolean;
+    autoAdvancedLine: number;
+    alwaysShowLines: number;
+    baseColProps: () => {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    actionColOptions: () => {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    submitOnReset: boolean;
+}>>>, {
+    showActionButtonGroup: boolean;
+    showSubmitButton: boolean;
+    showResetButton: boolean;
+    submitButtonText: string;
+    resetButtonText: string;
+    submitButtonIcon: string;
+    resetButtonIcon: string;
+    showAdvancedButton: boolean;
+    actionColOptions: ColEx;
+    labelWidth: string;
+    labelPosition: "left" | "right" | "top";
+    gutter: number;
+    size: "medium" | "small" | "large";
+    baseColProps: ColEx;
+    autoSetPlaceholder: boolean;
+    autoAdvancedLine: number;
+    alwaysShowLines: number;
+    submitOnReset: boolean;
+}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $scopedSlots: S;
+    };
+};

package/dist/ProForm/ProFormItem.vue.d.ts

@@ -0,0 +1,39 @@
+import { ProFormSchema } from '../types';
+
+declare function __VLS_template(): {
+    default?(_: {
+        model: Record<string, unknown>;
+        schema: ProFormSchema;
+        field: string;
+        values: Record<string, unknown>;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    schema: ProFormSchema;
+    formModel: Record<string, unknown>;
+    formDisabled?: boolean;
+    autoPlaceholder?: boolean;
+    formActionType?: import('../types').FormActionType;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    schema: ProFormSchema;
+    formModel: Record<string, unknown>;
+    formDisabled?: boolean;
+    autoPlaceholder?: boolean;
+    formActionType?: import('../types').FormActionType;
+}>>>, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $scopedSlots: S;
+    };
+};

package/dist/ProForm/index.d.ts

@@ -0,0 +1,7 @@
+import { default as ProForm } from './ProForm.vue';
+import { default as ProFormItem } from './ProFormItem.vue';
+import { default as FormActions } from './FormActions.vue';
+import { useForm } from './useForm';
+
+export { ProForm, ProFormItem, FormActions, useForm };
+export default ProForm;

package/dist/ProForm/useForm.d.ts

@@ -0,0 +1,28 @@
+import { Ref } from 'vue';
+import { 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 declare function useForm(props?: UseFormPropsReactive): [UseFormReturn['register'], Omit<UseFormReturn, 'register'>];