@blueking/bkui-form 1.0.1-beta.1 → 1.0.1-beta.3

package/esm/core/schema.ts.js

@@ -0,0 +1,302 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { isObj, hasOwnProperty, valueType, initializationValue } from '../util/index.ts.js';
+import registry from './register.ts.js';
+import { resolveComponent } from 'vue';
+class Schema {
+    static resolveRef() {}
+    static resolveDependencies() {}
+    static resolveAdditionalProperties() {}
+    static resolveSchema(schema) {
+        if (!isObj(schema)) return {};
+        if (hasOwnProperty(schema, 'allOf')) {
+        // schema = this.resolveAllOf(schema);
+        }
+        if (hasOwnProperty(schema, '$ref')) {
+        // schema = this.resolveRef(schema)
+        }
+        return schema;
+    }
+    // 获取Schema字段默认值
+    static getSchemaDefaultValue(_schema) {
+        const schema = isObj(_schema) ? _schema : {};
+        switch(this.getSchemaType(schema)){
+            case 'null':
+                return null;
+            case 'object':
+                return Object.keys(schema.properties || {}).reduce((pre, key)=>{
+                    var _schema_properties;
+                    const defaultValue = this.getSchemaDefaultValue((_schema_properties = schema.properties) === null || _schema_properties === void 0 ? void 0 : _schema_properties[key]);
+                    pre[key] = defaultValue;
+                    return pre;
+                }, {});
+            case 'array':
+                if (schema.default && Array.isArray(schema.default)) {
+                    return schema.default;
+                }
+                return Array.isArray(schema.items) ? schema.items.map((item)=>this.getSchemaDefaultValue(item)) : [];
+        }
+        return schema.default !== undefined ? schema.default : initializationValue(schema.type || 'any');
+    }
+    static getSchemaType(schema) {
+        const { type } = schema;
+        if (!type && schema.const) {
+            return valueType(schema.const);
+        }
+        if (!type && schema.enum) {
+            return 'string';
+        }
+        if (!type && schema.items) {
+            return 'array';
+        }
+        return type;
+    }
+    static getUiProps(props, schema) {
+        if (!props || !props.startsWith('ui:')) {
+            console.warn('ui props must start with ui:');
+        }
+        return schema[props] || {};
+    }
+    static getSchemaField(schema) {
+        var _schema_oneOf, _schema_anyOf;
+        // 自定义Field组件
+        const field = schema['ui:field'];
+        if (field) {
+            return field;
+        }
+        // oneOf field
+        if ((_schema_oneOf = schema.oneOf) === null || _schema_oneOf === void 0 ? void 0 : _schema_oneOf.length) {
+            return {
+                name: registry.getField('composition'),
+                composition: 'oneOf'
+            };
+        }
+        // anyOf field
+        if ((_schema_anyOf = schema.anyOf) === null || _schema_anyOf === void 0 ? void 0 : _schema_anyOf.length) {
+            return {
+                name: registry.getField('composition'),
+                composition: 'anyOf'
+            };
+        }
+        // default field
+        const defaultField = registry.getField(this.getSchemaType(schema));
+        if (defaultField) {
+            return {
+                name: defaultField
+            };
+        }
+        return {
+            name: null
+        };
+    }
+    static isMultiSelect(schema) {
+        if (!schema.uniqueItems || !schema.items) {
+            return false;
+        }
+        return Array.isArray(schema.items.enum);
+    }
+    static isTupleArray(schema) {
+        var _schema_items;
+        return Array.isArray(schema.items) && ((_schema_items = schema.items) === null || _schema_items === void 0 ? void 0 : _schema_items.length) > 0 && schema.items.every((item)=>isObj(item));
+    }
+    // 是否是自定义数组类型控件（如：label）
+    static isCustomArrayWidget(schema) {
+        var _schema_uicomponent;
+        const com = (_schema_uicomponent = schema['ui:component']) === null || _schema_uicomponent === void 0 ? void 0 : _schema_uicomponent.name;
+        return schema.type === 'array' && com;
+    }
+    static resolveFormComponent(com) {
+        if (typeof com === 'string' && com) {
+            return resolveComponent(com);
+        }
+        return com;
+    }
+    static getGroupWrap(schema) {
+        const _ref = schema['ui:group'] || {}, { name } = _ref, groupVnode = _object_without_properties(_ref, [
+            "name"
+        ]);
+        return _object_spread_props(_object_spread({}, groupVnode), {
+            name: this.resolveFormComponent(registry.getComponent(name) || name || registry.getComponent('group'))
+        });
+    }
+    static getUiComponent(schema) {
+        const _ref = schema['ui:component'] || {}, { name } = _ref, vnodeData = _object_without_properties(_ref, [
+            "name"
+        ]);
+        return _object_spread({
+            name: this.resolveFormComponent(registry.getComponent(name) || name)
+        }, vnodeData);
+    }
+    static getDefaultWidget(schema) {
+        var _schema_oneOf, _schema_oneOf1, _schema_anyOf, _schema_anyOf1;
+        const type = this.getSchemaType(schema);
+        // 默认转换策略
+        let defaultComponent = null;
+        if (type === 'string' && Array.isArray(schema.enum)) {
+            // string类型的枚举数据默认用select组件
+            defaultComponent = registry.getComponent('select');
+        }
+        if (type === 'array' && Schema.isMultiSelect(schema)) {
+            // array类型多选默认用checkbox组件
+            defaultComponent = registry.getComponent('checkbox');
+        }
+        if (typeof type !== 'object' && (((_schema_oneOf = schema.oneOf) === null || _schema_oneOf === void 0 ? void 0 : _schema_oneOf.length) && ((_schema_oneOf1 = schema.oneOf) === null || _schema_oneOf1 === void 0 ? void 0 : _schema_oneOf1.every((item)=>item.const)) || ((_schema_anyOf = schema.anyOf) === null || _schema_anyOf === void 0 ? void 0 : _schema_anyOf.length) && ((_schema_anyOf1 = schema.anyOf) === null || _schema_anyOf1 === void 0 ? void 0 : _schema_anyOf1.every((item)=>item.const)))) {
+            defaultComponent = registry.getComponent('select');
+        }
+        if (defaultComponent) {
+            return defaultComponent;
+        }
+        // 找不到对应组件就使用默认type对应的widget
+        const typeComponentMap = {
+            string: 'input',
+            number: 'input',
+            integer: 'input',
+            boolean: 'switcher',
+            null: ''
+        };
+        const name = typeComponentMap[type];
+        const defaultWidget = registry.getComponent(name) || registry.getBaseWidget(name);
+        if (defaultWidget) {
+            return defaultWidget;
+        }
+        console.warn(`未注册类型${type}对应的默认表单项`);
+        return null;
+    }
+    static isRequired(schema, name) {
+        return Array.isArray(schema.required) && schema.required.includes(name);
+    }
+    static getUiOptions(schema) {
+        const options = _object_spread({
+            showTitle: true,
+            label: schema.title,
+            desc: schema.description,
+            minLength: schema.minLength,
+            maxLength: schema.maxLength
+        }, schema['ui:props'] || {});
+        return _object_spread_props(_object_spread({}, options), {
+            description: options.desc || options.description,
+            // 0.1 兼容formItem设置 labelWidth 0 不生效问题
+            labelWidth: options.showTitle ? options.labelWidth : 0.1
+        });
+    }
+    // 当前属性是否被依赖
+    static getDependencies(schema, name) {
+        return Object.entries(schema.dependencies || {}).find((data)=>Array.isArray(data[1]) && data[1].includes(name));
+    }
+    static resolveDefaultDatasource(schema) {
+        var _schema_uicomponent, _schema_items;
+        if ((_schema_uicomponent = schema['ui:component']) === null || _schema_uicomponent === void 0 ? void 0 : _schema_uicomponent.datasource) {
+            return schema['ui:component'].datasource;
+        }
+        if (Array.isArray(schema.enum)) {
+            const data = schema.enum;
+            return data.map((value)=>({
+                    value,
+                    label: value
+                }));
+        }
+        if (Array.isArray((_schema_items = schema.items) === null || _schema_items === void 0 ? void 0 : _schema_items.enum)) {
+            const data = schema.items.enum || [];
+            return data.map((value)=>({
+                    value,
+                    label: value
+                }));
+        }
+        if (typeof schema.type !== 'object' && schema.oneOf && schema.oneOf.every((item)=>item.const)) {
+            const data = schema.oneOf.map((item)=>({
+                    value: item.const,
+                    label: item.title || item.const
+                }));
+            return data;
+        }
+        if (typeof schema.type !== 'object' && schema.anyOf && schema.anyOf.every((item)=>item.const)) {
+            const data = schema.anyOf.map((item)=>({
+                    value: item.const,
+                    label: item.title || item.const
+                }));
+            return data;
+        }
+    }
+    constructor(rootSchema){
+        Schema.rootSchema = rootSchema;
+    }
+}
+_define_property(Schema, "rootSchema", void 0);
+export { Schema as default };

