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

package/esm/controller/form.css

@@ -1,164 +0,0 @@
-.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

@@ -1,159 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,74 +0,0 @@
-// 事件订阅器
-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

@@ -1,67 +0,0 @@
-/* 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

@@ -1,25 +0,0 @@
-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]) || '';
-}