icarys-fc-vant 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 lvyanrui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,174 @@
+# icarys-fc-vant
+
+基于 FormCreate 和 Vant 的移动端低代码表单组件库
+
+## 特性
+
+- 🚀 基于 Vue 3 + Vant 4
+- 📱 专为移动端优化
+- 🎯 通过 JSON 配置生成表单
+- 🔧 支持动态渲染、数据收集、验证和提交
+- 📦 开箱即用，简单易集成
+
+## 安装
+
+```bash
+# 安装组件库
+npm install icarys-fc-vant
+
+# 安装必需的依赖（Vue 3 和 Vant）
+npm install vue@^3.1.0 vant@^4.0.0
+```
+
+## 使用
+
+### 基础用法
+
+#### 方法1：在模板中使用组件
+
+#### 导入使用
+
+```javascript
+import Vue from 'vue'
+import Vant from 'vant'
+import 'vant/lib/index.css'
+import formCreate from 'icarys-fc-vant'
+
+Vue.use(Vant)
+
+// 创建表单规则
+const rule = [
+  {
+    type: 'input',
+    field: 'name',
+    title: '姓名',
+    props: {
+      placeholder: '请输入姓名'
+    }
+  },
+  {
+    type: 'select',
+    field: 'city',
+    title: '城市',
+    options: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' }
+    ]
+  }
+]
+
+// 创建表单实例
+const $f = formCreate.create(rule)
+
+// 挂载到DOM
+$f.mount('#form-container')
+
+// 或者提交表单
+$f.submit().then(data => {
+  console.log('表单数据:', data)
+})
+```
+
+#### 使用工具方法
+
+```javascript
+import formCreate from 'icarys-fc-vant'
+
+// 解析JSON规则
+const rules = formCreate.jsonParse('[{"type":"input","field":"name"}]')
+
+// 序列化对象为JSON
+const jsonString = formCreate.jsonStringify(rules)
+
+// 创建表单
+const $f = formCreate.create(rules)
+```
+
+### 在 Vue 组件中使用
+
+```vue
+<template>
+  <div>
+    <div id="form-container"></div>
+  </div>
+</template>
+
+<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>
+```
+
+## API
+
+### formCreateMobile(rule, options)
+
+创建表单实例
+
+- `rule`: 表单配置规则数组
+- `options`: 配置选项
+
+返回表单实例对象，包含以下方法：
+
+- `mount(selector)`: 挂载到DOM元素
+- `destroy()`: 销毁表单实例
+- `resetFields()`: 重置表单
+- `validate()`: 验证表单
+- `getValue()`: 获取表单值
+- `setValue(data)`: 设置表单值
+
+## 支持的组件类型
+
+- input - 输入框
+- textarea - 文本域
+- select - 下拉选择
+- radio - 单选框
+- checkbox - 多选框
+- switch - 开关
+- datePicker - 日期选择器
+- timePicker - 时间选择器
+- calendar - 日历
+- uploader - 文件上传
+- cascader - 级联选择
+
+## 依赖要求
+
+- Vue ^3.1.0
+- Vant ^4.0.0
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+
+# 发布
+npm run pub
+```
+
+## 许可证
+
+MIT