@bdsoft/element 1.1.8 → 1.1.11

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-{
-  "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

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

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

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

@@ -1,17 +0,0 @@
-{
-  "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

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

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

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

@@ -1,14 +0,0 @@
-{
-  "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"
-  }
-}