@bdsoft/element 1.1.0

package/package-form/core/render/render.js

@@ -0,0 +1,393 @@
+import extend, {copy} from '@bdsoft-element/utils/lib/extend';
+import mergeProps from '@bdsoft-element/utils/lib/mergeprops';
+import is from '@bdsoft-element/utils/lib/type';
+import {invoke, makeSlotBag, mergeRule} from '../frame/util';
+import toCase, {lower} from '@bdsoft-element/utils/lib/tocase';
+import {deepSet, toLine} from '@bdsoft-element/utils/lib';
+import {computed, nextTick} from 'vue';
+
+export default function useRender(Render) {
+    extend(Render.prototype, {
+        initRender() {
+            this.cacheConfig = {};
+        },
+        getTypeSlot(ctx) {
+            const _fn = (vm) => {
+                if (vm) {
+                    let slot = undefined;
+                    if (ctx.rule.field) {
+                        slot = vm.slots['field-' + toLine(ctx.rule.field)] || vm.slots['field-' + ctx.rule.field];
+                    }
+                    if (!slot) {
+                        slot = vm.slots['type-' + toLine(ctx.type)] || vm.slots['type-' + ctx.type];
+                    }
+                    if (slot) {
+                        return slot;
+                    }
+                    return _fn(vm.setupState.parent);
+                }
+            }
+            return _fn(this.vm);
+        },
+        render() {
+            // console.warn('renderrrrr', this.id);
+            if (!this.vm.setupState.isShow) {
+                return;
+            }
+            this.$manager.beforeRender();
+            const slotBag = makeSlotBag();
+            this.sort.forEach((k) => {
+                this.renderSlot(slotBag, this.$handle.ctxs[k]);
+            });
+
+            return this.$manager.render(slotBag);
+        },
+        renderSlot(slotBag, ctx, parent) {
+            if (this.isFragment(ctx)) {
+                ctx.initProp();
+                this.mergeGlobal(ctx);
+                ctx.initNone();
+                const slots = this.renderChildren(ctx.loadChildrenPending(), ctx);
+                const def = slots.default;
+                def && slotBag.setSlot(ctx.rule.slot, () => def());
+                delete slots.default;
+                slotBag.mergeBag(slots);
+            } else {
+                slotBag.setSlot(ctx.rule.slot, this.renderCtx(ctx, parent));
+            }
+        },
+        mergeGlobal(ctx) {
+            const g = this.$handle.options.global;
+            if (!g) return;
+            if (!this.cacheConfig[ctx.trueType]) {
+                this.cacheConfig[ctx.trueType] = computed(() => {
+                    const g = this.$handle.options.global;
+                    return mergeRule({}, [g['*'] || g.default || {}, g[ctx.originType] || g[ctx.type] || g[ctx.type] || {}]);
+                });
+            }
+            ctx.prop = mergeRule({}, [this.cacheConfig[ctx.trueType].value, ctx.prop]);
+        },
+        setOptions(ctx) {
+            const opt = ctx.loadPending({key: 'options', origin: ctx.prop.options, def: []});
+            ctx.prop.options = opt;
+            if (ctx.prop.optionsTo && opt) {
+                deepSet(ctx.prop, ctx.prop.optionsTo, opt);
+            }
+        },
+        deepSet(ctx) {
+            const deep = ctx.rule.deep;
+            deep && Object.keys(deep).sort((a, b) => a.length < b.length ? -1 : 1).forEach(str => {
+                deepSet(ctx.prop, str, deep[str]);
+            });
+        },
+        parseSide(side, ctx) {
+            return is.Object(side) ? mergeRule({props: {formCreateInject: ctx.prop.props.formCreateInject}}, side) : side;
+        },
+        renderSides(vn, ctx, temp) {
+            const prop = ctx[temp ? 'rule' : 'prop'];
+            return [this.renderRule(this.parseSide(prop.prefix, ctx)), vn, this.renderRule(this.parseSide(prop.suffix, ctx))];
+        },
+        renderId(name, type) {
+            const ctxs = this.$handle[type === 'field' ? 'fieldCtx' : 'nameCtx'][name]
+            return ctxs ? ctxs.map(ctx => this.renderCtx(ctx, ctx.parent)) : undefined;
+        },
+        renderCtx(ctx, parent) {
+            try {
+                if (ctx.type === 'hidden') return;
+                const rule = ctx.rule;
+                if ((!this.cache[ctx.id]) || this.cache[ctx.id].slot !== rule.slot) {
+                    let vn;
+                    ctx.initProp();
+                    this.mergeGlobal(ctx);
+                    ctx.initNone();
+                    this.$manager.tidyRule(ctx);
+                    this.deepSet(ctx);
+                    this.setOptions(ctx);
+                    this.ctxProp(ctx);
+                    let prop = ctx.prop;
+                    prop.preview = !!(prop.preview != null ? prop.preview : this.$handle.preview);
+                    prop.props.formCreateInject = this.injectProp(ctx);
+                    let cacheFlag = prop.cache !== false;
+                    const preview = prop.preview;
+
+                    if (prop.hidden) {
+                        this.setCache(ctx, undefined, parent);
+                        return;
+                    }
+                    vn = (...slotValue) => {
+                        const inject = {
+                            rule,
+                            prop,
+                            preview,
+                            api: this.$handle.api,
+                            model: prop.model || {},
+                            slotValue
+                        }
+                        if (slotValue.length && rule.slotUpdate) {
+                            invoke(() => rule.slotUpdate(inject))
+                        }
+                        let children = {};
+                        const _load = ctx.loadChildrenPending();
+                        if (ctx.parser.renderChildren) {
+                            children = ctx.parser.renderChildren(_load, ctx);
+                        } else if (ctx.parser.loadChildren !== false) {
+                            children = this.renderChildren(_load, ctx);
+                        }
+                        Object.keys(prop.renderSlots || {}).forEach(key => {
+                            children[key] = () => {
+                                const rule = this.parseSide(prop.renderSlots[key], ctx);
+                                return this.renderRule(rule);
+                            }
+                        })
+                        const slot = this.getTypeSlot(ctx);
+                        let _vn;
+                        if (slot) {
+                            inject.children = children;
+                            _vn = slot(inject)
+                        } else {
+                            _vn = preview ? ctx.parser.preview(copy(children), ctx) : ctx.parser.render(copy(children), ctx);
+                        }
+                        _vn = this.renderSides(_vn, ctx);
+                        if ((!(!ctx.input && is.Undef(prop.native))) && prop.native !== true) {
+                            this.fc.targetFormDriver('updateWrap', ctx)
+                            _vn = this.$manager.makeWrap(ctx, _vn);
+                        }
+                        if (ctx.none) {
+                            if (Array.isArray(_vn)) {
+                                _vn = _vn.map(v => {
+                                    if (!v || !v.__v_isVNode) {
+                                        return v;
+                                    }
+                                    return this.none(v);
+                                });
+                            } else {
+                                _vn = this.none(_vn);
+                            }
+                        }
+                        cacheFlag && this.setCache(ctx, () => {
+                            return this.stable(_vn);
+                        }, parent);
+                        return _vn
+                    };
+                    this.setCache(ctx, vn, parent);
+                }
+                return (...args) => {
+                    const cache = this.getCache(ctx);
+                    if (cache) {
+                        return cache(...args);
+                    } else if (this.cache[ctx.id]) {
+                        return;
+                    }
+                    const _vn = this.renderCtx(ctx, ctx.parent);
+                    if (_vn) {
+                        return _vn();
+                    }
+                };
+            } catch (e) {
+                console.error(e);
+                return;
+            }
+        },
+        none(vn) {
+            if (vn) {
+                vn.props.class = this.mergeClass(vn.props.class, 'fc-none')
+                return vn;
+            }
+        },
+        mergeClass(target, value) {
+            if (Array.isArray(target)) {
+                target.push(value);
+            } else {
+                return target ? [target, value] : value;
+            }
+            return target;
+        },
+        stable(vn) {
+            const list = Array.isArray(vn) ? vn : [vn];
+            list.forEach(v => {
+                if (v && v.__v_isVNode && v.children && typeof v.children === 'object') {
+                    v.children.$stable = true;
+                    this.stable(v.children);
+                }
+            });
+            return vn;
+        },
+        getModelField(ctx) {
+            return ctx.prop.modelField || ctx.parser.modelField || this.fc.modelFields[this.vNode.aliasMap[ctx.type]] || this.fc.modelFields[ctx.type] || this.fc.modelFields[ctx.originType] || 'modelValue';
+        },
+        isFragment(ctx) {
+            return ctx.type === 'fragment' || ctx.type === 'template';
+        },
+        injectProp(ctx) {
+            const state = this.vm.setupState;
+            if (!state.ctxInject[ctx.id]) {
+                state.ctxInject[ctx.id] = {
+                    api: this.$handle.api,
+                    form: this.fc.create,
+                    subForm: subForm => {
+                        this.$handle.addSubForm(ctx, subForm);
+                    },
+                    getSubForm: () => {
+                        return this.$handle.subForm[ctx.id];
+                    },
+                    slots: () => {
+                        return this.vm.setupState.top.slots;
+                    },
+                    options: [],
+                    children: [],
+                    preview: false,
+                    id: ctx.id,
+                    field: ctx.field,
+                    rule: ctx.rule,
+                    input: ctx.input,
+                    t: (...args) => {
+                        return this.$handle.api.t(...args);
+                    },
+                    updateValue: (data) => {
+                        this.$handle.onUpdateValue(ctx, data);
+                    }
+                }
+            }
+            const inject = state.ctxInject[ctx.id];
+            extend(inject, {
+                preview: ctx.prop.preview,
+                options: ctx.prop.options,
+                children: ctx.loadChildrenPending()
+            });
+            return inject;
+        },
+        ctxProp(ctx) {
+            const {ref, key, rule} = ctx;
+            this.$manager.mergeProp(ctx);
+            ctx.parser.mergeProp(ctx);
+            const props = [
+                {
+                    ref: ref,
+                    key: rule.key || `${key}fc`,
+                    slot: undefined,
+                    on: {
+                        vnodeMounted: (vn) => {
+                            vn.el.__rule__ = ctx.rule;
+                            this.onMounted(ctx, vn.el);
+                        },
+                        'fc.updateValue': (data) => {
+                            this.$handle.onUpdateValue(ctx, data);
+                        },
+                        'fc.el': (el) => {
+                            ctx.exportEl = el;
+                            if (el) {
+                                (el.$el || el).__rule__ = ctx.rule;
+                            }
+                        }
+                    }
+                }
+            ]
+
+            if (ctx.input) {
+                if (this.vm.props.disabled === true) {
+                    ctx.prop.props.disabled = true;
+                }
+                const field = this.getModelField(ctx);
+                const model = {
+                    callback: (value) => {
+                        this.onInput(ctx, value);
+                    },
+                    modelField: field,
+                    value: this.$handle.getFormData(ctx)
+                };
+                props.push({
+                    on: {
+                        [`update:${field}`]: model.callback,
+                        ...(ctx.prop.modelEmit ? {
+                            [ctx.prop.modelEmit]: () => this.onEmitInput(ctx)
+                        } : {}),
+                    },
+                    props: {
+                        [field]: model.value
+                    }
+                })
+                ctx.prop.model = model;
+            }
+            mergeProps(props, ctx.prop);
+            return ctx.prop;
+        },
+        onMounted(ctx, el) {
+            ctx.el = this.vm.refs[ctx.ref] || el;
+            ctx.parser.mounted(ctx);
+            this.$handle.effect(ctx, 'mounted');
+            this.$handle.targetHook(ctx, 'mounted');
+        },
+        onInput(ctx, value) {
+            if (ctx.prop.modelEmit) {
+                this.$handle.onBaseInput(ctx, value);
+                return;
+            }
+            this.$handle.onInput(ctx, value);
+        },
+        onEmitInput(ctx) {
+            this.$handle.setValue(ctx, ctx.parser.toValue(ctx.modelValue, ctx), ctx.modelValue);
+        },
+        renderChildren(children, ctx) {
+            if (!is.trueArray(children)) return {};
+            const slotBag = makeSlotBag()
+            children.map(child => {
+                if (!child) return;
+                if (is.String(child)) return slotBag.setSlot(null, child);
+                if (child.__fc__) {
+                    return this.renderSlot(slotBag, child.__fc__, ctx);
+                }
+                if (child.type) {
+                    nextTick(() => {
+                        this.$handle.loadChildren(children, ctx);
+                        this.$handle.refresh();
+                    });
+                }
+            });
+            return slotBag.getSlots();
+        },
+        defaultRender(ctx, children) {
+            const prop = ctx.prop;
+            if (prop.component) {
+                if (typeof prop.component === 'string') {
+                    return this.vNode.make(prop.component, prop, children);
+                } else {
+                    return this.vNode.makeComponent(prop.component, prop, children);
+                }
+            }
+            if (this.vNode[ctx.type])
+                return this.vNode[ctx.type](prop, children);
+            if (this.vNode[ctx.originType])
+                return this.vNode[ctx.originType](prop, children);
+            return this.vNode.make(lower(prop.type), prop, children);
+        },
+        renderRule(rule, children, origin) {
+            if (!rule) return undefined;
+            if (is.String(rule)) return rule;
+
+            let type;
+            if (origin) {
+                type = rule.type;
+            } else {
+                type = rule.is;
+                if (rule.type) {
+                    type = toCase(rule.type);
+                    const alias = this.vNode.aliasMap[type];
+                    if (alias) type = toCase(alias);
+                }
+            }
+
+            if (!type) return undefined;
+
+            const slotBag = makeSlotBag();
+            if (is.trueArray(rule.children)) {
+                rule.children.forEach(v => {
+                    v && slotBag.setSlot(v?.slot, () => this.renderRule(v));
+                });
+            }
+            const props = {...rule};
+            delete props.type;
+            delete props.is;
+            return this.vNode.make(type, props, slotBag.mergeBag(children).getSlots());
+        }
+    })
+}

