icarys-fc-vant 1.0.15 → 1.0.17

package/src/vant/src/components/calendar.jsx

@@ -0,0 +1,128 @@
+import {computed, defineComponent, ref, toRef, watch} from 'vue';
+import is, {hasProperty} from '@form-create/utils/lib/type';
+import dayjs from 'dayjs';
+
+const NAME = 'fcCalendar';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        placeholder: String,
+        formCreateInject: Object,
+        disabled: Boolean,
+        clearable: Boolean,
+        type: String,
+        modelValue: [String, Array],
+        minDate: [String, Date],
+        maxDate: [String, Date],
+    },
+    emits: ['update:modelValue', 'change', 'fc.el'],
+    setup(props, _) {
+        const show = ref(false);
+        const modelValue = toRef(props, 'modelValue');
+        const formCreateInject = toRef(props, 'formCreateInject');
+        const inputValue = ref(modelValue.value);
+
+        watch(() => modelValue.value, (n) => {
+            inputValue.value = n;
+        })
+
+        const formatter = (date) => {
+            return dayjs(date).format('YYYY-MM-DD');
+        }
+        const toDate = (str) => {
+            return dayjs(str).toDate();
+        }
+
+        const defaultDate = computed(() => {
+            const value = modelValue.value;
+            if (Array.isArray(value)) {
+                return value.map(toDate);
+            } else if (value) {
+                return toDate(value);
+            } else {
+                return null;
+            }
+        })
+
+        const dateRange = computed(() => {
+            return {
+                minDate: props.minDate ? dayjs(props.minDate).toDate() : undefined,
+                maxDate: props.maxDate ? dayjs(props.maxDate).toDate() : undefined,
+            }
+        })
+
+        const formatValue = (value) => {
+            if (Array.isArray(value)) {
+                inputValue.value = value.map(formatter);
+            } else if (value) {
+                inputValue.value = formatter(value);
+            } else {
+                inputValue.value = value;
+            }
+        }
+        const onInput = () => {
+            _.emit('update:modelValue', inputValue.value);
+            _.emit('change', inputValue.value);
+        }
+        const strValue = {
+            range() {
+                return inputValue.value.length ? inputValue.value.join(' - ') : '';
+            },
+            multiple() {
+                return inputValue.value.length ? (formCreateInject.value.t('selectedData', {length: inputValue.value.length}) ||`选择了 ${inputValue.value.length} 个日期`)  : '';
+            }
+        }
+
+        return {
+            show,
+            inputValue,
+            defaultDate,
+            dateRange,
+            open() {
+                if (props.disabled) {
+                    return;
+                }
+                show.value = true;
+            },
+            confirm(value) {
+                formatValue(value);
+                show.value = false;
+                onInput();
+            },
+            getStrValue() {
+                if (inputValue.value) {
+                    return hasProperty(strValue, props.type) ? strValue[props.type]() : (inputValue.value || '');
+                }
+                return '';
+            },
+            clear(e) {
+                e.stopPropagation();
+                const value = Array.isArray(inputValue.value) ? [] : '';
+                formatValue(value);
+                onInput();
+            }
+        }
+    },
+    render() {
+        const clearIcon = () => {
+            return this.$props.clearable && !is.empty(this.inputValue) ?
+                <i class="van-badge__wrapper van-icon van-icon-clear van-field__clear"
+                    onClick={this.clear}></i> : undefined;
+        }
+        return <div class="_fc-calendar">
+            <van-field ref="el" placeholder={this.placeholder} readonly disabled={this.$props.disabled}
+                onClick={this.open}
+                model-value={this.getStrValue()} isLink border={false} v-slots={{
+                    'right-icon': clearIcon
+                }}/>
+            <van-calendar {...{...this.$attrs, ...this.dateRange}} show={this.show} onUpdate:show={v => (this.show = v)}
+                type={this.type}
+                onConfirm={this.confirm} defaultDate={this.defaultDate}/>
+        </div>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});

package/src/vant/src/components/cascader.jsx

