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

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

@@ -0,0 +1,497 @@
+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);
+        });
+    };
+}
+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 register from '../../core/register.ts.js';
+import { defineComponent, h, withDirectives } from 'vue';
+import { deepEquals, isObj, mergeDeep } from '../../util/index.ts.js';
+import props from '../field/FieldProps.ts.js';
+import Path from '../../core/path.ts.js';
+import { reactionRegister, reactionDispatch, reactionUnRegister } from '../../core/reaction.ts.js';
+import { executeExpression } from '../../core/expression.ts.js';
+import { dispatchValidate } from '../../core/validator.ts.js';
+import events from '../../core/events.ts.js';
+import request from '../../util/fetch.ts.js';
+import widgetTree from '../../core/widgetTree.ts.js';
+import { capitalizeFirstLetter } from '../../util/index.ts.js';
+import { bkTooltips } from 'bkui-vue';
+export default defineComponent({
+    name: 'Widget',
+    inheritAttrs: false,
+    props,
+    data () {
+        return {
+            loading: false,
+            datasource: Schema.resolveDefaultDatasource(this.schema),
+            formItemProps: {
+                tips: '',
+                label: ''
+            },
+            state: {
+                visible: this.visible,
+                disabled: this.disabled,
+                readonly: this.readonly,
+                error: this.error
+            },
+            errorTips: '',
+            privateSchema: {},
+            key: ''
+        };
+    },
+    computed: {
+        widgetMap () {
+            return widgetTree.widgetMap;
+        },
+        widgetNode () {
+            return widgetTree.widgetMap[this.path];
+        },
+        parent () {
+            var _this_widgetNode;
+            return (_this_widgetNode = this.widgetNode) === null || _this_widgetNode === void 0 ? void 0 : _this_widgetNode.parent;
+        },
+        // 当前widget schema数据
+        widgetSchema () {
+            return mergeDeep({}, this.schema, this.privateSchema);
+        },
+        // 兼容以前数据结构
+        value () {
+            return this.modelValue;
+        }
+    },
+    watch: {
+        modelValue: {
+            handler (newValue, oldValue) {
+                if (!deepEquals(newValue, oldValue)) {
+                    setTimeout(()=>{
+                        reactionDispatch(this.path, 'valChange');
+                        dispatchValidate(this.path);
+                    }, 0);
+                }
+            }
+        },
+        widgetSchema: {
+            deep: true,
+            handler (newValue, oldValue) {
+                if (deepEquals(newValue, oldValue)) return;
+                this.resetDatasource();
+                this.key = new Date().getTime().toString();
+            }
+        }
+    },
+    created () {
+        // 表单项配置
+        const uiOptions = Schema.getUiOptions(this.widgetSchema);
+        this.formItemProps = _object_spread_props(_object_spread({}, uiOptions), {
+            // schema配置不存在title时默认用属性名作为title
+            label: uiOptions.showTitle ? uiOptions.label || Path.getPathLastProp(this.path) : '',
+            required: this.required
+        });
+        // 设置widget初始化状态 ui:component优先级 > ui:props优先级
+        const vNodeData = Schema.getUiComponent(this.widgetSchema);
+        const defaultProps = Object.assign({}, this.formItemProps, vNodeData || {});
+        Object.keys(defaultProps).forEach((key)=>{
+            if (Reflect.has(this.state, key)) {
+                this.setState(key, defaultProps[key]);
+            }
+        });
+        // 注册widget TreeNode
+        widgetTree.addWidgetNode(this.path, this, 'node');
+    },
+    mounted () {
+        // 注册联动
+        reactionRegister(this.path, this.widgetSchema['ui:reactions']);
+        // 首次联动
+        reactionDispatch(this.path, 'valChange');
+        reactionDispatch(this.path, 'lifetime/init');
+    },
+    beforeUnmount () {
+        widgetTree.removeWidgetNode(this.path, this);
+        reactionUnRegister(this.path);
+    },
+    methods: {
+        setState (key, value) {
+            if (Reflect.has(this.state, key)) {
+                this.state[key] = value;
+            } else if (key === 'value') {
+                // 特殊处理value设置
+                this.$emit('update:modelValue', {
+                    path: this.path,
+                    value
+                });
+            } else {
+                console.warn(`Widget unsupported ${key} state, please check`);
+            }
+        },
+        loadDataSource () {
+            return _async_to_generator(function*() {
+                var _this_widgetSchema_uicomponent, _this_widgetSchema;
+                const xhrConfig = (_this_widgetSchema = this.widgetSchema) === null || _this_widgetSchema === void 0 ? void 0 : (_this_widgetSchema_uicomponent = _this_widgetSchema['ui:component']) === null || _this_widgetSchema_uicomponent === void 0 ? void 0 : _this_widgetSchema_uicomponent.remoteConfig;
+                if (xhrConfig) {
+                    const { url, params } = xhrConfig, reset = _object_without_properties(xhrConfig, [
+                        "url",
+                        "params"
+                    ]);
+                    const { request: http = request, responseParse } = this.httpAdapter;
+                    try {
+                        this.loading = true;
+                        const remoteURL = executeExpression(url, this);
+                        const requestParams = isObj(params) ? executeExpression(params, this) : params;
+                        this.datasource = yield http(remoteURL, _object_spread_props(_object_spread({}, reset), {
+                            params: requestParams,
+                            responseParse
+                        }));
+                        this.loading = false;
+                    } catch (e) {
+                        this.loading = false;
+                        console.error(e);
+                    }
+                }
+            }).apply(this);
+        },
+        setErrorTips (tips) {
+            this.errorTips = tips;
+        },
+        getValue (path) {
+            return Path.getPathVal(this.rootData, path);
+        },
+        getReadonlyValue () {
+            var _this_widgetSchema_uicomponent;
+            let val = this.modelValue;
+            if (((_this_widgetSchema_uicomponent = this.widgetSchema['ui:component']) === null || _this_widgetSchema_uicomponent === void 0 ? void 0 : _this_widgetSchema_uicomponent.type) === 'password') {
+                val = '******';
+            } else if (this.datasource) {
+                var _this_datasource;
+                const item = (_this_datasource = this.datasource) === null || _this_datasource === void 0 ? void 0 : _this_datasource.find((item)=>item.value === this.modelValue);
+                if (item) {
+                    val = item.label;
+                }
+            }
+            let value = val === '' ? '--' : val;
+            if (Object.prototype.toString.call(value) === '[Object Object]') {
+                value = JSON.stringify(value);
+            } else if (Array.isArray(value)) {
+                const isTrue = value.some((item)=>item && typeof item === 'object');
+                if (isTrue) {
+                    value = JSON.stringify(value);
+                } else {
+                    value = value.join(',');
+                }
+            } else {
+                value = String(value);
+            }
+            return value;
+        },
+        getSchema () {
+            return this.widgetSchema;
+        },
+        setSchema (data) {
+            try {
+                this.privateSchema = JSON.parse(JSON.stringify(data));
+            } catch (err) {
+                console.warn(err);
+            }
+            return this.widgetSchema;
+        },
+        resetDatasource () {
+            var _this_widgetSchema_uicomponent, _this_widgetSchema;
+            const xhrConfig = (_this_widgetSchema = this.widgetSchema) === null || _this_widgetSchema === void 0 ? void 0 : (_this_widgetSchema_uicomponent = _this_widgetSchema['ui:component']) === null || _this_widgetSchema_uicomponent === void 0 ? void 0 : _this_widgetSchema_uicomponent.remoteConfig;
+            if (xhrConfig) {
+                this.loadDataSource();
+            } else {
+                this.datasource = Schema.resolveDefaultDatasource(this.widgetSchema);
+            }
+        },
+        // 获取 schema 中定义的默认值
+        getDefaultValue () {
+            return Schema.getSchemaDefaultValue(this.widgetSchema);
+        },
+        // 恢复默认值
+        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 _events_callbacks, _this_$slots_default, _this_$slots;
+        const _Schema_getUiComponent = Schema.getUiComponent(this.widgetSchema), { name } = _Schema_getUiComponent, uiVnodeData = _object_without_properties(_Schema_getUiComponent, [
+            "name"
+        ]);
+        // 注意顺序！！！
+        const widgetProps = _object_spread_props(_object_spread({}, this.$props), {
+            loading: this.loading,
+            modelValue: this.modelValue
+        });
+        const self = this;
+        const widgetName = register.getComponent(name) || name || Schema.getDefaultWidget(this.widgetSchema);
+        const widgetEvents = ((_events_callbacks = events.callbacks) === null || _events_callbacks === void 0 ? void 0 : _events_callbacks[this.path]) || {};
+        // 渲染表单项
+        const renderFormItem = ()=>{
+            var _this_widgetSchema_uicomponent;
+            return this.state.readonly && this.readonlyMode === 'value' && ((_this_widgetSchema_uicomponent = this.widgetSchema['ui:component']) === null || _this_widgetSchema_uicomponent === void 0 ? void 0 : _this_widgetSchema_uicomponent.name) !== 'table' ? renderReadonlyWidget : renderWidget;
+        };
+        var _this_$slots_default1;
+        // 渲染表单控件（当前state属性优先级最高）
+        const renderWidget = (_this_$slots_default1 = (_this_$slots_default = (_this_$slots = this.$slots).default) === null || _this_$slots_default === void 0 ? void 0 : _this_$slots_default.call(_this_$slots, {
+            path: this.path
+        })) !== null && _this_$slots_default1 !== void 0 ? _this_$slots_default1 : h(widgetName, mergeDeep(_object_spread_props(_object_spread({}, widgetProps, uiVnodeData || {}, Object.keys(widgetEvents).reduce((pre, key)=>{
+            pre[`on${capitalizeFirstLetter(key)}`] = widgetEvents[key];
+            return pre;
+        }, {})), {
+            schema: this.widgetSchema,
+            onClick () {
+                var _widgetEvents_click;
+                reactionDispatch(self.path, 'effect/click');
+                (_widgetEvents_click = widgetEvents.click) === null || _widgetEvents_click === void 0 ? void 0 : _widgetEvents_click.forEach((event)=>event());
+            },
+            'onUpdate:modelValue': (value)=>{
+                var _widgetEvents_updatemodelValue;
+                // 所有组件widget必须实现input事件，用于v-model时更新表单数据
+                self.$emit('update:modelValue', {
+                    path: self.path,
+                    value
+                });
+                (_widgetEvents_updatemodelValue = widgetEvents['update:modelValue']) === null || _widgetEvents_updatemodelValue === void 0 ? void 0 : _widgetEvents_updatemodelValue.forEach((event)=>event());
+            }
+        }), uiVnodeData, _object_spread_props(_object_spread({}, this.state), {
+            datasource: this.datasource,
+            readonly: this.readonly,
+            readonlyMode: this.readonlyMode
+        })));
+        const renderSuffix = ()=>{
+            var _this_$slots_suffix, _this_$slots;
+            return (_this_$slots_suffix = (_this_$slots = this.$slots).suffix) === null || _this_$slots_suffix === void 0 ? void 0 : _this_$slots_suffix.call(_this_$slots, {
+                path: this.path,
+                schema: this.widgetSchema
+            });
+        };
+        // 渲染默认readonly模式
+        const renderReadonlyWidget = h('div', {}, {
+            default: ()=>this.getReadonlyValue()
+        });
+        // 渲染删除按钮（用于数组类型widget删除）
+        const renderDelete = ()=>{
+            if (!this.removeable) return null;
+            return h('span', {
+                class: [
+                    'bk-schema-form-group-delete'
+                ],
+                onClick: ()=>{
+                    self.$emit('remove', self.path);
+                }
+            }, [
+                h('i', {
+                    class: [
+                        'bk-form-icon icon-close3-shape'
+                    ]
+                })
+            ]);
+        };
+        // 渲染恢复默认值按钮
+        const renderResetDefault = ()=>{
+            var _this_widgetSchema_uiprops;
+            // 优先使用 schema 中的配置，否则使用全局配置
+            const schemaShowResetDefault = (_this_widgetSchema_uiprops = this.widgetSchema['ui:props']) === null || _this_widgetSchema_uiprops === void 0 ? void 0 : _this_widgetSchema_uiprops.showResetDefault;
+            const showResetDefault = schemaShowResetDefault !== undefined ? schemaShowResetDefault : this.showResetDefault;
+            // 不显示恢复默认值按钮，或者当前值已经是默认值
+            if (!showResetDefault || this.isDefaultValue() || this.state.readonly || this.state.disabled) {
+                return null;
+            }
+            return withDirectives(h('span', {
+                class: [
+                    'bk-schema-form-reset-default',
+                    'bk-form-icon icon-reset'
+                ],
+                onClick: ()=>{
+                    self.resetToDefault();
+                }
+            }), [
+                [
+                    bkTooltips,
+                    {
+                        content: '恢复默认值'
+                    }
+                ]
+            ]);
+        };
+        // 渲染错误提示
+        const renderError = ()=>this.state.error ? h('p', {
+                class: 'bk-schema-form-item__error-tips'
+            }, {
+                default: ()=>this.errorTips
+            }) : null;
+        // 渲染表单提示
+        const renderFormTips = ()=>this.formItemProps.tips ? h('p', {
+                class: [
+                    'mt5',
+                    'mb0',
+                    'f12'
+                ],
+                style: {
+                    color: '#5e6d82',
+                    lineHeight: '1.5em'
+                }
+            }, {
+                default: ()=>this.formItemProps.tips
+            }) : null;
+        // 渲染 label 插槽内容（包含 label 文本和重置按钮）
+        const renderLabel = ()=>{
+            const labelText = this.formItemProps.label;
+            const { description } = this.widgetSchema;
+            if (description) {
+                return [
+                    withDirectives(h('span', {
+                        class: {
+                            'bk-schema-form-label-description': description
+                        }
+                    }, labelText), [
+                        [
+                            bkTooltips,
+                            {
+                                content: description,
+                                disabled: !description
+                            }
+                        ]
+                    ]),
+                    renderResetDefault()
+                ];
+            }
+            return [
+                labelText,
+                renderResetDefault()
+            ];
+        };
+        return h(register.getBaseWidget('form-item'), _object_spread_props(_object_spread({
+            key: this.key
+        }, this.formItemProps), {
+            style: _object_spread_props(_object_spread({}, this.layout.item || {}, this.layout.container || {}), {
+                // 表单项显示和隐藏状态
+                display: this.state.visible ? '' : 'none'
+            }),
+            class: {
+                'bk-schema-form-item--error': this.state.error
+            }
+        }), {
+            label: renderLabel,
+            default: ()=>[
+                    renderFormItem(),
+                    renderSuffix(),
+                    renderDelete(),
+                    renderError(),
+                    renderFormTips()
+                ]
+        });
+    }
+});

package/esm/assets/style.css

@@ -0,0 +1,43 @@
+@font-face {
+	font-family: "bk-form";
+	src: url("fonts/iconcool.svg#iconcool") format("svg"),
+url("fonts/iconcool.ttf") format("truetype"),
+url("fonts/iconcool.woff") format("woff"),
+url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.bk-form-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'bk-form' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  text-align: center;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-minus-line:before {
+	content: "\e102";
+}
+.icon-plus-line:before {
+	content: "\e104";
+}
+.icon-plus-circle-shape:before {
+	content: "\e105";
+}
+.icon-close3-shape:before {
+	content: "\e106";
+}
+.icon-down-shape:before {
+	content: "\e107";
+}
+.icon-reset:before {
+	content: "\e108";
+}