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

package/esm/adapter/widget/KeyValueArrayWidget.tsx.js

@@ -0,0 +1,156 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import Schema from '../../core/schema.ts.js';
+import { defineComponent, h } from 'vue';
+import SchemaField from '../field/SchemaField.tsx.js';
+import props from '../field/FieldProps.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 FieldGroupWrap from '../common/FieldGroupWrap.tsx.js';
+// 伪数组类型
+export default defineComponent({
+    name: 'KeyValueArrayWidget',
+    props: Object.assign(Object.assign({}, props), {
+        // 当前值
+        modelValue: {
+            type: Array,
+            default: ()=>[]
+        }
+    }),
+    mounted () {
+        var _a;
+        const { minItems = 0 } = this.schema;
+        // 补全minItems项
+        if (((_a = this.modelValue) === null || _a === void 0 ? void 0 : _a.length) < minItems) {
+            const data = Schema.getSchemaDefaultValue(this.schema.items);
+            const remainData = new Array(minItems - this.modelValue.length).fill(data);
+            this.$emit('update:modelValue', [
+                ...this.modelValue,
+                ...remainData
+            ]);
+        }
+    },
+    methods: {
+        handleAddItem () {
+            if (this.disabled) return;
+            const data = Schema.getSchemaDefaultValue(this.schema.items);
+            this.$emit('update:modelValue', [
+                ...this.modelValue,
+                data
+            ]);
+        },
+        handleRemoveItem (index) {
+            if (this.disabled) return;
+            const value = JSON.parse(JSON.stringify(this.modelValue));
+            value.splice(index, 1);
+            this.$emit('update:modelValue', value);
+        },
+        handleInput ({ path, value }) {
+            // 捕获widget input事件，包装继续传给上一层处理
+            const subPath = Path.getSubPath(this.path, path);
+            const newValue = Path.setPathValue(this.modelValue, subPath, value);
+            this.$emit('update:modelValue', newValue);
+        }
+    },
+    render () {
+        var _a, _b, _c, _d, _e;
+        const labelBtnStyle = {
+            'font-size': '16px',
+            color: '#979ba5',
+            cursor: this.disabled ? 'not-allowed' : 'pointer',
+            display: 'inline-block'
+        };
+        const properties = (_b = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.properties;
+        const props = orderProperties(Object.keys(properties || {}), (_d = (_c = this.schema) === null || _c === void 0 ? void 0 : _c.items) === null || _d === void 0 ? void 0 : _d['ui:order']);
+        // props为空时，表示只有一个项
+        const keysLen = Object.keys(properties || {}).length;
+        const defaultCols = properties ? new Array(keysLen).fill('1fr').concat('20px').join(' ') : '1fr 20px';
+        const defaultContainerLayout = Object.assign({}, this.layout.container || {
+            display: 'grid',
+            gridGap: '24px',
+            'grid-template-columns': defaultCols // 默认配置
+        });
+        const self = this;
+        const dealSchema = (schema)=>// 处理当前控件默认Schema配置逻辑
+            mergeDeep({
+                'ui:component': {
+                    placeholder: schema.title
+                },
+                'ui:props': {
+                    // 默认不展示标题
+                    showTitle: false,
+                    // 0.1 兼容formItem设置 labelWidth 0 不生效问题
+                    labelWidth: 0.1
+                }
+            }, schema);
+        const renderSchemaField = (data)=>{
+            const { path, schema, required, layout } = data;
+            return h(SchemaField, Object.assign(Object.assign({}, this.$props), {
+                key: path,
+                schema,
+                required,
+                path,
+                layout,
+                style: {
+                    marginBottom: '10px'
+                },
+                'onUpdate:modelValue' (data) {
+                    self.handleInput(data);
+                }
+            }));
+        };
+        return _createVNode("div", null, [
+            (_e = this.modelValue) === null || _e === void 0 ? void 0 : _e.map((_, index)=>{
+                var _a;
+                const groupPath = Path.getCurPath(this.path, `${index}`);
+                return _createVNode(FieldGroupWrap, _mergeProps(Object.assign(Object.assign({}, this.$props), {
+                    path: groupPath,
+                    modelValue: Path.getPathVal(this.rootData, groupPath),
+                    schema: this.schema.items,
+                    layout: Object.assign(Object.assign({}, this.layout), {
+                        container: Object.assign({}, defaultContainerLayout)
+                    })
+                }), {
+                    "class": "mb10"
+                }), {
+                    default: ()=>[
+                            (props === null || props === void 0 ? void 0 : props.length) ? props.map((prop)=>{
+                                var _a, _b;
+                                const schemaItem = (_b = (_a = this.schema) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.properties[prop];
+                                const curPath = Path.getCurPath(this.path, `${index}.${prop}`);
+                                const lastProp = curPath.split('.').pop();
+                                const layoutConfig = Layout.findLayoutByProp(lastProp, this.layout.group || []) || {};
+                                return renderSchemaField({
+                                    path: curPath,
+                                    schema: dealSchema(schemaItem),
+                                    layout: layoutConfig,
+                                    required: Schema.isRequired(schemaItem, prop)
+                                });
+                            }) : renderSchemaField({
+                                path: Path.getCurPath(this.path, index),
+                                schema: dealSchema(((_a = this.schema) === null || _a === void 0 ? void 0 : _a.items) || {}),
+                                layout: {},
+                                required: false
+                            }),
+                            _createVNode("span", {
+                                "style": labelBtnStyle,
+                                "onClick": ()=>this.handleRemoveItem(index)
+                            }, [
+                                _createVNode("i", {
+                                    "class": "bk-form-icon icon-minus-line"
+                                }, null)
+                            ])
+                        ]
+                });
+            }),
+            _createVNode("span", {
+                "onClick": this.handleAddItem,
+                "style": labelBtnStyle
+            }, [
+                _createVNode("i", {
+                    "class": "bk-form-icon icon-plus-line"
+                }, null)
+            ])
+        ]);
+    }
+});

package/esm/adapter/widget/RadioWidget.ts.js

@@ -0,0 +1,98 @@
+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;
+}
+import register from '../../core/register.ts.js';
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+    name: 'RadioWidget',
+    props: {
+        datasource: {
+            type: Array,
+            default: ()=>[]
+        },
+        modelValue: {
+            type: [
+                String,
+                Number,
+                Boolean
+            ],
+            default: ''
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        handleChange (val) {
+            this.$emit('update:modelValue', val);
+        }
+    },
+    render () {
+        return h(register.getBaseWidget('radio-group'), _object_spread_props(_object_spread({}, this.$attrs), {
+            modelValue: this.modelValue,
+            onChange: this.handleChange
+        }), {
+            default: ()=>this.datasource.map((item)=>h(register.getBaseWidget('radio'), {
+                        key: item.value,
+                        class: [
+                            'mr24'
+                        ],
+                        modelValue: item.value,
+                        label: item.value,
+                        disabled: item.disabled || this.disabled
+                    }, {
+                        default: ()=>item.label
+                    }))
+        });
+    }
+});

