icarys-fc-vant 1.0.15 → 1.0.17

package/src/vant/src/components/group.jsx

@@ -0,0 +1,384 @@
+import {hasProperty} from '@form-create/utils/lib/type';
+import {defineComponent, markRaw, nextTick, watch} from 'vue';
+import deepExtend, {deepCopy} from '@form-create/utils/lib/deepextend';
+import extend from '@form-create/utils/lib/extend';
+import {toPromise} from '@form-create/utils';
+
+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: false
+        },
+        disabled: {
+            type: Boolean,
+            default: undefined
+        },
+        title: {
+            type: [String, Function],
+            default: null
+        },
+        type: {
+            type: String,
+            default: 'default'
+        },
+        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] && 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.coverValue(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};
+            this.sort = Object.keys(this.cacheRule);
+            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];
+            this.sort = Object.keys(this.cacheRule);
+            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) {
+                return;
+            }
+            const del = () => {
+                this.removeRule(key, true);
+                const value = [...this.modelValue];
+                value.splice(index, 1);
+                this.input(value);
+            }
+            toPromise(this.onBeforeRemove(this.modelValue, index)).then(res => {
+                if (false !== res) {
+                    del();
+                }
+            })
+        },
+        addIcon(key) {
+            return <div class="_fc-m-group-btn _fc-m-group-plus-minus" onClick={this.add}></div>;
+        },
+        delIcon(index, key) {
+            return <div class="_fc-m-group-btn _fc-m-group-plus-minus _fc-m-group-minus"
+                onClick={() => this.del(index, key)}></div>
+        },
+        sortUpIcon(index) {
+            return <div class="_fc-m-group-btn _fc-m-group-arrow _fc-m-group-up"
+                onClick={() => this.changeSort(index, -1)}></div>
+        },
+        sortDownIcon(index) {
+            return <div class="_fc-m-group-btn _fc-m-group-arrow _fc-m-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);
+        },
+        sortIcon(index, total) {
+            const canMoveUp = index > 0;
+            const canMoveDown = index < total - 1;
+
+            if (!canMoveUp && !canMoveDown) {
+                return null;
+            }
+
+            if (canMoveUp && canMoveDown) {
+                // 显示合并的上下箭头按钮
+                return <div class="_fc-m-group-btn _fc-m-group-sort">
+                    <div class="_fc-m-group-sort-up" onClick={() => this.changeSort(index, -1)}></div>
+                    <div class="_fc-m-group-sort-down" onClick={() => this.changeSort(index, 1)}></div>
+                </div>;
+            }
+
+            if (canMoveUp) {
+                return this.sortUpIcon(index);
+            }
+
+            if (canMoveDown) {
+                return this.sortDownIcon(index);
+            }
+        },
+        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) {
+                const sortBtn = this.sortIcon(index, total);
+                if (sortBtn) {
+                    btn.push(sortBtn);
+                }
+            }
+            return btn;
+        },
+        expandRule(n) {
+            for (let i = 0; i < n; i++) {
+                this.modelValue.push(this.field ? null : {});
+            }
+            this.input([...this.modelValue]);
+        },
+        getTitle(index, key) {
+            if (typeof this.title === 'function') {
+                return this.title(index, this.modelValue[index], key);
+            }
+            if (typeof this.title === 'string') {
+                return this.title.replace('{index}', index + 1);
+            }
+            return false;
+        }
+    },
+    created() {
+        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 isCardType = this.type === 'card';
+
+        const children = keys.length === 0 ?
+            (this.$slots.default ? (this.$slots.default({
+                vm: this,
+                add: this.add
+            })) : <div key={'a_def'} class="_fc-m-group-plus-minus _fc-m-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) : [];
+                const title = this.getTitle(index, key);
+
+                if (isCardType) {
+                    return <div class="_fc-m-group-container" key={key}>
+                        <div class="_fc-m-group-header">
+                            {title === false ? <div class="_fc-m-group-idx">{index + 1}</div> : null}
+                            {title !== false ? <div class="_fc-m-group-title">{title}</div> : null}
+                            <div class="_fc-m-group-handle fc-clock">
+                                {(btn.length) ? btn : null}
+                            </div>
+                        </div>
+                        <div class="_fc-m-group-content">
+                            <Type
+                                key={key}
+                                {...{
+                                    disabled,
+                                    'onUpdate:modelValue': (formData) => this.formData(key, formData),
+                                    '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>
+                    </div>
+                } else {
+                    return <div class="_fc-m-group-container" key={key}>
+                        <Type
+                            key={key}
+                            {...{
+                                disabled,
+                                'onUpdate:modelValue': (formData) => this.formData(key, formData),
+                                '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-m-group-idx">{index + 1}</div>
+                        {(btn.length) ? <div class="_fc-m-group-handle fc-clock">{btn}</div> : null}
+                    </div>
+                }
+            });
+        return <div key={'con'} class={'_fc-m-group ' + (disabled ? '_fc-m-group-disabled' : '') + (isCardType ? ' _fc-m-group-card' : '')}>{children}</div>
+    }
+});

package/src/vant/src/components/icon/IconWarning.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 64a448 448 0 110 896 448 448 0 010-896zm0 832a384 384 0 000-768 384 384 0 000 768zm48-176a48 48 0 11-96 0 48 48 0 0196 0zm-48-464a32 32 0 0132 32v288a32 32 0 01-64 0V288a32 32 0 0132-32z"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'IconWarning'
+}
+</script>

