@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/forms/src/hooks/helper.ts

@@ -1,70 +0,0 @@
-import { ComponentType } from "../types/form.type";
-import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
-import { isNumber } from "@dt-frames/core";
-
-/**
- * 生成占位符 
- * 根据组件名称不同 生成不同的占位符
- */ 
-export function createPlaceholder(component: ComponentType) {
-    if( component.includes('Input') || component.includes('Complete') ) {
-        return '请输入'
-    }
-
-    if(
-        component.includes('Picker') ||
-        component.includes('Select') ||
-        component.includes('Cascader') ||
-        component.includes('Checkbox') ||
-        component.includes('Radio') ||
-        component.includes('Switch')
-    ) {
-        return '请选择'
-    }
-
-    if(component.includes('Icon')) {
-        return '请设置图标'
-    }
-
-    return ''
-}
-
-
-// 定义表单的type
-export function setComponentRuleType(
-    rule: ValidationRule, 
-    component: ComponentType, 
-    valueFormat: string
-) {
-    if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
-        
-        rule.type = valueFormat ? 'string' : 'object';
-
-    } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
-        
-        rule.type = 'array';
-
-      } else if (['InputNumber'].includes(component)) {
-        
-        rule.type = 'number';
-
-      }
-}
-
-// 获取Input的值
-export function handleInputNumberValue(component?: ComponentType, val?: any) {
-    if (!component) return val;
-    if ([
-        'Input', 
-        'InputPassword', 
-        'InputSearch', 
-        'InputTextArea'
-    ].includes(component)) {
-      return val && isNumber(val) ? `${val}` : val;
-    }
-    return val;
-}
-
-
-// 时间类型
-export const datePickerType: string[] = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker', 'RangePicker']

package/src/components/forms/src/hooks/useForm.ts

@@ -1,130 +0,0 @@
-/** =========================================================
- *  对form表单进行一次封装，方便后期调用
- *  ==========================================================*/ 
-
-import { Recordable } from "@dt-frames/core";
-import { ref, unref, onUnmounted, watch, nextTick } from "vue";
-import { FormActionType, FormProps, FormSchema } from "../types/form.type";
-
-type RegisterFn = (formInstance: FormActionType) => void;
-type UseFormReturnType = [RegisterFn, FormActionType]
-
-export function useForm(props: FormProps): UseFormReturnType {
-    const formRef = ref( null )
-    const loadedRef = ref( false )
-
-    function registerForm(instance: FormActionType) {
-
-        // 卸载之后，表单数据清空
-        onUnmounted(() => {
-            formRef.value = null
-            loadedRef.value = false
-        })
-
-        // 如果表单实例已经存在，停止注册表单
-        if( unref(loadedRef) && instance === unref(formRef) ) return
-        formRef.value = instance
-        loadedRef.value = true
-
-        /**
-         * 深度监听props的变化,首次监听
-         * 动态更改表单实例
-        */
-        watch(
-            () => props,
-            () => props && instance.setProps(props),
-            {
-                immediate: true,
-                deep: true
-            }
-        )
-    }
-
-
-    /**
-     * 定义表单的操作方法
-     */
-    async function getForm() {
-        const form = unref( formRef )
-
-        if( !form ) console.error('表单未申明!');
-        
-        await nextTick()
-
-        return form
-    }
-
-    const methods: FormActionType = {
-        // 设置属性值
-        setProps: async (props: FormProps) => {
-            const form = await getForm()
-            form.setProps(props)
-        },
-
-        // 批量更新
-        updateSchema: async (data: Partial<FormSchema> | Partial<FormSchema>[]) => {
-            const form = await getForm()
-            form.updateSchema( data )
-        },
-
-        // 重置
-        resetSchema: async ( data: Partial<FormSchema> | Partial<FormSchema>[] ) => {
-            const form = await getForm()
-            form.resetSchema(data)
-        },
-
-        // 清除验证规则
-        clearValidate: async (name?: string | string[]) => {
-            const form = await getForm()
-            form.clearValidate(name)
-        },
-
-        // 表单重置
-        resetForms: async () => {
-            const form = await getForm()
-            form.resetForms()
-        },
-
-        // 根据属性名删除表单
-        removeFormByName: async (name?: string | string[]) => {
-            unref(formRef)?.removeFormByName( name )
-        },
-
-        // 设置表单的值
-        setFormValues: async ( values: Recordable ) => {
-            const form = await getForm()
-            form.setFormValues(values)
-        },
-
-        // 动态添加一个表单
-        appendFormItems: async (
-            schema: FormSchema,
-            prefixName: string | undefined,
-            first: boolean
-        ) => {
-            const form = await getForm()
-            form.appendFormItems( schema, prefixName, first )
-        },
-
-        // 检验有效的属性值
-        validate: async ( nameList: (string | number)[] ) => {
-            const form = await getForm()
-            return form.validate(nameList)
-        },
-
-        // 返回有效的区域
-        validateFields: async (nameList: (string | number)[]) => {
-            const form = await getForm()
-            return form.validateFields(nameList)
-        },
-
-        // 获取属性值
-        getFormValues: () => {
-            return unref(formRef)?.getFormValues()
-        }
-
-    }
-
-
-    return [ registerForm, methods ]
-}

