icarys-fc-vant 1.0.14 → 1.0.16

package/README.md

@@ -1,335 +1,144 @@
-# @icarys/fc-vant
+# icarys-fc-vant
 
-基于 FormCreate 和 Vant 的移动端低代码表单组件库
-
-## 特性
-
-- 🚀 基于 Vue 3 + Vant 4
-- 📱 专为移动端优化
-- 🎯 通过 JSON 配置生成表单
-- 🔧 支持动态渲染、数据收集、验证和提交
-- 📦 开箱即用，简单易集成
+基于 FormCreate 和 Vant 的低代码表单生成器
 
 ## 安装
 
 ```bash
-# 安装组件库（包含预构建文件）
 npm install icarys-fc-vant
-
-# 安装必需的依赖
-npm install vue@^3.1.0 vant@^4.0.0
 ```
 
 ## 使用方式
 
-### 在Vue模板中使用
+### 1. 推荐使用方式（完整功能）
 
-```vue
-<template>
-  <form-create
-    :disabled="disabled"
-    :rule="rule"
-    v-model="_value"
-    :option="option"
-    ref="formRef"
-    v-model:api="fapi"
-  />
-</template>
+由于复杂的JSX组件依赖，推荐直接使用官方包：
 
-<script>
-import formCreate from 'icarys-fc-vant'
-
-export default {
-  data() {
-    return {
-      disabled: false,
-      _value: {},
-      rule: [
-        { type: 'input', field: 'name', title: '姓名' }
-      ],
-      option: {},
-      fapi: null
-    }
-  },
-  created() {
-    // 解析配置 - 按照您的方式使用
-    this.option = formCreate.parseJson(this.config?.option || '{}')
-    this.rule = formCreate.parseJson(this.config?.rule || '[]')
-  }
-}
-</script>
+```javascript
+import formCreate from '@form-create/vant'
 ```
 
-### 编程式使用
+### 2. 工具函数使用
+
+如果你只需要工具函数，可以使用这个包：
 
 ```javascript
-import formCreate from 'icarys-fc-vant'
+// CommonJS
+const { parseJson, toJson, toArray } = require('icarys-fc-vant');
 
-// 解析配置
-const option = formCreate.parseJson(props.config.option)
-const rule = formCreate.parseJson(props.config.rule)
+// ESM
+import { parseJson, toJson, toArray } from 'icarys-fc-vant';
+```
+
+### 3. 基础API使用
 
-// 创建表单实例
-const $f = formCreate(rule, option)
-$f.mount('#form-container')
+```javascript
+// 获取FormCreate实例
+import { formCreateMobile, createFormCreate } from 'icarys-fc-vant';
+
+const fc = createFormCreate();
+// fc.component('custom-component', CustomComponent);
 ```
 
-## 使用
+## API 参考
 
-### 在Vue组件中使用
+### FormCreate API
 
-#### 模板中使用组件
+#### formCreateMobile
+FormCreate移动端实例（基础实现）
 
-```vue
-<template>
-  <div>
-    <!-- 在模板中使用组件 -->
-    <FormCreate
-      ref="formCreateRef"
-      :rule="rule"
-      :option="option"
-    />
-    <van-button @click="handleSubmit">提交表单</van-button>
-  </div>
-</template>
+#### createFormCreate()
+创建FormCreate工厂函数
 
