@aspire-ui/element-component-pro 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+.ecp-pro-form-item__help-icon[data-v-0e0e5ebb]{margin-left:4px;color:#909399;cursor:help;font-size:14px}.ecp-pro-form-item__help-icon[data-v-0e0e5ebb]:hover{color:#409eff}.ecp-pro-form-item__help-item[data-v-0e0e5ebb]{margin-bottom:4px}.ecp-pro-form-item__help-item[data-v-0e0e5ebb]:last-child{margin-bottom:0}.ecp-pro-form-item__select[data-v-0e0e5ebb]{display:block}.ecp-form-actions[data-v-489c88d2]{text-align:right}.ecp-form-actions__advance[data-v-489c88d2]{margin-right:8px}.el-icon-d-arrow-left.up[data-v-489c88d2]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-489c88d2]{transform:rotate(-90deg)}.ecp-pro-form[data-v-d75b0fb1]{padding:16px;position:relative}.ecp-pro-form__advance[data-v-d75b0fb1]{margin-bottom:16px}.ecp-pro-form_col[data-v-d75b0fb1]{position:relative;float:right}.el-icon-d-arrow-left.up[data-v-d75b0fb1]{transform:rotate(90deg)}.el-icon-d-arrow-left.down[data-v-d75b0fb1]{transform:rotate(-90deg)}.ecp-form-actions__advance[data-v-d75b0fb1]{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%)}

package/dist/types/index.d.ts

@@ -0,0 +1,178 @@
+import { 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/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@aspire-ui/element-component-pro",
+  "version": "1.0.0",
+  "description": "Element UI 二次封装组件库，基于 Vue 2.7 + TypeScript + setup 语法糖，实现 VbenAdmin 风格的 Pro 组件",
+  "type": "module",
+  "main": "./dist/element-component-pro.umd.js",
+  "module": "./dist/element-component-pro.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/element-component-pro.es.js",
+      "require": "./dist/element-component-pro.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.0",
+    "element-ui": "^2.15.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.3.1",
+    "vue-router": "^3.6.5",
+    "element-ui": "^2.15.14",
+    "typescript": "^5.3.0",
+    "vite": "^4.5.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vue": "^2.7.16",
+    "vue-tsc": "^1.8.27"
+  },
+  "keywords": [
+    "vue",
+    "element-ui",
+    "component-library",
+    "pro-table",
+    "pro-form",
+    "vben-admin"
+  ],
+  "license": "MIT"
+}

package/src/ProForm/FormActions.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="ecp-form-actions">
+    <slot name="submitBefore" />
+    <el-button v-if="showSubmitButton" type="primary" :icon="submitButtonIcon" :loading="submitLoading"
+      @click="$emit('submit')">
+      {{ submitButtonText }}
+    </el-button>
+    <slot name="resetBefore" />
+    <el-button v-if="showResetButton" :icon="resetButtonIcon" @click="$emit('reset')">
+      {{ resetButtonText }}
+    </el-button>
+    <slot name="actions" />
+    <!-- <el-button v-if="showAdvancedButton && hasMoreFields" type="text" class="ecp-form-actions__advance"
+      @click="$emit('toggle')">
+      <i class="el-icon-d-arrow-left" :class="collapsed ? 'down' : 'up'" />
+      {{ collapsed ? '展开' : '收起' }}
+    </el-button> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ColEx } from '../types'
+
+withDefaults(
+  defineProps<{
+    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: true,
+    showSubmitButton: true,
+    showResetButton: true,
+    submitButtonText: '提交',
+    resetButtonText: '重置',
+    submitButtonIcon: 'el-icon-search',
+    resetButtonIcon: 'el-icon-refresh-left',
+    submitLoading: false,
+    showAdvancedButton: false,
+    hasMoreFields: false,
+    collapsed: true,
+  }
+)
+
+defineEmits<{
+  (e: 'submit'): void
+  (e: 'reset'): void
+  (e: 'toggle'): void
+}>()
+</script>
+
+<style scoped>
+/* .ecp-form-actions {
+} */
+.ecp-form-actions {
+  text-align: right;
+}
+.ecp-form-actions__advance {
+  margin-right: 8px;
+}
+.el-icon-d-arrow-left.up {
+  transform:rotate(90deg);
+}
+.el-icon-d-arrow-left.down {
+  transform:rotate(-90deg);
+}
+</style>