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

package/esm/adapter/common/FieldGroupWrap.tsx.js

@@ -0,0 +1,199 @@
+import { createVNode as _createVNode } from "vue";
+import widgetTree from '../../core/widgetTree.ts.js';
+import { h, defineComponent, withDirectives } from 'vue';
+import props from '../field/FieldProps.ts.js';
+import Schema from '../../core/schema.ts.js';
+import { deepEquals } from '../../util/index.ts.js';
+import { bkTooltips } from 'bkui-vue';
+export default defineComponent({
+    name: 'FieldGroupWrap',
+    props: Object.assign(Object.assign({}, props), {
+        // 组类型
+        type: {
+            type: String,
+            default: 'default',
+            validator: (value)=>[
+                    'default',
+                    'normal',
+                    'card'
+                ].includes(value)
+        },
+        // 是否显示组title
+        showTitle: {
+            type: Boolean,
+            default: false
+        },
+        // 是否显示border
+        border: {
+            type: Boolean,
+            default: false
+        },
+        verifiable: {
+            type: Boolean,
+            default: false
+        },
+        hideEmptyRow: {
+            type: Boolean,
+            default: false
+        },
+        showResetDefault: {
+            type: Boolean,
+            default: false
+        }
+    }),
+    data () {
+        return {
+            groupErrorTips: {},
+            state: {
+                // 组类型目前只支持visible
+                visible: true
+            }
+        };
+    },
+    computed: {
+        // 兼容以前数据结构
+        value () {
+            return this.modelValue;
+        }
+    },
+    created () {
+        // 注册widget TreeNode
+        widgetTree.addWidgetNode(this.path, this, 'group');
+    },
+    mounted () {
+        // 更新样式
+        this.$forceUpdate();
+    },
+    beforeUnmount () {
+        widgetTree.removeWidgetNode(this.path, this);
+    },
+    methods: {
+        setState (key, value) {
+            if (Reflect.has(this.state, key)) {
+                this.state[key] = value;
+            } else {
+                console.warn(`Group unsupported ${key} state, please check`);
+            }
+        },
+        setGroupErrorTips (widgetPath, errorTips) {
+            this.groupErrorTips[widgetPath] = errorTips;
+        },
+        removeGroupErrorTips (widgetPath) {
+            delete this.groupErrorTips[widgetPath];
+        },
+        clearGroupErrorTips () {
+            this.groupErrorTips = {};
+        },
+        // 获取 schema 中定义的默认值
+        getDefaultValue () {
+            return Schema.getSchemaDefaultValue(this.schema);
+        },
+        // 恢复默认值
+        resetToDefault () {
+            const defaultValue = this.getDefaultValue();
+            this.$emit('update:modelValue', {
+                path: this.path,
+                value: defaultValue
+            });
+        },
+        // 判断当前值是否与默认值相同
+        isDefaultValue () {
+            const defaultValue = this.getDefaultValue();
+            return deepEquals(this.modelValue, defaultValue);
+        }
+    },
+    render () {
+        var _a, _b, _c, _d, _e, _f;
+        const schemaFormStyle = Object.assign({
+            position: 'relative',
+            border: this.border ? '1px solid #dcdee5' : 'none',
+            display: !this.state.visible ? 'none' : ''
+        }, ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.item) || {});
+        const groupContentStyle = Object.assign({}, ((_b = this.layout) === null || _b === void 0 ? void 0 : _b.container) || {
+            display: 'grid',
+            gridGap: '24px' // 未设置layout的布局组的默认样式
+        });
+        const self = this;
+        const renderDelete = ()=>h('span', {
+                class: [
+                    'bk-schema-form-group-delete'
+                ],
+                onClick () {
+                    self.$emit('remove', self.path);
+                }
+            }, [
+                h('i', {
+                    class: [
+                        'bk-form-icon icon-close3-shape'
+                    ]
+                })
+            ]);
+        const title = ((_c = this.schema) === null || _c === void 0 ? void 0 : _c.title) || ((_d = this.layout) === null || _d === void 0 ? void 0 : _d.prop);
+        const groupErrorTipsContent = Object.keys(this.groupErrorTips).map((widgetPath)=>_createVNode("p", null, [
+                this.groupErrorTips[widgetPath]
+            ]));
+        const hasError = JSON.stringify(this.groupErrorTips) !== '{}';
+        // 渲染恢复默认值按钮
+        const renderResetDefault = ()=>{
+            // 不显示恢复默认值按钮，或者当前值已经是默认值
+            if (!this.showResetDefault || this.isDefaultValue() || this.readonly || this.disabled) {
+                return null;
+            }
+            return withDirectives(h('span', {
+                class: [
+                    'bk-schema-form-reset-default',
+                    'bk-form-icon icon-reset'
+                ],
+                onClick: ()=>{
+                    self.resetToDefault();
+                }
+            }), [
+                [
+                    bkTooltips,
+                    {
+                        content: '恢复默认值'
+                    }
+                ]
+            ]);
+        };
+        return _createVNode("div", {
+            "class": [
+                'bk-schema-form-group',
+                this.type,
+                {
+                    'hide-empty-row': this.hideEmptyRow
+                },
+                {
+                    'bk-schema-form-group--error': hasError
+                }
+            ],
+            "style": schemaFormStyle
+        }, [
+            title && this.showTitle ? _createVNode("span", {
+                "class": [
+                    'bk-schema-form-group-title',
+                    this.type
+                ]
+            }, [
+                title,
+                renderResetDefault(),
+                hasError ? _createVNode("span", {
+                    "class": "bk-schema-form-group__error-tips"
+                }, [
+                    _createVNode("span", {
+                        "class": "bk-schema-form-group__error-tips-popover"
+                    }, [
+                        groupErrorTipsContent
+                    ])
+                ]) : null
+            ]) : null,
+            _createVNode("div", {
+                "style": groupContentStyle,
+                "class": "bk-schema-form-group-content"
+            }, [
+                (_f = (_e = this.$slots) === null || _e === void 0 ? void 0 : _e.default) === null || _f === void 0 ? void 0 : _f.call(_e)
+            ]),
+            this.removeable && renderDelete()
+        ]);
+    }
+});

