@aoao-y33/ui 0.0.3 → 0.0.5

package/src/form/components/form-item/form-item.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import {ElFormItem, type FormItemInstance} from "element-plus";
-import type {AxFormItemProps} from "./props";
-import {computed, inject, onUnmounted, ref, useAttrs, useSlots} from "vue";
-import {formFields, formRules, isTip} from "@/form";
-import {useDefineProps} from "@aoao-y33/hooks";
-
-defineOptions({name: 'ax-form-item'});
-const {
-  type = 'text',
-  fieldName,
-  label = "",
-  componentProps = {},
-  placeholder,
-  vtypes = [],
-  rules = [],
-  defaultValue,
-  ...props
-} = defineProps<AxFormItemProps>()
-const attrs = useAttrs();
-const slots = useSlots();
-const itemProps = useDefineProps(props);
-const formData = inject('formData', null) as Record<string, any> | null;
-const defaultData = inject('defaultData', {}) as Record<string, any>;
-if (formData) {
-  defaultData[fieldName] = defaultValue;
-  formData[fieldName] = defaultData[fieldName];
-}
-const FormField = computed(() => {
-  return formFields[type];
-})
-const _placeholder = computed(() => {
-  if (placeholder) {
-    return placeholder;
-  }
-  return isTip(type) + (label || '');
-})
-const _rules = computed(() => {
-  const validates = vtypes.map(item => {
-    if (typeof formRules[item] === 'function') {
-      return formRules[item](type, label);
-    }
-    return formRules[item];
-  });
-  return validates.concat(rules) as any;
-})
-
-onUnmounted(() => {
-  if (formData) {
-    delete formData[fieldName as string];
-  }
-})
-
-const formItemRef = ref<FormItemInstance>();
-
-const instanceRef = ref<typeof FormField.value>();
-
-const getElFormItem=()=>{
-  return formItemRef.value as FormItemInstance;
-}
-const getFormField=()=>{
-  return instanceRef.value as any
-}
-
-defineExpose({
-  getElFormItem,
-  getFormField
-})
-</script>
-<template>
-  <ElFormItem
-      v-if="formData"
-      v-bind="itemProps"
-      :label="label"
-      :prop="fieldName"
-      :rules="_rules"
-      ref="formItemRef"
-  >
-    <FormField
-        ref="instanceRef"
-        v-bind="{...componentProps,...attrs}"
-        v-model="formData[fieldName]"
-        :placeholder="_placeholder"
-    >
-      <template v-for="slot in Object.keys(slots)" #[slot]>
-        <slot :name="slot"></slot>
-      </template>
-    </FormField>
-  </ElFormItem>
-</template>

package/src/form/components/form-item/index.ts

@@ -1,6 +0,0 @@
-import FormItem from './form-item.vue';
-
-export * from './props';
-export const AxFormItem = FormItem;
-export type AxFormItemInstance = InstanceType<typeof FormItem>;
-export default AxFormItem;

package/src/form/components/form-item/props.ts

@@ -1,50 +0,0 @@
-import type {FormItemProps} from "element-plus";
-
-/**
- * AxFormItem 表单项组件属性接口
- * 继承自 Element Plus FormItemProps，扩展了自定义字段配置功能
- */
-export interface AxFormItemProps extends FormItemProps{
-    /** 字段名称，用于表单数据绑定和验证的唯一标识 */
-    fieldName:string;
-
-    /** 表单项的标签文本，显示在输入框左侧或上方 */
-    label?: string;
-
-    /**
-     * 表单项类型，决定渲染的输入组件类型
-     * @example 'input' | 'select' | 'textarea' | 'date-picker' 等
-     */
-    type?: string;
-
-    /**
-     * 验证规则类型数组，用于表单字段验证
-     * @example ['required', 'email', 'phone'] 等预定义验证规则
-     */
-    vtypes?: string[];
-
-    /** 字段的默认值，当表单初始化时自动填充 */
-    defaultValue?: any;
-
-    /**
-     * 底层组件的额外属性配置
-     * 透传给实际渲染的输入组件（如 Input、Select 等）
-     */
-    componentProps?:Record<string, any>
-
-    /** 输入框的占位符文本，提示用户输入内容 */
-    placeholder?:string
-}
-
-/**
- * AxFormItem 表单项配置选项接口
- * 继承自 AxFormItemProps，增加了插槽配置能力
- */
-export interface AxFormItemOptions extends AxFormItemProps{
-    /**
-     * 自定义插槽配置，用于覆盖表单项的默认渲染内容
-     * key 为插槽名称，value 为插槽内容或渲染函数
-     * @example { default: () => h('div', '自定义内容') }
-     */
-    slots?:Record<string, any>
-}