package/package-form/element-form/components/checkbox/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bdsoft-element/form-checkbox",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/index.min.js",
+  "module": "./dist/index.esm.js",
+  "unpkg": "./dist/index.min.js",
+  "jsdelivr": "./dist/index.min.js",
+  "scripts": {
+    "clean": "rimraf dist/",
+    "bili": "cross-env bili",
+    "build": "npm-run-all clean bili"
+  },
+  "dependencies": {
+    "@bdsoft-element/utils": "workspace:^1.0.1"
+  }
+}

package/package-form/element-form/components/checkbox/src/component.jsx

@@ -0,0 +1,110 @@
+import {computed, defineComponent, ref, resolveComponent, toRef, watch} from 'vue';
+import getSlot from '@bdsoft-element/utils/lib/slot';
+import toArray from '@bdsoft-element/utils/lib/toarray';
+
+const NAME = 'fcCheckbox';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        formCreateInject: Object,
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+        type: String,
+        options: Array,
+        input: Boolean,
+        inputValue: String,
+    },
+    emits: ['update:modelValue', 'fc.el'],
+    setup(props, _) {
+        const options = toRef(props.formCreateInject, 'options', []);
+        const opt = toRef(props, 'options');
+        const value = toRef(props, 'modelValue');
+        const inputValue = toRef(props, 'inputValue', '');
+        const customValue = ref(inputValue.value);
+        const input = toRef(props, 'input', false);
+        const updateCustomValue = (n) => {
+            const _value = [...toArray(value.value)];
+            const idx = _value.indexOf(customValue.value);
+            customValue.value = n;
+            if (idx > -1) {
+                _value.splice(idx, 1);
+                _value.push(n);
+                onInput(_value);
+            }
+        }
+        watch(inputValue, (n) => {
+            if (!input.value) {
+                customValue.value = n;
+                return undefined;
+            }
+            updateCustomValue(n);
+        })
+
+        const _options = computed(() => {
+            let arr = options.value || [];
+            if (opt.value) {
+                arr = opt.value || [];
+            }
+            return Array.isArray(arr) ? arr : [];
+        });
+
+
+        watch(value, (n) => {
+            let value = null;
+            if (!inputValue.value && n != null && Array.isArray(n) && n.length > 0 && input.value) {
+                const values = _options.value.map(item => {
+                    return item.value;
+                });
+                n.forEach((val) => {
+                    if (values.indexOf(val) === -1) {
+                        value = val;
+                    }
+                })
+            }
+            if (value != null) {
+                customValue.value = value;
+            }
+        }, {immediate: true});
+
+        const onInput = (n) => {
+            _.emit('update:modelValue', n);
+        };
+
+        return {
+            options: _options,
+            value,
+            onInput,
+            updateCustomValue,
+            makeInput(Type) {
+                if (!input.value) {
+                    return undefined;
+                }
+                return <Type value={customValue.value || undefined} label={customValue.value || undefined}>
+                    <ElInput size="small" modelValue={customValue.value}
+                        onUpdate:modelValue={updateCustomValue}></ElInput>
+                </Type>
+            },
+        }
+    },
+    render() {
+        const name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
+        const Type = resolveComponent(name);
+        return <ElCheckboxGroup {...this.$attrs} modelValue={this.value} v-slots={getSlot(this.$slots, ['default'])}
+            onUpdate:modelValue={this.onInput} ref="el">{this.options.map((opt, index) => {
+                const props = {...opt};
+                const value = props.value;
+                const label = props.label;
+                delete props.value;
+                delete props.label;
+                return <Type {...props} label={value} value={value}
+                    key={name + index + '-' + value}>{label || value || ''}</Type>
+            })}{this.$slots.default?.()}{this.makeInput(Type)}</ElCheckboxGroup>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});