package/esm/adapter/field/ArrayField.tsx.js

@@ -0,0 +1,55 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import Schema from '../../core/schema.ts.js';
+import { defineComponent, h } from 'vue';
+import props from './FieldProps.ts.js';
+import Widget from '../widget/Widget.ts.js';
+import SchemaField from './SchemaField.tsx.js';
+import Path from '../../core/path.ts.js';
+import { mergeDeep } from '../../util/index.ts.js';
+import ArrayWidget from '../widget/ArrayWidget.ts.js';
+export default defineComponent({
+    name: 'ArrayField',
+    props,
+    render () {
+        const { schema, path } = this.$props;
+        if (Schema.isMultiSelect(schema) || Schema.isCustomArrayWidget(schema)) {
+            // 多选类型 或 自定义数组类型（伪数组类型(只有一个FormItem，但是值为数组，值一般由自定义Widget控件决定)）
+            return h(Widget, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+                key: path,
+                schema: mergeDeep({
+                    'ui:component': {
+                        multiple: true
+                    }
+                }, this.$props.schema)
+            }), this.$slots);
+        }
+        // 元组类型
+        if (Schema.isTupleArray(schema)) {
+            const _a = Schema.getGroupWrap(schema), { name } = _a, vnode = __rest(_a, [
+                "name"
+            ]);
+            const tupleVnodeList = schema.items.map((item, index)=>h(SchemaField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+                    key: Path.getCurPath(path, index),
+                    schema: item,
+                    path: Path.getCurPath(path, index)
+                }), this.$slots));
+            return h(name, mergeDeep(Object.assign(Object.assign({}, this.$props), {
+                path,
+                showTitle: true
+            }), vnode), {
+                default: ()=>[
+                        ...tupleVnodeList
+                    ]
+            });
+        }
+        // 一般数组类型
+        return h(ArrayWidget, Object.assign(Object.assign({}, this.$attrs), this.$props), this.$slots);
+    }
+});

package/esm/adapter/field/BooleanField.tsx.js

@@ -0,0 +1,41 @@
+import { defineComponent, h } from 'vue';
+import props from './FieldProps.ts.js';
+import Widget from '../widget/Widget.ts.js';
+import { mergeDeep } from '../../util/index.ts.js';
+export default defineComponent({
+    name: 'BooleanField',
+    props,
+    render () {
+        var _a;
+        const { name } = this.$props.schema['ui:component'] || {};
+        let widgetProps = {};
+        if ([
+            'radio',
+            'select'
+        ].includes(name)) {
+            // radioGroup、select类型需要默认数据源
+            widgetProps = {
+                datasource: [
+                    {
+                        label: 'False',
+                        value: false
+                    },
+                    {
+                        label: 'True',
+                        value: true
+                    }
+                ]
+            };
+        } else if (name === 'checkbox') {
+            // boolean 类型checkbox
+            widgetProps = {
+                label: (_a = this.$props.schema) === null || _a === void 0 ? void 0 : _a.title
+            };
+        }
+        return h(Widget, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+            schema: mergeDeep({
+                'ui:component': Object.assign({}, widgetProps)
+            }, this.$props.schema)
+        }), this.$slots);
+    }
+});

package/esm/adapter/field/CompositionField.tsx.js

