element-plus-jsx/es/hooks.js

基于 Element Plus 扩展 JSX 语法的组件库

import { isRef } from 'vue';

function useFnOrRefProp(prop, ...args) {
    return typeof prop === 'function' ? prop(...args) : isRef(prop) ? prop.value : prop;
}
/**
 * 列配置
 *
 * @param columns 列配置或列配置函数
 * @param mapAddColumns 映射到所有列的配置项
 * @param args 函数参数
 *
 * @example 单独使用 `useColumns` 可获得参数类型提示以及参数校验
 * const columns = useColumns([{ prop: 'name', label: '姓名' }], { align: 'center' })
 *
 * @example 配合 `defineColumns` 使用 （此用法主要用于将配置列拆分于单独文件）
 * const columns = useColumns(
 *    defineColumns((editClick:Fn, deleteClick:Fn) => [{ prop: 'name', label: '姓名' }]),
 *    { align: 'center' },
 *    editClick,
 *    deleteClick
 * )
 *
 */
function useColumns(columns, mapAddColumns = {}, ...args) {
    return (typeof columns === 'function' ? columns(...args) : columns).map((column) => {
        return { ...mapAddColumns, ...column };
    });
}
/**
 * 定义列配置函数
 * - 使用`defineColumns`与`useColumns`配合可轻松的将配置拆分至多个文件
 *
 * @param fn 列配置函数
 * @returns
 *
 * @example
 * - example/page/xxx/columns/exampleColumns.tsx
 * export default defineColumns((editClick:Fn, deleteClick:Fn) => [{ prop: 'name', label: '姓名' }, ···])
 *
 * - example/page/xxx/index.vue
 * import exampleColumns from './columns/exampleColumns'
 *
 * <el-tablex :data="data" :columns="useColumns(exampleColumns, {}, editClick, deleteClick)" />
 */
function defineColumns(fn) {
    return fn;
}
/**
 * 定义Tablex插件 fn
 * @param fn 插件函数
 * @returns
 *
 * @example
 * const xxxTableplugin = defineColumnsPlugin((props) => props.columns)
 */
function defineColumnsPlugin(fn) {
    return fn;
}
/**
 * 表单配置
 *
 * @param formFn 表单配置或表单配置函数
 * @param mapAddFormFn 映射到所有表单项的配置
 * @param args 函数参数
 *
 * @example 单独使用 `useFormFn` 可获得参数类型提示以及参数校验
 * const formFn = useFormFn([{ prop: 'name', label: '姓名', type: 'input' }], { size: 'mini' })
 *
 * @example 配合 `defineFormFn` 使用 （此用法主要用于将配置列拆分于单独文件）
 * const formFn = useFormFn(
 *    defineFormFn((userList:any[]) => [{ prop: 'name', label: '姓名', type: 'select', selectProps:{ options: userList } }]),
 *    { size: 'mini' },
 *    userList
 * )
 *
 */
function useFormFn(formFn, mapAddFormFn = {}, ...args) {
    return (typeof formFn === 'function' ? formFn(...args) : formFn).map((formItem) => {
        return { ...mapAddFormFn, ...formItem };
    });
}
/**
 * 定义表单配置函数
 * - 使用`defineFormFn`与`useFormFn`配合可轻松的将配置拆分至多个文件
 *
 * @param fn 表单配置函数
 * @returns
 *
 * @example
 * - example/page/xxx/formFn/exampleFormFn.tsx
 * export default defineFormFn((userList:any[]) => [{ prop: 'name', label: '姓名', type: 'select', selectProps:{ options: userList } }])
 *
 * - example/page/xxx/index.vue
 * import exampleColumns from './columns/exampleFormFn'
 *
 * <el-formx v-model="form" :formFn="useFormFn(exampleFormFn, {}, userList)" />
 */
function defineFormFn(fn) {
    return fn;
}
/**
 * 定义Tablex插件 fn
 * @param fn 插件函数
 * @returns
 *
 * @example
 * const xxxFormplugin = defineFormFnPlugin((props) => props.formFn)
 */
function defineFormFnPlugin(fn) {
    return fn;
}
/**
 * 设置Tablex属性 提供类型check
 * @param props 属性
 * @returns
 *
 * @example
 * const props = useSetTablexProps({
 *   ···
 * })
 *
 * <el-tablex v-bind="props" />
 */
function useSetTablexProps(props) {
    return props;
}
/**
 * 设置Formx属性 提供类型check
 * @param props 属性
 * @returns
 *
 * @example
 * const props = useSetFormxProps({
 *   ···
 * })
 *
 * <el-formx v-bind="props" />
 */
function useSetFormxProps(props) {
    return props;
}
/**
 * 注册组件
 * @param main 主组件
 * @param extra 挂载的子组件
 * @returns
 */
function useWithInstall(main, extra) {
    main.install = (app, options) => {
        for (const comp of [main, ...Object.values(extra ?? {})]) {
            app.component((options?.prefix ?? comp.prefix) + comp.name, comp);
        }
    };
    if (extra) {
        for (const [key, comp] of Object.entries(extra)) {
            main[key] = comp;
        }
    }
    return main;
}

export { defineColumns, defineColumnsPlugin, defineFormFn, defineFormFnPlugin, useColumns, useFnOrRefProp, useFormFn, useSetFormxProps, useSetTablexProps, useWithInstall };