@bdsoft/element 1.1.0

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

@@ -0,0 +1,314 @@
+import {hasProperty} from '@bdsoft-element/utils/lib/type';
+import {defineComponent, markRaw, nextTick, watch} from 'vue';
+import deepExtend, {deepCopy} from '@bdsoft-element/utils/lib/deepextend';
+import extend from '@bdsoft-element/utils/lib/extend';
+import './style.css';
+
+const NAME = 'fcGroup';
+
+
+export default defineComponent({
+    name: NAME,
+    props: {
+        field: String,
+        rule: Array,
+        expand: Number,
+        options: Object,
+        button: {
+            type: Boolean,
+            default: true
+        },
+        max: {
+            type: Number,
+            default: 0
+        },
+        min: {
+            type: Number,
+            default: 0
+        },
+        modelValue: {
+            type: Array,
+            default: () => []
+        },
+        defaultValue: Object,
+        sortBtn: {
+            type: Boolean,
+            default: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        syncDisabled: {
+            type: Boolean,
+            default: true
+        },
+        onBeforeRemove: {
+            type: Function,
+            default: () => {
+            }
+        },
+        onBeforeAdd: {
+            type: Function,
+            default: () => {
+            }
+        },
+        formCreateInject: Object,
+        parse: Function,
+    },
+    data() {
+        return {
+            len: 0,
+            cacheRule: {},
+            cacheValue: {},
+            sort: [],
+            form: markRaw(this.formCreateInject.form.$form())
+        }
+    },
+    emits: ['update:modelValue', 'change', 'itemMounted', 'remove', 'add'],
+    watch: {
+        rule: {
+            handler(n, o) {
+                Object.keys(this.cacheRule).forEach(v => {
+                    const item = this.cacheRule[v];
+                    if (item.$f) {
+                        const val = item.$f.formData();
+                        if (n === o) {
+                            item.$f.deferSyncValue(() => {
+                                deepExtend(item.rule, n);
+                                item.$f.setValue(val);
+                            }, true);
+                        } else {
+                            const val = item.$f.formData();
+                            item.$f.once('reloading', () => {
+                                item.$f.setValue(val);
+                            })
+                            item.rule = deepCopy(n);
+                        }
+                    }
+                })
+            },
+            deep: true
+        },
+        expand(n) {
+            let d = n - this.modelValue.length;
+            if (d > 0) {
+                this.expandRule(d);
+            }
+        },
+        modelValue: {
+            handler(n) {
+                n = n || [];
+                let keys = this.sort, total = keys.length, len = total - n.length;
+                if (len < 0) {
+                    for (let i = len; i < 0; i++) {
+                        this.addRule(n.length + i, true);
+                    }
+                    for (let i = 0; i < total; i++) {
+                        this.setValue(keys[i], n[i]);
+                    }
+                } else {
+                    if (len > 0) {
+                        for (let i = 0; i < len; i++) {
+                            this.removeRule(keys[total - i - 1]);
+                        }
+                    }
+                    n.forEach((val, i) => {
+                        this.setValue(keys[i], n[i]);
+                    });
+                }
+            },
+            deep: true,
+        }
+    },
+    methods: {
+        _value(v) {
+            return (v && hasProperty(v, this.field)) ? v[this.field] : v;
+        },
+        cache(k, val) {
+            this.cacheValue[k] = JSON.stringify(val);
+        },
+        input(value) {
+            this.$emit('update:modelValue', value);
+            this.$emit('change', value);
+        },
+        formData(key, formData) {
+            const cacheRule = this.cacheRule;
+            const keys = this.sort;
+            if (keys.filter(k => cacheRule[k].$f).length !== keys.length) {
+                return;
+            }
+            const value = keys.map(k => {
+                const data = key === k ? formData : {...this.cacheRule[k].$f.form};
+                const value = this.field ? data[this.field] || null : data;
+                this.cache(k, value);
+                return value;
+            });
+            this.input(value);
+        },
+        setValue(key, value) {
+            const field = this.field
+            if (field) {
+                value = {[field]: this._value(value)};
+            }
+            if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
+                return;
+            }
+            this.cacheRule[key].$f && this.cacheRule[key].$f.setValue(value);
+            this.cache(key, value);
+        },
+        addRule(i, emit) {
+            const rule = this.formCreateInject.form.copyRules(this.rule || []);
+            const options = this.options ? {...this.options} : {
+                submitBtn: false,
+                resetBtn: false,
+            };
+            if (this.defaultValue) {
+                if (!options.formData) options.formData = {};
+                const defVal = deepCopy(this.defaultValue);
+                extend(options.formData, this.field ? {[this.field]: defVal} : defVal);
+            }
+            this.parse && this.parse({rule, options, index: this.sort.length});
+            this.cacheRule[++this.len] = {rule, options};
+            if (emit) {
+                nextTick(() => this.$emit('add', rule, Object.keys(this.cacheRule).length - 1));
+            }
+        },
+        add$f(i, key, $f) {
+            this.cacheRule[key].$f = $f;
+            nextTick(() => {
+                this.$emit('itemMounted', $f, Object.keys(this.cacheRule).indexOf(key));
+            });
+        },
+        removeRule(key, emit) {
+            const index = Object.keys(this.cacheRule).indexOf(key);
+            delete this.cacheRule[key];
+            delete this.cacheValue[key];
+            if (emit) {
+                nextTick(() => this.$emit('remove', index));
+            }
+        },
+        add(i) {
+            if (this.disabled || false === this.onBeforeAdd(this.modelValue)) {
+                return;
+            }
+            const value = [...this.modelValue];
+            value.push(this.defaultValue ? deepCopy(this.defaultValue) : (this.field ? null : {}));
+            this.input(value);
+        },
+        del(index, key) {
+            if (this.disabled || false === this.onBeforeRemove(this.modelValue, index)) {
+                return;
+            }
+            this.removeRule(key, true);
+            const value = [...this.modelValue];
+            value.splice(index, 1);
+            this.input(value);
+        },
+        addIcon(key) {
+            return <div class="_fc-group-btn _fc-group-plus-minus" onClick={this.add}></div>;
+        },
+        delIcon(index, key) {
+            return <div class="_fc-group-btn _fc-group-plus-minus _fc-group-minus"
+                onClick={() => this.del(index, key)}></div>
+        },
+        sortUpIcon(index) {
+            return <div class="_fc-group-btn _fc-group-arrow _fc-group-up"
+                onClick={() => this.changeSort(index, -1)}></div>
+        },
+        sortDownIcon(index) {
+            return <div class="_fc-group-btn _fc-group-arrow _fc-group-down"
+                onClick={() => this.changeSort(index, 1)}></div>
+        },
+        changeSort(index, sort) {
+            const a = this.sort[index];
+            this.sort[index] = this.sort[index + sort];
+            this.sort[index + sort] = a;
+            this.formCreateInject.subForm(this.sort.map(k=>{
+                return this.cacheRule[k].$f;
+            }));
+            this.formData(0);
+        },
+        makeIcon(total, index, key) {
+            if (this.$slots.button) {
+                return this.$slots.button({
+                    total,
+                    index,
+                    vm: this,
+                    key,
+                    del: () => this.del(index, key),
+                    add: this.add
+                });
+            }
+            const btn = [];
+            if ((!this.max || total < this.max) && total === index + 1) {
+                btn.push(this.addIcon(key));
+            }
+            if (total > this.min) {
+                btn.push(this.delIcon(index, key));
+            }
+            if (this.sortBtn && index) {
+                btn.push(this.sortUpIcon(index));
+            }
+            if (this.sortBtn && index !== total - 1) {
+                btn.push(this.sortDownIcon(index));
+            }
+            return btn;
+        },
+        emitEvent(name, args, index, key) {
+            this.$emit(name, ...args, this.cacheRule[key].$f, index);
+        },
+        expandRule(n) {
+            for (let i = 0; i < n; i++) {
+                this.addRule(i);
+            }
+        }
+    },
+    created() {
+        watch(() => ({...this.cacheRule}), (n) => {
+            this.sort = Object.keys(n);
+        }, {immediate: true})
+        const d = (this.expand || 0) - this.modelValue.length;
+        for (let i = 0; i < this.modelValue.length; i++) {
+            this.addRule(i);
+        }
+        if (d > 0) {
+            this.expandRule(d);
+        }
+    },
+    render() {
+        const keys = this.sort;
+        const button = this.button;
+        const Type = this.form;
+        const disabled = this.disabled;
+
+        const children = keys.length === 0 ?
+            (this.$slots.default ? (this.$slots.default({
+                vm: this,
+                add: this.add
+            })) : <div key={'a_def'} class="_fc-group-plus-minus _fc-group-add fc-clock"
+                onClick={this.add}/>) : keys.map((key, index) => {
+                const {rule, options} = this.cacheRule[key];
+                const btn = button && !disabled ? this.makeIcon(keys.length, index, key) : [];
+                return <div class="_fc-group-container" key={key}>
+                    <Type
+                        key={key}
+                        {...{
+                            disabled,
+                            'onUpdate:modelValue': (formData) => this.formData(key, formData),
+                            'onEmit-event': (name, ...args) => this.emitEvent(name, args, index, key),
+                            'onUpdate:api': ($f) => this.add$f(index, key, $f),
+                            inFor: true,
+                            modelValue: this.field ? {[this.field]: this._value(this.modelValue[index])} : this.modelValue[index],
+                            rule,
+                            option: options,
+                            extendOption: true
+                        }}
+                    />
+                    <div class="_fc-group-idx">{index + 1}</div>
+                    {(btn.length) ? <div class="_fc-group-handle fc-clock">{btn}</div> : null}
+                </div>
+            });
+        return <div key={'con'} class={'_fc-group ' + (disabled ? '_fc-group-disabled' : '')}>{children}</div>
+    }
+});

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

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