-<script>
-import Vue from 'vue'
-import Vant from 'vant'
-import 'vant/lib/index.css'
-import formCreate from 'icarys-fc-vant'
-import FormCreate from './components/FormCreate.vue'
-
-Vue.use(Vant)
-
-export default {
-  components: {
-    FormCreate
-  },
-  data() {
-    return {
-      rule: [
-        {
-          type: 'input',
-          field: 'name',
-          title: '姓名',
-          props: {
-            placeholder: '请输入姓名'
-          }
-        },
-        {
-          type: 'select',
-          field: 'city',
-          title: '城市',
-          options: [
-            { label: '北京', value: 'beijing' },
-            { label: '上海', value: 'shanghai' }
-          ]
-        }
-      ],
-      option: {
-        // 表单配置选项
-      }
-    }
-  },
-  methods: {
-    handleSubmit() {
-      // 使用组件方法
-      this.$refs.formCreateRef.submit().then(data => {
-        console.log('表单数据:', data)
-      }).catch(error => {
-        console.error('验证失败:', error)
-      })
-    },
-
-    // 使用formCreate的工具方法
-    loadFormFromJson(jsonString) {
-      try {
-        const rules = formCreate.parseJson(jsonString)
-        this.rule = rules
-      } catch (error) {
-        console.error('解析JSON失败:', error)
-      }
-    },
-
-    // 序列化表单规则
-    saveFormToJson() {
-      const jsonString = formCreate.stringifyJson(this.rule)
-      console.log('表单JSON:', jsonString)
-      return jsonString
-    }
-  }
-}
-</script>
+```javascript
+const fc = createFormCreate();
+fc.component('name', Component); // 注册组件
+fc.componentAlias({ alias: 'realName' }); // 设置别名
 ```
 
-#### Composition API中使用
+### 工具函数
 
-```vue
-<template>
-  <div>
-    <FormCreate
-      ref="formCreateRef"
-      :rule="rule"
-      :option="option"
-    />
-  </div>
-</template>
+#### parseJson(str)
+解析JSON字符串为对象
 
-<script setup>
-import { ref, reactive } from 'vue'
-import formCreate from 'icarys-fc-vant'
-import FormCreate from './components/FormCreate.vue'
-
-// 使用formCreate的工具方法
-const loadForm = (jsonString) => {
-  try {
-    return formCreate.parseJson(jsonString)
-  } catch (error) {
-    console.error('解析失败:', error)
-    return []
-  }
-}
-
-const saveForm = (rules) => {
-  return formCreate.stringifyJson(rules)
-}
-
-// 表单数据
-const rule = ref([
-  {
-    type: 'input',
-    field: 'name',
-    title: '姓名'
-  }
-])
-
-const option = reactive({
-  // 配置选项
-})
-
-// 组件引用
-const formCreateRef = ref(null)
-
-// 提交表单
-const handleSubmit = async () => {
-  try {
-    const data = await formCreateRef.value.submit()
-    console.log('提交成功:', data)
-  } catch (error) {
-    console.error('提交失败:', error)
-  }
-}
-</script>
+```javascript
+const option = parseJson('{"title": "表单标题"}');
+// {title: "表单标题"}
 ```
 
-### 编程式使用
+#### toJson(obj)
+将对象转换为JSON字符串
 
 ```javascript
-import formCreate from 'icarys-fc-vant'
-
-// 1. 创建表单实例
-const $f = formCreate([
-  {
-    type: 'input',
-    field: 'name',
-    title: '姓名'
-  }
-])
-
-// 2. 挂载到DOM
-$f.mount('#form-container')
-
-// 3. 使用工具方法
-const jsonRules = formCreate.parseJson('[{"type":"input","field":"name"}]')
-const jsonString = formCreate.toJson(rules)
-
-// 4. 表单操作
-$f.submit().then(data => console.log(data))
-$f.validate().then(() => console.log('验证通过'))
-$f.resetFields()
+const jsonString = toJson({title: "表单标题"});
+// '{"title":"表单标题"}'
 ```
 
-### 在 Vue 组件中使用
-
-```vue
-<template>
-  <div>
-    <div id="form-container"></div>
-  </div>
-</template>
+#### toArray(val)
+将值转换为数组
 
-<script>
-import { formCreateMobile } from '@icarys/fc-vant'
-
-export default {
-  mounted() {
-    const rule = [
-      {
-        type: 'input',
-        field: 'name',
-        title: '姓名',
-        props: {
-          placeholder: '请输入姓名'
-        }
-      }
-    ]
-
-    const $f = formCreateMobile(rule)
-    $f.mount('#form-container')
-  }
-}
-</script>
+```javascript
+toArray('test'); // ['test']
+toArray(['a', 'b']); // ['a', 'b']
 ```
 
-## API
+#### toString(val)
+将值转换为字符串
 
-### formCreateMobile(rule, options)
+```javascript
+toString(null); // ''
+toString(123); // '123'
+```
 
