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

package/package.json

@@ -1,22 +1,30 @@
 {
-  "version": "1.0.1-beta.3",
-  "main": "esm/index.ts.js",
+  "version": "1.0.1-beta.4",
   "name": "@blueking/bkui-form",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
   "scripts": {
-    "build": "gulp build",
-    "build:esm": "bk-cli-service build",
-    "dev": "gulp dev",
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
     "playground": "node ./playground/server.js",
     "test": "jest",
     "coverage": "jest --coverage",
-    "build:tsc-esm": "tsc --emitDeclarationOnly -d --outDir /dist/esm/",
-    "build:tsc-umd": "tsc --emitDeclarationOnly -d --outDir /dist/umd/",
     "docs:dev": "vitepress dev docs-vitepress",
     "docs:build": "vitepress build docs-vitepress",
     "docs:preview": "vitepress preview docs-vitepress"
   },
   "files": [
-    "esm/"
+    "dist/"
   ],
   "keywords": [],
   "author": "",
@@ -24,23 +32,27 @@
   "description": "",
   "devDependencies": {
     "@babel/preset-typescript": "^7.23.3",
-    "@blueking/babel-preset-bk": "^2.1.0-beta.10",
-    "@blueking/cli-service": "0.1.0-beta.31",
-    "@blueking/eslint-config-bk": "2.1.0-beta.6",
     "@types/jest": "^27.0.3",
     "@types/json-schema": "^7.0.9",
     "@types/node": "^20.10.1",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "bkui-vue": "^2.0.2-beta.62",
     "fs-extra": "^11.2.0",
-    "gulp": "^4.0.2",
     "jest": "^27.4.4",
     "koa": "^2.7.0",
     "koa-static": "^5.0.0",
     "ts-jest": "^27.1.1",
     "typescript": "^4.4.3",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
     "vitepress": "^1.3.4",
     "vue": "^3.3.9"
   },
+  "peerDependencies": {
+    "bkui-vue": ">=2.0.0",
+    "vue": ">=3.0.0"
+  },
   "dependencies": {
     "ajv": "^8.11.0",
     "ajv-formats": "^2.1.1",

package/esm/adapter/common/FieldGroupWrap.tsx.js

@@ -1,199 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import widgetTree from '../../core/widgetTree.ts.js';
-import { h, defineComponent, withDirectives } from 'vue';
-import props from '../field/FieldProps.ts.js';
-import Schema from '../../core/schema.ts.js';
-import { deepEquals } from '../../util/index.ts.js';
-import { bkTooltips } from 'bkui-vue';
-export default defineComponent({
-    name: 'FieldGroupWrap',
-    props: Object.assign(Object.assign({}, props), {
-        // 组类型
-        type: {
-            type: String,
-            default: 'default',
-            validator: (value)=>[
-                    'default',
-                    'normal',
-                    'card'
-                ].includes(value)
-        },
-        // 是否显示组title
-        showTitle: {
-            type: Boolean,
-            default: false
-        },
-        // 是否显示border
-        border: {
-            type: Boolean,
-            default: false
-        },
-        verifiable: {
-            type: Boolean,
-            default: false
-        },
-        hideEmptyRow: {
-            type: Boolean,
-            default: false
-        },
-        showResetDefault: {
-            type: Boolean,
-            default: false
-        }
-    }),
-    data () {
-        return {
-            groupErrorTips: {},
-            state: {
-                // 组类型目前只支持visible
-                visible: true
-            }
-        };
-    },
-    computed: {
-        // 兼容以前数据结构
-        value () {
-            return this.modelValue;
-        }
-    },
-    created () {
-        // 注册widget TreeNode
-        widgetTree.addWidgetNode(this.path, this, 'group');
-    },
-    mounted () {
-        // 更新样式
-        this.$forceUpdate();
-    },
-    beforeUnmount () {
-        widgetTree.removeWidgetNode(this.path, this);
-    },
-    methods: {
-        setState (key, value) {
-            if (Reflect.has(this.state, key)) {
-                this.state[key] = value;
-            } else {
-                console.warn(`Group unsupported ${key} state, please check`);
-            }
-        },
-        setGroupErrorTips (widgetPath, errorTips) {
-            this.groupErrorTips[widgetPath] = errorTips;
-        },
-        removeGroupErrorTips (widgetPath) {
-            delete this.groupErrorTips[widgetPath];
-        },
-        clearGroupErrorTips () {
-            this.groupErrorTips = {};
-        },
-        // 获取 schema 中定义的默认值
-        getDefaultValue () {
-            return Schema.getSchemaDefaultValue(this.schema);
-        },
-        // 恢复默认值
-        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 _a, _b, _c, _d, _e, _f;
-        const schemaFormStyle = Object.assign({
-            position: 'relative',
-            border: this.border ? '1px solid #dcdee5' : 'none',
-            display: !this.state.visible ? 'none' : ''
-        }, ((_a = this.layout) === null || _a === void 0 ? void 0 : _a.item) || {});
-        const groupContentStyle = Object.assign({}, ((_b = this.layout) === null || _b === void 0 ? void 0 : _b.container) || {
-            display: 'grid',
-            gridGap: '24px' // 未设置layout的布局组的默认样式
-        });
-        const self = this;
-        const renderDelete = ()=>h('span', {
-                class: [
-                    'bk-schema-form-group-delete'
-                ],
-                onClick () {
-                    self.$emit('remove', self.path);
-                }
-            }, [
-                h('i', {
-                    class: [
-                        'bk-form-icon icon-close3-shape'
-                    ]
-                })
-            ]);
-        const title = ((_c = this.schema) === null || _c === void 0 ? void 0 : _c.title) || ((_d = this.layout) === null || _d === void 0 ? void 0 : _d.prop);
-        const groupErrorTipsContent = Object.keys(this.groupErrorTips).map((widgetPath)=>_createVNode("p", null, [
-                this.groupErrorTips[widgetPath]
-            ]));
-        const hasError = JSON.stringify(this.groupErrorTips) !== '{}';
-        // 渲染恢复默认值按钮
-        const renderResetDefault = ()=>{
-            // 不显示恢复默认值按钮，或者当前值已经是默认值
-            if (!this.showResetDefault || this.isDefaultValue() || this.readonly || this.disabled) {
-                return null;
-            }
-            return withDirectives(h('span', {
-                class: [
-                    'bk-schema-form-reset-default',
-                    'bk-form-icon icon-reset'
-                ],
-                onClick: ()=>{
-                    self.resetToDefault();
-                }
-            }), [
-                [
-                    bkTooltips,
-                    {
-                        content: '恢复默认值'
-                    }
-                ]
-            ]);
-        };
-        return _createVNode("div", {
-            "class": [
-                'bk-schema-form-group',
-                this.type,
-                {
-                    'hide-empty-row': this.hideEmptyRow
-                },
-                {
-                    'bk-schema-form-group--error': hasError
-                }
-            ],
-            "style": schemaFormStyle
-        }, [
-            title && this.showTitle ? _createVNode("span", {
-                "class": [
-                    'bk-schema-form-group-title',
-                    this.type
-                ]
-            }, [
-                title,
-                renderResetDefault(),
-                hasError ? _createVNode("span", {
-                    "class": "bk-schema-form-group__error-tips"
-                }, [
-                    _createVNode("span", {
-                        "class": "bk-schema-form-group__error-tips-popover"
-                    }, [
-                        groupErrorTipsContent
-                    ])
-                ]) : null
-            ]) : null,
-            _createVNode("div", {
-                "style": groupContentStyle,
-                "class": "bk-schema-form-group-content"
-            }, [
-                (_f = (_e = this.$slots) === null || _e === void 0 ? void 0 : _e.default) === null || _f === void 0 ? void 0 : _f.call(_e)
-            ]),
-            this.removeable && renderDelete()
-        ]);
-    }
-});

package/esm/adapter/field/ArrayField.tsx.js

@@ -1,55 +0,0 @@
-var __rest = this && this.__rest || function(s, e) {
-    var t = {};
-    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-    }
-    return t;
-};
-import Schema from '../../core/schema.ts.js';
-import { defineComponent, h } from 'vue';
-import props from './FieldProps.ts.js';
-import Widget from '../widget/Widget.ts.js';
-import SchemaField from './SchemaField.tsx.js';
-import Path from '../../core/path.ts.js';
-import { mergeDeep } from '../../util/index.ts.js';
-import ArrayWidget from '../widget/ArrayWidget.ts.js';
-export default defineComponent({
-    name: 'ArrayField',
-    props,
-    render () {
-        const { schema, path } = this.$props;
-        if (Schema.isMultiSelect(schema) || Schema.isCustomArrayWidget(schema)) {
-            // 多选类型 或 自定义数组类型（伪数组类型(只有一个FormItem，但是值为数组，值一般由自定义Widget控件决定)）
-            return h(Widget, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-                key: path,
-                schema: mergeDeep({
-                    'ui:component': {
-                        multiple: true
-                    }
-                }, this.$props.schema)
-            }), this.$slots);
-        }
-        // 元组类型
-        if (Schema.isTupleArray(schema)) {
-            const _a = Schema.getGroupWrap(schema), { name } = _a, vnode = __rest(_a, [
-                "name"
-            ]);
-            const tupleVnodeList = schema.items.map((item, index)=>h(SchemaField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-                    key: Path.getCurPath(path, index),
-                    schema: item,
-                    path: Path.getCurPath(path, index)
-                }), this.$slots));
-            return h(name, mergeDeep(Object.assign(Object.assign({}, this.$props), {
-                path,
-                showTitle: true
-            }), vnode), {
-                default: ()=>[
-                        ...tupleVnodeList
-                    ]
-            });
-        }
-        // 一般数组类型
-        return h(ArrayWidget, Object.assign(Object.assign({}, this.$attrs), this.$props), this.$slots);
-    }
-});