package/package-form/element-form/components/checkbox/src/index.js

@@ -0,0 +1,3 @@
+import Checkbox from './component';
+
+export default Checkbox;

package/package-form/element-form/components/frame/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bdsoft-element/form-frame",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/index.min.js",
+  "module": "./dist/index.esm.js",
+  "unpkg": "./dist/index.min.js",
+  "jsdelivr": "./dist/index.min.js",
+  "scripts": {
+    "clean": "rimraf dist/",
+    "bili": "cross-env bili",
+    "build": "npm-run-all clean bili"
+  },
+  "dependencies": {
+    "@bdsoft-element/utils": "workspace:^1.0.1"
+  }
+}

package/package-form/element-form/components/frame/src/IconCircleClose.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"></path>
+    <path fill="currentColor"
+          d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconCircleClose'
+}
+</script>

package/package-form/element-form/components/frame/src/IconDelete.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconDelete'
+}
+</script>

package/package-form/element-form/components/frame/src/IconDocument.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconDocument'
+}
+</script>

package/package-form/element-form/components/frame/src/IconFolderOpened.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 01216.96 384H832zm-24.96 512H96a32 32 0 01-32-32V160a32 32 0 0132-32h287.872l128.384 128H864a32 32 0 0132 32v96h23.04a32 32 0 0131.04 39.744l-112 448A32 32 0 01807.04 896z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconFolderOpened'
+}
+</script>

package/package-form/element-form/components/frame/src/IconView.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor"
+          d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconView'
+}
+</script>