@@ -0,0 +1,113 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import Path from '../../core/path.ts.js';
+import register from '../../core/register.ts.js';
+import Schema from '../../core/schema.ts.js';
+import { isObj, mergeDeep } from '../../util/index.ts.js';
+import { defineComponent, h } from 'vue';
+import props from './FieldProps.ts.js';
+import SchemaField from './SchemaField.tsx.js';
+import Widget from '../widget/Widget.ts.js';
+import { ajv } from '../../core/validator.ts.js';
+export default defineComponent({
+    name: 'CompositionField',
+    props: Object.assign({}, props),
+    data () {
+        return {
+            activeIndex: -1
+        };
+    },
+    computed: {
+        composition () {
+            var _a, _b;
+            if ((_a = this.schema.anyOf) === null || _a === void 0 ? void 0 : _a.length) {
+                return 'anyOf';
+            }
+            if ((_b = this.schema.oneOf) === null || _b === void 0 ? void 0 : _b.length) {
+                return 'oneOf';
+            }
+            return '';
+        }
+    },
+    created () {
+        // 初始化默认 composition 选项
+        const compositionList = this.schema[this.composition] || [];
+        // 没有required选项时回显不成功
+        const index = compositionList.findIndex((item)=>ajv.validate(item, this.modelValue));
+        this.activeIndex = index > -1 ? index : 0;
+    },
+    render () {
+        const compositionList = this.schema[this.composition] || [];
+        const schemaList = compositionList.map((item)=>{
+            const data = mergeDeep({}, this.schema, item);
+            delete data[this.composition];
+            return data;
+        });
+        const _a = Schema.getUiProps(`ui:${this.composition}`, this.schema), { name: com = 'radio' } = _a, // 默认用radio组件
+        vnodeData = __rest(_a, [
+            "name"
+        ]);
+        const isConst = typeof this.schema.type !== 'object' && schemaList.every((item)=>item.const);
+        if (isConst) {
+            // 全是常量
+            return h(Widget, Object.assign(Object.assign({}, this.$props), this.$attrs), this.$slots);
+        }
+        const compositionVnodeData = __rest(Schema.getUiProps('ui:composition', this.schema), []);
+        return h(register.getComponent('group'), mergeDeep(Object.assign(Object.assign({}, this.$props), {
+            rootData: this.rootData,
+            schema: this.schema,
+            modelValue: Path.getPathVal(this.rootData, this.path),
+            path: this.path,
+            onRemove () {
+                this.$emit('remove', this.path);
+            }
+        }), compositionVnodeData), {
+            default: ()=>[
+                    // anyOf component
+                    h(register.getBaseWidget('form-item'), {
+                        label: vnodeData === null || vnodeData === void 0 ? void 0 : vnodeData.title
+                    }, {
+                        default: ()=>h(register.getComponent(com), mergeDeep({
+                                modelValue: this.activeIndex,
+                                datasource: schemaList.map((item, index)=>({
+                                        label: item.title || '',
+                                        value: index
+                                    })),
+                                clearable: false,
+                                'onUpdate:modelValue': (index)=>{
+                                    this.activeIndex = index;
+                                    // 删除其他 composition 字段
+                                    if (isObj(this.modelValue)) {
+                                        const newValue = JSON.parse(JSON.stringify(this.modelValue));
+                                        const props = compositionList.filter((_, index)=>index !== this.activeIndex).reduce((pre, item)=>{
+                                            const { properties = {} } = item;
+                                            pre.push(...Object.keys(properties));
+                                            return pre;
+                                        }, []);
+                                        props.forEach((prop)=>{
+                                            delete newValue[prop];
+                                        });
+                                        this.$emit('update:modelValue', {
+                                            path: this.path,
+                                            value: newValue
+                                        });
+                                    }
+                                }
+                            }, vnodeData || {}))
+                    }),
+                    // schema
+                    h(SchemaField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+                        key: this.activeIndex,
+                        removeable: false,
+                        schema: schemaList[this.activeIndex]
+                    }), this.$slots)
+                ]
+        });
+    }
+});

package/esm/adapter/field/FieldProps.ts.js

@@ -0,0 +1,85 @@
+import request from '../../util/fetch.ts.js';
+export default {
+    // 当前项shema
+    schema: {
+        type: Object,
+        default: ()=>({})
+    },
+    // 当前路径（唯一标识）
+    path: {
+        type: String,
+        default: ''
+    },
+    // 是否必须字段
+    required: {
+        type: Boolean,
+        default: false
+    },
+    // 全量数据（只读）
+    rootData: {
+        type: Object,
+        default: ()=>({})
+    },
+    // 当前值
+    modelValue: {
+        type: [
+            String,
+            Number,
+            Array,
+            Object,
+            Boolean
+        ]
+    },
+    // 布局配置
+    layout: {
+        type: Object,
+        default: ()=>({})
+    },
+    // 当前全局变量上下文
+    context: {
+        type: Object,
+        default: ()=>({})
+    },
+    // 当前项是否可移除
+    removeable: {
+        type: Boolean,
+        default: false
+    },
+    // http请求适配器
+    httpAdapter: {
+        type: Object,
+        default: ()=>({
+                request,
+                responseParse: (res)=>res
+            })
+    },
+    visible: {
+        type: Boolean,
+        default: true
+    },
+    error: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    readonlyMode: {
+        type: String,
+        default: 'value',
+        validator: (value)=>[
+                'value',
+                'custom'
+            ].includes(value)
+    },
+    // 全局配置：是否显示恢复默认值按钮
+    showResetDefault: {
+        type: Boolean,
+        default: false
+    }
+};