package/esm/core/validator.ts.js

@@ -0,0 +1,248 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+import { hasOwnProperty, initializationValue, isRegExp } from '../util/index.ts.js';
+import { executeExpression, isExpression } from './expression.ts.js';
+import Ajv from '../node_modules/ajv/dist/ajv.js';
+import addFormats from '../node_modules/ajv-formats/dist/index.js';
+import localizeZh from '../node_modules/ajv-i18n/localize/zh/index.js';
+import widgetTree from './widgetTree.ts.js';
+export const ajv = new Ajv({
+    strict: false
+});
+addFormats(ajv);
+// 校验器 key
+const VALIDATOR = 'validator';
+const OWN_RULE_PROPERTY = 'ui:rules';
+const DEBUG_PREFIX = '[bk-schema-form-validator]';
+// 默认规则
+export const DEFAULT_RULES = {
+    required: {
+        message: '必填项',
+        validator: '{{ $self.value !== \'\' }}'
+    }
+};
+const throwErr = (err)=>{
+    throw new Error(`${DEBUG_PREFIX} ${err}`);
+};
+const globalRules = new Map();
+/**
+ * 注册全局校验规则
+ * @param rules
+ */ export const registryGlobalRules = (rules)=>{
+    try {
+        if (!rules) return;
+        if ((rules === null || rules === void 0 ? void 0 : rules.constructor) !== Object) throwErr('global rules must be an object');
+        Object.keys(rules).forEach((ruleName)=>{
+            const rule = rules[ruleName];
+            if (!hasOwnProperty(rule, VALIDATOR)) throwErr(`'${ruleName}' rule must have a validator property`);
+            const validator = rule[VALIDATOR];
+            if (!(isExpression(validator) || isRegExp(validator) || (validator === null || validator === void 0 ? void 0 : validator.constructor) === Function)) throwErr(`'${ruleName}' must be one of expression or regexp or function`);
+            globalRules.set(ruleName, rule);
+        });
+    } catch (error) {
+        throwErr(error);
+    }
+};
+/**
+ * 校验规则
+ */ const validate = (rule, instance)=>{
+    let theRule = rule;
+    if (typeof rule === 'string') {
+        theRule = globalRules.get(rule);
+        if (!theRule) throwErr(`'${rule} is not a valid global rule, you can registry it to global rules node or use form item own custom rules`);
+    }
+    const { validator, message } = theRule;
+    let valid = true;
+    if (isExpression(validator)) {
+        valid = executeExpression(validator, instance);
+    } else if (typeof validator === 'function') {
+        valid = validator(instance);
+    // eslint-disable-next-line no-eval
+    } else if (eval(validator) instanceof RegExp) {
+        // eslint-disable-next-line no-eval
+        valid = new RegExp(eval(validator)).test(instance.value);
+    }
+    return {
+        valid,
+        message
+    };
+};
+// 设置表单项校验状态
+export const setWidgetErrorTips = (path, isError, errorMsg)=>{
+    const formItem = widgetTree.widgetMap[path];
+    const { instance } = formItem;
+    if (formItem.type === 'node') {
+        instance === null || instance === void 0 ? void 0 : instance.setState('error', true);
+        instance === null || instance === void 0 ? void 0 : instance.setErrorTips(errorMsg);
+    }
+    // 如果实例属于某个组，则沿着 path 向上查找，如果找到组且组的 verifiable 设置为 true，则通过实例的校验状态改变组的校验状态
+    // submit 时校验，change 时去掉错误
+    const widgetPaths = path.split('.');
+    const fieldTitleBreadcrumb = [];
+    widgetPaths.forEach((thePath, thePathIndex)=>{
+        var _theWidget_instance;
+        const currentPaths = widgetPaths.slice(0, widgetPaths.length - thePathIndex);
+        const widgetPath = currentPaths.join('.');
+        const theWidget = widgetTree.widgetMap[widgetPath];
+        // 判断path是否是数组索引
+        const isIndex = theWidget.instance.schema.type === 'array' || !theWidget.instance.schema.title;
+        fieldTitleBreadcrumb.push(isIndex ? currentPaths.pop() : theWidget.instance.schema.title);
+        if (((_theWidget_instance = theWidget.instance) === null || _theWidget_instance === void 0 ? void 0 : _theWidget_instance.verifiable) && theWidget.type === 'group') {
+            if (isError) {
+                const groupErrors = `${fieldTitleBreadcrumb.reverse().join('-')}: ${errorMsg}`;
+                theWidget.instance.setGroupErrorTips(path, groupErrors);
+            } else {
+                theWidget.instance.removeGroupErrorTips(path);
+            }
+        }
+    });
+};
+/**
+ * 校验单个表单项
+ * @param path 字段路径
+ */ export const validateFormItem = (path)=>{
+    var _instance_schema;
+    const formItem = widgetTree.widgetMap[path];
+    if (!formItem) return {
+        result: true,
+        message: '',
+        path: ''
+    };
+    const { instance } = formItem;
+    // 清空上一次状态
+    if (formItem.type === 'group') {
+        instance === null || instance === void 0 ? void 0 : instance.clearGroupErrorTips();
+    } else {
+        instance === null || instance === void 0 ? void 0 : instance.setState('error', false);
+        instance === null || instance === void 0 ? void 0 : instance.setErrorTips('');
+        // 清空所在组错误信息
+        const widgetPaths = path.split('.');
+        widgetPaths.forEach((thePath, thePathIndex)=>{
+            var _theWidget_instance;
+            const currentPaths = widgetPaths.slice(0, widgetPaths.length - thePathIndex).join('.');
+            const theWidget = widgetTree.widgetMap[currentPaths];
+            if (((_theWidget_instance = theWidget.instance) === null || _theWidget_instance === void 0 ? void 0 : _theWidget_instance.verifiable) && theWidget.type === 'group') {
+                theWidget.instance.removeGroupErrorTips(path);
+            }
+        });
+    }
+    // json schema 规则校验
+    const ownSchema = instance.schema;
+    const schemaValidate = ajv.compile(ownSchema);
+    const value = instance.value === undefined ? initializationValue(ownSchema.type, {
+        integer: 0,
+        number: 0
+    }) : instance.value;
+    const schemaValid = schemaValidate(value);
+    if (!schemaValid) {
+        localizeZh(schemaValidate.errors);
+        const errorsText = ajv.errorsText(schemaValidate.errors, {
+            separator: '\n'
+        });
+        setWidgetErrorTips(path, true, errorsText);
+        return {
+            result: false,
+            message: errorsText,
+            path
+        };
+    }
+    // 自定义规则校验
+    const customRules = ((_instance_schema = instance.schema) === null || _instance_schema === void 0 ? void 0 : _instance_schema[OWN_RULE_PROPERTY]) || [];
+    let isError = false;
+    let errorMsg = '';
+    for (const rule of customRules){
+        const result = validate(rule, instance);
+        if (!result.valid) {
+            isError = true;
+            errorMsg = result.message;
+            break;
+        }
+    }
+    if (isError) {
+        setWidgetErrorTips(path, true, errorMsg);
+        return {
+            result: false,
+            message: errorMsg,
+            path
+        };
+    }
+    return {
+        result: true,
+        message: errorMsg,
+        path
+    };
+};
+/**
+ * 校验整个表单
+ */ export const validateForm = ()=>{
+    let isValid = true;
+    Object.keys(widgetTree.widgetMap).forEach((path)=>{
+        var _validateFormItem;
+        if (!((_validateFormItem = validateFormItem(path)) === null || _validateFormItem === void 0 ? void 0 : _validateFormItem.result)) isValid = false;
+    });
+    return isValid;
+};
+/**
+ * 校验表单（抛出具体错误信息）
+ */ export const validateFormWithResult = ()=>new Promise((resolve, reject)=>{
+        const result = Object.keys(widgetTree.widgetMap).filter((path)=>{
+            var _widgetTree_widgetMap_path;
+            return ((_widgetTree_widgetMap_path = widgetTree.widgetMap[path]) === null || _widgetTree_widgetMap_path === void 0 ? void 0 : _widgetTree_widgetMap_path.type) === 'node';
+        }).reduce((pre, path)=>{
+            const validateResult = validateFormItem(path);
+            if (!(validateResult === null || validateResult === void 0 ? void 0 : validateResult.result)) {
+                pre.push(validateResult);
+            }
+            return pre;
+        }, []);
+        if (result.length) {
+            reject(result);
+        } else {
+            resolve([]);
+        }
+    });
+// 校验schema是否正常
+export const validateSchema = function() {
+    var _ref = _async_to_generator(function*(schema) {
+        try {
+            return yield ajv.validateSchema(schema, true);
+        } catch (err) {
+            console.error('Schema不符合规范, 请检查', err);
+            return false;
+        }
+    });
+    return function validateSchema1(schema) {
+        return _ref.apply(this, arguments);
+    };
+}();
+/**
+ * 触发校验
+ * @param path 字段路径
+ */ export const dispatchValidate = (path)=>validateFormItem(path);