plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/PlFilter/index.tsx

@@ -1,54 +0,0 @@
-import {designComponent, PropType} from "plain-design-composition";
-import React from "react";
-import {FilterConfig, iFilterTargetOption} from "./FilterConfig";
-import PlSelect from "../PlSelect";
-import PlSelectOption from "../PlSelectOption";
-import PlInputGroup from "../PlInputGroup";
-import PlButton from "../PlButton";
-import './filter.scss'
-
-export const PlFilter = designComponent({
-    inheritPropsType: PlInputGroup,
-    props: {
-        fto: {type: Object as PropType<iFilterTargetOption>},
-        hideSearchButton: {type: Boolean}
-    },
-    slots: ['prepend', 'append'],
-    emits: {
-        onConfirm: () => true,
-        onHandlerNameChange: (handlerName: string) => true,
-    },
-    setup: ({props, slots, event: {emit}}) => {
-
-        const onHandlerNameChange = (handlerName: string) => {
-            if (!props.fto) {return}
-            props.fto.option.value = null
-            emit.onHandlerNameChange(handlerName)
-        }
-
-        return () => {
-            if (!props.fto) {return null}
-            return (
-                <PlInputGroup className="pl-filter">
-                    {slots.prepend()}
-                    <PlSelect
-                        v-model={props.fto.option.handlerName}
-                        inputProps={{width: 80, clearIcon: false}}
-                        filterable={false}
-                        onChange={onHandlerNameChange as any}
-                        className="pl-filter-ele"
-                    >
-                        {Object.values(props.fto.filter.handlers).map((handler, index) => <PlSelectOption key={index} label={handler.handlerName} val={handler.handlerName}/>)}
-                    </PlSelect>
-                    <React.Fragment key={props.fto.option.filterName + props.fto.option.handlerName}>
-                        {FilterConfig.getHandler(props.fto.option.filterName, props.fto.option.handlerName)?.render(props.fto, emit.onConfirm)}
-                        {!props.hideSearchButton && <PlButton label="搜索" onClick={emit.onConfirm} className="pl-filter-ele"/>}
-                    </React.Fragment>
-                    {slots.append()}
-                </PlInputGroup>
-            )
-        }
-    },
-})
-
-export default PlFilter

package/src/packages/PlForm/async.validator.utils.ts

@@ -1,35 +0,0 @@
-import {RuleType, ValidateOption, ValidateSource} from "async-validator";
-
-export interface iRules {
-    [field: string]: iRuleItem | iRuleItem[];
-}
-
-export interface iRuleItem {
-    type?: RuleType; // default type is 'string'
-    required?: boolean;
-    pattern?: any;
-    min?: number; // Range of type 'string' and 'array'
-    max?: number; // Range of type 'string' and 'array'
-    len?: number; // Length of type 'string' and 'array'
-    enum?: Array<string | number | boolean | null | undefined>; // possible values of type 'enum'
-    whitespace?: boolean;
-    fields?: iRules; // ignore when without required
-    options?: ValidateOption;
-    defaultField?: iRuleItem; // 'object' or 'array' containing validation rules
-    transform?: (value: any, source: any) => any;
-    message?: string | (() => string);
-    asyncValidator?: (
-        rule: iRules,
-        value: any,
-        callback: (error: string | string[] | void) => void,
-        source: ValidateSource,
-        options: ValidateOption,
-    ) => void | Promise<void>;
-    validator?: (
-        rule: iRules,
-        value: any,
-        callback: (error: string | string[] | void) => void,
-        source: ValidateSource,
-        options: ValidateOption,
-    ) => boolean | Error | Error[];
-}

package/src/packages/PlForm/form.scss