package/src/components/forms/src/hooks/useFormActions.ts

@@ -1,63 +0,0 @@
-/** ==================================
- *  处理查询条件中的按钮收缩
- *  ==================================*/
-
-import { isBoolean, Recordable, useAppStore } from "@dt-frames/core"
-import { ComputedRef, Ref, toRaw, unref } from "vue"
-import { RESET_BTN_NAME, SEARCH_BTN_NAME } from "../const/form.const"
-import { ButtonProps, FormProps, FormSchema } from "../types/form.type"
-
-type FormOpt = {
-    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>
-    getProps: ComputedRef<FormProps>
-    getSchema: ComputedRef<FormSchema[]>,
-    defaultValue: Ref<Recordable>,
-    getFormValues: () => Recordable,
-    setFormValues: (values: Recordable) => Promise<void>,
-}
-
-export function useFormActions(opt: FormOpt) {
-    const { getProps, getSchema, defaultValue,  updateSchema, getFormValues, setFormValues } = opt
-    const { appConf } = useAppStore()
-
-    // 切换查询条件的展开 折叠
-    function handleAdvanced(isAdvanced: boolean) {
-        const { schemas, minShowColumn = appConf.ui.form?.minShowColumn || 2 } = unref(getProps)
-
-        let schema = schemas.reduce( ( t: FormSchema[], it: FormSchema, index ) => {
-            if( index > minShowColumn - 1)
-            it.isAdvanced = isAdvanced
-            t.push( it )
-
-            return t
-        }, [] )
-
-        updateSchema( schema )
-    }
-
-    function handleMethod(params: boolean | ButtonProps) {
-        const { onSearch, onReset } = unref(getProps)
-
-        if( isBoolean( params ) ) {
-
-            // 如果为boolean 则视为查询条件的切换按钮
-            handleAdvanced(params as boolean)
-
-        } else if(params.name === SEARCH_BTN_NAME) {
-
-            // 查询
-            onSearch(getFormValues())
-
-        } else if(params.name === RESET_BTN_NAME) {
-            
-            // 重置
-            setFormValues(toRaw(defaultValue.value))
-            onReset(getFormValues())
-
-        } else {
-            (params as ButtonProps).onClick()
-        }
-    }
-
-    return [ handleMethod ]
-}

package/src/components/forms/src/hooks/useFormEvents.ts

