el-form-renderer-vue3 1.0.0

package/README.en.md

@@ -0,0 +1,36 @@
+# form-render
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,252 @@
+## 遗留问题 :待解决
+
+select 为 multiple 多选时 必须初始化空数组（在 elementplus v-model 初始化 updateValue 时 为空数组会触发校验）
+
+## Introduction
+
+### WHAT
+
+form-renderer 基于元素 element-plus，但不限于元素 element-plus 组件。在完全继承 element-plus 元素的 form 属性的基础上，进行了扩展。一些非表单组件或自定义组件，因此，用户可以使用一段 json 来呈现完整的表单。
+
+### WHY
+
+在我们的日常开发中，有很多有表单的页面，通常表单结构相似，逻辑重复。el 表单呈现器没有复杂的逻辑。它只转换 JSON 来呈现表单项，节省了编写业务逻辑的时间和精力，并减少了重复代码。
+
+## Features
+
+- 用 json 呈现表单
+- 支持与自定义组件集成
+- 支持 updateForm 方法批量更新表单数据
+- 支持 setOptions 方法，动态更改选择选项
+- 内容支持 inputFormat、outputFormat、trim 以处理组件的输入和输出值
+- 支持 v-model
+
+## Links
+
+- [$attrs 和 $listeners (vue2&&vue3)](https://blog.csdn.net/qq_63358859/article/details/133699476?spm=1001.2014.3001.5501)
+- [vue2 与 vue3 函数式组件](https://blog.csdn.net/qq_63358859/article/details/133635120?spm=1001.2014.3001.5501)
+- [vue 2 与 vue3 获取模版引用 （ref）的区别](https://blog.csdn.net/qq_63358859/article/details/133532229?spm=1001.2014.3001.5501)
+- [vue2 与 vue3 v-model 的区别](https://marketplace.visualstudio.com/items?itemName=FEMessage.fem-vscode-helper)
+- [vue2 版本](https://blog.csdn.net/qq_63358859/article/details/130442636?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169684271816800180612618%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=169684271816800180612618&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-7-130442636-null-null.nonecase&utm_term=render&spm=1018.2226.3001.4450)
+- [中文文档](https://gitee.com/childe-jia/form-render/wikis/%E6%96%87%E6%A1%A3/%E4%BB%8B%E7%BB%8D)
+
+## Props
+
+```ts
+export default {
+  // ...
+  props: {
+    /**
+     * support all el-form's props
+     * @see: https://element.eleme.io/#/zh-CN/component/form#form-attributes
+     */
+
+    /**
+     * 表单项的配置数组，每个表单项代表一个原子表单项
+     * the form config's array, each item represents a form-item
+     */
+    content: {
+      type: Array, // type：Content[], check Content's definition below
+      required: true
+    },
+
+    /**
+     * disable all form-items
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+
+/**
+ * 表单项的typescript定义
+ * 支持所有el-form-item's props。表单项组件本身的props定义在el上
+ * definition of form-item written in typescript.
+ * support all el-form-item's props. The component's props need to be set at prop el
+ */
+interface Content {
+  // 每一个原子都存在 id，用于存储该原子的值，不能重复
+  // key of form-item value in form value. Must be unique
+  id: string
+
+  /**
+   * 可以是element提供的所有表单组件类型，如传入'input'，则渲染出'el-input'
+   * 当type="group"时，可以创造复杂对象类型的表单数据，配合items使用。此时getFormValue()返回的是对象类型的数据，对象的每个属性对应items里的每一项
+   * support all element's form component, e.g., type 'input' will render as 'el-input'.
+   * you can create nested form value with type 'group' and use items to define that form value's shape. The type of this form value will be 'object'
+   */
+  type: string
+
+  /**
+   * 当type="group"时使用
+   * items内依然遵循同一层级的id不重复的原则
+   * using with type 'group'
+   * the `id` in each item of items must be unique
+   */
+  items: Content[]
+
+  /**
+   * 默认值
+   * FIXME: 别用关键字做 key
+   */
+  default?: any
+
+  /**
+   * 当 type === 'input' 时展示文本值
+   * 当 type === 'select' 时展示对应 label
+   * 对于其他组件等同于 disabled = true
+   */
+  readonly = false
+
+  /**
+   * @deprecated
+   */
+  enableWhen?: object | string
+
+  /**
+   * 传入一个方法，并返回 boolean，返回 true 时则隐藏该表单项
+   * formValue 为当前 form 的值，item 为当前表单项的定义
+   * hide the form-item when return true
+   * formValue is same as what getFormValue returns, and item is the config of this form-item
+   */
+  hidden?: (formValue: Object, item: Content) => boolean
+
+  /**
+   * 具有选择功能的原子表单可用此定义可选项
+   * use with type: select, radio-group, radio-button, checkbox-group, checkbox-button
+   */
+  options?: {label: string; value?: any}[]
+
+  /**
+   * 配置remote.url，即可远程配置组件的某个prop！
+   * remote接受以下属性：
+   * url: 远程接口的地址
+   * prop: 要注入的 prop 的名称，默认为 options
+   * request: 可选，请求方法
+   * dataPath: 可选，data在响应体中的路径
+   * onResponse: 可选，处理请求回来的数据
+   * onError: 可选，处理请求出错的情况
+   * 另外，针对 select、radio-group、checkbox-group，远程数据能自动映射成 el-option 选项！以下属性仅在此情况使用
+   * label: 可选，可直接配置远程数据中用作 label 的key
+   * value: 可选，可直接配置远程数据中用作 value 的key
+   * @see https://zhuanlan.zhihu.com/p/97827063
+   *
+   * use remote to set one prop! remote accept following props:
+   * url: remote api address
+   * prop: prop name that data inject
+   * request: optional, customize how to get your options
+   * dataPath: optional, data's path in response
+   * onResponse: optional, deal with your response
+   * onError: optional, deal with request error
+   * and, we treat select、radio-group、checkbox-group specially and the resp will be map as an el-option's group! following props only suitable for this case
+   * label: optional, label key in resp
+   * value: optional, value key in resp
+   */
+  remote?: {
+    url: string
+    request = () => this.$axios.get(url).then(resp => resp.data)
+    prop = 'options'
+    dataPath = ''
+    onResponse = resp => {
+      if (dataPath) resp = _get(resp, dataPath)
+      switch (this.data.type) {
+        case 'select':
+        case 'checkbox-group':
+        case 'radio-group':
+          return resp.map(item => ({
+            label: item[label],
+            value: item[value]
+          }))
+        default:
+          return resp
+      }
+    }
+    onError = error => console.error(error.message)
+    label = 'label'
+    value = 'value'
+  }
+
+  attrs?: object // html attributes
+  /**
+   * 用于定义具体原子表单（如el-input）的属性，比如定义el-input的placeholder
+   * use to define props of the actual component of this form-item, such as placeholder of el-input
+   */
+  el?: object
+
+  /**
+   * 使用自定义组件
+   * component适用于渲染局部注册组件和自定义组件，而type适用于带el-前缀的全局组件
+   * custom component
+   * use it when element's form components are not enough
+   */
+  component?: Vue
+
+  /**
+   * 是否覆盖自定义组件内置的校验规则
+   * `true` 为覆盖， 默认为 `false`
+   * whether to override the validation rules written in custom components
+   * `true` to override, default `false`
+   */
+  overrideRules: boolean
+
+  label?: string //set el-form-item's label
+  trim = true // trim value at change event
+
+  // 用于处理输入值，输入的值包括：1. default；2. v-model；3. updateForm。参数为整个表单的值对象或 updateForm 传入的对象
+  // 如果 inputFormat 返回 undefined，则不会更新此表单项
+  // obj is param you passed to updateForm. You can use this function to hijack this process and customize the form value
+  inputFormat?: (obj: any) => any
+
+  // 用于处理输出值，参数为对应组件返回值
+  // 如果处理后的值是对象类型，会覆盖（Object.assign）到整个表单的值上
+  // used to hijack the getFormValue's process and customize the return value
+  outputFormat?: (val: any) => any
+
+  // set el-form-item's rules
+  rules?: object
+
+  // @deprecated
+  atChange?: (id: string, value: any) => void
+
+  /**
+   * 监听表单项发出的事件
+   * listen to any events emitted by component of form item
+   * @param {any[]} args - what that event emits
+   * @param {function} updateForm - same as methods.updateForm
+   */
+  on?: {
+    [eventName: string]: (args: any[], updateForm: function) => void
+  }
+}
+
+/**
+ * a tour of typescript
+ */
+interface obj {
+  a: string // type string
+  b?: string // type string, optional
+  c = true // type boolean, optional, default true
+  d: string[] // type array, each item must be string
+  e: any // could be any valid js type
+  f: (a: number) => void // type function, which receives a param 'a' as number and return nothing
+  h: Vue // instance of Vue
+  i: {[a: string]: number} // type object, whose key is type string, and value is type number
+}
+```
+
+## Methods
+
+support all [el-form's methods](https://element.eleme.io/#/zh-CN/component/form#form-methods)
+
+## Slots
+
+| Slot     | Description                                 |
+| -------- | ------------------------------------------- |
+| default  | insert at bottom                            |
+| id:hello | insert before form-item whose id is 'hello' |
+
+## Inspiration
+
+thanks to [el-form-renderer](https://github.com/femessage/el-form-renderer/)

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+  
+  "name": "el-form-renderer-vue3", 
+
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "axios": "^1.5.1",
+    "element-plus": "^2.3.14",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.frompairs": "^4.0.1",
+    "lodash.get": "^4.4.2",
+    "lodash.has": "^4.5.2",
+    "lodash.includes": "^4.3.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.isplainobject": "^4.0.6",
+    "lodash.kebabcase": "^4.1.1",
+    "lodash.set": "^4.3.2",
+    "lodash.topairs": "^4.3.0",
+    "vue": "^3.3.4",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5"
+  }
+}
+

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,59 @@
+<template>
+  <nav class="box">
+    <router-link to="/">base</router-link> |
+
+    <router-link to="/checkboxGroup">checkbox-group</router-link> |
+
+    <router-link to="/content">content</router-link> |
+
+    <router-link to="/picker">date-picker</router-link> |
+
+    <router-link to="/deprecated">deprecated</router-link> |
+
+    <router-link to="/disabled">disabled</router-link> |
+
+    <router-link to="/el">el</router-link> |
+
+    <router-link to="/getcomponent">get-component-by-id</router-link> |
+
+    <router-link to="/getform">get-form-value</router-link> |
+
+    <router-link to="/hidden">hidden</router-link> |
+
+    <router-link to="/next">next-tick</router-link> |
+
+    <router-link to="/about">on</router-link> |
+
+    <router-link to="/radioGroup">radio-group</router-link> |
+
+    <router-link to="/readonly">readonly</router-link> |
+
+    <router-link to="/remote">remote</router-link> |
+
+    <router-link to="/rules">rules</router-link> |
+
+    <router-link to="/rulesPlus">rulesPlus</router-link> |
+
+    <router-link to="/setoptios">set-options </router-link> |
+
+    <router-link to="/label">slot-label</router-link> |
+
+    <router-link to="/slot">slot</router-link> |
+
+    <router-link to="/update">update-form</router-link> |
+
+    <router-link to="/vmodel">v-model</router-link> |
+
+    <router-link to="/format">value-format</router-link> |
+
+    <router-link to="/MyInput">MyInput</router-link> |
+
+    <router-link to="/testAttrs">testAttrs</router-link> |
+  </nav>
+  <router-view></router-view>
+</template>
+<style>
+.box {
+  margin: 20px 0;
+}
+</style>

package/src/ChildCom.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <button class="btn" @click="onClick" v-bind="$attrs">click me</button>
+    <br />
+    <span>Fallthrough attribute: {{ $attrs }}</span>
+  </div>
+</template>
+
+<script setup>
+import { useAttrs } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
+defineProps({
+  msg: {
+    type: String,
+  },
+});
+const attrs = useAttrs();
+console.log(attrs);
+const onClick = () => {
+  console.log("子组件");
+};
+</script>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/femessage/components/render-form-group.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <template v-for="(item, index) in data.items">
+      <slot :name="`id:${item.id}`" />
+      <slot :name="`$id:${item.id}`" />
+
+      <render-form-item
+        :ref="
+          (el) => {
+            customComponent[`formItem-${item.id}`] = el;
+          }
+        "
+        :prop="`${data.id}.${item.id}`"
+        :data="item"
+        :value="value"
+        :item-value="itemValue[item.id]"
+        :disabled="disabled"
+        :readonly="readonly"
+        :options="options[item.id]"
+        @updateValue="updateValue"
+      />
+    </template>
+  </div>
+</template>
+<script setup>
+import RenderFormItem from "./render-form-item.vue";
+const emit = defineEmits(["updateValue"]);
+import { ref } from "vue";
+let props = defineProps({
+  data: Object,
+  itemValue: {},
+  value: Object,
+  disabled: Boolean,
+  readonly: Boolean,
+  options: Object,
+});
+let customComponent = ref([]);
+const updateValue = ({ id, value }) => {
+  emit("updateValue", {
+    id: props.data.id,
+    value: {
+      ...props.itemValue,
+      [id]: value,
+    },
+  });
+};
+defineExpose({ customComponent });
+</script>