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

package/esm/core/layout.ts.js

@@ -0,0 +1,149 @@
+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;
+}
+class Layout {
+    static findLayoutByProp(prop, layout) {
+        let layoutConfig;
+        layout.find((row)=>{
+            layoutConfig = row.find((col)=>col.prop === prop);
+            return layoutConfig;
+        });
+        return layoutConfig;
+    }
+    transformValueToPixel(value) {
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        return value;
+    }
+    parseLayout(config) {
+        const dim = this.getLayoutDimension(config.group);
+        const gridTemplate = this.parseGridTemplate(dim);
+        const group = (config.group || []).map((current)=>{
+            if (!Array.isArray(current)) {
+                console.error(`layout ${JSON.stringify(current)} error, must be a array`);
+                return [];
+            }
+            const parseCurrent = current.map((item)=>{
+                if (typeof item === 'string' || typeof item === 'number') {
+                    return {
+                        prop: item,
+                        item: {
+                            gridArea: item,
+                            overflow: 'hidden'
+                        }
+                    };
+                }
+                if (typeof item === 'object' && Reflect.has(item, 'group')) {
+                    return this.parseLayout(item);
+                }
+                return item;
+            });
+            return parseCurrent;
+        });
+        const gridTemplateAreas = this.parseGridTemplateAreas(dim, group);
+        const layoutConfig = {
+            prop: config.prop || '',
+            item: _object_spread({
+                gridArea: config.prop,
+                overflow: 'hidden'
+            }, config.item),
+            container: _object_spread({
+                display: 'grid',
+                gridTemplateAreas,
+                gridGap: '24px'
+            }, gridTemplate, config.container),
+            group
+        };
+        return layoutConfig;
+    }
+    getLayoutDimension(layout = []) {
+        return layout.reduce((pre, current)=>{
+            if (!Array.isArray(current)) {
+                console.error(`layout ${JSON.stringify(current)} error, must be a array`);
+            }
+            if (current) {
+                pre.columns = Math.max(pre.columns, current.length || 0);
+            }
+            pre.rows += 1;
+            return pre;
+        }, {
+            columns: 0,
+            rows: 0
+        });
+    }
+    parseGridTemplate(dim) {
+        return {
+            gridTemplateColumns: this.repeatTemplate(dim.columns, false),
+            gridTemplateRows: this.repeatTemplate(dim.rows)
+        };
+    }
+    parseGridTemplateAreas(gridTemplate, group) {
+        return group.reduce((area, rows)=>{
+            const newRows = this.autoFillColumns(rows, gridTemplate.columns);
+            area.push(`"${newRows.join(' ')}"`);
+            return area;
+        }, []).join('\n');
+    }
+    // 当前列数不够时自动填充
+    autoFillColumns(rows, maxColumns) {
+        if (rows.length === maxColumns) {
+            // 等于最大列时不扩展rows
+            return rows.map((row)=>row.prop);
+        }
+        // 均分补全的列
+        const fillLen = Math.floor((maxColumns - rows.length) / rows.length);
+        const newRows = rows.reduce((pre, row)=>{
+            pre.push(row.prop);
+            const fillData = new Array(fillLen).fill(row.prop);
+            return pre.concat(fillData);
+        }, []);
+        // 补全不够均分的列
+        if (newRows.length < maxColumns) {
+            const remainData = new Array(maxColumns - newRows.length).fill('.');
+            return newRows.concat(remainData);
+        }
+        return newRows;
+    }
+    repeatTemplate(len, auto = true) {
+        return new Array(len + 1).join(auto ? 'auto ' : '1fr ').trim();
+    }
+    constructor(layout = []){
+        _define_property(this, "layout", void 0);
+        if (Array.isArray(layout)) {
+            this.layout = this.parseLayout({
+                prop: '',
+                group: layout
+            });
+        } else {
+            this.layout = this.parseLayout(layout);
+        }
+    }
+}
+// 布局管理器
+export { Layout as default };

package/esm/core/path.ts.js

