icarys-fc-vant 1.0.14 → 1.0.16

package/dist/vant/auto-import.js

@@ -0,0 +1,50 @@
+import {
+    Form,
+    Cell,
+    Button,
+    Field,
+    Col,
+    Row,
+    Popup,
+    Calendar,
+    Cascader,
+    CheckboxGroup,
+    Checkbox,
+    DatePicker,
+    Picker,
+    RadioGroup,
+    Radio,
+    Rate,
+    Slider,
+    Stepper,
+    Switch,
+    TimePicker,
+    Uploader
+} from 'vant';
+
+export default function install(formCreate) {
+    formCreate.useApp((_, app) => {
+        app.component(Form.name) || app.use(Form);
+        app.component(Cell.name) || app.use(Cell);
+        app.component(Button.name) || app.use(Button);
+        app.component(Field.name) || app.use(Field);
+        app.component(Col.name) || app.use(Col);
+        app.component(Row.name) || app.use(Row);
+        app.component(Popup.name) || app.use(Popup);
+        app.component(Calendar.name) || app.use(Calendar);
+        app.component(Cascader.name) || app.use(Cascader);
+        app.component(CheckboxGroup.name) || app.use(CheckboxGroup);
+        app.component(Checkbox.name) || app.use(Checkbox);
+        app.component(RadioGroup.name) || app.use(RadioGroup);
+        app.component(Radio.name) || app.use(Radio);
+        app.component(DatePicker.name) || app.use(DatePicker);
+        app.component(Picker.name) || app.use(Picker);
+        app.component(Rate.name) || app.use(Rate);
+        app.component(Slider.name) || app.use(Slider);
+        app.component(Stepper.name) || app.use(Stepper);
+        app.component(Switch.name) || app.use(Switch);
+        app.component(TimePicker.name) || app.use(TimePicker);
+        app.component(Uploader.name) || app.use(Uploader);
+    });
+
+}

package/dist/vant/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    presets: [
+        [
+            '@vue/cli-plugin-babel/preset',
+            {
+                useBuiltIns: false
+            }
+        ]
+    ]
+}

package/dist/vant/bili.config.js

@@ -0,0 +1,40 @@
+const {join} = require('path');
+const {author, license, name, version} = require('./package.json');
+const cwd = __dirname;
+
+const {UI_LIB} = process.env;
+console.log(`开始打包 -> ${UI_LIB} \n`);
+
+module.exports = {
+    plugins: {
+        commonjs: true,
+        postcss: {
+            modules: {
+                generateScopedName: '[local]'
+            }
+        }
+    },
+    banner: {
+        author: `2018-${new Date().getFullYear()} ${author}\n * Github https://github.com/xaboy/form-create`,
+        license,
+        name,
+        version
+    },
+    globals: {
+        vue: 'Vue',
+        vant: 'vant'
+    },
+    externals: ['vue', 'Vue', 'vant'],
+    output: {
+        format: ['umd', 'umd-min'],
+        moduleName: 'formCreateMobile',
+        fileName: 'form-create[min].js',
+        extractCSS: false
+    },
+    input: join(cwd, '/src/index.js'),
+    env: {
+        'NODE_ENV': 'production',
+        'VERSION': version,
+        'UI': UI_LIB,
+    }
+};

package/dist/vant/examples/main.js

@@ -0,0 +1,13 @@
+import {createApp} from 'vue'
+import FormCreateMobile from '../src'
+import 'vant/lib/index.css';
+import App from './App.vue'
+import install from '../auto-import';
+
+const app = createApp(App)
+
+FormCreateMobile.use(install);
+
+app.use(FormCreateMobile);
+
+app.mount('#app')

package/dist/vant/examples/rule.js