package/esm/adapter/field/NumberField.tsx.js

@@ -0,0 +1,19 @@
+import { mergeDeep } from '../../util/index.ts.js';
+import { defineComponent, h } from 'vue';
+import props from './FieldProps.ts.js';
+import StringField from './StringField.tsx.js';
+export default defineComponent({
+    name: 'NumberField',
+    props,
+    render () {
+        var _a;
+        return h(StringField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+            schema: mergeDeep({
+                'ui:component': {
+                    type: 'number',
+                    min: ((_a = this.$props.schema) === null || _a === void 0 ? void 0 : _a.type) === 'integer' ? 0 : -Infinity
+                }
+            }, this.$props.schema)
+        }), this.$slots);
+    }
+});

package/esm/adapter/field/ObjectField.tsx.js

@@ -0,0 +1,58 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { defineComponent, h } from 'vue';
+import props from './FieldProps.ts.js';
+import SchemaField from './SchemaField.tsx.js';
+import Schema from '../../core/schema.ts.js';
+import Path from '../../core/path.ts.js';
+import Layout from '../../core/layout.ts.js';
+import { mergeDeep, orderProperties } from '../../util/index.ts.js';
+import Widget from '../widget/Widget.ts.js';
+export default defineComponent({
+    name: 'ObjectField',
+    props,
+    render () {
+        const { schema, path, layout, rootData } = this.$props;
+        const properties = orderProperties(Object.keys(schema.properties || {}), schema['ui:order']);
+        let vNodeList = [];
+        if (properties.length) {
+            vNodeList = properties.map((name)=>{
+                var _a;
+                const curPath = Path.getCurPath(path, name);
+                const lastProp = curPath.split('.').pop();
+                const layoutConfig = Layout.findLayoutByProp(lastProp, layout.group || []) || {};
+                return h(SchemaField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+                    key: curPath,
+                    modelValue: Path.getPathVal(rootData, curPath),
+                    schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[name],
+                    required: Schema.isRequired(schema, name),
+                    path: curPath,
+                    layout: layoutConfig,
+                    removeable: false
+                }), this.$slots);
+            });
+        } else if (Schema.getUiComponent(schema)) {
+            // 如果object属性没有配置 Properties，但是有ui:component属性，那个直接渲染对应的组件
+            vNodeList = [
+                h(Widget, Object.assign(Object.assign({}, this.$props), this.$attrs), this.$slots)
+            ];
+        }
+        const _a = Schema.getGroupWrap(schema), { name } = _a, vnodeData = __rest(_a, [
+            "name"
+        ]);
+        return h(name, mergeDeep(Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
+            modelValue: Path.getPathVal(rootData, path),
+            path
+        }), vnodeData), {
+            default: ()=>[
+                    ...vNodeList
+                ]
+        });
+    }
+});

package/esm/adapter/field/SchemaField.tsx.js

@@ -0,0 +1,28 @@
+var __rest = this && this.__rest || function(s, e) {
+    var t = {};
+    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { h, defineComponent } from 'vue';
+import Schema from '../../core/schema.ts.js';
+import props from './FieldProps.ts.js';
+import Path from '../../core/path.ts.js';
+export default defineComponent({
+    name: 'SchemaField',
+    props,
+    render () {
+        const { schema, rootData, path } = this.$props;
+        const resolveSchema = Schema.resolveSchema(schema);
+        if (!Object.keys(schema).length) return null;
+        const _a = Schema.getSchemaField(resolveSchema), { name } = _a, fieldProps = __rest(_a, [
+            "name"
+        ]);
+        return name ? h(name, Object.assign(Object.assign(Object.assign(Object.assign({}, this.$attrs), this.$props), fieldProps), {
+            modelValue: Path.getPathVal(rootData, path),
+            schema: resolveSchema
+        }), this.$slots) : null;
+    }
+});

package/esm/adapter/field/StringField.tsx.js

@@ -0,0 +1,4 @@
+import { h } from 'vue';
+import Widget from '../widget/Widget.ts.js';
+const StringField = (props, ctx)=>h(Widget, Object.assign(Object.assign({}, props), ctx.attrs), ctx.slots);
+export default StringField;