@@ -0,0 +1,120 @@
+import {computed, defineComponent, ref, toRef, watch} from 'vue';
+import {normalizeOptions} from '../core/utils';
+
+const NAME = 'fcCascader';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        placeholder: String,
+        disabled: Boolean,
+        clearable: Boolean,
+        fieldNames: Object,
+        modelValue: [String, Number],
+        options: Array,
+        minDate: [String, Date],
+        maxDate: [String, Date],
+    },
+    emits: ['update:modelValue', 'fc.el', 'change'],
+    setup(props, _) {
+        const show = ref(false);
+        const modelValue = toRef(props, 'modelValue');
+        const fieldNames = toRef(props, 'fieldNames', {});
+        const options = computed(() => {
+            if (fieldNames?.value?.text) {
+                return props.options || [];
+            } else {
+                return normalizeOptions(props.options || []);
+            }
+        })
+
+        const findOptions = (options, value, path) => {
+            for (let i = 0; i < options.length; i++) {
+                if (options[i][fieldNames.value.value || 'value'] === value) {
+                    return [...path, options[i]];
+                } else if (options[i][fieldNames.value.children || 'children']) {
+                    const find = findOptions(options[i][fieldNames.value.children || 'children'], value, [...path, options[i]]);
+                    if (find) {
+                        return find;
+                    }
+                }
+            }
+        }
+
+        const updateInputValue = (n) => {
+            if (n == null || n === '') {
+                return '';
+            }
+            const path = findOptions(options.value, n, []);
+            return path ? path.map((option) => option[fieldNames.value.text || 'text']).join(' / ') : n;
+        }
+
+        const inputValue = ref(updateInputValue(modelValue.value));
+
+        watch(() => modelValue.value, (n) => {
+            inputValue.value = updateInputValue(n);
+        });
+
+        watch(() => options.value, () => {
+            if (modelValue.value != null && modelValue.value !== '') {
+                inputValue.value = updateInputValue(modelValue.value);
+            }
+        }, {deep: true});
+
+        const onInput = (val) => {
+            _.emit('update:modelValue', val);
+            _.emit('change', val);
+        }
+
+        return {
+            show,
+            inputValue,
+            options,
+            open() {
+                if (props.disabled) {
+                    return;
+                }
+                show.value = true;
+            },
+            confirm({selectedOptions, value}) {
+                inputValue.value = selectedOptions.map((option) => option[fieldNames.value.text || 'text']).join(' / ');
+                show.value = false;
+                onInput(value);
+            },
+            clear(e) {
+                e.stopPropagation();
+                inputValue.value = '';
+                onInput('');
+            }
+        }
+    },
+    render() {
+        const clearIcon = () => {
+            return this.$props.clearable && this.inputValue ?
+                <i class="van-badge__wrapper van-icon van-icon-clear van-field__clear"
+                    onClick={this.clear}></i> : undefined;
+        }
+
+        return <div class="_fc-cascader">
+            <van-field ref="el" placeholder={this.placeholder} readonly disabled={this.$props.disabled}
+                onClick={this.open}
+                model-value={this.inputValue} border={false} isLink v-slots={{
+                    'right-icon': clearIcon
+                }}/>
+            <van-popup show={this.show} onUpdate:show={(v) => this.show = v} round position="bottom">
+                <van-cascader
+                    {...this.$attrs}
+                    modelValue={this.modelValue}
+                    fieldNames={this.fieldNames}
+                    options={this.options}
+                    onClose={() => this.show = false}
+                    onFinish={this.confirm}
+                />
+            </van-popup>
+        </div>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});

package/src/vant/src/components/checkbox.jsx

@@ -0,0 +1,38 @@
+import {defineComponent, toRef} from 'vue';
+
+const NAME = 'fcCheckbox';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        modelValue: Array,
+        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-checkbox-group direction="horizontal" {...this.$attrs} modelValue={Array.isArray(this.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-checkbox name={value} shape="square" {...tmp}>{text || opt.label || value}</van-checkbox>
+            })}
+        </van-checkbox-group>
+    }
+});

package/src/vant/src/components/datePicker.jsx

@@ -0,0 +1,87 @@
+import {computed, defineComponent, ref, toRef} from 'vue';
+import dayjs from 'dayjs';
+
+const NAME = 'fcDatePicker';
+
+export default defineComponent({
+    name: NAME,
+    inheritAttrs: false,
+    props: {
+        disabled: Boolean,
+        clearable: Boolean,
+        placeholder: String,
+        modelValue: [String, Number],
+        minDate: [String, Date],
+        maxDate: [String, Date],
+    },
+    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 dateRange = computed(() => {
+            return {
+                minDate: props.minDate ? dayjs(props.minDate).toDate() : undefined,
+                maxDate: props.maxDate ? dayjs(props.maxDate).toDate() : undefined,
+            }
+        })
+
+        const onInput = (val) => {
+            _.emit('update:modelValue', val);
+            _.emit('change', val);
+        }
+
+        return {
+            show,
+            formValue,
+            dateRange,
+            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-date-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-date-picker
+                    columnsType={['year', 'month', 'day']}
+                    {...{...this.$attrs, ...this.dateRange}}
+                    modelValue={this.formValue}
+                    onConfirm={this.confirm}
+                    onCancel={() => this.show = false}
+                />
+            </van-popup>
+        </div>
+    },
+    mounted() {
+        this.$emit('fc.el', this.$refs.el);
+    }
+});