package/esm/adapter/field/BooleanField.tsx.js

@@ -1,41 +0,0 @@
-import { defineComponent, h } from 'vue';
-import props from './FieldProps.ts.js';
-import Widget from '../widget/Widget.ts.js';
-import { mergeDeep } from '../../util/index.ts.js';
-export default defineComponent({
-    name: 'BooleanField',
-    props,
-    render () {
-        var _a;
-        const { name } = this.$props.schema['ui:component'] || {};
-        let widgetProps = {};
-        if ([
-            'radio',
-            'select'
-        ].includes(name)) {
-            // radioGroup、select类型需要默认数据源
-            widgetProps = {
-                datasource: [
-                    {
-                        label: 'False',
-                        value: false
-                    },
-                    {
-                        label: 'True',
-                        value: true
-                    }
-                ]
-            };
-        } else if (name === 'checkbox') {
-            // boolean 类型checkbox
-            widgetProps = {
-                label: (_a = this.$props.schema) === null || _a === void 0 ? void 0 : _a.title
-            };
-        }
-        return h(Widget, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-            schema: mergeDeep({
-                'ui:component': Object.assign({}, widgetProps)
-            }, this.$props.schema)
-        }), this.$slots);
-    }
-});

package/esm/adapter/field/CompositionField.tsx.js