package/esm/adapter/widget/SelectWidget.ts.js

@@ -0,0 +1,98 @@
+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;
+}
+import register from '../../core/register.ts.js';
+import { defineComponent, h, withDirectives } from 'vue';
+export default defineComponent({
+    name: 'SelectWidget',
+    props: {
+        datasource: {
+            type: Array,
+            default: ()=>[]
+        },
+        modelValue: {
+            type: [
+                Array,
+                String,
+                Number,
+                Boolean
+            ],
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        handleSelectChange (val) {
+            this.$emit('update:modelValue', val);
+        }
+    },
+    render () {
+        return h(register.getBaseWidget('select'), _object_spread_props(_object_spread({}, this.$attrs), {
+            loading: this.loading,
+            modelValue: this.modelValue,
+            onChange: this.handleSelectChange
+        }), {
+            default: ()=>{
+                var _this_datasource;
+                return (_this_datasource = this.datasource) === null || _this_datasource === void 0 ? void 0 : _this_datasource.map((item)=>withDirectives(h(register.getBaseWidget('option'), {
+                        key: item.value,
+                        name: item.label,
+                        id: item.value,
+                        disabled: item.disabled
+                    }), []));
+            }
+        });
+    }
+});

package/esm/adapter/widget/SwitchWidget.ts.js

@@ -0,0 +1,73 @@
+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;
+}
+import register from '../../core/register.ts.js';
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+    name: 'SwitchWidget',
+    props: {
+        modelValue: Boolean
+    },
+    methods: {
+        handleChange (v) {
+            this.$emit('update:modelValue', v);
+        }
+    },
+    render () {
+        return h(register.getBaseWidget('switcher'), _object_spread_props(_object_spread({}, this.$attrs), {
+            modelValue: this.modelValue,
+            onChange: (v)=>{
+                this.handleChange(v);
+            }
+        }));
+    }
+});