@@ -0,0 +1,366 @@
+export default function mock() {
+
+    return [
+        {
+            type: 'input',
+            title: '商品名称',
+            field: 'goods_name2',
+            info: {
+                align: 'left',
+                info:'这个是商品名称',
+            },
+            value: 'iphone',
+            props: {
+                placeholder: '请输入商品名称', //输入框占位文本
+                disabled: false, //禁用
+            },
+            validate: [
+                {required: true, message: '请输入商品名称', trigger: 'onBlur'}
+            ]
+        },
+        {
+            type: 'field',
+            title: '商品名称2',
+            field: 'goods_name3',
+            value: 'iphone',
+            $required: true,
+            props: {
+                placeholder: '请输入商品名称', //输入框占位文本
+                type: 'textarea', //禁用
+                autosize: true,
+            },
+        },
+        {
+            type: 'subform',
+            title:'子表单',
+            field: 'subform',
+            props: {
+                rule: [
+                    {
+                        type: 'input',
+                        title: '商品名称',
+                        field: 'goods_name2',
+                        info: {
+                            align: 'left',
+                            info:'这个是商品名称',
+                        },
+                        value: 'iphone',
+                        props: {
+                            placeholder: '请输入商品名称', //输入框占位文本
+                            disabled: false, //禁用
+                        },
+                    },
+                    {
+                        type: 'calendar',
+                        title: '日期选择',
+                        field: 'Calendar1',
+                        value: '2024-06-11',
+                        props: {
+                            placeholder: '请选择',
+                        },
+                        on: {
+                            open(){
+                                console.log('open');
+                            },
+                            confirm(){
+                                console.log('confirm');
+                            },
+                        },
+                    },
+                    {
+                        type: 'calendar',
+                        title: '日期区间',
+                        field: 'Calendar2',
+                        value: ['2024-06-11', '2024-07-11'],
+                        props: {
+                            type: 'range',
+                            placeholder: '请选择',
+                        },
+
+                    },
+                ]
+            }
+        },
+        {
+            type: 'group',
+            title:'组合',
+            field: 'group',
+            props: {
+                disabled: false,
+                expand: 3,
+                rule: [
+                    {
+                        type: 'input',
+                        title: '商品名称',
+                        field: 'goods_name2',
+                        info: {
+                            align: 'left',
+                            info:'这个是商品名称',
+                        },
+                        value: 'iphone',
+                        props: {
+                            placeholder: '请输入商品名称', //输入框占位文本
+                            disabled: true, //禁用
+                        },
+                    },
+                    {
+                        type: 'calendar',
+                        title: '日期选择',
+                        field: 'Calendar1',
+                        value: '2024-06-11',
+                        props: {
+                            placeholder: '请选择',
+                        },
+                    },
+                    {
+                        type: 'calendar',
+                        title: '日期区间',
+                        field: 'Calendar2',
+                        value: ['2024-06-11', '2024-07-11'],
+                        props: {
+                            type: 'range',
+                            placeholder: '请选择',
+                        },
+                    },
+                ]
+            }
+        },
+        {
+            type: 'calendar',
+            title: '日期多选',
+            field: 'Calendar3',
+            value: ['2024-06-11', '2024-07-11', '2024-07-12'],
+            props: {
+                type: 'multiple',
+                placeholder: '请选择',
+                clearable: true,
+                minDate: '2024-06-10'
+            },
+        },
+        {
+            type: 'cascader',
+            title: '多级选择',
+            field: 'Cascader1',
+            value: '330100',
+            props: {
+                clearable: true,
+                options: [
+                    {
+                        text: '浙江省',
+                        value: '330000',
+                        children: [{text: '杭州市', value: '330100'}],
+                    },
+                    {
+                        text: '江苏省',
+                        value: '320000',
+                        children: [{text: '南京市', value: '320100'}],
+                    },
+                ],
+                placeholder: '请选择',
+            },
+        },
+        {
+            type: 'checkbox',
+            title: '多选框',
+            field: 'checkbox',
+            value: ['1'],
+            props: {
+                options: [
+                    {
+                        label: '复选框1',
+                        value: '1',
+                    },
+                    {
+                        label: '复选框2',
+                        value: '2',
+                    },
+                ],
+            },
+        },
+        {
+            type: 'radio',
+            title: '单选框',
+            field: 'radio',
+            value: '1',
+            props: {
+                options: [
+                    {
+                        label: '复选框1',
+                        value: '1',
+                    },
+                    {
+                        label: '复选框2',
+                        value: '2',
+                    },
+                ],
+            },
+        },
+        {
+            type: 'select',
+            title: '下拉选择',
+            field: 'select',
+            value: 'Wednesday',
+            props: {
+                title: '预约',
+                options: [
+                    { text: '周一', value: 'Monday' },
+                    { text: '周二', value: 'Tuesday' },
+                    { text: '周三', value: 'Wednesday' },
+                    { text: '周四', value: 'Thursday' },
+                    { text: '周五', value: 'Friday' },
+                ],
+                placeholder: '请选择',
+            },
+        },
+        {
+            type: 'rate',
+            title: '评分',
+            field: 'rate',
+            value: 5,
+            props: {
+            },
+        },
+        {
+            type: 'slider',
+            title: '滑块',
+            field: 'slider',
+            value: 50,
+            props: {
+            },
+        },
+        {
+            type: 'slider',
+            title: '双滑块',
+            field: 'slider2',
+            value: [30, 70],
+            props: {
+                range: true,
+            },
+        },
+        {
+            type: 'stepper',
+            title: '数字输入',
+            field: 'stepper',
+            value: 6,
+            col: {
+                span:16
+            },
+            props: {
+                min:5,
+                max:10
+            },
+        },
+        {
+            type: 'switch',
+            title: '',
+            field: 'switch',
+            value: 1,
+            col: {
+                span:8
+            },
+            props: {
+                activeValue:1,
+                inactiveValue:0
+            },
+        },
+        {
+            type: 'uploader',
+            title: '上传',
+            field: 'uploader',
+            value: [],
+            props: {
+                action: 'https://run.mocky.io/v3/88bff269-1d6d-4799-8b3b-5736402b3d4a',
+                onSuccess(res, file) {
+                    file.url = res.url;
+                }
+            },
+        },
+        {
+            type: 'datePicker',
+            title: '年月日选择',
+            field: 'date',
+            value: '2024-06-12',
+            props: {
+                clearable: true,
+                title: '年月日选择',
+                // minDate: '2024-06-11'
+            },
+        },
+        {
+            type: 'datePicker',
+            title: '年月选择',
+            field: 'date2',
+            value: '2024-06',
+            props: {
+                title: '年月选择',
+                columnsType: ['year', 'month']
+            },
+        },
+        {
+            type: 'datePicker',
+            title: '年选择',
+            field: 'date3',
+            value: '2024',
+            col: {
+                span:12
+            },
+            props: {
+                title: '年选择',
+                columnsType: ['year'],
+            },
+        },
+        {
+            type: 'datePicker',
+            title: '月日选择',
+            field: 'date4',
+            value: '06-12',
+            col: {
+                span:12
+            },
+            props: {
+                title: '月日选择',
+                columnsType: ['month', 'day'],
+            },
+        },
+        {
+            type: 'timePicker',
+            title: '时间选择',
+            field: 'time1',
+            value: '12:47',
+            props: {
+                clearable: true,
+                title: '时间选择',
+            },
+        },
+        {
+            type: 'timePicker',
+            title: '时分秒选择',
+            field: 'time2',
+            value: '12:47:58',
+            props: {
+                title: '时分秒选择',
+                columnsType: ['hour', 'minute', 'second']
+            },
+        },
+        {
+            type: 'timePicker',
+            title: '小时选择',
+            field: 'time3',
+            value: '12',
+            props: {
+                title: '小时选择',
+                columnsType: ['hour']
+            },
+        },
+        {
+            type: 'timePicker',
+            title: '分钟选择',
+            field: 'time4',
+            value: '58',
+            props: {
+                title: '分钟选择',
+                columnsType: ['minute']
+            },
+        },
+    ];
+}