@@ -1,113 +0,0 @@
-var __rest = this && this.__rest || function(s, e) {
-    var t = {};
-    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-    }
-    return t;
-};
-import Path from '../../core/path.ts.js';
-import register from '../../core/register.ts.js';
-import Schema from '../../core/schema.ts.js';
-import { isObj, mergeDeep } from '../../util/index.ts.js';
-import { defineComponent, h } from 'vue';
-import props from './FieldProps.ts.js';
-import SchemaField from './SchemaField.tsx.js';
-import Widget from '../widget/Widget.ts.js';
-import { ajv } from '../../core/validator.ts.js';
-export default defineComponent({
-    name: 'CompositionField',
-    props: Object.assign({}, props),
-    data () {
-        return {
-            activeIndex: -1
-        };
-    },
-    computed: {
-        composition () {
-            var _a, _b;
-            if ((_a = this.schema.anyOf) === null || _a === void 0 ? void 0 : _a.length) {
-                return 'anyOf';
-            }
-            if ((_b = this.schema.oneOf) === null || _b === void 0 ? void 0 : _b.length) {
-                return 'oneOf';
-            }
-            return '';
-        }
-    },
-    created () {
-        // 初始化默认 composition 选项
-        const compositionList = this.schema[this.composition] || [];
-        // 没有required选项时回显不成功
-        const index = compositionList.findIndex((item)=>ajv.validate(item, this.modelValue));
-        this.activeIndex = index > -1 ? index : 0;
-    },
-    render () {
-        const compositionList = this.schema[this.composition] || [];
-        const schemaList = compositionList.map((item)=>{
-            const data = mergeDeep({}, this.schema, item);
-            delete data[this.composition];
-            return data;
-        });
-        const _a = Schema.getUiProps(`ui:${this.composition}`, this.schema), { name: com = 'radio' } = _a, // 默认用radio组件
-        vnodeData = __rest(_a, [
-            "name"
-        ]);
-        const isConst = typeof this.schema.type !== 'object' && schemaList.every((item)=>item.const);
-        if (isConst) {
-            // 全是常量
-            return h(Widget, Object.assign(Object.assign({}, this.$props), this.$attrs), this.$slots);
-        }
-        const compositionVnodeData = __rest(Schema.getUiProps('ui:composition', this.schema), []);
-        return h(register.getComponent('group'), mergeDeep(Object.assign(Object.assign({}, this.$props), {
-            rootData: this.rootData,
-            schema: this.schema,
-            modelValue: Path.getPathVal(this.rootData, this.path),
-            path: this.path,
-            onRemove () {
-                this.$emit('remove', this.path);
-            }
-        }), compositionVnodeData), {
-            default: ()=>[
-                    // anyOf component
-                    h(register.getBaseWidget('form-item'), {
-                        label: vnodeData === null || vnodeData === void 0 ? void 0 : vnodeData.title
-                    }, {
-                        default: ()=>h(register.getComponent(com), mergeDeep({
-                                modelValue: this.activeIndex,
-                                datasource: schemaList.map((item, index)=>({
-                                        label: item.title || '',
-                                        value: index
-                                    })),
-                                clearable: false,
-                                'onUpdate:modelValue': (index)=>{
-                                    this.activeIndex = index;
-                                    // 删除其他 composition 字段
-                                    if (isObj(this.modelValue)) {
-                                        const newValue = JSON.parse(JSON.stringify(this.modelValue));
-                                        const props = compositionList.filter((_, index)=>index !== this.activeIndex).reduce((pre, item)=>{
-                                            const { properties = {} } = item;
-                                            pre.push(...Object.keys(properties));
-                                            return pre;
-                                        }, []);
-                                        props.forEach((prop)=>{
-                                            delete newValue[prop];
-                                        });
-                                        this.$emit('update:modelValue', {
-                                            path: this.path,
-                                            value: newValue
-                                        });
-                                    }
-                                }
-                            }, vnodeData || {}))
-                    }),
-                    // schema
-                    h(SchemaField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-                        key: this.activeIndex,
-                        removeable: false,
-                        schema: schemaList[this.activeIndex]
-                    }), this.$slots)
-                ]
-        });
-    }
-});