package/src/vant/src/components/index.js

@@ -0,0 +1,26 @@
+import subForm from '@form-create/components/common/subform/src/index';
+import Calendar from './calendar';
+import Cascader from './cascader';
+import Checkbox from './checkbox';
+import Select from './select';
+import Uploader from './uploader';
+import Radio from './radio';
+import DatePicker from './datePicker';
+import TimePicker from './timePicker';
+import Group from './group';
+import IconWarning from './icon/IconWarning.vue';
+
+
+export default [
+    subForm,
+    IconWarning,
+    Calendar,
+    Cascader,
+    Checkbox,
+    Radio,
+    Select,
+    DatePicker,
+    TimePicker,
+    Group,
+    Uploader,
+]

package/src/vant/src/components/radio.jsx

@@ -0,0 +1,38 @@
+import {defineComponent, toRef} from 'vue';
+
+const NAME = 'fcRadio';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        modelValue: [String, Number, Boolean],
+        options: Array,
+    },
+    emits: ['update:modelValue', 'change'],
+    setup(props, _) {
+        const modelValue = toRef(props, 'modelValue', []);
+        const options = toRef(props, 'options');
+
+        return {
+            options,
+            modelValue,
+            onInput(val) {
+                _.emit('update:modelValue', val);
+                _.emit('change', val);
+            },
+        }
+    },
+    render() {
+        return <van-radio-group direction="horizontal" {...this.$attrs} modelValue={this.modelValue}
+            onUpdate:modelValue={this.onInput}>
+            {(this.options || []).map(opt => {
+                const tmp = {...opt};
+                const {text, value} = opt;
+                delete tmp.text;
+                delete tmp.value;
+                return <van-radio name={value} {...tmp}>{text || opt.label || value}</van-radio>
+            })}
+        </van-radio-group>
+    }
+});

package/src/vant/src/components/select.jsx

