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

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

@@ -0,0 +1,196 @@
+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 Schema from '../../core/schema.ts.js';
+import { defineComponent, h } from 'vue';
+import props from '../field/FieldProps.ts.js';
+import { mergeDeep } from '../../util/index.ts.js';
+import SchemaField from '../field/SchemaField.tsx.js';
+import Path from '../../core/path.ts.js';
+import register from '../../core/register.ts.js';
+import locale from '../../core/lang.ts.js';
+// 默认数组控件
+export default defineComponent({
+    name: 'ArrayWidget',
+    props: _object_spread_props(_object_spread({}, props), {
+        modelValue: {
+            type: Array,
+            default: ()=>[]
+        }
+    }),
+    mounted () {
+        this.handleFillItem();
+    },
+    methods: {
+        // 补全minItems项
+        handleFillItem () {
+            const { minItems = 0 } = this.schema;
+            const valueLen = this.modelValue ? this.modelValue.length : 0;
+            if (valueLen < minItems) {
+                const data = Schema.getSchemaDefaultValue(this.schema.items);
+                const remainData = new Array(minItems - valueLen).fill(data);
+                this.$emit('update:modelValue', {
+                    path: this.path,
+                    value: [
+                        ...this.modelValue || [],
+                        ...remainData
+                    ]
+                });
+            }
+        },
+        // 添加item
+        handleAddItem () {
+            const data = Schema.getSchemaDefaultValue(this.schema.items);
+            const value = JSON.parse(JSON.stringify(this.modelValue || []));
+            value.push(data);
+            this.$emit('update:modelValue', {
+                path: this.path,
+                value
+            });
+        },
+        // 删除item
+        handleDeleteItem (path) {
+            const index = Number(Path.getPathLastProp(path));
+            const value = JSON.parse(JSON.stringify(this.modelValue || []));
+            value.splice(index, 1);
+            this.$emit('update:modelValue', {
+                path: this.path,
+                value
+            });
+        }
+    },
+    render () {
+        const self = this;
+        const arrVnodeList = (Array.isArray(this.modelValue) ? this.modelValue : []).map((_, index)=>{
+            const curPath = Path.getCurPath(this.path, index);
+            return h(SchemaField, _object_spread_props(_object_spread({}, this.$props, this.$attrs), {
+                key: `${curPath}-${this.modelValue.length}`,
+                schema: this.schema.items,
+                path: curPath,
+                layout: _object_spread_props(_object_spread({}, this.layout), {
+                    item: {}
+                }),
+                removeable: true,
+                onRemove (path) {
+                    self.handleDeleteItem(path);
+                }
+            }));
+        });
+        const _Schema_getGroupWrap = Schema.getGroupWrap(this.schema), { name } = _Schema_getGroupWrap, vnode = _object_without_properties(_Schema_getGroupWrap, [
+            "name"
+        ]);
+        return h(name, mergeDeep(_object_spread_props(_object_spread({}, this.$props), {
+            layout: {},
+            showTitle: true,
+            style: _object_spread({}, this.layout.item || {}),
+            // 监听 FieldGroupWrap 的 update:modelValue 事件（用于重置默认值等功能）
+            'onUpdate:modelValue': (data)=>{
+                self.$emit('update:modelValue', data);
+            }
+        }), vnode), {
+            default: ()=>[
+                    ...arrVnodeList,
+                    !this.readonly ? h(register.getBaseWidget('form-item'), {
+                        labelWidth: 0,
+                        class: {
+                            'bk-schema-form-item-auto-height': true
+                        }
+                    }, {
+                        default: ()=>[
+                                h('span', {
+                                    class: [
+                                        'bk-schema-form-group-add'
+                                    ],
+                                    onClick () {
+                                        self.handleAddItem();
+                                    }
+                                }, [
+                                    h('i', {
+                                        class: [
+                                            'bk-form-icon icon-plus-circle-shape mr5'
+                                        ]
+                                    }),
+                                    locale('add')
+                                ])
+                            ]
+                    }) : undefined
+                ]
+        });
+    }
+});

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

@@ -0,0 +1,76 @@
+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: 'ButtonWidget',
+    props: {
+        word: {
+            type: String,
+            default: ''
+        }
+    },
+    methods: {
+        handleClick () {
+            this.$emit('click');
+        }
+    },
+    render () {
+        const self = this;
+        return h(register.getBaseWidget('button'), _object_spread_props(_object_spread({}, this.$attrs), {
+            onClick: self.handleClick()
+        }), {
+            default: ()=>this.word
+        });
+    }
+});

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