package/esm/adapter/field/FieldProps.ts.js

@@ -1,85 +0,0 @@
-import request from '../../util/fetch.ts.js';
-export default {
-    // 当前项shema
-    schema: {
-        type: Object,
-        default: ()=>({})
-    },
-    // 当前路径（唯一标识）
-    path: {
-        type: String,
-        default: ''
-    },
-    // 是否必须字段
-    required: {
-        type: Boolean,
-        default: false
-    },
-    // 全量数据（只读）
-    rootData: {
-        type: Object,
-        default: ()=>({})
-    },
-    // 当前值
-    modelValue: {
-        type: [
-            String,
-            Number,
-            Array,
-            Object,
-            Boolean
-        ]
-    },
-    // 布局配置
-    layout: {
-        type: Object,
-        default: ()=>({})
-    },
-    // 当前全局变量上下文
-    context: {
-        type: Object,
-        default: ()=>({})
-    },
-    // 当前项是否可移除
-    removeable: {
-        type: Boolean,
-        default: false
-    },
-    // http请求适配器
-    httpAdapter: {
-        type: Object,
-        default: ()=>({
-                request,
-                responseParse: (res)=>res
-            })
-    },
-    visible: {
-        type: Boolean,
-        default: true
-    },
-    error: {
-        type: Boolean,
-        default: false
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    readonlyMode: {
-        type: String,
-        default: 'value',
-        validator: (value)=>[
-                'value',
-                'custom'
-            ].includes(value)
-    },
-    // 全局配置：是否显示恢复默认值按钮
-    showResetDefault: {
-        type: Boolean,
-        default: false
-    }
-};

package/esm/adapter/field/NumberField.tsx.js

@@ -1,19 +0,0 @@
-import { mergeDeep } from '../../util/index.ts.js';
-import { defineComponent, h } from 'vue';
-import props from './FieldProps.ts.js';
-import StringField from './StringField.tsx.js';
-export default defineComponent({
-    name: 'NumberField',
-    props,
-    render () {
-        var _a;
-        return h(StringField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-            schema: mergeDeep({
-                'ui:component': {
-                    type: 'number',
-                    min: ((_a = this.$props.schema) === null || _a === void 0 ? void 0 : _a.type) === 'integer' ? 0 : -Infinity
-                }
-            }, this.$props.schema)
-        }), this.$slots);
-    }
-});