package/package-form/element-form/components/group/src/style.css

@@ -0,0 +1,125 @@
+._fc-group{
+    display: flex;
+    min-height: 38px;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+}
+
+._fc-group-disabled ._fc-group-btn, ._fc-group-disabled ._fc-group-add{
+    cursor: not-allowed;
+}
+
+._fc-group-handle {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    bottom: -15px;
+    right: 30px;
+    border-radius: 15px;
+    border: 1px dashed #d9d9d9;
+    padding: 3px 8px;
+    background-color: #ffffff;
+}
+
+._fc-group-btn{
+    cursor: pointer;
+}
+
+._fc-group-idx {
+    position: absolute;
+    bottom: -15px;
+    left: 10px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eee;
+    border-radius: 15px;
+    font-weight: 700;
+}
+
+._fc-group-handle ._fc-group-btn + ._fc-group-btn {
+    margin-left: 7px;
+}
+
+._fc-group-container{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border: 1px dashed #d9d9d9;
+    padding: 20px;
+    margin: 5px;
+    border-radius: 5px;
+    margin-bottom: 25px;
+    padding-bottom: 25px;
+}
+
+._fc-group-arrow {
+    position: relative;
+    width: 20px;
+    height: 20px;
+}
+
+._fc-group-arrow::before {
+    content: "";
+    position: absolute;
+    top: 8px;
+    left: 5px;
+    width: 9px;
+    height: 9px;
+    border-left: 2px solid #999;
+    border-top: 2px solid #999;
+}
+._fc-group-arrow::before {
+    transform: rotate(45deg);
+}
+
+._fc-group-arrow._fc-group-down {
+    transform: rotate(180deg);
+}
+
+._fc-group-plus-minus {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    cursor: pointer;
+}
+
+._fc-group-plus-minus::before,
+._fc-group-plus-minus::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 60%;
+    height: 2px;
+    background-color: #409eff;
+    transform: translate(-50%, -50%);
+}
+
+._fc-group-plus-minus::before {
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+
+._fc-group-plus-minus._fc-group-minus::before {
+    display: none;
+}
+._fc-group-plus-minus._fc-group-minus::after {
+    background-color: #f56c6c;
+}
+
+
+._fc-group-add{
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    border: 1px solid rgb(64 158 255 / 50%);
+    border-radius: 15px;
+}
+
+._fc-group-add._fc-group-plus-minus::before, ._fc-group-add._fc-group-plus-minus::after {
+    width: 50%;
+}
+

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

@@ -0,0 +1,22 @@
+import checkbox from './checkbox/src/index';
+import frame from './frame/src/index';
+import radio from './radio/src/index';
+import select from './select/src/index';
+import tree from './tree/src/index';
+import upload from './upload/src/index';
+import group from './group/src/index';
+import subForm from './subform/src/index';
+import IconWarning from './icon/IconWarning.vue';
+
+
+export default [
+    checkbox,
+    frame,
+    radio,
+    select,
+    tree,
+    upload,
+    group,
+    subForm,
+    IconWarning,
+]

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

@@ -0,0 +1,17 @@
+{
+  "name": "@bdsoft-element/form-radio",
+  "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/radio/src/component.jsx

@@ -0,0 +1,101 @@
+import {computed, defineComponent, ref, resolveComponent, toRef, watch} from 'vue';
+import getSlot from '@bdsoft-element/utils/lib/slot';
+
+const NAME = 'fcRadio';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        formCreateInject: Object,
+        modelValue: {
+            type: [String, Number, Boolean],
+            default: ''
+        },
+        options: Array,
+        type: String,
+        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);
+        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 flag = false;
+            if (!inputValue.value && n != null && input.value) {
+                flag = _options.value.map(item => {
+                    return item.value;
+                }).indexOf(n) === -1;
+            }
+            if (flag) {
+                customValue.value = n;
+            }
+        }, {immediate: true});
+
+        const onInput = (n) => {
+            _.emit('update:modelValue', n);
+        }
+        const updateCustomValue = (n) => {
+            const o = customValue.value;
+            customValue.value = n;
+            if (value.value === o) {
+                onInput(n);
+            }
+        }
+        return {
+            options: _options,
+            value,
+            onInput,
+            updateCustomValue,
+            customValue,
+            makeInput(Type) {
+                if (!input.value) {
+                    return undefined;
+                }
+                return <Type checked={false} 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' ? 'ElRadioButton' : 'ElRadio';
+        const Type = resolveComponent(name);
+        return <ElRadioGroup {...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)}</ElRadioGroup>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});

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

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

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

