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

package/esm/controller/form.css

@@ -0,0 +1,164 @@
+.bk-schema-form {
+  font-size: 12px;
+  .mb10 {
+    margin-bottom: 10px;
+  }
+  .mb0 {
+    margin-bottom: 0px;
+  }
+  .mt5 {
+    margin-top: 5px;
+  }
+  .mr24 {
+    margin-right: 24px;
+  }
+  .mr5 {
+    margin-right: 5px;
+  }
+  .pr20 {
+    padding-right: 20px;
+  }
+  .bk-form-item {
+    margin-top: unset !important;
+    margin-bottom: unset !important;
+  }
+  .bk-schema-form-group.normal {
+    padding: 24px;
+    position: relative;
+  }
+  .bk-schema-form-group.card{
+    background: #fff;
+    padding: 0 24px 24px 24px;
+    border-radius: 2px;
+  }
+  .bk-schema-form-group.hide-empty-row .bk-schema-form-group-content {
+    row-gap: 0 !important;
+  }
+  .bk-schema-form-group.hide-empty-row .bk-schema-form-group-content .bk-form-item {
+    margin-bottom: 20px;
+  }
+  .bk-schema-form-group--error {
+    border-color: #f5222d !important;
+  }
+  .bk-schema-form-group__error-tips{
+    position: relative;
+    display: block;
+    width: 10px;
+    height: 10px;
+  }
+  .bk-schema-form-group__error-tips-popover {
+    position: absolute;
+    top: -5px;
+    left: 0;
+    z-index: 1;
+    background: #fff;
+    border: 1px solid #f5222d;
+    color: #f5222d;
+    font-size: 12px;
+    margin-left: 10px;
+    font-weight: normal;
+    padding: 5px 10px;
+    border-radius: 2px;
+    max-height: 50px;
+    overflow:hidden;
+  }
+  .bk-schema-form-group__error-tips-popover:hover {
+    max-height: unset;
+  }
+  
+  .bk-schema-form-group__error-tips-popover > p {
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+  }
+  .bk-schema-form-group .bk-schema-form-group-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #63656E;
+  }
+  .bk-schema-form-group .bk-schema-form-group-title.default {
+    display: inline-block;
+    margin-bottom: 10px;
+  }
+  .bk-schema-form-group .bk-schema-form-group-title.normal {
+    position: absolute;
+    top: -1em;
+    left:  10px;
+    line-height: 2em;
+    padding: 0 0.5em;
+    background: #fff;
+  }
+  .bk-schema-form-group .bk-schema-form-group-title.card{
+    display: flex;
+    height: 50px;
+    align-items: center;
+    padding: 0 24px;
+    margin: 0 -24px 8px -24px;
+  }
+  .bk-schema-form-group-add {
+    font-size: 14px;
+    color: #3a84ff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+  .bk-schema-form-group-delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 8px;
+    top: 6px;
+    cursor: pointer;
+    color: #979bA5;
+    font-size: 14px;
+  }
+  .bk-schema-form-group-delete:hover {
+    color: #3a84ff;
+  }
+  .bk-schema-form-reset-default {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+    cursor: pointer;
+    color: #979bA5;
+    font-size: 14px;
+  }
+  .bk-schema-form-reset-default:hover {
+    color: #3a84ff;
+  }
+  .bk-schema-form-label-description {
+    cursor: pointer;
+    border-bottom: 1px dashed #979ba5;
+  }
+  .bk-schema-form-item__error-tips {
+    color: #f5222d;
+    font-size: 12px;
+    margin-top: 5px;
+    margin: 0;
+    line-height: 1.5em;
+  }
+  .bk-schema-form-item--error .bk-input,
+  .bk-schema-form-item--error .bk-textarea-wrapper,
+  .bk-schema-form-item--error .bk-select {
+    border: 1px solid #f5222d;
+    box-shadow: none;
+  }
+  .bk-schema-form-item-auto-height .bk-form-content {
+    min-height: auto;
+    line-height: 1;
+  }
+  .table-widget-actions .action-btn {
+    margin-right: 8px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .table-widget-actions .action-btn:hover {
+    color: #3a84ff;
+  }
+  .is-disabled .action-btn {
+    color: #dcdee5 !important;
+    cursor: not-allowed;
+  }
+}