@@ -0,0 +1,60 @@
+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;
+}
+class Path {
+    static getCurPath(parent, current) {
+        return parent === '' ? current : [
+            parent,
+            current
+        ].join(this.separator);
+    }
+    static getPathVal(obj, path, leftDeviation = 0) {
+        if (!path) return obj;
+        const pathArr = path.split(this.separator);
+        for(let i = 0; i < pathArr.length - leftDeviation; i += 1){
+            if (obj === undefined) return undefined;
+            obj = pathArr[i] === '' ? obj : obj[pathArr[i]];
+        }
+        return obj;
+    }
+    static setPathValue(obj = {}, path, value) {
+        const newValue = JSON.parse(JSON.stringify(obj));
+        const pathArr = path.split(this.separator);
+        const lastProp = pathArr.pop() || '';
+        let target = newValue;
+        pathArr.forEach((prop)=>{
+            if (!target[prop]) target[prop] = {};
+            target = target[prop];
+        });
+        target[lastProp] = value;
+        return newValue;
+    }
+    // 获取当前路径的字路径（相对于父路径）
+    static getSubPath(parent, current) {
+        return current.replace(`${parent}.`, '');
+    }
+    // 获取路径最后一个属性
+    static getPathLastProp(path) {
+        return path.split(this.separator).pop();
+    }
+    // 获取父路径
+    static getParentPath(path) {
+        const arrPath = path.split(this.separator);
+        if (arrPath.length <= 1) {
+            return ''; // root path
+        }
+        return arrPath.slice(0, arrPath.length - 1).join(this.separator);
+    }
+}
+_define_property(Path, "separator", '.');
+export { Path as default };

package/esm/core/proxy.ts.js

@@ -0,0 +1,10 @@
+export default function createProxy(schema, context) {
+    return new Proxy(schema, {
+        get (target, key, receiver) {
+            if (typeof target[key] === 'function') {
+                return target[key].apply(context);
+            }
+            return Reflect.get(target, key, receiver);
+        }
+    });
+}

package/esm/core/reaction.ts.js

@@ -0,0 +1,116 @@
+import { executeExpression, isExpression } from './expression.ts.js';
+import widgetTree from './widgetTree.ts.js';
+const reactionsMap = {};
+const subscribe = (path, typeName, fn)=>{
+    if (!reactionsMap[path]) {
+        reactionsMap[path] = {
+            lifetime: {},
+            effect: {},
+            fns: []
+        };
+    }
+    if (typeName === 'valChange') {
+        reactionsMap[path].fns.push(fn);
+    } else {
+        const [type, name] = typeName.split('/');
+        if (!reactionsMap[path][type][name]) {
+            reactionsMap[path][type][name] = [
+                fn
+            ];
+        } else {
+            reactionsMap[path][type][name].push(fn);
+        }
+    }
+};
+/**
+ * 解析单个reaction
+ *
+ * @param crtInsPath 当前表单组件的path
+ * @param targetPath 需要操作执行操作表单的path
+ * @param reaction 传入的reacion配置
+ * @returns viod
+ */ const resolveReaction = (crtInsPath, targetPath, reaction)=>()=>{
+        const { instance: crtInstance } = widgetTree.widgetMap[crtInsPath] || {}; // 当前组件实例，用来条件表达式判断
+        const { instance: operateInstance } = widgetTree.widgetMap[targetPath] || {}; // 需要执行操作的组件实例，可能为其他组件也可能为当前组件
+        let fullfill = true;
+        const deps = [];
+        if (reaction.source) {
+            const sources = Array.isArray(reaction.source) ? reaction.source : [
+                reaction.source
+            ];
+            sources.forEach((item)=>{
+                const { instance } = widgetTree.widgetMap[parsePath(item, crtInsPath)];
+                deps.push(instance);
+            });
+        }
+        if (typeof reaction.if === 'string') {
+            fullfill = executeExpression(reaction.if, crtInstance, deps);
+        }
+        const operations = fullfill ? reaction.then : reaction.else;
+        executeOperations(operations, operateInstance, deps);
+    };
+const executeOperations = (operations, instance, deps)=>{
+    if (operations) {
+        if (operations.state) {
+            Object.keys(operations.state).forEach((key)=>{
+                let val = operations.state[key];
+                if (typeof val === 'string' && /^{{.+}}$/.test(val.trim())) {
+                    val = executeExpression(val, instance, deps);
+                }
+                instance.setState(key, val);
+            });
+        }
+        if (Array.isArray(operations.actions)) {
+            operations.actions.forEach((item)=>{
+                executeExpression(item, instance, deps);
+            });
+        }
+    }
+};
+const parsePath = (path, instance)=>isExpression(path) ? executeExpression(path, instance) : path;
+export const reactionRegister = (path, reactions = [])=>{
+    const { instance } = widgetTree.widgetMap[path] || {};
+    if (reactions && Array.isArray(reactions)) {
+        reactions.forEach((reaction)=>{
+            // source 和 target 互斥，如果schema中同时定义，则取source，如果都没有定义则默认source为当前表单
+            // source可能会用数组同时定义多个
+            const subscribePaths = reaction.source ? Array.isArray(reaction.source) ? reaction.source : [
+                reaction.source
+            ] : [
+                path
+            ];
+            const targePath = parsePath(typeof reaction.target === 'string' ? reaction.target : path, instance);
+            subscribePaths.forEach((p)=>{
+                const sourcePathItem = parsePath(p, instance);
+                if (typeof reaction.lifetime === 'string') {
+                    subscribe(sourcePathItem, `lifetime/${reaction.lifetime}`, resolveReaction(path, targePath, reaction));
+                }
+                if (typeof reaction.effect === 'string') {
+                    subscribe(sourcePathItem, `effect/${reaction.effect}`, resolveReaction(path, targePath, reaction));
+                }
+                if (!reaction.lifetime && !reaction.effect) {
+                    subscribe(sourcePathItem, 'valChange', resolveReaction(path, targePath, reaction));
+                }
+            });
+        });
+    }
+};
+// 销毁widget对应的reaction
+export const reactionUnRegister = (path)=>{
+    delete reactionsMap[path];
+};
+export const reactionDispatch = (path, typeName)=>{
+    const [type = '', name = ''] = typeName.split('/');
+    let fns = [];
+    if (reactionsMap[path]) {
+        var _reactionsMap_path_type, _reactionsMap_path;
+        if (type === 'valChange') {
+            fns = reactionsMap[path].fns;
+        } else if ((_reactionsMap_path = reactionsMap[path]) === null || _reactionsMap_path === void 0 ? void 0 : (_reactionsMap_path_type = _reactionsMap_path[type]) === null || _reactionsMap_path_type === void 0 ? void 0 : _reactionsMap_path_type[name]) {
+            fns = reactionsMap[path][type][name];
+        }
+        fns.forEach((fn)=>{
+            fn();
+        });
+    }
+};