@@ -1,247 +0,0 @@
-import { dateFormat, deepMerge, isObject, isString, Recordable } from "@dt-frames/core"
-import { ComputedRef, nextTick, Ref, toRaw, unref } from "vue"
-import { uniqBy, cloneDeep } from 'lodash-es'
-import { FormActionType, FormProps, FormSchema } from "../types/form.type"
-import { handleInputNumberValue } from "./helper"
-
-/** =================================
- *  定义表单的事件
- *  =================================*/
-type FormEventsType = {
-    emit: (event: string, ...args: any[]) => void
-    getProps: ComputedRef<FormProps>;
-    getSchema: ComputedRef<FormSchema[]>
-    formModel: Recordable,
-    defaultValue: Ref<Recordable>,
-    formElRef: Ref<FormActionType>,
-    schemaRef: Ref<FormSchema[]>,
-    handleFormValues: Function;
-}
-
-export function useFormEvents({
-    emit,
-    getSchema,
-    formModel,
-    defaultValue,
-    formElRef,
-    schemaRef,
-    handleFormValues
-}: FormEventsType) {
-
-    /**
-     * 获取form表单的值
-    */
-    function getFormValues() {
-        const formEl = unref(formElRef);
-        if (!formEl) return {};
-
-        return handleFormValues(toRaw(unref(formModel)))
-    }
-
-    /**
-     * 更新表单的值
-     */
-    function updateSchema(data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> {
-        let updateItems: Partial<FormSchema>[] = []
-
-        updateItems = isObject(data) 
-            ? [ data as FormSchema ]
-            : [...data]
-
-        if( updateItems.every( it => it.component !== 'Divider' && !it.name ) ) {
-            console.error( '所有的元素都必须设置name属性' )
-            return
-        }
-
-        let schema: FormSchema[] = []
-        updateItems.forEach( it => {
-            unref(getSchema).forEach( val => {
-                if( val.name === it.name ) {
-                    const newSchema = deepMerge(val, it)
-                    schema.push(newSchema as FormSchema)
-                } else {
-                    schema.push(val)
-                }
-            } )
-        } )
-
-        schemaRef.value = uniqBy(schema, 'name')
-    }
-
-
-    /**
-     * 重新设置schema
-     */
-    function resetSchema(data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> {
-        let updateItems: Partial<FormSchema>[] = []
-
-        updateItems = isObject(data) 
-            ? [ data as FormSchema ]
-            : [...data]
-
-        if( updateItems.every( it => it.component !== 'Divider' && !it.name ) ) {
-            console.error( '所有的元素都必须设置name属性' )
-            return
-        }
-    
-        schemaRef.value = updateItems as FormSchema[]
-    }
-
-    /**
-     * 清除验证条件
-    */
-    async function clearValidate(name?: string | string[]) {
-        await unref(formElRef)?.clearValidate(name);
-    }
-
-    /**
-     * 重置form表单
-     */
-    function resetForms() {
-        if ( !unref(formElRef) ) return
-
-        Object.keys( formModel ).forEach( key => {
-            const schema = unref(getSchema).find((item) => item.name === key)
-            const isInput = 
-                schema?.component &&
-                ['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(schema.component)
-
-            formModel[key] = isInput ? defaultValue.value[key] || '' : defaultValue.value[key]
-
-        } )
-
-        nextTick(() => clearValidate())
-
-        emit('reset', toRaw(formModel))
-    }
-
-    /**
-     * 根据属性名删除表单
-     */
-    function removeFormByName(names: string | string[]) {
-        if( !names ) return
-
-        const schemaList: FormSchema[] = cloneDeep(unref(getSchema))
-        const nameList: string[] = isString(names) ? [names] : names
-
-        for (const name of nameList) {
-            _removeSchemaByName(name, schemaList);
-        }
-        schemaRef.value = schemaList
-    }
-
-    function _removeSchemaByName(name: string, schemaList: FormSchema[]) {
-        const index = schemaList.findIndex((schema) => schema.name === name);
-        if (index !== -1) {
-            delete formModel[name];
-            schemaList.splice(index, 1);
-        }
-    }
-
-
-    /**
-     * 设置属性的值
-     */
-    function setFormValues(values: Recordable | null): Promise<void> {
-
-        if( !values || !Object.keys( values ).length ) {
-            for(let it in formModel) formModel[it] = Array.isArray(formModel[it]) ? [] : null 
-            return 
-        }
-
-        const names = unref(getSchema).map((item) => item.name).filter(Boolean)
-
-        const validKeys: string[] = []
-
-        Object.keys(values).forEach( key => {
-            const schema = unref(getSchema).find((item) => item.name === key)
-            let value = values[key]
-
-            const hasKey = Reflect.has(values, key)
-
-            value = handleInputNumberValue(schema?.component, value)
-
-            if (hasKey && names.includes(key)) {
-                if( itemIsDateType(key) ) {
-                    if (Array.isArray(value)) {
-                        const arr: any[] = [];
-                        for (const ele of value) {
-                            arr.push(ele ? dateFormat(ele) : null);
-                        }
-                        formModel[key] = arr;
-                    } else {
-                        const { props } = schema || {}
-
-                        let _props = props as any
-
-                        if (typeof props === 'function') {
-                            _props = props({ formModel });
-                        }
-                          formModel[key] = value ? (_props?.valueFormat ? value : dateFormat(value)) : null
-                    }
-                } else {
-                    formModel[key] = value
-                }
-
-                validKeys.push(key)
-            }
-        } )
-
-        return validateFields(validKeys).catch((_) => {})
-    }
-
-    /**
-     * 动态添加一个表单
-     */
-    function appendFormItems(schema: FormSchema, prefixName?: string, first = false) {
-        const schemaList: FormSchema[] = cloneDeep(unref(getSchema))
-
-        const index = schemaList.findIndex((schema) => schema.name === prefixName)
-
-        if (!prefixName || index === -1 || first) {
-            first ? schemaList.unshift(schema) : schemaList.push(schema);
-            schemaRef.value = schemaList;
-            return;
-        }
-
-        if (index !== -1) {
-            schemaList.splice(index + 1, 0, schema);
-        }
-
-        schemaRef.value = schemaList;
-    }
-
-    /**
-     * 检验有效的属性值
-     */
-     async function validate(nameList: (string | number)[]) {
-        return await unref(formElRef)?.validate(nameList);
-    }
-
-    /**
-     * 返回有效的区域
-     */
-    async function validateFields(nameList: (string | number)[]) {
-        return unref(formElRef)?.validateFields(nameList);
-    }
-
-    function itemIsDateType(key: string) {
-        return unref(getSchema).some((item) => {
-          return item.name === key ? ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker', 'RangePicker'].includes(item.component) : false;
-        });
-    }
-
-
-    return {
-        updateSchema,
-        resetSchema,
-        clearValidate,
-        resetForms,
-        removeFormByName,
-        setFormValues,
-        appendFormItems,
-        getFormValues,
-        validate,
-        validateFields
-    }
-}

package/src/components/forms/src/hooks/useFormValue.ts

@@ -1,49 +0,0 @@
-import { Recordable } from "@dt-frames/core";
-import { getCurrentInstance, Ref, reactive, readonly, watchEffect, computed, nextTick, toRaw, unref } from "vue";
-import { isEqual } from 'lodash-es'
-
-export function useFormValue<T extends Recordable>(
-    props: T,
-    key: keyof T = 'value',
-    changeEvent = 'change',
-    emitData?: Ref<any[]>
-) {
-    const instance = getCurrentInstance()
-    const emit = instance?.emit
-
-    const innerState = reactive({
-        value: props[key]
-    })
-
-    const defaultState = readonly(innerState)
-
-    const setState = ( val: any ) => {
-        innerState.value = val
-
-        nextTick(() => {
-            emit?.(changeEvent, val, ...(toRaw(unref(emitData)) || []))
-        })
-    }
-
-    watchEffect(() => {
-        innerState.value = props[key]
-    })
-
-    const state: any = computed({
-        get() {
-            return innerState.value
-        },
-        set(value) {
-            if( isEqual(value, defaultState.value) ) return
-
-            innerState.value = value as T[keyof T]
-
-            nextTick(() => {
-                emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []))
-            })
-
-        }
-    })
-
-    return [state, setState, defaultState]
-}

package/src/components/forms/src/hooks/useFormValues.ts

@@ -1,131 +0,0 @@
-/** =========================================================
- *  处理表单的值
- *  ==========================================================*/
-import { dateFormat, isFunction, isObject, isString, Recordable } from "@dt-frames/core";
-import { isArray } from "@vue/shared";
-import { set } from "lodash-es";
-import dayjs from "dayjs";
-import { ComputedRef, Ref, unref } from "vue";
-import { FormProps, FormSchema } from "../types/form.type";
-import { datePickerType } from "./helper";
-
-type FormValueOptions = {
-    getProps: ComputedRef<FormProps>
-    defaultValue: Ref<any>
-    getSchema: ComputedRef<FormSchema[]>
-    formModel: Recordable
-}
-
-export function useFormValues({
-    defaultValue,
-    getSchema,
-    formModel,
-    getProps
-}: FormValueOptions) {
-
-    /**
-     * 可以动态获取formModel的值
-     */
-    function handleFormValues(values: Recordable) {
-        if( !isObject(values) ) return { }
-
-        const res: Recordable = {}
-
-        for(let [key, value] of Object.entries(values)) {
-            if( !key || (Array.isArray(value) && value.length === 0) || isFunction(value) ) {
-                continue
-            }
-
-            /**
-             *  TODO 这里需要对时间进行处理
-             */ 
-
-
-            if ( isString(value) ) {
-                value = value.trim();
-            }
-
-            set(res, key, value)
-        }
-
-        return res
-    }
-
-
-    /**
-     * 设置默认值
-     * 设置初始化的formModel值
-    */
-    function initDefault() {
-        const schema = unref( getSchema )
-        const obj: Recordable = {}
-
-        schema.forEach( item => {
-            
-            const { props = {}, name, component } = item
-
-            let { defaultValue, mode, format, treeCheckable } = isFunction( props ) ? props() : props
-            const names: string[] = isString(name) ? [ name ] : name
-
-            if( defaultValue !== null && defaultValue !== undefined ) {
-
-                // 处理时间
-                if( datePickerType.includes(component) ) {
-                    const modeType = {
-                        time: 'YYYY-MM-DD HH:mm:ss',
-                        date: 'YYYY-MM-DD',
-                        month: 'YYYY-MM',
-                        year: 'YYYY'
-                    }
-
-                    const _format = format || ( modeType[mode] ) || modeType.date
-
-                    if ( !isArray(defaultValue) ) {
-                        // 单个时间
-                        obj[names[0]] = dayjs(defaultValue, _format)
-                        formModel[names[0]] = dayjs(defaultValue, _format)
-                    } else {
-                        
-                        // 范围时间
-                        let rangeTimes = defaultValue.reduce(( t, it ) => {
-                            t.push( dayjs(it, _format) )
-                            return t
-                        }, [])
-
-                        obj[names[0]] = rangeTimes
-                        formModel[names[0]] = rangeTimes
-                    }
-                } else {
-                    // 如果names是数组 则代表有多个默认值 如 InputGroup
-                    if( names.length > 1 ) {
-                        names.forEach( ( key, index ) => {
-                            obj[ key ] = defaultValue[ index ]
-                            formModel[ key ] = defaultValue[ index ]
-                        } )
-                    } else {
-                        obj[names[0]] = defaultValue
-                        formModel[names[0]] = defaultValue
-                    }
-                }
-            } else {
-                names.forEach( ( key, index ) => {
-                    let defaultV = null
-                    // 如果为树结构且为多选  或者复选框为多选状态
-                    if( (component === 'TreeSelect' && (mode === 'multiple' || treeCheckable)) || 
-                        (component === 'Select' && mode === 'multiple') ) {
-                        defaultV = []
-                    }
-
-                    formModel[ key ] = obj[ key ] = defaultV
-                } )
-            }
-        } )
-
-        defaultValue.value = obj
-    }
-
-    return {
-        handleFormValues,
-        initDefault
-    }
-}