package/esm/controller/form.tsx.js

@@ -0,0 +1,159 @@
+import { defineComponent, h } from 'vue';
+import { merge, deepEquals, mergeDeep, hasOwnProperty } from '../util/index.ts.js';
+import registry, { Registry } from '../core/register.ts.js';
+import Schema from '../core/schema.ts.js';
+import Layout from '../core/layout.ts.js';
+import createProxy from '../core/proxy.ts.js';
+import Path from '../core/path.ts.js';
+import props from './props.ts.js';
+import SchemaField from '../adapter/field/SchemaField.tsx.js';
+import ObjectField from '../adapter/field/ObjectField.tsx.js';
+import NumberField from '../adapter/field/NumberField.tsx.js';
+import StringField from '../adapter/field/StringField.tsx.js';
+import ArrayField from '../adapter/field/ArrayField.tsx.js';
+import BooleanField from '../adapter/field/BooleanField.tsx.js';
+import CompositionField from '../adapter/field/CompositionField.tsx.js';
+import CheckboxWidget from '../adapter/widget/CheckboxWidget.ts.js';
+import SelectWidget from '../adapter/widget/SelectWidget.ts.js';
+import RadioWidget from '../adapter/widget/RadioWidget.ts.js';
+import ButtonWidget from '../adapter/widget/ButtonWidget.ts.js';
+import TableWidget from '../adapter/widget/TableWidget.ts.js';
+import FieldGroupWrap from '../adapter/common/FieldGroupWrap.tsx.js';
+import KeyValueArrayWidget from '../adapter/widget/KeyValueArrayWidget.tsx.js';
+import TabGroupWidget from '../adapter/widget/TabGroupWidget.ts.js';
+import CollapseGroupWidget from '../adapter/widget/CollapseGroupWidget.ts.js';
+import SwitcherWidget from '../adapter/widget/SwitchWidget.ts.js';
+import ColorWidget from '../adapter/widget/ColorPickerWidget.ts.js';
+import InputWidget from '../adapter/widget/InputWidget.ts.js';
+import './form.css';
+import { registryGlobalRules, validateForm, validateFormItem, validateFormWithResult, validateSchema, DEFAULT_RULES } from '../core/validator.ts.js';
+const defaultOptions = {
+    namespace: 'bk',
+    // 包装组件库组件(添加一些属性方便配置)
+    components: {
+        button: ButtonWidget,
+        select: SelectWidget,
+        radio: RadioWidget,
+        checkbox: CheckboxWidget,
+        table: TableWidget,
+        group: FieldGroupWrap,
+        bfArray: KeyValueArrayWidget,
+        tab: TabGroupWidget,
+        collapse: CollapseGroupWidget,
+        switcher: SwitcherWidget,
+        color: ColorWidget,
+        bfInput: InputWidget
+    },
+    fields: {
+        object: ObjectField,
+        string: StringField,
+        any: '',
+        array: ArrayField,
+        boolean: BooleanField,
+        null: '',
+        integer: NumberField,
+        number: NumberField,
+        composition: CompositionField
+    }
+};
+export default function createForm(opts = {}) {
+    const options = mergeDeep(defaultOptions, opts);
+    const { namespace, components, fields, baseWidgets = {} } = options;
+    Registry.namespace = namespace;
+    registry.addComponentsMap(components);
+    registry.addFieldsMap(fields);
+    registry.addBaseWidgets(baseWidgets);
+    return defineComponent({
+        name: 'BkuiForm',
+        props,
+        data () {
+            return {
+                rootData: {},
+                formKey: 'bk-ui-form'
+            };
+        },
+        watch: {
+            schema (newSchema, oldSchema) {
+                if (JSON.stringify(newSchema) === JSON.stringify(oldSchema)) return;
+                this.validateSchema(this.schema);
+                this.initFormData();
+                this.formKey = `bk-ui-form-${new Date().getTime()}`;
+            },
+            context: {
+                handler (ctx) {
+                    Registry.context = ctx;
+                    if (hasOwnProperty(ctx, 'rules')) {
+                        registryGlobalRules(ctx.rules);
+                    }
+                },
+                immediate: true
+            },
+            rules: {
+                immediate: true,
+                handler (value) {
+                    registryGlobalRules(value);
+                }
+            },
+            modelValue () {
+                this.initFormData();
+            }
+        },
+        beforeCreate () {
+            registryGlobalRules(DEFAULT_RULES);
+        },
+        created () {
+            this.validateSchema(this.schema);
+            this.initFormData();
+        },
+        methods: {
+            initFormData () {
+                this.rootData = merge(Schema.getSchemaDefaultValue(createProxy(this.schema, this)) || {}, this.modelValue);
+                this.emitFormValueChange(this.rootData, this.modelValue);
+            },
+            emitFormValueChange (newValue, oldValue) {
+                if (!deepEquals(newValue, oldValue)) {
+                    this.rootData = newValue;
+                    this.$emit('update:modelValue', newValue);
+                    this.$emit('change', newValue, oldValue);
+                }
+            },
+            validateForm,
+            validateFormItem,
+            validate: validateFormWithResult,
+            validateSchema
+        },
+        render () {
+            const self = this;
+            return h(registry.getBaseWidget('form'), {
+                ref: 'bkui-form',
+                key: this.formKey,
+                model: this.modelValue,
+                formType: this.formType,
+                labelWidth: this.labelWidth,
+                class: {
+                    'bk-schema-form': true
+                },
+                style: {
+                    width: typeof this.width === 'number' ? `${this.width}px` : this.width
+                }
+            }, {
+                default: ()=>h(SchemaField, Object.assign(Object.assign({}, this.$props), {
+                        schema: createProxy(this.schema, this),
+                        rootData: this.rootData,
+                        modelValue: this.modelValue,
+                        layout: new Layout(this.layout).layout,
+                        'onUpdate:modelValue': ({ path = '', value })=>{
+                            if (!path) {
+                                // console.warn('set rootData');
+                                self.emitFormValueChange(value, self.modelValue);
+                            } else {
+                                // 双向绑定逻辑
+                                const newValue = Path.setPathValue(self.rootData, path, value);
+                                self.emitFormValueChange(newValue, self.modelValue);
+                            }
+                        }
+                    }), this.$slots)
+            });
+        }
+    });
+}