package/esm/adapter/field/ObjectField.tsx.js

@@ -1,58 +0,0 @@
-var __rest = this && this.__rest || function(s, e) {
-    var t = {};
-    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-    }
-    return t;
-};
-import { defineComponent, h } from 'vue';
-import props from './FieldProps.ts.js';
-import SchemaField from './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 { mergeDeep, orderProperties } from '../../util/index.ts.js';
-import Widget from '../widget/Widget.ts.js';
-export default defineComponent({
-    name: 'ObjectField',
-    props,
-    render () {
-        const { schema, path, layout, rootData } = this.$props;
-        const properties = orderProperties(Object.keys(schema.properties || {}), schema['ui:order']);
-        let vNodeList = [];
-        if (properties.length) {
-            vNodeList = properties.map((name)=>{
-                var _a;
-                const curPath = Path.getCurPath(path, name);
-                const lastProp = curPath.split('.').pop();
-                const layoutConfig = Layout.findLayoutByProp(lastProp, layout.group || []) || {};
-                return h(SchemaField, Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-                    key: curPath,
-                    modelValue: Path.getPathVal(rootData, curPath),
-                    schema: (_a = schema.properties) === null || _a === void 0 ? void 0 : _a[name],
-                    required: Schema.isRequired(schema, name),
-                    path: curPath,
-                    layout: layoutConfig,
-                    removeable: false
-                }), this.$slots);
-            });
-        } else if (Schema.getUiComponent(schema)) {
-            // 如果object属性没有配置 Properties，但是有ui:component属性，那个直接渲染对应的组件
-            vNodeList = [
-                h(Widget, Object.assign(Object.assign({}, this.$props), this.$attrs), this.$slots)
-            ];
-        }
-        const _a = Schema.getGroupWrap(schema), { name } = _a, vnodeData = __rest(_a, [
-            "name"
-        ]);
-        return h(name, mergeDeep(Object.assign(Object.assign(Object.assign({}, this.$props), this.$attrs), {
-            modelValue: Path.getPathVal(rootData, path),
-            path
-        }), vnodeData), {
-            default: ()=>[
-                    ...vNodeList
-                ]
-        });
-    }
-});

package/esm/adapter/field/SchemaField.tsx.js

@@ -1,28 +0,0 @@
-var __rest = this && this.__rest || function(s, e) {
-    var t = {};
-    for(var p in s)if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function") for(var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++){
-        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-    }
-    return t;
-};
-import { h, defineComponent } from 'vue';
-import Schema from '../../core/schema.ts.js';
-import props from './FieldProps.ts.js';
-import Path from '../../core/path.ts.js';
-export default defineComponent({
-    name: 'SchemaField',
-    props,
-    render () {
-        const { schema, rootData, path } = this.$props;
-        const resolveSchema = Schema.resolveSchema(schema);
-        if (!Object.keys(schema).length) return null;
-        const _a = Schema.getSchemaField(resolveSchema), { name } = _a, fieldProps = __rest(_a, [
-            "name"
-        ]);
-        return name ? h(name, Object.assign(Object.assign(Object.assign(Object.assign({}, this.$attrs), this.$props), fieldProps), {
-            modelValue: Path.getPathVal(rootData, path),
-            schema: resolveSchema
-        }), this.$slots) : null;
-    }
-});

package/esm/adapter/field/StringField.tsx.js

@@ -1,4 +0,0 @@
-import { h } from 'vue';
-import Widget from '../widget/Widget.ts.js';
-const StringField = (props, ctx)=>h(Widget, Object.assign(Object.assign({}, props), ctx.attrs), ctx.slots);
-export default StringField;