package/dist/vant/package.json

@@ -0,0 +1,83 @@
+{
+    "name": "icarys-fc-vant",
+    "version": "3.2.37",
+    "description": "VantUI版本低代码表单|FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。",
+    "main": "./dist/icarys-fc-vant.min.js",
+    "module": "./dist/icarys-fc-vant.esm.js",
+    "unpkg": "./dist/icarys-fc-vant.min.js",
+    "jsdelivr": "./dist/icarys-fc-vant.min.js",
+    "typings": "./dist/index.d.ts",
+    "scripts": {
+        "clean": "rimraf dist/",
+        "dev:vant": "vue-cli-service serve",
+        "bili": "cross-env UI_LIB=vant bili",
+        "build": "npm-run-all clean bili"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/xaboy/form-create.git"
+    },
+    "keywords": [
+        "动态表单",
+        "低代码",
+        "@form-create",
+        "form-builder",
+        "form",
+        "components",
+        "vue3",
+        "mobile",
+        "vant",
+        "lowcode",
+        "dynamic-form"
+    ],
+    "files": [
+        "README.md",
+        "package.json",
+        "LICENSE",
+        "auto-import.js",
+        "auto-import.d.ts",
+        "src",
+        "types",
+        "dist"
+    ],
+    "author": "xaboy",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/xaboy/form-create/issues"
+    },
+    "homepage": "http://www.form-create.com/v3/",
+    "dependencies": {
+        "@form-create/component-subform": "^3.2.34",
+        "@form-create/core": "^3.2.37",
+        "@form-create/utils": "^3.2.31",
+        "dayjs": "^1.11.11"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "vue": "^3.1.0"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "~4.5.0",
+        "@vue/cli-service": "^4.5.3",
+        "v-jsoneditor": "^1.4.2",
+        "vant": "^4.9"
+    },
+    "buildFormCreateOptions": {
+        "name": "@form-create/vant",
+        "exportName": "formCreateMobile",
+        "extendExternals": [
+            "vant"
+        ],
+        "extendGlobal": {
+            "vue": "Vue"
+        },
+        "fileName": "form-create",
+        "formats": [
+            "umd",
+            "esm"
+        ]
+    },
+    "gitHead": "3d024534b3ee103a96da1d3629582c0cdf19d9a8"
+}

package/dist/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);
+    }
+});