icarys-fc-vant 1.0.15 → 1.0.17

package/src/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/src/vant/examples/App.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <h1 class="title">FormCreate Vant Demo</h1>
+    <h3>Render</h3>
+    <div class="container">
+      <div class="mobile">
+        <form-create-mobile name="test" :rule="rule" v-model:api="fapi" :option="option" v-model="formData" />
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {defineComponent, ref, watch} from 'vue'
+import mock from './rule';
+
+export default defineComponent({
+  setup() {
+    const fapi = ref({});
+    const rule = ref(mock())
+
+    //formData
+    const formData = ref({goods_name2: 'goods_name2'})
+    const json = ref({});
+    watch(formData, value => {
+      json.value = value;
+    })
+
+    //option
+    const option = ref({
+      beforeFetch(opt) {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve();
+          }, 5000)
+        });
+      },
+      resetBtn: true
+    })
+
+    return {
+      fapi,
+      rule,
+      formData,
+      json,
+      option,
+    }
+  }
+})
+</script>
+
+<style>
+.title {
+  background-image: -webkit-linear-gradient(left, #d81159, #e53a40 10%, #ffbc42 20%, #75d701 30%, #30a9de 40%, #d81159 50%, #e53a40 60%, #ffbc42 70%, #75d701 80%, #30a9de 90%, #d81159);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  background-size: 200% 100%;
+  -webkit-animation: flowlight 5s linear infinite;
+  animation: flowlight 5s linear infinite;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile {
+  width:390px;
+  height: calc(100vh - 200px);
+  overflow: scroll;
+  border-radius: 25px;
+  box-shadow: 0 0 1px 10px #000;
+}
+
+@keyframes flowlight {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+@-webkit-keyframes flowlight {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+</style>

package/src/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/src/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/src/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/src/vant/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
+    <title>form-create 示例</title>
+</head>
+
+<body>
+<div id="app">
+</div>
+</body>
+</html>