package/esm/core/register.ts.js

@@ -0,0 +1,74 @@
+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;
+}
+import { resolveComponent } from 'vue';
+/**
+ * Registry注册Form组件全局相关内容
+ */ export class Registry {
+    addComponentsMap(coms = {}) {
+        this.addMap('components', coms);
+    }
+    getComponent(key) {
+        return this.components.get(key);
+    }
+    addFieldsMap(map = {}) {
+        this.addMap('fields', map);
+    }
+    getField(key) {
+        return this.fields.get(key);
+    }
+    addBaseWidgets(widgets = {}) {
+        this.addMap('widgets', widgets);
+    }
+    // 获取基础控件
+    getBaseWidget(name) {
+        if (!name) {
+            console.warn('base widget name is empty');
+            return;
+        }
+        if (this.widgets.has(name)) {
+            return this.widgets.get(name);
+        }
+        if (name && name.indexOf(Registry.namespace) !== 0) {
+            return resolveComponent(`${Registry.namespace}-${name}`);
+        }
+        return resolveComponent(name);
+    }
+    addMap(props, map) {
+        if (!props || !map) return;
+        Object.entries(map).forEach(([key, value])=>{
+            if (this[props].has(key)) {
+                console.warn('repeat key', key);
+                return;
+            }
+            if (typeof value === 'string') {
+                this[props].set(key, resolveComponent(value));
+            } else {
+                this[props].set(key, value);
+            }
+        });
+    }
+    constructor(){
+        // 基础类型控件
+        _define_property(this, "widgets", new Map());
+        // 自定义组件
+        _define_property(this, "components", new Map());
+        // 每种Schema type对于的处理器
+        _define_property(this, "fields", new Map());
+    }
+}
+// 全局命名空间
+_define_property(Registry, "namespace", 'bk');
+// 全局上下
+_define_property(Registry, "context", {});
+export default new Registry();