@@ -1,255 +0,0 @@
-@include theme {
-  .pl-form {
-    box-sizing: border-box;
-
-    .pl-form-item {
-      display: inline-flex;
-      margin-bottom: 20px;
-      box-sizing: border-box;
-
-      .pl-form-item-label {
-        padding-right: 8px;
-
-        .pl-tooltip-reference {
-          display: block;
-        }
-      }
-
-      .pl-form-item-body {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        position: relative;
-
-        .pl-form-item-message {
-          position: absolute;
-          top: 100%;
-          left: 0;
-          color: $colorError;
-          font-size: 12px;
-          line-height: normal;
-          padding: 1px 0;
-
-          .pl-icon + span {
-            margin-left: 4px;
-          }
-        }
-      }
-
-      &.pl-form-item-block {
-        display: flex;
-      }
-
-      &.pl-form-item-required {
-        .pl-form-item-required-dot {
-          color: $colorError;
-          position: relative;
-          top: 2px;
-          right: 12px;
-          width: 0;
-          display: inline-block;
-        }
-      }
-
-      /*label align*/
-      &.pl-form-item-label-align-left {
-        .pl-form-item-label {
-          text-align: left
-        }
-      }
-
-      &.pl-form-item-label-align-center {
-        .pl-form-item-label {
-          text-align: center
-        }
-      }
-
-      &.pl-form-item-label-align-right {
-        .pl-form-item-label {
-          text-align: right
-        }
-      }
-
-      /*content align*/
-      &.pl-form-item-content-align-flex-start {
-        .pl-form-item-body {
-          justify-content: flex-start;
-        }
-      }
-
-      &.pl-form-item-content-align-flex-end {
-        .pl-form-item-body {
-          justify-content: flex-end;
-        }
-      }
-
-      &.pl-form-item-content-align-center {
-        .pl-form-item-body {
-          justify-content: center;
-        }
-      }
-
-      &.pl-form-item-content-align-space-between {
-        .pl-form-item-body {
-          justify-content: space-between;
-        }
-      }
-
-      &.pl-form-item-content-align-space-around {
-        .pl-form-item-body {
-          justify-content: space-around;
-        }
-      }
-
-      &.pl-form-item-content-align-space-evenly {
-        .pl-form-item-body {
-          justify-content: space-evenly;
-        }
-      }
-
-      /*line-height*/
-      @include sizeMixin(form-item) {
-        line-height: $value;
-        .pl-form-item-body {
-          min-height: $value;
-        }
-      }
-
-      &.pl-form-item-size-large {
-        font-size: 16px;
-      }
-
-      &.pl-form-item-size-normal {
-        font-size: 14px;
-      }
-
-      &.pl-form-item-size-mini {
-        font-size: 12px;
-      }
-    }
-
-    &:not(.pl-form-vertical-label) {
-      .pl-form-item {
-        flex-direction: row;
-      }
-    }
-
-    &.pl-form-vertical-label {
-      .pl-form-item {
-        flex-direction: column;
-
-        .pl-form-item-label {
-          text-align: left;
-          padding-left: 0 !important;
-        }
-      }
-    }
-
-    &.pl-form-column-1 {
-      display: inline-flex;
-      flex-direction: column;
-
-      .pl-form-item {
-        justify-content: flex-end;
-        position: relative;
-
-        .pl-form-item-label {
-          flex: 1;
-          white-space: nowrap;
-        }
-      }
-
-      &.pl-form-center-when-single-column {
-        width: 100% !important;
-        align-items: center;
-
-        &:not(.pl-form-vertical-label) {
-          .pl-form-item {
-            .pl-form-item-label {
-              position: absolute;
-              right: 100%;
-              top: 0;
-              white-space: nowrap;
-            }
-
-            .pl-form-item-body {
-              .pl-form-item-message {
-                left: 100% !important;
-                top: 0 !important;
-                white-space: nowrap;
-                padding-left: 8px;
-              }
-            }
-
-            /*line-height*/
-            @include sizeMixin(form-item) {
-              .pl-form-item-message {
-                line-height: $value !important;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &:not(.pl-form-column-1) {
-      .pl-form-item-label {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .pl-form {
-    .pl-form-item-body {
-
-      .pl-slider, .pl-toggle {
-        align-self: center;
-      }
-
-      /*input*/
-      & > .pl-input, & > .pl-textarea {
-        flex: 1;
-        flex-shrink: 0;
-
-        .pl-input-inner, .pl-textarea-inner {
-          width: 100%;
-        }
-
-        &.pl-input-custom {
-          .pl-input-inner {
-            width: 100% !important;
-
-            input {
-              width: 100% !important;
-            }
-          }
-        }
-      }
-
-      /*button*/
-      & > .pl-button + .pl-button {
-        margin-left: 8px;
-      }
-
-      & > .pl-button-group {
-        & > .pl-button + .pl-button {
-          margin-left: 0;
-        }
-      }
-
-      /*checkbox and radio*/
-      & > .pl-checkbox-group, & > .pl-radio-group {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: inherit;
-
-        & > * {
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
-}

package/src/packages/PlForm/form.utils.tsx

@@ -1,19 +0,0 @@
-export enum FormLabelAlign {
-    left = 'left',
-    center = 'center',
-    right = 'right',
-}
-
-export enum FormContentAlign {
-    'flex-start' = 'flex-start',
-    'flex-end' = 'flex-end',
-    'center' = 'center',
-    'space-around' = 'space-around',
-    'space-between' = 'space-between',
-    'space-evenly' = 'space-evenly',
-}
-
-export enum FormValidateMode {
-    form = 'form',
-    table = 'table',
-}

package/src/packages/PlForm/form.validate.tsx

@@ -1,320 +0,0 @@
-import Schema from 'async-validator'
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {defer} from "plain-utils/utils/defer";
-import {PlainObject} from 'plain-utils/utils/event';
-import {iRuleItem} from "./async.validator.utils";
-
-const logError = (msg: string) => {console.error(`PlForm:${msg}`)}
-
-/**
- * 触发校验的动作类型
- * @author  韦胜健
- * @date    2021/5/30 12:27
- */
-export enum FormValidateTrigger {
-    change = 'change',
-    blur = 'blur',
-}
-
-/**
- * 校验器函数validator的类型
- * @author  韦胜健
- * @date    2021/5/30 12:25
- */
-export type tFormRuleValidator = (val: any, row: PlainObject, rule: tFormRuleItem) => tFormRuleValidatorResult | Promise<tFormRuleValidatorResult>;
-
-/**
- * 校验器函数validator函数的返回结果类型
- * @author  韦胜健
- * @date    2021/5/30 12:26
- */
-export type tFormRuleValidatorResult = string | null | undefined | void
-
-/**
- * 校验的结果对象类型
- * @author  韦胜健
- * @date    2021/5/30 12:27
- */
-export type tFormRuleItem = Omit<iRuleItem, 'required'> & {
-    required?: boolean | tFormRuleValidator,
-
-    trigger?: string,
-    label?: string,
-    field?: string | string[],
-}
-
-/**
- * PlFormItem组件，从props中获取的校验相关属性类型
- * @author  韦胜健
- * @date    2021/5/30 12:27
- */
-export interface iFormItemPropRules {
-    label?: string,
-    field?: string | string[]
-    required?: boolean | tFormRuleValidator,
-    rules?: tFormRuleItem | tFormRuleItem[]
-}
-
-/**
- * PlForm组件props.rules的类型
- * @author  韦胜健
- * @date    2021/5/30 18:55
- */
-export type tFormPropRules = Record<string, tFormRuleItem | tFormRuleItem[]>
-
-/**
- * 关联校验字段
- * @author  韦胜健
- * @date    2020/12/28 12:07
- */
-export type FormAssociateFields = Record<string, string | string[]>
-
-export type FormValidateError = {
-    field: string,
-    message: string,
-    label: string,
-}
-
-export const FormValidateUtils = {
-    getFieldArray: (field: string | string[] | undefined): string[] => {
-        if (!field) return []
-        return Array.isArray(field) ? [...field] : [field]
-    },
-    getRuleArray: (rule: tFormRuleItem | tFormRuleItem[]): tFormRuleItem[] => {
-        return deepcopy(Array.isArray(rule) ? rule : [rule])
-    },
-    getValueByField(field: string, formData: Record<string, any> | undefined | null, transform?: (val: any, value: any) => any) {
-        if (!formData) {
-            return null
-        }
-        let val: any;
-        if (field.indexOf('.') === -1) {
-            val = formData[field]
-        } else {
-            const fields = field.split('.')
-            let index = 0, len = fields.length
-            let value = formData[fields[index]]
-
-            while (index < len - 1 && value != null) {
-                value = value[fields[++index]]
-            }
-            val = index == len - 1 ? value : null
-        }
-        return !transform ? val : transform(val, formData)
-    },
-}
-
-/**
- * 根据 PlForm以及PlFormItem接收到的
- * @author  韦胜健
- * @date    2021/5/30 13:18
- */
-export function getFormRuleData({formProps, formItems, requiredMessage}: {
-    formProps: { rules?: tFormPropRules, },
-    formItems: { value: { props: iFormItemPropRules }[] },
-    requiredMessage: string,
-}) {
-
-    type StateRules = Omit<tFormRuleItem, 'field'> & { field: string | string[] }
-
-    const state = {
-        /*所有的校验规则*/
-        stateRules: [] as StateRules[],
-        /*字段转显示文本*/
-        fieldToLabel: {} as Record<string, string | undefined>,
-        /*用于判断字段是否必填*/
-        fieldRequired: {} as Record<string, boolean | undefined>,
-    }
-
-    const utils = {
-        /*判断某个字段是否有必填标识*/
-        isRequired: (field?: string | string[]) => {
-            if (!field) {return false}
-            const fields = [...FormValidateUtils.getFieldArray(field)]
-            return fields.some(f => !!state.fieldRequired[f])
-        },
-        /*添加一个stateRule*/
-        addStateRule: (stateRule: StateRules) => {
-            state.stateRules.push(stateRule)
-        },
-        /*添加一个label*/
-        addLabel: (field?: string | string[], label?: string) => {
-            if (!field || !label) {return}
-            FormValidateUtils.getFieldArray(field).forEach((f) => {
-                state.fieldToLabel[f] = label
-            })
-        },
-        /*添加一个required*/
-        addRequired: (field: string | string[], required: boolean | tFormRuleValidator | undefined) => {
-            FormValidateUtils.getFieldArray(field).forEach(f => {
-                if (required == null) {return}
-                state.fieldRequired[f] = typeof required !== "function" && !!required
-            })
-        }
-    }
-
-    if (!!formProps.rules) {
-        Object.entries(formProps.rules).forEach(([f, r]) => {
-            FormValidateUtils.getRuleArray(r!).forEach((rule) => {
-                utils.addLabel(rule.field || f, rule.label)
-                utils.addRequired(rule.field || f, rule.required)
-                utils.addStateRule({
-                    ...rule,
-                    field: rule.field || f,
-                })
-            })
-        })
-    }
-
-    formItems.value.forEach(({props: {label, field, required, rules}}) => {
-        utils.addLabel(field, label)
-
-        if (required) {
-            if (!field) {
-                /*如果没有field，但是设置了required，提示警告信息*/
-                console.error({label, field, required, rules})
-                logError('PlFormItem.props.field is required when PlForm.props.required is working!')
-            } else {
-                utils.addRequired(field, required)
-                const requiredRule: StateRules = {
-                    field,
-                    required,
-                }
-                utils.addStateRule(requiredRule)
-            }
-        }
-        if (rules) {
-            FormValidateUtils.getRuleArray(rules).forEach(r => {
-                if (!!r.label) {utils.addLabel(r.field || field, r.label)}
-
-                if (!r.field) {
-                    if (!field) {
-                        /*如果没有field，但是设置了rule，提示警告信息*/
-                        console.error(r)
-                        logError('PlFormItem.props.field is required when PlForm.props.rules[].field is working!')
-                    } else {
-                        r.field = field
-                        if (r.required) {utils.addRequired(r.field || field, r.required)}
-                    }
-                }
-                !!r.field && utils.addStateRule({
-                    ...r,
-                    field: r.field!,
-                })
-            })
-        }
-    })
-
-    const rules = state.stateRules.reduce((prev, rule) => {
-        const {field, trigger, label, required, message, transform: prevTransform, ...leftRule} = rule
-
-        const errorMessage = (typeof message === "function" ? message() : message) || requiredMessage
-
-        const requiredValidation: iRuleItem["asyncValidator"] = async (rule, value, callback, source) => {
-            if (typeof required === "function") {return callback(await required(value, source, rule) || undefined)}
-            if (value == null) {return callback(errorMessage)}
-            if (typeof value === "string" && !value.trim()) {return callback(errorMessage)}
-            if (Array.isArray(value) && value.length === 0) {return callback(errorMessage)}
-            return callback()
-        }
-
-        FormValidateUtils.getFieldArray(field).forEach(f => {
-            if (!prev[f]) {prev[f] = []}
-            let transform: any = f.indexOf('.') === -1 ? prevTransform : (val: any, source: any) => FormValidateUtils.getValueByField(f, source, prevTransform)
-
-            if (required) {
-                // console.log(f, 'asyncValidator')
-                prev[f].push({trigger, transform, asyncValidator: requiredValidation})
-            }
-            if (Object.keys(leftRule).length > 0) {
-                prev[f].push({
-                    ...leftRule,
-                    message,
-                    trigger,
-                    transform,
-                })
-            }
-        })
-        return prev
-    }, {} as Record<string, (iRuleItem & { trigger?: string })[]>)
-
-    const methods = {
-        getRules({field, trigger, associateFields}: {
-            field: string | string[],
-            trigger: FormValidateTrigger | undefined,
-            associateFields?: FormAssociateFields,
-        }) {
-            const fs = (() => {
-                const fields = FormValidateUtils.getFieldArray(field)
-                !!associateFields && fields.forEach((f) => {
-                    if (associateFields[f]) {
-                        fields.push(...FormValidateUtils.getFieldArray(associateFields[f]))
-                    }
-                })
-                return fields
-            })();
-
-            const fitRuleList = [] as (iRuleItem & { trigger?: string })[]
-            const fitRuleMap = {} as Record<string, (iRuleItem & { trigger?: string })[]>
-            Object.entries(rules).forEach(([f, rs]) => {
-                if (fs.indexOf(f) > -1) {
-                    if (!fitRuleMap[f]) {fitRuleMap[f] = []}
-                    const fitRules = !trigger ? rs : rs.filter(i => (i.trigger || FormValidateTrigger.change) === trigger)
-                    fitRuleMap[f]!.push(...fitRules)
-                    fitRuleList.push(...fitRules)
-                }
-            })
-            return {
-                fitRuleList,
-                fitRuleMap,
-            }
-        },
-        validateField: (
-            {
-                rules,
-                allErrors,
-                formData,
-            }: {
-                rules: Record<string, iRuleItem[]>,
-                allErrors: FormValidateError[],
-                formData: any,
-            }) => {
-
-            const validation = new Schema(rules as any)
-            const dfd = defer<FormValidateError[]>()
-            // console.log('fitRuleMap', fitRuleMap, rules)
-            const ruleKeys = Object.keys(rules)
-            validation.validate(formData, undefined, (errors) => {
-                const newErrors = allErrors.filter(e => ruleKeys.indexOf(e.field) === -1)
-                dfd.resolve([...newErrors, ...errors || []].map(i => ({
-                    ...i,
-                    label: state.fieldToLabel[i.field]!,
-                })))
-            }).then()
-
-            return dfd.promise
-        },
-        validate: (formData: any) => {
-            const validation = new Schema(rules as any)
-            const dfd = defer<FormValidateError[]>()
-            validation.validate(formData, undefined, (errors) => {
-                dfd.resolve((errors || []).map(i => ({
-                    ...i,
-                    label: state.fieldToLabel[i.field]!
-                })))
-            }).then()
-            return dfd.promise
-        },
-    }
-
-    return {
-        utils,
-        rules,
-        ...state,
-        methods,
-    }
-}
-
-export type tFormRuleData = ReturnType<typeof getFormRuleData>
-
-