package/esm/adapter/widget/TabGroupWidget.ts.js

@@ -0,0 +1,145 @@
+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;
+}
+import { defineComponent, h } from 'vue';
+import props from '../field/FieldProps.ts.js';
+import FieldGroupWrap from '../common/FieldGroupWrap.tsx.js';
+import SchemaField from '../field/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 register from '../../core/register.ts.js';
+import { orderProperties } from '../../util/index.ts.js';
+export default defineComponent({
+    name: 'TabWidget',
+    props: _object_spread_props(_object_spread({}, props), {
+        type: {
+            type: String,
+            default: 'default',
+            validator: (value)=>[
+                    'default',
+                    'normal',
+                    'card'
+                ].includes(value)
+        },
+        showTitle: {
+            type: Boolean,
+            default: false
+        },
+        border: {
+            type: Boolean,
+            default: false
+        },
+        verifiable: {
+            type: Boolean,
+            default: false
+        }
+    }),
+    data () {
+        return {
+            active: ''
+        };
+    },
+    beforeMount () {
+        var _this_schema;
+        const properties = orderProperties(Object.keys(((_this_schema = this.schema) === null || _this_schema === void 0 ? void 0 : _this_schema.properties) || {}), this.schema['ui:order']);
+        this.active = properties === null || properties === void 0 ? void 0 : properties[0];
+    },
+    render () {
+        var _this_schema;
+        const groupWrapProps = _object_spread_props(_object_spread({}, this.$props), {
+            layout: _object_spread_props(_object_spread({}, this.layout), {
+                container: {}
+            }),
+            title: this.schema.title
+        });
+        const self = this;
+        const properties = orderProperties(Object.keys(((_this_schema = this.schema) === null || _this_schema === void 0 ? void 0 : _this_schema.properties) || {}), this.schema['ui:order']);
+        return h(FieldGroupWrap, _object_spread_props(_object_spread({}, groupWrapProps), {
+            onRemove (path) {
+                self.$emit('remove', path);
+            }
+        }), {
+            default: ()=>[
+                    h(register.getBaseWidget('tab'), {
+                        type: 'border-card',
+                        active: this.active,
+                        onChange: (name)=>{
+                            this.active = name;
+                        }
+                    }, {
+                        default: ()=>properties.map((key)=>{
+                                var _this_schema_properties, _this_schema;
+                                const schemaItem = (_this_schema = this.schema) === null || _this_schema === void 0 ? void 0 : (_this_schema_properties = _this_schema.properties) === null || _this_schema_properties === void 0 ? void 0 : _this_schema_properties[key];
+                                const curPath = Path.getCurPath(this.path, key);
+                                const lastProp = curPath.split('.').pop();
+                                const layoutConfig = Layout.findLayoutByProp(lastProp, this.layout.group || []) || {};
+                                return h(register.getBaseWidget('tab-panel'), {
+                                    key,
+                                    name: key,
+                                    label: schemaItem === null || schemaItem === void 0 ? void 0 : schemaItem.title
+                                }, {
+                                    default: ()=>h(SchemaField, _object_spread_props(_object_spread({}, this.$props, this.$attrs), {
+                                            key: curPath,
+                                            schema: schemaItem,
+                                            required: Schema.isRequired(schemaItem, key),
+                                            path: curPath,
+                                            layout: layoutConfig,
+                                            removeable: false
+                                        }))
+                                });
+                            })
+                    })
+                ]
+        });
+    }
+});