package/esm/controller/props.ts.js

@@ -0,0 +1,75 @@
+import request from '../util/fetch.ts.js';
+export default {
+    // 表单值
+    modelValue: {
+        type: Object,
+        default: ()=>({})
+    },
+    rules: {
+        type: Object,
+        default: ()=>({})
+    },
+    schema: {
+        type: Object,
+        default: ()=>({})
+    },
+    width: {
+        type: [
+            String,
+            Number
+        ],
+        default: '100%'
+    },
+    // 表单布局
+    layout: {
+        type: [
+            Array,
+            Object
+        ],
+        default: ()=>[]
+    },
+    // 表单类型
+    formType: {
+        type: String,
+        default: 'default'
+    },
+    // 表单全局上下文
+    context: {
+        type: Object,
+        default: ()=>({})
+    },
+    // http请求适配器
+    httpAdapter: {
+        type: Object,
+        default: ()=>({
+                request,
+                responseParse: (res)=>res
+            })
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    // 透传 disabled 属性
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    readonlyMode: {
+        type: String,
+        default: 'value',
+        validator: (value)=>[
+                'value',
+                'custom'
+            ].includes(value)
+    },
+    labelWidth: {
+        type: Number,
+        default: 150
+    },
+    // 全局配置：是否显示恢复默认值按钮
+    showResetDefault: {
+        type: Boolean,
+        default: false
+    }
+};

package/esm/core/events.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;
+}
+export class FormEvent {
+    on(path, type, cb) {
+        if (!(path in this.callbacks)) {
+            this.callbacks[path] = {};
+        }
+        if (!(type in this.callbacks[path])) {
+            this.callbacks[path][type] = [];
+        }
+        this.callbacks[path][type].push(cb);
+        return this;
+    }
+    off(path, type, cb) {
+        if (!(path && type)) {
+            // 参数全部为空，清空callbacks
+            this.callbacks = Object.create(null);
+        } else if (path && !type) {
+            // 清空当前path所有事件
+            delete this.callbacks[path];
+        } else if (path && type && !cb) {
+            // 清空当前type的所有事件
+            delete this.callbacks[path][type];
+        } else {
+            // 清空对应事件
+            const events = this.callbacks[path][type];
+            // eslint-disable-next-line no-restricted-syntax
+            for(const index in events){
+                if (cb === events[index]) {
+                    events.splice(Number(index), 1);
+                }
+            }
+        }
+        return this;
+    }
+    once(path, type, cb) {
+        const _this = this;
+        function innerOnce(...arg) {
+            cb(...arg);
+            _this.off(path, type, innerOnce);
+        }
+        innerOnce.fn = cb;
+        this.on(path, type, innerOnce);
+        return this;
+    }
+    emit(path, type, ...arg) {
+        if (!this.callbacks[path]) return;
+        if (type in this.callbacks[path]) {
+            const runs = [
+                ...this.callbacks[path][type]
+            ];
+            for (const cb of runs){
+                cb(...arg);
+            }
+        }
+    }
+    constructor(){
+        _define_property(this, "callbacks", void 0);
+        this.callbacks = Object.create(null);
+    }
+}
+export default new FormEvent();