package/src/form/hoc/index.ts

@@ -1,3 +0,0 @@
-export * from './useForm';
-export * from './useFormExpose';
-export * from './useFormFetch';

package/src/form/hoc/useForm.ts

@@ -1,106 +0,0 @@
-import {AxForm, AxFormItem, type AxFormItemOptions, useFormExpose, useFormFetch} from "@/form";
-import {AxButton} from '@/button';
-import { type AxButtonOptions} from "@/button";
-import {type FieldsApi, useComponentPool, useState} from "@aoao-y33/hooks";
-import {omit} from "lodash";
-import type {AxFormInstance, AxFormOptions, FormApi, FormFetchApi} from '@/form';
-import type { StateApi} from "@aoao-y33/hooks";
-import {type Component, defineComponent, h, type Ref, ref} from "vue";
-
-/**
- * UseForm 返回值中的 API 接口
- * 扩展了基础表单 API，提供完整的表单控制能力
- * @template T - 表单数据类型
- */
-export interface UseFormApi<T extends Record<string, any>> extends FormApi<T> {
-    /**
-     * 表单属性状态管理器
-     * 用于动态更新表单配置（不包含 buttonConfig 和 fieldConfig）
-     */
-    setForm: StateApi<Omit<AxFormOptions, 'buttonConfig'|'fieldConfig'>>
-
-    /** 表单请求 API，用于执行表单提交等异步操作 */
-    requestApi: FormFetchApi<T>
-
-    /** 按钮组件池 API，用于管理表单中的按钮配置 */
-    buttonsApi: FieldsApi<AxButtonOptions>
-
-    /** 表单项组件池 API，用于管理表单字段的配置 */
-    fieldsApi: FieldsApi<AxFormItemOptions>
-}
-
-/**
- * UseForm Hook 的返回类型
- * 包含渲染组件和 API 接口的元组
- * @template T - 表单数据类型
- */
-export type UseFormReturn<T extends Record<string, any>> = [Component, UseFormApi<T>];
-
-/**
- * 表单 Hook，用于创建可配置的表单组件
- *
- * 该 Hook 封装了表单的核心逻辑，包括：
- * - 表单状态管理
- * - 按钮和表单项的动态配置
- * - 表单验证和提交
- * - 组件渲染
- *
- * @param options - 表单初始配置选项
- * @returns [Form 组件, Form API] 元组
- *
- * @example
- * const [Form, formApi] = useForm({
- *   api: submitData,
- *   fieldConfig: { /* 字段配置 *\/ },
- *   buttonConfig: { /* 按钮配置 *\/ }
- * })
- *
- * // 在模板中使用
- * <Form />
- *
- * // 通过 API 操作表单
- * formApi.fieldsApi.addField('username', { label: '用户名', type: 'input' })
- * formApi.requestApi.submit()
- */
-export function useForm<T extends Record<string, any>>(options: AxFormOptions<T> = {}): UseFormReturn<T> {
-    // 创建表单属性状态，排除 buttonConfig 和 fieldConfig（它们由独立的组件池管理）
-    const [props, setForm] = useState(omit(options, ['buttonConfig','fieldConfig']));
-
-    // 创建按钮组件池，用于管理和渲染表单按钮
-    const [Buttons, buttonsApi] = useComponentPool<AxButtonOptions>(AxButton,options.buttonConfig);
-
-    // 创建表单项组件池，用于管理和渲染表单字段
-    const [Fields, fieldsApi] = useComponentPool<AxFormItemOptions>(AxFormItem, options.fieldConfig);
-
-    // 创建表单引用，用于访问表单实例的方法
-    const formRef = ref() as Ref<AxFormInstance>;
-
-    // 获取表单暴露的 API（验证、重置等方法）
-    const formApi = useFormExpose<T>(formRef);
-
-    // 获取表单请求 API（提交、数据获取等异步操作）
-    const requestApi = useFormFetch<T>(formRef);
-
-    // 定义表单渲染组件
-    const Form = defineComponent({
-        setup() {
-            const slots: Record<string, Component> = {};
-
-            // 如果存在按钮配置，创建按钮插槽
-            if (buttonsApi.getList().length) {
-                slots['button'] = () => h(Buttons);
-            }
-
-            // 如果存在字段配置，创建默认插槽（表单项列表）
-            if(fieldsApi.getList().length){
-                slots['default'] = () => h(Fields);
-            }
-
-            // 渲染 AxForm 组件，传入 ref、属性和插槽
-            return () => h(AxForm as any, {ref:formRef,...props.value}, slots);
-        }
-    })
-
-    // 返回表单组件和完整的 API 集合
-    return [Form, {setForm, ...formApi,fieldsApi, requestApi, buttonsApi}] as const;
-}