@@ -0,0 +1,101 @@
+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: 'CheckboxWidget',
+    props: {
+        datasource: {
+            type: Array,
+            default: ()=>[]
+        },
+        modelValue: {
+            type: [
+                Array,
+                Boolean
+            ],
+            default: ()=>[]
+        },
+        // 单个checkbox时文案
+        label: {
+            type: String,
+            default: ''
+        }
+    },
+    methods: {
+        handleChange (val) {
+            this.$emit('update:modelValue', val);
+        }
+    },
+    render () {
+        return Array.isArray(this.modelValue) ? h(register.getBaseWidget('checkbox-group'), {
+            modelValue: this.modelValue,
+            onChange: this.handleChange
+        }, {
+            default: ()=>this.datasource.map((item)=>h(register.getBaseWidget('checkbox'), _object_spread_props(_object_spread({}, this.$attrs), {
+                        key: item.value,
+                        class: [
+                            'mr24'
+                        ],
+                        label: item.value
+                    }), {
+                        default: ()=>item.label
+                    }))
+        }) : h(register.getBaseWidget('checkbox'), {
+            modelValue: this.modelValue,
+            onChange: this.handleChange
+        }, {
+            default: ()=>this.label
+        });
+    }
+});

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

@@ -0,0 +1,140 @@
+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 Layout from '../../core/layout.ts.js';
+import Path from '../../core/path.ts.js';
+import register from '../../core/register.ts.js';
+import Schema from '../../core/schema.ts.js';
+import { orderProperties } from '../../util/index.ts.js';
+import { defineComponent, h } from 'vue';
+import FieldGroupWrap from '../common/FieldGroupWrap.tsx.js';
+import props from '../field/FieldProps.ts.js';
+import SchemaField from '../field/SchemaField.tsx.js';
+export default defineComponent({
+    name: 'CollapseWidget',
+    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
+        },
+        defaultActiveName: {
+            type: Array,
+            default: ()=>[]
+        },
+        verifiable: {
+            type: Boolean,
+            default: false
+        }
+    }),
+    data () {
+        return {
+            activeName: this.defaultActiveName
+        };
+    },
+    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 properties = orderProperties(Object.keys(((_this_schema = this.schema) === null || _this_schema === void 0 ? void 0 : _this_schema.properties) || {}), this.schema['ui:order']);
+        const collapseItems = 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('collapse-panel'), {
+                key,
+                name: key,
+                title: schemaItem.title
+            }, {
+                content: ()=>h(SchemaField, _object_spread_props(_object_spread({
+                        key: curPath
+                    }, this.$props, this.$attrs), {
+                        schema: schemaItem,
+                        required: Schema.isRequired(schemaItem, key),
+                        path: curPath,
+                        layout: layoutConfig,
+                        removeable: false
+                    }))
+            });
+        });
+        const self = this;
+        return h(FieldGroupWrap, _object_spread({}, groupWrapProps), {
+            default: ()=>h(register.getBaseWidget('collapse'), {
+                    'use-card-theme': true,
+                    modelValue: this.activeName,
+                    'onUpdate:modelValue' (actives) {
+                        self.activeName = actives;
+                    }
+                }, {
+                    default: ()=>collapseItems
+                })
+        });
+    }
+});

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

@@ -0,0 +1,71 @@
+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: 'ColorPicker',
+    props: {
+        modelValue: String
+    },
+    methods: {
+        handleChange (color) {
+            this.$emit('update:modelValue', color);
+        }
+    },
+    render () {
+        return h(register.getBaseWidget('color-picker'), _object_spread_props(_object_spread({}, this.$attrs), {
+            modelValue: this.modelValue,
+            onChange: this.handleChange
+        }));
+    }
+});

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

@@ -0,0 +1,79 @@
+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;
+}
+import register from '../../core/register.ts.js';
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+    name: 'InputWidget',
+    props: {
+        modelValue: [
+            String,
+            Number
+        ],
+        unit: {
+            type: String,
+            default: ''
+        },
+        maxRows: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        rows () {
+            const len = String(this.modelValue).split('\n').length;
+            return len <= this.maxRows ? len : this.maxRows;
+        }
+    },
+    methods: {
+        handleInput (v) {
+            if (this.$attrs.type === 'number') {
+                this.$emit('update:modelValue', isNaN(v) || v === '' ? v : Number(v));
+            } else {
+                this.$emit('update:modelValue', v);
+            }
+        },
+        handleBlur (e) {
+            var _e_target;
+            const value = e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.value;
+            if (this.$attrs.type === 'number' && isNaN(value)) {
+                this.$emit('update:modelValue', this.$attrs.min || 0);
+            }
+        }
+    },
+    render () {
+        return h(register.getBaseWidget('input'), _object_spread({
+            suffix: this.unit,
+            modelValue: this.modelValue,
+            rows: this.rows,
+            type: this.maxRows > 1 || Number(this.$attrs.rows) > 1 ? 'textarea' : 'text',
+            onInput: this.handleInput,
+            onBlur: this.handleBlur
+        }, this.$attrs));
+    }
+});