@@ -0,0 +1,81 @@
+import {computed, defineComponent, ref, toRef} from 'vue';
+import {normalizeOptions} from '../core/utils';
+
+const NAME = 'fcSelect';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        disabled: Boolean,
+        placeholder: String,
+        columnsFieldNames: Object,
+        modelValue: [String, Number, Boolean],
+        options: Array,
+    },
+    emits: ['update:modelValue', 'fc.el', 'change'],
+    setup(props, _) {
+        const show = ref(false);
+        const modelValue = toRef(props, 'modelValue');
+        const fieldNames = toRef(props, 'columnsFieldNames', {});
+        const options = computed(() => {
+            if (fieldNames?.value?.text) {
+                return props.options || [];
+            } else {
+                return normalizeOptions(props.options || []);
+            }
+        })
+
+        const inputValue = computed(() => {
+            if (modelValue.value == null || modelValue.value === '') {
+                return '';
+            }
+            for (let i = 0; i < (options.value || []).length; i++) {
+                if (options.value[i][fieldNames.value.value || 'value'] === modelValue.value) {
+                    return options.value[i][fieldNames.value.text || 'text'];
+                }
+            }
+            return modelValue.value;
+        });
+
+        const onInput = (val) => {
+            _.emit('update:modelValue', val);
+            _.emit('change', val);
+        }
+
+        return {
+            show,
+            inputValue,
+            options,
+            open() {
+                if (props.disabled) {
+                    return;
+                }
+                show.value = true;
+            },
+            confirm({selectedValues}) {
+                onInput(selectedValues[0]);
+                show.value = false;
+            },
+        }
+    },
+    render() {
+        return <div class="_fc-select">
+            <van-field ref="el" placeholder={this.placeholder} readonly disabled={this.$props.disabled} onClick={this.open}
+                model-value={this.inputValue} isLink/>
+            <van-popup show={this.show} onUpdate:show={(v) => this.show = v} round position="bottom">
+                <van-picker
+                    {...this.$attrs}
+                    modelValue={[this.modelValue]}
+                    columnsFieldNames={this.columnsFieldNames}
+                    columns={this.options}
+                    onCancel={() => this.show = false}
+                    onConfirm={this.confirm}
+                />
+            </van-popup>
+        </div>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});

package/src/vant/src/components/timePicker.jsx

@@ -0,0 +1,76 @@
+import {computed, defineComponent, ref, toRef} from 'vue';
+
+const NAME = 'fcTimePicker';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        disabled: Boolean,
+        clearable: Boolean,
+        placeholder: String,
+        modelValue: [String, Number],
+    },
+    emits: ['update:modelValue', 'fc.el', 'change'],
+    setup(props, _) {
+        const show = ref(false);
+        const modelValue = toRef(props, 'modelValue');
+
+        const formValue = computed(() => {
+            if (modelValue.value == null || modelValue.value === '') {
+                return [];
+            }
+            return modelValue.value.split(':');
+        });
+
+        const onInput = (val) => {
+            _.emit('update:modelValue', val);
+            _.emit('change', val);
+        }
+
+        return {
+            show,
+            formValue,
+            open() {
+                if (props.disabled) {
+                    return;
+                }
+                show.value = true;
+            },
+            confirm({selectedValues}) {
+                onInput(selectedValues.join(':'));
+                show.value = false;
+            },
+            clear(e) {
+                e.stopPropagation();
+                onInput('');
+            }
+        }
+    },
+    render() {
+        const clearIcon = () => {
+            return this.$props.clearable && this.modelValue ?
+                <i class="van-badge__wrapper van-icon van-icon-clear van-field__clear"
+                    onClick={this.clear}></i> : undefined;
+        }
+        return <div class="_fc-time-picker">
+            <van-field ref="el" placeholder={this.placeholder} readonly disabled={this.$props.disabled}
+                onClick={this.open}
+                model-value={this.modelValue} border={false} isLink v-slots={{
+                    'right-icon': clearIcon
+                }}/>
+            <van-popup show={this.show} onUpdate:show={(v) => this.show = v} round position="bottom">
+                <van-time-picker
+                    columnsType={['hour', 'minute']}
+                    {...this.$attrs}
+                    modelValue={this.formValue}
+                    onConfirm={this.confirm}
+                    onCancel={() => this.show = false}
+                />
+            </van-popup>
+        </div>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});