package/src/form/hoc/useFormExpose.ts

@@ -1,97 +0,0 @@
-import type {Ref} from "vue";
-import type {AxFormInstance} from "@/form";
-
-/**
- * 表单暴露钩子函数，提供统一的表单操作接口
- *
- * 该函数封装了表单的各种操作方法，包括获取值、设置值、重置等，
- * 并通过泛型提供类型安全的访问方式
- *
- * @template T - 表单数据类型，必须是一个记录类型的对象
- * @param form - 表单实例的Ref引用，指向AxFormInstance类型
- * @returns 返回包含各种表单操作方法的对象
- */
-export type FormApi<T extends Record<string, any>> = ReturnType<typeof useFormExpose<T>>;
-
-export function useFormExpose<T extends Record<string, any>>(form:Ref<AxFormInstance>){
-
-    /**
-     * 获取底层的Element UI表单实例
-     *
-     * @returns Element UI表单实例
-     */
-    const getElForm = () => {
-        return form.value.getElForm();
-    }
-
-    /**
-     * 获取表单的所有字段值
-     *
-     * @returns 表单所有字段的值对象，类型为T
-     */
-    const getValues = ():T => {
-        return form.value.getValues() as T;
-    }
-
-    /**
-     * 获取表单指定字段的值
-     *
-     * @param field - 要获取值的字段名称
-     * @returns 指定字段的值，类型为该字段在T中的对应类型
-     */
-    const getValue = (field:keyof T):T[keyof T] => {
-        return form.value.getValue(field as string) as T[keyof T];
-    }
-
-    /**
-     * 获取表单的所有字段名称列表
-     *
-     * @returns 表单字段名称数组，每个元素都是T的键类型
-     */
-    const getFields = ():(keyof T)[] => {
-        return form.value.getFields() as (keyof T)[];
-    }
-
-    /**
-     * 获取表单字段的默认值
-     *
-     * @returns 包含默认值的对象，可能只包含部分字段，类型为Partial<T>
-     */
-    const getDefaultValues = ():Partial<T> => {
-        return form.value.getDefaultValues() as Partial<T>;
-    }
-
-
-    /**
-     * 批量设置表单字段的值
-     *
-     * @param values - 要设置的值对象，可以只包含部分字段，类型为Partial<T>
-     */
-    const setValues = (values:Partial<T>) => {
-        form.value.setValues(values);
-    }
-
-    /**
-     * 重置表单所有字段的值到默认状态
-     */
-    const resetValues = () => {
-        form.value.resetValues();
-    }
-
-    /**
-     * 清空表单所有字段的值
-     */
-    const clearValues = () => {
-        form.value.clearValues();
-    }
-    return {
-        getElForm,
-        getValues,
-        getValue,
-        getFields,
-        getDefaultValues,
-        setValues,
-        resetValues,
-        clearValues
-    }
-}

package/src/form/hoc/useFormFetch.ts

@@ -1,103 +0,0 @@
-import type {Ref} from "vue";
-import type {AxFormInstance} from "@/form";
-import type {FetchOptions, RequestFetch} from "@aoao-y33/hooks";
-
-export type FormFetchApi<T extends Record<string, any>> = ReturnType<typeof useFormFetch<T>>
-/**
- * 表单数据获取钩子函数，提供表单相关的API请求和数据加载功能
- *
- * 该函数封装了表单的配置设置、API绑定、数据加载等操作，
- * 用于处理表单与服务端的数据交互
- *
- * @template T - 表单数据类型，必须是一个记录类型的对象
- * @param formRef - 表单实例的Ref引用，指向AxFormInstance类型
- * @returns 返回包含各种表单数据操作方法的对象
- */
-export function useFormFetch<T extends Record<string, any>,R=any>(formRef: Ref<AxFormInstance>) {
-
-    /**
-     * 设置表单的配置信息
-     *
-     * @param config - 表单配置选项，包含请求配置等信息
-     */
-    const setConfig = (config: FetchOptions<T, R>) => {
-        formRef.value.setConfig(config)
-    }
-
-    /**
-     * 设置表单的请求API方法
-     *
-     * @param api - 请求方法，用于从服务端获取或提交数据
-     */
-    const setApi = (api: RequestFetch<T, R>) => {
-        formRef.value.setApi(api)
-    }
-
-    /**
-     * 加载表单数据，可选择传入参数
-     *
-     * @param params - 可选的查询参数，用于过滤或指定要加载的数据
-     * @returns 返回Promise，解析为加载的数据结果
-     */
-    const load = (params?: T) => {
-        return formRef.value.load(params)
-    }
-
-    /**
-     * 获取当前表单的配置信息
-     *
-     * @returns 表单配置对象
-     */
-    const getConfig = () => {
-        return formRef.value.getConfig()
-    }
-
-    /**
-     * 获取表单实例
-     *
-     * @returns 表单实例对象
-     */
-    const get = () => {
-        return formRef.value.get()
-    }
-
-    /**
-     * 检查表单是否已准备好使用
-     *
-     * @returns 表单准备状态
-     */
-    const getReady = () => {
-        return formRef.value.getReady()
-    }
-
-    /**
-     * 设置表单参数，并可选择是否立即加载数据
-     *
-     * @param data - 要设置的参数数据
-     * @param load - 可选标志，指示设置参数后是否立即执行加载操作
-     * @returns 返回操作结果
-     */
-    const setParams = (data: T, load?: boolean) => {
-        return formRef.value.setParams(data, load)
-    }
-
-    /**
-     * 重新加载表单数据
-     *
-     * @returns 返回Promise，解析为重新加载的数据结果
-     */
-    const reload = () => {
-        return formRef.value.reload()
-    }
-
-    return{
-        setConfig,
-        setApi,
-        load,
-        getConfig,
-        get,
-        getReady,
-        setParams,
-        reload
-    }
-}