@@ -0,0 +1,17 @@
+{
+  "name": "@bdsoft-element/form-select",
+  "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/select/src/component.jsx

@@ -0,0 +1,52 @@
+import {defineComponent, toRef} from 'vue';
+import getSlot from '@bdsoft-element/utils/lib/slot';
+import is, {hasProperty} from '@bdsoft-element/utils/lib/type';
+
+const NAME = 'fcSelect';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        formCreateInject: Object,
+        modelValue: {
+            type: [Array, String, Number, Boolean, Object],
+            default: undefined
+        },
+        type: String,
+    },
+    emits: ['update:modelValue', 'fc.el'],
+    setup(props) {
+        const options = toRef(props.formCreateInject, 'options', []);
+        const value = toRef(props, 'modelValue');
+        const _options = () => {
+            return Array.isArray(options.value) ? options.value : []
+        }
+        return {
+            options: _options,
+            value
+        }
+    },
+    render() {
+        const makeOption = (props, index) => {
+            return <ElOption {...props} key={'' + index + '-' + props.value}/>;
+        }
+        const makeOptionGroup = (props, index) => {
+            return <ElOptionGroup label={props.label}
+                key={'' + index + '-' + props.label}>
+                {is.trueArray(props.options) && props.options.map((v, index) => {
+                    return makeOption(v, index);
+                })}
+            </ElOptionGroup>;
+        }
+        const options = this.options();
+        return <ElSelect {...this.$attrs} modelValue={this.value}
+            onUpdate:modelValue={(v) => this.$emit('update:modelValue', v)}
+            v-slots={getSlot(this.$slots, ['default'])} ref="el">{options.map((props, index) => {
+                return hasProperty(props || '', 'options') ? makeOptionGroup(props, index) : makeOption(props, index);
+            })}{this.$slots.default?.()}</ElSelect>;
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});

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

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

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

@@ -0,0 +1,14 @@
+{
+  "name": "@bdsoft-element/form-subform",
+  "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"
+  }
+}