package/esm/core/expression.ts.js

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */ import { isObj } from '../util/index.ts.js';
+import { Registry } from './register.ts.js';
+// 组件对外暴露的上下文
+export const getContext = (instance)=>{
+    const { context, loadDataSource, validate, schema, rootData, widgetNode } = instance;
+    return {
+        $self: instance,
+        $context: context,
+        $schema: schema,
+        $rules: schema.rules,
+        $loadDataSource: loadDataSource,
+        $validate: validate,
+        $rootData: rootData,
+        $widgetNode: widgetNode
+    };
+};
+export const executeExpression = (expression, instance, $dep = [])=>{
+    const { $self, $context, $schema, $rules, $loadDataSource, $validate, $rootData, $widgetNode } = getContext(instance);
+    const context = {
+        $self,
+        $context,
+        $schema,
+        $rules,
+        $loadDataSource,
+        $validate,
+        $rootData,
+        $widgetNode,
+        $dep
+    };
+    if (typeof expression === 'string') {
+        if (!/^{{.+}}$/.test(expression.trim())) return expression; // 没有上下文时直接返回
+        const expStr = expression.trim().replace(/(^{{)|(}}$)/g, '') // 去掉{{ }}
+        .trim();
+        const innerFuncs = [
+            '$loadDataSource',
+            '$validate'
+        ];
+        const func = function({ $self, $context, $schema, $rules, $loadDataSource, $validate, $rootData, $widgetNode, $dep }) {
+            try {
+                // eslint-disable-next-line no-eval
+                return innerFuncs.includes(expStr) ? eval(`${expStr}()`) : eval(expStr);
+            } catch (err) {
+                console.error(`execute ${expStr} error, please check. \n`, err);
+            }
+        };
+        return func(context);
+    }
+    if (isObj(expression)) {
+        Object.keys(expression).forEach((key)=>{
+            expression[key] = executeExpression(expression[key], instance);
+        });
+        return expression;
+    }
+};
+// 解析字符串模板（无上下文时使用，只能解析context内容）
+export const parseStrTemplate = (expression)=>{
+    const $context = Registry.context;
+    const expStr = expression.trim().replace(/(^{{)|(}}$)/g, '').trim();
+    try {
+        // eslint-disable-next-line no-new-func
+        const func = new Function('$context', `return ${expStr}`);
+        return func($context);
+    } catch (err) {
+        console.error(`parse template ${expression} error`, err);
+    }
+};
+export const isExpression = (expression)=>typeof expression === 'string' && /{{.*}}/.test(expression);

package/esm/core/lang.ts.js

@@ -0,0 +1,25 @@
+import { getCookie } from '../util/index.ts.js';
+const messages = {
+    'zh-CN': {
+        add: '添加'
+    },
+    'en-US': {
+        add: 'Add'
+    }
+};
+export default function locale(item) {
+    var _messages_curLang;
+    let curLang = getCookie('blueking_language') || 'zh-CN';
+    if ([
+        'en-US',
+        'enUS',
+        'enus',
+        'en-us',
+        'en'
+    ].includes(curLang)) {
+        curLang = 'en-US';
+    } else {
+        curLang = 'zh-CN';
+    }
+    return ((_messages_curLang = messages[curLang]) === null || _messages_curLang === void 0 ? void 0 : _messages_curLang[item]) || '';
+}