package/src/form/index.ts

@@ -1,5 +0,0 @@
-export * from './components/form';
-export * from './components/form-item';
-export * from './components/fields';
-export * from './utils';
-export * from './hoc';

package/src/form/utils/index.ts

@@ -1,149 +0,0 @@
-import type {Component} from "vue";
-import type {FormItemRule} from "element-plus";
-
-/**
- * 表单项验证规则类型
- * 支持三种形式的规则定义：
- * - 直接的 FormItemRule 对象
- * - 返回 FormItemRule 的函数（无参数）
- * - 返回 FormItemRule 的函数（接收类型和标签参数）
- */
-export type VFormItemRule =
-    FormItemRule
-    | (() => FormItemRule)
-    | ((type: string,label?: string) => FormItemRule)
-
-/**
- * 表单字段组件注册表
- * 存储字段类型与对应 Vue 组件的映射关系
- * @example
- * // 注册自定义输入组件
- * formFields['custom-input'] = CustomInputComponent
- */
-export const formFields: Record<string, Component> = {};
-
-/**
- * 表单验证规则注册表
- * 预定义了常用的表单验证规则
- *
- * 内置规则包括：
- * - required: 必填验证，根据字段类型自动显示"请输入"或"请选择"
- * - required2: 自定义验证器实现的必填验证
- * - phone: 手机号格式验证（11位数字，以1开头，第二位3-9）
- * - tel: 电话号码格式验证（带可选区号）
- * - mail: 邮箱地址格式验证
- */
-export const formRules:Record<string, VFormItemRule> = {
-    /**
-     * 必填验证规则
-     * @param type - 字段类型，用于判断提示文本
-     * @param label - 字段标签名称
-     * @returns 验证规则对象
-     */
-    "required":(type:string,label:string="")=>
-        ({'required':true,message:isTip(type)+label}),
-
-    /**
-     * 基于自定义验证器的必填验证
-     * 使用 validator 函数实现更灵活的验证逻辑
-     */
-    "required2":()=>
-        ({
-            validator:(_:any,value:any,cb:any)=>{
-                if(!value){
-                    cb(new Error())
-                }else {
-                    cb();
-                }
-            }
-        }),
-
-    /**
-     * 手机号验证规则
-     * 匹配规则：^1[3-9]\d{9}$
-     * @param _ - 占位参数
-     * @param label - 字段标签名称，用于错误提示
-     */
-    "phone": (_,label="") =>
-        ({pattern: /^1[3-9]\d{9}$/, message: `${label}格式错误`}),
-
-    /**
-     * 固定电话号码验证规则
-     * 匹配规则：支持带区号或不带区号的格式，如 010-12345678 或 12345678
-     * @param _ - 占位参数
-     * @param label - 字段标签名称，用于错误提示
-     */
-    "tel":(_,label="")=>
-        ({pattern: /^(\d{3,4}-?)?\d{7,8}$/, message: `${label}格式错误`}),
-
-    /**
-     * 电子邮箱验证规则
-     * 匹配规则：标准邮箱格式（用户名@域名.后缀）
-     * @param _ - 占位参数
-     * @param label - 字段标签名称，用于错误提示
-     */
-    "mail":(_,label="")=>
-        ({pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: `${label}格式错误`}),
-}
-
-/**
- * 注册新的表单字段组件
- * 将自定义组件添加到表单字段注册表中
- *
- * @param type - 字段类型标识符（唯一）
- * @param component - 对应的 Vue 组件
- *
- * @warning 如果类型已存在，会输出警告信息并阻止重复注册
- *
- * @example
- * import CustomInput from './CustomInput.vue'
- * addFormField('custom-input', CustomInput)
- */
-export const addFormField = (type: string, component: Component) => {
-    if (type in formFields) {
-        console.warn(`${type} has in formFields`);
-        return;
-    }
-    formFields[type] = component;
-}
-
-/**
- * 注册新的表单验证规则
- * 将自定义验证规则添加到规则注册表中
- *
- * @param type - 规则类型标识符（唯一）
- * @param rule - 验证规则对象或函数
- *
- * @throws 如果规则类型已存在，抛出错误信息
- *
- * @example
- * addFormRules('idCard', (type, label) => ({
- *   pattern: /^\d{17}[\dXx]$/,
- *   message: `${label}身份证号格式错误`
- * }))
- */
-export const addFormRules=(type:string,rule:any)=>{
-    if(type in formRules){
-        throw `${type}类形的规则已存在`
-    }
-    formRules[type] = rule;
-}
-
-/**
- * 根据字段类型获取验证提示前缀
- * 对于选择类组件返回"请选择"，其他类型返回"请输入"
- *
- * @param type - 字段类型
- * @returns 提示文本前缀
- *
- * @example
- * isTip('input')      // "请输入"
- * isTip('select')     // "请选择"
- * isTip('checkbox')   // "请选择"
- */
-export const isTip=(type:string)=>{
-    if(["select","checkbox","cascade"].includes(type)){
-        return "请选择";
-    }
-    return "请输入";
-}