-创建表单实例
+#### extend(target, ...sources)
+对象扩展函数
 
-- `rule`: 表单配置规则数组
-- `options`: 配置选项
+```javascript
+extend({}, {a: 1}, {b: 2}); // {a: 1, b: 2}
+```
 
-返回表单实例对象，包含以下方法：
+## 在Vue中使用
 
-- `mount(selector)`: 挂载到DOM元素
-- `destroy()`: 销毁表单实例
-- `resetFields()`: 重置表单
-- `validate()`: 验证表单
-- `getValue()`: 获取表单值
-- `setValue(data)`: 设置表单值
+```vue
+<template>
+  <!-- 由于JSX复杂性，推荐使用 @form-create/vant -->
+  <div>使用 @form-create/vant 获取完整功能</div>
+</template>
 
-## 支持的组件类型
+<script setup>
+import { parseJson } from 'icarys-fc-vant'
 
-- input - 输入框
-- textarea - 文本域
-- select - 下拉选择
-- radio - 单选框
-- checkbox - 多选框
-- switch - 开关
-- datePicker - 日期选择器
-- timePicker - 时间选择器
-- calendar - 日历
-- uploader - 文件上传
-- cascader - 级联选择
+// 仍然可以使用工具函数
+const option = parseJson('{"title": "表单标题"}')
+</script>
+```
 
 ## 依赖要求
 
-- Vue ^3.1.0
-- Vant ^4.0.0
+- Vue 3.1.0+
+- Vant 4.9+
 
-## 开发
+## 注意事项
+
+1. **JSX组件支持**: 由于JSX组件的复杂依赖关系，这个包提供了基础的FormCreate API，但完整的表单组件功能需要使用 `@form-create/vant`
+
+2. **完整功能**: 如需完整的表单生成功能，请直接使用 `@form-create/vant` 包
+
+3. **工具函数**: 这个包的工具函数可以独立使用，无需依赖其他包
+
+## 从源码构建
 
 ```bash
+# 克隆源码
+git clone <your-repo>
+
 # 安装依赖
 npm install
 
-# 开发模式
-npm run dev
+# 构建
+npm run build
 
-# 发布（直接发布源文件，无需构建）
-npm publish
+# 构建产物在 dist/ 目录
 ```
 
 ## 许可证

package/dist/components/common/subform/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@form-create/component-subform",
+  "version": "3.2.34",
+  "description": "@form-create 内置组件",
+  "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"
+  },
+  "files": [
+    "README.md",
+    "package.json",
+    "LICENSE",
+    "src",
+    "dist"
+  ],
+  "keywords": [
+    "@form-create",
+    "form-create-component",
+    "form-create-common-component"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xaboy/form-create.git"
+  },
+  "author": "xaboy",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xaboy/form-create/issues"
+  },
+  "homepage": "http://www.form-create.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "buildFormCreateOptions": {
+    "name": "@form-create/component-subform",
+    "exportName": "FcSubForm",
+    "formats": [
+      "umd",
+      "esm"
+    ]
+  },
+  "gitHead": "3d024534b3ee103a96da1d3629582c0cdf19d9a8"
+}

package/dist/components/common/subform/src/component.jsx

@@ -0,0 +1,75 @@
+import {defineComponent, reactive, markRaw, nextTick} from 'vue';
+
+const NAME = 'fcSubForm';
+
+
+export default defineComponent({
+    name: NAME,
+    props: {
+        rule: Array,
+        options: {
+            type: Object,
+            default: () => reactive(({
+                submitBtn: false,
+                resetBtn: false,
+            }))
+        },
+        modelValue: {
+            type: Object,
+            default: () => ({})
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        syncDisabled: {
+            type: Boolean,
+            default: true
+        },
+        formCreateInject: Object,
+    },
+    data() {
+        return {
+            cacheValue: {},
+            subApi: {},
+            form: markRaw(this.formCreateInject.form.$form())
+        }
+    },
+    emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
+    watch: {
+        modelValue(n) {
+            this.setValue(n);
+        }
+    },
+    methods: {
+        formData(value) {
+            this.cacheValue = JSON.stringify(value);
+            this.$emit('update:modelValue', value);
+            this.$emit('change', value);
+        },
+        setValue(value) {
+            const str = JSON.stringify(value);
+            if (this.cacheValue === str) {
+                return;
+            }
+            this.cacheValue = str;
+            this.subApi.coverValue(value || {});
+        },
+        add$f(api) {
+            this.subApi = api;
+            nextTick(() => {
+                this.$emit('itemMounted', api);
+            });
+        }
+    },
+    render() {
+        const Type = this.form;
+        return <Type
+            disabled={this.disabled}
+            onUpdate:modelValue={this.formData}
+            modelValue={this.modelValue}
+            onUpdate:api={this.add$f}
+            rule={this.rule}
+            option={this.options} extendOption={true}/>
+    }
+})

package/dist/components/common/subform/src/index.js

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

package/dist/components/common/wangeditor/package-lock.json

@@ -0,0 +1,114 @@
+{
+	"name": "@form-create/component-wangeditor",
+	"version": "3.2.14",
+	"lockfileVersion": 2,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "@form-create/component-wangeditor",
+			"version": "3.1.2",
+			"license": "MIT",
+			"dependencies": {
+				"wangeditor": "^4.6.0"
+			}
+		},
+		"node_modules/@babel/runtime": {
+			"version": "7.15.4",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+			"integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+			"dependencies": {
+				"regenerator-runtime": "^0.13.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/runtime-corejs3": {
+			"version": "7.15.4",
+			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz",
+			"integrity": "sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==",
+			"dependencies": {
+				"core-js-pure": "^3.16.0",
+				"regenerator-runtime": "^0.13.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/core-js-pure": {
+			"version": "3.18.1",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.1.tgz",
+			"integrity": "sha512-kmW/k8MaSuqpvA1xm2l3TVlBuvW+XBkcaOroFUpO3D4lsTGQWBTb/tBDCf/PNkkPLrwgrkQRIYNPB0CeqGJWGQ==",
+			"deprecated": "core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.13.9",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+			"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+		},
+		"node_modules/tslib": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+			"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+		},
+		"node_modules/wangeditor": {
+			"version": "4.7.8",
+			"resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.7.8.tgz",
+			"integrity": "sha512-x033FPrVDgqzaKHMp75B247w02VIR1vGwstSZnXeJhdFhgLH979G8SWkSpXCcCVAKdHP0gbSkYb5r0Lp3Erdag==",
+			"dependencies": {
+				"@babel/runtime": "^7.11.2",
+				"@babel/runtime-corejs3": "^7.11.2",
+				"tslib": "^2.1.0"
+			}
+		}
+	},
+	"dependencies": {
+		"@babel/runtime": {
+			"version": "7.15.4",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+			"integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+			"requires": {
+				"regenerator-runtime": "^0.13.4"
+			}
+		},
+		"@babel/runtime-corejs3": {
+			"version": "7.15.4",
+			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz",
+			"integrity": "sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==",
+			"requires": {
+				"core-js-pure": "^3.16.0",
+				"regenerator-runtime": "^0.13.4"
+			}
+		},
+		"core-js-pure": {
+			"version": "3.18.1",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.1.tgz",
+			"integrity": "sha512-kmW/k8MaSuqpvA1xm2l3TVlBuvW+XBkcaOroFUpO3D4lsTGQWBTb/tBDCf/PNkkPLrwgrkQRIYNPB0CeqGJWGQ=="
+		},
+		"regenerator-runtime": {
+			"version": "0.13.9",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+			"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+		},
+		"tslib": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+			"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+		},
+		"wangeditor": {
+			"version": "4.7.8",
+			"resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.7.8.tgz",
+			"integrity": "sha512-x033FPrVDgqzaKHMp75B247w02VIR1vGwstSZnXeJhdFhgLH979G8SWkSpXCcCVAKdHP0gbSkYb5r0Lp3Erdag==",
+			"requires": {
+				"@babel/runtime": "^7.11.2",
+				"@babel/runtime-corejs3": "^7.11.2",
+				"tslib": "^2.1.0"
+			}
+		}
+	}
+}