package/src/global.ts

@@ -1,40 +0,0 @@
-// global.ts
-// @ts-ignore
-
-import type { AxButton } from './button'
-import type { AxForm } from './form'
-import type { AxFormItem } from './form'
-import type { AxLayout } from './layout'
-import type { AxModal } from './modal'
-import type { AxTable, AxTablePage, AxTableSelect, AxTableColumn } from './table'
-
-declare module 'vue' {
-    export interface GlobalComponents {
-        AxButton: typeof AxButton
-        AxForm: typeof AxForm
-        AxFormItem: typeof AxFormItem
-        AxLayout: typeof AxLayout
-        AxModal: typeof AxModal
-        AxTable: typeof AxTable
-        AxTablePage: typeof AxTablePage
-        AxTableSelect: typeof AxTableSelect
-        AxTableColumn: typeof AxTableColumn
-    }
-}
-
-// 添加组件名称的 kebab-case 版本支持
-declare module 'vue' {
-    export interface GlobalComponents {
-        'ax-button': typeof AxButton
-        'ax-form': typeof AxForm
-        'ax-form-item': typeof AxFormItem
-        'ax-layout': typeof AxLayout
-        'ax-modal': typeof AxModal
-        'ax-table': typeof AxTable
-        'ax-table-page': typeof AxTablePage
-        'ax-table-select': typeof AxTableSelect
-        'ax-table-column': typeof AxTableColumn
-    }
-}
-
-export {}

package/src/index.ts

@@ -1,37 +0,0 @@
-import './style/index.css';
-import type {App} from "vue";
-import './global';
-import {AxButton, initButtonFields} from "@/button";
-import {AxForm, AxFormItem, initFormFields} from "@/form";
-import {AxLayout, initLayoutFields} from "@/layout";
-import {AxTable, AxTableColumn, AxTablePage, AxTableSelect, initTableColumns} from "@/table";
-import {AxModal} from "@/modal";
-
-export * from './modal';
-export * from './button';
-export * from './form';
-export * from './layout';
-export * from './table';
-export * from './common';
-initButtonFields();
-initFormFields();
-initLayoutFields();
-initTableColumns();
-
-export default {
-    install(app: App) {
-        initFormFields();
-        initLayoutFields();
-        initTableColumns();
-        initButtonFields();
-        app.component("ax-button", AxButton);
-        app.component("ax-form", AxForm);
-        app.component("ax-form-item", AxFormItem);
-        app.component("ax-layout", AxLayout);
-        app.component("ax-modal", AxModal);
-        app.component("ax-table", AxTable);
-        app.component("ax-table-page", AxTablePage);
-        app.component("ax-table-select", AxTableSelect);
-        app.component("ax-table-column", AxTableColumn);
-    }
-}